/* King's Court · the Chancery. Uses the game's palette and fonts (theme.css) lightly:
   vellum page, iron-gall ink, vermilion headings. Clarity and density come first. */

:root {
  --ui: 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
  --mono: 'Cascadia Mono', Consolas, 'Courier New', monospace;
  --field: #fbf5e6;
  --field-focus: #fff6d6;
  --panel: #f5ead0;
  --chip: #e6d4a8;
  --err: #a12a1f;
  --warn: #8a5a12;
  --ok: #2f6b4c;
  --sel: #e2cf9f;
}

html, body { height: 100%; }
body {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  height: 100vh;
  overflow: hidden;
  font-family: var(--ui);
  font-size: 13px;
  line-height: 1.4;
  font-variant-numeric: lining-nums tabular-nums;
}
button { cursor: pointer; }
code, .mono { font-family: var(--mono); font-size: 12px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- top bar ---------- */
.top {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 14px;
  padding: 8px 14px;
  background: var(--vellum-texture), var(--vellum-shadow);
}
.brand { white-space: nowrap; }
.brand .bl { font-family: var(--font-blackletter); font-size: 22px; color: var(--vermilion-deep); }
.brand .rb { font-family: var(--font-rubric); font-size: 16px; letter-spacing: .06em; color: var(--iron-gall); margin-left: 4px; }
.search input {
  width: 300px; padding: 5px 8px; font: 13px var(--ui);
  background: var(--field); border: none; border-radius: 2px;
}
.search input:focus { outline: none; background: var(--field-focus); box-shadow: inset 0 -2px 0 var(--gold-leaf); }
.filters { display: flex; gap: 4px; }
.flt, .btn-s {
  appearance: none; border: none; border-radius: 2px;
  padding: 5px 10px; font: 12.5px var(--ui); color: var(--iron-gall);
  background: rgba(255, 250, 235, .55); text-decoration: none; white-space: nowrap;
}
.flt:hover, .btn-s:hover { color: var(--vermilion); }
.flt[aria-pressed='true'] { background: var(--lapis); color: var(--bone); }
.btn-s.gold { background: var(--gilt); }
.btn-s.warn { background: var(--vermilion-deep); color: var(--bone); }
.btn-s:disabled { opacity: .45; cursor: default; color: var(--iron-gall); }
.btn-s:focus-visible, .flt:focus-visible, .ib:focus-visible, .tick:focus-visible, .crow:focus-visible, .cat:focus-visible, .chip:focus-visible { outline: none; background: var(--gold-leaf-hi); color: var(--iron-gall); }
.status { flex: 1; min-width: 0; text-align: right; font-size: 12px; line-height: 1.25; color: var(--faded-ink); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.status.err { color: var(--err); font-weight: 600; }
.status.ok { color: var(--ok); }
.top-acts { display: flex; gap: 6px; }

/* ---------- sidebar ---------- */
.side {
  display: flex; flex-direction: column; min-height: 0;
  background: var(--vellum-texture), #e8d6ad;
}
.cats { flex: 1; overflow-y: auto; padding: 8px 0 12px; }
.grp { font-family: var(--font-rubric); font-size: 14px; letter-spacing: .06em; color: var(--vermilion); padding: 10px 14px 2px; }
.grp2 { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--faded-ink); padding: 5px 14px 0 22px; }
.cat {
  display: flex; align-items: baseline; gap: 6px;
  padding: 2px 12px 2px 22px; color: var(--iron-gall); text-decoration: none; font-size: 12.5px;
}
.cat.top-level { padding-left: 14px; font-weight: 600; }
.cat:hover { background: rgba(255, 250, 235, .45); }
.cat.on { background: var(--sel); box-shadow: inset 3px 0 0 var(--vermilion); }
.cat .c-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cat .c-meta { font-size: 11.5px; color: var(--faded-ink); white-space: nowrap; }
.cat .c-meta .r { color: var(--warn); }
.cat .c-meta .e { color: var(--err); font-weight: 700; }
.cat.dim { opacity: .45; }
.cat.missing .c-name { font-style: italic; }
.legend { font-size: 11px; color: var(--faded-ink); padding: 0 14px 4px; }

.files { padding: 8px 12px 10px; background: rgba(43, 27, 16, .07); }
.files h4 { font-family: var(--font-rubric); font-size: 13px; color: var(--vermilion); margin: 0 0 4px; letter-spacing: .06em; }
.frow { display: flex; align-items: center; gap: 6px; padding: 2px 0; }
.frow code { flex: 1; }
.frow .fs { font-size: 11.5px; color: var(--ok); }
.frow.dirty .fs { color: var(--vermilion); font-weight: 700; }
.frow .btn-s { padding: 2px 8px; font-size: 11.5px; }
.keys { font-size: 11px; color: var(--faded-ink); margin-top: 6px; }

/* ---------- main ---------- */
.main { min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.loading { padding: 30px; }
.cat-head { padding: 12px 22px 10px; background: var(--vellum-texture), var(--vellum); }
.cat-head .crumbs { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--faded-ink); }
.cat-head h2 { font-family: var(--font-rubric); font-size: 24px; letter-spacing: .04em; color: var(--vermilion); margin: 2px 0 2px; line-height: 1.15; }
.cat-head h2 code { font-size: 12px; color: var(--faded-ink); letter-spacing: 0; margin-left: 6px; }
.cat-head .help { margin: 0 0 6px; color: var(--faded-ink); max-width: 1120px; }
.head-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.head-row .grow { flex: 1; }
.ph-legend { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; margin: 2px 0 6px; font-size: 12px; }
.chip { appearance: none; border: none; border-radius: 2px; background: var(--chip); padding: 1px 6px; font: 12px var(--mono); color: var(--iron-gall); }
.chip:hover { color: var(--vermilion); }
.chip.req { background: #d9b97a; font-weight: 700; }
.ph-legend .eg { color: var(--faded-ink); font-style: italic; }
.dirty-note { color: var(--vermilion); font-weight: 600; }
.body { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 22px 40px; }
.showing { font-size: 12px; color: var(--faded-ink); margin: 4px 0 8px; }

/* text fields */
.field { margin: 0 0 8px; }
.f-label { display: flex; align-items: baseline; gap: 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--faded-ink); margin-bottom: 2px; }
.f-label .cnt { margin-left: auto; text-transform: none; letter-spacing: 0; }
.cnt { font-size: 11px; color: var(--faded-ink); white-space: nowrap; }
.cnt.over { color: var(--err); font-weight: 700; }
.main input[type='text'], .main textarea, .main select {
  width: 100%; border: none; border-radius: 2px;
  background: var(--field); color: var(--iron-gall);
  padding: 5px 7px; font: 15.5px/1.38 var(--font-body);
  resize: none; overflow: hidden;
}
.main input.mono { font: 12.5px var(--mono); }
.main input[type='text']:focus, .main textarea:focus, .main select:focus { outline: none; background: var(--field-focus); box-shadow: inset 0 -2px 0 var(--gold-leaf); }
.main .bad input[type='text'], .main .bad textarea, .main textarea.bad, .main input.bad { box-shadow: inset 3px 0 0 var(--err); }
.flash { animation: flash 1.6s ease; }
@keyframes flash { 0%, 40% { background: var(--gold-leaf-hi); } }

.preview { font: italic 14.5px/1.35 var(--font-body); color: #4a3a26; padding: 3px 7px 1px; }
.preview::before { content: 'In game: '; font: 10.5px var(--ui); text-transform: uppercase; letter-spacing: .07em; color: var(--faded-ink); font-style: normal; }
.preview .ph { font-weight: 600; font-style: normal; color: var(--lapis); }
.preview .ph-bad { font: 12px var(--mono); color: var(--bone); background: var(--err); padding: 0 3px; }

.iss { font-size: 12px; padding: 1px 0 1px 12px; position: relative; }
.iss::before { content: ''; position: absolute; left: 2px; top: 6px; width: 6px; height: 6px; }
.iss.error { color: var(--err); font-weight: 600; }
.iss.error::before { background: var(--err); }
.iss.warn { color: var(--warn); }
.iss.warn::before { background: var(--ochre); border-radius: 50%; }

/* icon buttons and the review tick */
.ib { appearance: none; border: none; background: transparent; color: var(--faded-ink); width: 24px; height: 24px; padding: 4px; border-radius: 2px; }
.ib svg { width: 16px; height: 16px; fill: currentColor; display: block; }
.ib:hover { color: var(--vermilion); background: rgba(255, 250, 235, .6); }
.ib:disabled { opacity: .3; cursor: default; }
.tick {
  appearance: none; border: none; border-radius: 2px; display: inline-flex; align-items: center; gap: 6px;
  background: transparent; padding: 2px 6px 2px 2px; font: 12px var(--ui); color: var(--faded-ink); white-space: nowrap;
}
.tick .box { width: 18px; height: 18px; border-radius: 2px; background: var(--chip); display: inline-flex; align-items: center; justify-content: center; }
.tick .box svg { width: 14px; height: 14px; fill: var(--bone); opacity: 0; }
.tick.on { color: var(--ok); }
.tick.on .box { background: var(--ok); }
.tick.on .box svg { opacity: 1; }
.tick:hover .box { background: #cdb57d; }
.tick.on:hover .box { background: #255a3f; }

.badges { display: inline-flex; gap: 6px; font-size: 11px; white-space: nowrap; }
.badges .e { color: var(--err); font-weight: 700; }
.badges .w { color: var(--warn); }
.badges .c { color: var(--lapis); }

/* ---------- crises ---------- */
.crisis-layout { flex: 1; min-height: 0; display: grid; grid-template-columns: 252px minmax(0, 1fr); }
.clist { overflow-y: auto; padding: 4px 0 30px; background: rgba(43, 27, 16, .045); }
.crow {
  appearance: none; border: none; background: transparent; text-align: left; width: 100%;
  display: block; padding: 5px 12px 6px 16px; color: var(--iron-gall); font: 13px var(--ui);
}
.crow:hover { background: rgba(255, 250, 235, .5); }
.crow.on { background: var(--sel); box-shadow: inset 3px 0 0 var(--vermilion); }
.crow .cr-t { display: block; font: 15px/1.2 var(--font-body); font-weight: 600; }
.crow .cr-m { display: flex; flex-wrap: wrap; gap: 0 7px; font-size: 11px; color: var(--faded-ink); margin-top: 1px; }
.crow .m-err { color: var(--err); font-weight: 700; }
.crow .m-warn { color: var(--warn); }
.crow .m-rev { color: var(--warn); font-style: italic; }
.crow .m-ok { color: var(--ok); }
.crow .m-chg { color: var(--lapis); }
.clist .empty { padding: 12px 16px; color: var(--faded-ink); font-style: italic; }

.ced { overflow-y: auto; padding: 10px 20px 40px; }
.ce-top { display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; gap: 12px; align-items: end; margin-bottom: 6px; }
.ce-acts { display: flex; align-items: center; gap: 2px; padding-bottom: 2px; }
.ce-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.style-line { display: flex; gap: 8px; align-items: baseline; font-size: 12.5px; margin: 2px 0 8px; padding: 5px 9px; background: rgba(63, 122, 90, .12); color: var(--ok); }
.style-line.no { background: rgba(184, 134, 47, .16); color: var(--warn); }
.style-line b { font-family: var(--font-rubric); letter-spacing: .05em; font-weight: 400; font-size: 13.5px; }

.opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; }
.opt { background: var(--vellum-texture), var(--panel); padding: 8px 10px 10px; }
.opt > header { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.opt-n { font-family: var(--font-rubric); font-size: 15px; color: var(--vermilion); letter-spacing: .05em; }
.role { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; padding: 1px 6px; border-radius: 2px; color: var(--bone); }
.role.greedy { background: var(--ochre); color: var(--iron-gall); }
.role.noble { background: var(--verdigris); }
.role.rival { background: var(--lapis); }
.role.wildcard { background: var(--murrey); }
.balance { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 12px; padding: 4px 7px; margin: 0 0 8px; background: rgba(43, 27, 16, .06); }
.balance .bk { color: var(--faded-ink); }
.pos { color: var(--ok); font-weight: 700; }
.neg { color: var(--err); font-weight: 700; }
.zero { color: var(--faded-ink); }
.chk { display: flex; align-items: center; gap: 6px; font-size: 12.5px; margin: 0 0 8px; cursor: pointer; }
.chk input { width: 15px; height: 15px; accent-color: var(--lapis); margin: 0; }

.fx { margin: 4px 0 2px; }
.fx-group { margin-bottom: 4px; }
.fx-group.off { opacity: .45; }
.fx-g { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--faded-ink); }
.fx-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; }
.st { display: flex; flex-direction: column; align-items: stretch; min-width: 0; }
.st-k { font-size: 10.5px; color: var(--faded-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-c { display: grid; grid-template-columns: 18px minmax(0, 1fr) 18px; background: var(--field); border-radius: 2px; }
.st-b { appearance: none; border: none; background: transparent; padding: 0; font: 14px/20px var(--ui); color: var(--faded-ink); }
.st-b:hover { color: var(--vermilion); background: var(--chip); }
.main input.st-v { width: 100%; text-align: center; padding: 1px 0; font: 600 13px/18px var(--ui); background: transparent; }
.main input.st-v:focus { box-shadow: none; background: var(--field-focus); }
.st-v.pos { color: var(--ok); } .st-v.neg { color: var(--err); } .st-v.zero { color: #b7a27a; font-weight: 400; }

.twist { margin-top: 8px; padding: 6px 8px 4px; background: rgba(122, 46, 74, .08); }
.twist-h { display: flex; align-items: baseline; gap: 6px; font-family: var(--font-rubric); font-size: 13.5px; color: var(--murrey); letter-spacing: .04em; margin-bottom: 4px; }
.twist-h small { font-family: var(--ui); font-size: 11px; color: var(--faded-ink); letter-spacing: 0; }
.twist-h .btn-s { margin-left: auto; padding: 1px 7px; font-size: 11px; }
.add-twist { margin-top: 8px; }

/* ---------- flavor lines ---------- */
.lines { list-style: none; margin: 0; padding: 0; max-width: 1080px; }
.line { display: grid; grid-template-columns: 26px minmax(0, 1fr) 224px; gap: 8px; padding: 7px 0 7px; }
.line + .line { background: linear-gradient(var(--vellum-shadow), var(--vellum-shadow)) top / 100% 1px no-repeat; }
.ln { font: 600 13px/30px var(--ui); color: var(--faded-ink); text-align: right; }
.line-side { display: flex; flex-direction: column; gap: 3px; padding-top: 4px; }
.line-side .r1 { display: flex; align-items: center; gap: 8px; }
.line-acts { display: inline-flex; gap: 0; margin-left: auto; }
.add-line { margin: 10px 0 0 34px; }
.missing-note { margin: 4px 0 10px; padding: 8px 10px; background: rgba(184, 134, 47, .16); max-width: 1046px; }
.missing-note q { font: italic 15px var(--font-body); }

/* ---------- agendas and houses ---------- */
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 1180px; }
.card2 { background: var(--vellum-texture), var(--panel); padding: 9px 12px 10px; }
.card2 > header { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.card2 > header .grow { flex: 1; }
.card2 h3 { font-family: var(--font-rubric); font-size: 16px; color: var(--vermilion); letter-spacing: .04em; }
.rule-note { font-size: 12px; color: var(--faded-ink); margin: 0 0 6px; }
.rule-note b { color: var(--iron-gall); font-weight: 600; }
.h-grid { display: grid; grid-template-columns: minmax(0, 1fr) 150px 130px; gap: 8px; }
.color-pair { display: flex; gap: 4px; }
.main .color-pair input[type='color'] { width: 34px; height: 31px; padding: 0; border: none; background: transparent; }
.shield { width: 30px; height: 34px; clip-path: path('M0 0H30V14C30 25 22 31 15 34C8 31 0 25 0 14Z'); display: inline-flex; align-items: center; justify-content: center; font: 15px var(--font-rubric); color: var(--gold-leaf-hi); flex: none; }
.hide { display: none !important; }

/* ---------- search results ---------- */
.hits { max-width: 1100px; }
.hit { display: block; width: 100%; text-align: left; appearance: none; border: none; background: transparent; padding: 6px 8px; color: var(--iron-gall); }
.hit:hover, .hit:focus-visible { outline: none; background: var(--sel); }
.hit .hw { font-size: 11px; color: var(--faded-ink); text-transform: uppercase; letter-spacing: .06em; }
.hit .ht { font: 15px/1.35 var(--font-body); }
.hit mark { background: var(--gold-leaf-hi); color: inherit; padding: 0 1px; }

/* ---------- modal ---------- */
.modal { position: fixed; inset: 0; background: rgba(43, 27, 16, .45); display: flex; align-items: flex-start; justify-content: center; padding: 6vh 20px; z-index: 10; }
.modal-box { background: var(--vellum-texture), var(--vellum-light); width: min(980px, 100%); max-height: 86vh; display: flex; flex-direction: column; }
.modal-box > header { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--vellum-shadow); }
.modal-box h3 { flex: 1; font-family: var(--font-rubric); font-size: 18px; color: var(--vermilion); }
.modal-body { overflow-y: auto; padding: 10px 16px 14px; }
.modal-box > footer { display: flex; gap: 8px; justify-content: flex-end; padding: 8px 14px; background: rgba(43, 27, 16, .06); }
.modal-box > footer:empty { display: none; }
.sim-out { font: 12.5px/1.45 var(--mono); white-space: pre-wrap; margin: 0; }
.diff { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.diff td, .diff th { text-align: left; vertical-align: top; padding: 4px 6px; }
.diff th { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--faded-ink); font-weight: 400; }
.diff tr.k td { padding-top: 10px; font-weight: 700; }
.diff tr.k .kind { font-family: var(--font-rubric); font-weight: 400; letter-spacing: .05em; }
.diff .kind.added { color: var(--ok); } .diff .kind.removed { color: var(--err); } .diff .kind.changed { color: var(--lapis); } .diff .kind.moved { color: var(--murrey); }
.diff .before { color: var(--err); text-decoration: line-through; text-decoration-color: rgba(161, 42, 31, .5); }
.diff .after { color: var(--ok); }
.diff tbody tr:nth-child(even) td { background: rgba(43, 27, 16, .035); }

/* ---------- the Chancery: people, shelves, roles ---------- */
body[data-role='owner'] .writer-only, body[data-role='writer'] .owner-only, body[data-role=''] .owner-only, body[data-role=''] .writer-only, body:not([data-role]) .owner-only, body:not([data-role]) .writer-only { display: none !important; }
body:not([data-role]) .top .search, body:not([data-role]) .filters, body:not([data-role]) .top-acts > :not(#me),
body[data-role=''] .top .search, body[data-role=''] .filters, body[data-role=''] .top-acts > :not(#me) { display: none; }
.me { display: flex; align-items: center; gap: 6px; padding-left: 6px; white-space: nowrap; }
.me-name { font-weight: 600; }
.me-role { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--faded-ink); }
.more { position: relative; }
.more > summary { list-style: none; cursor: pointer; }
.more > summary::-webkit-details-marker { display: none; }
.more-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 5; display: flex; flex-direction: column; gap: 2px; padding: 4px; background: var(--vellum-texture), var(--vellum-light); min-width: 170px; }
.more-menu .btn-s { text-align: left; }
.shelf { font-family: var(--font-rubric); font-size: 17px; letter-spacing: .05em; color: var(--iron-gall); padding: 14px 14px 2px; }
.signin { padding: 40px 32px; max-width: 760px; }
.signin h2 { font-family: var(--font-rubric); font-size: 28px; color: var(--vermilion); letter-spacing: .04em; margin-bottom: 6px; }
.people { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.person { appearance: none; border: none; text-align: left; padding: 12px 16px; min-width: 220px; background: var(--vellum-texture), var(--panel); color: var(--iron-gall); font: 13px var(--ui); }
.person b { display: block; font: 18px var(--font-body); font-weight: 600; }
.person span { color: var(--faded-ink); }
.person:hover, .person:focus-visible { outline: none; background: var(--sel); }

.cat .c-meta .s, .badges .s { color: var(--murrey); font-weight: 600; text-decoration: none; }
.badges .s.returned { color: var(--err); }
.badges .s.draft { color: var(--faded-ink); }
.hist-b { appearance: none; border: none; background: transparent; padding: 0 2px; font: 11px var(--ui); color: var(--faded-ink); text-transform: none; letter-spacing: 0; opacity: .7; }
.hist-b:hover { color: var(--vermilion); opacity: 1; }
.f-label .hist-b { margin-left: 4px; }
.cnt + .hist-b { margin-left: 0; }
.locked { opacity: .5; cursor: not-allowed !important; }

/* ---------- review queue, your suggestions, history ---------- */
.review { max-width: 1060px; }
.sug-group { margin: 8px 0 18px; }
.sg-h { display: flex; align-items: center; gap: 10px; margin: 6px 0 4px; }
.sg-h h3, h3.sub { font-family: var(--font-rubric); font-size: 17px; color: var(--vermilion); letter-spacing: .04em; }
h3.sub { margin: 18px 0 6px; }
.sug, .hist-e, .hv { background: var(--vellum-texture), var(--panel); padding: 9px 12px 10px; margin: 0 0 8px; }
.sug-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.sug-h b { font-size: 13px; }
.sug-h .by, .dec .by { margin-left: auto; font-size: 11.5px; color: var(--faded-ink); }
.sug-h .btn-s { padding: 1px 8px; font-size: 11.5px; }
.chg { font: 16px/1.4 var(--font-body); padding: 2px 0 4px; }
.chg del, .chg ins { text-decoration: none; padding: 0 1px; }
.chg del { background: rgba(161, 42, 31, .14); color: var(--err); text-decoration: line-through; text-decoration-color: rgba(161, 42, 31, .55); }
.chg ins { background: rgba(47, 107, 76, .16); color: var(--ok); }
.chg .op { font: 11px var(--ui); text-transform: uppercase; letter-spacing: .07em; margin-right: 6px; }
.chg .op.add { color: var(--ok); } .chg .op.del { color: var(--err); }
.note-r, .reply { margin: 4px 0; font-size: 12.5px; }
.reply { padding: 4px 8px; background: rgba(42, 75, 155, .08); }
.sug-acts { display: flex; gap: 6px; align-items: flex-start; margin-top: 6px; }
.sug-acts .note, .sug .note { flex: 1; width: 100%; border: none; border-radius: 2px; background: var(--field); padding: 4px 7px; font: 13px var(--ui); resize: none; overflow: hidden; color: var(--iron-gall); }
.sug > .note { margin-top: 4px; }
.st { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; padding: 1px 6px; border-radius: 2px; background: var(--chip); color: var(--iron-gall); white-space: nowrap; }
.st.pending { background: var(--lapis); color: var(--bone); }
.st.returned { background: var(--vermilion-deep); color: var(--bone); }
.st.approved { background: var(--verdigris); color: var(--bone); }
.st.rejected { background: var(--faded-ink); color: var(--bone); }
.decided { display: grid; gap: 2px; }
.dec { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; padding: 4px 6px; font-size: 12.5px; }
.dec .reply { flex-basis: 100%; }
.empty-big { font: italic 17px var(--font-body); color: var(--faded-ink); padding: 18px 0; }
.hfilters { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: flex-end; margin: 6px 0 2px; }
.hf { display: grid; gap: 2px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--faded-ink); }
.hf.grow { flex: 1; min-width: 180px; }
.hf select, .hf input { border: none; border-radius: 2px; background: var(--field); padding: 4px 6px; font: 12.5px var(--ui); color: var(--iron-gall); text-transform: none; letter-spacing: 0; }
.st.edit, .st.revert, .st.restore { background: var(--lapis); color: var(--bone); }
.st.approve { background: var(--verdigris); color: var(--bone); }
.st.sent, .st.draft { background: var(--chip); color: var(--iron-gall); }
.st.people { background: var(--murrey); color: var(--bone); }
.hc .btn-s { margin-top: 2px; padding: 1px 8px; font-size: 11.5px; }
.hc { padding: 3px 0; }
.hc .hl { display: block; font-size: 11px; color: var(--faded-ink); text-transform: uppercase; letter-spacing: .06em; }
.other { font-size: 12.5px; color: var(--murrey); margin: 3px 0 0; }
.hv .btn-s { margin-top: 2px; }
.plist { display: grid; gap: 6px; margin: 8px 0; }
.prow { display: grid; grid-template-columns: minmax(0, 1fr) 260px auto; gap: 6px; }
.prow.pw { grid-template-columns: minmax(0, 1fr) 240px 220px auto; }
#login { display: grid; gap: 10px; max-width: 380px; }
#login .lf { display: grid; gap: 3px; font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--faded-ink); }
#login input { border: none; border-radius: 2px; background: var(--field); padding: 7px 9px; font: 16px var(--ui); color: var(--iron-gall); text-transform: none; letter-spacing: 0; }
#login input:focus { outline: none; background: var(--field-focus); box-shadow: inset 0 -2px 0 var(--gold-leaf); }
#login .btn-s { justify-self: start; padding: 7px 18px; font-size: 14px; }
.prow input, .prow select { border: none; border-radius: 2px; background: var(--field); padding: 5px 7px; font: 13px var(--ui); color: var(--iron-gall); }

.chg del + ins { margin-left: 4px; }
body[data-role='writer'] .tick, body[data-role='writer'] [data-act='import'], body[data-role='writer'] [data-act='review-all'] { display: none; }

/* ---------- previews in context: the big screen and a phone ---------- */
.preview.mock-slot { padding: 4px 0 0; font: inherit; color: inherit; }
.preview.mock-slot::before { content: none; }
.mock { font: 15px/1.38 var(--font-body); color: var(--iron-gall); }
.mock .m-lab { font: 10.5px var(--ui); text-transform: uppercase; letter-spacing: .08em; color: var(--faded-ink); margin-bottom: 2px; }
.mock .m-title { font-family: var(--font-rubric); font-size: 17px; letter-spacing: .04em; color: var(--vermilion); line-height: 1.15; }
.mock .ph { font-weight: 600; font-style: normal; color: var(--lapis); }
.mock .ph-bad { font: 12px var(--mono); color: var(--bone); background: var(--err); padding: 0 3px; }
.mock.tv { padding: 7px 12px 8px; background: var(--vellum-texture), var(--vellum-light); box-shadow: inset 4px 0 0 var(--vermilion-deep); }
.mock.tv .m-text { font-style: italic; }
.mock.tv.crisis { margin: 2px 0 8px; }
.mock.tv.crisis .m-text { font-style: normal; margin: 2px 0 6px; }
.m-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.m-opt { background: rgba(43, 27, 16, .06); padding: 5px 7px; font-size: 13.5px; line-height: 1.3; }
.m-opt b { display: block; font-weight: 600; }
/* a phone: a narrow rounded card with a dark status strip on top (a shape, not an outline) */
.mock.phone { width: 300px; max-width: 100%; }
.mock.phone .scr { position: relative; overflow: hidden; border-radius: 14px; padding: 18px 12px 11px; background: var(--vellum-texture), var(--vellum-light); }
.mock.phone .scr::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 9px; background: var(--iron-gall); }
.mock.phone .m-text { font-size: 14.5px; }
.m-input { margin-top: 2px; padding: 5px 7px; background: var(--field); border-radius: 3px; font-size: 14.5px; }
.m-input .lead { font-weight: 600; }
.m-input .ph-text { color: #9a8763; font-style: italic; }
.m-input .caret { display: inline-block; width: 1px; height: 15px; vertical-align: -2px; background: var(--iron-gall); margin-left: 1px; }
.m-house { display: flex; align-items: center; gap: 8px; margin: 2px 0 4px; }
.m-house b { display: block; font-family: var(--font-rubric); font-weight: 400; letter-spacing: .04em; color: var(--vermilion); }
.m-house i { font-size: 13.5px; }
.mock.phone.house + .mock.tv { margin-top: 6px; }
.card2 .mock-slot, .card2 [data-hpreview] { display: grid; gap: 6px; }
.pv-slot { margin: 4px 0 2px; }
.pv-slot:empty { display: none; }

/* ---------- the promo page, live ---------- */
.promo-layout { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(420px, 1fr) minmax(0, 1.1fr); }
.promo-layout .body { padding-right: 14px; }
.pv-pane { display: flex; flex-direction: column; min-height: 0; background: rgba(43, 27, 16, .06); }
.pv-bar { display: flex; align-items: center; gap: 6px; padding: 6px 10px; font-size: 12px; color: var(--faded-ink); }
.pv-bar .grow { flex: 1; }
.pv-wrap { flex: 1; min-height: 0; overflow: hidden; position: relative; }
#promo-frame { border: none; transform-origin: 0 0; background: var(--vellum); display: block; }
@media (max-width: 1100px) { .promo-layout { grid-template-columns: 1fr; } .pv-pane { display: none; } }

/* ---------- the sidebar tree ---------- */
.tg-h { appearance: none; border: none; background: transparent; width: 100%; text-align: left; display: flex; align-items: baseline; gap: 6px;
  padding: 3px 12px 3px 10px; font: 600 12.5px var(--ui); color: var(--iron-gall); }
.tg-h:hover { background: rgba(255, 250, 235, .45); }
.tg-h:focus-visible { outline: none; background: var(--gold-leaf-hi); }
.tg-h .c-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg-h .c-meta { font-weight: 400; font-size: 11.5px; color: var(--faded-ink); white-space: nowrap; }
.chev { flex: none; width: 8px; height: 8px; background: var(--faded-ink); clip-path: polygon(0 0, 100% 50%, 0 100%); transition: transform .12s; align-self: center; }
.tg.open > .tg-h .chev { transform: rotate(90deg); }
.tg-b > .cat { padding-left: 26px; }
.tg.sub > .tg-h { padding-left: 22px; font-weight: 400; font-size: 12px; text-transform: none; }
.tg.sub > .tg-b > .cat { padding-left: 38px; }
.c-meta .w, .badges .w { color: var(--warn); }
.acts-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 0 0 6px; }
.acts-row .f-label { margin: 0; }
.acts-row .chk { margin: 0; }
.acts-row .rule-note { margin: 0; }
.cards.one { grid-template-columns: minmax(0, 1fr); max-width: 980px; }
.nav-btn { display: none; }

/* ---------- phone width ---------- */
@media (max-width: 760px) {
  body { grid-template-columns: minmax(0, 1fr); height: 100dvh; }
  .top { flex-wrap: wrap; gap: 6px 8px; padding: 6px 10px; }
  .brand { order: 0; }
  .nav-btn { display: inline-block; order: 1; }
  .top-acts { order: 2; flex-wrap: wrap; margin-left: auto; }
  .search { order: 3; flex: 1 1 100%; }
  .search input { width: 100%; }
  .filters { order: 4; flex-wrap: wrap; }
  .status { order: 5; flex-basis: 100%; text-align: left; }
  .side { position: fixed; inset: 0 auto 0 0; width: min(86vw, 340px); z-index: 20; transform: translateX(-100%); transition: transform .18s; }
  body.nav-open .side { transform: none; }
  body.nav-open::after { content: ''; position: fixed; inset: 0; background: rgba(43, 27, 16, .35); z-index: 15; }
  .main { grid-column: 1; }
  .cat-head { padding: 10px 12px 8px; }
  .body { padding: 4px 12px 40px; }
  .crisis-layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .clist { max-height: 26vh; }
  .ced { padding: 8px 12px 40px; }
  .ce-top, .opts, .cards, .h-grid, .m-opts, .pfield, .prow, .prow.pw { grid-template-columns: minmax(0, 1fr); }
  .line { grid-template-columns: 22px minmax(0, 1fr); }
  .line-side { grid-column: 2; }
  .mock.phone { width: 100%; }
  .modal { padding: 2vh 8px; }
  .sug-acts { flex-wrap: wrap; }
  .hfilters .hf { flex: 1 1 45%; }
}

/* ---------- promo fields ---------- */
.pfields { max-width: 1000px; }
.pfield { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 10px; padding: 6px 0; }
.pfield .pf-main { margin: 0; }
.pf-side { order: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding-top: 16px; }