/* ============================================================================
   FOOLSCAP  ·  design system
   ----------------------------------------------------------------------------
   One stylesheet for the whole suite. Every game inherits its palette, type,
   spacing and components from here, so the six games read as one publication.

   The look is a British broadsheet puzzle page: warm paper, hairline rules,
   an editorial serif masthead over a grotesque UI face, and one accent colour.

   Feedback colours are deliberately blue/ochre rather than the green/yellow
   used elsewhere in the category. Two reasons: it is not another paper's
   signature, and blue/ochre survives deuteranopia and protanopia, which
   green/yellow does not.
   ========================================================================= */

/* ---------------------------------------------------------------- tokens -- */

:root {
  /* Paper and ink.
     Laid ivory rather than salmon: warmer than white, calmer than the
     financial pink, and closer to a good book than a newspaper. Raised
     surfaces go to true white, which is what makes ivory read as stock
     rather than as a beige background. */
  --fs-paper: #faf5ee;
  --fs-paper-raised: #ffffff;
  --fs-paper-sunk: #f2ece2;
  --fs-ink: #1a1712;
  --fs-ink-soft: #5a5248;
  --fs-ink-faint: #6f6558;
  --fs-rule: #e3dbcd;
  --fs-rule-strong: #b9ac98;

  /* Brand. Oxblood, not pillar-box: the colour of a law report binding. Deep
     enough to be quiet, saturated enough to carry a rule across the page. */
  --fs-claret: #7d1b28;
  --fs-claret-ink: #ffffff;
  --fs-brass: #8c6d1f;

  /* Puzzle feedback. Named by meaning, not by colour, so games stay legible.
     Navy and brass on ivory is the register of an engraved certificate, and
     unlike green/yellow it survives both common forms of colour blindness. */
  --fs-exact: #1f3a5f;
  --fs-exact-ink: #ffffff;
  --fs-present: #a8792a;
  --fs-present-ink: #ffffff;
  --fs-absent: #a79e90;
  --fs-absent-ink: #ffffff;
  --fs-tile-empty-border: #d8cdba;

  /* Type. Caslon is the English book face and carries the masthead; Franklin
     is the newspaper interface grotesque and carries everything functional.

     Caslon is two tokens, not one, and the split is the whole point. The
     DISPLAY cut is drawn for headline sizes and is used only above about
     24px; the TEXT cut has the sturdier strokes that survive a phone screen
     and carries every other serif. They were the same token until the italic
     game notes at 15px were read on an actual handset and found to be grey
     mush. See assets/type.css. */
  --fs-display: "Caslon Display", "Caslon Text", Georgia, "Times New Roman",
    serif;
  --fs-serif: "Caslon Text", Georgia, "Times New Roman", serif;
  --fs-sans: "Franklin", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  /* The floor for small type. Every uppercase label, tag and caption in the
     suite sits here or above. Below it, letter-spaced capitals stop being
     text and start being texture: the hub's category tags were 8px. */
  --fs-micro: 0.6875rem; /* 11px */
  --fs-small: 0.75rem; /* 12px */

  /* Spacing, on a 4px base */
  --fs-1: 0.25rem;
  --fs-2: 0.5rem;
  --fs-3: 0.75rem;
  --fs-4: 1rem;
  --fs-5: 1.5rem;
  --fs-6: 2rem;
  --fs-7: 3rem;

  --fs-radius: 3px;
  --fs-radius-lg: 6px;

  /* A single measure keeps every game the same width on desktop */
  --fs-measure: 30rem;

  --fs-shadow: 0 1px 1px rgba(26, 23, 18, 0.04);
  --fs-shadow-lift: 0 1px 2px rgba(26, 23, 18, 0.06),
    0 16px 40px rgba(26, 23, 18, 0.10);

  --fs-ease: cubic-bezier(0.2, 0, 0.15, 1);
}

/* Dark mode is a genuine second palette, not an inversion. Paper becomes
   pressroom black; the accent lifts so it still reads on a dark ground. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fs-paper: #14120f;
    --fs-paper-raised: #1f1c18;
    --fs-paper-sunk: #0e0d0b;
    --fs-ink: #f4ede3;
    --fs-ink-soft: #b3aa9d;
    --fs-ink-faint: #8f8778;
    --fs-rule: #34302a;
    --fs-rule-strong: #4c463d;

    --fs-claret: #d4566a;
    --fs-claret-ink: #14120f;
    --fs-brass: #d9a84e;

    --fs-exact: #6f9ad8;
    --fs-exact-ink: #0d1119;
    --fs-present: #d9a84e;
    --fs-present-ink: #1a1509;
    --fs-absent: #514b42;
    --fs-absent-ink: #dad4c9;
    --fs-tile-empty-border: #464037;

    --fs-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.3);
    --fs-shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.5),
      0 12px 32px rgba(0, 0, 0, 0.45);
  }
}

:root[data-theme="dark"] {
  --fs-paper: #14120f;
  --fs-paper-raised: #1f1c18;
  --fs-paper-sunk: #0e0d0b;
  --fs-ink: #f4ede3;
  --fs-ink-soft: #b3aa9d;
  --fs-ink-faint: #8f8778;
  --fs-rule: #34302a;
  --fs-rule-strong: #4c463d;

  --fs-claret: #d4566a;
  --fs-claret-ink: #14120f;
  --fs-brass: #d9a84e;

  --fs-exact: #6f9ad8;
  --fs-exact-ink: #0d1119;
  --fs-present: #d9a84e;
  --fs-present-ink: #1a1509;
  --fs-absent: #514b42;
  --fs-absent-ink: #dad4c9;
  --fs-tile-empty-border: #464037;

  --fs-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.3);
  --fs-shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.5), 0 12px 32px rgba(0, 0, 0, 0.45);
}

/* ------------------------------------------------------------------ base -- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  /* Figures line up in columns and stop jumping as scores change. */
  font-variant-numeric: tabular-nums;
  /* dvh rather than vh: on iOS Safari the URL bar otherwise steals height and
     the on-screen keyboard row falls below the fold. */
  min-height: 100dvh;
  background: var(--fs-paper);
  color: var(--fs-ink);
  font-family: var(--fs-sans);
  font-size: 1rem;
  line-height: 1.62;
  font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
  /* Games are tap-heavy: kill the 300ms delay and the grey flash. */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}

h1,
h2,
h3 {
  font-family: var(--fs-serif);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: 0;
  margin: 0;
}

p {
  margin: 0 0 var(--fs-4);
}

a {
  color: inherit;
  text-decoration-color: var(--fs-rule-strong);
  text-underline-offset: 0.18em;
}

a:hover {
  text-decoration-color: var(--fs-claret);
}

button {
  font: inherit;
  color: inherit;
  margin: 0;
}

:focus-visible {
  outline: 2px solid var(--fs-claret);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Respect the OS setting. Games still update, they just stop animating. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------- shell ---- */

.fs-shell {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  /* Notched phones: keep content clear of the home indicator and rounded corners */
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

.fs-wrap {
  width: 100%;
  max-width: var(--fs-measure);
  margin-inline: auto;
  padding-inline: var(--fs-4);
}

.fs-wrap--wide {
  max-width: 46rem;
}

.fs-main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* ------------------------------------------------------------- masthead --- */

.fs-masthead {
  border-bottom: 1px solid var(--fs-ink);
  /* The double rule is the single most newspaper-ish detail in the system. */
  box-shadow: 0 3px 0 -2px var(--fs-ink);
  background: var(--fs-paper);
  position: sticky;
  top: 0;
  z-index: 40;
  padding-top: env(safe-area-inset-top);
}

/* A claret hairline across the very top of the page. The financial weeklies
   use a red bar to signal authority before a single word is read; this is the
   restrained version of that idea. */
.fs-masthead::before {
  content: "";
  display: block;
  height: 3px;
  background: var(--fs-claret);
}

.fs-masthead__inner {
  display: grid;
  /* minmax(0, 1fr), not 1fr. A bare 1fr track has an automatic minimum of its
     content, so the nowrap title refuses to shrink and shoves the button group
     off the right edge on a 320px screen. */
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--fs-2);
  min-height: 3.25rem;
}

.fs-masthead__title {
  font-family: var(--fs-serif);
  font-size: 1.3125rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1.1;
  /* Truncate rather than push. The buttons either side must stay reachable. */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fs-masthead__title small {
  display: block;
  font-family: var(--fs-sans);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fs-ink-faint);
  margin-top: 2px;
}

/* The wordmark proper, used on the hub. Caslon set large, with the wide
   letterspacing an engraved masthead would have. */
.fs-wordmark {
  font-family: var(--fs-display);
  font-weight: 700;
  font-size: clamp(2.5rem, 13vw, 4.25rem);
  letter-spacing: 0.02em;
  line-height: 0.95;
  text-align: center;
  margin: 0;
}

.fs-wordmark__sub {
  font-family: var(--fs-sans);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--fs-claret);
  text-align: center;
  margin: var(--fs-2) 0 0;
}

.fs-iconbtn {
  display: inline-grid;
  place-items: center;
  /* 44px is the accessible minimum tap target; do not shrink these. */
  width: 2.75rem;
  height: 2.75rem;
  background: none;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  color: var(--fs-ink-soft);
  transition: background 0.15s var(--fs-ease), color 0.15s var(--fs-ease);
}

.fs-iconbtn:hover {
  background: var(--fs-paper-sunk);
  color: var(--fs-ink);
}

.fs-iconbtn svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------------------------------------------------------------- rules --- */

.fs-rule {
  border: 0;
  border-top: 1px solid var(--fs-rule);
  margin: var(--fs-5) 0;
}

.fs-rule--double {
  border-top: 1px solid var(--fs-ink);
  box-shadow: 0 3px 0 -2px var(--fs-ink);
}

/* ---------------------------------------------------------------- type ---- */

.fs-eyebrow {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fs-ink-faint);
  margin: 0 0 var(--fs-2);
}

.fs-dateline {
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--fs-ink-faint);
  font-variant-numeric: tabular-nums;
}

.fs-lede {
  font-family: var(--fs-serif);
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--fs-ink-soft);
}

.fs-hint {
  font-size: 0.8125rem;
  color: var(--fs-ink-faint);
}

/* -------------------------------------------------------------- buttons --- */

.fs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--fs-2);
  min-height: 2.75rem;
  padding: 0 var(--fs-5);
  background: var(--fs-paper-raised);
  color: var(--fs-ink);
  border: 1px solid var(--fs-ink);
  border-radius: 2px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s var(--fs-ease), color 0.15s var(--fs-ease),
    transform 0.1s var(--fs-ease);
}

.fs-btn:hover {
  background: var(--fs-ink);
  color: var(--fs-paper);
}

.fs-btn:active {
  transform: translateY(1px);
}

.fs-btn--primary {
  background: var(--fs-ink);
  color: var(--fs-paper);
}

.fs-btn--primary:hover {
  background: var(--fs-claret);
  border-color: var(--fs-claret);
  color: var(--fs-claret-ink);
}

.fs-btn--ghost {
  border-color: var(--fs-rule-strong);
  color: var(--fs-ink-soft);
}

.fs-btn--sm {
  min-height: 2.25rem;
  padding: 0 var(--fs-4);
  font-size: 0.8125rem;
}

.fs-btn[disabled] {
  opacity: 0.4;
  pointer-events: none;
}

/* ---------------------------------------------------------------- tiles --- */

.fs-tile {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  /* Without this, a tile in a 1fr grid track keeps an automatic minimum equal
     to its aspect-ratio-derived size, so the track cannot shrink and the row
     overflows its container. */
  min-width: 0;
  min-height: 0;
  background: var(--fs-paper-raised);
  border: 1px solid var(--fs-tile-empty-border);
  border-radius: var(--fs-radius);
  font-family: var(--fs-sans);
  font-weight: 700;
  font-size: clamp(1.25rem, 7vw, 1.75rem);
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  user-select: none;
  transition: border-color 0.1s var(--fs-ease), transform 0.1s var(--fs-ease);
}

.fs-tile[data-filled="true"] {
  border-color: var(--fs-ink-faint);
  animation: fs-pop 0.1s var(--fs-ease);
}

.fs-tile[data-state="exact"] {
  background: var(--fs-exact);
  border-color: var(--fs-exact);
  color: var(--fs-exact-ink);
}

.fs-tile[data-state="present"] {
  background: var(--fs-present);
  border-color: var(--fs-present);
  color: var(--fs-present-ink);
}

.fs-tile[data-state="absent"] {
  background: var(--fs-absent);
  border-color: var(--fs-absent);
  color: var(--fs-absent-ink);
}

/* Optional shape cues, for players who cannot rely on hue at all.
   Toggled by a body-level attribute so every game picks it up at once. */
body[data-glyphs="on"] .fs-tile[data-state="exact"]::after,
body[data-glyphs="on"] .fs-tile[data-state="present"]::after {
  position: absolute;
  font-size: var(--fs-micro);
  font-weight: 700;
  transform: translate(1.15em, -1.15em);
  opacity: 0.85;
}

body[data-glyphs="on"] .fs-tile {
  position: relative;
}

body[data-glyphs="on"] .fs-tile[data-state="exact"]::after {
  content: "●";
}

body[data-glyphs="on"] .fs-tile[data-state="present"]::after {
  content: "▲";
}

@keyframes fs-pop {
  50% {
    transform: scale(1.06);
  }
}

@keyframes fs-flip {
  0% {
    transform: rotateX(0);
  }
  50% {
    transform: rotateX(-90deg);
  }
  100% {
    transform: rotateX(0);
  }
}

.fs-tile--flip {
  animation: fs-flip 0.45s var(--fs-ease) both;
}

@keyframes fs-shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}

.fs-shake {
  animation: fs-shake 0.5s var(--fs-ease);
}

@keyframes fs-rise {
  from {
    transform: translateY(6px);
    opacity: 0;
  }
}

.fs-rise {
  animation: fs-rise 0.35s var(--fs-ease) both;
}

/* ------------------------------------------------------------- keyboard --- */

.fs-keyboard {
  display: flex;
  flex-direction: column;
  gap: var(--fs-1);
  padding: var(--fs-2) var(--fs-1)
    calc(var(--fs-2) + env(safe-area-inset-bottom));
  user-select: none;
}

.fs-keyboard__row {
  display: flex;
  gap: 0.3rem;
  justify-content: center;
}

.fs-key {
  /* A zero basis, not auto. With `flex: 1 1 auto` each key starts from its own
     glyph width and grows from there, so a narrow letter like I ended up 21px
     wide against a wider W. A zero basis divides the row equally. */
  flex: 1 1 0;
  min-width: 0;
  height: 3.25rem;
  display: grid;
  place-items: center;
  background: var(--fs-paper-sunk);
  border: 1px solid var(--fs-rule);
  border-radius: 2px;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.1s var(--fs-ease), color 0.1s var(--fs-ease),
    transform 0.06s var(--fs-ease);
}

.fs-key:active {
  transform: translateY(1px);
}

.fs-key--wide {
  flex: 1.5 1 0;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
}

.fs-key[data-state="exact"] {
  background: var(--fs-exact);
  border-color: var(--fs-exact);
  color: var(--fs-exact-ink);
}

.fs-key[data-state="present"] {
  background: var(--fs-present);
  border-color: var(--fs-present);
  color: var(--fs-present-ink);
}

.fs-key[data-state="absent"] {
  background: var(--fs-absent);
  border-color: var(--fs-absent);
  color: var(--fs-absent-ink);
  opacity: 0.75;
}

/* ---------------------------------------------------------------- toast --- */

.fs-toaster {
  position: fixed;
  top: 4.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: var(--fs-2);
  align-items: center;
  pointer-events: none;
  width: max-content;
  max-width: min(20rem, calc(100vw - 2rem));
}

.fs-toast {
  background: var(--fs-ink);
  color: var(--fs-paper);
  padding: var(--fs-3) var(--fs-4);
  border-radius: var(--fs-radius-lg);
  font-size: 0.8125rem;
  font-weight: 600;
  text-align: center;
  box-shadow: var(--fs-shadow-lift);
  animation: fs-rise 0.2s var(--fs-ease) both;
}

.fs-toast--fade {
  opacity: 0;
  transition: opacity 0.4s var(--fs-ease);
}

/* ---------------------------------------------------------------- modal --- */

.fs-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: end center;
  background: rgba(23, 22, 20, 0.45);
  backdrop-filter: blur(2px);
  animation: fs-fade 0.2s var(--fs-ease) both;
}

@media (min-width: 40rem) {
  .fs-modal {
    place-items: center;
  }
}

@keyframes fs-fade {
  from {
    opacity: 0;
  }
}

.fs-modal__panel {
  width: 100%;
  max-width: 26rem;
  max-height: 88dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--fs-paper);
  border-radius: var(--fs-radius-lg) var(--fs-radius-lg) 0 0;
  padding: var(--fs-5) var(--fs-5)
    calc(var(--fs-5) + env(safe-area-inset-bottom));
  box-shadow: var(--fs-shadow-lift);
  animation: fs-slide 0.28s var(--fs-ease) both;
}

@media (min-width: 40rem) {
  .fs-modal__panel {
    border-radius: var(--fs-radius-lg);
    padding-bottom: var(--fs-5);
  }
}

@keyframes fs-slide {
  from {
    transform: translateY(14px);
    opacity: 0;
  }
}

.fs-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--fs-3);
  margin-bottom: var(--fs-4);
}

.fs-modal__title {
  font-family: var(--fs-display);
  font-size: 1.375rem;
}

/* ---------------------------------------------------------------- stats --- */

.fs-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--fs-2);
  text-align: center;
  margin-bottom: var(--fs-5);
}

.fs-stat__num {
  font-family: var(--fs-serif);
  font-size: 1.875rem;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.fs-stat__label {
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fs-ink-faint);
  margin-top: var(--fs-1);
}

/* ------------------------------------------------------------ utilities --- */

.fs-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.fs-center {
  text-align: center;
}

.fs-stack > * + * {
  margin-top: var(--fs-4);
}

.fs-flex {
  display: flex;
  gap: var(--fs-3);
  align-items: center;
}

.fs-flex--center {
  justify-content: center;
}

/* -------------------------------------------------------- game footer ---- */

/* The paper's running order, at the foot of every game. Three columns so the
   "all puzzles" link sits dead centre however long the two names are, and a
   rule above because this is a footer and a newspaper marks its footers. */
.fs-gamenav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--fs-3);
  max-width: var(--fs-measure);
  margin: var(--fs-6) auto 0;
  padding: var(--fs-4) var(--fs-4) calc(var(--fs-5) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--fs-rule);
}

.fs-gamenav__link {
  display: flex;
  flex-direction: column;
  gap: 1px;
  text-decoration: none;
  min-width: 0;
}

.fs-gamenav__link--next {
  text-align: right;
}

.fs-gamenav__dir {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fs-ink-faint);
}

.fs-gamenav__name {
  font-family: var(--fs-serif);
  font-size: 1.0625rem;
  line-height: 1.15;
  /* A long name truncates rather than wrapping under its own label. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fs-gamenav__all {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fs-ink-faint);
  text-decoration: none;
  padding: var(--fs-2);
  white-space: nowrap;
}

.fs-gamenav__all:hover,
.fs-gamenav__link:hover .fs-gamenav__name {
  color: var(--fs-claret);
}

/* -- feedback --------------------------------------------------------------
   A plain sentence rather than a fourth icon in the masthead. Four icons on a
   320px screen crowd the title, and a route nobody can find collects nothing,
   which is the only failure mode that matters for this feature. */

.fs-feedbackline {
  margin: var(--fs-3) 0 0;
  text-align: center;
}

.fs-linkbtn {
  font-family: var(--fs-serif);
  font-size: var(--fs-small);
  color: var(--fs-ink-soft);
  background: none;
  border: 0;
  padding: var(--fs-1) var(--fs-2);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.fs-linkbtn:hover {
  color: var(--fs-claret);
}

.fs-feedback__fault summary {
  font-family: var(--fs-sans);
  font-size: var(--fs-small);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fs-ink-soft);
  cursor: pointer;
}

.fs-feedback__reasons {
  flex-wrap: wrap;
  margin-top: var(--fs-2);
}

.fs-feedback__text {
  width: 100%;
  margin-top: var(--fs-1);
  padding: var(--fs-2);
  font: inherit;
  font-size: 1rem;
  color: var(--fs-ink);
  background: var(--fs-paper-raised);
  border: 1px solid var(--fs-rule-strong);
  border-radius: 2px;
  resize: vertical;
}