/* ============================================================================
   COMPONENTS — the field-journal vocabulary. Reads only from tokens.css, so a
   tenant theme re-skins all of it by overriding --rd-* variables.

   Restyles the legacy journal utility classes (.page/.card/.list...)
   AND adds journal components (.panel/.pill/.ledger-row/.stat/.specimen...).
   The active patron/admin UX uses lens.css and must not mount footer tabs.
   ============================================================================ */

/* ── Page frame: a scoped page fills the app and manages its own internal fit ── */
.page {
  flex: 1; min-height: 0; display: flex; flex-direction: column; gap: .7rem;
  padding: 1rem 1.1rem 0; overflow: hidden;
}
.page > h1 { font-family: var(--rd-font-display); font-size: 1.5rem; font-weight: 600; color: var(--rd-ink); }
.page > h1::after { content: " ❧"; color: var(--rd-accent); font-size: 1rem; }
.page h2 { font-family: var(--rd-font-display); font-size: .95rem; font-weight: 600; color: var(--rd-ink-2); }

/* The page header strip (optional): eyebrow + title + right-aligned mono note. */
.topbar { display: flex; align-items: baseline; gap: .8rem; padding-bottom: .55rem; border-bottom: 2px solid var(--rd-ink-2); position: relative; flex-shrink: 0; }
.topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 1px; background: var(--rd-rule); }
.topbar h1 { font-family: var(--rd-font-display); font-size: 1.5rem; font-weight: 600; color: var(--rd-ink); }
.topbar h1::after { content: " ❧"; color: var(--rd-accent); }
.topbar .sub { font-size: .85rem; color: var(--rd-ink-3); font-style: italic; }
.topbar .right { margin-left: auto; font-family: var(--rd-font-mono); font-size: .66rem; color: var(--rd-ink-4); letter-spacing: .04em; }

/* Legacy scrolling content region for non-Lens pages. Lens pages forbid internal scrollbars. */
.fill { flex: 1; min-height: 0; overflow: hidden; }
.fill.list, .fill.scroll {
  overflow-y: auto; overflow-x: hidden; padding-right: .2rem; padding-bottom: 1rem;
  scrollbar-width: thin; scrollbar-color: var(--rd-rule) transparent;
}
.fill::-webkit-scrollbar, .fill.list::-webkit-scrollbar { width: 4px; }
.fill::-webkit-scrollbar-thumb, .fill.list::-webkit-scrollbar-thumb { background: var(--rd-rule); }

/* ── Overflow safety — flex/grid children default to min-width:auto, which refuses to shrink below their
   content and forces overflow. Let text-bearing children shrink so their text wraps instead. ── */
.row > *, .panel-h > *, .ledger-row > *, .topbar > *, .stack > * { min-width: 0; }
.panel-b { overflow-x: hidden; }
.topbar { flex-wrap: wrap; }

/* ── Vertical safety — THE fix for squished panels. `.fill.list/.fill.scroll` is a flex COLUMN, so its
   children (e.g. `.panel`, which sets min-height:0) otherwise flex-shrink to share the viewport height and
   clip their own content to slivers. Pin them to their natural height; the column is the one scroll. ── */
.fill.list > *, .fill.scroll > * { flex-shrink: 0; }

/* ── Type accents ── */
.eyebrow { font-family: var(--rd-font-mono); font-size: .58rem; letter-spacing: .18em; text-transform: uppercase; color: var(--rd-accent); }
.muted { color: var(--rd-ink-3); font-size: .85rem; font-style: italic; }
.mono { font-family: var(--rd-font-mono); font-size: .72rem; color: var(--rd-ink-3); }

/* ── Layout utilities ── */
.list  { display: flex; flex-direction: column; gap: .45rem; }
.stack { display: flex; flex-direction: column; gap: .5rem; }
.row   { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }

/* ── Specimen frame: card / panel with the double-rule paper mount ── */
.card, .panel {
  background: var(--rd-card); border: 1px solid var(--rd-ink-2); border-radius: var(--rd-radius);
  box-shadow: var(--rd-frame);
}
.card { padding: .75rem .85rem; }
.panel { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.panel-h { display: flex; align-items: center; gap: .6rem; padding: .6rem .9rem; border-bottom: 1px solid var(--rd-rule); flex-shrink: 0; }
.panel-h h3 { font-family: var(--rd-font-display); font-size: .76rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--rd-ink-2); }
.panel-h .tag { margin-left: auto; font-family: var(--rd-font-mono); font-size: .6rem; color: var(--rd-accent); letter-spacing: .1em; text-transform: uppercase; }
.panel-b { flex: 1; min-height: 0; overflow-y: auto; padding: .75rem .9rem; scrollbar-width: thin; scrollbar-color: var(--rd-rule) transparent; }

/* A row of entries inside a card/panel (ledger, keys, info). */
.compact { padding: .5rem 0; border-top: 1px solid rgba(60, 40, 10, .12); font-size: .88rem; }
.compact:first-child { border-top: 0; }
.compact b { display: block; font-weight: 700; color: var(--rd-ink); }
.compact .scope, .compact .eyebrow { display: inline-block; margin-bottom: .1rem; }

/* ── Stamped status mark ── */
.pill {
  display: inline-block; padding: 0 .5em; border-radius: var(--rd-radius);
  font-family: var(--rd-font-mono); font-size: .62rem; text-transform: uppercase; letter-spacing: .05em;
  font-weight: 700; color: var(--rd-ok); border: 1.4px solid currentColor; background: transparent;
  transform: rotate(-1.4deg); opacity: .9;
}
.pill.idle { color: var(--rd-ink-4); }
.pill.warn { color: var(--rd-warn); }
.pill.error { color: var(--rd-error); }

/* ── Ledger / journal entry row ── */
.ledger-row { display: flex; align-items: center; gap: .7rem; padding: .5rem 0; border-top: 1px solid rgba(60, 40, 10, .12); font-size: .88rem; }
.ledger-row:first-child { border-top: 0; }
.ledger-row .ico { width: 1.8rem; height: 1.8rem; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; border: 1.2px solid var(--rd-accent); color: var(--rd-accent); opacity: .85; }
.ledger-row .ico svg { width: .9rem; height: .9rem; stroke: currentColor; fill: none; stroke-width: 1.6; }
.ledger-row .what { flex: 1; min-width: 0; }
.ledger-row .what span { font-size: .72rem; color: var(--rd-ink-4); font-style: italic; }
.ledger-row .amt { font-family: var(--rd-font-mono); font-size: .82rem; font-weight: 700; }
.amt.pos { color: var(--rd-leaf); }
.amt.neg { color: var(--rd-sienna); }

/* ── Stat block ── */
.stat { background: var(--rd-paper); border: 1px solid var(--rd-ink-2); border-radius: var(--rd-radius); padding: .65rem .9rem; box-shadow: 0 0 0 3px var(--rd-paper), 0 0 0 4px var(--rd-rule); }
.stat .k { font-family: var(--rd-font-mono); font-size: .55rem; letter-spacing: .18em; text-transform: uppercase; color: var(--rd-ink-4); }
.stat .v { font-family: var(--rd-font-display); font-size: 1.6rem; font-weight: 700; color: var(--rd-ink); margin-top: .1rem; }

/* ── Badge grid ── */
.badge-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; }
.badge { aspect-ratio: 1; border: 1px solid var(--rd-rule); border-radius: var(--rd-radius); background: var(--rd-card); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem; padding: .35rem; text-align: center; font-size: .62rem; color: var(--rd-ink-3); }
.badge svg { width: 1.25rem; height: 1.25rem; stroke: var(--rd-accent); fill: none; stroke-width: 1.4; }
.badge.locked { opacity: .32; filter: grayscale(1); }

/* ── Specimen identity card (the patron "id-card") ── */
.specimen { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .35rem; padding: 1rem .9rem; }
.specimen .stage { width: 8.5rem; height: 8.5rem; }
.stage img.rootling-img { width: 100%; height: 100%; object-fit: contain; display: block; -webkit-user-select: none; user-select: none; }
.specimen h4 { font-family: var(--rd-font-display); font-size: 1.2rem; font-weight: 700; color: var(--rd-ink); }
.specimen .tier-label { font-family: var(--rd-font-mono); font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--rd-accent); }
.points-big { font-family: var(--rd-font-display); font-size: 2.1rem; font-weight: 700; color: var(--rd-ink); line-height: 1; }
.points-big small { display: block; margin-top: .25rem; font-family: var(--rd-font-body); font-style: italic; font-size: .7rem; font-weight: 400; color: var(--rd-ink-4); }

/* ── Forms ── */
label { display: flex; flex-direction: column; gap: .25rem; font-size: .8rem; color: var(--rd-ink-3); }
label.check { flex-direction: row; align-items: center; gap: .45rem; }
label.check input { width: auto; }
/* The Lens design language uses borderless underline-fill fields, never bordered boxes. This base rule
   establishes that treatment for every input/select; .home-form / .lens-form refine it per surface. */
input, select {
  font-family: var(--rd-font-body); font-size: .9rem; color: var(--rd-ink);
  padding: .45rem .55rem; width: 100%;
  border: 0; border-radius: 0;
  background:
    linear-gradient(90deg, rgba(242, 235, 210, .72), rgba(242, 235, 210, .22)),
    linear-gradient(var(--rd-ink-3), var(--rd-ink-3)) left bottom / 100% 1px no-repeat;
}
input:focus-visible, select:focus-visible {
  outline: 0;
  background:
    linear-gradient(90deg, rgba(242, 235, 210, .9), rgba(242, 235, 210, .36)),
    linear-gradient(var(--rd-accent), var(--rd-accent)) left bottom / 100% 2px no-repeat;
}

/* ── Buttons ── */
button {
  font-family: var(--rd-font-mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--rd-accent); background: transparent; border: 1.4px solid var(--rd-accent);
  border-radius: var(--rd-radius); padding: .4rem .85rem; cursor: pointer; transition: background .15s;
}
button:focus-visible { outline: 2px solid var(--rd-accent); outline-offset: 1px; }
button.primary { color: var(--rd-card); background: var(--rd-accent); border-color: var(--rd-accent); }
button.primary:hover { filter: brightness(1.08); background: var(--rd-accent); }
button.danger { color: var(--rd-error); border-color: var(--rd-error); }
button.danger:hover { background: rgba(154, 74, 30, .12); }
.mini-btn { font-size: .6rem; padding: .1rem .5rem; border-width: 1px; }

/* ── Legacy navigation: not mounted by the active Lens UX ── */
nav.appnav { display: flex; gap: .35rem; flex-wrap: wrap; padding: .5rem 0 .6rem; border-top: 1.5px solid var(--rd-rule); flex-shrink: 0; }
nav.appnav a {
  text-decoration: none; font-family: var(--rd-font-body); font-style: italic; font-size: .8rem;
  color: var(--rd-ink-3); background: var(--rd-paper-2);
  border: 1px solid var(--rd-rule); border-bottom-color: transparent;
  border-radius: 3px 3px 0 0; padding: .2rem .75rem; transition: all .15s;
}
nav.appnav a.active { font-style: normal; color: var(--rd-card); background: var(--rd-accent); border-color: var(--rd-accent); }
nav.appnav a:focus-visible { outline: 2px solid var(--rd-accent); }

.empty-state { font-style: italic; font-size: .85rem; color: var(--rd-ink-4); padding: .7rem 0; line-height: 1.6; }