/* Quiet Stanza — the shared pieces every screen draws with.
   Type, the note card, the A5 paper rulings, chips, buttons, the icon face, fields, the
   brand mark, the boot splash and the page scaffolding. Loaded straight after tokens.css. */

/* ═══ type ═══ */
.eyebrow {
  font-size: 12.5px;
  letter-spacing: 0.18em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0;
}
.page-title {
  font-family: var(--serif);
  font-size: 36px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.1;
}
.section-title {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}
.body-text { font-size: 15px; color: var(--text-primary); }
.small { font-size: 13.5px; color: var(--text-secondary); }
.qs-field {
  width: 100%;
  max-width: 22rem;
  padding: 8px 10px;
  border: 1px solid var(--sheet-edge);
  border-radius: 6px;
  background: var(--sheet);
  color: var(--text-primary);
  font: inherit;
}
.remind-time {
  width: 9.5rem;
  font-variant-numeric: tabular-nums;
}
.serif { font-family: var(--serif); }
.italic { font-style: italic; }

/* ═══ surfaces ═══ */
.note-card {
  background: var(--sheet);
  border: 1px solid var(--sheet-edge);
  border-radius: var(--radius-card);
  padding: 18px 20px;
}
/* ═══ A5 notebook paper (the sheet itself — fiber + ruling) ═══
   Journal pages, compare digital faces, setup samples, and notebook preview
   all paint with these. --paper-pitch is millimetres × 3 css-px/mm. */
.sheet-ruled,
.paper-dots,
.paper-lines,
.paper-grid {
  --ruling: rgba(120, 105, 75, 0.28);
  --paper-pitch: 5mm;
  --paper-fiber: repeating-linear-gradient(
    102deg,
    transparent 0 3px,
    rgba(140, 120, 80, 0.018) 3px 4px
  );
  background-color: var(--sheet);
  background-repeat: repeat;
}

.paper-dots,
.sheet-ruled.paper-dots {
  background-image:
    var(--paper-fiber),
    radial-gradient(circle, var(--ruling) 1px, transparent 1.15px);
  background-size: auto, var(--paper-pitch) var(--paper-pitch);
  background-position: 0 0, 0 0;
}

.paper-lines,
.sheet-ruled.paper-lines {
  background-image:
    var(--paper-fiber),
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent calc(var(--paper-pitch) - 1px),
      var(--ruling) calc(var(--paper-pitch) - 1px),
      var(--ruling) var(--paper-pitch)
    );
  background-size: auto, 100% var(--paper-pitch);
  background-position: 0 0, 0 0;
}

.paper-grid,
.sheet-ruled.paper-grid {
  background-image:
    var(--paper-fiber),
    linear-gradient(to right, var(--ruling) 1px, transparent 1px),
    linear-gradient(to bottom, var(--ruling) 1px, transparent 1px);
  background-size: auto, var(--paper-pitch) var(--paper-pitch), var(--paper-pitch) var(--paper-pitch);
  background-position: 0 0, 0 0, 0 0;
}

.paper-margin,
.sheet-ruled.paper-margin {
  --paper-margin-x: 18mm;
  background-image:
    var(--paper-fiber),
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent calc(var(--paper-pitch) - 1px),
      var(--ruling) calc(var(--paper-pitch) - 1px),
      var(--ruling) var(--paper-pitch)
    ),
    linear-gradient(
      to right,
      transparent 0,
      transparent calc(var(--paper-margin-x) - 1px),
      var(--ruling) calc(var(--paper-margin-x) - 1px),
      var(--ruling) var(--paper-margin-x),
      transparent var(--paper-margin-x)
    );
  background-size: auto, 100% var(--paper-pitch), 100% 100%;
  background-position: 0 0, 0 0, 0 0;
}

/* Index cards (CardCatalog): a blank card is the stock alone; a handwriting guide rules each
   row with a faint ascender line, a lighter x-height line and the baseline. */
.paper-blank,
.sheet-ruled.paper-blank {
  background-color: var(--sheet);
  background-image: var(--paper-fiber, none), none;
  background-repeat: repeat;
}
.paper-guide,
.sheet-ruled.paper-guide {
  --ruling: rgba(120, 105, 75, 0.28);
  --paper-pitch: 8mm;
  --paper-fiber: repeating-linear-gradient(
    102deg,
    transparent 0 3px,
    rgba(140, 120, 80, 0.018) 3px 4px
  );
  background-color: var(--sheet);
  background-repeat: repeat;
  background-image:
    var(--paper-fiber),
    linear-gradient(
      to bottom,
      transparent 0,
      transparent calc(var(--paper-pitch) * 0.30),
      color-mix(in srgb, var(--ruling) 45%, transparent) calc(var(--paper-pitch) * 0.30),
      color-mix(in srgb, var(--ruling) 45%, transparent) calc(var(--paper-pitch) * 0.30 + 1px),
      transparent calc(var(--paper-pitch) * 0.30 + 1px),
      transparent calc(var(--paper-pitch) * 0.62),
      color-mix(in srgb, var(--ruling) 70%, transparent) calc(var(--paper-pitch) * 0.62),
      color-mix(in srgb, var(--ruling) 70%, transparent) calc(var(--paper-pitch) * 0.62 + 1px),
      transparent calc(var(--paper-pitch) * 0.62 + 1px),
      transparent calc(var(--paper-pitch) - 1px),
      var(--ruling) calc(var(--paper-pitch) - 1px),
      var(--ruling) var(--paper-pitch)
    );
  background-size: auto, 100% var(--paper-pitch);
  background-position: 0 0, 0 0;
}

/* Legacy utility — same as paper-dots at the default pitch. */
.dot-grid {
  --ruling: rgba(120, 105, 75, 0.28);
  --paper-pitch: 5mm;
  background-image:
    radial-gradient(circle, var(--ruling) 1px, transparent 1.15px);
  background-size: var(--paper-pitch) var(--paper-pitch);
  background-repeat: repeat;
  background-position: top left;
}

/* ═══ chips ═══ */
.chip {
  display: inline-block;
  background: var(--chip);
  border-radius: 11px;
  padding: 4px 11px;
  margin: 0 8px 8px 0;
  font-size: 13px;
  color: var(--text-primary);
}
/* a chip that walks somewhere (used by the stacks and the library's wiki strip) */
.chip-link {
  border: none;
  cursor: pointer;
  font-family: var(--ui);
  line-height: 1.4;
}
.chip-link:hover { filter: brightness(0.96); box-shadow: inset 0 0 0 1px rgba(43, 42, 36, .12); }

/* ═══ buttons ═══ */
.btn {
  font-family: var(--ui);
  font-size: 15px;
  border-radius: var(--radius-card);
  padding: 8px 16px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.btn:disabled { opacity: .55; cursor: default; }
/* a link dressed as a button (Explore, Search, the guide) wears no underline */
a.btn { text-decoration: none; }
.btn-with-icon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn-with-icon .fa { font-size: 13px; }

.wax-button {
  background: var(--wax);
  color: var(--sheet);
  border-color: transparent;
}
.wax-button:hover:not(:disabled) { background: var(--wax-hover); }
.wax-button:active:not(:disabled) { background: var(--wax-pressed); }

.ghost-button {
  background: transparent;
  border: 1px solid var(--sheet-edge);
  color: var(--text-primary);
}
.ghost-button:hover:not(:disabled) { border-color: var(--text-secondary); }

.link-button {
  background: none;
  border: none;
  color: var(--wax);
  cursor: pointer;
  padding: 0;
  font: inherit;
}
.link-button:hover { color: var(--wax-hover); text-decoration: underline; }

/* a poet or author's name in the library and the reading room: quiet, but plainly a way
   to their works */
.poet-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: underline dotted;
  text-decoration-color: rgba(110, 104, 90, .55);
  text-underline-offset: 3px;
}
.poet-link:hover { color: var(--wax); text-decoration: underline; }

/* ═══ icons (Font Awesome) ═══ */
.fa {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-style: normal;
  line-height: 1;
  display: inline-block;
}

/* ═══ inputs ═══ */
.field {
  font-family: var(--ui);
  font-size: 14px;
  background: var(--sheet);
  border: 1px solid var(--sheet-edge);
  border-radius: var(--radius-card);
  padding: 9px 12px;
  color: var(--text-primary);
  width: 100%;
}
.field:focus { outline: none; border-color: var(--text-secondary); }

/* focus visibility for keyboard users */
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ═══ brand mark (handwritten QS) ═══
   One-colour silhouette via mask so ink / sheet / wax fields can tint it.
   Playwrite and other hand fonts remain the *writer's* hand — not brand chrome. */
.qs-mark {
  display: inline-block;
  width: 1em;
  height: 1em;
  background: currentColor;
  -webkit-mask: url("../img/brand/quiet-stanza-mark-black.png") center / contain no-repeat;
  mask: url("../img/brand/quiet-stanza-mark-black.png") center / contain no-repeat;
  vertical-align: middle;
  flex-shrink: 0;
}

.qs-lockup-stacked {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: inherit;
}
.qs-lockup-stacked .qs-mark {
  width: 2.4em;
  height: 2.4em;
  margin-bottom: 4px;
}
.qs-lockup-stacked .qs-word {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  line-height: 1.05;
  text-transform: uppercase;
}

/* ═══ boot / authorizing splash ═══ */
.app-boot {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--paper);
  color: var(--text-secondary);
}
.app-boot-mark {
  width: 56px;
  height: 56px;
  color: var(--ink);
}
.app-boot-text {
  font-family: var(--serif);
  font-size: 20px;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

#blazor-error-ui {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--wax);
  color: var(--sheet);
  padding: 10px 16px;
  z-index: 1000;
}
/* The words live here, not in index.html, so a page reader that runs no script doesn't
   take the hidden error bar for the page. */
#blazor-error-ui .blazor-error-msg::before { content: "Something went awry. "; }
/* Words for a screen reader alone: a label an icon stands in for. Off-screen, still read. */
.visually-hidden {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* index.html's plain description of the site: off-screen (but readable) while the app boots. */
.app-boot-about {
    /* At the top, so its one pixel never makes the document a pixel taller than the window. */
    position: absolute; top: 0; left: 0; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
#blazor-error-ui .reload { color: var(--sheet); text-decoration: underline; }
#blazor-error-ui .dismiss { cursor: pointer; float: right; }

/* ═══ page scaffolding ═══ */
.page-wrap { max-width: 900px; margin: 0 auto; padding: 40px 40px 80px; }
/* Progress, Settings and the poem library lie on the same wide sheet. */
.progress-page, .settings-page, .library-page, .admin-page { max-width: 1180px; }
/* Every page but the desk lies on the desk as a sheet of the letter paper (tokens.css): its
   cream and light, its laid lines and grain, the Qs watermark, and the shadow of a sheet lying flat. The desk
   page is the desk itself, with its own book, and stays bare. */
.page-wrap:not(.today-desk):not(.journey-page) {
  position: relative;
  isolation: isolate;
  width: calc(100% - 48px);   /* a margin of desk either side, up to the page's max-width */
  margin: 28px auto 48px;
  background-color: var(--letter-paper);
  background-image: var(--letter-light);
  box-shadow: var(--letter-shadow);
}
/* Journals and the writing desk: the desk itself, bare wood with its grain, the leather mat
   and the book on it (Components/Journals/OpenBookDesk). No sheet of paper. */
.page-wrap.journey-page {
  --journey-pad-gutter: 24px;
  --journey-lip-h: 36px;
  max-width: none;
  width: 100%;
  margin: 20px 0 0;
  padding: 0 0 48px;
  background-color: var(--desk);
  background-image: var(--desk-grain);
  background-size: 220px 220px;
  box-shadow: none;
}
/* With the mat down, the page is the window: the mat takes what the letter sheet leaves and
   stops a little above the bottom, on the desk, so the page has nothing to scroll. It grows
   past the window only when the book can't fit in it. */
.page-wrap.journey-page:has(> .journey-writing-pad.is-open) {
  box-sizing: border-box;
  min-height: calc(100% - 20px);
  display: flex;
  flex-direction: column;
  padding-bottom: 12px;
}
@media (max-width: 699px) {
  .page-wrap.journey-page { --journey-pad-gutter: 12px; }
}
/* With the mat down, the journals page fills what's left of the window under any nudge,
   and Journey.razor.css lets the mat take the rest of it. */
.content:has(.journey-writing-pad.is-open) { display: flex; flex-direction: column; }
.content:has(.journey-writing-pad.is-open) > .journey-shell { flex: 1 0 auto; }
.content:has(> .desk-nudge) { --journey-nudge-h: 5rem; }
.page-wrap:not(.today-desk):not(.journey-page)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--letter-make);
  background-size: var(--letter-make-size);
  mix-blend-mode: multiply;
  opacity: 0.7;
  pointer-events: none;
}
/* The Qs as a true watermark: thinner paper, lighter than the sheet. */
.page-wrap:not(.today-desk):not(.journey-page)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: #fff;
  -webkit-mask: var(--letter-watermark) center top / 480px 360px repeat;
  mask: var(--letter-watermark) center top / 480px 360px repeat;
  opacity: 0.5;
  filter: blur(0.5px);
  pointer-events: none;
}
/* On a phone the sheet runs nearly to the edges. */
@media (max-width: 699px) {
  .page-wrap:not(.today-desk):not(.journey-page) { width: calc(100% - 16px); margin: 10px auto 20px; }
}
.library-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.library-head .page-title { max-width: 36rem; }