/* =========================================================================
   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;
}
.wb-mast-name {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  margin: 0;
}
.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; }
.wb-search {
  font-family: var(--serif);
  font-size: 16px;
  width: 100%;
  max-width: 22rem;
  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); }

/* ---- 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);
}
/* The class-based `display: grid` above outranks the UA stylesheet's
   `[hidden] { display: none }`, so search-hidden entries would stay visible
   without this. Same reason the no-results line needs its own rule. */
.wb-entry[hidden] { display: none; }
.wb-empty[hidden] { display: none; }

.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;
}

/* ---- 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; }
  .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; }
}