/* Library page — the Workshop (the die builder, after docs/prototypes/die-workshop)
   and the Character Gallery (gallery.css), in the Second Empire treatment of the
   front door (pages/home, pages/shared/empire.css): a deep green ground, gold
   hairlines, square corners and Georgia display type. The dense working surfaces
   keep the narrow sans and the vellum folios, which read best small. cabinet.css
   is shared with Profiles and stays as it is; its tokens are re-pointed for this
   page only. */
body.library-page {
  --ebon: #0c1e1c;
  --wood: #102824;
  --wood-raised: #17332c;
  --wood-line: #3c5147;
  --brass: #a8874a;
  --brass-hi: #dcba7d;
  --brass-pale: #ecd6a8;
  --on-wood: #efe8d6;
  --on-wood-soft: #a9b8ab;
  --serif: Georgia, 'Times New Roman', serif;
  --gold-line: rgba(193,164,109,.3);
  background: radial-gradient(ellipse at 85% -10%, rgba(36,76,64,.55), transparent 55%), #0c1e1c;
}
.library-page .btn, .library-page .navlink, .library-page .search, .library-page .chip { border-radius: 0; }
.library-page .btn.primary { background: var(--brass-hi); border-color: var(--brass-hi); color: #142820; }
.library-page .btn.primary:hover { background: #f0d49e; border-color: #f0d49e; }
.library-page .folio { border-radius: 0; box-shadow: 0 10px 26px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.35); }
.library-page .folio h2 { font-weight: 400; }

/* ── Second Empire bar ──────────────────────────────────────────────────── */
.empire-bar {
  display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap;
  padding: 9px 18px; border-bottom: 1px solid var(--gold-line);
  background: linear-gradient(180deg, rgba(19,46,40,.96), rgba(12,30,28,.94));
}
.brand { color: var(--on-wood); text-decoration: none; font: 14px/1.2 var(--serif); letter-spacing: .17em; text-transform: uppercase; }
.brand span { display: block; font: 10px/1.8 system-ui, sans-serif; color: #a5b6aa; letter-spacing: .2em; }
.brand:hover { color: var(--brass-pale); }
.views { display: flex; gap: 2px; margin-left: 6px; }
.view-link {
  font: 16px/1 var(--serif); color: var(--on-wood-soft); text-decoration: none;
  padding: 10px 12px 8px; border-bottom: 2px solid transparent;
}
.view-link:hover { color: var(--brass-pale); }
.view-link[aria-current="page"] { color: var(--brass-hi); border-bottom-color: var(--brass-hi); }
.empire-bar .navlink { font-weight: 600; }

/* The die is the object of this page, so its size follows the viewport rather
   than being pinned small to make room for a companion. The Librarian's arrival
   had shrunk it from 116px to 84px (76px on a laptop) and taken its type down
   to 9.5px with it. */
:root {
  --side: clamp(84px, 7.1vw, 116px);
  /* The side columns give way when she is in use; the builder never does. */
  --faces-w: 300px;
  --librarian-w: 272px;
  --rules-w: 276px;
  /* The preview's height is fixed, whatever it shows, so the list above it
     never grows or shrinks under the pointer. Long rules scroll inside it. */
  --preview-h: 212px;
}
@media (max-height: 940px) { :root { --preview-h: 184px; } }

.app { display: grid; grid-template-rows: auto minmax(0, 1fr); height: 100vh; min-height: 720px; }
.workshop { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; }
body[data-view="gallery"] .app { height: auto; min-height: 100vh; grid-template-rows: auto 1fr; }
.loading { color: var(--on-wood-soft); margin: 30px auto; }

.bench {
  display: grid;
  grid-template-columns: var(--faces-w) minmax(0, 1fr) var(--librarian-w) var(--rules-w);
  /* Named, so hiding one section leaves its track empty instead of pulling
     every later section one column to the left. */
  grid-template-areas: "faces builder librarian rules";
  gap: 14px; padding: 14px 14px 0; min-height: 0;
}
.faces-folio { grid-area: faces; }
.workbench { grid-area: builder; }
.librarian-shell { grid-area: librarian; }
.rules-folio { grid-area: rules; }
/* An open study earns more room — taken from the face list and the rule checks,
   never from the die. */
.bench.studying { --faces-w: 216px; --librarian-w: 400px; --rules-w: 232px; }

/* ── Filters ────────────────────────────────────────────────────────────── */
.chips { display: flex; flex-wrap: wrap; gap: 4px; }
.chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px;
  border: 1px solid var(--rule); border-radius: 999px; background: transparent;
  color: var(--ink); font-weight: 600; font-size: 12px;
}
.chip svg { width: 13px; height: 13px; color: var(--brass); flex: none; }
.chip:hover:not(:disabled) { background: var(--vellum-hi); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--vellum-hi); }
.chip[aria-pressed="true"] svg { color: var(--brass-hi); }
.chip[aria-pressed="true"] .pips i { box-shadow: inset 0 0 0 1px #8a7d66; }
.chip[aria-pressed="true"] .pips i.on { background: var(--brass-hi); }
.chip:disabled { opacity: .42; cursor: not-allowed; }
.search {
  width: 100%; padding: 6px 9px; border-radius: 3px;
  border: 1px solid var(--rule); background: var(--vellum-hi); color: var(--ink); font-size: 14px;
}
.search::placeholder { color: #8a7d66; }

.pips { display: inline-flex; gap: 2px; vertical-align: middle; }
.pips i { width: 6px; height: 6px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--rule); }
.pips i.on { background: var(--brass); box-shadow: none; }

/* ── Face rows ──────────────────────────────────────────────────────────── */
.face {
  display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 0 10px; align-items: center;
  width: 100%; padding: 8px 14px; text-align: left;
  background: transparent; border: 0; border-bottom: 1px solid rgba(164,147,114,.45);
  color: var(--ink); cursor: grab;
}
.face:hover, .face.detail-on { background: var(--vellum-hi); }

/* A face the Registry has approved but the build rules do not yet allow — its
   ability is still being decided. Listed and readable, never placeable. */
.face-unavailable { opacity: .58; cursor: not-allowed; }
.face-unavailable .nm { font-style: italic; }
.face .use.unavailable { font-style: italic; }
.medal {
  width: 38px; height: 38px; border-radius: 50%; overflow: hidden; flex: none;
  display: grid; place-items: center; background: var(--ink); color: var(--brass-hi);
  font-weight: 700; font-size: 11px; letter-spacing: .04em;
}
.medal img { width: 100%; height: 100%; object-fit: cover; display: block; }
.face .main { display: flex; flex-direction: column; min-width: 0; }
.face .nm { font-family: var(--serif); font-weight: 600; font-size: 15.5px; line-height: 1.2; }
.loc { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.loc svg { width: 12px; height: 12px; color: var(--brass); }
.face .ab { font-size: 12.5px; font-weight: 700; margin-top: 1px; }
.face .meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.cv { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.use { font-size: 11px; font-weight: 700; color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.use.at { color: var(--brass); }
.use.over { color: var(--oxblood); }
.empty-list { padding: 18px 14px; color: var(--ink-soft); margin: 0; }

/* ── Compact filters ────────────────────────────────────────────────────── */
.faces-folio .folio-head { gap: 7px; padding: 11px 12px 10px; }
.filter-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
.filter-row label { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.filter-row select {
  min-width: 0; padding: 4px 6px; border: 1px solid var(--rule); border-radius: 0;
  background: var(--vellum-hi); color: var(--ink); font: 600 13px var(--narrow); letter-spacing: 0; text-transform: none;
}

/* ── The list and its reserved preview ──────────────────────────────────── */
.faces-folio .face-list { flex: 1 1 0; min-height: 96px; overscroll-behavior: contain; }
.face-preview {
  flex: 0 0 var(--preview-h); height: var(--preview-h); min-height: 0;
  display: flex; flex-direction: column; overflow: hidden;
  border-top: 2px solid var(--rule); background: var(--vellum-low);
}
.pv-empty { margin: 0; padding: 14px 12px; color: var(--ink-soft); font-size: 12.5px; }
.pv-head { flex: none; display: flex; gap: 8px; align-items: center; padding: 7px 12px 5px; }
.pv-id { min-width: 0; }
.pv-id h3 { margin: 0; font: 400 16px/1.15 var(--serif); overflow-wrap: anywhere; }
.pv-stats { flex: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 12px; border-block: 1px solid rgba(164,147,114,.55); }
.pv-stats div { display: flex; justify-content: center; align-items: baseline; gap: 4px; padding: 2px 0; }
.pv-stats div + div { border-left: 1px dotted rgba(164,147,114,.6); }
.pv-stats dt { font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.pv-stats dd { margin: 0; font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pv-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 6px 12px; font-size: 12.5px; line-height: 1.45; }
.pv-body:focus-visible { outline-offset: -2px; }
.pv-body p { margin: 0 0 5px; }
.pv-body .pv-ability { font-weight: 700; margin-bottom: 2px; }
.pv-body .face-blocked { margin-top: 6px; font-style: italic; color: var(--ink-soft); }
.pv-actions { flex: none; display: flex; justify-content: flex-end; padding: 4px 12px 5px; border-top: 1px solid rgba(164,147,114,.4); }

/* ── Workbench ──────────────────────────────────────────────────────────── */
.workbench {
  container-type: inline-size;
  background: radial-gradient(ellipse at 45% 38%, #1f3d35, #0f2420 72%);
  border: 1px solid var(--gold-line); border-radius: 0;
  min-height: 0; overflow: auto; padding: 13px 14px 16px;
  display: flex; flex-direction: column; gap: 12px;
}
.die-title { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.die-name { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 230px; }
.die-name label { color: var(--on-wood-soft); }
.name-input {
  font-family: var(--serif); font-weight: 600; font-size: clamp(23px, 1.7vw, 27px); line-height: 1.15;
  background: transparent; border: 0; border-bottom: 1px solid var(--wood-line);
  color: var(--vellum-hi); padding: 2px 0; width: 100%;
}
.name-input:focus { outline: none; border-bottom-color: var(--brass-hi); }
.name-input:disabled { border-bottom-style: dotted; }
.idline { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--on-wood-soft); font-variant-numeric: tabular-nums; }
.state { font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: 11px; padding: 1px 7px; border-radius: 2px; }
.state.ok  { color: var(--verdigris-lit); background: rgba(79,113,104,.28); }
.state.bad { color: var(--oxblood-lit); background: rgba(120,58,62,.4); }
.state.pre { color: var(--brass-pale); background: rgba(148,118,49,.25); }
.save-status { font-weight: 600; }
.save-status.saving, .save-status.pending { color: var(--brass-pale); }
.save-status.saved { color: var(--verdigris-lit); }
.save-status.blocked, .save-status.error { color: var(--oxblood-lit); }
.die-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.hint { font-size: 13px; color: var(--on-wood-soft); margin: 0; }
.notice { min-height: 19px; font-size: 13px; font-weight: 600; color: var(--brass-pale); margin: -4px 0 0; }

.stage { display: flex; flex-direction: column; gap: 14px; align-items: stretch; }

.net-wrap { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.net { display: grid; grid-template-columns: repeat(4, var(--side)); grid-template-rows: repeat(3, var(--side)); gap: 5px; }
.side {
  position: relative; overflow: hidden; display: flex; flex-direction: column; text-align: left;
  padding: 5px 6px 6px; border-radius: 2px;
  background: var(--vellum); color: var(--ink); border: 2px solid transparent;
  box-shadow: 0 3px 8px rgba(0,0,0,.35); transition: transform .12s ease;
}
.side .top { display: flex; justify-content: space-between; align-items: flex-start; }
.side .medal {
  width: clamp(24px, calc(var(--side) * .26), 30px);
  height: clamp(24px, calc(var(--side) * .26), 30px);
  font-size: clamp(8px, calc(var(--side) * .078), 9px);
}
.side .nm { font-family: var(--serif); font-weight: 600; font-size: clamp(11.5px, calc(var(--side) * .118), 13.5px); line-height: 1.12; margin-top: 3px; }
.side .ab { font-size: clamp(10px, calc(var(--side) * .108), 11px); font-weight: 700; color: var(--ink-soft); margin-top: 1px; line-height: 1.15; }
.side .pips i { width: 4px; height: 4px; }
.side .cv { font-size: 10px; }
.side .bot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; padding-top: 2px; }
.side.empty { background: rgba(232,223,204,.06); color: var(--on-wood-soft); border: 2px dashed #6b5a45; box-shadow: none; }
.side.empty .nm { color: var(--on-wood-soft); font-weight: 500; margin-top: 12px; }
.side.empty .dp i.on { background: var(--on-wood-soft); }
.side.broken { background: repeating-linear-gradient(135deg, var(--vellum-low) 0 6px, #e0cdc4 6px 12px); border-color: var(--oxblood); }
.side.broken .nm { text-decoration: line-through; color: var(--ink-soft); }
.side.broken .ab { color: var(--oxblood); }
.side.pair-of-sel { box-shadow: 0 0 0 2px rgba(196,167,95,.45), 0 3px 8px rgba(0,0,0,.35); }
.side.opp { box-shadow: 0 0 0 3px rgba(196,167,95,.6), 0 3px 8px rgba(0,0,0,.35); }
.side.sel { box-shadow: 0 0 0 3px var(--brass-hi), 0 3px 10px rgba(0,0,0,.45); }
.side.drop { transform: translateY(-3px); }
.side .overbar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--oxblood); }
.side[draggable="true"] { cursor: grab; }

.dp { display: grid; grid-template-columns: repeat(3, 4px); grid-template-rows: repeat(3, 4px); gap: 1px; margin-top: 2px; }
.dp i { border-radius: 50%; }
.dp i.on { background: var(--ink); }

.selbar { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; min-height: 24px; font-size: 12px; color: var(--on-wood-soft); text-align: center; }
.selbar b { color: var(--vellum-hi); }

.readouts { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; padding-top: 11px; border-top: 1px solid var(--wood-line); align-items: stretch; }
.budget-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; text-align: center; padding: 8px; border-radius: 3px; background: rgba(17,14,11,.22); }
.budget-ring { --fill: 0%; width: 68px; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--brass-hi) var(--fill), #4a3d2f 0); position: relative; }
.budget-ring::after { content: ''; position: absolute; inset: 8px; border-radius: 50%; background: #2d251d; box-shadow: inset 0 0 0 1px rgba(196,167,95,.18); }
.budget-ring span { position: relative; z-index: 1; color: var(--vellum-hi); font: 600 20px/1 var(--serif); font-variant-numeric: tabular-nums; }
.budget-ring small { display: block; color: var(--on-wood-soft); font: 700 9px/1.2 var(--narrow); margin-top: 2px; }
.budget-card.over .budget-ring { background: conic-gradient(#b0676c var(--fill), #4a3d2f 0); }
.pair-map { min-width: 0; }
.r-label { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.r-label .eyebrow { color: var(--on-wood-soft); }
.r-note { font-size: 12.5px; margin-top: 5px; color: var(--on-wood-soft); }
.r-note.bad { color: var(--oxblood-lit); font-weight: 600; }
.pairs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 7px; }
.pair { display: grid; grid-template-columns: 1fr auto; gap: 5px 7px; align-items: baseline; padding: 7px; border: 1px solid rgba(196,167,95,.2); border-radius: 3px; background: rgba(17,14,11,.2); font-size: 11px; }
.pair .pp { font-weight: 700; color: var(--brass-pale); font-variant-numeric: tabular-nums; }
.pair .names { grid-column: 1 / -1; min-height: 28px; color: var(--on-wood-soft); overflow-wrap: anywhere; line-height: 1.2; }
.pair .names b { color: var(--brass-pale); }
.pair .sum { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--vellum-hi); }
.pair .meter { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; }
.pair .meter i { height: 4px; background: #4a3d2f; }
.pair .meter i.on { background: var(--brass-hi); }
.pair.bad .sum { color: var(--oxblood-lit); }
.pair.bad .meter i.on { background: #b0676c; }

/* ── The Librarian ─────────────────────────────────────────────────────── */
.librarian-shell { min-width: 0; min-height: 0; }
.librarian {
  position: relative; display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: hidden; border: 1px solid rgba(196,167,95,.62); border-radius: 0;
  background: linear-gradient(120deg, #0d1f1b 0 24%, #132a24 55%, #1b3129 100%);
  box-shadow: 0 12px 34px rgba(0,0,0,.28);
}
.librarian-top { position: relative; display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 11px; align-items: center; min-height: 104px; padding: 9px 11px 0; border-bottom: 1px solid rgba(196,167,95,.25); }
/* Studying is when she earns the larger presence. */
.bench.studying .librarian-top { grid-template-columns: 112px minmax(0, 1fr); min-height: 140px; }
.bench.studying .librarian-presence { min-height: 132px; }
.bench.studying .portrait-halo { width: 100px; height: 100px; top: 12px; }
.librarian-presence { position: relative; align-self: stretch; min-height: 96px; overflow: hidden; background: radial-gradient(circle at 52% 35%, rgba(196,167,95,.18), transparent 60%); }
.librarian-presence img { position: absolute; z-index: 2; inset: 0 auto 0 50%; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; transform: translateX(-50%); filter: drop-shadow(0 7px 12px rgba(0,0,0,.5)); }
.portrait-halo { position: absolute; z-index: 1; width: 74px; height: 74px; left: 50%; top: 9px; transform: translateX(-50%); border-radius: 50%; border: 1px solid rgba(196,167,95,.3); box-shadow: 0 0 28px rgba(196,167,95,.12), inset 0 0 20px rgba(196,167,95,.08); }
.presence-state { position: absolute; z-index: 3; left: 50%; bottom: 5px; transform: translateX(-50%); padding: 3px 7px; border-radius: 999px; background: rgba(15,17,15,.8); color: var(--brass-pale); font-size: 8px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; backdrop-filter: blur(5px); }
.librarian.thinking .portrait-halo { animation: librarian-thought 1.7s ease-in-out infinite; }
.librarian.thinking .librarian-presence img { animation: librarian-breathe 1.7s ease-in-out infinite; }
.librarian-identity { min-width: 0; align-self: center; }
.librarian-identity .eyebrow { color: var(--brass-pale); }
.librarian-identity h2 { margin: 1px 0 0; color: var(--vellum-hi); font-family: var(--serif); font-size: 20px; font-weight: 400; }
.bench.studying .librarian-identity h2 { font-size: 23px; }
.librarian-identity p { margin: 4px 0 0; color: var(--on-wood-soft); font-size: 11px; line-height: 1.35; }
.librarian-close { position: absolute; top: 8px; right: 8px; }
.librarian-dialogue { min-width: 0; min-height: 0; padding: 10px 12px 12px; display: flex; flex: 1; flex-direction: column; }
.lib-transcript { display: flex; flex: 1; flex-direction: column; gap: 10px; min-height: 120px; overflow-y: auto; padding: 2px 2px 8px; scrollbar-color: var(--brass) transparent; }
.lib-message { max-width: 88%; }
.lib-message span { display: block; margin: 0 0 3px; color: var(--brass-pale); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.lib-message p { margin: 0; white-space: pre-wrap; padding: 9px 11px; border-radius: 3px; color: var(--vellum-hi); font-family: var(--serif); font-size: 15px; line-height: 1.42; background: rgba(255,255,255,.055); border-left: 2px solid var(--brass); }
.lib-message.user { align-self: flex-end; }
.lib-message.user span { text-align: right; color: var(--on-wood-soft); }
.lib-message.user p { font-family: var(--narrow); font-size: 14px; background: rgba(79,113,104,.22); border: 0; border-right: 2px solid var(--verdigris-lit); }
.lib-invitation { margin: 0; padding: 13px 12px; border-left: 2px solid var(--brass); background: rgba(255,255,255,.045); }
.lib-invitation p { margin: 0 0 12px; color: var(--vellum-hi); font-family: var(--serif); font-size: 15px; line-height: 1.4; }
.bench.studying .lib-invitation p { font-size: 17px; }
.lib-face-prompts { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; padding: 4px 0 9px; }
.lib-face-prompts > span { color: var(--on-wood-soft); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin-right: 3px; }
.lib-face-prompts button { padding: 3px 8px; border: 1px solid rgba(196,167,95,.45); border-radius: 999px; background: transparent; color: var(--brass-pale); font-size: 11px; }
.lib-face-prompts button:hover { background: rgba(196,167,95,.12); border-color: var(--brass-hi); }
.lib-compose { margin-top: auto; }
.lib-compose label { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; color: var(--on-wood-soft); font-size: 11px; font-weight: 700; margin-bottom: 4px; }
.lib-send-hint { margin-left: auto; font-weight: 500; font-size: 10px; opacity: .72; }
/* Announced to a screen reader, not shown: the transcript above carries it. */
.lib-announce { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.lib-compose > div { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; min-width: 0; }
.lib-compose textarea { box-sizing: border-box; width: 100%; min-width: 0; resize: vertical; min-height: 48px; padding: 8px 10px; border: 1px solid var(--wood-line); border-radius: 3px; background: rgba(244,236,217,.94); color: var(--ink); font: 14px/1.35 var(--narrow); }
.lib-compose .btn { flex: 0 0 auto; }
.lib-compose textarea:focus { outline: 2px solid rgba(196,167,95,.45); outline-offset: 1px; }
.lib-error { margin: 5px 0 0; color: var(--oxblood-lit); font-size: 12px; font-weight: 700; }
@keyframes librarian-thought { 50% { box-shadow: 0 0 58px rgba(196,167,95,.24), inset 0 0 34px rgba(196,167,95,.12); } }
@keyframes librarian-breathe { 50% { transform: translateX(-50%) translateY(-2px); filter: drop-shadow(0 12px 19px rgba(0,0,0,.5)) brightness(1.035); } }

/* ── Rule checks ────────────────────────────────────────────────────────── */
.grp { padding: 12px 14px 4px; }
.grp .eyebrow { display: block; }
.grp .whose { font-family: var(--serif); font-weight: 600; font-size: 15px; overflow-wrap: anywhere; }
.check { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 1px 10px; padding: 9px 14px; border-bottom: 1px solid rgba(164,147,114,.45); }
.st { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 800; color: var(--vellum-hi); margin-top: 1px; }
.st.ok { background: var(--verdigris); }
.st.bad { background: var(--oxblood); }
.check .lb { font-weight: 700; font-size: 13.5px; }
.check .dt { grid-column: 2; font-size: 12.5px; color: var(--ink-soft); overflow-wrap: anywhere; }
.check.bad .dt { color: var(--oxblood); font-weight: 600; }
.dials { padding: 12px 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.dials table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.dials td { padding: 4px 0; border-bottom: 1px dotted var(--rule); vertical-align: top; }
.dials td:last-child { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.dials p { margin: 0; font-size: 12.5px; color: var(--ink-soft); }

/* ── Rail: stash and dice ───────────────────────────────────────────────── */
.rail { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 22px; padding: 12px 14px 14px; }
.library-page .slot, .library-page .card { border-radius: 0; }
.lib-section { min-width: 0; }
.rail-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.rail-h h3 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 17px; color: var(--vellum-hi); }
.rail-h span { font-size: 12px; color: var(--on-wood-soft); }
.stash { display: grid; grid-template-columns: repeat(5, 152px); gap: 8px; }
.lib { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; }
.slot, .card {
  position: relative; display: flex; flex-direction: column; gap: 6px;
  min-height: 122px; padding: 8px 10px 9px; border-radius: 3px;
  background: var(--wood-raised); border: 1px solid var(--wood-line); color: var(--on-wood);
}
.card { flex: none; width: 176px; }
.slot.cur, .card.cur { border-color: var(--brass-hi); box-shadow: inset 0 0 0 1px var(--brass-hi); }
.slot.bad, .card.bad { background: linear-gradient(180deg, rgba(120,58,62,.38), var(--wood-raised) 70%); border-color: #93545a; }
.slot.bad.cur, .card.bad.cur { border-color: var(--brass-hi); }
.slot.empty { border-style: dashed; background: transparent; color: var(--on-wood-soft); justify-content: center; font-size: 12.5px; }
.slot.drop { border-color: var(--brass-hi); background: rgba(148,118,49,.18); }
.slot-no { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--on-wood-soft); }
.open { background: none; border: 0; padding: 0; text-align: left; }
.open .nm { font-family: var(--serif); font-weight: 600; font-size: 14.5px; line-height: 1.15; color: var(--vellum-hi); overflow-wrap: anywhere; }
.open:hover .nm { color: var(--brass-pale); text-decoration: underline; text-underline-offset: 3px; }
.slot .open { padding-right: 18px; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: auto; }
.stl { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.stl.ok { color: var(--verdigris-lit); }
.stl.bad { color: var(--oxblood-lit); }
.tag { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brass-pale); }
.x {
  position: absolute; top: 5px; right: 5px; width: 22px; height: 22px; border-radius: 2px;
  background: transparent; border: 0; color: var(--on-wood-soft); font-size: 16px; line-height: 1;
}
.x:hover { color: var(--vellum-hi); background: rgba(255,255,255,.08); }
.card.new { border-style: dashed; background: transparent; align-items: center; justify-content: center; color: var(--brass-pale); font-weight: 700; }
.card[draggable="true"] { cursor: grab; }

.mini { display: grid; grid-template-columns: repeat(4, 9px); grid-template-rows: repeat(3, 9px); gap: 1px; }
.mini i { border-radius: 1px; }
.mini i.f { background: rgba(196,167,95,var(--a)); }
.mini i.e { box-shadow: inset 0 0 0 1px #6b5a45; }
.mini i.r { background: #b0676c; }

@media (max-width: 1500px) {
  /* Four columns no longer fit around a full-size die, so she becomes a
     presence rail: visible, one click from a study, and costing almost
     nothing until she is opened. */
  :root { --faces-w: 244px; --librarian-w: 92px; --rules-w: 244px; }
  .bench { gap: 10px; padding-inline: 10px; }
  /* The face list narrows but never disappears: she often points at a face,
     and the player should be able to reach for it without closing the study. */
  .bench.studying { --faces-w: 168px; --librarian-w: 348px; --rules-w: 200px; }
/* ── Collapsed presence rail ─────────────────────────────────────────────── */
/* Below 1500px she is a rail until a study opens. Her portrait and one control
   stay reachable; the transcript, the face prompts and the compose box are not
   rendered small, they are simply not shown until there is room for them. */
  .bench:not(.studying) .librarian-rail-only .librarian-top { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .bench:not(.studying) .librarian-rail-only .librarian-identity h2 { font-size: 15px; }
  .bench:not(.studying) .librarian-rail-only .librarian-identity .eyebrow,
  .bench:not(.studying) .librarian-rail-only .librarian-identity p { display: none; }
  .bench:not(.studying) .librarian-rail-only .lib-invitation p { display: none; }
  .bench:not(.studying) .librarian-rail-only .lib-invitation { padding: 8px 6px; border-left: 0; background: none; text-align: center; }
  .bench:not(.studying) .librarian-rail-only .lib-invitation .btn { width: 100%; padding-inline: 4px; font-size: 11px; }
  /* At rail width the die's name does not fit and truncates mid-word; the
     panel heading above already says which die she is ready for. */
  .bench:not(.studying) .librarian-rail-only .lib-study-name { display: none; }

  /* Rarity and Push Value stay in their own column, so a row is three short
     lines rather than four: more of the list fits above the preview. */
  .face { grid-template-columns: 30px minmax(0, 1fr) auto; gap: 0 8px; padding: 6px 10px; }
  .face > .medal { width: 30px !important; height: 30px !important; grid-row: 1 / 4; align-self: center; }
  .face .main, .face .meta { display: contents; }
  .face .nm { grid-column: 2 / 4; font-size: 14.5px; }
  .face .loc { grid-column: 2; grid-row: 2; }
  .face .ab { grid-column: 2; grid-row: 3; }
  .face .pips { grid-column: 3; grid-row: 2; justify-self: end; }
  .face .cv { grid-column: 3; grid-row: 3; justify-self: end; }
  .face .use { display: none; }
  .check, .grp, .dials { padding-inline: 10px; }
}
@media (max-width: 1220px) {
  .app { height: auto; }
  .bench {
    grid-template-columns: minmax(0, 1fr) var(--librarian-w);
    grid-template-areas: "builder librarian" "faces faces" "rules rules";
  }
  .faces-folio { grid-area: faces; }
  .workbench { grid-area: builder; }
  .librarian-shell { grid-area: librarian; }
  /* The die comes first here: the face list is a shelf under the bench, not
     something to scroll past before reaching what you are building. */
  .bench.studying { --librarian-w: 340px; }
  .rules-folio { grid-area: rules; }
  /* The shelf: the list and its preview side by side, both a fixed height. */
  .faces-folio { display: grid; grid-template-columns: minmax(0, 1fr) 340px; grid-template-rows: auto 248px; }
  .faces-folio .folio-head { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(180px, 1fr) minmax(0, 1.4fr); align-items: end; gap: 10px; }
  .faces-folio .folio-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; }
  .face-preview { height: auto; border-top: 0; border-left: 2px solid var(--rule); }
  .faces-folio .face { border-right: 1px solid rgba(164,147,114,.45); }
  .rules-folio { grid-column: 1 / -1; }
  .rules-folio .folio-body { display: grid; grid-template-columns: repeat(3, 1fr); }
  .rail { grid-template-columns: 1fr; }
  .stash { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}
@media (max-width: 900px) {
  :root { --side: 82px; }
  .bench { grid-template-columns: 1fr; grid-template-areas: "faces" "builder" "librarian" "rules"; }
  .faces-folio { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 300px var(--preview-h); }
  .faces-folio .folio-head { grid-template-columns: minmax(0, 1fr); }
  .faces-folio .folio-body { grid-template-columns: minmax(0, 1fr); }
  .face-preview { height: var(--preview-h); border-left: 0; border-top: 2px solid var(--rule); }
  .empire-bar { padding: 8px 12px; }
  .empire-bar .nav, .empire-bar .who { display: none; }
  .rules-folio { grid-column: auto; }
  .rules-folio .folio-body { display: block; }
  .librarian { min-height: 520px; }
}
@media (prefers-reduced-motion: reduce) { .side { transition: none; } .side.drop { transform: none; } .librarian.thinking .portrait-halo, .librarian.thinking .librarian-presence img { animation: none; } }


/* No usable portrait: she keeps her presence in type rather than leaving a
   hole where an image failed to decode. */
.librarian-no-portrait .librarian-top { grid-template-columns: minmax(0, 1fr); }
.librarian-no-portrait .librarian-presence { display: none; }

/* The Campaign/PvP switch (EVID-0662), beside the view links. */
.mode-switch { display: inline-flex; margin-left: 14px; border: 1px solid var(--brass-dim, #7a6232); border-radius: 3px; overflow: hidden; }
.mode-switch button { padding: 3px 12px; border: 0; background: transparent; color: var(--brass-pale, #d8c28a); font: inherit; font-size: 0.85rem; letter-spacing: .04em; cursor: pointer; }
.mode-switch button + button { border-left: 1px solid var(--brass-dim, #7a6232); }
.mode-switch button.on { background: var(--brass-hi, #e0b85a); color: #241a0c; font-weight: 700; }
.mode-switch button:focus-visible { outline: 2px solid var(--brass-hi, #e0b85a); outline-offset: -2px; }
/* A face locked in the Campaign view. */
.face.face-locked .use.unavailable { color: #d8a35a; }
.campaign-hidden-note { margin: 4px 0 8px; font-size: 0.85rem; color: var(--ink-dim, #b9a77e); }