/* =========================================================================
   Waste Book — a bound accounts book. One committed look: paper ground,
   ruled lines, a red margin rule, the date out in the margin. No dark mode
   and no e-ink toggle by design — this is already ink on paper, which is
   what an e-ink screen renders best. Same "one committed look" decision as
   bw/ and wbc/.

   The load-bearing detail is the rule pitch. --pitch is the distance between
   rulings, and EVERY vertical measurement inside an entry is that value or a
   multiple of it, so each line of text lands on a ruling no matter how long
   an entry runs or how many lines it wraps to. Change --pitch and you must
   change nothing else; change a line-height or a padding to a non-multiple
   and the whole page drifts off its rules.
   ========================================================================= */

:root {
  --paper:   #f6f2e8;
  --ink:     #1b1916;
  --rule:    #cdc4ab;
  --rule-red:#b3564c;
  --muted:   #7d7566;
  --faint:   #8a8271;
  --hair:    #b8ae98;

  --serif: 'Iowan Old Style', 'Charter', 'Palatino Linotype', Palatino, Georgia, ui-serif, serif;
  --mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, 'Courier New', monospace;
  --sans: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --pitch: 30px;
  --margin-col: 5.1rem;
  --gutter: 16px;

  color-scheme: light;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

.wb-page {
  max-width: 44rem;
  margin: 0 auto;
  padding: 0 22px 90px;
}

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

.wb-mast {
  padding: 46px 0 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 18px;
  flex-wrap: wrap;
}
/* Wordmark — deliberately identical to bw/'s `.bw-wordmark` (same sans face,
   .78rem, weight 600, .32em tracking, and the same muted separator/section
   colours), so the two sites read as one at a glance. If bw/'s wordmark is
   ever restyled, restyle this with it or they drift apart. This is the ONLY
   shared design element; everything below is this app's own ledger. */
.wb-wordmark-h1 { margin: 0; font-size: inherit; font-weight: inherit; }
.wb-wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
}
.wb-wordmark-sep { color: #c8c0aa; letter-spacing: 0; font-weight: 400; }
.wb-wordmark-sub { color: #9a927f; font-weight: 500; }
.wb-mast-right {
  display: flex;
  align-items: baseline;
  gap: 16px;
}
.wb-count {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.wb-mast-write,
.wb-mast-quiet {
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid var(--hair);
  white-space: nowrap;
}
.wb-mast-write:hover,
.wb-mast-quiet:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* The double rule under the masthead — a thick line over a hair line, the
   way a ledger's header band is actually printed. */
.wb-mast-rule {
  height: 0;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  margin-top: 12px;
  padding-bottom: 3px;
}

.wb-epigraph {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 30rem;
  margin: 22px 0 0;
}
.wb-epigraph cite {
  display: block;
  font-style: normal;
  font-family: var(--sans);
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--faint);
  margin-top: 8px;
}

/* ---- search ------------------------------------------------------------ */

.wb-searchwrap {
  padding: 26px 0 30px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
}
.wb-search {
  font-family: var(--serif);
  font-size: 16px;
  flex: 1 1 14rem;
  max-width: 22rem;
  min-width: 0;
  padding: 8px 2px;
  min-height: 44px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--hair);
  border-radius: 0;
  color: var(--ink);
  -webkit-appearance: none;
}
.wb-search::placeholder { color: #a49a84; font-style: italic; }
.wb-search:focus { outline: 0; border-bottom-color: var(--ink); }

/* Submitting is a real form post now, so the button has to be visible —
   Enter alone works but isn't discoverable. Kept as quiet as the masthead
   links so it doesn't become the loudest thing on the page. */
.wb-search-btn,
.wb-search-clear {
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--hair);
  border-radius: 0;
  padding: 6px 0;
  min-height: 34px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.wb-search-btn:hover,
.wb-search-clear:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* ---- the ruled river --------------------------------------------------- */

/* Two stacked backgrounds: the red vertical margin rule (repeat-y, so it
   runs the full height of however many entries there are) over the
   horizontal rulings. */
.wb-entries {
  background-image:
    linear-gradient(to right,
      transparent 0 var(--margin-col),
      var(--rule-red) var(--margin-col) calc(var(--margin-col) + 1px),
      transparent calc(var(--margin-col) + 1px)),
    repeating-linear-gradient(to bottom,
      transparent 0 calc(var(--pitch) - 1px),
      var(--rule) calc(var(--pitch) - 1px) var(--pitch));
  background-repeat: repeat-y, repeat;
  padding-top: 1px;
}

.wb-entry {
  display: grid;
  grid-template-columns: var(--margin-col) 1fr;
  padding-bottom: var(--pitch);
}

.wb-e-date {
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: var(--pitch);
  letter-spacing: .06em;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
  padding-left: 2px;
}
.wb-e-main {
  padding-left: var(--gutter);
  min-width: 0;
}
.wb-e-body {
  font-size: 16.5px;
  line-height: var(--pitch);
  margin: 0;
  text-wrap: pretty;
  overflow-wrap: break-word;
}
.wb-e-body em { font-style: italic; }
.wb-e-src {
  font-family: var(--sans);
  font-size: 10.5px;
  line-height: var(--pitch);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}
.wb-e-src a {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid #c3b9a1;
}
.wb-e-src a:hover { color: var(--ink); border-bottom-color: var(--ink); }

.wb-empty {
  font-family: var(--serif);
  font-style: italic;
  color: var(--faint);
  line-height: var(--pitch);
  padding-left: calc(var(--margin-col) + var(--gutter));
  margin: 0;
}

/* ---- pager ------------------------------------------------------------- */

/* Indented to the same left edge as the entry text, so it reads as the last
   line of the page rather than a separate widget bolted underneath. */
.wb-pager {
  display: flex;
  align-items: baseline;
  gap: 10px 20px;
  flex-wrap: wrap;
  margin-top: 6px;
  padding: 18px 0 0 calc(var(--margin-col) + var(--gutter));
  border-top: 1px solid var(--ink);
}
.wb-pager-link,
.wb-pager-off {
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.wb-pager-link {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid var(--hair);
  padding: 6px 0;
  min-height: 32px;
}
.wb-pager-link:hover { color: var(--ink); border-bottom-color: var(--ink); }
/* The end of the book in one direction — kept in place rather than removed so
   the row doesn't reflow between pages. */
.wb-pager-off { color: #b6ae9c; }
.wb-pager-at {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .08em;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
  margin-left: auto;
}

/* ---- shared site nav --------------------------------------------------- */

/* Foot of the page — same job, scale and order as the other two rooms'
   footers. Indented to the entry text's own left edge like the pager, rather
   than flush to the page margin, where it read as leftover text. */
.wb-foot {
  margin-top: 40px;
  padding: 20px 0 8px calc(var(--margin-col) + var(--gutter));
  border-top: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.wb-foot a {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid var(--hair);
  padding-bottom: 2px;
}
.wb-foot a:hover { color: var(--ink); border-bottom-color: var(--ink); }
@media (max-width: 600px) { .wb-foot { padding-left: 0; } }

/* ── Tier 1: the site band ──────────────────────────────────────────────
   Duplicated verbatim into / and /waaagh/ rather than shared from one
   stylesheet — the three rooms have three different palettes, and one shared
   file would mean three sets of overrides fighting each other (the mistake
   suite.css already made in the games suite). Only the colour values differ
   between copies; every measurement matches.

   Sits above the ruled page, not inside it, so the band reads as the site and
   the paper below reads as the section. Deliberately NOT on the --pitch grid:
   it isn't part of the ledger, and pretending otherwise made it look like a
   ruling with the wrong text on it. */
.rl-band {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px 22px;
  flex-wrap: wrap;
  padding: 12px 22px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.rl-band-name {
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.rl-band-name:hover { color: var(--muted); }
.rl-band-rooms { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.rl-band-rooms a {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color .15s, border-color .15s;
}
.rl-band-rooms a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.rl-band-sep { color: #c8c0aa; letter-spacing: 0; }
/* The room you're already standing in — named, never linked. */
.rl-band-here { color: #b6ae9c; }
@media (max-width: 480px) {
  .rl-band { padding: 10px 14px; gap: 8px 14px; font-size: 9px; letter-spacing: .12em; }
}

/* ---- write screen ------------------------------------------------------ */

.wb-flash {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .04em;
  margin: 24px 0 0;
  padding: 10px 12px;
  background: #ece7d8;
  border-left: 3px solid var(--ink);
  color: var(--ink);
}
.wb-flash-bad {
  background: #f2e2df;
  border-left-color: var(--rule-red);
}

.wb-form { margin: 28px 0 0; }
.wb-login { max-width: 20rem; }

.wb-label {
  display: block;
  font-family: var(--sans);
  font-size: 9.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 16px 0 6px;
}

.wb-input,
.wb-textarea {
  font-family: var(--serif);
  font-size: 16px; /* 16px min, or iOS zooms the page on focus */
  width: 100%;
  background: #fbf8f0;
  border: 1px solid var(--hair);
  border-radius: 0;
  color: var(--ink);
  padding: 11px 12px;
  min-height: 44px;
  -webkit-appearance: none;
}
.wb-input:focus,
.wb-textarea:focus { outline: 0; border-color: var(--ink); background: #fffdf7; }
.wb-input::placeholder,
.wb-textarea::placeholder { color: #a49a84; font-style: italic; }

.wb-textarea {
  line-height: 1.6;
  resize: vertical;
  min-height: 8.5rem;
}
/* type=date renders as a fixed-width control in most browsers; letting it
   stretch the full measure just looks broken. */
.wb-input-date { max-width: 12rem; }

.wb-extras { margin: 14px 0 0; }
.wb-extras > summary {
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  padding: 8px 0;
  min-height: 34px;
}
.wb-extras > summary:hover { color: var(--ink); }
.wb-extras-body { padding-bottom: 6px; }

.wb-form-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-top: 18px;
}
.wb-btn {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 0;
  padding: 12px 22px;
  min-height: 44px;
  cursor: pointer;
}
.wb-btn:hover { background: #34302a; }
.wb-hint {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--faint);
  letter-spacing: .04em;
}

.wb-admin-rule {
  border-top: 1px solid var(--ink);
  margin: 42px 0 0;
}
.wb-admin-count {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  margin: 18px 0 14px;
}

.wb-admin-list { list-style: none; margin: 0; padding: 0; }
.wb-admin-row {
  display: grid;
  grid-template-columns: var(--margin-col) 1fr;
  padding: 14px 0;
  border-bottom: 1px solid #e2dcca;
}
.wb-admin-row .wb-e-date { line-height: 1.5; }
.wb-admin-row-main { padding-left: var(--gutter); min-width: 0; }
.wb-admin-row-body {
  font-size: 15px;
  line-height: 1.55;
  margin: 0;
  overflow-wrap: break-word;
}
.wb-admin-row-src {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 6px 0 0;
}
.wb-admin-row-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 9px;
}
.wb-admin-row-actions form { display: inline; margin: 0; }
.wb-admin-row-actions a,
.wb-danger {
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  border: 0;
  border-bottom: 1px solid var(--hair);
  background: none;
  padding: 6px 0;
  min-height: 30px;
  cursor: pointer;
}
.wb-admin-row-actions a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.wb-danger:hover { color: var(--rule-red); border-bottom-color: var(--rule-red); }

:focus-visible { outline: 2px solid var(--rule-red); outline-offset: 2px; }

/* ---- narrow screens ---------------------------------------------------- */

/* Below this width the margin column costs more than it earns — it eats a
   fifth of the measure to hold eight characters. The date folds up above the
   entry instead, and the red vertical rule goes with it (the horizontal
   rulings stay, since they're what makes this a ledger at all). */
@media (max-width: 620px) {
  .wb-page { padding-left: 16px; padding-right: 16px; }
  .wb-entries {
    background-image: repeating-linear-gradient(to bottom,
      transparent 0 calc(var(--pitch) - 1px),
      var(--rule) calc(var(--pitch) - 1px) var(--pitch));
  }
  .wb-entry,
  .wb-admin-row { grid-template-columns: 1fr; }
  .wb-e-main,
  .wb-admin-row-main { padding-left: 0; }
  .wb-empty { padding-left: 0; }
  /* No margin column down here, so nothing should be indented past it. */
  .wb-pager,
  .wb-pager-at { margin-left: 0; flex-basis: 100%; order: 3; }
  .wb-mast { padding-top: 32px; }
}

@media print {
  .wb-searchwrap,
  .wb-mast-right { display: none; }
  .wb-entries { background-image: none; }
  .wb-entry { border-bottom: 1px solid #ddd; }
}