/* ============================================================
   Palm Coast: The Record — an editorial civic dossier
   Ink on cream paper · Fraunces / Newsreader / IBM Plex Mono
   ============================================================ */

:root {
    --paper: #faf6ec;
    --paper-panel: #f3ecdc;
    --ink: #1c1a16;
    --ink-soft: #46413a;
    --ink-faint: #8b8473;
    --rule: #ddd3bf;
    --rule-strong: #c4b89e;
    --oxblood: #8c2b27;
    --oxblood-deep: #6c1f1c;
    --teal: #2c6a60;
    --serif-display: 'Fraunces', 'Times New Roman', serif;
    --serif-body: 'Newsreader', Georgia, serif;
    --mono: 'IBM Plex Mono', 'Courier New', monospace;
    --maxw: 980px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background-color: var(--paper);
    color: var(--ink);
    font-family: var(--serif-body);
    font-size: 18px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* faint paper grain */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    opacity: 0.04;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

a { color: var(--oxblood); text-decoration: none; }
a:hover { color: var(--oxblood-deep); }

/* ===== Masthead ===== */
.masthead { border-bottom: 3px double var(--rule-strong); background: var(--paper); }
.masthead__inner {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 1.5rem 1.5rem 1.15rem;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.masthead__brand { display: flex; align-items: baseline; gap: 0.95rem; color: var(--ink); }
.masthead__city {
    font-family: var(--serif-display);
    font-weight: 900;
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    letter-spacing: -0.025em;
    line-height: 1;
}
.masthead__bar { width: 1px; height: 1.4em; align-self: center; background: var(--rule-strong); }
.masthead__sub,
.masthead__dateline {
    font-family: var(--mono);
    text-transform: uppercase;
    color: var(--ink-faint);
}
.masthead__sub { font-size: 0.72rem; letter-spacing: 0.22em; }
.masthead__dateline { font-size: 0.64rem; letter-spacing: 0.16em; }

/* ===== Shell ===== */
.shell-main { max-width: var(--maxw); margin: 0 auto; padding: 2.5rem 1.5rem 1rem; min-height: 60vh; }
.colophon {
    max-width: var(--maxw);
    margin: 3.5rem auto 2rem;
    padding: 1rem 1.5rem 0;
    border-top: 1px solid var(--rule);
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0.04em;
    color: var(--ink-faint);
    text-align: center;
}

/* ===== Page scaffold ===== */
.page-head { margin-bottom: 2rem; animation: rise 0.5s ease both; }
.page-title {
    font-family: var(--serif-display);
    font-weight: 600;
    font-size: clamp(2rem, 5vw, 3.1rem);
    line-height: 1.04;
    letter-spacing: -0.02em;
    margin: 0.2rem 0 0.55rem;
}
.page-subtitle {
    font-family: var(--mono);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--ink-faint);
    margin: 0;
}
.muted { color: var(--ink-faint); font-style: italic; }

.back-link {
    display: inline-block;
    font-family: var(--mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--ink-faint);
    margin-bottom: 1.4rem;
}
.back-link:hover { color: var(--oxblood); }

/* ===== Meetings index ===== */
.meeting-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.meeting-card {
    display: grid;
    grid-template-columns: 9rem 1fr auto;
    align-items: baseline;
    gap: 1.2rem;
    padding: 1.3rem 0.85rem;
    border-bottom: 1px solid var(--rule);
    border-left: 3px solid transparent;
    color: var(--ink);
    transition: border-left-color 0.18s ease, background-color 0.18s ease, padding-left 0.18s ease;
}
.meeting-card:hover { border-left-color: var(--oxblood); background: var(--paper-panel); padding-left: 1.1rem; }
.meeting-card__date {
    font-family: var(--mono);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--oxblood);
}
.meeting-card__title { font-family: var(--serif-display); font-weight: 500; font-size: 1.5rem; line-height: 1.15; }
.meeting-card__meta { font-family: var(--mono); font-size: 0.72rem; color: var(--ink-faint); white-space: nowrap; }

/* ===== Detail grid ===== */
.detail-grid { display: grid; grid-template-columns: 1fr 18rem; gap: 2.5rem; margin-top: 1.5rem; }
.panel { min-width: 0; }
.panel-title {
    font-family: var(--mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--ink-soft);
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--ink);
    margin: 0 0 0.4rem;
}

/* ===== Agenda timeline / ledger ===== */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline__row {
    display: grid;
    grid-template-columns: 5.4rem 1.7rem 1fr;
    align-items: baseline;
    gap: 0.85rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--rule);
}
.timeline__time { font-family: var(--mono); font-size: 0.85rem; font-variant-numeric: tabular-nums; color: var(--oxblood); }
.timeline__time a { color: var(--oxblood); border-bottom: 1px solid transparent; }
.timeline__time a:hover { border-bottom-color: var(--oxblood); }
.timeline__sec {
    font-family: var(--mono);
    font-size: 0.7rem;
    font-weight: 600;
    text-align: center;
    color: var(--ink);
    border: 1px solid var(--rule-strong);
    border-radius: 2px;
    padding: 0.08rem 0;
}
.timeline__title { font-size: 1.02rem; color: var(--ink); }

/* ===== Speakers ===== */
.speaker-list { list-style: none; margin: 0; padding: 0; }
.speaker-row { display: flex; align-items: baseline; gap: 0.55rem; padding: 0.6rem 0; border-bottom: 1px solid var(--rule); }
.speaker-row__name { font-family: var(--serif-body); font-size: 1.08rem; color: var(--ink); border-bottom: 1px solid transparent; }
.speaker-row__name:hover { color: var(--oxblood); border-bottom-color: var(--oxblood); }
.speaker-row__time { font-family: var(--mono); font-size: 0.72rem; color: var(--ink-faint); margin-left: auto; }

.badge {
    font-family: var(--mono);
    font-size: 0.58rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--teal);
    border: 1px solid var(--teal);
    border-radius: 2px;
    padding: 0.08rem 0.4rem;
    white-space: nowrap;
}

/* ===== Speaker profile appearances ===== */
.appearance-list { list-style: none; margin: 1.5rem 0 0; padding: 0; border-top: 2px solid var(--ink); }
.appearance {
    display: grid;
    grid-template-columns: 1fr auto auto auto auto;
    align-items: baseline;
    gap: 1rem;
    padding: 0.95rem 0.6rem;
    border-bottom: 1px solid var(--rule);
    border-left: 3px solid transparent;
    transition: border-left-color 0.18s ease, background-color 0.18s ease;
}
.appearance:hover { border-left-color: var(--oxblood); background: var(--paper-panel); }
.appearance__meeting { font-family: var(--serif-display); font-weight: 500; font-size: 1.15rem; }
.appearance__date { font-family: var(--mono); font-size: 0.72rem; color: var(--ink-faint); }
.appearance__time { font-family: var(--mono); font-size: 0.78rem; color: var(--oxblood); }
.appearance__sec { font-family: var(--mono); font-size: 0.72rem; color: var(--ink-soft); }
.appearance { display: block; }
.appearance__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.8rem; }
.appearance__quote { font-family: var(--serif-body); font-size: 1.05rem; color: var(--ink-soft); margin: 0.6rem 0 0.7rem; padding-left: 0.9rem; border-left: 2px solid var(--rule-strong); }
.clip { position: relative; width: 100%; max-width: 640px; aspect-ratio: 16 / 9; margin-bottom: 0.4rem; }
.clip__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 1px solid var(--rule-strong); }
.clip--wide { max-width: 100%; margin: 1.5rem 0; }

.clip-facade { position: relative; display: block; width: 100%; max-width: 640px; aspect-ratio: 16 / 9;
    margin: 0.2rem 0 0.4rem; border: 1px solid var(--rule-strong); background-size: cover; background-position: center;
    cursor: pointer; padding: 0; }
.clip-facade::after { content: ""; position: absolute; inset: 0; background: rgba(28,26,22,0.28); transition: background 0.15s ease; }
.clip-facade:hover::after { background: rgba(28,26,22,0.12); }
.clip-facade__play { position: absolute; inset: 0; margin: auto; width: 3.2rem; height: 3.2rem; display: grid; place-items: center;
    color: #fff; font-size: 1.2rem; background: var(--oxblood); border-radius: 50%; z-index: 1; }
.clip-facade__label { position: absolute; left: 0.6rem; bottom: 0.5rem; z-index: 1; font-family: var(--mono);
    font-size: 0.72rem; color: #fff; background: rgba(28,26,22,0.7); padding: 0.15rem 0.45rem; border-radius: 2px; }

/* ===== Manage page ===== */
.masthead__manage { font-family: var(--mono); font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--ink-faint); }
.manage-list{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.manage-row{display:grid;grid-template-columns:1fr auto auto;gap:1rem;align-items:center;padding:0.8rem 0.5rem;border-bottom:1px solid var(--rule)}
.manage-row__form{display:flex;gap:0.4rem}
.manage-row__input{font-family:var(--mono);font-size:0.8rem;padding:0.3rem 0.5rem;border:1px solid var(--rule-strong);background:var(--paper);min-width:18rem}
.manage-row__offset{font-family:var(--mono);font-size:0.8rem;padding:0.3rem 0.5rem;border:1px solid var(--rule-strong);background:var(--paper);width:6rem}
.manage-row__btn{font-family:var(--mono);font-size:0.72rem;text-transform:uppercase;letter-spacing:0.12em;padding:0.3rem 0.7rem;border:1px solid var(--ink);background:var(--ink);color:var(--paper);cursor:pointer}
.manage-row__current{font-family:var(--mono);font-size:0.72rem;color:var(--ink-faint)}

/* ===== Review queue ===== */
.review-filters{display:flex;flex-wrap:wrap;gap:1.2rem;margin:1.2rem 0;align-items:flex-end}
.review-filters__field{display:flex;flex-direction:column;gap:0.25rem;font-family:var(--mono);font-size:0.7rem;text-transform:uppercase;letter-spacing:0.1em;color:var(--ink-faint)}
.review-filters__field select,.review-filters__field input,.review-add__text{font-family:var(--mono);font-size:0.8rem;padding:0.3rem 0.5rem;border:1px solid var(--rule-strong);background:var(--paper);text-transform:none;letter-spacing:normal;color:var(--ink)}
.review-banner{font-family:var(--mono);font-size:0.78rem;padding:0.7rem 0.9rem;margin:1rem 0;border:1px solid var(--rule-strong)}
.review-banner--warn{background:var(--oxblood);color:#fff;border-color:var(--oxblood)}
.review-offset,.review-freeze,.review-add{margin:1.5rem 0;padding:1rem;border:1px solid var(--rule)}
.review-offset__player{width:100%;max-width:640px;aspect-ratio:16/9;margin:0.6rem 0;background:#000}
.review-offset__controls{display:flex;flex-wrap:wrap;gap:1rem;align-items:flex-end;margin:0.6rem 0}
.review-add__text{display:block;width:100%;max-width:640px;min-height:4rem;margin:0.6rem 0}
.review-add__check{flex-direction:row;align-items:center;gap:0.4rem}
.review-components{display:flex;flex-wrap:wrap;gap:0.8rem;font-family:var(--mono);font-size:0.7rem;color:var(--ink-faint);margin:0.4rem 0}
.review-chips{display:flex;flex-wrap:wrap;gap:0.4rem;margin:0.3rem 0}
.review-actions{display:flex;flex-wrap:wrap;gap:0.4rem;margin:0.6rem 0}
.review-actions--form{display:flex;flex-wrap:wrap;gap:0.8rem;align-items:flex-end;margin:0.6rem 0;padding:0.6rem;border-left:2px solid var(--rule-strong)}
.review-trim__row{display:flex;gap:0.5rem;align-items:flex-start;font-family:var(--serif-body);font-size:0.95rem;width:100%}
.manage-row__btn:disabled{opacity:0.4;cursor:not-allowed}
.review-segments{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:0.74rem;margin:0.6rem 0}
.review-segments th,.review-segments td{text-align:left;padding:0.35rem 0.6rem;border-bottom:1px solid var(--rule)}
.review-segments th{color:var(--ink-faint);text-transform:uppercase;letter-spacing:0.08em;font-weight:500;border-bottom:1px solid var(--rule-strong)}
.review-segments__row--selected{background:color-mix(in srgb,var(--oxblood) 6%,var(--paper))}
.review-segments__form{border-top:1px solid var(--rule);padding-top:0.6rem}
.suggestion{display:flex;flex-wrap:wrap;align-items:center;gap:0.7rem;font-family:var(--mono);font-size:0.78rem;color:var(--ink-soft);margin:0.4rem 0}
.review-autosync{flex-direction:column;align-items:flex-start;gap:0.5rem}
.review-merge-list{list-style:none;margin:0.6rem 0 0;padding:0}
.review-merge-row{display:flex;flex-wrap:wrap;align-items:center;gap:0.7rem;padding:0.5rem 0;border-bottom:1px solid var(--rule);font-family:var(--serif-body);font-size:1rem}

/* ============================================================
   "Needs a Look" — the exception inbox (The Record)
   ink-on-paper · ONE accent (--oxblood) · editorial, not a grid
   ============================================================ */
.inbox { display: flex; flex-direction: column; gap: 1.6rem; }
.inbox-head { margin-bottom: 0.4rem; }
.inbox-head__title {
    font-family: var(--serif-display);
    font-weight: 600;
    font-size: clamp(2rem, 5vw, 3.1rem);
    line-height: 1.04;
    letter-spacing: -0.02em;
    margin: 0.2rem 0 0.55rem;
}
.inbox-head__count {
    font-family: var(--mono);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--ink-faint);
    margin: 0;
}

/* A prominent link to the dedicated portrait triage grid when photos are waiting. */
.portrait-banner {
    display: block;
    font-family: var(--mono);
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    padding: 0.75rem 1rem;
    border: 1px solid var(--oxblood);
    background: color-mix(in srgb, var(--oxblood) 10%, var(--paper));
    color: var(--oxblood-deep);
}
.portrait-banner:hover { background: color-mix(in srgb, var(--oxblood) 18%, var(--paper)); color: var(--oxblood-deep); }

/* The reward: a designed "inbox zero" on cream. */
.inbox-empty {
    text-align: center;
    padding: 5rem 1.5rem 6rem;
    animation: rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.inbox-empty__mark {
    font-family: var(--serif-display);
    font-weight: 500;
    font-size: clamp(1.9rem, 4.5vw, 2.8rem);
    line-height: 1.1;
    letter-spacing: -0.015em;
    color: var(--ink);
    margin: 0;
}
.inbox-empty__sub {
    font-family: var(--mono);
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--ink-faint);
    margin: 1rem 0 0;
}

/* The exception card: thin oxblood rule, paper, room to breathe. */
.xcard {
    position: relative;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-left: 3px solid var(--oxblood);
    padding: 1.5rem 1.7rem 1.55rem;
    overflow: hidden; /* keeps the settle max-height collapse clean */
}
.xcard__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.7rem; margin-bottom: 0.55rem; }

/* The ONE canonical tag form — never multicolor. */
.xcard__tag {
    font-family: var(--mono);
    font-size: 0.58rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--oxblood-deep);
    background: color-mix(in srgb, var(--oxblood) 8%, var(--paper));
    border: 1px solid color-mix(in srgb, var(--oxblood) 22%, var(--paper));
    border-radius: 2px;
    padding: 0.12rem 0.5rem;
    white-space: nowrap;
}
.xcard__reason {
    font-family: var(--serif-body);
    font-size: 1.18rem;
    line-height: 1.4;
    color: var(--ink);
    margin: 0 0 0.55rem;
    max-width: 60ch;
}
.xcard__meta {
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.02em;
    color: var(--ink-faint);
    margin: 0 0 0.9rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}
.xcard__meta span::before { content: "·"; margin-right: 0.55rem; color: var(--rule-strong); }
.xcard__meta span:first-child::before { content: none; }
.xcard__quote {
    font-family: var(--serif-body);
    font-size: 1.06rem;
    line-height: 1.62;
    color: var(--ink-soft);
    max-width: 66ch;
    margin: 0.9rem 0 0.4rem;
    padding-left: 1rem;
    border-left: 2px solid var(--rule-strong);
}
.xcard__suggested-label {
    font-family: var(--mono);
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--oxblood);
    margin: 1rem 0 0.1rem;
}

/* Card actions — one primary, the rest quiet. */
.xcard__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 1.1rem; }
.xcard__btn {
    font-family: var(--mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 0.4rem 0.85rem;
    border: 1px solid var(--ink);
    background: var(--ink);
    color: var(--paper);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.xcard__btn:hover { background: var(--oxblood-deep); border-color: var(--oxblood-deep); }
.xcard__btn:disabled { opacity: 0.4; cursor: not-allowed; }
.xcard__btn--quiet {
    background: transparent;
    color: var(--ink-soft);
    border-color: var(--rule-strong);
}
.xcard__btn--quiet:hover { background: transparent; color: var(--oxblood); border-color: var(--oxblood); }
.xcard__btn--link {
    font-family: var(--mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 0.4rem 0.85rem;
    border: 1px solid var(--ink);
    background: var(--ink);
    color: var(--paper);
    display: inline-block;
}
.xcard__btn--link:hover { background: var(--oxblood-deep); color: var(--paper); }
.xcard__note { font-family: var(--mono); font-size: 0.72rem; color: var(--ink-faint); margin: 0.5rem 0 0; font-style: italic; }
.xcard__error { font-family: var(--mono); font-size: 0.74rem; padding: 0.55rem 0.8rem; margin: 0.7rem 0 0; background: var(--oxblood); color: #fff; border: 1px solid var(--oxblood); }

/* Disclosures: More ▾ / Why? — restrained, mono. */
.xcard__disclose {
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: var(--mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ink-faint);
    padding: 0.4rem 0.4rem;
}
.xcard__disclose:hover { color: var(--oxblood); }
.xcard__panel {
    margin-top: 0.9rem;
    padding: 0.9rem 1rem;
    border-left: 2px solid var(--rule-strong);
    background: color-mix(in srgb, var(--paper-panel) 60%, var(--paper));
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    align-items: flex-end;
}
.xcard__field { display: flex; flex-direction: column; gap: 0.25rem; font-family: var(--mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-faint); }
.xcard__field input {
    font-family: var(--mono); font-size: 0.82rem; padding: 0.32rem 0.5rem;
    border: 1px solid var(--rule-strong); background: var(--paper); color: var(--ink);
    text-transform: none; letter-spacing: normal; min-width: 14rem;
}
.xcard__why {
    margin-top: 0.9rem; padding: 0.8rem 1rem;
    border-left: 2px solid var(--rule-strong);
    font-family: var(--mono); font-size: 0.7rem; color: var(--ink-faint);
    display: flex; flex-wrap: wrap; gap: 0.9rem;
}
.xcard__why span { font-variant-numeric: tabular-nums; }

/* Clip facade variants — a calm play TILE, never the generic whole-video thumbnail.
   (Reuses .clip-facade base; .clip.js swaps in the cued iframe on click.) */
.clip-facade--tile {
    max-width: 100%;
    background: linear-gradient(135deg, var(--paper-panel) 0%, var(--paper) 100%);
    border: 1px solid var(--rule-strong);
}
.clip-facade--tile::after { background: transparent; } /* no dark scrim over a paper tile */
.clip-facade--tile:hover::after { background: rgba(28,26,22,0.04); }
.clip-facade--tile .clip-facade__play { box-shadow: 0 1px 0 rgba(28,26,22,0.15); }
.clip-facade__cue {
    position: absolute; left: 0.7rem; bottom: 0.55rem; z-index: 1;
    font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.04em;
    color: var(--ink-soft); background: color-mix(in srgb, var(--paper) 88%, transparent);
    padding: 0.18rem 0.5rem; border: 1px solid var(--rule-strong); border-radius: 2px;
}

/* Static (non-clickable) evidence states — same frame/shape, designed not bare. */
.clip-state {
    position: relative; display: flex; align-items: center; justify-content: center;
    width: 100%; max-width: 100%; aspect-ratio: 16 / 9;
    margin: 0.2rem 0 0.4rem; border: 1px solid var(--rule-strong);
}
.clip-state--unsynced { background: repeating-linear-gradient(45deg, var(--paper-panel), var(--paper-panel) 12px, var(--paper) 12px, var(--paper) 24px); }
.clip-state--novideo { background: var(--paper-panel); }
.clip-state__note {
    font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.04em;
    color: var(--ink-faint); text-align: center; padding: 0 1rem;
}

/* Motion: resolve-OUT — a mirror of `rise`. The card collapses + fades, no jank. */
.xcard.is-settling { animation: settle 0.22s ease forwards; pointer-events: none; }

/* ===== Motion: a single restrained staggered reveal ===== */
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes settle {
    from { opacity: 1; max-height: 60rem; transform: none; }
    to   { opacity: 0; max-height: 0; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; transform: translateY(-6px); }
}
.inbox > .xcard { animation: rise 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.inbox > .xcard:nth-child(1) { animation-delay: 0.04s; }
.inbox > .xcard:nth-child(2) { animation-delay: 0.10s; }
.inbox > .xcard:nth-child(3) { animation-delay: 0.16s; }
.inbox > .xcard:nth-child(4) { animation-delay: 0.22s; }
.inbox > .xcard:nth-child(5) { animation-delay: 0.28s; }
.inbox > .xcard:nth-child(6) { animation-delay: 0.34s; }
.meeting-list > li,
.timeline__row,
.appearance { animation: rise 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.meeting-list > li:nth-child(1) { animation-delay: 0.04s; }
.meeting-list > li:nth-child(2) { animation-delay: 0.10s; }
.meeting-list > li:nth-child(3) { animation-delay: 0.16s; }
.meeting-list > li:nth-child(4) { animation-delay: 0.22s; }
.meeting-list > li:nth-child(5) { animation-delay: 0.28s; }
.meeting-list > li:nth-child(6) { animation-delay: 0.34s; }
.timeline__row:nth-child(1) { animation-delay: 0.04s; }
.timeline__row:nth-child(2) { animation-delay: 0.08s; }
.timeline__row:nth-child(3) { animation-delay: 0.12s; }
.timeline__row:nth-child(4) { animation-delay: 0.16s; }
.timeline__row:nth-child(5) { animation-delay: 0.20s; }
.timeline__row:nth-child(6) { animation-delay: 0.24s; }
.timeline__row:nth-child(7) { animation-delay: 0.28s; }
.timeline__row:nth-child(8) { animation-delay: 0.32s; }
.timeline__row:nth-child(9) { animation-delay: 0.36s; }
.timeline__row:nth-child(10) { animation-delay: 0.40s; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ===== Responsive ===== */
@media (max-width: 760px) {
    .detail-grid { grid-template-columns: 1fr; gap: 2rem; }
    .meeting-card { grid-template-columns: 1fr; gap: 0.3rem; }
    .meeting-card__meta { white-space: normal; }
    .appearance { grid-template-columns: 1fr auto; gap: 0.3rem 0.8rem; }
}

/* ============================================================
   People — the directory + the enriched profile (The Record)
   ink-on-paper · ONE accent (--oxblood) · a calm roll, not a grid
   ============================================================ */

/* A subtitle that carries a quiet inline link (Meetings home → People). */
.page-subtitle__link { font-family: var(--mono); color: var(--oxblood); border-bottom: 1px solid transparent; }
.page-subtitle__link:hover { border-bottom-color: var(--oxblood); }

/* ---- Search + the "possible duplicates" affordance ---- */
.people-search {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem;
    margin: 0.4rem 0 1.8rem;
}
.people-search__input {
    flex: 1 1 18rem;
    font-family: var(--serif-body); font-size: 1.05rem;
    padding: 0.55rem 0.8rem;
    background: var(--paper);
    border: 1px solid var(--rule-strong); border-radius: 2px;
    color: var(--ink);
}
.people-search__input:focus { outline: none; border-color: var(--oxblood); }
.people-search__input::placeholder { color: var(--ink-faint); font-style: italic; }
.people-search__dups {
    font-family: var(--mono); font-size: 0.72rem;
    text-transform: uppercase; letter-spacing: 0.12em;
    color: var(--oxblood-deep);
    background: color-mix(in srgb, var(--oxblood) 8%, var(--paper));
    border: 1px solid color-mix(in srgb, var(--oxblood) 22%, var(--paper));
    border-radius: 2px; padding: 0.45rem 0.8rem; cursor: pointer;
    transition: background 0.15s ease;
}
.people-search__dups:hover { background: color-mix(in srgb, var(--oxblood) 14%, var(--paper)); }

/* ---- The avatar: portrait OR an oxblood-tinted initials circle ---- */
.avatar {
    flex: 0 0 auto;
    width: 2.6rem; height: 2.6rem; border-radius: 50%;
    object-fit: cover; display: grid; place-items: center;
    border: 1px solid var(--rule-strong);
    background: var(--paper-panel);
}
.avatar--initials {
    font-family: var(--serif-display); font-weight: 500;
    font-size: 0.95rem; letter-spacing: 0.01em;
    color: var(--oxblood-deep);
    background: color-mix(in srgb, var(--oxblood) 12%, var(--paper));
    border-color: color-mix(in srgb, var(--oxblood) 28%, var(--paper));
    text-transform: uppercase;
    user-select: none;
}
.avatar--sm { width: 2rem; height: 2rem; font-size: 0.78rem; }
.avatar--lg { width: 4.6rem; height: 4.6rem; font-size: 1.6rem; }

/* ---- The people list: a calm roll, generous, name-forward ---- */
.people-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.people-list > li { animation: rise 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.people-list > li:nth-child(1) { animation-delay: 0.03s; }
.people-list > li:nth-child(2) { animation-delay: 0.07s; }
.people-list > li:nth-child(3) { animation-delay: 0.11s; }
.people-list > li:nth-child(4) { animation-delay: 0.15s; }
.people-list > li:nth-child(5) { animation-delay: 0.19s; }
.people-list > li:nth-child(6) { animation-delay: 0.23s; }
.person-row {
    display: flex; align-items: center; gap: 1rem;
    padding: 0.95rem 0.85rem;
    border-bottom: 1px solid var(--rule);
    border-left: 3px solid transparent;
    color: var(--ink);
    transition: border-left-color 0.18s ease, background-color 0.18s ease, padding-left 0.18s ease;
}
.person-row:hover { border-left-color: var(--oxblood); background: var(--paper-panel); padding-left: 1.1rem; color: var(--ink); }
.person-row__name {
    font-family: var(--serif-display); font-weight: 500; font-size: 1.4rem;
    line-height: 1.15; min-width: 0;
}
.person-row:hover .person-row__name { color: var(--oxblood); }
.person-row__meta {
    margin-left: auto; white-space: nowrap;
    font-family: var(--mono); font-size: 0.72rem; color: var(--ink-faint);
}

/* ---- Bulk merge: quiet row checks + the fixed bottom action bar ---- */
.person-li { display: flex; align-items: center; gap: 0.6rem; }
.person-li > .person-row { flex: 1 1 auto; min-width: 0; }
.person-check {
    flex: 0 0 auto; width: 1rem; height: 1rem; margin: 0;
    accent-color: var(--oxblood); opacity: 0.45; cursor: pointer;
}
.person-check:hover, .person-check:checked { opacity: 1; }
.page--bulkbar { padding-bottom: 5.5rem; }
.bulkbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem;
    padding: 0.8rem 1.2rem;
    background: var(--paper-panel);
    border-top: 2px solid var(--rule-strong);
    font-family: var(--mono); font-size: 0.78rem; color: var(--ink);
}
.bulkbar__count { text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-faint); }
.bulkbar__chip {
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-family: var(--mono); font-size: 0.75rem;
    padding: 0.25rem 0.6rem 0.25rem 0.3rem;
    border: 1px solid var(--rule-strong); background: var(--paper); color: var(--ink);
    cursor: pointer;
}
.bulkbar__chip:hover { border-color: var(--oxblood); color: var(--oxblood); }
.bulkbar__chipMeta { color: var(--ink-faint); font-size: 0.68rem; }

/* ---- The dedup section: oxblood pair-cards (reusing .xcard) ---- */
.dedup { display: flex; flex-direction: column; gap: 1.2rem; margin: 0 0 2rem; }
.dedup__card { animation: rise 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.dedup__sim {
    font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.04em;
    color: var(--ink-faint); margin-left: auto;
}
.dedup__pair {
    display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem;
    margin: 0.4rem 0 0.4rem;
}
.dedup__side { display: flex; align-items: center; gap: 0.7rem; min-width: 0; }
.dedup__sideText { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.dedup__name { font-family: var(--serif-display); font-weight: 500; font-size: 1.25rem; line-height: 1.1; color: var(--ink); }
.dedup__name:hover { color: var(--oxblood); }
.dedup__count { font-family: var(--mono); font-size: 0.68rem; color: var(--ink-faint); }
.dedup__amp { font-family: var(--serif-display); font-size: 1.4rem; color: var(--ink-faint); }

/* ---- The enriched profile head: portrait beside the Fraunces name ---- */
.profile-head { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
/* The published WIDE person-at-podium crop: a 4:5 plate, newspaper-style (circles are directory-only). */
.profile-photo { flex: 0 0 auto; margin: 0 0 0.8rem; max-width: 13rem; }
.profile-photo img {
    width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block;
    border: 1px solid var(--rule-strong); background: var(--paper);
}
.profile-head__text { min-width: 0; }
.profile-title { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; margin: 0 0 0.5rem; }
.profile-pencil {
    background: transparent; border: none; cursor: pointer;
    font-size: 1.1rem; color: var(--ink-faint);
    padding: 0.1rem 0.3rem; line-height: 1;
    transition: color 0.15s ease;
}
.profile-pencil:hover { color: var(--oxblood); }

.profile-rename { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0.2rem 0 0.5rem; }
.profile-rename__input {
    font-family: var(--serif-display); font-weight: 500;
    font-size: clamp(1.6rem, 4vw, 2.4rem); line-height: 1.05;
    padding: 0.1rem 0.45rem;
    background: var(--paper);
    border: 1px solid var(--rule-strong); border-bottom: 2px solid var(--oxblood);
    color: var(--ink); min-width: 14rem; max-width: 100%;
}
.profile-rename__input:focus { outline: none; border-color: var(--oxblood); }

/* ---- Collision banner + merge banners: reuse .review-banner ---- */
.profile-collision,
.profile-merge__confirm {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem;
}
.profile-merge { margin: 1.4rem 0 0.4rem; }
.profile-merge__open { display: inline-block; }
.profile-merge__picker { margin-top: 0.8rem; max-width: 30rem; }
.profile-merge__input {
    width: 100%;
    font-family: var(--serif-body); font-size: 1rem;
    padding: 0.5rem 0.75rem;
    background: var(--paper);
    border: 1px solid var(--rule-strong); border-radius: 2px; color: var(--ink);
}
.profile-merge__input:focus { outline: none; border-color: var(--oxblood); }
.profile-merge__results { list-style: none; margin: 0.5rem 0 0; padding: 0; border-top: 1px solid var(--rule); }
.profile-merge__result {
    display: flex; align-items: center; gap: 0.7rem; width: 100%; text-align: left;
    padding: 0.55rem 0.5rem;
    background: transparent; border: none; border-bottom: 1px solid var(--rule);
    cursor: pointer; color: var(--ink);
    transition: background 0.12s ease;
}
.profile-merge__result:hover { background: var(--paper-panel); }
.profile-merge__resultName { font-family: var(--serif-body); font-size: 1.05rem; }
.profile-merge__resultMeta { margin-left: auto; font-family: var(--mono); font-size: 0.68rem; color: var(--ink-faint); }
.profile-merge__empty { margin: 0.6rem 0.5rem; }

@media (max-width: 760px) {
    .person-row__meta { margin-left: 0; flex-basis: 100%; padding-left: 3.6rem; }
}

/* ---- People Stage D: AI bio lead · tone gauge · per-comment tone chips ----
   Calm by default; only the heated tones (frustrated / hostile) draw the one oxblood accent. */
.profile-bio { margin: 0.75rem 0 1rem; }
.profile-bio__tag {
    font-family: var(--mono); font-weight: 600; font-size: 0.66rem; line-height: 1;
    text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-faint);
    margin: 0 0 0.35rem;
}
.profile-bio__text {
    font-family: var(--serif-body); font-size: 1.08rem; line-height: 1.55;
    color: var(--ink); max-width: 62ch; margin: 0 0 0.6rem;
}
.profile-bio__msg { font-size: 0.85rem; margin: 0.3rem 0 0.6rem; }

.tone-gauge {
    font-family: var(--mono); font-weight: 500; font-size: 0.72rem; line-height: 1.4;
    text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft);
    margin: 0.25rem 0 1rem;
}

.tone-chip {
    display: inline-block;
    font-family: var(--mono); font-weight: 600; font-size: 0.6rem; line-height: 1;
    text-transform: uppercase; letter-spacing: 0.1em;
    padding: 0.2rem 0.42rem; border-radius: 2px;
    margin: 0.45rem 0 0.1rem; white-space: nowrap;
}
.tone-chip--constructive,
.tone-chip--neutral { color: var(--ink-faint); border: 1px solid var(--rule-strong); }
.tone-chip--frustrated {
    color: var(--oxblood-deep);
    border: 1px solid color-mix(in srgb, var(--oxblood) 35%, transparent);
}
.tone-chip--hostile { color: #fff; background: var(--oxblood); border: 1px solid var(--oxblood); }

/* ---- "Most outrageous statements" (profile section; the leaderboard reuses quote/tag/meta) ---- */
.outrage { margin: 1.6rem 0; border-top: 2px solid var(--rule-strong); padding-top: 0.8rem; }
.outrage__title { font-family: var(--serif-display); font-size: 1.25rem; margin: 0 0 0.8rem; }
.outrage__list { list-style: none; margin: 0; padding: 0; counter-reset: outrage; }
.outrage__item { display: grid; grid-template-columns: 2.6rem 1fr; gap: 0 0.8rem; padding: 0.7rem 0; border-bottom: 1px solid var(--rule-strong); }
.outrage__score { font-family: var(--mono); font-size: 1.3rem; font-weight: 700; color: var(--oxblood-deep); }
.outrage__quote { grid-column: 2; margin: 0; font-style: italic; }
.outrage__tag, .outrage__chip { font-family: var(--mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.1em; border: 1px solid var(--rule-strong); padding: 0 0.3rem; margin-right: 0.3rem; }
.outrage__meta { grid-column: 2; font-family: var(--mono); font-size: 0.72rem; color: var(--ink-faint); margin: 0.3rem 0 0; }

/* An INLINE clip facade — a small mono "watch" button inside a meta line (clip.js still swaps
   in the cued iframe on click; it keys on .clip-facade). Overrides the 16:9 block base. */
.clip-facade--inline {
    display: inline-block; width: auto; max-width: none; aspect-ratio: auto;
    margin: 0 0 0 0.4rem; padding: 0.1rem 0.5rem;
    font-family: var(--mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--oxblood-deep); background: var(--paper);
}
.clip-facade--inline::after { content: none; }
.clip-facade--inline:hover { background: color-mix(in srgb, var(--oxblood) 10%, var(--paper)); }

/* ---- /outrageous leaderboard: mono tabs (active = oxblood underline) over a ranked roll ---- */
.outboard__tabs { display: flex; flex-wrap: wrap; gap: 0.2rem; margin: 0.9rem 0 0.4rem; border-bottom: 2px solid var(--ink); }
.outboard__tab {
    font-family: var(--mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em;
    color: var(--ink-faint); background: none; border: none; border-bottom: 3px solid transparent;
    padding: 0.35rem 0.7rem; cursor: pointer;
}
.outboard__tab:hover { color: var(--ink); }
.outboard__tab--on { color: var(--oxblood-deep); border-bottom-color: var(--oxblood); }
.outboard { list-style: none; margin: 0; padding: 0; }
.outboard__row {
    display: grid; grid-template-columns: 2.8rem auto 1fr; gap: 0 0.8rem; align-items: start;
    padding: 0.9rem 0; border-bottom: 1px solid var(--rule-strong);
}
.outboard__rank { font-family: var(--mono); font-size: 1.5rem; font-weight: 700; color: var(--oxblood-deep); }
.outboard__row:not(:has(.avatar)) .outboard__body { grid-column: 2 / 4; }

/* ===== Blazor error toast (kept minimal, on-brand) ===== */
#blazor-error-ui {
    display: none;
    position: fixed; bottom: 0; left: 0; right: 0;
    background: var(--oxblood); color: #fff;
    padding: 0.7rem 1.2rem;
    font-family: var(--mono); font-size: 0.78rem;
    z-index: 10001;
}
#blazor-error-ui .reload { color: #fff; text-decoration: underline; }
#blazor-error-ui .dismiss { cursor: pointer; float: right; }
.blazor-error-boundary { background: var(--oxblood); color: #fff; padding: 1rem 1.2rem; font-family: var(--mono); font-size: 0.8rem; }
.blazor-error-boundary::after { content: "An error has occurred."; }

/* ============================================================
   Label Run cockpit — a focused editorial labeling workspace.
   Ink-on-paper; mono clock values are the focal point; the END
   row ("◀ Verify") carries the weight. Scoped to .pc-run-*.
   One local spacing rhythm (--pc-flow) keeps the vertical flow even.
   ============================================================ */

/* The "▶ Start label run" entry button — calm, on the browse panel. */
.pc-run-start { margin: 0.4rem 0 1rem; }

/* The cockpit shell: a single, comfortable column that reads like a
   page, not a dashboard. Reuses the paper feel; room to breathe. */
.pc-run-keys {
    --pc-flow: 1.15rem;        /* the standard gap between major blocks */
    display: block;            /* override .xcard__panel's flex so children stack as normal flow */
    max-width: 660px;
    margin: 0 auto;
    padding: 1.5rem 1.75rem 1.6rem;
    border: 1px solid var(--rule);
    border-left: 3px solid var(--oxblood);
    background: var(--paper);
    outline: none;             /* keyboard-focused panel; no harsh ring */
}
.pc-run-keys:focus-visible { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--oxblood) 35%, transparent); }

/* Head: the run title in mono caps + a quiet Done. */
.pc-run-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--rule);
    padding-bottom: 0.8rem;
    margin-bottom: 1rem;
}
.pc-run-head strong {
    font-family: var(--mono);
    font-size: 0.74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--ink-soft);
}
.pc-run-done { margin-left: auto; }

/* Progress line: worst-first counter + the gap badge, baseline-aligned. */
.pc-run-progress {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 0 0.55rem;
}
.pc-run-progress .badge { margin-left: auto; }

/* Who: the stated name in serif display — the human this row is about. */
.pc-run-who {
    font-family: var(--serif-display);
    font-weight: 500;
    font-size: 1.5rem;
    line-height: 1.1;
    color: var(--ink);
    margin: 0 0 var(--pc-flow);
}
.pc-run-who strong { font-weight: 500; }
.pc-run-who .muted { font-family: var(--mono); font-size: 0.74rem; font-style: normal; letter-spacing: 0.02em; }

/* The shared player — full width of the column, never full-bleed. */
.pc-run-keys .review-offset__player { width: 100%; max-width: 100%; margin: 0 0 0.7rem; }

/* Transport row: nudge / play, quiet, left-aligned under the player. */
.pc-run-transport { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0 0 var(--pc-flow); }
.pc-run-transport .muted { margin-right: 0.25rem; }

/* ---- Read-only window bar: a slim position indicator, NOT interactive.
   A shaded start→end span + three color-coded ticks; a single legend row
   names them (no floating per-tick labels that could collide). ---- */
.pc-run-window { margin: 0 0 var(--pc-flow); }
.pc-run-window__track {
    position: relative;
    height: 0.5rem;
    background: var(--paper-panel);
    border: 1px solid var(--rule-strong);
    border-radius: 999px;
}
.pc-run-window__span {
    position: absolute;
    top: 0;
    bottom: 0;
    background: color-mix(in srgb, var(--oxblood) 16%, var(--paper));
    border-radius: 999px;
}
.pc-run-window__tick {
    position: absolute;
    top: -3px;
    bottom: -3px;
    width: 2px;
    transform: translateX(-1px);
    border-radius: 2px;
}
.pc-run-window__tick--start { background: #2e7d32; }
.pc-run-window__tick--end   { background: var(--oxblood); width: 3px; transform: translateX(-1.5px); }
.pc-run-window__tick--next  { background: var(--ink-faint); }
.pc-run-window__legend {
    display: flex;
    gap: 1.2rem;
    margin-top: 0.5rem;
    font-family: var(--mono);
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-faint);
}
.pc-run-window__key { display: inline-flex; align-items: center; gap: 0.35rem; }
.pc-run-window__key::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; }
.pc-run-window__key--start::before { background: #2e7d32; }
.pc-run-window__key--end::before   { background: var(--oxblood); }
.pc-run-window__key--next::before  { background: var(--ink-faint); }

/* ---- The three boundary fields: an aligned grid. Columns are fixed
   (label · value · actions), so the clock VALUES start at the same x and
   the seek/capture clusters share a right edge across every row. ---- */
.pc-run-fields { margin: 0; border-top: 1px solid var(--rule); }
.pc-run-field {
    display: grid;
    grid-template-columns: 9.5rem 1fr auto;
    align-items: center;
    column-gap: 1rem;
    padding: 0.7rem 0.85rem;
    border-bottom: 1px solid var(--rule);
    border-left: 3px solid transparent;
}
.pc-run-field__label {
    font-family: var(--mono);
    font-size: 0.66rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    white-space: nowrap;
    color: var(--ink-faint);
}
/* The clock — IBM Plex Mono, large, legible, tabular. */
.pc-run-field__val {
    font-family: var(--mono);
    font-size: 1.5rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
    white-space: nowrap;
    color: var(--ink);
}
.pc-run-field__val--none { font-size: 0.95rem; color: var(--ink-faint); letter-spacing: 0.02em; }
.pc-run-field__actions { display: flex; gap: 0.5rem; justify-self: end; }

/* Emphasize the END / "◀ Verify" row — the one that usually needs work —
   with a faint oxblood wash + accent rule. Calm, not loud. (Semantic
   modifier, not :nth-child, so it survives any markup reorder.) */
.pc-run-field--verify {
    background: color-mix(in srgb, var(--oxblood) 5%, var(--paper));
    border-left-color: var(--oxblood);
}
.pc-run-field--verify .pc-run-field__label { color: var(--oxblood-deep); }
.pc-run-field--verify .pc-run-field__val { color: var(--ink); font-weight: 600; }

/* De-emphasize START + NEXT so the eye lands on END. */
.pc-run-field--start .pc-run-field__val,
.pc-run-field--next .pc-run-field__val { color: var(--ink-soft); }

/* The STALE marker, inline after the END value — a quiet outlined caution. */
.pc-run-stale {
    font-family: var(--mono);
    font-size: 0.56rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--oxblood-deep);
    border: 1px solid color-mix(in srgb, var(--oxblood) 35%, var(--paper));
    background: color-mix(in srgb, var(--oxblood) 8%, var(--paper));
    border-radius: 3px;
    padding: 0.05rem 0.35rem;
    margin-left: 0.5rem;
    vertical-align: middle;
}

/* Cross-part caution: reuses .review-banner but stays a soft tinted
   caution, not the solid-oxblood --warn slab. */
.pc-run-keys .review-banner--warn {
    background: color-mix(in srgb, var(--oxblood) 10%, var(--paper));
    color: var(--oxblood-deep);
    border-color: color-mix(in srgb, var(--oxblood) 28%, var(--paper));
    margin: 1rem 0 0;
}
/* ...but the small inline gap badge in the progress line stays the pill. */
.pc-run-progress .badge.review-banner--warn {
    background: var(--oxblood);
    color: #fff;
    border-color: var(--oxblood);
    font-size: 0.58rem;
    letter-spacing: 0.1em;
    padding: 0.08rem 0.45rem;
    margin: 0;
}

/* Weakest-signal note: a quiet mono aside. */
.pc-run-weak {
    font-family: var(--mono);
    font-size: 0.7rem;
    font-style: normal;
    letter-spacing: 0.04em;
    color: var(--ink-faint);
    margin: 0.75rem 0 0;
}

/* Footer: Prev / Skip quiet, Save & next primary, pushed to the edge. */
.pc-run-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-top: 1.3rem;
    padding-top: 1rem;
    border-top: 1px solid var(--rule);
}
.pc-run-save { margin-left: auto; font-weight: 600; letter-spacing: 0.1em; }

/* Keyboard-hint line: mono, muted, unobtrusive. */
.pc-run-hint {
    font-family: var(--mono);
    font-size: 0.68rem;
    font-style: normal;
    letter-spacing: 0.04em;
    color: var(--ink-faint);
    margin: 0.7rem 0 0;
    line-height: 1.7;
}

/* Narrow screens: stack the field grid; keep actions right-aligned. */
@media (max-width: 760px) {
    .pc-run-keys { padding: 1.2rem 1.1rem 1.3rem; }
    .pc-run-field {
        grid-template-columns: 1fr auto;
        row-gap: 0.35rem;
    }
    .pc-run-field__label { grid-column: 1 / -1; }
    .pc-run-field__actions { justify-self: end; }
    .pc-run-save { margin-left: auto; }
}

/* ---- Manual portrait pick (/review/portraits/pick) ---- */
.ppick-controls { display: flex; gap: 0.8rem; align-items: center; margin: 0 0 0.8rem; }
.ppick-select { font-family: var(--mono); font-size: 0.8rem; padding: 0.35rem 0.5rem;
                border: 1px solid var(--rule-strong); background: var(--paper-panel); max-width: 100%; }
.ppick-frame-host { max-width: 860px; }
#ppick-player { width: 100%; aspect-ratio: 16 / 9; background: #000; }
.ppick-grabrow { display: flex; gap: 0.8rem; align-items: center; margin-top: 0.7rem; }
.ppick-hint { font-size: 0.8rem; }
.ppick-player--collapsed { margin-bottom: 1rem; }
.ppick-stage { margin-top: 1.2rem; }
.ppick-provenance { font-family: var(--mono); font-size: 0.7rem; text-transform: uppercase;
                    letter-spacing: 0.12em; color: var(--ink-faint); margin: 0 0 0.5rem; }
.ppick-stagerow { display: flex; gap: 1.4rem; align-items: flex-start; flex-wrap: wrap; }
.ppick-canvas { position: relative; max-width: 860px; flex: 1 1 560px; }
.ppick-canvas img { width: 100%; display: block; user-select: none; -webkit-user-drag: none; }
.ppick-box { position: absolute; border: 2px solid var(--oxblood-deep);
             box-shadow: 0 0 0 9999px rgba(0,0,0,0.35); cursor: move; touch-action: none; }
.ppick-handle { position: absolute; right: -8px; bottom: -8px; width: 16px; height: 16px;
                background: var(--oxblood-deep); cursor: nwse-resize; touch-action: none; }
.ppick-previews { display: flex; flex-direction: column; gap: 1rem; }
.ppick-preview { margin: 0; text-align: center; }
.ppick-preview__portrait { width: 9rem; aspect-ratio: 4 / 5; border: 1px solid var(--rule-strong);
                           background-repeat: no-repeat; }
.ppick-preview__avatar { width: 5.5rem; aspect-ratio: 1; border-radius: 50%;
                         border: 1px solid var(--rule-strong); background-repeat: no-repeat; margin: 0 auto; }
.ppick-nudges { display: flex; gap: 0.5rem; margin-top: 0.8rem; }
.ppick-actions { display: flex; gap: 0.8rem; margin-top: 1rem; }
.ppick-publish { background: var(--oxblood-deep); color: var(--paper); }
.ppick-done { margin-top: 1.6rem; text-align: center; }
.ppick-done__mark { font-family: var(--serif-display); font-size: 1.4rem; margin: 0 0 1rem; }
.ppick-done__art { display: flex; gap: 1.2rem; justify-content: center; align-items: center; margin: 0 0 1.2rem; }
.ppick-done__portrait { width: 10rem; aspect-ratio: 4 / 5; object-fit: cover; border: 1px solid var(--rule-strong); }
.ppick-done__avatar { width: 5.5rem; aspect-ratio: 1; border-radius: 50%; object-fit: cover;
                      border: 1px solid var(--rule-strong); }