/* ============================================================================
   FictaScriptor — the design system.

   Ground: sage-slate in light, deep ink in dark. Frosted panels over soft
   colour. One accent, brass. Fraunces for display, DM Sans for the interface,
   Spectral for anything the author actually reads as prose.

   Every colour is a token declared on bare :root first. A colour whose only
   definition sits inside a media query or a [data-theme] block does not exist
   in the un-stamped state, which is what most viewers are in.
   ============================================================================ */

:root {
  --ground:        #99AB9E;
  --wash-a:        rgba(169,194,164,0.50);
  --wash-b:        rgba(198,179,134,0.42);
  --wash-c:        rgba(111,142,151,0.38);

  /* Held well below opaque on purpose. At 0.58 these read as solid white cards
     sitting on a pale field; letting the sage through tints them, and the bright
     hairline plus the shadow is what then reads as glass rather than as paper. */
  --panel:         rgba(255,255,255,0.40);
  --panel-solid:   rgba(255,255,255,0.60);
  --panel-sunk:    rgba(255,255,255,0.22);
  --hairline:      rgba(255,255,255,0.66);
  --edge:          rgba(26,38,30,0.16);

  /* Darkened a step with the panels. Secondary text that cleared 4.5:1 against
     near-white does not clear it against a sage-tinted panel. */
  --ink:           #141B17;
  --ink-2:         #2B3832;
  --muted:         #41504A;
  --faint:         #5A6961;

  --accent:        #E8A33D;
  --accent-soft:   rgba(232,163,61,0.18);
  --accent-ink:    #7A520D;
  --on-accent:     #2A1D06;

  --good:          #2F7D5B;
  --warn:          #B7791F;
  --crit:          #B04A3C;

  --shadow-lift:   0 18px 40px -18px rgba(18,28,22,0.45);
  --shadow-panel:  0 28px 64px -28px rgba(18,28,22,0.55);

  --r-panel: 26px;
  --r-card:  16px;
  --r-chip:  999px;

  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-ui: "DM Sans", "Segoe UI", system-ui, sans-serif;
  --font-prose: "Spectral", Georgia, "Times New Roman", serif;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:      #101820;
    --wash-a:      rgba(27,48,64,0.90);
    --wash-b:      rgba(44,34,52,0.85);
    --wash-c:      rgba(20,50,58,0.80);

    --panel:       rgba(255,255,255,0.055);
    --panel-solid: rgba(255,255,255,0.085);
    --panel-sunk:  rgba(0,0,0,0.20);
    --hairline:    rgba(255,255,255,0.10);
    --edge:        rgba(255,255,255,0.09);

    --ink:         #E9EEF0;
    --ink-2:       #C6D1D5;
    --muted:       #93A1AA;
    --faint:       #74838C;

    --accent-soft: rgba(232,163,61,0.16);
    --accent-ink:  #F2BE63;
    --on-accent:   #241802;

    --good:        #58C295;
    --warn:        #E0B057;
    --crit:        #E3796A;

    --shadow-lift:  0 18px 40px -18px rgba(0,0,0,0.70);
    --shadow-panel: 0 30px 70px -30px rgba(0,0,0,0.85);

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --ground:      #101820;
  --wash-a:      rgba(27,48,64,0.90);
  --wash-b:      rgba(44,34,52,0.85);
  --wash-c:      rgba(20,50,58,0.80);

  --panel:       rgba(255,255,255,0.055);
  --panel-solid: rgba(255,255,255,0.085);
  --panel-sunk:  rgba(0,0,0,0.20);
  --hairline:    rgba(255,255,255,0.10);
  --edge:        rgba(255,255,255,0.09);

  --ink:         #E9EEF0;
  --ink-2:       #C6D1D5;
  --muted:       #93A1AA;
  --faint:       #74838C;

  --accent-soft: rgba(232,163,61,0.16);
  --accent-ink:  #F2BE63;
  --on-accent:   #241802;

  --good:        #58C295;
  --warn:        #E0B057;
  --crit:        #E3796A;

  --shadow-lift:  0 18px 40px -18px rgba(0,0,0,0.70);
  --shadow-panel: 0 30px 70px -30px rgba(0,0,0,0.85);

  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;

  /*
    The wash is painted here rather than by a separate layer of blurred elements.
    Three 46vw divs under a 90px blur is a lot of compositing for something a
    radial gradient does natively, more softly, and without a stacking context to
    reason about.
  */
  background:
    radial-gradient(62vw 62vw at 6% -8%,  var(--wash-a), transparent 62%),
    radial-gradient(52vw 52vw at 98% 14%, var(--wash-b), transparent 62%),
    radial-gradient(58vw 58vw at 46% 112%, var(--wash-c), transparent 62%),
    var(--ground);
  background-attachment: fixed, fixed, fixed, fixed;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Soft colour behind the glass. Without something to refract, frosted panels
   read as flat grey rectangles. */

/* The working area is the window, not a column down the middle of it. There is no max-width
   here on purpose: an author on a wide screen bought that screen to see their book on it, and a
   1240px band with half the monitor empty either side is a website's instinct rather than an
   application's. What a wide window buys is a longer chapter list, a bigger bible and room for
   the panels - not longer lines of prose, which have their own measure further down. */

.shell {
  position: relative; z-index: 1;
  width: 100%; margin: 0 auto;
  padding: 22px clamp(22px, 2.2vw, 60px) 60px;
  display: flex; flex-direction: column; gap: 18px;
}

/* ------------------------------------------------------------------ glass */

.glass {
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: var(--r-panel);
  backdrop-filter: blur(22px) saturate(1.3);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  box-shadow: var(--shadow-panel);
}

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

h1, h2, h3 {
  font-family: var(--font-display); font-weight: 500; margin: 0;
  text-wrap: balance; letter-spacing: -0.015em;
}
h1 { font-size: 34px; font-variation-settings: "SOFT" 24, "WONK" 1, "opsz" 72; line-height: 1.12; }
h2 { font-size: 22px; font-variation-settings: "SOFT" 20, "opsz" 36; }
h3 { font-size: 16px; font-variation-settings: "opsz" 20; }

.eyebrow {
  font-size: 11px; font-weight: 500; letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint); margin: 0;
}
.lede { color: var(--muted); max-width: 62ch; margin: 6px 0 0; }
.note { font-size: 12.5px; color: var(--faint); }

/* ------------------------------------------------------------------ topbar */

.topbar { display: flex; align-items: center; gap: 16px; padding: 12px 16px; flex-wrap: wrap; }

.wordmark {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 600; font-size: 19px;
  font-variation-settings: "SOFT" 30, "WONK" 1, "opsz" 24;
  letter-spacing: -.01em; padding-right: 6px;
  color: inherit; text-decoration: none;
}
/* The monogram, where a letter in an accent tile used to be.

   No tile behind it and no shadow under it: the mark is navy and purple on nothing, and the
   accent green it used to sit on fought both. Its own silhouette is the shape now, which is
   what a logo is for. */
.mark {
  width: 30px; height: 30px; flex: none;
  object-fit: contain;
}

/* Dark mode would otherwise leave the navy half of the mark sitting on near-black. A little
   lift is enough - inverting or recolouring somebody's logo is not ours to do. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mark { filter: brightness(1.35) saturate(1.1); }
}
:root[data-theme="dark"] .mark { filter: brightness(1.35) saturate(1.1); }

/* The full lock-up, for the two places with room to read it. */
.wordmark-full {
  display: block;
  width: 190px; height: auto;
  margin: 0 auto 4px;
}

.segmented {
  display: flex; gap: 2px; padding: 4px; margin-right: auto;
  background: var(--panel-sunk); border: 1px solid var(--edge); border-radius: var(--r-chip);
}
.segmented a, .segmented button {
  font: inherit; font-size: 13.5px; font-weight: 500;
  color: var(--muted); background: transparent; border: 0;
  padding: 7px 16px; border-radius: var(--r-chip);
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background .18s, color .18s;
}
.segmented a:hover, .segmented button:hover { color: var(--ink); }
.segmented .active {
  background: var(--panel-solid); color: var(--ink); box-shadow: var(--shadow-lift);
}

.icon-btn {
  width: 38px; height: 38px; flex: none;
  display: grid; place-items: center; border-radius: 12px;
  border: 1px solid var(--edge); background: var(--panel-sunk);
  color: var(--ink-2); cursor: pointer;
  transition: background .18s, color .18s;
}
.icon-btn:hover { background: var(--panel-solid); color: var(--ink); }
.icon-btn svg { width: 17px; height: 17px; }

.me {
  display: flex; align-items: center; gap: 9px;
  padding: 4px 12px 4px 4px; border-radius: var(--r-chip);
  background: var(--panel-sunk); border: 1px solid var(--edge);
  color: inherit; text-decoration: none;
}
.me .av {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  display: grid; place-items: center; color: #FFF6E8; font-size: 12px; font-weight: 600;
}
.me .nm { font-size: 13px; font-weight: 500; }
.me .pl { font-size: 11px; color: var(--faint); }

/* ------------------------------------------------------------------ controls */

.btn {
  font: inherit; font-size: 13px; font-weight: 500;
  border-radius: var(--r-chip); padding: 9px 17px;
  border: 1px solid var(--edge); background: var(--panel-sunk); color: var(--ink);
  cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
  text-decoration: none; white-space: nowrap;
}
.btn:hover { background: var(--panel-solid); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn svg { width: 14px; height: 14px; }

.btn-ai {
  background: var(--accent); border-color: var(--accent); color: var(--on-accent);
  box-shadow: 0 6px 18px -8px var(--accent);
}
.btn-ai:hover { background: var(--accent); filter: brightness(1.06); }

.btn-lg { font-size: 14.5px; padding: 12px 24px; }

:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px;
}

.field { display: flex; flex-direction: column; gap: 5px; }
.field label { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }

.input, .textbox {
  font: inherit; color: var(--ink);
  background: var(--panel-sunk); border: 1px solid var(--edge);
  border-radius: 11px; padding: 10px 13px; width: 100%;
}
.input::placeholder, .textbox::placeholder { color: var(--faint); }

/* Every long-form box in the application: a character's details, the setting, a book overview,
   a section of the idea, a blurb. They hold sentences, so they keep a measure for the same
   reason the manuscript editor does - the window got wider, the eye did not. Left aligned
   rather than centred, so the box still starts under its own label. */
.textbox {
  font-family: var(--font-prose); font-size: 15.5px; line-height: 1.65;
  color: var(--ink-2); border-radius: var(--r-card); padding: 16px 18px;
  min-height: 160px; resize: vertical; max-width: 82ch;
}

.pill {
  font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  padding: 3px 9px; border-radius: var(--r-chip); white-space: nowrap;
  border: 1px solid transparent;
}
.pill-accent { background: var(--accent-soft); color: var(--accent-ink); }
.pill-quiet  { background: var(--panel-solid); color: var(--faint); border-color: var(--edge); }

.row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* The AI actions where they repeat - once per chapter down an outline, once per cover face.
   Quieter and tighter than a section's own buttons, because thirty of them at full size would
   read as the point of the screen rather than something available on each row. */
.actions-tight { gap: 6px; margin-top: 2px; }

.btn-sm {
  font-size: 12px; padding: 4px 10px; border-radius: 9px;
}

/* A proposal sits under the box it would replace, indented and marked, so it is never mistaken
   for the thing itself. */
.proposal {
  margin-top: 10px;
  border-left: 3px solid var(--accent);
}
.proposal .prose p { font-size: 14px; }

.banner {
  border-radius: var(--r-card); padding: 11px 15px; font-size: 13.5px;
  border: 1px solid var(--edge); background: var(--panel-sunk);
}
.banner-bad { border-color: var(--crit); color: var(--crit); }

/* ------------------------------------------------------------------ library */

.hero {
  padding: 26px 28px; display: flex; align-items: flex-end;
  justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.stats { display: flex; gap: 26px; }
.stat .n {
  font-family: var(--font-display); font-size: 30px;
  font-variation-settings: "opsz" 48, "SOFT" 18;
  line-height: 1; font-variant-numeric: tabular-nums;
}
.stat .l { font-size: 12px; color: var(--faint); margin-top: 5px; }

.shelf {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 18px; padding: 22px;
}

.work {
  text-align: left; background: none; border: 0; padding: 0; font: inherit;
  color: inherit; cursor: pointer; text-decoration: none;
  display: flex; flex-direction: column; gap: 11px;
}
.work:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--r-card); }

.cover {
  aspect-ratio: 2 / 3; border-radius: 10px 4px 4px 10px;
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 16px 14px 14px 20px; box-shadow: var(--shadow-lift);
  transition: transform .25s cubic-bezier(.2,.8,.3,1), box-shadow .25s;
}
.work:hover .cover { transform: translateY(-5px) rotate(-.6deg); box-shadow: 0 26px 48px -20px rgba(10,16,13,.6); }

/* The binding edge: the one detail that makes a rectangle read as a book. */
.cover::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 9px;
  background: linear-gradient(90deg, rgba(0,0,0,.34), rgba(0,0,0,0));
}
.cover .ct {
  font-family: var(--font-display); font-size: 19px; line-height: 1.1;
  font-variation-settings: "SOFT" 10, "WONK" 1, "opsz" 36;
  color: #FFF8EC; text-shadow: 0 2px 10px rgba(0,0,0,.45);
}
.cover .cb {
  font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase;
  color: rgba(255,248,236,.72);
}
.cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.work .wt { font-weight: 600; font-size: 14.5px; line-height: 1.25; }
.work .wm {
  font-size: 12px; color: var(--faint);
  display: flex; align-items: center; gap: 7px; margin-top: 2px; flex-wrap: wrap;
}
.dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .5; flex: none; }

.new-work {
  display: grid; place-items: center; aspect-ratio: 2/3; border-radius: 10px;
  border: 1.5px dashed var(--edge); background: var(--panel-sunk);
  color: var(--muted); font-size: 13px; gap: 8px; text-align: center; padding: 16px;
}

.empty {
  padding: 60px 28px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}

/* ------------------------------------------------------------------ sign-in */

.auth-wrap { min-height: 100dvh; display: grid; place-items: center; padding: 24px; position: relative; z-index: 1; }
.auth { width: 100%; max-width: 420px; padding: 32px 30px; display: flex; flex-direction: column; gap: 18px; }
.auth .wordmark { font-size: 22px; }

.channel {
  display: flex; align-items: center; gap: 13px; width: 100%; text-align: left;
  font: inherit; color: inherit; cursor: pointer;
  background: var(--panel-sunk); border: 1px solid var(--edge);
  border-radius: var(--r-card); padding: 14px 16px;
}
.channel:hover { background: var(--panel-solid); }
.channel .ic {
  width: 36px; height: 36px; border-radius: 11px; flex: none;
  display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-ink);
}
.channel .ic svg { width: 17px; height: 17px; }
.channel .t { font-size: 14px; font-weight: 500; }
.channel .s { font-size: 12px; color: var(--faint); }

.code-input {
  font-family: var(--font-ui); font-size: 30px; font-weight: 500;
  letter-spacing: .42em; text-align: center; text-indent: .42em;
  font-variant-numeric: tabular-nums;
  padding: 16px 12px; border-radius: var(--r-card);
  background: var(--panel-sunk); border: 1px solid var(--edge); color: var(--ink); width: 100%;
}

/* ------------------------------------------------------------------ misc */

.spinner {
  width: 16px; height: 16px; border-radius: 50%; display: inline-block;
  border: 2px solid var(--edge); border-top-color: var(--accent);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media (max-width: 680px) {
  .shell { padding: 14px 14px 40px; }
  .stats { gap: 18px; }
  h1 { font-size: 27px; }
}

[hidden] { display: none !important; }

/* ------------------------------------------------------------------ story bible */

.work-head {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 24px; border-bottom: 1px solid var(--edge); flex-wrap: wrap;
}
.back {
  font: inherit; font-size: 13px; color: var(--muted); text-decoration: none;
  background: var(--panel-sunk); border: 1px solid var(--edge);
  padding: 7px 14px; border-radius: var(--r-chip); cursor: pointer;
}
.back:hover { color: var(--ink); }

.tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-left: auto; }
.tabs button {
  font: inherit; font-size: 13px; color: var(--muted);
  background: transparent; border: 1px solid transparent;
  padding: 7px 14px; border-radius: var(--r-chip); cursor: pointer;
}
.tabs button:hover { color: var(--ink); }
.tabs button[aria-selected="true"] {
  background: var(--accent-soft); color: var(--accent-ink);
  border-color: var(--accent-soft); font-weight: 500;
}

/* The character pane is a grid so the rail can run full height beside it; the other
   two panes are plain columns. Both share the body padding. */
.bible { display: grid; grid-template-columns: 1fr 86px; min-height: 520px; }
.bible-body { padding: 24px 26px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }

.stack { display: flex; flex-direction: column; gap: 11px; min-width: 0; }

.idea-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px; align-items: start; }

.section-card {
  background: var(--panel-sunk); border: 1px solid var(--edge);
  border-radius: var(--r-card); padding: 14px 16px;
  display: flex; flex-direction: column; gap: 9px;
}
.section-card .sh { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }

.heading-input {
  font-family: var(--font-display); font-size: 16px; font-weight: 500;
  font-variation-settings: "opsz" 20; letter-spacing: -.015em;
  color: var(--ink); background: transparent; border: 0;
  border-bottom: 1px dashed transparent; padding: 2px 0; min-width: 0; flex: 1;
}
.heading-input:hover { border-bottom-color: var(--edge); }
.heading-input:focus { outline: none; border-bottom-color: var(--accent); }

.ref-list { display: flex; flex-direction: column; gap: 9px; }
.ref {
  display: flex; align-items: flex-start; gap: 11px;
  background: var(--panel-sunk); border: 1px solid var(--edge);
  border-radius: 13px; padding: 11px 13px;
}
.ref .ic {
  width: 32px; height: 32px; border-radius: 9px; flex: none;
  display: grid; place-items: center; font-size: 15px;
  background: var(--accent-soft); color: var(--accent-ink);
}
.ref .rt { font-size: 13.5px; font-weight: 500; line-height: 1.3; }
.ref .rm { font-size: 11.5px; color: var(--faint); margin-top: 2px; }

button.pill { cursor: pointer; font-family: inherit; }

.char-head { display: flex; align-items: center; gap: 16px; }
.char-av {
  width: 66px; height: 66px; border-radius: 20px; flex: none;
  display: grid; place-items: center; font-size: 22px; font-weight: 600; color: #FFF6E8;

  /* The picture is stored square, but overflow still has to be clipped or a browser that
     rounds differently leaves corners outside the radius. */
  overflow: hidden; position: relative;
}
.char-av img, .rail-btn .ini img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* The face is the control, so it has to look like one on hover - and carry a hint, because a
   picture that happens to be clickable is not discoverable on its own. */
.av-pick { cursor: pointer; }
.av-pick::after {
  content: "Change";
  position: absolute; inset: auto 0 0 0;
  padding: 3px 0; text-align: center;
  font-family: var(--font-ui); font-size: 9.5px; letter-spacing: .09em; text-transform: uppercase;
  background: rgba(0,0,0,.55); color: #FFF6E8;
  opacity: 0; transition: opacity .12s ease;
}
.av-pick:hover::after, .av-pick:focus-within::after { opacity: 1; }
.av-pick:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }

/* A name, an age and a gender. Three boxes six hundred pixels wide would be a wide window spent
   on nothing - the row stops growing and the space goes to the panel around it. */
.fields { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; max-width: 920px; }

.rail {
  border-left: 1px solid var(--edge); padding: 20px 0;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  background: var(--panel-sunk);
  border-radius: 0 var(--r-panel) var(--r-panel) 0;
}
.rail-btn {
  width: 46px; height: 46px; border-radius: 50%; flex: none;
  border: 2px solid transparent; padding: 0; cursor: pointer;
  background: none; display: grid; place-items: center;
  transition: border-color .18s, transform .18s;
}
.rail-btn:hover { transform: scale(1.06); }
.rail-btn[aria-selected="true"] { border-color: var(--accent); }
.rail-btn .ini {
  width: 100%; height: 100%; border-radius: 50%;
  display: grid; place-items: center; overflow: hidden;
  font-weight: 600; font-size: 14px; color: #FFF6E8; letter-spacing: .02em;
}
.rail-add {
  width: 46px; height: 46px; border-radius: 50%; flex: none;
  border: 1.5px dashed var(--edge); background: transparent; color: var(--muted);
  font-size: 20px; cursor: pointer; display: grid; place-items: center;
}
.rail-sep { width: 26px; height: 1px; background: var(--edge); flex: none; }

@media (max-width: 980px) {
  .idea-grid { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .fields { grid-template-columns: 1fr; }
  .bible { grid-template-columns: 1fr; }
  .rail {
    flex-direction: row; overflow-x: auto; border-left: 0;
    border-top: 1px solid var(--edge); padding: 14px;
    border-radius: 0 0 var(--r-panel) var(--r-panel);
  }
}

/* ------------------------------------------------------------------ book workspace */

.book { display: grid; grid-template-columns: 228px 1fr; min-height: 560px; }
.book-rail {
  padding: 22px 18px; display: flex; flex-direction: column; gap: 18px;
  border-right: 1px solid var(--edge); background: var(--panel-sunk);
  border-radius: var(--r-panel) 0 0 var(--r-panel);
}
.book-rail .cover { aspect-ratio: 2/3; width: 100%; }
.book-body { padding: 22px 26px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.sections { display: flex; flex-direction: column; gap: 2px; }
.sections button {
  font: inherit; font-size: 13.5px; text-align: left;
  display: flex; align-items: center; gap: 10px;
  background: transparent; border: 0; color: var(--muted);
  padding: 9px 11px; border-radius: 11px; cursor: pointer; width: 100%;
}
.sections button:hover { color: var(--ink); background: var(--panel-solid); }
.sections button[aria-selected="true"] { background: var(--panel-solid); color: var(--ink); font-weight: 500; }
.sections .num {
  width: 20px; height: 20px; border-radius: 6px; flex: none;
  display: grid; place-items: center; font-size: 10.5px; font-weight: 600;
  background: var(--panel-sunk); color: var(--faint); font-variant-numeric: tabular-nums;
}
.sections button[aria-selected="true"] .num { background: var(--accent); color: var(--on-accent); }

/* progress ring */
.ring { display: flex; align-items: center; gap: 11px; }
.ring svg { width: 46px; height: 46px; flex: none; transform: rotate(-90deg); }
.ring .trk { fill: none; stroke: var(--edge); stroke-width: 5; }
.ring .bar { fill: none; stroke: var(--accent); stroke-width: 5; stroke-linecap: round; }
.ring .pct {
  font-family: var(--font-display); font-size: 17px;
  font-variation-settings: "opsz" 24; font-variant-numeric: tabular-nums; line-height: 1;
}
.ring .lb { font-size: 11px; color: var(--faint); margin-top: 3px; }

/* ------------------------------------------------------------------ books + chapters */

.book-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px;
}
.book-card {
  display: grid; grid-template-columns: 76px 1fr; gap: 14px;
  background: var(--panel-sunk); border: 1px solid var(--edge);
  border-radius: var(--r-card); padding: 14px;
  color: inherit; text-decoration: none; align-items: start;
}
.book-card:hover { background: var(--panel-solid); }
.book-card .cover { aspect-ratio: 2/3; width: 76px; }
.book-card .cover .ct { font-size: 12px; }
.book-card .cover .cb { font-size: 8px; }
.book-card .bo {
  font-family: var(--font-prose); font-size: 13px; line-height: 1.5;
  color: var(--muted); margin: 5px 0 7px;
}

.chapters { display: flex; flex-direction: column; gap: 10px; }
.chapter-card {
  background: var(--panel-sunk); border: 1px solid var(--edge);
  border-radius: var(--r-card); padding: 12px 14px;
  display: flex; flex-direction: column; gap: 9px;
}
.ch-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ch-num {
  width: 26px; height: 26px; border-radius: 8px; flex: none;
  display: grid; place-items: center; font-size: 12px; font-weight: 600;
  background: var(--panel-solid); color: var(--muted); font-variant-numeric: tabular-nums;
}
.chapter-card .textbox { min-height: 0; font-size: 14px; }

.status-tick { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.st-final { background: var(--good); }
.st-draft { background: var(--warn); }
.st-empty { background: var(--faint); opacity: .45; }

/* Beats are sentences too, and a chapter's worth of them set the full width of a wide window
   is a wall. Same measure rule as the editor and the long-form boxes. */
.beats {
  margin: 0; padding: 0 0 0 20px; max-width: 88ch;
  display: flex; flex-direction: column; gap: 5px;
  font-family: var(--font-prose); font-size: 14px; line-height: 1.55; color: var(--ink-2);
}
.beats li::marker { color: var(--accent-ink); font-family: var(--font-ui); font-size: 11px; }

@media (max-width: 980px) {
  .book { grid-template-columns: 1fr; }
  .book-rail {
    flex-direction: row; align-items: flex-start; border-right: 0;
    border-bottom: 1px solid var(--edge);
    border-radius: var(--r-panel) var(--r-panel) 0 0;
  }
  .book-rail .cover { width: 120px; flex: none; }
  .sections { flex: 1; }
}

/* ------------------------------------------------------------------ manuscript */

/* Fractions with floors rather than two fixed rails. The shares are set so that at the width
   this layout used to be fixed at it still comes out 186 / 735 / 248 - the proportions were
   right, it was only the ceiling that was wrong - and everything past that is shared out
   instead of landing in the margins. */
.ms-layout {
  display: grid;
  grid-template-columns: minmax(186px, 0.6fr) minmax(0, 2.4fr) minmax(248px, 0.8fr);
  gap: 16px; align-items: start;
}

/* Scrolls at a share of the window rather than at 520px, so a tall screen shows more of a long
   book's chapters before it has to scroll. */
.chapter-list {
  display: flex; flex-direction: column; gap: 3px;
  max-height: clamp(320px, 62vh, 1000px); overflow-y: auto;
}
.chapter-list button {
  font: inherit; text-align: left; background: transparent; border: 0;
  padding: 8px 10px; border-radius: 10px; cursor: pointer; color: var(--muted);
  display: flex; flex-direction: column; gap: 2px;
}
.chapter-list button:hover { background: var(--panel-sunk); color: var(--ink); }
.chapter-list button[aria-selected="true"] { background: var(--accent-soft); color: var(--accent-ink); }
.chapter-list .cn { font-size: 13px; font-weight: 500; line-height: 1.25; }
.chapter-list .cw {
  font-size: 11px; opacity: .85; font-variant-numeric: tabular-nums;
  display: flex; align-items: center; gap: 6px;
}

/* The one thing on this screen that must NOT follow the window.

   Prose at 130 characters a line is unreadable and unwritable - the eye loses its place on the
   way back - so the writing column keeps a measure and the room a wide window gives goes to the
   panels either side instead. A touch wider than the 65ch a printed page would use, because a
   draft is not a printed page. The toolbar and the word count are inside this so the three
   line up as one object.

   In rem rather than ch deliberately: ch would resolve against this element's font, which is the
   interface face, while the text being measured is set in the prose face below it. 48rem is
   about 85 characters of that face - a little more room than the fixed layout used to give. */
.ms-write {
  display: flex; flex-direction: column; gap: 11px;
  width: 100%; max-width: 48rem; margin-inline: auto; min-width: 0;
}

/* The editor is a contenteditable set in the reading face. */
.prose-edit {
  width: 100%; resize: vertical;
  background: var(--panel-sunk); border: 1px solid var(--edge);
  border-radius: var(--r-card); padding: 26px 30px;
  font-family: var(--font-prose); font-size: 16.5px; line-height: 1.75; color: var(--ink-2);
  min-height: 420px;
}
.prose-edit:focus { outline: none; border-color: var(--accent); }

/* A contenteditable has no placeholder of its own, so one is drawn when it is genuinely empty.
   :empty alone is not enough - the browser leaves a <br> or an empty <p> behind the moment the
   caret has been in there, and the hint would sit underneath the author's cursor forever. */
.prose-edit:empty::before,
.prose-edit > p:only-child:empty::before {
  content: attr(data-placeholder);
  color: var(--muted);
  pointer-events: none;
}

/* Paragraph spacing rather than indents: this is a manuscript being written, not typeset.
   The exporters decide what a printed page looks like. */
.prose-edit p { margin: 0 0 1.05em; }
.prose-edit p:last-child { margin-bottom: 0; }
.prose-edit em { font-style: italic; }
.prose-edit strong { font-weight: 650; }

/* A scene break, drawn the way it reads in a finished book. */
.prose-edit hr {
  border: 0; margin: 1.6em auto; width: 40%;
  text-align: center; overflow: visible; height: 0;
}
.prose-edit hr::after {
  content: "# # #";
  display: block; text-align: center;
  color: var(--muted); font-family: var(--font-ui); font-size: 12px; letter-spacing: .5em;
}

.prose-tools { display: flex; align-items: center; gap: 6px; margin-bottom: 9px; }
.tool {
  min-width: 34px; height: 30px; padding: 0 9px;
  background: var(--panel-sunk); border: 1px solid var(--edge); border-radius: var(--r-chip);
  color: var(--ink-2); font: inherit; font-size: 14px; cursor: pointer;
}
.tool:hover { background: var(--panel-solid); color: var(--ink); }

.prose {
  background: var(--panel-sunk); border: 1px solid var(--edge);
  border-radius: var(--r-card); padding: 22px 24px;
  font-family: var(--font-prose); font-size: 15.5px; line-height: 1.72; color: var(--ink-2);
  max-height: 440px; overflow-y: auto;
}
.prose h4 {
  font-family: var(--font-display); font-weight: 500; font-size: 15px;
  font-variation-settings: "opsz" 20; letter-spacing: -.015em;
  margin: 0 0 12px; color: var(--faint); text-transform: uppercase; font-size: 11px;
  letter-spacing: .1em;
}
.prose p { margin: 0 0 1em; max-width: 62ch; }
.prose p:last-child { margin-bottom: 0; }

.diff { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.aside { display: flex; flex-direction: column; gap: 12px; }
.aside-card {
  background: var(--panel-sunk); border: 1px solid var(--edge);
  border-radius: var(--r-card); padding: 14px;
  display: flex; flex-direction: column; gap: 9px;
}

.ctx-line { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.ctx-line .tag {
  font-size: 9.5px; font-weight: 700; letter-spacing: .04em;
  padding: 2px 6px; border-radius: 5px; flex: none;
  background: var(--accent-soft); color: var(--accent-ink);
}
.ctx-line .tag.r { background: var(--panel-solid); color: var(--faint); }
.ctx-line .tk { margin-left: auto; font-variant-numeric: tabular-nums; font-size: 11px; color: var(--faint); flex: none; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

.budget { height: 5px; border-radius: 3px; background: var(--panel-solid); overflow: hidden; }
.budget i { display: block; height: 100%; background: var(--accent); border-radius: 3px; }

.issue { display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px; line-height: 1.45; }
.issue .sev { width: 3px; border-radius: 2px; align-self: stretch; flex: none; }
.sev-crit { background: var(--crit); }
.sev-warn { background: var(--warn); }
.sev-note { background: var(--faint); }
.issue em { font-style: normal; color: var(--faint); display: block; font-size: 11.5px; margin-top: 2px; }

@media (max-width: 1100px) {
  .ms-layout { grid-template-columns: 1fr; }
  .chapter-list { flex-direction: row; overflow-x: auto; max-height: none; }
  .chapter-list button { flex: none; min-width: 150px; }
  .diff { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------ covers */

.faces { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.face {
  background: var(--panel-sunk); border: 1px solid var(--edge);
  border-radius: var(--r-card); padding: 14px;
  display: flex; flex-direction: column; gap: 10px; min-width: 0;
}
.face-art {
  aspect-ratio: 2/3; border-radius: 10px; overflow: hidden;
  background: var(--panel-solid); border: 1px solid var(--edge);
  display: grid; place-items: center;
}
.face-art.wide { aspect-ratio: 3/2; }
.face-art img { width: 100%; height: 100%; object-fit: cover; display: block; }

.versions { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 2px; }
.version {
  flex: none; width: 46px; padding: 0; border-radius: 7px; cursor: pointer;
  border: 2px solid transparent; background: none;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.version.on { border-color: var(--accent); }
.version img { width: 100%; aspect-ratio: 2/3; object-fit: cover; border-radius: 5px; display: block; }
.version span { font-size: 9.5px; color: var(--faint); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ export */

.profiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.profile {
  text-align: left; font: inherit; color: inherit; cursor: pointer;
  background: var(--panel-sunk); border: 1px solid var(--edge);
  border-radius: var(--r-card); padding: 12px 14px;
  display: flex; flex-direction: column; gap: 4px;
}
.profile:hover { background: var(--panel-solid); }
.profile.on { border-color: var(--accent); background: var(--accent-soft); }
.profile .pn { font-size: 13.5px; font-weight: 600; }
.profile .pd { font-size: 12px; color: var(--faint); line-height: 1.4; }

.check {
  display: flex; align-items: center; gap: 9px;
  font-size: 13.5px; color: var(--muted); cursor: pointer;
}
.check input { width: 16px; height: 16px; accent-color: var(--accent); }

/* ------------------------------------------------------------------ kdp */

.steps { margin: 0; padding: 0 0 0 4px; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.steps li { display: block; }
.steps .check { align-items: flex-start; }
.steps .check input { margin-top: 3px; flex: none; }
.steps strong { font-size: 13.5px; color: var(--ink); }

/* ------------------------------------------------------------------ import */

.import { display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
.import .section-card { align-items: stretch; }

/* ------------------------------------------------------------------ settings */

.val-readonly {
  background: var(--panel-solid); border: 1px solid var(--edge);
  border-radius: 11px; padding: 10px 13px; font-size: 14px; color: var(--muted);
}

.enrol { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start; }
.qr {
  background: #FFFFFF; padding: 10px; border-radius: 12px;
  border: 1px solid var(--edge); line-height: 0; flex: none;
}
.qr svg { width: 168px; height: 168px; display: block; }

@media (max-width: 680px) {
  .enrol { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------ credits */

.credit-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin: 4px 0 12px;
}
.credit-balance { font-size: 34px; font-weight: 600; letter-spacing: -.02em; }
.credit-unit { font-size: 13px; color: var(--muted); margin-left: 6px; }
.credit-meta { text-align: right; font-size: 13.5px; }

/* A track rather than a number alone: "1,240" means nothing without the ceiling beside it. */
.credit-bar {
  height: 7px; border-radius: 99px; background: var(--panel-sunk);
  border: 1px solid var(--edge); overflow: hidden;
}
.credit-bar > span { display: block; height: 100%; background: var(--accent); }

.credit-plan { margin-top: 10px; }

.credit-table { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 13.5px; }
.credit-table th {
  text-align: left; font-weight: 500; font-size: 11.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); padding: 0 0 7px;
  border-bottom: 1px solid var(--edge);
}
.credit-table td { padding: 8px 0; border-bottom: 1px solid var(--hairline); }
.credit-table .num { text-align: right; font-variant-numeric: tabular-nums; }
/* The balance is the loud thing on this card. A grant in full accent out-shouts it, and the
   accent is already spent on the bar - so these stay quiet and only the sign distinguishes them. */
.credit-table .spend { color: var(--ink-2); }
.credit-table .grant { color: var(--good); }

/* ------------------------------------------------------------------ plans */

.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-top: 12px; }
.plan {
  border: 1px solid var(--edge); border-radius: var(--r-card);
  background: var(--panel-sunk); padding: 14px 16px;
  display: flex; flex-direction: column; gap: 7px; align-items: flex-start;
}
.plan-current { border-color: var(--accent); }
.plan .btn { margin-top: auto; }

/* A button that reads as part of the sentence it sits in, because it is. */
.linklike {
  background: none; border: 0; padding: 0; font: inherit; color: var(--accent);
  cursor: pointer; text-decoration: underline;
}

/* ------------------------------------------------------------------ read-through */

/* A reading column, not a layout. Everything here serves one measurement: about 66 characters
   a line, which is where the eye stops having to hunt for the start of the next one. */
.reading {
  --read-size: 19px;
  max-width: 34rem; margin: 0 auto; padding: 86px 24px 120px;
  font-family: var(--font-prose);
  font-size: var(--read-size);
  line-height: 1.68;
  color: var(--ink-2);
}

.read-head { margin-bottom: 54px; }
.read-head h1 { font-family: var(--font-display); font-size: 1.9em; font-weight: 500; margin: 0 0 8px; }

.read-chapter { margin: 0 0 58px; scroll-margin-top: 80px; }
.read-chapter h2 {
  font-family: var(--font-display); font-weight: 500;
  font-size: 1.25em; margin: 0 0 22px;
  display: flex; align-items: baseline; gap: 12px;
}
.read-chapter h2 .rm { font-size: .72em; }

.read-prose p { margin: 0 0 1.05em; }
.read-prose p:last-child { margin-bottom: 0; }
.read-prose em { font-style: italic; }
.read-prose strong { font-weight: 650; }

/* The same scene break the editor draws, so the two never disagree about what a divider is. */
.read-prose hr { border: 0; margin: 1.7em auto; height: 0; overflow: visible; }
.read-prose hr::after {
  content: "# # #"; display: block; text-align: center;
  color: var(--muted); font-family: var(--font-ui); font-size: .6em; letter-spacing: .5em;
}

/* A hole in the book, drawn as a hole. */
.read-gap {
  color: var(--muted); font-style: italic;
  border-left: 2px solid var(--edge); padding-left: 14px; margin: 0;
}

.read-empty, .read-end { text-align: center; padding: 60px 0 0; }
.read-empty { padding-top: 120px; }
.read-end { border-top: 1px solid var(--edge); margin-top: 20px; }
.read-end .btn { margin-top: 14px; }

/* The chrome. Fixed, slight, and quiet until it is wanted - an author reading through is trying
   not to be an author editing, and every visible control is an invitation to stop reading. */
.read-bar {
  position: fixed; inset: 0 0 auto 0; z-index: 5;
  display: flex; align-items: center; gap: 16px;
  padding: 11px 20px;
  background: var(--panel); backdrop-filter: blur(14px) saturate(130%);
  border-bottom: 1px solid var(--edge);
  font-family: var(--font-ui); font-size: 13px;
  opacity: .32; transition: opacity .18s ease;
}
.read-bar:hover, .read-bar:focus-within { opacity: 1; }

.read-out { color: var(--ink-2); text-decoration: none; white-space: nowrap; }
.read-out:hover { color: var(--ink); }
.read-where { flex: 1; text-align: center; color: var(--ink-2); }
.read-tools { display: flex; gap: 6px; }

.read-progress {
  position: fixed; inset: 0 0 auto 0; z-index: 6;
  height: 2px; background: transparent;
}
.read-progress > span { display: block; height: 100%; background: var(--accent); transition: width .1s linear; }

@media (max-width: 640px) {
  .reading { padding-top: 74px; }
  .read-where { display: none; }
}

/* ------------------------------------------------------------------ manuscript health */

.health-figures {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px;
}
.health-figures > div {
  background: var(--panel-sunk); border: 1px solid var(--edge); border-radius: var(--r-card);
  padding: 13px 15px; display: flex; flex-direction: column; gap: 2px;
}
.health-figures strong { font-size: 21px; font-weight: 600; letter-spacing: -.01em; }
.health-figures span { font-size: 12px; color: var(--muted); }

.health-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 16px; }

/* The chapter bars. Deliberately a shape rather than a chart: an author reads the silhouette of
   their book here, and axes and gridlines would be answering a question nobody asked. */
.shape {
  display: flex; align-items: flex-end; gap: 4px;
  height: 118px; margin: 14px 0 10px; padding-bottom: 16px;
  border-bottom: 1px solid var(--edge);
}
/* The median, drawn. The caption said "the middle line is the median" before there was one,
   which is the sort of sentence that quietly makes a reader distrust the rest of a page. */
.shape { position: relative; }
.shape.has-median::before {
  content: ""; position: absolute; left: 0; right: 0;

  /* 16px is the chart's own bottom padding, where the bars stand; the rest of the box is the
     area a bar's own height is a percentage of. Multiplying that by the fraction puts the line
     exactly where a median-length bar would reach. */
  bottom: calc(16px + (100% - 16px) * var(--median, 0));
  border-top: 1px dashed var(--edge); pointer-events: none;
}

.shape-bar { flex: 1 1 0; min-width: 7px; height: 100%; position: relative; display: flex; align-items: flex-end; }
.shape-bar > span { display: block; width: 100%; border-radius: 3px 3px 0 0; background: var(--accent-soft); }
.shape-bar > small {
  position: absolute; bottom: -15px; left: 0; right: 0;
  text-align: center; font-size: 9px; color: var(--muted);
}

/* One colour for "stands out", not two.
   The palette's warn and accent are both amber and differ only in darkness, so short and long
   were nearly indistinguishable - and that is the most important distinction on the chart. The
   bar's HEIGHT already says which direction it stands out in, perfectly and in a channel that
   does not depend on telling two ambers apart. So the colour says only that it is worth a look. */
.shape-bar.k-short > span,
.shape-bar.k-long > span { background: var(--accent); }
.shape-bar.k-none > span { height: 3px !important; background: var(--edge); }

.shape-key { display: flex; flex-wrap: wrap; gap: 14px; font-size: 11.5px; }
.shape-key i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; }
.shape-key .k-normal { background: var(--accent-soft); }
.shape-key .k-flagged { background: var(--accent); }
.shape-key .k-none { background: var(--edge); }

.finding { padding: 12px 0; border-top: 1px solid var(--hairline); }
.finding:first-of-type { border-top: 0; }
.finding p { margin: 4px 0 0; }
.finding-eg { margin: 7px 0 0; padding-left: 17px; font-size: 13px; color: var(--ink-2); }
.finding-eg li { margin: 2px 0; }

.habit { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 13.5px; }
.habit td { padding: 5px 0; border-bottom: 1px solid var(--hairline); }
.habit .num { text-align: right; font-variant-numeric: tabular-nums; }

/* The quoted passage that triggered a finding. Set in the prose face, because it is prose. */
.finding-quote {
  font-family: var(--font-prose); font-size: 14px; color: var(--ink-2);
  border-left: 2px solid var(--edge); padding-left: 12px; margin: 7px 0 0;
}

/* ------------------------------------------------------------------ connection */

/* Blazor shows this by adding a class to the element; it is hidden otherwise. The default
   stylesheet does not ship with the app, so without these rules the modal would simply never
   appear - which is indistinguishable from not having added it. */
#components-reconnect-modal { display: none; }

#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
  display: grid; place-items: center;
  position: fixed; inset: 0; z-index: 1000;
  background: color-mix(in srgb, var(--ground) 72%, transparent);
  backdrop-filter: blur(3px);
}

.reconnect-card {
  background: var(--panel-solid); border: 1px solid var(--edge);
  border-radius: var(--r-card); box-shadow: var(--shadow-lift);
  padding: 20px 24px; max-width: 420px;
  font-family: var(--font-ui); font-size: 14px; color: var(--ink-2);
}
.reconnect-card p { margin: 0; display: none; align-items: center; gap: 10px; }
.reconnect-card button, .reconnect-card a {
  font: inherit; color: var(--accent); background: none; border: 0;
  padding: 0 0 0 4px; cursor: pointer; text-decoration: underline;
}

/* One line at a time, chosen by whichever state Blazor has put on the modal. */
.components-reconnect-show .reconnect-trying,
.components-reconnect-failed .reconnect-failed,
.components-reconnect-rejected .reconnect-rejected { display: flex; }

#blazor-error-ui {
  display: none;
  position: fixed; inset: auto 0 0 0; z-index: 1001;
  padding: 11px 20px;
  background: var(--crit); color: #FFF6E8;
  font-family: var(--font-ui); font-size: 13.5px;
  box-shadow: 0 -2px 14px rgba(0,0,0,.2);
}
#blazor-error-ui .reload, #blazor-error-ui .dismiss {
  color: #FFF6E8; margin-left: 12px; cursor: pointer; text-decoration: underline;
}
#blazor-error-ui .dismiss { float: right; text-decoration: none; }

/* The foldable "what went wrong" under the error screen. Quiet by default: the reassurance
   above it is what matters to somebody mid-chapter, and this is for when they want to report it. */
.why { margin-top: 18px; border-top: 1px solid var(--hairline); padding-top: 12px; }
.why summary {
  cursor: pointer; font-size: 12.5px; color: var(--faint);
  font-family: var(--font-ui); list-style: none;
}
.why summary::-webkit-details-marker { display: none; }
.why summary::before { content: "▸ "; }
.why[open] summary::before { content: "▾ "; }
.why p { margin: 9px 0 0; }
.why code { font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px; }

/* Only the desktop writes a log, so only the desktop's bar carries this line. */
#blazor-error-ui .where { opacity: .82; margin-left: 10px; }
#blazor-error-ui .where code {
  font-family: var(--font-mono, ui-monospace, monospace); font-size: 12.5px;
  background: rgba(255,255,255,.16); padding: 1px 5px; border-radius: 5px;
}