/* ============================================================
   BlaineSide MDC — stylesheet

   Shares the UCP's palette and chrome so the three sites read as one
   product. Organised as: tokens → backdrop → chrome → layout → cards →
   controls → loading → responsive.

   Two rules worth keeping:
     · every accent sits on the amber/gold ramp, nothing off-palette
     · no repeating-gradient texture on the backdrop — on a flat surface
       it reads as banding rather than grain
   ============================================================ */

:root{
  /* Brand — identical values to the UCP's ucp.css */
  --amber:#d4923a; --gold:#e2b65c; --gold-hi:#f0d69a; --parch:#f1efe9;

  /* Surfaces. --surface is the BlaineSide forum background. */
  --surface:#1a1816; --panel:#262220; --panel-2:#1c1916;
  --border:#3a342c; --line:#2b2620;

  --text-dim:#a89e90; --text-faint:#787064;
  --green:#57b26a; --red:#c9524a;

  --ink:#17140f;                    /* text on gold */
  --ease:cubic-bezier(.2,.8,.2,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  background:var(--surface);
  color:var(--parch);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
/* A form control does not inherit the page's font unless it is told to.
   Left alone a <select> falls back to the browser's own — Arial — and
   sizes itself to that, which is a different width from every control
   beside it. */
input,select,textarea{font-family:inherit}
svg.i{width:1em;height:1em;fill:currentColor;flex:none}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
::selection{background:var(--amber);color:var(--ink)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}

/* ── backdrop ───────────────────────────────────────────────
   The county seal, full colour and turning, on the forum surface with a
   single soft amber light. Everything sits on z-index 3 above it. */
.stage{
  position:relative;width:100%;min-height:100vh;min-height:100dvh;
  display:flex;flex-direction:column;overflow:hidden;
  background:
    radial-gradient(74% 64% at 22% 2%, rgba(212,146,58,.10), transparent 66%),
    var(--surface);
}
.crestbg{
  position:absolute;z-index:0;left:50%;top:50%;pointer-events:none;
  width:min(98vh,960px);height:min(98vh,960px);
  transform:translate(-50%,-52%);
  background:url('../img/seal.png') center/contain no-repeat;
  opacity:.11;
  animation:turn 300s linear infinite;
}
@keyframes turn{to{transform:translate(-50%,-52%) rotate(360deg)}}
.crestglow{
  position:absolute;z-index:0;left:50%;top:50%;pointer-events:none;
  width:min(74vh,720px);height:min(74vh,720px);
  transform:translate(-50%,-52%);border-radius:50%;
  background:radial-gradient(circle,rgba(212,146,58,.07),transparent 64%);
  filter:blur(70px);
}
.scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(92% 88% at 50% 48%, transparent 58%, rgba(15,13,12,.34) 100%);
}

/* ── top bar ─────────────────────────────────────────────── */
.top{position:relative;z-index:3;display:flex;align-items:center;gap:20px;padding:24px 40px;flex:none}
.brand{display:flex;align-items:baseline;gap:13px}
.brand .mark{font-size:24px;font-weight:900;letter-spacing:.02em;color:var(--parch)}
.brand .mark em{font-style:normal;color:var(--gold)}
.brand .tag{
  font-size:11px;font-weight:700;letter-spacing:.2em;color:var(--text-faint);
  border:1px solid var(--border);border-radius:6px;padding:4px 9px;position:relative;top:-3px;
}
.navbtns{margin-left:auto;display:flex;align-items:center;gap:10px}
.navbtn{
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  font-size:12.5px;font-weight:600;color:var(--text-dim);
  padding:9px 16px;border:1px solid var(--border);border-radius:999px;
  background:rgba(255,255,255,.015);transition:.18s var(--ease);
}
.navbtn .i{font-size:12px;color:var(--text-faint);transition:.18s}
.navbtn:hover{border-color:rgba(212,146,58,.55);background:rgba(212,146,58,.07);color:var(--parch)}
.navbtn:hover .i{color:var(--gold)}

/* who is on duty, in the header */
.onduty{display:flex;align-items:center;gap:10px;padding-right:6px;min-width:0}
.onduty-dot{
  width:7px;height:7px;border-radius:50%;flex:none;background:var(--green);
  box-shadow:0 0 9px rgba(87,178,106,.8);
}
.onduty-m{min-width:0;line-height:1.25}
.onduty-m b{display:block;font-size:12.5px;font-weight:700;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:22ch}
.onduty-m span{display:block;font-size:10.5px;color:var(--text-faint)}
.onduty-m span i{font-style:normal;margin:0 5px;opacity:.6}

/* ── layout ──────────────────────────────────────────────── */
.center{
  position:relative;z-index:3;flex:1;
  display:grid;grid-template-columns:1.04fr .96fr;gap:60px;align-items:center;
  width:100%;max-width:1220px;margin:0 auto;padding:8px 46px 36px;
}
.center--single{display:flex;justify-content:center;align-items:center}

.intro{min-width:0;max-width:540px}
.kicker{
  display:inline-flex;align-items:center;gap:10px;
  font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--amber);
}
.kicker .bar{width:24px;height:1px;background:linear-gradient(90deg,var(--amber),transparent)}
.kicker--warn{color:var(--red)}
.kicker--warn .bar{background:linear-gradient(90deg,var(--red),transparent)}

h1{margin-top:16px;font-size:48px;font-weight:900;letter-spacing:-.035em;line-height:1.06}
h1 em{font-style:normal;color:var(--gold)}
.h1--sm{font-size:34px}

.lede{margin-top:18px;font-size:14.5px;line-height:1.68;color:var(--text-dim)}
.lede b{color:var(--parch);font-weight:700}

.feat{list-style:none;margin-top:28px;display:flex;flex-direction:column;gap:16px}
.feat li{display:flex;gap:14px;font-size:13.5px;color:var(--text-dim);line-height:1.55}
.feat li .i{color:var(--amber);font-size:17px;width:20px;margin-top:2px}
.feat li b{display:block;color:var(--parch);font-weight:700;margin-bottom:3px;font-size:14px}

.trust{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:30px;
  font-size:12.5px;color:var(--text-dim);font-weight:500}
.trust span{display:inline-flex;align-items:center;gap:8px;position:relative}
.trust span+span::before{content:"";position:absolute;left:-10px;top:50%;transform:translateY(-50%);
  width:1px;height:13px;background:var(--line)}
.trust .i{color:var(--amber);font-size:13px}

/* ── the card ────────────────────────────────────────────── */
.authwrap{justify-self:center;width:100%;max-width:452px}
.authwrap--wide{max-width:480px}
.panelwrap{
  position:relative;z-index:3;width:100%;max-width:780px;margin:36px 0;
  padding:34px 36px;border-radius:18px;
  border:1px solid rgba(255,255,255,.07);
  background:linear-gradient(180deg,rgba(38,34,30,.96),rgba(28,25,22,.97));
  box-shadow:0 40px 90px rgba(0,0,0,.55), 0 2px 0 rgba(255,255,255,.02) inset;
  backdrop-filter:blur(16px);
}
.panelwrap::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(226,182,92,.7),transparent);
}
.panelwrap--narrow{max-width:520px;text-align:center;padding:38px 34px}
.panelwrap--narrow .kicker{justify-content:center}

.auth{
  position:relative;border:1px solid rgba(255,255,255,.07);border-radius:18px;overflow:hidden;
  background:linear-gradient(180deg,rgba(38,34,30,.96),rgba(28,25,22,.97));
  box-shadow:0 40px 90px rgba(0,0,0,.55), 0 2px 0 rgba(255,255,255,.02) inset;
  backdrop-filter:blur(16px);
}
.auth::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(226,182,92,.7),transparent);
}
.ah{display:flex;align-items:center;gap:11px;padding:16px 22px;border-bottom:1px solid var(--line)}
.ah .key{
  width:28px;height:28px;border-radius:8px;display:grid;place-items:center;flex:none;font-size:12px;
  color:var(--gold);background:rgba(212,146,58,.1);border:1px solid rgba(212,146,58,.26);
}
.ah b{font-size:13.5px;font-weight:700}
.ah span{margin-left:auto;font-size:11.5px;color:var(--text-faint)}
.ab{padding:26px 24px 24px}

.eyebrow{font-size:10.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--amber)}
h2{margin-top:9px;font-size:22px;font-weight:800;letter-spacing:-.022em;line-height:1.15}
.say{margin-top:10px;font-size:13px;line-height:1.62;color:var(--text-dim)}
.say b{color:var(--parch);font-weight:700}

.rule{
  margin-top:22px;padding-top:18px;border-top:1px solid var(--line);
  font-size:11.5px;line-height:1.55;color:var(--text-faint);text-align:center;
}
.rule--left{text-align:left;max-width:560px}

/* a message the player needs to read before anything else */
.notice{
  display:flex;gap:11px;margin-bottom:20px;padding:12px 13px;border-radius:10px;
  border:1px solid rgba(212,146,58,.3);background:rgba(212,146,58,.07);
}
.notice .i{flex:none;color:var(--amber);font-size:14px;margin-top:1px}
.notice p{font-size:12.5px;line-height:1.55;color:var(--parch)}

/* ── the UCP account row ─────────────────────────────────── */
.who{
  display:flex;align-items:center;gap:14px;margin-top:20px;padding:12px 15px;border-radius:11px;
  border:1px solid var(--line);background:rgba(255,255,255,.02);
}
.who .m{flex:1;min-width:0}
.who .m span{display:block;font-size:10px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-faint)}
.who .m b{display:block;margin-top:4px;font-size:13px;font-weight:700;color:var(--parch);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.who .sw{
  flex:none;font-size:11.5px;font-weight:600;color:var(--text-dim);white-space:nowrap;
  padding:7px 12px;border:1px solid var(--border);border-radius:999px;
  background:rgba(255,255,255,.015);transition:.16s var(--ease);
}
.who .sw:hover{border-color:rgba(212,146,58,.5);color:var(--parch);background:rgba(212,146,58,.07)}

/* ── character rows ──────────────────────────────────────
   Full width so a long name never wraps. The radio is visually hidden but
   still focusable, and the whole row is its label. */
.units{margin-top:14px;display:flex;flex-direction:column;gap:9px}
.unit{
  position:relative;                  /* .seen is pinned to the top-right */
  display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:100%;cursor:pointer;
  padding:14px 16px;border-radius:11px;border:1px solid var(--border);
  background:rgba(255,255,255,.018);transition:.17s var(--ease);
}
.unit input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.unit:hover{border-color:rgba(212,146,58,.45);background:rgba(212,146,58,.06)}
.unit:has(input:focus-visible){outline:2px solid var(--gold);outline-offset:2px}
.unit:has(input:checked){
  border-color:var(--amber);background:rgba(212,146,58,.1);
  box-shadow:0 0 0 3px rgba(212,146,58,.1);
}
.unit b{max-width:100%;font-size:14.5px;font-weight:700;letter-spacing:-.012em;
  line-height:1.3;color:var(--parch)}
.unit:has(input:checked) b{color:var(--gold-hi)}
.unit span{font-size:11.5px;color:var(--text-faint);letter-spacing:.01em}
.unit span i{font-style:normal;margin:0 5px;opacity:.6}
.unit:has(input:checked) span{color:var(--text-dim)}
/* WHEN THIS CHARACTER WAS LAST PLAYED.
 *
 * Top-right, aligned with the name rather than trailing the card: it is the
 * thing that tells somebody with three characters which one they were just
 * on, so it belongs where the eye already is.
 *
 * Out of flow, so the name below it reserves the room instead — see the
 * padding-right on .unit b. Absolute without that reservation would let a
 * long name run underneath. */
.unit .seen{
  position:absolute;top:15px;right:16px;
  font-style:normal;font-size:10.5px;line-height:1.2;white-space:nowrap;
  color:var(--text-faint);opacity:.8;
}
/* Room for it, and only on the cards that actually have one — a greyed card
   with no timestamp should not carry a gap where one would have been. Only
   the name needs it; the ID line and the faction line sit below the pinned
   text anyway. */
.unit:has(.seen) b{padding-right:104px}

/* A CHARACTER THAT CANNOT OPEN THE TERMINAL.
 *
 * The same card as every other character, greyed out. Same shape, same rails,
 * same faction line - so the list reads as one list rather than two, and the
 * character is still recognisable at a glance.
 *
 * Shown, not hidden. Somebody who cannot find their character assumes the site
 * is broken; somebody who sees it marked "no MDC access" knows exactly what to
 * ask their command staff for.
 *
 * It is a <div>, not a <label> with a disabled input, so there is nothing to
 * click and nothing to reach by keyboard - the card cannot be selected even by
 * somebody who knows the form is there. No cursor change and no hover rule
 * either: a card that lights up under the pointer is promising something it
 * will not do. */
.unit--off{
  cursor:default;
  border-color:var(--line);
  background:rgba(255,255,255,.012);
}
.unit--off:hover{
  border-color:var(--line);
  background:rgba(255,255,255,.012);
  transform:none;
}
.unit--off b{color:var(--text-dim)}
.unit--off > span{color:var(--text-faint);opacity:.8}
/* ── FACTION ON A CHARACTER ROW ─────────────────────────────
 *
 * The faction is the capacity a character is about to act in, so it gets its
 * own line under the name: a coloured unit patch, then the department in the
 * page's normal text colour. Only the patch is tinted — colouring the name
 * too would make every row shout in a different direction.
 *
 * The patch colour is the faction's own, from ucp_factions.colour, passed in
 * as --fac by faction_colour() in app/view.php. That helper clamps lightness
 * and saturation but keeps the hue, so a navy department still reads as navy
 * and still reads at all. --fac falls back to gold when a faction has no
 * colour set.
 */
.unit .fac{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:11px;
  align-items:center;                 /* patch centred against the whole block */
  margin-top:8px;padding-top:9px;
  border-top:1px solid rgba(255,255,255,.05);
  width:100%;font-size:12px;line-height:1.45;
}

/* The unit patch. Letter-spaced and boxed so a four-letter tag reads as
   insignia rather than an abbreviation somebody forgot to expand. A minimum
   width keeps every row's text on the same rail down the list. */
.unit .fac-tag{
  --fac:var(--gold);
  display:grid;place-items:center;
  min-width:52px;min-height:22px;padding:3px 8px;border-radius:6px;
  font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  white-space:nowrap;
  color:var(--fac);
  background:color-mix(in srgb, var(--fac) 13%, transparent);
  border:1px solid color-mix(in srgb, var(--fac) 38%, transparent);
}
/* Browsers without color-mix still get a legible patch, just not tinted. */
@supports not (color: color-mix(in srgb, red 50%, transparent)){
  .unit .fac-tag{background:rgba(255,255,255,.05);border-color:var(--border)}
}

.unit .fac-body{min-width:0}
/* Default colours, deliberately: the department name is information, not
   decoration, and it has to stay readable against four different tints. */
.unit .fac-name{color:var(--parch);font-weight:600;letter-spacing:.005em}
/* The rank on its own line — inline it orphaned on anything as long as
   "Los Santos County Sheriff's Department", breaking mid-rank. */
.unit .fac-rank{display:block;margin-top:1px;font-size:11px;color:var(--text-faint);font-weight:500}

.unit:has(input:checked) .fac{border-top-color:rgba(212,146,58,.22)}
.unit:has(input:checked) .fac-tag{
  color:#17140f;
  background:var(--fac);
  border-color:transparent;
}

/* ── THE GREYED-OUT STATES ──────────────────────────────────
 *
 * Two of them, and the card has to say which at a glance:
 *   in a faction that has no MDC flag → the faction, then the refusal
 *   in no faction at all              → a lock where the insignia would be
 *
 * The patch loses its faction colour here. Colour on this card would say
 * "this one is live" at the same moment the words say it is not, and the grey
 * is the whole point of the state. */
.unit--off .fac{border-top-color:rgba(255,255,255,.04)}
.unit--off .fac-tag{
  --fac:var(--text-faint);
  opacity:.8;
}
.unit--off .fac-name{color:var(--text-dim);font-weight:500}
.unit--off .fac-rank{color:var(--text-faint)}

/* A character with no faction has no insignia, so it gets a bare lock on the
   same rail — a bordered box with nothing in it reads as a missing image
   rather than as an absence. */
.unit .fac-tag--none{
  min-width:52px;min-height:22px;padding:0;
  background:none;border:none;
  color:var(--text-faint);opacity:.65;
}
.unit .fac-tag--none .i{font-size:14px}

/* The refusal sits where the rank would, because that is what it replaces:
   this character's standing on the MDC. Amber because it is something the
   player can act on — ask command staff — where "not in a faction" is just a
   fact about the character and stays quiet. Painting both would train people
   to ignore the colour. */
.unit--off .fac-denied{
  color:var(--amber);opacity:.9;font-weight:600;
}

/* The locked list under the "none of your characters" empty state. */
.units--locked{margin-top:12px;opacity:.9}

/* no characters yet */
.empty{
  margin-top:16px;padding:20px 18px;border-radius:12px;text-align:center;
  border:1px dashed var(--border);background:rgba(255,255,255,.012);
}
.empty p{font-size:12.5px;line-height:1.6;color:var(--text-faint)}
.empty p b{color:var(--parch);font-weight:700}
.empty p+p{margin-top:8px}

/* ── buttons ─────────────────────────────────────────────── */
.sso{
  margin-top:24px;width:100%;position:relative;overflow:hidden;padding:16px;border-radius:11px;
  font-size:14.5px;font-weight:800;letter-spacing:-.005em;color:var(--ink);
  background:linear-gradient(180deg,var(--gold),var(--amber));
  box-shadow:0 12px 26px rgba(212,146,58,.22);transition:.16s var(--ease);
}
.sso:hover{transform:translateY(-2px);box-shadow:0 18px 36px rgba(212,146,58,.3)}
.sso:active{transform:translateY(0)}
.sso::after{
  content:"";position:absolute;top:0;bottom:0;left:-40%;width:32%;transform:skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.36),transparent);
  animation:shine 5.2s ease-in-out infinite;
}
@keyframes shine{0%,64%{left:-40%}90%,100%{left:132%}}
.ssonote{margin-top:12px;text-align:center;font-size:11.5px;line-height:1.5;color:var(--text-faint)}
.ssonote b{color:var(--text-dim);font-weight:600}

/* ghost until a character is picked, gold once it is */
.go{
  margin-top:20px;width:100%;padding:15px;border-radius:11px;font-size:14px;font-weight:700;
  color:var(--text-faint);background:transparent;border:1px solid var(--border);
  transition:.17s var(--ease);
}
.go:disabled{cursor:default}
.go:not(:disabled){
  color:var(--ink);font-weight:800;border-color:transparent;
  background:linear-gradient(180deg,var(--gold),var(--amber));
  box-shadow:0 12px 26px rgba(212,146,58,.22);
}
.go:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 18px 36px rgba(212,146,58,.3)}

.ghost{
  display:inline-block;padding:11px 18px;border-radius:10px;font-size:12.5px;font-weight:600;
  color:var(--text-dim);border:1px solid var(--border);background:rgba(255,255,255,.015);
  transition:.16s var(--ease);
}
.ghost:hover{border-color:rgba(212,146,58,.5);color:var(--parch);background:rgba(212,146,58,.07)}
.errbtns{display:flex;gap:10px;justify-content:center;margin-top:26px;flex-wrap:wrap}

/* a form that is busy talking to the UCP */
.is-busy{pointer-events:none;filter:saturate(.72)}

/* ── terminal cards ──────────────────────────────────────── */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-top:30px}
.card{
  position:relative;display:flex;flex-direction:column;gap:7px;padding:18px;border-radius:14px;
  border:1px solid var(--border);background:rgba(255,255,255,.018);transition:.17s var(--ease);
}
.card .i{font-size:20px;color:var(--amber)}
.card b{font-size:15px;font-weight:700}
.card span{font-size:12.5px;line-height:1.5;color:var(--text-faint)}
.card em{
  position:absolute;top:14px;right:14px;font-style:normal;
  font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-faint);border:1px solid var(--border);border-radius:5px;padding:3px 7px;
}
.card.is-soon{opacity:.55;cursor:default}
.card:not(.is-soon):hover{border-color:rgba(212,146,58,.45);background:rgba(212,146,58,.06);
  transform:translateY(-2px)}

/* ── bottom bar ──────────────────────────────────────────── */
.foot{
  position:relative;z-index:3;flex:none;display:flex;align-items:center;gap:20px;
  padding:16px 40px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--text-faint);
  background:rgba(14,12,11,.42);backdrop-filter:blur(6px);
}
.foot .clock{
  display:inline-flex;align-items:center;gap:7px;padding:6px 12px;
  border:1px solid var(--line);border-radius:8px;color:var(--text-dim);line-height:1;
}
.foot .clock .i{font-size:11px}
.foot .links{margin-left:auto;display:flex;align-items:center;gap:22px}
.foot .links a:hover{color:var(--gold)}

/* ── loading screen ──────────────────────────────────────── */
.boot{
  position:fixed;inset:0;z-index:200;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:var(--surface);
  background-image:radial-gradient(64% 56% at 50% 40%,rgba(212,146,58,.12),transparent 72%);
  transition:opacity .6s ease, visibility .6s;
  /* If JS never runs, this clears the screen on its own. */
  animation:bootfail .1s linear 6s forwards;
}
.boot.done{opacity:0;visibility:hidden;animation:none}
@keyframes bootfail{to{opacity:0;visibility:hidden}}

.boot .sealbox{
  position:relative;display:grid;place-items:center;
  width:clamp(250px,42vh,440px);height:clamp(250px,42vh,440px);
  animation:sealin 1.1s var(--ease) both;
}
@keyframes sealin{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
.boot .halo{
  position:absolute;inset:-14%;border-radius:50%;filter:blur(26px);
  background:radial-gradient(circle,rgba(212,146,58,.30),rgba(212,146,58,.06) 55%,transparent 72%);
  animation:hb 3.4s ease-in-out infinite;
}
@keyframes hb{0%,100%{opacity:.6;transform:scale(.95)}50%{opacity:1;transform:scale(1.05)}}
.boot .ring{position:absolute;inset:-6.5%;border-radius:50%;border:1px solid rgba(226,182,92,.28);
  animation:bturn 34s linear infinite}
.boot .ring::after{
  content:"";position:absolute;top:-4px;left:50%;width:7px;height:7px;margin-left:-3.5px;
  border-radius:50%;background:var(--gold);box-shadow:0 0 12px rgba(226,182,92,.9);
}
.boot .ring2{position:absolute;inset:-13%;border-radius:50%;border:1px dashed rgba(226,182,92,.13);
  animation:bturn 78s linear reverse infinite}
@keyframes bturn{to{transform:rotate(360deg)}}
.boot .seal{
  position:relative;width:100%;height:100%;
  background:var(--crest, url('../img/seal.png')) center/contain no-repeat;
  filter:drop-shadow(0 26px 60px rgba(0,0,0,.7)) drop-shadow(0 0 26px rgba(212,146,58,.16));
}
.boot .bmark{margin-top:42px;display:flex;align-items:baseline;gap:14px;
  animation:up .7s .3s var(--ease) both}
.boot .bmark .mark{font-size:33px;font-weight:900;letter-spacing:.02em;color:var(--parch)}
.boot .bmark .mark em{font-style:normal;color:var(--gold)}
.boot .bmark .tag{
  font-size:11.5px;font-weight:700;letter-spacing:.22em;color:var(--text-faint);
  border:1px solid var(--border);border-radius:6px;padding:5px 10px;position:relative;top:-5px;
}
.boot .bb{
  margin-top:30px;width:260px;height:2px;border-radius:2px;background:rgba(255,255,255,.09);
  overflow:hidden;animation:up .7s .42s var(--ease) both;
}
.boot .bb i{
  display:block;height:100%;width:8%;border-radius:2px;
  background:linear-gradient(90deg,var(--amber),var(--gold));
  box-shadow:0 0 12px rgba(212,146,58,.8);transition:width .24s linear;
}
.boot .bl{margin-top:18px;font-size:13px;color:var(--text-faint);min-height:18px;
  animation:up .7s .5s var(--ease) both}
@keyframes up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ── responsive ──────────────────────────────────────────── */
@media(max-height:820px){
  h1{font-size:40px}
  .feat{margin-top:22px;gap:13px}
  .lede{margin-top:15px}
  .trust{margin-top:22px}
  .center{padding:4px 46px 26px}
}
@media(max-width:1120px){
  .center{grid-template-columns:minmax(0,1fr);gap:40px;padding:24px 34px 42px}
  .center>*,.intro,.feat,.authwrap,.auth{min-width:0;max-width:100%}
  .authwrap{justify-self:stretch;max-width:480px}
  h1{font-size:34px}
  .crestbg,.crestglow{width:min(78vw,660px);height:min(78vw,660px)}
  .crestbg{opacity:.09}
}
@media(max-width:640px){
  .top{padding:18px;gap:12px}
  .brand .tag{display:none}
  .navbtn .nb{display:none}
  .navbtn{padding:9px 12px}
  .onduty-m b{max-width:14ch}
  .center{padding:18px 18px 34px}
  h1{font-size:28px}
  .h1--sm{font-size:24px}
  .ab{padding:22px 18px 20px}
  .panelwrap{padding:24px 18px;margin:20px 0}
  .foot{flex-direction:column;gap:12px;text-align:center;padding:18px 24px}
  .foot .links{margin:0;gap:16px;flex-wrap:wrap;justify-content:center}
}

/* Somebody who has asked their machine to stop moving things means it. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important}
  .crestbg,.boot .ring,.boot .ring2,.boot .halo,.sso::after{animation:none !important}
}

/* ════════════════════════════════════════════════════════════
   SIDEBAR + PAGE BACKDROP
   Everything below belongs to views/partials/sidebar.php and is
   shared by every page that renders with 'shell' => true. The
   sign-in and character-select pages do not use any of it.
   ════════════════════════════════════════════════════════════ */
:root{
  --rail:#201d19;             /* the sidebar's own surface — flat */
  --rail-line:#312b25;
  --rail-line-2:#3b342c;
}

.app{display:flex;min-height:100vh;min-height:100dvh}

/* ── the backdrop ─────────────────────────────────────────
   Fixed, so it is behind every page whatever the markup order.
   Offset by half the sidebar so the seal centres in the area
   beside it rather than under it. */
.bgfx{
  position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background:radial-gradient(74% 64% at 26% 0%, rgba(212,146,58,.10), transparent 66%);
}
.bgfx .glow{
  position:absolute;left:calc(50% + 149px);top:50%;transform:translate(-50%,-50%);
  width:min(72vh,700px);height:min(72vh,700px);border-radius:50%;
  background:radial-gradient(circle, rgba(212,146,58,.075), transparent 64%);filter:blur(70px);
}
.bgfx .crest{
  position:absolute;left:calc(50% + 149px);top:50%;
  width:min(96vh,920px);height:min(96vh,920px);transform:translate(-50%,-50%);
  background:var(--crest, url('../img/seal.png')) center/contain no-repeat;
  opacity:.07;animation:turn 300s linear infinite;
}
.bgfx .veil{
  position:absolute;inset:0;
  background:radial-gradient(92% 88% at 50% 48%, transparent 58%, rgba(15,13,12,.36) 100%);
}
@media (prefers-reduced-motion: reduce){ .bgfx .crest{animation:none} }

/* ── the rail ─────────────────────────────────────────── */
.rail{
  flex:none;width:298px;position:sticky;top:0;align-self:flex-start;
  height:100vh;height:100dvh;display:flex;flex-direction:column;
  background:var(--rail);
  box-shadow:1px 0 0 var(--rail-line), 18px 0 44px rgba(0,0,0,.42);
  z-index:20;
}
/* The seal again as a watermark — a single-tone ghost of it, not the
   full-colour badge shrunk down, which reads as a smudge. */
.rail::before{
  content:"";position:absolute;left:50%;top:54%;transform:translate(-50%,-50%);
  width:320px;height:320px;pointer-events:none;z-index:0;
  background:url('../img/seal-ghost.png') center/contain no-repeat;
  opacity:.042;filter:blur(.4px);
  -webkit-mask-image:radial-gradient(circle at 50% 50%, #000 30%, transparent 58%);
          mask-image:radial-gradient(circle at 50% 50%, #000 30%, transparent 58%);
}

.rail-head{position:relative;z-index:2;flex:none;padding:26px 22px 0;text-align:center}
.rail-head .crest{position:relative;width:150px;height:150px;margin:0 auto}
.rail-head .crest::before{
  content:"";position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);
  width:190px;height:190px;border-radius:50%;
  background:radial-gradient(circle, rgba(212,146,58,.14), transparent 62%);filter:blur(14px);
}
.rail-head .crest i{
  position:absolute;inset:0;display:block;
  background:var(--crest, url('../img/seal.png')) center/contain no-repeat;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.55));
}
/* The faction's name under its logo, in the rail's own text; the tag and
   what this is in faint capitals beneath. */
.rail-head .crest-name{
  margin:16px 0 0;font-size:13px;font-weight:700;line-height:1.35;letter-spacing:-.01em;
  color:var(--parch);text-wrap:balance;
}
.rail-head .crest-tag{
  margin:6px 0 0;font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-faint);
}
.rail-head .railrule{
  margin-top:18px;height:1px;
  background:linear-gradient(90deg,transparent,var(--rail-line-2) 12%,var(--rail-line-2) 88%,transparent);
}

/* ── search ───────────────────────────────────────────── */
.find{position:relative;z-index:2;flex:none;padding:16px 16px 4px}
.find label{
  display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:9px;
  border:1px solid var(--rail-line-2);background:rgba(0,0,0,.22);
  transition:border-color .16s var(--ease),background .16s var(--ease);
}
.find label:focus-within{border-color:rgba(212,146,58,.55);background:rgba(0,0,0,.3)}
.find label.off{opacity:.5}
.find .i{font-size:15px;color:#6d6459}
.find input{
  flex:1;min-width:0;border:none;background:none;outline:none;color:var(--parch);
  font:inherit;font-size:13px;caret-color:var(--gold);
}
.find input::placeholder{color:#6d6459}
.find input:disabled{cursor:not-allowed}
/* the browser's own clear button is blue and cannot be restyled */
.find input::-webkit-search-cancel-button,
.find input::-webkit-search-decoration{-webkit-appearance:none;appearance:none}
.find .clear{
  flex:none;width:20px;height:20px;display:none;place-items:center;border-radius:5px;
  font-size:11px;color:#6d6459;transition:.15s var(--ease);
}
.find .clear:hover{color:var(--parch);background:rgba(255,255,255,.07)}
.find label.has .clear{display:grid}

/* ── menu ─────────────────────────────────────────────── */
.rail-nav{
  position:relative;z-index:2;flex:1;overflow-y:auto;padding:12px 14px 20px;
  scrollbar-width:thin;scrollbar-color:#39322b transparent;
}
.rail-nav::-webkit-scrollbar{width:10px}
.rail-nav::-webkit-scrollbar-track{background:transparent}
.rail-nav::-webkit-scrollbar-thumb{background:#39322b;border-radius:9px;border:3.5px solid transparent;background-clip:content-box}
.rail-nav::-webkit-scrollbar-thumb:hover{background:#4d443a;background-clip:content-box}

.sect{
  display:flex;align-items:center;gap:10px;margin:20px 12px 8px;
  font-size:9.5px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:#655d51;
}
.sect::after{content:"";flex:1;height:1px;background:var(--rail-line)}
.sect:first-child{margin-top:2px}

.rail .row{
  display:flex;align-items:center;gap:13px;width:100%;padding:12px 13px;border-radius:9px;
  font-size:13.5px;font-weight:600;letter-spacing:-.005em;color:var(--text-dim);
  transition:background .16s var(--ease),color .16s var(--ease);
}
.rail .row + .row, .rail .grp + .row, .rail .row + .grp, .rail .grp + .grp{margin-top:3px}
.rail .row .i{font-size:17px;color:#6d6459;transition:color .16s var(--ease)}
.rail .row .caret{margin-left:auto;font-size:11px;color:#5f574c;transition:transform .24s var(--ease)}
.rail a.row:hover, .rail button.row:hover{background:rgba(212,146,58,.07);color:var(--parch)}
.rail a.row:hover .i, .rail button.row:hover .i{color:var(--amber)}
.rail .row.is-soon{opacity:.42;cursor:default}
.rail .row.is-on{background:rgba(212,146,58,.1);color:var(--parch)}
.rail .row.is-on .i{color:var(--amber)}

.grp.open > .row{background:rgba(255,255,255,.03);color:var(--parch)}
.grp.open > .row .i{color:var(--amber)}
.grp.open > .row .caret{transform:rotate(180deg);color:var(--amber)}

.sub{display:grid;grid-template-rows:0fr;transition:grid-template-rows .26s var(--ease)}
.grp.open > .sub{grid-template-rows:1fr}
.sub > div{overflow:hidden}
.sub ul{list-style:none;margin:4px 0 8px;padding-left:27px;position:relative}
.sub ul::before{content:"";position:absolute;left:13px;top:8px;bottom:8px;width:1px;background:var(--rail-line-2)}
.sub a, .sub .soon{
  display:flex;align-items:center;gap:10px;position:relative;padding:10px 12px;border-radius:8px;
  font-size:13px;font-weight:500;color:#8d8478;transition:.15s var(--ease);
}
.sub .soon{opacity:.5;cursor:default}
.sub a::before, .sub .soon::before{
  content:"";position:absolute;left:-14px;top:50%;width:8px;height:1px;
  background:var(--rail-line-2);transition:.15s var(--ease);
}
.sub a:hover{background:rgba(212,146,58,.06);color:var(--parch)}
.sub a:hover::before{background:var(--amber);width:11px;left:-15px}
.sub a.is-on{color:var(--gold-hi);background:rgba(212,146,58,.1);font-weight:700}
.sub a.is-on::before{background:var(--gold);width:11px;left:-15px}
.rail .tag{
  margin-left:auto;font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  padding:2px 6px;border-radius:5px;color:#655d51;border:1px solid var(--rail-line-2);
}

/* ── foot ─────────────────────────────────────────────── */
.rail-foot{position:relative;z-index:2;flex:none;border-top:1px solid var(--rail-line-2)}
.op{display:flex;align-items:center;gap:8px;padding:14px 14px 13px 18px}
.op .txt{flex:1;min-width:0}
.op b{display:block;font-size:13.5px;font-weight:700;letter-spacing:-.012em;color:var(--parch);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.op span{display:block;margin-top:4px;font-size:11.5px;font-weight:500;line-height:1.45;color:var(--text-faint)}
.op span em{font-style:normal;color:#8d8478}

.rail-foot .bar{display:flex;align-items:center;gap:12px;padding:11px 18px 14px;border-top:1px solid var(--rail-line)}
.rail-foot .clock{
  flex:1;min-width:0;font-size:11.5px;font-weight:500;letter-spacing:.015em;color:#6f675c;
  font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.rail-foot .clock b{font-weight:600;color:#8d8478}
.rail-foot .bar .out{flex:none;display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;
  color:#6f675c;transition:color .16s var(--ease)}
.rail-foot .bar .out:hover{color:var(--red)}

/* ── notification bell ────────────────────────────────────
   Two resting states only: quiet, or amber with a count. No
   animation on arrival — this is a records tool, not a phone. */
.bell{
  flex:none;position:relative;width:36px;height:36px;display:grid;place-items:center;
  border-radius:9px;color:#6d6459;font-size:18px;border:1px solid transparent;
  transition:.16s var(--ease);
}
.bell:hover{color:var(--parch);background:rgba(255,255,255,.05)}
.bell.has{color:var(--amber)}
.bell.has:hover{color:var(--gold-hi);background:rgba(212,146,58,.1)}
.bell.open{color:var(--gold-hi);background:rgba(212,146,58,.12);border-color:rgba(212,146,58,.3)}
.bell .n{
  position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 4px;
  display:grid;place-items:center;border-radius:999px;background:var(--gold);color:var(--ink);
  font-size:10px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;
  border:2px solid var(--rail);
}

.notif{
  position:absolute;left:14px;bottom:100%;margin-bottom:12px;width:356px;z-index:60;
  background:#272320;border:1px solid #413931;border-radius:13px;
  box-shadow:0 24px 60px rgba(0,0,0,.62), 0 2px 0 rgba(255,255,255,.03) inset;
  opacity:0;visibility:hidden;transform:translateY(8px) scale(.985);transform-origin:12px 100%;
  transition:opacity .18s var(--ease),transform .18s var(--ease),visibility .18s;
}
.notif.open{opacity:1;visibility:visible;transform:none}
.notif::after{
  content:"";position:absolute;left:246px;bottom:-6px;width:11px;height:11px;background:#272320;
  border-right:1px solid #413931;border-bottom:1px solid #413931;transform:rotate(45deg);
}
.notif header{display:flex;align-items:center;gap:10px;padding:13px 15px;border-bottom:1px solid #342e28}
.notif header h3{font-size:11px;font-weight:800;letter-spacing:.17em;text-transform:uppercase;color:var(--text-dim)}
.notif header .cnt{font-size:10px;font-weight:800;color:var(--ink);background:var(--gold);
  border-radius:999px;padding:2px 7px;font-variant-numeric:tabular-nums}
.notif header button.mark{margin-left:auto;display:flex;align-items:center;gap:6px;
  font-size:11.5px;font-weight:600;color:#8d8478;transition:color .15s var(--ease)}
.notif header button.mark .i{font-size:13px}
.notif header button.mark:hover{color:var(--gold)}
.notif header button.mark[disabled]{opacity:.35;pointer-events:none}

.nlist{max-height:392px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#413931 transparent}
.nlist::-webkit-scrollbar{width:9px}
.nlist::-webkit-scrollbar-thumb{background:#413931;border-radius:9px;border:3px solid transparent;background-clip:content-box}
.nlist li{list-style:none}
.nitem{display:flex;gap:12px;width:100%;padding:13px 15px;border-bottom:1px solid #302a25;
  position:relative;transition:background .15s var(--ease)}
.nlist li:last-child .nitem{border-bottom:none}
.nitem:hover{background:rgba(212,146,58,.05)}
.nitem .mk{flex:none;width:32px;height:32px;border-radius:8px;display:grid;place-items:center;
  font-size:15px;color:var(--amber);background:rgba(212,146,58,.11);border:1px solid rgba(212,146,58,.24)}
.nitem.t-red .mk{color:var(--red);background:rgba(201,82,74,.11);border-color:rgba(201,82,74,.28)}
.nitem.t-green .mk{color:var(--green);background:rgba(87,178,106,.11);border-color:rgba(87,178,106,.28)}
.nitem .body{min-width:0;flex:1}
.nitem .body b{display:block;font-size:13px;font-weight:600;letter-spacing:-.008em;
  color:var(--text-dim);line-height:1.4}
.nitem .body p{margin-top:3px;font-size:11.5px;line-height:1.5;color:var(--text-faint)}
.nitem .body time{display:block;margin-top:5px;font-size:10.5px;color:#655d51}
.nitem.new .body b{color:var(--parch);font-weight:700}
.nitem.new::before{content:"";position:absolute;left:6px;top:50%;transform:translateY(-50%);
  width:4px;height:4px;border-radius:50%;background:var(--gold)}

.notif footer{border-top:1px solid #342e28}
.notif .allbtn{
  display:block;width:100%;padding:13px 15px;text-align:center;
  font-size:12.5px;font-weight:600;letter-spacing:.01em;color:var(--parch);
  transition:color .16s var(--ease),background .16s var(--ease);
}
.notif .allbtn:hover{color:var(--gold);background:rgba(255,255,255,.03)}
.notif .nmore{
  padding:9px 15px;border-top:1px solid #302a25;text-align:center;
  font-size:11px;font-weight:600;color:var(--text-faint);
}
.nempty{padding:38px 26px;text-align:center}
.nempty .i{font-size:30px;color:#4d453c}
.nempty b{display:block;margin-top:13px;font-size:13.5px;font-weight:700;color:var(--text-dim)}
.nempty p{margin-top:6px;font-size:11.5px;line-height:1.55;color:var(--text-faint)}

/* ── the page beside the rail ─────────────────────────── */
.page{flex:1;min-width:0;position:relative;z-index:1;display:flex;flex-direction:column}
/* Centred, and capped so long prose does not run the full width of a
   wide monitor. The top padding is unchanged, so a page still starts at
   the same height it always did. */
.page .inner{padding:34px 36px;max-width:1180px;width:100%;margin:0 auto}

/* ── narrow screens: the rail slides in ───────────────── */
.railbtn{
  display:none;position:fixed;z-index:30;left:14px;top:14px;width:40px;height:40px;
  place-items:center;border-radius:10px;font-size:18px;color:var(--text-dim);
  border:1px solid var(--border);background:rgba(32,29,25,.94);backdrop-filter:blur(10px);
}
.railscrim{position:fixed;inset:0;z-index:15;background:rgba(0,0,0,.5);
  opacity:0;visibility:hidden;transition:.2s var(--ease)}
.railscrim.on{opacity:1;visibility:visible}
@media (max-width:960px){
  .railbtn{display:grid}
  .rail{position:fixed;left:0;top:0;transform:translateX(-100%);transition:transform .24s var(--ease)}
  .rail.open{transform:none}
  .page .inner{padding:70px 20px 28px}
  .notif{width:min(356px, calc(100vw - 40px))}
}


/* ════════════════════════════════════════════════════════════
   NOTIFICATIONS — the outstanding bar and /notifications.php
   The bar belongs to views/layout.php and appears on every page.
   ════════════════════════════════════════════════════════════ */

/* Deliberately not dismissible: an outstanding notification stays
   outstanding until it is acknowledged. It scrolls with the page
   rather than sticking, so it never eats height on a long record. */
/* A pop-up, not part of the page.
   position:fixed, so it floats over whatever you are reading, never
   shifts the layout, and stays put while the page scrolls under it.
   Centred over the content area — the 149px is half the sidebar, so
   it sits in the middle of the space beside it rather than the middle
   of the window. */
.outbar{
  position:fixed;z-index:14;
  top:18px;left:calc(50% + 149px);transform:translateX(-50%);
  max-width:calc(100vw - 340px);
  display:flex;align-items:center;gap:13px;
  padding:12px 12px 12px 18px;border-radius:10px;overflow:hidden;
  border:1px solid rgba(212,146,58,.45);
  background:#3a2c17;
  box-shadow:0 16px 40px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.3);
}
.outbar::before{                    /* the leading edge, full height */
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--gold);
}
.outbar > .i{flex:none;font-size:17px;color:var(--gold-hi)}
.outbar p{font-size:13px;font-weight:700;color:#fbf3e2;line-height:1.45;white-space:nowrap}
.outbar p span{font-weight:500;color:#d3bd93}
.outbar a{
  flex:none;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  padding:8px 15px;border-radius:7px;
  font-size:12px;font-weight:800;color:var(--ink);background:var(--gold);
  transition:background .16s var(--ease);
}
.outbar a:hover{background:var(--gold-hi)}
.outbar a .i{font-size:12px;color:inherit}
@media(max-width:960px){
  .outbar{left:50%;max-width:calc(100vw - 28px)}
}
@media(max-width:640px){
  .outbar{flex-wrap:wrap;gap:10px;padding:12px}
  .outbar p{font-size:12.5px;white-space:normal}
  .outbar a{margin-left:auto}
}

/* ── page head ────────────────────────────────────────── */
.ph{display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:22px}
.ph > div{flex:1 1 100%;min-width:0}
.ph h1{font-size:24px;font-weight:800;letter-spacing:-.025em}
.ph .pagesub{margin-top:8px;font-size:13px;color:var(--text-faint);line-height:1.6}
.ph .pagesub b{color:var(--text-dim);font-weight:600}

/* ── toolbar ──────────────────────────────────────────── */
.tools{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding-bottom:16px;border-bottom:1px solid var(--border);
}
.tabs{display:flex;gap:7px}
.tab{
  display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:8px;
  font-size:12.5px;font-weight:600;color:var(--text-dim);
  border:1px solid var(--border);background:#242120;
  transition:.16s var(--ease);
}
.tab:hover{background:#2b2725;border-color:#4a423a;color:var(--parch)}
.tab.on{background:#3a2e1d;border-color:rgba(212,146,58,.4);color:var(--gold-hi)}
.tab .c{
  font-size:10.5px;font-weight:800;padding:2px 6px;border-radius:999px;
  background:rgba(255,255,255,.07);color:var(--text-faint);font-variant-numeric:tabular-nums;
}
.tab.on .c{background:var(--gold);color:var(--ink)}
.tools .push{margin-left:auto;display:flex;gap:8px}
.btn{
  display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:8px;
  font-size:12.5px;font-weight:600;color:var(--text-dim);
  border:1px solid var(--border);background:#242120;transition:.16s var(--ease);
}
.btn .i{font-size:14px}
.btn:hover{border-color:rgba(212,146,58,.45);color:var(--parch);background:#2f2720}
.btn:disabled{opacity:.4;pointer-events:none}
.btn--warn:hover{border-color:rgba(201,82,74,.5);color:var(--red);background:rgba(201,82,74,.07)}

/* ── the list ─────────────────────────────────────────────
   Separate rows with air around them, flat — one surface, one
   hairline. No icon tile beside the headline: it repeated what
   the source label says and could not be optically centred
   against a block of text of varying height. The colour it
   carried moved onto the source label. */
.dayhead{
  margin:30px 2px 13px;
  font-size:10px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--text-faint);
}
.dayhead:first-of-type{margin-top:24px}
.nfeed{list-style:none;display:flex;flex-direction:column;gap:8px}
.nrow{
  position:relative;display:flex;align-items:flex-start;gap:20px;
  padding:16px 20px;border-radius:10px;overflow:hidden;
  border:1px solid var(--border);background:#232020;
  transition:border-color .16s var(--ease),background .16s var(--ease);
}
.nrow:hover{border-color:#4a423a;background:#282422}
.nrow.new::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gold)}
.nrow.new{border-color:rgba(212,146,58,.26);background:#272220}
.nrow.new:hover{border-color:rgba(212,146,58,.44);background:#2c2622}
.nrow.done .txt h3{color:var(--text-dim);font-weight:600}
.nrow.done .txt p, .nrow.done .meta{opacity:.72}
.nrow .txt{flex:1;min-width:0}
.nrow .txt h3{font-size:14px;font-weight:700;letter-spacing:-.012em;color:var(--parch);line-height:1.4}
.nrow .txt h3 a:hover{color:var(--gold-hi)}
.nrow .txt p{margin-top:5px;font-size:12.5px;line-height:1.6;color:var(--text-faint)}
.nrow .meta{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:10px;
  font-size:11px;color:#6f675c;
}
.nrow .meta i{font-style:normal;opacity:.45}
.src{font-weight:700;letter-spacing:.05em;text-transform:uppercase;font-size:10px;color:var(--amber)}
.t-red   .src{color:#dd7b73}
.t-green .src{color:var(--green)}
.nrow.done .src{color:#8d8478}
.life{
  display:inline-flex;align-items:center;gap:6px;padding:2px 8px;border-radius:999px;
  border:1px solid var(--border);background:#282524;
  font-size:10.5px;font-weight:600;color:#6f675c;
}
.life .i{font-size:11px}
.life.soon{color:#d9a45a;border-color:rgba(212,146,58,.34);background:#332a1e}
.life.last{color:var(--red);border-color:rgba(201,82,74,.36);background:#33211f}
.ack{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--green)}
.ack .i{font-size:12px}

/* ── row actions ──────────────────────────────────────────
   Tick acknowledges, X deletes. Delete cannot be undone, so it
   ARMS on the first press — solid red, reading Confirm — and
   only deletes on the second. With JavaScript that happens in
   place; without it the first press comes back from the server
   with the row armed. Two presses either way. */
.acts{flex:none;align-self:center;display:flex;align-items:center;gap:7px}
.act{
  width:34px;height:34px;display:grid;place-items:center;line-height:0;
  border-radius:8px;color:#7d7468;
  border:1px solid var(--border);background:#272423;
  transition:.16s var(--ease);
}
.act .i{width:15px;height:15px;display:block}
.act--ok:hover{color:#78a882;border-color:rgba(87,178,106,.34);background:#242b23}
.act--no:hover{color:#b8746d;border-color:rgba(201,82,74,.34);background:#2c2321}
.act--no.arm{
  width:auto;padding:0 13px;grid-auto-flow:column;gap:7px;align-items:center;
  color:#fff;background:var(--red);border-color:var(--red);
  font-size:12px;font-weight:700;line-height:1;
}
.act--no.arm::after{content:"Confirm"}
.act--no.arm:hover{background:#d75d55;border-color:#d75d55;color:#fff}
@media(max-width:820px){ .nrow{flex-wrap:wrap} .acts{width:100%;justify-content:flex-end} }

/* ── empty ────────────────────────────────────────────── */
.blank{
  margin-top:24px;padding:64px 30px;text-align:center;border-radius:12px;
  border:1px dashed var(--border);background:#232020;
}
.blank .i{font-size:38px;color:#4d453c}
.blank b{display:block;margin-top:16px;font-size:15px;font-weight:700;color:var(--text-dim)}
.blank p{margin-top:7px;font-size:12.5px;line-height:1.6;color:var(--text-faint)}

.note{
  margin-top:28px;padding-top:16px;border-top:1px solid var(--line);
  font-size:11.5px;line-height:1.6;color:var(--text-faint);
}
.note b{color:#8d8478;font-weight:600}


/* ════════════════════════════════════════════════════════════
   DASHBOARD  (views/terminal.php)

   The approved design. Four class names were changed on the way in
   because mdc.css already used them for something else:
     .ph → .dh     .top → .dtop     .scrim → .ovl
     .acts (editor footer only) → .mact
   The two series colours are a categorical pair validated against
   this dark surface — CVD ΔE 22.6, normal-vision ΔE 23.9. The brand
   gold cannot carry two series on its own.
   ════════════════════════════════════════════════════════════ */
:root{ --s-duty:#c1862f; --s-act:#5a95d6; }

/* The dashboard's panels: the header is a shade lighter than the body it
   sits on, so a box reads as a box from the change in tone rather than
   from a hairline that was never quite dark enough to see. The header is
   also a label, not a section — one line, the height of its own text.
   Scoped to .dash on purpose: the APB database's panel header height is
   load-bearing for its filter row, and is left alone. */
.dash{ --panel:#1f1c1a; }
.dash .panel{border-radius:11px}
.dash .panel > header{height:40px;min-height:0;padding:0 14px;gap:9px;
  background:#2a2624;border-bottom:1px solid var(--border)}
.dash .panel > header h2{font-size:10px;letter-spacing:.16em}
.dash .panel > header .i{font-size:13px}
.dash .panel > header .minibtn{padding:4px 10px;font-size:11px}

.dh h1{font-size:26px;font-weight:800;letter-spacing:-.03em;margin-bottom:22px}

.panel{background:var(--panel);border:1px solid var(--border);border-radius:12px;overflow:hidden}
.panel > header{display:flex;align-items:center;gap:11px;padding:10px 16px;border-bottom:1px solid var(--line);min-height:56px}
.panel > header h2{font-size:11px;font-weight:800;letter-spacing:.17em;text-transform:uppercase;color:var(--text-dim)}
.panel > header .i{font-size:15px;color:var(--amber)}
.panel > header .side{margin-left:auto;display:flex;align-items:center;gap:9px}
.hint{font-size:11px;font-weight:600;color:var(--text-faint)}
.link{font-size:11.5px;font-weight:700;color:var(--gold)}
.link:hover{color:var(--gold-hi)}
.stack{display:flex;flex-direction:column;gap:16px}
/* ══ message of the day ═══════════════════════════════════
   Above everything, because it is the one thing on the dashboard
   somebody else wrote for you. The gold edge is the same marker
   the MDC uses everywhere for "unread / outstanding". */
.motd{position:relative;margin-bottom:16px}
.motd::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gold)}
.motd > header .byline{margin-left:auto;font-size:11px;color:var(--text-faint)}
.motd > header .byline b{color:var(--text-dim);font-weight:600}
.motd .msg{padding:15px 18px;font-size:13px;line-height:1.7;color:var(--text-dim)}
.motd .msg p + p{margin-top:9px}
.motd .msg strong{color:var(--parch);font-weight:700}
.motd .none{padding:22px 18px;text-align:center;font-size:12.5px;color:var(--text-faint)}
.motd .none b{display:block;color:var(--text-dim);font-weight:700;margin-bottom:4px}
.minibtn{
  display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:7px;
  font-size:11.5px;font-weight:700;color:var(--text-dim);
  border:1px solid var(--border);background:#272423;transition:.15s var(--ease);
}
.minibtn .i{font-size:12px}
.minibtn:hover{border-color:rgba(212,146,58,.45);color:var(--gold-hi);background:#2f2820}

/* ── the editor ───────────────────────────────────────────
   One message exists at a time, so this is an edit box and not a
   composer: it opens holding what is currently posted, and saving
   replaces it. The preview is live because the message is the one
   piece of writing on the dashboard everybody reads. */
.ed{padding:18px}
.ed .lab{display:flex;align-items:baseline;gap:10px;margin-bottom:8px}
.ed .lab b{font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--text-faint)}
.ed .lab .ct{margin-left:auto;font-size:10.5px;color:#655d51;font-variant-numeric:tabular-nums}
.ed textarea{
  width:100%;min-height:150px;resize:vertical;padding:13px 14px;border-radius:9px;
  border:1px solid var(--border);background:#1c1a18;color:var(--parch);
  font:inherit;font-size:13px;line-height:1.7;outline:none;caret-color:var(--gold);
}
.ed textarea:focus{border-color:rgba(212,146,58,.5)}
.ed .edtip{margin-top:9px;font-size:11px;color:var(--text-faint);line-height:1.55}
.ed .edtip code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;
  padding:1px 5px;border-radius:4px;background:#2b2724;color:var(--gold-hi);
}
.ed .prev{margin-top:16px;border-top:1px solid var(--line);padding-top:14px}
.ed .prev .k{font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--text-faint)}
.ed .prev .box{
  margin-top:9px;position:relative;border:1px solid var(--border);border-radius:9px;
  background:#1e1c1a;padding:14px 16px;font-size:13px;line-height:1.7;color:var(--text-dim);
}
.ed .prev .box::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  border-radius:9px 0 0 9px;background:var(--gold)}
.ed .prev .box p + p{margin-top:9px}
.ed .prev .box strong{color:var(--parch);font-weight:700}
.ed .prev .box em.none{font-style:normal;color:#655d51}

.mfoot{
  flex:none;display:flex;align-items:center;gap:9px;padding:13px 18px;
  border-top:1px solid var(--line);background:#211e1c;
}
.mfoot .warn{font-size:11px;color:var(--text-faint);max-width:44ch;line-height:1.5}
.mfoot .mact{margin-left:auto;display:flex;gap:8px}
.gbtn{
  display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:8px;
  font-size:12.5px;font-weight:700;border:1px solid var(--border);background:#272423;
  color:var(--text-dim);transition:.15s var(--ease);
}
.gbtn:hover{color:var(--parch);border-color:#4a423a;background:#2f2b28}
.gbtn--go{background:var(--gold);border-color:var(--gold);color:var(--ink);font-weight:800}
.gbtn--go:hover{background:var(--gold-hi);border-color:var(--gold-hi);color:var(--ink)}
.gbtn--del{color:#b8746d}
.gbtn--del:hover{color:#fff;background:var(--red);border-color:var(--red)}

/* Both panels are one object: same height, and neither pads itself
   out to get there. The profile card's height comes from the 150px
   photograph; the statistics rows divide that height evenly. */
.dtop{display:grid;grid-template-columns:392px 1fr;gap:16px;align-items:stretch;margin-bottom:16px}
.dtop > .panel{display:flex;flex-direction:column}
@media(max-width:980px){ .dtop{grid-template-columns:1fr} }

/* ══ profile ══════════════════════════════════════════════
   No bars, no tiles. A photograph, the identity beside it, and
   three figures on one line. Everything is one hairline apart —
   the card is as tall as its content and no taller. */
/* The list sets the height; the photograph column — name, picture,
   date — is centred against it. The name belongs to the picture, so
   it sits over the picture rather than over the whole card. */
.pf{padding:16px;flex:1;display:flex;align-items:center;gap:16px}
.pf .shot{flex:none;width:150px}

.pf .photo{
  width:150px;height:150px;border-radius:8px;overflow:hidden;
  border:1px solid var(--border);background:#1c1a18;
}
.pf .photo img{width:100%;height:100%;object-fit:cover;display:block}
.pf .shot .on{margin-top:8px;text-align:center;font-size:10px;font-weight:600;
  color:#655d51;font-variant-numeric:tabular-nums}

.pf .ids{
  flex:1;min-width:0;border:1px solid #322c26;border-radius:8px;overflow:hidden;background:#1e1c1a;
}
.pf .idl{display:flex;align-items:center;gap:8px;padding:5px 9px;min-height:26px}
.pf .idl + .idl{border-top:1px solid #2b2620}
.pf .idl span{flex:none;font-size:10.5px;font-weight:600;letter-spacing:.02em;color:var(--text-faint)}
.pf .idl b{
  margin-left:auto;text-align:right;font-weight:700;color:var(--parch);font-size:12.5px;
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;line-height:1.35;
}
.pf .idl b.gold{color:var(--gold-hi)}
.pf .idl b.sm{font-size:11px;font-weight:600;white-space:nowrap}

/* ══ statistics — compact rows, not tiles ═════════════════
   Label and figure on one line, hairline between. Six of these
   cost the height of two of the old tiles. */
.st{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;flex:1}
@media(max-width:620px){ .st{grid-template-columns:1fr} }
  .st > div{
  display:flex;align-items:center;gap:12px;padding:6px 16px;
  border-bottom:1px solid var(--line);
}
.st > div:nth-child(odd){border-right:1px solid var(--line)}
@media(max-width:620px){ .st > div:nth-child(odd){border-right:none} }
.st > div:nth-last-child(-n+2){border-bottom:none}
.st .i{font-size:14px;color:var(--amber)}
.st .k{font-size:11px;font-weight:600;color:var(--text-dim);white-space:nowrap}
.st .v{margin-left:auto;font-size:16px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.st .d{font-size:10.5px;font-weight:700;font-variant-numeric:tabular-nums;min-width:42px;text-align:right}
.up{color:#78a882}.down{color:#b8746d}.flat{color:#6f675c}

/* ══ chart (unchanged) ════════════════════════════════════ */
.seg{display:flex;gap:4px;padding:3px;border-radius:8px;border:1px solid var(--border);background:#1e1c1a}
.seg button{padding:5px 11px;border-radius:6px;font-size:11px;font-weight:700;color:var(--text-faint)}
.seg button:hover{color:var(--parch)}
.seg button.on{background:#33291d;color:var(--gold-hi)}
.legend{display:flex;align-items:center;gap:18px;padding:0 18px 4px;margin-top:16px}
.legend span{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:600;color:var(--text-dim)}
.legend i{width:22px;height:3px;border-radius:2px;display:block}
.plotwrap{position:relative;padding:4px 18px 14px}
.plot{display:block;width:100%;height:280px;overflow:visible}
.gridline{stroke:#2e2a26;stroke-width:1}
.axis{fill:#6f675c;font-size:11px;font-weight:600;font-family:inherit}
.axis--y{text-anchor:end}.axis--x{text-anchor:middle}
.cross{stroke:#5f574c;stroke-width:1;stroke-dasharray:3 3}
.endlab{font-size:11px;font-weight:800;font-family:inherit}
.tip{position:absolute;pointer-events:none;z-index:5;opacity:0;transform:translate(-50%,-118%);
  padding:10px 12px;border-radius:9px;border:1px solid #443c33;background:#2a2724;
  box-shadow:0 14px 32px rgba(0,0,0,.55);transition:opacity .12s var(--ease);min-width:150px}
.tip.on{opacity:1}
.tip .m{font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--text-faint)}
.tip .r{display:flex;align-items:center;gap:9px;margin-top:8px;font-size:12px;color:var(--text-dim)}
.tip .r i{width:9px;height:9px;border-radius:2px;flex:none}
.tip .r b{margin-left:auto;font-weight:700;color:var(--parch);font-variant-numeric:tabular-nums}
.tblview{display:none;padding:0 18px 18px}.tblview.on{display:block}
.plotwrap.off{display:none}

/* ── scrollbars ───────────────────────────────────────────
   The platform default is a light-grey slab that has nothing to
   do with this interface. Every scrolling area in the MDC gets
   the same thin, recessive one. */
.scroll{scrollbar-width:thin;scrollbar-color:#3d362f transparent}
.scroll::-webkit-scrollbar{width:10px;height:10px}
.scroll::-webkit-scrollbar-track{background:transparent}
.scroll::-webkit-scrollbar-thumb{
  background:#3d362f;border-radius:9px;border:3px solid transparent;background-clip:content-box;
}
.scroll::-webkit-scrollbar-thumb:hover{background:#544a3f;background-clip:content-box}
.scroll::-webkit-scrollbar-corner{background:transparent}

/* ══ APB ══════════════════════════════════════════════════ */
/* No fixed height anywhere. The LIST decides how tall the panel is —
   seven rows, whatever they measure on the day — and the reading pane
   is absolutely positioned inside its cell, so it fills that height
   exactly and scrolls internally without ever contributing to it.
   A magic pixel value was always going to be one font-metric away
   from putting a scrollbar on a list that fits. */
.apb{display:grid;grid-template-columns:312px 1fr;min-height:560px}
@media(max-width:920px){ .apb{grid-template-columns:1fr} }
.apb-side{border-right:1px solid var(--line);display:flex;flex-direction:column;min-width:0;min-height:0}
@media(max-width:920px){ .apb-side{border-right:none;border-bottom:1px solid var(--line)} }

/* the filter row — the only thing that makes a list of thousands usable */
/* The filters belong to the list, so they sit on top of it. Their
   band is exactly as tall as the reading pane's title bar plus its
   meta line — 89px — so the two columns start their content on the
   same line and the hairlines meet across the divide. */
.apb-filter{
  flex:none;height:89px;display:flex;flex-direction:column;gap:8px;
  padding:10px 13px;border-bottom:1px solid var(--line);
}
.apb-filter label{
  display:flex;align-items:center;gap:8px;height:34px;padding:0 10px;border-radius:7px;
  border:1px solid var(--border);background:#1e1c1a;
}
.apb-filter label:focus-within{border-color:rgba(212,146,58,.5)}
.apb-filter .i{font-size:13px;color:#6d6459}
.apb-filter input{flex:1;min-width:0;border:none;background:none;outline:none;
  font-size:12px;caret-color:var(--gold)}
.apb-filter input::placeholder{color:#6d6459}
/* Each chip is as wide as its own word. Forcing them to equal
   quarters meant the longest label — OUTSTANDING — set the size of
   the row and still had no room, while ALL sat in a box three times
   the width it needed. */
.fchips{display:flex;gap:4px;align-items:center;justify-content:center}
.fchip{
  flex:0 1 auto;height:26px;padding:0 8px;display:inline-flex;align-items:center;
  justify-content:center;white-space:nowrap;border-radius:6px;
  font-size:9.5px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;
  color:var(--text-faint);border:1px solid var(--border);background:#1e1c1a;
  transition:.15s var(--ease);
}
.fchip:hover{color:var(--parch);border-color:#4a423a}
.fchip.on{background:#33291d;border-color:rgba(212,146,58,.4);color:var(--gold-hi)}
.apb-rows{flex:1;min-height:0}
.apb-rows button{
  display:block;width:100%;padding:10px 14px;border-bottom:1px solid var(--line);position:relative;
  transition:background .15s var(--ease);
}
.apb-rows button:hover{background:rgba(255,255,255,.025)}
.apb-rows button.on{background:#2b2620}
.apb-rows button.on::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gold)}
.apb-rows .l1{display:flex;align-items:center;gap:8px}
.apb-rows .rid{font-size:9.5px;font-weight:800;letter-spacing:.06em;color:var(--amber);font-variant-numeric:tabular-nums}
.apb-rows .dt{margin-left:auto;font-size:10px;color:var(--text-faint)}
.apb-rows .rn{margin-top:4px;font-size:12.5px;font-weight:700;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.apb-rows .none{padding:26px 14px;text-align:center;font-size:11.5px;color:var(--text-faint)}

.pill{display:inline-flex;align-items:center;padding:2px 7px;border-radius:5px;
  font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  border:1px solid var(--border);background:#282524;color:var(--text-dim)}
.pill--wanted{color:#dd7b73;border-color:rgba(201,82,74,.4);background:#2e2220}
.pill--out{color:var(--gold-hi);border-color:rgba(212,146,58,.4);background:#302819}
.pill--closed{color:#78a882;border-color:rgba(87,178,106,.34);background:#232b23}

/* ── reading pane ─────────────────────────────────────────
   One compact meta line, not a grid of four tall cells. */
.apb-view{position:relative;min-width:0;min-height:0}
.vwrap{position:absolute;inset:0;display:flex;flex-direction:column;min-height:0;min-width:0}
@media(max-width:920px){
  .apb-view{position:static}
  .vwrap{position:static;height:auto}
}
.apb-bar{flex:none;height:53px;display:flex;align-items:center;gap:11px;
  padding:0 18px;border-bottom:1px solid var(--line);background:#282320;min-width:0}
.apb-bar .rid{font-size:11.5px;font-weight:800;letter-spacing:.05em;color:var(--gold);font-variant-numeric:tabular-nums}
.apb-bar .nm{font-size:15px;font-weight:800;letter-spacing:-.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.apb-bar .side{margin-left:auto;display:flex;align-items:center;gap:10px}
.apb-meta{flex:none;height:36px;display:flex;align-items:center;gap:8px;
  padding:0 18px;border-bottom:1px solid var(--line);font-size:11px;color:var(--text-faint);
  white-space:nowrap;overflow:hidden}
.apb-meta .ref{font-size:11px;font-weight:800;letter-spacing:.05em;color:var(--gold);
  font-variant-numeric:tabular-nums}
.apb-meta b{font-weight:700;color:var(--text-dim)}
.apb-meta i{font-style:normal;opacity:.4}

/* ── the bulletin body ────────────────────────────────────
   Authored elsewhere and dropped in as-is, so it is sandboxed:
   a capped type scale, and images that cannot break the column
   whatever size they were uploaded at. */
.apb-body{flex:1;min-height:0;overflow:auto;padding:18px;font-size:13px;line-height:1.7;color:var(--text-dim)}
.apb-body > *:first-child{margin-top:0}
.apb-body h1,.apb-body h2,.apb-body h3,.apb-body h4{
  font-size:11.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--gold-hi);margin:20px 0 9px}
.apb-body p{margin:0 0 11px}
.apb-body strong,.apb-body b{color:var(--parch);font-weight:700}
.apb-body ul,.apb-body ol{margin:0 0 11px 18px}
.apb-body li{margin-bottom:5px}
.apb-body hr{border:none;border-top:1px solid var(--line);margin:16px 0}
.apb-body a{color:var(--gold);font-weight:600}
.apb-body table{border-collapse:collapse;width:100%;margin:0 0 12px;font-size:12.5px}
.apb-body th,.apb-body td{border:1px solid var(--line);padding:6px 10px;text-align:left}
.apb-body th{background:#2a2724;color:var(--text-dim);font-weight:700;width:38%;
  font-size:9.5px;letter-spacing:.12em;text-transform:uppercase}
/* EVERY image, whatever it was uploaded at */
.apb-body img{max-width:100%;height:auto;display:block;border-radius:6px;border:1px solid var(--border)}
.apb-body figure{margin:0 0 14px}
.apb-body figcaption{margin-top:6px;font-size:10.5px;color:#655d51;line-height:1.45}
.apb-body figure.portrait{float:right;width:150px;margin:0 0 12px 18px}
.apb-body figure.wide img{width:100%;max-height:340px;object-fit:cover}
/* nothing wide starts beside the floated portrait — it clears it first,
   so a caption can never run underneath a table or a caution block */
.apb-body .caution,.apb-body table,.apb-body figure.wide,.apb-body hr{clear:right}
.apb-body .caution{
  margin:0 0 12px;padding:11px 14px;border-radius:8px;
  border:1px solid rgba(201,82,74,.4);border-left:3px solid var(--red);background:#2e2220;
}
.apb-body .caution p{margin:0;color:#e5cfcc}
.apb-body .caution strong{color:#f7e6e4}
@media(max-width:560px){ .apb-body figure.portrait{float:none;width:150px;margin:0 0 12px} }

/* attachments: whatever else was uploaded, as a strip of thumbnails */
.apb-att{flex:none;padding:14px 18px;border-top:1px solid var(--line)}
.apb-att .k{font-size:9.5px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--text-faint)}
.apb-att .row{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap}
.apb-att a{
  width:92px;height:66px;border-radius:6px;overflow:hidden;border:1px solid var(--border);
  background:#1c1a18;display:block;transition:border-color .15s var(--ease)
}
.apb-att a:hover{border-color:rgba(212,146,58,.5)}
.apb-att img{width:100%;height:100%;object-fit:cover;display:block}

/* ── open in full ─────────────────────────────────────────
   A dialog over the dashboard, not a page. This is for reading
   ONE bulletin at length; browsing them all is the APB database,
   which is its own page. */
.ovl{
  position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:28px;
  background:rgba(10,9,8,.84);
  opacity:0;visibility:hidden;transition:opacity .18s var(--ease),visibility .18s;
}
.ovl.on{opacity:1;visibility:visible}
/* A dialog is its own surface, so it is pinned rather than following
   --panel — the message-of-the-day editor sits inside .dash and the
   bulletin viewer does not, and the two must not be different colours. */
.modal{
  width:min(880px,100%);max-height:min(86vh,880px);display:flex;flex-direction:column;
  background:#262220;border:1px solid #453d34;border-radius:14px;overflow:hidden;
  box-shadow:0 34px 90px rgba(0,0,0,.7);
  transform:translateY(10px) scale(.99);transition:transform .18s var(--ease);
}
.ovl.on .modal{transform:none}
.modal .mh{
  flex:none;display:flex;align-items:center;gap:12px;padding:15px 18px;
  border-bottom:1px solid var(--line);background:#282320;
}
.modal .mh .nm{font-size:17px;font-weight:800;letter-spacing:-.025em;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.modal .mh .side{margin-left:auto;display:flex;align-items:center;gap:10px}
.modal .x{
  width:32px;height:32px;display:grid;place-items:center;border-radius:8px;font-size:14px;
  color:var(--text-dim);border:1px solid var(--border);background:#272423;transition:.15s var(--ease);
}
.modal .x:hover{color:var(--red);border-color:rgba(201,82,74,.45);background:#2c2321}
.modal .apb-meta{height:auto;padding:10px 18px;white-space:normal;flex-wrap:wrap}
.modal .apb-body{padding:22px 24px;transform:translateZ(0)}
.modal .apb-body figure.wide img{max-height:420px}

/* ── attachment viewer ────────────────────────────────────
   Above the bulletin dialog, because it can be opened from inside
   it. Photographs are uploaded at every size — 150px faces and
   4000px scene shots — so the frame is the viewport and the image
   is contained inside it, never scaled up past its own pixels. */
.lb{
  position:fixed;inset:0;z-index:90;display:flex;flex-direction:column;
  background:rgba(8,7,6,.94);
  opacity:0;visibility:hidden;transition:opacity .16s var(--ease),visibility .16s;
}
.lb.on{opacity:1;visibility:visible}
.lb-bar{
  flex:none;display:flex;align-items:center;gap:12px;padding:14px 18px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.lb-bar .n{font-size:11.5px;font-weight:700;letter-spacing:.05em;color:var(--text-dim);
  font-variant-numeric:tabular-nums}
.lb-bar .c{font-size:11.5px;color:var(--text-faint)}
.lb-bar .side{margin-left:auto;display:flex;align-items:center;gap:8px}
.lb-btn{
  width:34px;height:34px;display:grid;place-items:center;border-radius:8px;font-size:14px;
  color:var(--text-dim);border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);
  transition:.15s var(--ease);
}
.lb-btn:hover:not(:disabled){color:var(--parch);background:rgba(255,255,255,.1)}
.lb-btn:disabled{opacity:.3;cursor:default}
.lb-btn--x:hover{color:#e88b83;border-color:rgba(201,82,74,.5);background:rgba(201,82,74,.14)}
.lb-stage{flex:1;min-height:0;display:grid;place-items:center;padding:26px;position:relative}
.lb-stage img{
  max-width:100%;max-height:100%;width:auto;height:auto;display:block;
  border-radius:8px;border:1px solid rgba(255,255,255,.1);
  box-shadow:0 30px 80px rgba(0,0,0,.6);
}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;
  display:grid;place-items:center;border-radius:50%;font-size:16px;color:var(--parch);
  border:1px solid rgba(255,255,255,.14);background:rgba(20,18,16,.8);transition:.15s var(--ease)}
.lb-nav:hover{background:rgba(40,36,32,.95);border-color:rgba(212,146,58,.5)}
.lb-nav--p{left:18px}.lb-nav--n{right:18px}
.lb-nav[hidden]{display:none}
.apb-att a{cursor:zoom-in}

/* ══ tables ═══════════════════════════════════════════════ */
.tblwrap{overflow-x:auto}
table.data{width:100%;border-collapse:collapse;font-size:12.5px}
table.data thead th{text-align:left;padding:10px 18px;font-size:9.5px;font-weight:800;
  letter-spacing:.15em;text-transform:uppercase;color:var(--text-faint);
  border-bottom:1px solid var(--line);white-space:nowrap}
table.data tbody td{padding:11px 18px;border-bottom:1px solid var(--line);color:var(--text-dim);white-space:nowrap}
table.data tbody tr:last-child td{border-bottom:none}
table.data tbody tr:hover{background:rgba(255,255,255,.022)}
table.data td.ref{color:var(--gold);font-weight:700;font-variant-numeric:tabular-nums}
table.data td.subj{color:var(--parch);font-weight:600}
table.data td.num{font-variant-numeric:tabular-nums}

/* ══ pagination ═══════════════════════════════════════════
   No row of numbered buttons: it grows with the data and looks
   absurd past a handful of pages. One slim control — two arrows
   either side of the page it is on — the same width whether
   there are 3 pages or 300. */
.pager{display:flex;align-items:center;gap:12px;padding:11px 18px;border-top:1px solid var(--line)}
.pager .of{font-size:11px;color:var(--text-faint);font-variant-numeric:tabular-nums}
.stepper{
  margin-left:auto;display:flex;align-items:center;
  border:1px solid var(--border);border-radius:8px;background:#1e1c1a;overflow:hidden;
}
.stepper button{
  width:30px;height:28px;display:grid;place-items:center;font-size:12px;color:var(--text-dim);
  transition:.15s var(--ease);
}
.stepper button:hover:not(:disabled){background:#2f2922;color:var(--gold-hi)}
.stepper button:disabled{opacity:.3;cursor:default}
.stepper .cur{
  padding:0 13px;height:28px;display:flex;align-items:center;gap:5px;
  border-left:1px solid var(--border);border-right:1px solid var(--border);
  font-size:11.5px;font-weight:700;color:var(--parch);font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.stepper .cur em{font-style:normal;color:var(--text-faint);font-weight:600}

/* Swatches and the few one-off tweaks that used to be style="" —
   the CSP allows no inline style at all, so an attribute is dropped
   silently and the mark simply never appears. */
.dash .sw-act{background:var(--s-act)}
.dash .sw-duty{background:var(--s-duty)}
.dash .sw-off{background:#4d453c}
.dash .hint--r{margin-left:auto}
.dash .ed{overflow:auto}
.dash .tip .r--off{opacity:.7}
.dash .apb-rows .rp{margin-top:6px}
/* A faction name is one long string here, not two hand-broken lines. */
.dash .pf .idl b.sm{white-space:normal}
/* mdc.css's button reset does not set text-align, so a <button> falls
   back to centre — which is wrong for every list row in here. */
.dash button{text-align:left}

/* Nothing behind a dialog scrolls. */
body.is-locked{overflow:hidden}

/* A dialog belongs to the page, not to the window. The sidebar is a
   fixed 298px that is never covered, so centring across the whole
   viewport pushes every dialog left of where you are looking. Below
   960px the sidebar is off-canvas and normal centring is right. */
@media (min-width:961px){ .ovl{padding-left:326px} }

/* Panel headers sat off-centre for two separate reasons. An inline <svg>
   reserves room for a text descender beneath it, so the flex row centred
   the icon plus that phantom gap; block display removes it. And the
   global h2 from the sign-in stylesheet carries margin-top:9px, which
   pushed every heading down by 4px. */
.dash .panel > header .i,
.apbpage .panel > header .i{display:block}
.dash .panel > header h2,
.apbpage .panel > header h2{margin:0}


/* ═══════════════════════════════════════════════════════════════════
   THE APB DATABASE

   Every selector is prefixed .apbpage, so nothing here reaches another
   page. The reverse is not true: anything unprefixed in this file still
   reaches in, and a prefixed rule cannot undo a property the page never
   declares — specificity is no defence against a leak. So the 48 class
   names the design shared with the rest of this stylesheet were given a
   prefix of their own, ab-, rather than fought one at a time. The eight
   that were left alone — .i, .sprite, .inner, .scroll, .panel, .hint,
   .link and body.is-locked — are the base layer the design defines
   identically to this file, and is meant to share.
   ═══════════════════════════════════════════════════════════════════ */
/* ── page head ────────────────────────────────────────── */
.apbpage .ab-dh{display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:14px}.apbpage .ab-actions{display:flex;justify-content:flex-end;align-items:center;align-self:flex-end;gap:9px;margin:0 0 2px}.apbpage .ab-dh h1{font-size:26px;font-weight:800;letter-spacing:-.03em}.apbpage .ab-dh p{margin-top:8px;font-size:13px;color:var(--text-faint);line-height:1.6;max-width:78ch}.apbpage .ab-dh .ab-side{margin-left:auto;display:flex;align-items:center;gap:9px}.apbpage .ab-gbtn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:8px;
  font-size:12.5px;font-weight:700;border:1px solid var(--border);background:#272423;
  color:var(--text-dim);transition:.15s var(--ease);white-space:nowrap}.apbpage .ab-gbtn .i{font-size:14px}.apbpage .ab-gbtn:hover{color:var(--parch);border-color:#4a423a;background:#2f2b28}.apbpage .ab-gbtn--go{background:var(--gold);border-color:var(--gold);color:var(--ink);font-weight:800}.apbpage .ab-gbtn--go:hover{background:var(--gold-hi);border-color:var(--gold-hi);color:var(--ink)}.apbpage .ab-gbtn--del{color:#b8746d}.apbpage .ab-gbtn--del:hover{color:#fff;background:var(--red);border-color:var(--red)}.apbpage .ab-gbtn:disabled{opacity:.4;pointer-events:none}

/* ── toolbar ──────────────────────────────────────────── */
.apbpage .ab-bar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:11px 14px;
  border-bottom:1px solid var(--line)}.apbpage .ab-find{display:flex;align-items:center;gap:8px;height:34px;padding:0 11px;border-radius:8px;
  border:1px solid var(--border);background:#1c1a18;
  /* exactly the width of the column it filters — 340px less the bar's padding */
  flex:0 0 326px;width:326px}.apbpage .ab-find:focus-within{border-color:rgba(212,146,58,.5)}.apbpage .ab-find .i{font-size:13px;color:#6d6459}.apbpage .ab-find input{flex:1;min-width:0;border:none;background:none;outline:none;font-size:12.5px;color:var(--parch);caret-color:var(--gold)}.apbpage .ab-find input::placeholder{color:#6d6459}.apbpage .chips{display:flex;gap:5px}.apbpage .chip{height:34px;padding:0 11px;display:inline-flex;align-items:center;gap:7px;border-radius:8px;
  font-size:10.5px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;white-space:nowrap;
  color:var(--text-faint);border:1px solid var(--border);background:#1e1c1a;transition:.15s var(--ease)}.apbpage .chip b{font-weight:800;font-size:10px;padding:1px 5px;border-radius:4px;background:rgba(255,255,255,.07);color:var(--text-faint)}.apbpage .chip:hover{color:var(--parch);border-color:#4a423a}.apbpage .chip.ab-on{background:#33291d;border-color:rgba(212,146,58,.42);color:var(--gold-hi)}.apbpage .chip.ab-on b{background:var(--gold);color:var(--ink)}.apbpage .ab-bar .rt{margin-left:auto;display:flex;align-items:center;gap:9px}
/* The native select renders its own arrow in the platform's colours,
   which is why it looked pasted on. Appearance stripped, our own
   chevron drawn in. */
.apbpage .sel{height:34px;padding:0 30px 0 11px;border-radius:8px;border:1px solid var(--border);
  background:#1e1c1a;font-size:11.5px;font-weight:600;color:var(--text-dim);outline:none;
  -webkit-appearance:none;appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,#8d8478 50%),
                   linear-gradient(135deg,#8d8478 50%,transparent 50%);
  background-position:calc(100% - 15px) 15px, calc(100% - 10px) 15px;
  background-size:5px 5px, 5px 5px;background-repeat:no-repeat;
  transition:.15s var(--ease)}.apbpage .sel:hover{border-color:#4a423a;color:var(--parch)}.apbpage .sel:focus{border-color:rgba(212,146,58,.5)}.apbpage .sel option{background:#1e1c1a;color:var(--parch)}

/* ── split ────────────────────────────────────────────── */
.apbpage .split{display:grid;grid-template-columns:340px 1fr;min-height:640px}@media(max-width:940px){.apbpage .split{grid-template-columns:1fr} }.apbpage .side-col{border-right:1px solid var(--line);display:flex;flex-direction:column;min-width:0}.apbpage .rows{flex:1;min-height:0}.apbpage .rows button{display:block;width:100%;padding:12px 15px;border-bottom:1px solid var(--line);
  position:relative;transition:background .15s var(--ease)}.apbpage .rows button:hover{background:rgba(255,255,255,.025)}.apbpage .rows button.ab-on{background:#2b2620}.apbpage .rows button.ab-on::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gold)}.apbpage .rows .ab-l1{display:flex;align-items:center;gap:8px}.apbpage .rows .ab-rid{font-size:9.5px;font-weight:800;letter-spacing:.06em;color:var(--amber);font-variant-numeric:tabular-nums}.apbpage .rows .ab-dt{margin-left:auto;font-size:10px;color:var(--text-faint)}.apbpage .rows .ab-rn{margin-top:4px;font-size:13px;font-weight:700;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.apbpage .rows .l3{margin-top:6px;display:flex;align-items:center;gap:8px}.apbpage .rows .by{font-size:10.5px;color:var(--text-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.apbpage .rows .ab-none{padding:34px 18px;text-align:center}.apbpage .rows .ab-none b{display:block;font-size:13px;color:var(--text-dim);margin-bottom:5px}.apbpage .rows .ab-none span{font-size:11.5px;color:var(--text-faint);line-height:1.55}.apbpage .ab-pill{display:inline-flex;align-items:center;padding:2px 7px;border-radius:5px;
  font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  border:1px solid var(--border);background:#282524;color:var(--text-dim)}.apbpage .ab-pill--wanted{color:#dd7b73;border-color:rgba(201,82,74,.4);background:#2e2220}.apbpage .ab-pill--out{color:var(--gold-hi);border-color:rgba(212,146,58,.4);background:#302819}.apbpage .ab-pill--closed{color:#78a882;border-color:rgba(87,178,106,.34);background:#232b23}.apbpage .ab-pager{display:flex;align-items:center;gap:12px;padding:11px 15px;border-top:1px solid var(--line)}.apbpage .ab-pager .ab-of{font-size:11px;color:var(--text-faint);font-variant-numeric:tabular-nums}.apbpage .ab-stepper{margin-left:auto;display:flex;align-items:center;border:1px solid var(--border);
  border-radius:8px;background:#1e1c1a;overflow:hidden}.apbpage .ab-stepper button{width:30px;height:28px;display:grid;place-items:center;font-size:12px;
  color:var(--text-dim);transition:.15s var(--ease)}.apbpage .ab-stepper button:hover:not(:disabled){background:#2f2922;color:var(--gold-hi)}.apbpage .ab-stepper button:disabled{opacity:.3;cursor:default}.apbpage .ab-stepper .ab-cur{padding:0 12px;height:28px;display:flex;align-items:center;gap:5px;
  border-left:1px solid var(--border);border-right:1px solid var(--border);
  font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}.apbpage .ab-stepper .ab-cur em{font-style:normal;color:var(--text-faint);font-weight:600}

/* ── reader ───────────────────────────────────────────── */
.apbpage .view{position:relative;min-width:0;min-height:0}.apbpage .ab-vwrap{position:absolute;inset:0;display:flex;flex-direction:column;min-height:0;min-width:0}@media(max-width:940px){.apbpage .view{position:static}.apbpage .ab-vwrap{position:static;height:auto} }.apbpage .vbar{flex:none;min-height:53px;display:flex;align-items:center;gap:11px;padding:8px 18px;
  border-bottom:1px solid var(--line);background:#282320}.apbpage .vbar .ab-nm{font-size:15px;font-weight:800;letter-spacing:-.02em;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.apbpage .vbar .ab-side{margin-left:auto;display:flex;align-items:center;gap:8px}.apbpage .vmeta{flex:none;display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:9px 18px;
  border-bottom:1px solid var(--line);font-size:11px;color:var(--text-faint)}.apbpage .vmeta b{font-weight:700;color:var(--text-dim)}.apbpage .vmeta i{font-style:normal;opacity:.4}.apbpage .vmeta .ab-ref{font-size:11px;font-weight:800;letter-spacing:.05em;color:var(--gold);font-variant-numeric:tabular-nums}.apbpage .sbtn{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 11px;border-radius:7px;
  font-size:11.5px;font-weight:700;color:var(--text-dim);border:1px solid var(--border);
  background:#272423;transition:.15s var(--ease);white-space:nowrap}.apbpage .sbtn .i{font-size:12px}.apbpage .sbtn:hover{color:var(--parch);border-color:#4a423a;background:#2f2b28}.apbpage .sbtn--close:hover{color:#78a882;border-color:rgba(87,178,106,.45);background:#242b23}

/* ── the bulletin itself ──────────────────────────────── */
.apbpage .doc{flex:1;min-height:0;overflow:auto;padding:20px 22px;font-size:13px;line-height:1.7;color:var(--text-dim)}.apbpage .doc > *:first-child{margin-top:0}
/* The line at the very top that says what this bulletin IS. */
.apbpage .doc .headline{margin:0 0 14px;padding-bottom:11px;border-bottom:1px solid var(--line);
  font-size:13px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--gold-hi)}.apbpage .doc h3{font-size:11.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--gold-hi);margin:20px 0 9px}.apbpage .doc p{margin:0 0 11px}.apbpage .doc strong{color:var(--parch);font-weight:700}.apbpage .doc ul{margin:0 0 12px;padding:0;list-style:none}.apbpage .doc ul li{position:relative;padding-left:18px;margin-bottom:6px}.apbpage .doc ul li::before{content:"";position:absolute;left:4px;top:9px;width:5px;height:5px;
  border-radius:1px;background:var(--amber);transform:rotate(45deg)}.apbpage .doc table{border-collapse:collapse;width:100%;margin:0 0 12px;font-size:12.5px;clear:right}
/* --line is a hairline for panels sitting on the page surface. Inside a
   table on a lighter panel it is within a shade or two of the fill and
   the grid disappears, so the cell borders get their own value. */
.apbpage .doc th,.apbpage .doc td{border:1px solid #423a31;padding:7px 11px;text-align:left}.apbpage .doc th{background:#2b2724;color:var(--text-dim);font-weight:700;width:36%;
  font-size:9.5px;letter-spacing:.12em;text-transform:uppercase}.apbpage .doc img{max-width:100%;height:auto;display:block;border-radius:6px;border:1px solid var(--border)}.apbpage .doc figure{margin:0 0 14px}.apbpage .doc figcaption{margin-top:6px;font-size:10.5px;color:#655d51;line-height:1.45}.apbpage .doc figure.ab-portrait{float:right;width:150px;margin:0 0 12px 18px;text-align:center}.apbpage .doc figure.ab-portrait img{width:150px;height:150px;object-fit:cover}.apbpage .doc figure.ab-wide img{width:100%;max-height:340px;object-fit:cover}.apbpage .doc .callout{margin:0 0 12px;padding:11px 14px;border-radius:8px;clear:right;
  border:1px solid var(--border);border-left:3px solid var(--text-faint);background:#272423}.apbpage .doc .callout p{margin:0}.apbpage .doc .callout--danger{border-color:rgba(201,82,74,.4);border-left-color:var(--red);background:#2e2220}.apbpage .doc .callout--danger p{color:#e5cfcc}.apbpage .doc .callout--danger strong{color:#f7e6e4}.apbpage .doc .callout--caution{border-color:rgba(212,146,58,.4);border-left-color:var(--amber);background:#2e2619}.apbpage .doc .callout--caution p{color:#e3d6bd}.apbpage .doc .callout--caution strong{color:var(--gold-hi)}.apbpage .doc .callout--do{border-color:rgba(87,178,106,.34);border-left-color:var(--green);background:#232b23}.apbpage .doc .callout--do p{color:#cfdfd0}.apbpage .doc .callout--do strong{color:#dff0e0}
/* "If located" is an instruction, not a warning. It gets a panel of its
   own with a labelled strip, so it never reads as another coloured box
   in a page that already has three. */
.apbpage .doc .ab-act{margin:16px 0 14px;border-radius:9px;overflow:hidden;clear:right;
  border:1px solid rgba(212,146,58,.34);background:#241f1a}.apbpage .doc .ab-act .hd{display:flex;align-items:center;gap:9px;padding:8px 13px;
  background:linear-gradient(90deg,rgba(212,146,58,.18),rgba(212,146,58,.05));
  border-bottom:1px solid rgba(212,146,58,.24)}.apbpage .doc .ab-act .hd .i{font-size:14px;color:var(--gold)}.apbpage .doc .ab-act .hd b{font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-hi)}.apbpage .doc .ab-act .bd{padding:12px 14px}.apbpage .doc .ab-act .bd p{margin:0;color:#e6ddcb}.apbpage .doc .ab-act .bd strong{color:#fff4e2}.apbpage .doc .closed-note{margin:0 0 16px;padding:12px 14px;border-radius:8px;
  border:1px solid rgba(87,178,106,.3);background:#212822}.apbpage .doc .closed-note b{color:#8fbe98;font-weight:800;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  display:block;margin-bottom:5px}.apbpage .gal{padding:14px 18px;border-top:1px solid var(--line);flex:none}.apbpage .gal .ab-k{font-size:9.5px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--text-faint)}.apbpage .gal .ab-row{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap}.apbpage .gal a{width:92px;height:66px;border-radius:6px;overflow:hidden;border:1px solid var(--border);
  background:#1c1a18;display:block;cursor:zoom-in;transition:border-color .15s var(--ease)}.apbpage .gal a:hover{border-color:rgba(212,146,58,.5)}.apbpage .gal img{width:100%;height:100%;object-fit:cover;display:block}

/* ══════════════════════════════════════════════════════════
   THE COMPOSER
   Bulletins are built from a fixed set of blocks, not written as
   free HTML. Two reasons: a bulletin nobody can break is worth
   more than one anybody can style, and a fixed shape means the
   database can be searched on it later.
   ══════════════════════════════════════════════════════════ */
.apbpage .ab-ovl{position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:24px;
  background:rgba(10,9,8,.84);opacity:0;visibility:hidden;
  transition:opacity .18s var(--ease),visibility .18s}.apbpage .ab-ovl.ab-on{opacity:1;visibility:visible}.apbpage .ab-modal{width:min(1120px,100%);max-height:min(90vh,940px);display:flex;flex-direction:column;
  background:var(--panel);border:1px solid #453d34;border-radius:14px;overflow:hidden;
  box-shadow:0 34px 90px rgba(0,0,0,.7);transform:translateY(10px) scale(.99);
  transition:transform .18s var(--ease)}.apbpage .ab-modal--sm{width:min(520px,100%)}.apbpage .ab-ovl.ab-on .ab-modal{transform:none}.apbpage .ab-mh{flex:none;display:flex;align-items:center;gap:12px;padding:14px 18px;
  border-bottom:1px solid var(--line);background:#282320}.apbpage .ab-mh .t{font-size:16px;font-weight:800;letter-spacing:-.02em}.apbpage .ab-mh .ab-sub{font-size:11.5px;color:var(--text-faint)}.apbpage .ab-mh .ab-side{margin-left:auto;display:flex;align-items:center;gap:9px}.apbpage .mx{width:32px;height:32px;display:grid;place-items:center;border-radius:8px;font-size:14px;
  color:var(--text-dim);border:1px solid var(--border);background:#272423;transition:.15s var(--ease)}.apbpage .mx:hover{color:var(--red);border-color:rgba(201,82,74,.45);background:#2c2321}.apbpage .ab-mfoot{flex:none;display:flex;align-items:center;gap:10px;padding:13px 18px;
  border-top:1px solid var(--line);background:#211e1c}.apbpage .ab-mfoot .ab-note{font-size:11px;color:var(--text-faint);line-height:1.5;max-width:52ch}.apbpage .ab-mfoot .ab-mact{margin-left:auto;display:flex;gap:8px}

/* ── step 1 · pick a template ─────────────────────────── */
.apbpage .tpl{padding:20px 22px;overflow:auto}.apbpage .tpl .lead{font-size:12.5px;color:var(--text-faint);line-height:1.6;margin-bottom:16px;max-width:74ch}.apbpage .tplgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}@media(max-width:760px){.apbpage .tplgrid{grid-template-columns:1fr 1fr} }.apbpage .tplcard{display:flex;flex-direction:column;gap:8px;padding:15px;border-radius:11px;
  border:1px solid var(--border);background:#1e1c1a;transition:.15s var(--ease)}.apbpage .tplcard:hover{border-color:rgba(212,146,58,.5);background:#272220;transform:translateY(-1px)}.apbpage .tplcard .i{font-size:19px;color:var(--amber)}.apbpage .tplcard b{font-size:13.5px;font-weight:700;letter-spacing:-.01em;color:var(--parch)}.apbpage .tplcard span{font-size:11.5px;line-height:1.55;color:var(--text-faint)}.apbpage .tplcard em{margin-top:2px;font-style:normal;font-size:10px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:#655d51}

/* ── step 2 · the editor ──────────────────────────────── */
.apbpage .comp{flex:1;min-height:0;display:grid;grid-template-columns:1fr 440px}@media(max-width:1000px){.apbpage .comp{grid-template-columns:1fr}.apbpage .comp .ab-prev{display:none} }.apbpage .form{overflow:auto;padding:18px 20px;border-right:1px solid var(--line)}.apbpage .ab-prev{overflow:auto;background:#1d1b19}.apbpage .ab-prev .ab-ph{position:sticky;top:0;z-index:2;padding:10px 16px;border-bottom:1px solid var(--line);
  background:#1d1b19;font-size:9.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-faint)}.apbpage .fset{margin-bottom:16px}.apbpage .flab{display:flex;align-items:baseline;gap:9px;margin-bottom:7px}.apbpage .flab b{font-size:10px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--text-faint)}.apbpage .flab span{margin-left:auto;font-size:10.5px;color:#655d51}.apbpage .fgrid{display:grid;gap:9px}.apbpage .fgrid--2{grid-template-columns:1fr 1fr}.apbpage .fgrid--3{grid-template-columns:1fr 1fr 1fr}@media(max-width:620px){.apbpage .fgrid--2,.apbpage .fgrid--3{grid-template-columns:1fr} }.apbpage .fld{display:flex;flex-direction:column;gap:5px;min-width:0}.apbpage .fld > span{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#6f675c}.apbpage .inp,.apbpage .ta,.apbpage select.inp{width:100%;padding:9px 11px;border-radius:8px;border:1px solid var(--border);
  background:#1c1a18;color:var(--parch);font-size:12.5px;outline:none;caret-color:var(--gold)}.apbpage .ta{min-height:78px;resize:vertical;line-height:1.65}.apbpage .inp::placeholder,.apbpage .ta::placeholder{color:#655d51}.apbpage .inp:focus,.apbpage .ta:focus{border-color:rgba(212,146,58,.5)}

/* status as a pair of choices, not a dropdown — there are two */
/* Not an input: it is what the bulletin will say, shown as it will look. */
.apbpage .autohead{padding:10px 12px;border-radius:8px;border:1px solid var(--border);background:#1c1a18;
  font-size:12.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-hi);
  min-height:38px;display:flex;align-items:center}.apbpage .seg2{display:flex;gap:7px}.apbpage .seg2 button{flex:1;height:36px;border-radius:8px;border:1px solid var(--border);background:#1c1a18;
  font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--text-faint);
  display:grid;place-items:center;transition:.15s var(--ease)}.apbpage .seg2 button:hover{color:var(--parch);border-color:#4a423a}.apbpage .seg2 button.ab-on[data-v="wanted"]{background:#33221f;border-color:rgba(201,82,74,.5);color:#dd7b73}.apbpage .seg2 button.ab-on[data-v="out"]{background:#33291d;border-color:rgba(212,146,58,.5);color:var(--gold-hi)}

/* ── blocks ───────────────────────────────────────────── */
.apbpage .blk{border:1px solid var(--border);border-radius:10px;background:#1e1c1a;margin-bottom:10px;overflow:hidden}.apbpage .blk > header{display:flex;align-items:center;gap:9px;padding:9px 12px;border-bottom:1px solid var(--line);
  background:#232120}.apbpage .blk > header .i{font-size:13px;color:var(--amber)}.apbpage .blk > header b{font-size:10.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--text-dim)}.apbpage .blk > header b em{font-style:normal;color:var(--gold-hi)}.apbpage .blk--pinned > header .ab-tools .tbtn:not(.tbtn--x){opacity:.25;pointer-events:none}.apbpage .pinned-note{margin-top:8px;font-size:10.5px;color:#655d51;line-height:1.5}.apbpage .blk > header .ab-tools{margin-left:auto;display:flex;gap:4px}.apbpage .tbtn{width:26px;height:26px;display:grid;place-items:center;border-radius:6px;font-size:11px;
  color:#6f675c;border:1px solid transparent;transition:.15s var(--ease)}.apbpage .tbtn:hover{color:var(--parch);background:rgba(255,255,255,.06)}.apbpage .tbtn--x:hover{color:#b8746d;background:rgba(201,82,74,.12)}.apbpage .tbtn:disabled{opacity:.25;pointer-events:none}.apbpage .blk .ab-body{padding:12px}

/* repeating rows (bullets, spec rows) */
.apbpage .rrow{display:flex;gap:7px;margin-bottom:7px}.apbpage .rrow .inp{flex:1}.apbpage .rrow .ab-k{flex:0 0 34%}.apbpage .addrow{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:7px;
  font-size:11px;font-weight:700;color:var(--text-faint);border:1px dashed var(--border);
  background:transparent;transition:.15s var(--ease)}.apbpage .addrow:hover{color:var(--gold-hi);border-color:rgba(212,146,58,.5);background:rgba(212,146,58,.06)}

/* ── linking to a person ──────────────────────────────── */
.apbpage .linkbox{padding:12px;border-radius:9px;border:1px dashed var(--border);background:#1c1a18}.apbpage .lsearch{display:flex;align-items:center;gap:9px;height:36px;padding:0 11px;border-radius:8px;
  border:1px solid var(--border);background:#232120}.apbpage .lsearch:focus-within{border-color:rgba(212,146,58,.55)}.apbpage .lsearch .i{font-size:13px;color:#6d6459}.apbpage .lsearch input{flex:1;min-width:0;border:none;background:none;outline:none;font-size:12.5px;
  caret-color:var(--gold);color:var(--parch)}.apbpage .lsearch input::placeholder{color:#655d51}.apbpage .lres{display:flex;flex-direction:column;gap:5px}.apbpage .lres:not(:empty){margin-top:8px}.apbpage .lrow{display:flex;align-items:center;gap:10px;padding:8px;border-radius:8px;
  border:1px solid var(--border);background:#232120;transition:.15s var(--ease)}.apbpage .lrow:hover{border-color:rgba(212,146,58,.5);background:#2b2620}.apbpage .lrow img{width:34px;height:34px;border-radius:6px;object-fit:cover;flex:none;border:1px solid var(--border)}.apbpage .lrow .ab-m{flex:1;min-width:0}.apbpage .lrow .ab-m b{display:block;font-size:12.5px;font-weight:700;color:var(--parch)}.apbpage .lrow .ab-m span{display:block;margin-top:2px;font-size:10.5px;color:var(--text-faint)}.apbpage .lrow .ab-go{flex:none;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gold);padding:4px 9px;border-radius:6px;border:1px solid rgba(212,146,58,.35)}.apbpage .lrow:hover .ab-go{background:var(--gold);color:var(--ink);border-color:var(--gold)}.apbpage .lnone{margin-top:8px;padding:10px 11px;border-radius:8px;border:1px solid var(--border);
  background:#232120;font-size:11px;line-height:1.55;color:var(--text-faint)}.apbpage .lnote{margin-top:9px;font-size:10.5px;line-height:1.55;color:#655d51}.apbpage .linked{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:9px;
  border:1px solid rgba(87,178,106,.34);background:#212822}.apbpage .linked > .i{font-size:17px;color:#78a882}.apbpage .linked .ab-m{flex:1;min-width:0}.apbpage .linked .ab-m b{display:block;font-size:13px;font-weight:700;color:var(--parch)}.apbpage .linked .ab-m span{display:block;margin-top:2px;font-size:10.5px;color:#8fa892}.apbpage .lockhint{margin-top:7px;font-size:10.5px;line-height:1.55;color:#655d51}.apbpage .seg2 button:disabled{opacity:.35;cursor:not-allowed}.apbpage .lrow .plate{flex:none;padding:6px 9px;border-radius:5px;border:1px solid var(--border);
  background:#1a1816;font-size:11px;font-weight:800;letter-spacing:.08em;color:var(--gold-hi);
  font-variant-numeric:tabular-nums}.apbpage .offer{display:flex;align-items:center;gap:10px;margin-top:9px;padding:10px 12px;border-radius:9px;
  border:1px solid rgba(212,146,58,.34);background:#241f1a;font-size:11.5px;line-height:1.55;
  color:var(--text-dim)}.apbpage .offer .i{font-size:15px;color:var(--gold);flex:none}.apbpage .offer span{flex:1;min-width:0}.apbpage .offer b{color:var(--parch);font-weight:700}

/* the 150×150 portrait slot */
.apbpage .pslot{display:flex;gap:14px}.apbpage .pslot .ab-box{flex:none;width:150px}.apbpage .pslot .drop{width:150px;height:150px;border-radius:8px;border:1px dashed var(--border);
  background:#1c1a18;display:grid;place-items:center;overflow:hidden;position:relative;
  transition:.15s var(--ease);cursor:pointer}.apbpage .pslot .drop:hover,.apbpage .pslot .drop.over{border-color:rgba(212,146,58,.55);background:#221f1c}.apbpage .pslot .drop img{width:100%;height:100%;object-fit:cover;display:block}.apbpage .pslot .drop .ph2{text-align:center;padding:0 10px}.apbpage .pslot .drop .ph2 .i{font-size:22px;color:#4d453c}.apbpage .pslot .drop .ph2 span{display:block;margin-top:7px;font-size:9.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:#4d453c;line-height:1.5}.apbpage .pslot .ab-box .ab-note{margin-top:7px;font-size:10px;color:#655d51;text-align:center;line-height:1.45}.apbpage .pslot .rest{flex:1;min-width:0;display:flex;flex-direction:column;gap:9px}

/* attachments */
.apbpage .drop2{padding:16px;border-radius:9px;border:1px dashed var(--border);background:#1c1a18;
  text-align:center;transition:.15s var(--ease);cursor:pointer}.apbpage .drop2:hover,.apbpage .drop2.over{border-color:rgba(212,146,58,.55);background:#221f1c}.apbpage .drop2 .i{font-size:20px;color:#5c544a}.apbpage .drop2 b{display:block;margin-top:8px;font-size:12px;font-weight:700;color:var(--text-dim)}.apbpage .drop2 span{display:block;margin-top:4px;font-size:11px;color:var(--text-faint)}.apbpage .urlrow{display:flex;gap:7px;margin-top:9px}.apbpage .urlrow .inp{flex:1}.apbpage .mirror{margin-top:9px;padding:10px 12px;border-radius:8px;border:1px solid rgba(87,178,106,.28);
  background:#212822;font-size:11px;line-height:1.6;color:#a9c3ad}.apbpage .mirror b{color:#cfe3d1;font-weight:700}.apbpage .urlerr{margin-top:8px;padding:9px 11px;border-radius:8px;font-size:11px;line-height:1.55;
  border:1px solid rgba(201,82,74,.4);background:#2e2220;color:#e5cfcc}.apbpage .urlerr b{color:#f7e6e4;font-weight:700}.apbpage .atts{margin-top:11px;display:flex;flex-direction:column;gap:8px}.apbpage .att{display:flex;gap:10px;align-items:center;padding:8px;border-radius:8px;
  border:1px solid var(--border);background:#232120}.apbpage .att img{width:64px;height:46px;object-fit:cover;border-radius:5px;flex:none;border:1px solid var(--border)}.apbpage .att .ab-m{flex:1;min-width:0}.apbpage .att .ab-m .inp{padding:6px 9px;font-size:11.5px}.apbpage .att .ab-m .ab-src{margin-top:5px;font-size:10px;color:#655d51;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* add-a-section palette */
.apbpage .palette{margin-top:6px;padding:14px;border-radius:10px;border:1px dashed var(--border);background:#1c1a18}.apbpage .palette .ab-k{font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint)}.apbpage .palette .ab-row{margin-top:10px;display:flex;gap:7px;flex-wrap:wrap}.apbpage .pbtn{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border-radius:7px;
  font-size:11.5px;font-weight:700;color:var(--text-dim);border:1px solid var(--border);
  background:#232120;transition:.15s var(--ease)}.apbpage .pbtn .i{font-size:13px;color:var(--amber)}.apbpage .pbtn:hover{border-color:rgba(212,146,58,.5);color:var(--parch);background:#2b2620}

/* the reference, allocated on posting */
.apbpage .refnote{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border-radius:8px;
  border:1px solid var(--border);background:#1c1a18;font-size:11.5px;line-height:1.6;color:var(--text-faint)}.apbpage .refnote .i{font-size:14px;color:var(--amber);margin-top:1px}.apbpage .refnote span{min-width:0}.apbpage .refnote b{color:var(--gold);font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:.04em}

/* close dialog */
.apbpage .cbody{padding:18px}.apbpage .cbody p{font-size:12.5px;line-height:1.65;color:var(--text-dim);margin-bottom:14px}.apbpage .reasons{display:flex;flex-direction:column;gap:7px;margin-bottom:14px}.apbpage .reason{display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:8px;
  border:1px solid var(--border);background:#1e1c1a;transition:.15s var(--ease)}.apbpage .reason:hover{border-color:#4a423a;background:#232120}.apbpage .reason.ab-on{border-color:rgba(87,178,106,.5);background:#212822}.apbpage .reason .dot{width:14px;height:14px;border-radius:50%;border:1px solid var(--border);flex:none}.apbpage .reason.ab-on .dot{border-color:var(--green);box-shadow:inset 0 0 0 3px var(--green)}.apbpage .reason b{font-size:12.5px;font-weight:600}

/* lightbox */
.apbpage .ab-lb{position:fixed;inset:0;z-index:90;display:flex;flex-direction:column;background:rgba(8,7,6,.94);
  opacity:0;visibility:hidden;transition:opacity .16s var(--ease),visibility .16s}.apbpage .ab-lb.ab-on{opacity:1;visibility:visible}.apbpage .ab-lb-bar{flex:none;display:flex;align-items:center;gap:12px;padding:14px 18px;
  border-bottom:1px solid rgba(255,255,255,.07)}.apbpage .ab-lb-bar .ab-n{font-size:11.5px;font-weight:700;letter-spacing:.05em;color:var(--text-dim)}.apbpage .ab-lb-bar .ab-c{font-size:11.5px;color:var(--text-faint)}.apbpage .ab-lb-bar .ab-side{margin-left:auto}.apbpage .ab-lb-stage{flex:1;min-height:0;display:grid;place-items:center;padding:26px;position:relative}.apbpage .ab-lb-stage img{max-width:100%;max-height:100%;width:auto;height:auto;border-radius:8px;
  border:1px solid rgba(255,255,255,.1);box-shadow:0 30px 80px rgba(0,0,0,.6)}.apbpage .ab-lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;display:grid;
  place-items:center;border-radius:50%;font-size:16px;color:var(--parch);
  border:1px solid rgba(255,255,255,.14);background:rgba(20,18,16,.8)}.apbpage .ab-lb-nav:hover{background:rgba(40,36,32,.95);border-color:rgba(212,146,58,.5)}.apbpage .ab-lb-nav--p{left:18px}.apbpage .ab-lb-nav--n{right:18px}.apbpage .ab-lb-nav[hidden]{display:none}body.is-locked{overflow:hidden}

/* The inline style attributes the design used, as classes — the MDC's
   own style-src drops a style="" in markup, so anything set there
   simply never arrives. */
.apbpage .gap9{margin-top:9px}
.apbpage .gap12{margin-top:12px}
.apbpage .hl{color:var(--parch)}
.apbpage .dim{color:var(--text-dim)}
.apbpage .lit{color:var(--gold-hi)}
.apbpage .doc--prev{overflow:visible}
.apbpage .urlerr{display:none}
.apbpage .cbody--tall{max-height:60vh;overflow:auto}
/* These two replace an inline style, which outranks every selector, so
   they are written with the context they sit in — .doc h3 and .doc p
   would otherwise win on specificity and the override would be lost. */
.apbpage .doc p.prevempty{color:#655d51}
.apbpage .doc h3.prevwho{margin-top:0;color:var(--parch);font-size:15px;letter-spacing:-.02em;text-transform:none}
.apbpage .ab-row button.ab-on[data-v="danger"]{background:#33221f;border-color:rgba(201,82,74,.5);color:#dd7b73}
.apbpage .ab-row button.ab-on[data-v="caution"]{background:#33291d;border-color:rgba(212,146,58,.5);color:var(--gold-hi)}
.apbpage .ab-row button.ab-on[data-v="note"]{background:#232b23;border-color:rgba(87,178,106,.5);color:#8fbe98}

/* The three dialogs centre on the window, and the window includes the
   298px sidebar, which is never covered — so without this they sit left
   of the content the reader is looking at. Same treatment as the
   dashboard's. The figure is the rail plus the dialog's own 24px inset,
   so what is left over is centred on the page rather than the window.
   Below 961px the sidebar is off-canvas and plain centring is right. */
@media (min-width:961px){ .apbpage .ab-ovl{padding-left:322px} }

/* The composer drops its preview column when the form beside it would be
   too narrow to use. The design measured that against the window, having
   no sidebar; here the dialog is the window less the 298px rail and its
   own 24px inset, so the same rule fires 346px too late and the form gets
   squeezed on an ordinary laptop. Same threshold, measured against the
   width the dialog actually gets. */
@media (max-width:1345px){
  .apbpage .comp{grid-template-columns:1fr}
  .apbpage .comp .ab-prev{display:none}
}

/* Two things the sign-in stylesheet reaches in and changes. Its global
   h1 carries a margin and a line-height meant for a marketing page; and
   the button reset never sets text-align, so the browser's centred
   default stands and every bulletin in the list centres its own name. */
.apbpage .ab-dh h1{margin:0;line-height:normal}
.apbpage button{text-align:left}

/* ═══════════════════════════════════════════════════════════════════
   PERSON SEARCH

   Every selector is prefixed .pspage, so nothing here reaches another
   page. The reverse is not true: anything unprefixed in this file
   still reaches in, and a prefixed rule cannot undo a property the
   page never declares. Two of those had to be answered directly —
   .panel > header's min-height, which would have held the header at
   56px against a declared height of 40, and the two text tokens,
   which this design was approved against at their lighter values.
   ═══════════════════════════════════════════════════════════════════ */
.pspage{
  /* The approved design's own values. --text-dim and --text-faint sit a
     shade lighter here than the rest of the terminal, which is what the
     dense record rows were read and signed off against. */
  --text-dim:#b6ac9d; --text-faint:#93897b;
  --mono:ui-monospace,'Cascadia Mono','Segoe UI Mono','Roboto Mono',Menlo,Consolas,monospace;
}
/* The sign-in stylesheet's global h1 and h2 are sized for a marketing
   page — 48px and 22px, with a margin and a line-height each. They reach
   in here as they reach into the APB page, so they are answered once,
   before anything else, and every heading in the design sets its own. */
.pspage h1,.pspage h2,.pspage h3{margin:0;line-height:normal;
  font-size:inherit;font-weight:inherit;letter-spacing:inherit}
.pspage button{text-align:left}
.pspage input,.pspage select,.pspage textarea{color:inherit}

/* The header is a label, not a section of the page: one line, the height
   of its own text plus air. It is also a shade lighter than the body it
   sits on, so a box reads as a box without needing a heavy rule. */
.pspage .panel{background:#1f1c1a;border:1px solid var(--border);border-radius:11px;overflow:hidden}
.pspage .panel > header{display:flex;align-items:center;gap:9px;padding:0 14px;
  height:40px;min-height:0;
  background:#2a2624;border-bottom:1px solid var(--border)}
.pspage .panel > header .i{display:block;font-size:13px;color:var(--amber)}
.pspage .panel > header h2{font-size:10.5px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-dim);margin:0}
.pspage .panel > header .ps-side{margin-left:auto;display:flex;align-items:center;gap:7px}
.pspage .panel > header .ps-minibtn{padding:4px 10px;font-size:11px}
.pspage .scroll{scrollbar-width:thin;scrollbar-color:#3d362f transparent}
.pspage .scroll::-webkit-scrollbar{width:10px;height:10px}
.pspage .scroll::-webkit-scrollbar-track{background:transparent}
.pspage .scroll::-webkit-scrollbar-thumb{background:#3d362f;border-radius:9px;
  border:3px solid transparent;background-clip:content-box}
.pspage .scroll::-webkit-scrollbar-thumb:hover{background:#4d443a;background-clip:content-box}
.pspage .hint{font-size:11px;font-weight:600;color:var(--text-faint)}
.pspage .link{font-size:11.5px;font-weight:700;color:var(--gold)}
.pspage .link:hover{color:var(--gold-hi)}

/* ── page head ─────────────────────────────────────────── */
.pspage .ps-dh{display:flex;align-items:flex-start;gap:20px;flex-wrap:wrap;margin-bottom:20px}
.pspage .ps-dh h1{font-size:26px;font-weight:800;letter-spacing:-.03em;line-height:normal;margin:0}
.pspage .ps-dh p{margin-top:8px;font-size:13px;color:var(--text-faint);line-height:1.6;max-width:78ch}
.pspage .ps-dh .ps-side{margin-left:auto;display:flex;align-items:center;gap:9px}

/* ── buttons ───────────────────────────────────────────── */
.pspage .ps-gbtn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:8px;
  font-size:12.5px;font-weight:700;color:var(--text-dim);
  border:1px solid var(--border);background:#2a2624;transition:.15s var(--ease);white-space:nowrap}
.pspage .ps-gbtn:hover{color:var(--parch);border-color:#4a423a;background:#322d29}
.pspage .ps-gbtn .i{font-size:14px}
.pspage .ps-gbtn--go{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.pspage .ps-gbtn--go:hover{background:var(--gold-hi);border-color:var(--gold-hi);color:var(--ink)}
.pspage .ps-gbtn--go .i{color:var(--ink)}
.pspage .ps-minibtn{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:7px;
  font-size:11.5px;font-weight:700;color:var(--text-dim);
  border:1px solid var(--border);background:#272423;transition:.15s var(--ease)}
.pspage .ps-minibtn:hover{color:var(--parch);border-color:#4a423a;background:#302b28}
.pspage .ps-minibtn .i{font-size:12px}
.pspage .xbtn{width:30px;height:30px;display:grid;place-items:center;border-radius:7px;font-size:13px;
  color:var(--text-faint);border:1px solid transparent;transition:.15s var(--ease)}
.pspage .xbtn:hover{color:var(--parch);border-color:var(--border);background:#302b28}
.pspage .dangerbtn{color:#b8746d}
.pspage .dangerbtn:hover{color:#e08a80;border-color:rgba(201,82,74,.4);background:#2c2321}

/* ── the search ────────────────────────────────────────── */
.pspage .finder{position:relative;margin-bottom:20px;z-index:40}
.pspage .fbox{display:flex;align-items:center;gap:12px;padding:0 16px;height:54px;
  border:1px solid var(--border);border-radius:11px;background:#211e1c;transition:.15s var(--ease)}
.pspage .fbox:focus-within{border-color:rgba(212,146,58,.55);background:#241f1c}
.pspage .fbox .i{font-size:17px;color:var(--text-faint)}
.pspage .fbox:focus-within .i{color:var(--gold)}
.pspage .fbox input{flex:1;min-width:0;border:none;background:none;outline:none;
  font-size:14.5px;font-weight:600;caret-color:var(--gold)}
.pspage .fbox input::placeholder{color:#8a8073;font-weight:500}
.pspage .fbox kbd{font-family:inherit;font-size:10.5px;font-weight:800;letter-spacing:.06em;
  padding:4px 7px;border-radius:5px;color:var(--text-faint);
  border:1px solid var(--border);background:#2a2624}
.pspage .fdrop{position:absolute;left:0;right:0;top:60px;border:1px solid var(--border);
  border-radius:11px;background:#242020;box-shadow:0 26px 60px rgba(0,0,0,.6);
  overflow:hidden;display:none}
.pspage .fdrop.ps-on{display:block}
.pspage .fdrop .fhead{padding:9px 16px;font-size:10.5px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-faint);border-bottom:1px solid var(--line);
  background:#211e1c}
.pspage .fdrop .frows{max-height:330px;overflow:auto}
.pspage .frow{display:flex;align-items:center;gap:13px;width:100%;padding:11px 16px;
  border-bottom:1px solid var(--line);transition:.12s var(--ease)}
.pspage .frow:last-child{border-bottom:none}
.pspage .frow:hover,
.pspage .frow.cur{background:rgba(212,146,58,.07)}
.pspage .frow img{width:38px;height:38px;border-radius:7px;object-fit:cover;
  border:1px solid var(--border);flex:none}
.pspage .frow .ps-who{min-width:0;flex:1}
.pspage .frow .ps-who b{display:block;font-size:13px;font-weight:700;color:var(--parch)}
.pspage .frow .ps-who span{display:block;margin-top:2px;font-size:11px;color:var(--text-faint)}
.pspage .frow .fflags{display:flex;gap:5px;flex:none}
.pspage .fnone{padding:26px 16px;text-align:center;font-size:12.5px;color:var(--text-faint)}
.pspage .fnone b{display:block;color:var(--text-dim);margin-bottom:4px}

/* ── identity header ───────────────────────────────────────
   The photograph, the name, what is wrong with them, and the
   description. No boxes around the description — the labels do that
   work already, and ten bordered cells read as a spreadsheet where
   what is wanted is a record header. */
.pspage .idcard{display:grid;grid-template-columns:150px 1fr;gap:26px;padding:20px 22px;
  border:1px solid var(--border);border-radius:11px;background:var(--panel);margin-bottom:14px}
.pspage .mug{position:relative;width:150px;height:150px;border-radius:10px;overflow:hidden;
  border:1px solid var(--border);background:#2f2a26}
.pspage .mug img{width:100%;height:100%;object-fit:cover;display:block}
/* the default silhouette, wherever it stands in for a photograph - the
   person file, a bulletin, a picker row - taken down to the page's own
   dull tones. A real photograph never carries this class. */
img.mug--default{filter:grayscale(1) sepia(.38) brightness(.52) contrast(.85);opacity:.9}
.pspage .mugnone[hidden]{display:none}
.pspage .mug img[hidden]{display:none}
.pspage .mugnone{display:grid;place-items:center;width:100%;height:100%;padding:0 12px;
  text-align:center;font-size:11px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:#6a6257;background:#2b2724}
.pspage .mugtools{position:absolute;top:6px;right:6px;display:flex;flex-direction:column;gap:5px;
  opacity:0;transition:.15s var(--ease)}
.pspage .mug:hover .mugtools,
.pspage .mug:focus-within .mugtools{opacity:1}
.pspage .mugtools button{width:26px;height:26px;display:grid;place-items:center;border-radius:6px;
  font-size:12px;color:var(--parch);border:1px solid rgba(255,255,255,.16);
  background:rgba(20,17,15,.82);transition:.13s var(--ease)}
.pspage .mugtools button:hover{background:rgba(212,146,58,.9);color:var(--ink);border-color:transparent}
.pspage .mugtools button[hidden]{display:none}
.pspage #mugDel:hover{background:rgba(201,82,74,.92);color:#fff}
.pspage .mugcap{margin-top:8px;font-size:10.5px;color:var(--text-faint);text-align:center;line-height:1.5}

.pspage .idmain{min-width:0;display:flex;flex-direction:column}
.pspage .idtop{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;
  padding-bottom:15px;border-bottom:1px solid #342f2a}
/* The flags go under the name, not after it — strung along one line they
   push the name off to the left and the row reads as a sentence. */
.pspage .idwho{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0}
.pspage .idname{font-size:26px;font-weight:800;letter-spacing:-.032em;line-height:1.1;margin:0;
  color:var(--parch)}
.pspage .idpills{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.pspage .idacts{margin-left:auto;display:flex;align-items:center;gap:9px}

.pspage .vitals{flex:1;margin-top:16px;display:grid;grid-template-columns:repeat(5,1fr);
  gap:15px 22px;align-content:start}
.pspage .vitals dt{font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:#8a8073;margin-bottom:5px}
.pspage .vitals dd{font-size:13.5px;font-weight:700;color:var(--parch);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pspage .vitals dd.miss{font-weight:600;color:#5f584e}

/* ── status pills ──────────────────────────────────────── */
.pspage .ps-pill{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:5px;
  font-size:10px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  border:1px solid var(--border);background:#282524;color:var(--text-dim);white-space:nowrap}
.pspage .ps-pill .i{font-size:11px}
/* a pill that opens the bulletin behind it */
.pspage a.ps-pill{text-decoration:none;cursor:pointer;transition:.14s var(--ease)}
.pspage a.ps-pill:hover{filter:brightness(1.18);transform:translateY(-1px)}
.pspage .ps-pill--red{color:#dd7b73;border-color:rgba(201,82,74,.42);background:#2e2220}
.pspage .ps-pill--gold{color:var(--gold-hi);border-color:rgba(212,146,58,.42);background:#302819}
.pspage .ps-pill--green{color:#78a882;border-color:rgba(87,178,106,.36);background:#232b23}
.pspage .ps-pill--grey{color:#7e766b;border-color:#3a342c;background:#242120}
.pspage .ps-pill--blue{color:#7fa8d4;border-color:rgba(90,149,214,.38);background:#20262e}

/* ── the officer-safety strip ──────────────────────────── */
.pspage .safety{display:flex;align-items:center;gap:12px;padding:11px 16px;margin-bottom:14px;
  border:1px solid rgba(201,82,74,.45);border-radius:10px;background:#2b1f1d;
  position:relative;overflow:hidden}
.pspage .safety::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:#c9524a}
.pspage .safety > .i{font-size:17px;color:#dd7b73;flex:none}
.pspage .safety b{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:#f0b3ad;flex:none}
.pspage .safety .codes{display:flex;gap:6px;flex-wrap:wrap;min-width:0}

/* ── actions menu ──────────────────────────────────────── */
.pspage .menuwrap{position:relative}
.pspage .menu{position:absolute;right:0;top:calc(100% + 7px);width:266px;z-index:60;
  border:1px solid var(--border);border-radius:10px;background:#262221;
  box-shadow:0 26px 60px rgba(0,0,0,.62);padding:6px;display:none}
.pspage .menu.ps-on{display:block}
.pspage .menu button{display:flex;align-items:center;gap:11px;width:100%;padding:9px 11px;
  border-radius:7px;font-size:12.5px;font-weight:600;color:var(--text-dim);
  transition:.12s var(--ease)}
.pspage .menu button:hover{background:rgba(212,146,58,.09);color:var(--parch)}
.pspage .menu button .i{font-size:14px;color:var(--text-faint);flex:none}
.pspage .menu button:hover .i{color:var(--gold)}
.pspage .menu .msep{height:1px;margin:6px 9px;background:var(--line)}
.pspage .menu .mlab{padding:9px 11px 5px;font-size:10px;font-weight:800;letter-spacing:.15em;
  text-transform:uppercase;color:#8a8073}

/* ── tabs ──────────────────────────────────────────────────
   Every tab an equal share of the bar, so the row reads as one
   control rather than a huddle of buttons at the left. The tab you
   are on is a raised card, not a block of colour: at this size a
   gold fill shouts loud enough to compete with the officer-safety
   strip above it. */
/* Equal shares were fine while every label was one short word. "Criminal
   record" is not, and an eighth of the strip clipped it to "Criminal r…".
   The tabs now take the width their own label needs and share what is
   left over — so they still fill the strip, and none of them is ever
   cut off. */
.pspage .ps-tabs{display:flex;gap:2px;
  padding:5px;margin-bottom:16px;border:1px solid var(--border);
  border-radius:12px;background:#1e1b19}
.pspage .ps-tabs button{flex:1 0 auto;display:flex;align-items:center;justify-content:center;gap:9px;
  padding:10px 12px;border-radius:9px;border:1px solid transparent;
  font-size:12.5px;font-weight:600;color:var(--text-faint);white-space:nowrap;
  transition:.15s var(--ease)}
.pspage .ps-tabs button:hover{color:var(--text-dim);background:rgba(255,255,255,.028)}
.pspage .ps-tabs button.ps-on{color:var(--parch);font-weight:700;background:#2b2724;
  border-color:#403830;box-shadow:0 1px 0 rgba(255,255,255,.035) inset,0 4px 12px rgba(0,0,0,.28)}
.pspage .ps-tabs button .i{font-size:15px;color:#8a8073;transition:.15s var(--ease)}
.pspage .ps-tabs button:hover .i{color:var(--text-faint)}
.pspage .ps-tabs button.ps-on .i{color:var(--gold)}
/* Between the two: too narrow for one row, too wide to be worth
   stacking eight of them. They wrap and each row fills itself. */
@media (min-width:961px) and (max-width:1478px){
  .pspage .ps-tabs{flex-wrap:wrap;justify-content:center}
  .pspage .ps-tabs button{flex:0 0 auto}
}
@media (max-width:960px){
  .pspage .ps-tabs{flex-wrap:wrap;justify-content:center}
  .pspage .ps-tabs button{flex:0 0 auto}
}

.pspage .ps-tabs .cnt{font-size:11px;font-weight:800;color:#5f584e;
  font-variant-numeric:tabular-nums;transition:.15s var(--ease)}
.pspage .ps-tabs button.ps-on .cnt{color:var(--gold-hi)}
.pspage .ps-tabs .cnt--red{color:#c26a63}
.pspage .ps-tabs button.ps-on .cnt--red{color:#dd7b73}
.pspage .pane{display:none}
.pspage .pane.ps-on{display:block}

/* ── overview ──────────────────────────────────────────────
   The tables want the whole width — a plate, a VIN and a status do not
   fit in two-thirds of it — so nothing sits in a rail beside them. The
   caution codes go directly under the identity card instead, which is
   where they belong anyway: they answer "how do I approach this person",
   not "what does he drive". */
.pspage #pane-overview > *{margin-bottom:14px}
.pspage #pane-overview > *:last-child{margin-bottom:0}
.pspage .orow{display:grid;grid-template-columns:1fr 392px;gap:14px;align-items:start}
.pspage .orow > *{min-width:0}

/* ── tables ────────────────────────────────────────────── */
.pspage .tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.pspage .tbl th{padding:8px 14px;text-align:left;font-size:10px;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:#8a8073;background:#252220;border-bottom:1px solid #3a342c;
  white-space:nowrap}
.pspage .tbl td{padding:11px 14px;border-bottom:1px solid #322c26;color:var(--text-dim);vertical-align:top}
.pspage .tbl tr:last-child td{border-bottom:none}
.pspage .tbl tbody tr:hover td{background:rgba(255,255,255,.018)}
.pspage .tbl b{color:var(--parch);font-weight:700}
.pspage .tbl .ps-num{font-variant-numeric:tabular-nums;white-space:nowrap}
.pspage .tbl .mono{font-family:var(--mono);font-size:11.5px;
  letter-spacing:.02em;color:var(--text-dim)}
.pspage .tbl .rt{text-align:right}
.pspage .tbl .sub2{display:block;margin-top:3px;font-size:11px;color:var(--text-faint);font-weight:500}
.pspage .tbl .ps-acts{display:flex;gap:5px;justify-content:flex-end}
.pspage .ps-empty{padding:30px 18px;text-align:center;font-size:12.5px;color:var(--text-faint)}
.pspage .ps-empty .i{display:block;margin:0 auto 9px;font-size:22px;color:#443c34}
.pspage .ps-empty b{display:block;color:var(--text-dim);font-weight:700;margin-bottom:4px}

/* ── sub-sections inside a tab ─────────────────────────── */
.pspage .ps-sect{margin-bottom:14px}
.pspage .ps-sect:last-child{margin-bottom:0}
.pspage .subtabs{display:flex;gap:7px;align-items:center}
/* One family, three weights: idle, hover, picked. A solid gold fill on
   the picked chip put a block of brand colour next to a red status pill
   and an amber tag and read as three unrelated decisions — the picked
   state is now a lift in surface and text, the same move the rest of the
   page uses, and the only saturated thing in the row stays the status. */
.pspage .chip{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 11px;border-radius:7px;
  font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:#8a8175;border:1px solid #35302a;background:#242120;
  transition:.14s var(--ease);white-space:nowrap}
.pspage .chip:hover{color:#b5aa9c;border-color:#48413a;background:#2a2624}
.pspage .chip.ps-on{color:var(--gold-hi);border-color:#5a4c39;background:#332c24}
.pspage .chip .ps-n{font-variant-numeric:tabular-nums;font-size:10px;font-weight:800;
  padding:1px 6px;border-radius:4px;color:#9a9083;background:#312b26}
.pspage .chip:hover .ps-n{color:#b5aa9c}
.pspage .chip.ps-on .ps-n{color:var(--gold-hi);background:rgba(212,146,58,.2)}

/* ── money strip ───────────────────────────────────────── */
.pspage .totals{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);
  border-bottom:1px solid var(--border)}
.pspage .totals div{padding:11px 15px;background:#242120}
.pspage .totals dt{font-size:10px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:#8a8073;margin-bottom:5px}
.pspage .totals dd{font-size:19px;font-weight:800;letter-spacing:-.02em;color:var(--parch);
  font-variant-numeric:tabular-nums}
.pspage .totals dd.owed{color:var(--gold-hi)}
.pspage .totals dd.ps-clear{color:#78a882}

/* ── criminal record ───────────────────────────────────── */
/* Flex, not a five-column grid: five tiles never divide evenly into a
   narrower row, and a grid leaves a blank cell at the end. Wrapped and
   stretched, the last row fills itself. */
.pspage .crsum{display:flex;flex-wrap:wrap;gap:1px;background:var(--border);
  border-bottom:1px solid var(--border)}
.pspage .crsum div{flex:1 1 150px;padding:11px 15px;background:#242120}
.pspage .crsum dt{font-size:10px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:#8a8073;margin-bottom:5px}
.pspage .crsum dd{font-size:20px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pspage .crsum dd small{font-size:11px;font-weight:600;color:var(--text-faint);letter-spacing:0}
.pspage .crsum .fel dd{color:#dd7b73}
.pspage .crsum .mis dd{color:var(--gold-hi)}
.pspage .crsum .inf dd{color:#7fa8d4}
.pspage .crsum .oth dd{font-size:14px;color:var(--text-dim);letter-spacing:-.01em}
.pspage .cls{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:5px;
  font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.pspage .cls--f{color:#dd7b73;background:rgba(201,82,74,.16);border:1px solid rgba(201,82,74,.36)}
.pspage .cls--m{color:var(--gold-hi);background:rgba(212,146,58,.14);border:1px solid rgba(212,146,58,.36)}
.pspage .cls--i{color:#7fa8d4;background:rgba(90,149,214,.13);border:1px solid rgba(90,149,214,.32)}
.pspage .exp{cursor:pointer}
.pspage .exp > td:first-child{position:relative;padding-left:30px}
.pspage .exp > td:first-child::before{content:"";position:absolute;left:14px;top:16px;
  width:0;height:0;border-left:4px solid #8a8073;border-top:3.5px solid transparent;
  border-bottom:3.5px solid transparent;transition:transform .16s var(--ease);transform-origin:2px 50%}
.pspage .exp.ps-open > td:first-child::before{transform:rotate(90deg)}
.pspage .det td{padding:0;border-bottom:1px solid #322c26;background:#1f1c1a}
.pspage .detin{padding:15px 18px 17px 30px}
.pspage .detgrid{display:grid;grid-template-columns:1fr 300px;gap:20px}
.pspage .charges{display:flex;flex-direction:column;gap:6px}
.pspage .charge{display:flex;align-items:center;gap:10px;padding:8px 11px;border-radius:7px;
  border:1px solid var(--border);background:#252220}
.pspage .charge .cn{flex:1;min-width:0;font-size:12px;color:var(--text-dim)}
.pspage .charge .cn b{color:var(--parch);font-weight:700}
.pspage .detside{border-left:1px solid var(--line);padding-left:20px}
.pspage .detside h4{font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:#8a8073;margin-bottom:9px}
.pspage .detside p{font-size:11.5px;line-height:1.65;color:var(--text-faint);margin-bottom:11px}
.pspage .detside p b{color:var(--text-dim);font-weight:700}
.pspage .reportlink{display:flex;align-items:center;gap:9px;padding:10px 12px;border-radius:8px;
  border:1px solid rgba(212,146,58,.3);background:rgba(212,146,58,.07);
  font-size:11.5px;font-weight:700;color:var(--gold-hi);transition:.14s var(--ease);width:100%}
.pspage .reportlink:hover{background:rgba(212,146,58,.13);border-color:rgba(212,146,58,.5)}
.pspage .reportlink .i{font-size:13px}
.pspage .reportlink span{margin-left:auto;font-size:10.5px;font-weight:600;color:var(--text-faint)}

/* ── information records ───────────────────────────────── */
/* Each record is its own card, not a paragraph in a stream. A hairline
   between records was enough when a record was three lines; now that one
   can carry an affiliation block, links and photographs, the reader
   needs to see where one ends and the next begins without counting. */
.pspage .notes{display:flex;flex-direction:column;gap:12px;padding:14px 16px}
.pspage .ps-note{border:1px solid var(--border);border-radius:10px;background:#211e1d;
  overflow:hidden}
/* Header band, grading band, body, footer band — the same ladder the
   licence and citation panels use, so a record reads as the same kind
   of object as everything else on the file. */
.pspage .notehead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:11px 14px;background:#272423;border-bottom:1px solid var(--border)}
.pspage .notehead b{font-size:13px;font-weight:700;color:var(--parch);margin-right:auto}
.pspage .notehead .when{font-size:11px;color:var(--text-faint);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.pspage .notebody{padding:12px 14px 14px;font-size:12.5px;line-height:1.72;color:var(--text-dim)}
.pspage .notebody p + p{margin-top:9px}
.pspage .notebody strong{color:var(--parch);font-weight:700}
.pspage .notefoot{display:flex;align-items:center;gap:9px;padding:9px 14px;
  border-top:1px solid var(--line);background:#1e1c1b;
  font-size:11px;color:var(--text-faint)}
.pspage .notefoot b{color:var(--text-dim);font-weight:700}
.pspage .notefoot .ps-acts{margin-left:auto;display:flex;gap:5px}

/* ── dialogs ───────────────────────────────────────────── */
.pspage .ps-ovl{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:24px;
  background:rgba(10,9,8,.72);opacity:0;visibility:hidden;
  transition:opacity .18s var(--ease),visibility .18s}
.pspage .ps-ovl.ps-on{opacity:1;visibility:visible}
.pspage .ps-modal{width:min(760px,100%);max-height:min(88vh,900px);display:flex;flex-direction:column;
  border:1px solid var(--border);border-radius:13px;background:var(--panel);
  box-shadow:0 40px 90px rgba(0,0,0,.6);transform:translateY(8px);
  transition:transform .18s var(--ease)}
.pspage .ps-modal--sm{width:min(500px,100%)}
.pspage .ps-ovl.ps-on .ps-modal{transform:none}
.pspage .ps-mh{flex:none;display:flex;align-items:center;gap:12px;padding:14px 18px;
  border-bottom:1px solid var(--line);background:#282320;border-radius:13px 13px 0 0}
.pspage .ps-mh .t{font-size:16px;font-weight:800;letter-spacing:-.02em}
.pspage .ps-mh .msub{font-size:11.5px;color:var(--text-faint)}
.pspage .ps-mh .ps-side{margin-left:auto;display:flex;align-items:center;gap:9px}
.pspage .mx{width:32px;height:32px;display:grid;place-items:center;border-radius:8px;font-size:14px;
  color:var(--text-faint);border:1px solid transparent;transition:.15s var(--ease)}
.pspage .mx:hover{color:var(--parch);border-color:var(--border);background:#332e2a}
.pspage .mbody{overflow:auto;padding:18px}
.pspage .ps-mfoot{flex:none;display:flex;align-items:center;gap:14px;padding:13px 18px;
  border-top:1px solid var(--line);background:#211e1c;border-radius:0 0 13px 13px}
.pspage .ps-mfoot .mnote{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--text-faint);
  line-height:1.5;max-width:52ch}
.pspage .ps-mfoot .mnote .i{flex:none;font-size:12px;color:#6b6154}
.pspage .ps-mfoot .of{font-size:11px;color:var(--text-faint);font-variant-numeric:tabular-nums;
  align-self:center}
.pspage .ps-mfoot .ps-mact{margin-left:auto;display:flex;gap:8px}

/* ── forms ─────────────────────────────────────────────── */
.pspage .fld{display:flex;flex-direction:column;gap:5px;min-width:0}
/* The label only — a field whose control is itself a span (a plate row
   with a button beside it, a generated location) was being uppercased
   along with its label. */
.pspage .fld > span:first-child{font-size:10.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:#8a8073}
.pspage .inp,
.pspage .ta,
.pspage select.inp{width:100%;padding:9px 11px;border-radius:8px;border:1px solid var(--border);
  background:#201d1b;color:var(--parch);font-size:12.5px;outline:none;transition:.14s var(--ease)}
/* The shorthand here resets background-size and background-repeat to
   their initial values, which blew the select's drawn chevron up to fill
   the whole control the moment it was focused. Longhand only, so the
   arrow the rule below draws survives. */
.pspage .inp:focus,
.pspage .ta:focus{border-color:rgba(212,146,58,.55);background-color:#241f1c}
.pspage select.inp:focus{border-color:rgba(212,146,58,.55)}
/* The browser's own select arrow is drawn by the operating system and
   follows none of this — it came out blue on Windows and a different
   size on every platform. Drawn here instead, as two gradients, so it
   needs no image and nothing for a content policy to block. */
.pspage select.inp{appearance:none;-webkit-appearance:none;padding-right:34px;
  background-color:#201d1b;
  background-image:linear-gradient(45deg,transparent 44%,#8a8175 44%,#8a8175 60%,transparent 60%),
                   linear-gradient(135deg,transparent 40%,#8a8175 40%,#8a8175 56%,transparent 56%);
  background-position:right 17px top 50%,right 12px top 50%;
  background-size:7px 7px,7px 7px;background-repeat:no-repeat}
/* Every state repeats the size, position and repeat as well as the
   image — a background longhand left over from another rule is exactly
   how the arrow got away the first time. */
.pspage select.inp:hover{
  background-image:linear-gradient(45deg,transparent 44%,var(--gold) 44%,var(--gold) 60%,transparent 60%),
                   linear-gradient(135deg,transparent 40%,var(--gold) 40%,var(--gold) 56%,transparent 56%);
  background-position:right 17px top 50%,right 12px top 50%;
  background-size:7px 7px,7px 7px;background-repeat:no-repeat}
.pspage select.inp:focus{background-color:#241f1c;
  background-image:linear-gradient(45deg,transparent 44%,var(--gold-hi) 44%,var(--gold-hi) 60%,transparent 60%),
                   linear-gradient(135deg,transparent 40%,var(--gold-hi) 40%,var(--gold-hi) 56%,transparent 56%);
  background-position:right 17px top 50%,right 12px top 50%;
  background-size:7px 7px,7px 7px;background-repeat:no-repeat}
/* The open list is drawn by the browser; these are the only two things
   it will take from us, and without them it comes out white. */
.pspage select.inp option{background:#201d1b;color:var(--parch)}
.pspage select.inp option:checked{background:#332c24}
.pspage .inp::placeholder,
.pspage .ta::placeholder{color:#5c554b}
.pspage .ta{min-height:96px;resize:vertical;line-height:1.6}
.pspage .fgrid{display:grid;gap:9px}
.pspage .fgrid--2{grid-template-columns:1fr 1fr}
.pspage .gap9{margin-top:9px}
.pspage .gap14{margin-top:14px}

/* code picker */
.pspage .ccsearch{margin-bottom:12px}
.pspage .ccpick{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.pspage .ccopt{display:flex;align-items:flex-start;gap:9px;padding:10px 12px;border-radius:8px;
  border:1px solid var(--border);background:#221f1d;transition:.13s var(--ease);width:100%}
.pspage .ccopt:hover{border-color:#4a423a;background:#282422}
.pspage .ccopt.ps-on{border-color:rgba(212,146,58,.55);background:rgba(212,146,58,.09)}
.pspage .ccopt .i{font-size:13px;flex:none;margin-top:1px;color:var(--text-faint)}
.pspage .ccopt.ps-on .i{color:var(--gold)}
.pspage .ccopt.sev--danger .i{color:#dd7b73}
.pspage .ccopt.sev--warn .i{color:var(--gold)}
.pspage .ccopt.sev--info .i{color:#7fa8d4}
.pspage .ccopt em{display:block;font-style:normal;font-size:12px;font-weight:700;color:var(--parch)}
.pspage .ccopt small{display:block;margin-top:3px;font-size:11px;line-height:1.5;color:var(--text-faint)}
.pspage .cclab{margin:14px 0 8px;font-size:10px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:#8a8073}
.pspage .cclab:first-child{margin-top:0}

/* mugshot dialog */
.pspage .updrop{display:grid;place-items:center;gap:9px;padding:28px;border-radius:10px;
  border:1.5px dashed #4a423a;background:#201d1b;text-align:center;transition:.15s var(--ease)}
.pspage .updrop:hover{border-color:rgba(212,146,58,.55);background:#241f1c}
.pspage .updrop .i{font-size:26px;color:#5c554b}
.pspage .updrop b{font-size:12.5px;font-weight:700;color:var(--text-dim)}
.pspage .updrop span{font-size:11px;color:var(--text-faint);line-height:1.55;max-width:44ch}
.pspage .orline{display:flex;align-items:center;gap:12px;margin:15px 0;
  font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#8a8073}
.pspage .orline::before,
.pspage .orline::after{content:"";flex:1;height:1px;background:var(--line)}
.pspage .urlrow{display:flex;gap:7px}
.pspage .urlrow .inp{flex:1}
.pspage .urlerr{margin-top:9px;padding:10px 12px;border-radius:8px;font-size:11.5px;line-height:1.6;
  border:1px solid rgba(201,82,74,.45);background:#2b1f1d;color:#e9b5b0;display:none}
.pspage .urlerr.ps-on{display:block}
.pspage .urlerr b{color:#f7e6e4;font-weight:700}
.pspage .urlerr code{font-family:var(--mono);font-size:11px;
  color:var(--gold-hi)}
.pspage .mirror{margin-top:11px;display:flex;align-items:flex-start;gap:9px;padding:10px 12px;
  border-radius:8px;border:1px solid var(--border);background:#211e1c;
  font-size:11px;line-height:1.55;color:var(--text-faint)}
.pspage .mirror .i{font-size:13px;color:var(--gold);flex:none;margin-top:1px}
.pspage .mirror b{color:var(--text-dim);font-weight:700}
.pspage .preview{display:grid;grid-template-columns:150px 1fr;gap:16px;align-items:start}
.pspage .preview .pv{width:150px;height:150px;border-radius:10px;overflow:hidden;
  border:1px solid var(--border);background:#2f2a26}
.pspage .preview .pv img{width:100%;height:100%;object-fit:cover;display:block}

@media (min-width:961px) and (max-width:1378px){
  .pspage .orow{grid-template-columns:1fr}
  .pspage .vitals{grid-template-columns:repeat(4,1fr)}
  .pspage .crsum{grid-template-columns:repeat(3,1fr)}
  .pspage .detgrid{grid-template-columns:1fr}
  .pspage .detside{border-left:none;padding-left:0;border-top:1px solid var(--line);padding-top:16px}
}
@media (max-width:960px){
  .pspage .orow{grid-template-columns:1fr}
  .pspage .vitals{grid-template-columns:repeat(4,1fr)}
  .pspage .crsum{grid-template-columns:repeat(3,1fr)}
  .pspage .detgrid{grid-template-columns:1fr}
  .pspage .detside{border-left:none;padding-left:0;border-top:1px solid var(--line);padding-top:16px}
}

@media (min-width:961px) and (max-width:1058px){
  .pspage .idcard{grid-template-columns:1fr}
  .pspage .vitals{grid-template-columns:repeat(2,1fr)}
  .pspage .crsum,
.pspage .totals{grid-template-columns:1fr 1fr}
  .pspage .ccpick{grid-template-columns:1fr}
}
@media (max-width:728px){
  .pspage .idcard{grid-template-columns:1fr}
  .pspage .vitals{grid-template-columns:repeat(2,1fr)}
  .pspage .crsum,
.pspage .totals{grid-template-columns:1fr 1fr}
  .pspage .ccpick{grid-template-columns:1fr}
}

.pspage .detfull h4{font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:#8a8073;margin-bottom:9px}
.pspage .detfull p{font-size:12px;line-height:1.7;color:var(--text-dim);max-width:100ch}
.pspage .detfull p strong{color:var(--parch);font-weight:700}
.pspage .dh4{font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:#8a8073;margin-bottom:9px}
.pspage .stubp{font-size:12.5px;line-height:1.7;color:var(--text-dim)}
.pspage .stubp b{color:var(--parch);font-weight:700}
body.is-locked{overflow:hidden}

/* ══════════════════════════════════════════════════════════
   CAUTION CODES

   A code is a label and a line of instruction. It does not need a
   card: one row, a small severity mark, the name, and what to do
   about it — so a dozen of them are a list you can run your eye
   down rather than a wall you have to read.
   ══════════════════════════════════════════════════════════ */
.pspage .ccbody{padding:10px 14px 12px}
.pspage .ccsec + .ccsec{margin-top:12px}
.pspage .cchead{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.pspage .cchead b{font-size:10px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;flex:none}
.pspage .cchead .ps-n{flex:none;font-size:10px;font-weight:800;color:#5f584e;
  font-variant-numeric:tabular-nums}
.pspage .cchead::after{content:"";flex:1;height:1px;background:var(--line)}
.pspage .cchead--danger b{color:#c9736c}
.pspage .cchead--warn b{color:#c1913f}
.pspage .cchead--info b{color:#6f92b8}
.pspage .ccgrid{display:grid;grid-template-columns:1fr 1fr;gap:1px 22px}
.pspage .ccitem{display:flex;align-items:center;gap:9px;padding:5px 2px;min-width:0}
.pspage .ccitem > .i{font-size:12px;flex:none}
.pspage .ccitem--danger > .i{color:#c9524a}
.pspage .ccitem--warn > .i{color:var(--amber)}
.pspage .ccitem--info > .i{color:#5a95d6}
.pspage .ccitem b{flex:none;font-size:12px;font-weight:700;color:var(--parch)}
.pspage .ccitem span{flex:1;min-width:0;font-size:11.5px;color:var(--text-faint);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Three lines to a code: the name, what it means, and who put it on
   the file and when. */
.pspage .ccitem{align-items:flex-start;padding:7px 2px}
.pspage .ccitem > .i{margin-top:3px}
.pspage .ccitem .cct{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0;white-space:normal;overflow:visible}
.pspage .ccitem .cct > b{flex:none}
.pspage .ccitem .ccn{flex:none;white-space:normal;color:var(--text-dim);line-height:1.45}
.pspage .ccitem .ccm{flex:none;white-space:normal;font-size:10.5px;color:#7a7065}
.pspage .ccitem .ccm b{font-size:10.5px;color:var(--text-faint);font-weight:700;flex:none}
/* who put the code on, and when: a small mark on the name line that
   opens on hover or focus rather than a third line on every code */
.pspage .ccitem .cct > b{display:inline-flex;align-items:center;gap:5px;overflow:visible}
.pspage .ccitem .ccwho{position:relative;display:inline-grid;place-items:center;width:14px;height:14px;border-radius:50%;
  color:#7a7065;cursor:help;outline:none;flex:none;overflow:visible;white-space:normal}
.pspage .ccitem .ccwho .i{width:12px;height:12px}
.pspage .ccitem .ccwho:hover,.pspage .ccitem .ccwho:focus{color:var(--gold)}
/* Anchored to the mark's left edge, not centred on it - centred, a pop on
   a first-column code ran off the panel. The panel clips its overflow for
   the rounded corners, so it lets go only while a pop is open. */
.pspage .panel:has(.ccwho:hover),.pspage .panel:has(.ccwho:focus){overflow:visible}
.pspage .ccitem .ccpop{position:absolute;left:-8px;bottom:calc(100% + 7px);z-index:6;
  white-space:nowrap;overflow:visible;text-overflow:clip;flex:none;font-size:10.5px;font-weight:500;color:#b5ab9d;background:#17140f;border:1px solid var(--line);
  border-radius:7px;padding:6px 9px;box-shadow:0 8px 22px rgba(0,0,0,.45);opacity:0;pointer-events:none;transition:opacity .12s}
.pspage .ccitem .ccpop b{font-size:10.5px;color:var(--parch);font-weight:700}
.pspage .ccitem .ccwho:hover .ccpop,.pspage .ccitem .ccwho:focus .ccpop{opacity:1}

.pspage .ccitem .ccx{width:20px;height:20px;flex:none;display:grid;place-items:center;border-radius:5px;
  font-size:10.5px;color:#5f584e;opacity:0;transition:.14s var(--ease)}
.pspage .ccitem:hover .ccx{opacity:1}
.pspage .ccitem .ccx:hover{color:#e08a80;background:rgba(201,82,74,.14)}
.pspage .ccnone{padding:8px 0 4px}

/* ══════════════════════════════════════════════════════════
   PROFILING SAMPLES
   Two lines. Held or not, when, by whom, and the reference.
   ══════════════════════════════════════════════════════════ */
.pspage .smrow{display:flex;align-items:center;gap:12px;padding:9px 14px;
  border-bottom:1px solid var(--line)}
.pspage .smrow:last-child{border-bottom:none}
.pspage .smrow > .i{font-size:14px;color:var(--text-faint);flex:none}
.pspage .smrow > b{flex:none;width:104px;font-size:11.5px;font-weight:700;color:var(--parch)}
.pspage .smstate{flex:none;display:inline-flex;align-items:center;gap:6px;width:96px;
  font-size:11.5px;font-weight:700}
.pspage .smstate .dot{width:7px;height:7px;border-radius:50%;flex:none}
.pspage .smstate--on{color:#78a882}
.pspage .smstate--on .dot{background:var(--green);box-shadow:0 0 0 3px rgba(87,178,106,.15)}
.pspage .smstate--off{color:#8a8073}
.pspage .smstate--off .dot{background:#4a423a}
.pspage .smstate--gone{color:#b8746d}
.pspage .smstate--gone .dot{background:#8f4a44;box-shadow:0 0 0 3px rgba(201,82,74,.13)}
.pspage .smmeta{flex:1;min-width:0;font-size:11.5px;color:var(--text-faint);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pspage .smmeta b{color:var(--text-dim);font-weight:700}
.pspage .smmeta .mono{font-family:var(--mono);font-size:11px}
.pspage .smacts{flex:none;display:flex;gap:5px}
.pspage .smacts .ps-minibtn.ps-on{color:var(--gold-hi);border-color:#5a4c39;background:#332c24}
/* every sample of a kind ever taken, newest first, folded under its row */
.pspage .smlog{padding:4px 14px 10px 40px;border-bottom:1px solid var(--line);background:#211e1d}
.pspage .smlog[hidden]{display:none}
.pspage .smlrow{display:grid;grid-template-columns:150px 1fr auto;gap:6px 14px;align-items:baseline;padding:6px 0;
  font-size:11px;color:var(--text-faint);border-top:1px solid var(--line)}
.pspage .smlrow:first-child{border-top:0}
.pspage .smlrow .mono{font-family:var(--mono);font-size:11px;color:var(--text-dim)}
.pspage .smlrow b{color:var(--text-dim);font-weight:700}
.pspage .smlrow--gone .mono{text-decoration:line-through;color:#6b6154}
.pspage .smlon{font-weight:700;color:#78a882;white-space:nowrap}
.pspage .smlgone{grid-column:2;color:#b8746d}
.pspage .smlgone b{color:#c9736c}
@media (max-width:640px){ .pspage .smlrow{grid-template-columns:1fr} .pspage .smlgone{grid-column:1} }

/* ══════════════════════════════════════════════════════════
   LICENCES — the management tab

   A row per licence, and the whole of the management for one
   licence opens underneath it: what it is, what is on it, and what
   has been done to it. Three columns, because those are three
   different questions and reading one should not mean scrolling
   past the others.
   ══════════════════════════════════════════════════════════ */
.pspage .licsum{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--border);
  border-bottom:1px solid var(--border)}
.pspage .licsum div{padding:11px 15px;background:#242120}
.pspage .licsum dt{font-size:10px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:#8a8073;margin-bottom:5px}
.pspage .licsum dd{font-size:20px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;
  color:var(--parch)}
.pspage .licsum dd small{font-size:11px;font-weight:600;color:var(--text-faint);letter-spacing:0}
.pspage .licsum .ok dd{color:#78a882}
.pspage .licsum .bad dd{color:#dd7b73}
.pspage .licsum .warnv dd{color:var(--gold-hi)}

.pspage .licrow{display:grid;grid-template-columns:26px 210px 130px 1fr 150px 118px 30px;
  align-items:center;gap:14px;width:100%;padding:13px 16px;
  border-bottom:1px solid #322c26;transition:.13s var(--ease);text-align:left}
.pspage .licrow > .ps-pill{justify-content:center;width:100%}
.pspage .licrow:hover{background:rgba(255,255,255,.02)}
.pspage .licrow.ps-open{background:rgba(212,146,58,.05)}
.pspage .licrow > .i{display:block;font-size:16px;color:var(--gold);justify-self:center}
.pspage .licrow .lname{min-width:0}
.pspage .licrow .lname b{display:block;font-size:13px;font-weight:700;color:var(--parch)}
.pspage .licrow .lname span{display:block;margin-top:2px;font-size:11px;color:var(--text-faint)}
.pspage .licrow .lnum{font-family:var(--mono);font-size:11px;
  color:var(--text-faint)}
.pspage .licrow .lpts{display:flex;align-items:center;gap:9px;min-width:0}
.pspage .licrow .lpts .bar{flex:1;min-width:40px;height:5px;border-radius:3px;background:#332d27;overflow:hidden}
.pspage .licrow .lpts .fill{display:block;height:100%;border-radius:3px;background:var(--gold)}
.pspage .licrow .lpts .fill--hot{background:#c9524a}
.pspage .licrow .lpts b{font-size:11px;font-weight:700;color:var(--text-dim);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.pspage .licrow .lpts em{font-style:normal;font-size:11px;color:#5f584e}
.pspage .licrow .lwhen{font-size:11.5px;color:var(--text-dim);font-variant-numeric:tabular-nums}
.pspage .licrow .lwhen span{display:block;font-size:10.5px;color:#8a8073}
.pspage .licrow .chev{justify-self:center;font-size:12px;color:#8a8073;transition:transform .16s var(--ease)}
.pspage .licrow.ps-open .chev{transform:rotate(180deg);color:var(--gold)}

/* Air above and below the panel, so an open licence reads as a thing
   sitting inside the list rather than two rows shoved apart. */
.pspage .licdet{padding:18px 16px 20px;border-bottom:1px solid #322c26;background:#1b1917}
.pspage .licdet[hidden]{display:none}
/* The panel is a strip of particulars across the top and two working
   panes below it. The particulars were a column of their own once and
   left a third of the panel empty under four short lines — laid out
   across the top they fill the width they are given. */
.pspage .licwrap{display:flex;flex-direction:column;gap:1px;
  border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--border)}
.pspage .licstrip{display:flex;flex-wrap:wrap;gap:8px 40px;padding:13px 16px;background:#242120}
.pspage .licstrip > div{display:flex;flex-direction:column;gap:4px;min-width:0}
.pspage .licstrip dt{font-size:10px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:#8a8073}
.pspage .licstrip dd{font-size:12px;font-weight:700;color:var(--parch)}
.pspage .licstrip dd.mono{font-family:var(--mono);font-size:11.5px;
  letter-spacing:.02em}
.pspage .licgrid2{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border)}
.pspage .licgrid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;
  border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--border)}
/* The three panes are one height whatever is in them, and each scrolls
   inside itself. A licence with nine endorsements and seventeen history
   entries must not make the row four screens tall. */
.pspage .licgrid3{align-items:stretch}
.pspage .licgrid2{align-items:stretch}
/* A licence that was never issued has one pane and nothing to put beside
   it, so it takes the full width rather than leaving two thirds empty. */
.pspage .licgrid3--one{grid-template-columns:1fr}
.pspage .licpane{position:relative;display:flex;flex-direction:column;padding:14px 16px;
  background:#242120;min-width:0;max-height:330px}
/* A pane that runs past its height fades out at the bottom rather than
   guillotining a row. Where nothing overflows the gradient falls on the
   pane's own flat fill and cannot be seen. */
.pspage .licpane::after{content:"";position:absolute;left:1px;right:1px;bottom:0;height:26px;
  background:linear-gradient(rgba(36,33,32,0),#242120);pointer-events:none}
/* A fixed header height, so a pane carrying a count badge and a pane
   without one still start their scroller on the same line. */
.pspage .licpane h4{flex:none;display:flex;align-items:center;gap:8px;height:16px;
  font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:#8a8073;margin-bottom:11px}
.pspage .licpane h4 .h4n{font-size:10px;font-weight:800;color:#8a8175;padding:1px 6px;
  border-radius:4px;background:#2e2926;letter-spacing:.06em}
/* Both panes show the whole rail rather than a floating thumb, so the two
   scrollbars start and end on the same line however far each is scrolled.
   Two bare thumbs at two scroll positions read as misaligned; two rails
   do not. */
.pspage .endoscroll,
.pspage .tlscroll{flex:1;min-height:0;overflow-y:auto;scrollbar-gutter:stable;
  padding-right:4px;margin-right:-4px;scrollbar-color:#3d362f #2a2624}
.pspage .endoscroll::-webkit-scrollbar-track,
.pspage .tlscroll::-webkit-scrollbar-track{background:#2a2624;border-radius:9px;
  border:3px solid transparent;background-clip:content-box}
/* The group label sticks to the top of the scroller: scroll into the
   fallen-off half and it is still labelled, so a dimmed row is never
   just a dimmed row of unknown reason. */
.pspage .endolab{position:sticky;top:0;z-index:1;background:#242120;padding:5px 0 7px;
  display:flex;align-items:center;gap:8px;margin:0 0 9px;
  font-size:10px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:#968c7e}
/* Each group is its own sticky context, so arriving at "Fallen off"
   pushes "On the licence" out rather than stacking two labels. The
   space between the two groups belongs to the group, not the label —
   a sticky element's own margin travels with it and closes up as it
   pins. */
.pspage .endogrp{position:relative}
.pspage .endogrp + .endogrp{margin-top:18px}
.pspage .endolab span{font-size:10px;font-weight:800;color:#8a8175;padding:1px 5px;border-radius:4px;
  background:#2e2926}
.pspage .endolab::after{content:"";flex:1;height:1px;background:var(--line)}
.pspage .endolab--gone{color:#5f584e}
.pspage .endorow--gone{opacity:.55}
.pspage .endorow--gone .ecode{color:#8a8175;background:#2b2724}
.pspage .endorow--gone .epts{color:#5f584e}
.pspage .licdl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:11.5px;align-items:baseline}
.pspage .licdl dt{color:var(--text-faint);white-space:nowrap}
.pspage .licdl dd{color:var(--text-dim);font-weight:700;min-width:0}
.pspage .licdl dd.mono{font-family:var(--mono);font-size:11px}
/* The total and its bar are a band of their own above the two panes, so
   the two panes have identical headers and their scrollbars start at the
   same line. */
.pspage .licmeter{display:flex;align-items:center;gap:16px;padding:11px 16px;background:#242120}
.pspage .licmeter .ptsbig{margin:0;flex:none}
.pspage .licmeter .ptstrack{flex:1;margin:0}
.pspage .ptsbig{display:flex;align-items:baseline;gap:7px;margin-bottom:9px}
.pspage .ptsbig b{font-size:24px;font-weight:800;letter-spacing:-.03em;color:var(--gold-hi);
  font-variant-numeric:tabular-nums}
.pspage .ptsbig span{font-size:11.5px;color:var(--text-faint)}
.pspage .ptsbig b.hot{color:#dd7b73}
.pspage .ptstrack{height:6px;border-radius:3px;background:#332d27;overflow:hidden;margin-bottom:13px}
.pspage .ptstrack .fill{display:block;height:100%;border-radius:3px;background:var(--gold)}
.pspage .ptstrack .fill--hot{background:#c9524a}
.pspage .endo{display:flex;flex-direction:column;gap:6px}
.pspage .endogrp:last-child .endo{padding-bottom:4px}
.pspage .endorow{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:7px;
  border:1px solid var(--border);background:#262220}
.pspage .endorow .ecode{font-family:var(--mono);font-size:11px;
  font-weight:700;color:var(--gold-hi);padding:2px 6px;border-radius:4px;
  background:rgba(212,146,58,.12);flex:none}
.pspage .endorow .ewhat{flex:1;min-width:0;font-size:11.5px;color:var(--text-dim)}
.pspage .endorow .ewhat span{display:block;margin-top:2px;font-size:10.5px;color:#8a8073}
.pspage .endorow .epts{font-size:12px;font-weight:800;color:var(--parch);
  font-variant-numeric:tabular-nums;flex:none}
.pspage .lictl{position:relative;padding-left:20px}
.pspage .lictl::before{content:"";position:absolute;left:4px;top:5px;bottom:5px;width:1px;
  background:var(--rail-line-2,#3b342c)}
.pspage .lictl .ev{position:relative;padding-bottom:13px}
.pspage .lictl .ev:last-child{padding-bottom:0}
.pspage .lictl .ev::before{content:"";position:absolute;left:-20px;top:4px;width:9px;height:9px;
  border-radius:50%;background:#4a423a;box-shadow:0 0 0 3px #242120}
.pspage .lictl .ev--on::before{background:#78a882}
.pspage .lictl .ev--warn::before{background:var(--gold)}
.pspage .lictl .ev--bad::before{background:#c9524a}
.pspage .lictl .ev b{display:block;font-size:11.5px;font-weight:700;color:var(--text-dim)}
.pspage .lictl .ev span{display:block;margin-top:2px;font-size:11px;color:#8a8073}
.pspage .licbar{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.pspage .licbar .ps-minibtn{padding:8px 13px;font-size:11.5px}

/* ══════════════════════════════════════════════════════════
   HISTORY LOG

   Three columns and a hairline between rows. It is a log: when it
   happened, what happened and the line explaining it, and who did
   it. No icons — nothing here is recognised faster by a picture
   than by its own first three words.
   ══════════════════════════════════════════════════════════ */
.pspage .hlog{display:grid}
.pspage .hhead,
.pspage .hrow{display:grid;grid-template-columns:150px 1fr max-content;gap:22px;
  padding:8px 16px;align-items:baseline}
.pspage .hhead{font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:#8a8073;background:#252220;border-bottom:1px solid #3a342c}
.pspage .hhead span:last-child{text-align:right}
.pspage .hrow{border-bottom:1px solid #2b2620}
.pspage .hrow:last-child{border-bottom:none}
.pspage .hrow:hover{background:rgba(255,255,255,.018)}
.pspage .hwhen{font-size:11.5px;color:var(--text-dim);font-variant-numeric:tabular-nums;white-space:nowrap}
.pspage .hwhen em{font-style:normal;margin-left:7px;color:#8a8073}
/* one line: the action, a separator, then the line that explains it */
.pspage .hwhat{min-width:0;font-size:11.5px;color:var(--text-faint);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pspage .hwhat b{font-size:12.5px;font-weight:700;color:var(--parch)}
.pspage .hwhat i,
.pspage .hwho i{font-style:normal;margin:0 7px;color:#4f483f}
.pspage .hwho{font-size:11.5px;color:var(--text-dim);text-align:right;white-space:nowrap}
.pspage .hwho i{color:#4f483f}

/* Pagination, the same slim control the dashboard uses: two arrows
   either side of the page you are on, the same width at 3 pages or
   300. A row of numbered buttons grows with the data and looks
   absurd past a handful. */
.pspage .ps-pager{display:flex;align-items:center;gap:12px;padding:10px 16px;border-top:1px solid var(--line)}
.pspage .ps-pager .of{font-size:11px;color:var(--text-faint);font-variant-numeric:tabular-nums}
.pspage .ps-stepper{margin-left:auto;display:flex;align-items:center;border:1px solid var(--border);
  border-radius:8px;background:#1e1c1a;overflow:hidden}
.pspage .ps-stepper button{width:30px;height:28px;display:grid;place-items:center;font-size:12px;
  color:var(--text-dim);transition:.15s var(--ease)}
.pspage .ps-stepper button:hover:not(:disabled){background:#2f2922;color:var(--gold-hi)}
.pspage .ps-stepper button:disabled{opacity:.3;cursor:default}
.pspage .ps-stepper .ps-cur{padding:0 13px;height:28px;display:flex;align-items:center;gap:5px;
  border-left:1px solid var(--border);border-right:1px solid var(--border);
  font-size:11.5px;font-weight:700;color:var(--parch);font-variant-numeric:tabular-nums;
  white-space:nowrap}
.pspage .ps-stepper .ps-cur em{font-style:normal;color:var(--text-faint);font-weight:600}

@media (min-width:961px) and (max-width:1478px){
  .pspage .ccgrid{grid-template-columns:1fr}
  .pspage .licrow{grid-template-columns:26px 1fr 120px 118px 30px}
  .pspage .licrow .lnum,
.pspage .licrow .lwhen{display:none}
  .pspage .licgrid3{grid-template-columns:1fr}
  /* Stacked, but each pane keeps its cap and its own scroll — an open
     licence must not become two thousand pixels of page on a phone. */
  .pspage .licgrid2{grid-template-columns:1fr}
  .pspage .licpane{max-height:290px}
  .pspage .hhead,
.pspage .hrow{grid-template-columns:140px 1fr}
  .pspage .hhead span:last-child,
.pspage .hwho{display:none}
}
@media (max-width:960px){
  .pspage .ccgrid{grid-template-columns:1fr}
  .pspage .licrow{grid-template-columns:26px 1fr 120px 118px 30px}
  .pspage .licrow .lnum,
.pspage .licrow .lwhen{display:none}
  .pspage .licgrid3{grid-template-columns:1fr}
  /* Stacked, but each pane keeps its cap and its own scroll — an open
     licence must not become two thousand pixels of page on a phone. */
  .pspage .licgrid2{grid-template-columns:1fr}
  .pspage .licpane{max-height:290px}
  .pspage .hhead,
.pspage .hrow{grid-template-columns:140px 1fr}
  .pspage .hhead span:last-child,
.pspage .hwho{display:none}
}

@media (min-width:961px) and (max-width:1118px){
  .pspage .ccgrid{grid-template-columns:1fr}
  .pspage .licsum{grid-template-columns:repeat(2,1fr)}
  .pspage .ps-tabs{flex-direction:column}
  .pspage .ps-tabs button{justify-content:flex-start}
}
@media (max-width:788px){
  .pspage .ccgrid{grid-template-columns:1fr}
  .pspage .licsum{grid-template-columns:repeat(2,1fr)}
  .pspage .ps-tabs{flex-direction:column}
  .pspage .ps-tabs button{justify-content:flex-start}
}

/* A band across the panel rather than a boxed note inside a column —
   the 1px grid gap above and below it is the only separation it needs. */
.pspage .liccond{display:flex;align-items:flex-start;gap:9px;padding:11px 16px;
  background:rgba(212,146,58,.09)}
.pspage .liccond .i{font-size:13px;color:var(--gold);flex:none;margin-top:1px}
.pspage .liccond span{font-size:11px;line-height:1.55;color:var(--gold-hi)}
.pspage .licpane .smblurb{margin:0}
/* Where a pane has nothing to list, its one line sits in the middle of
   the pane rather than clinging to the top above a void. */
.pspage .smnil{flex:1;display:flex;align-items:center;margin:0;padding:4px 0 18px;
  font-size:11.5px;line-height:1.6;color:var(--text-faint)}
.pspage .ps-gbtn--danger{background:#c9524a;border-color:#c9524a;color:#fff}
.pspage .ps-gbtn--danger:hover{background:#d75d55;border-color:#d75d55;color:#fff}

/* Nine filters will not sit in a panel header beside a title, so they
   get their own band under it — the same treatment the APB list uses. */
.pspage .filterbar{display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  padding:10px 14px;border-bottom:1px solid var(--line);background:#232020}
/* A band that holds nothing but filters puts them at the right-hand end,
   the same side the filters sit on in every other panel on the page. */
.pspage .filterbar.subtabs{justify-content:flex-end}
/* A filter that is a select rather than a row of chips still reads as
   one control: the word, then the box, at the same height as a chip. */
.pspage .fld--inline{display:inline-flex;flex-direction:row;align-items:center;gap:9px;margin:0}
.pspage .fld--inline > span{margin:0;font-size:10px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--text-faint);white-space:nowrap}
.pspage .filterbar.subtabs .inp,
.pspage .filterbar.subtabs select.inp{height:28px;
  padding-top:0;padding-bottom:0;font-size:12px}
.pspage .filterbar.subtabs select.inp--slim{width:auto;min-width:190px;max-width:280px}
.pspage .smblurb{font-size:11.5px;line-height:1.6;color:var(--text-faint)}

/* ── the sample tick ───────────────────────────────────── */
.pspage .tickbox{padding:14px;border-radius:10px;border:1px solid rgba(212,146,58,.32);
  background:rgba(212,146,58,.06)}
.pspage .tick{display:flex;align-items:flex-start;gap:12px;cursor:pointer}
.pspage .tick input{position:absolute;opacity:0;width:0;height:0}
.pspage .tickbox-mark{width:26px;height:26px;flex:none;display:grid;place-items:center;border-radius:7px;
  border:1.5px solid #4a423a;background:#201d1b;font-size:13px;color:transparent;
  transition:.14s var(--ease)}
.pspage .tick:hover .tickbox-mark{border-color:rgba(212,146,58,.6)}
.pspage .tick input:checked + .tickbox-mark{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.pspage .tick input:focus-visible + .tickbox-mark{outline:2px solid var(--gold);outline-offset:2px}
.pspage .tickbox-txt b{display:block;font-size:13px;font-weight:700;color:var(--parch)}
.pspage .tickbox-txt span{display:block;margin-top:4px;font-size:11.5px;line-height:1.6;color:var(--text-faint)}
.pspage .sarow{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.pspage .tbl--flat{border:1px solid var(--border);border-radius:9px;overflow:hidden}
.pspage .ps-mh > .i{display:block;font-size:17px;color:var(--gold)}

/* ── at a glance ───────────────────────────────────────── */
.pspage .glance{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--border)}
.pspage .glance div{padding:11px 15px;background:#242120}
.pspage .glance dt{font-size:10px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:#8a8073;margin-bottom:5px}
.pspage .glance dd{font-size:19px;font-weight:800;letter-spacing:-.02em;color:var(--parch);
  font-variant-numeric:tabular-nums}
.pspage .glance dd small{font-size:11px;font-weight:600;color:var(--text-faint);letter-spacing:0}
.pspage .glance .bad dd{color:#dd7b73}
.pspage .glance .warnv dd{color:var(--gold-hi)}
.pspage .glance .ok dd{color:#78a882}
.pspage .glance--4{grid-template-columns:repeat(4,1fr)}

/* ── assets ──────────────────────────────────────────────
   Each row is a way into the register that owns the thing, so it
   behaves like a link: the whole row is the target and the arrow
   says where it goes. */
/* Each row is its own grid — they are separate buttons — so a track
   cannot size itself against the other rows. The status column is
   therefore pinned to the width the longest label in the whole design
   needs (Unregistered, 115px) and every pill is centred in it: one
   width, no pill wider than its longest word. */
.pspage .arow{display:grid;grid-template-columns:26px 250px 1fr 1fr 100px 118px 26px;
  align-items:center;gap:14px;width:100%;padding:11px 16px;
  border-bottom:1px solid #322c26;transition:.13s var(--ease);text-align:left}
.pspage .arow > .ps-pill{justify-content:center;width:100%}
.pspage .arow:last-of-type{border-bottom:none}
.pspage .arow:hover{background:rgba(212,146,58,.055)}
.pspage .arow > .i{display:block;font-size:16px;color:var(--gold);justify-self:center}
.pspage .arow .aname{min-width:0}
.pspage .arow .aname b{display:block;font-size:12.5px;font-weight:700;color:var(--parch);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pspage .arow .aname span{display:block;margin-top:2px;font-size:11px;color:var(--text-faint);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pspage .arow .acol{font-size:11.5px;color:var(--text-dim);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pspage .arow .acol.mono{font-family:var(--mono);font-size:11px;
  color:var(--text-faint)}
.pspage .arow .agoto{justify-self:center;font-size:12px;color:#5f584e;transition:.13s var(--ease)}
.pspage .arow:hover .agoto{color:var(--gold)}

.pspage .req{font-style:normal;margin-left:7px;padding:1px 6px;border-radius:4px;font-size:10px;
  font-weight:800;letter-spacing:.1em;color:#c9736c;background:rgba(201,82,74,.14);
  border:1px solid rgba(201,82,74,.3)}
/* A disabled button keeps its own colour on hover — the shared rule
   here used to paint every one of them red, which is only right for
   the destructive one. */
.pspage .ps-gbtn:disabled{opacity:.4;cursor:not-allowed}
.pspage .ps-gbtn--go:disabled:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.pspage .ps-gbtn--danger:disabled:hover{background:#c9524a;border-color:#c9524a;color:#fff}

/* The flags beside the name keep the same shape as every other pill —
   they just sit on a deeper tint with a more present border, so they
   lift off the card instead of sinking into it. Text contrast against
   its own fill: 6.0:1 red, 9.8:1 amber, 5.3:1 slate. */
.pspage .idpills .ps-pill--red{color:#e58d85;border-color:rgba(201,82,74,.6);background:#38221f}
.pspage .idpills .ps-pill--gold{color:#f2d79c;border-color:rgba(212,146,58,.58);background:#372c18}
.pspage .idpills .ps-pill--green{color:#8cc196;border-color:rgba(87,178,106,.55);background:#1f2c21}
.pspage .idpills .ps-pill--grey{color:var(--text-dim);border-color:#4d453c;background:#302b28}
.pspage .idpills .ps-pill--blue{color:#93b6dc;border-color:rgba(90,149,214,.55);background:#1e2833}
.pspage .ps-hidden{display:inline-flex;align-items:center;gap:7px;font-weight:600;color:#5f584e}
.pspage .ps-hidden .i{font-size:12px}

/* ── uniform pill columns ──────────────────────────────────
   Where several pills share a column they are all set to the width
   the longest label in that column needs, and centred in it. Ragged
   widths down a column read as an accident; a pill wider than its
   own longest word is just empty space. Each figure below is the
   measured width of that column's longest label. */
.pspage .tbl td > .ps-pill,
.pspage .tbl td > .cls{justify-content:center;text-align:center}
.pspage #pane-warrants .tbl td > .ps-pill{width:135px;justify-content:center}  /* Awaiting review */
.pspage #pane-warrants .tbl th:nth-child(2),
.pspage #pane-warrants .tbl td:nth-child(2),
.pspage #pane-warrants .tbl th:nth-child(4),
.pspage #pane-warrants .tbl td:nth-child(4){text-align:center}
.pspage #pane-criminal .tbl td > .cls{width:116px}           /* Misdemeanour  */
.pspage #pane-criminal .tbl td > .ps-pill{width:92px}        /* Convicted     */
.pspage #pane-criminal .charge > .cls{width:116px}
.pspage #pane-criminal .charge > .ps-pill{width:92px}
.pspage .notehead > .ps-pill{width:109px;justify-content:center}  /* Intelligence */
.pspage .smstate{width:83px}                                 /* Not held      */

/* ── WARRANTS ─────────────────────────────────────────────
   A warrant is not owned by this page. Every row is a way through to
   the warrant's own page, so the row behaves like a link: the whole
   row is the target and the arrow at the end says so. */
.pspage .tbl--go tbody tr{cursor:pointer}
.pspage .tbl--go tbody tr:hover td{background:rgba(212,146,58,.05)}
.pspage .tbl--go tbody tr:hover .wopen .i{color:var(--gold)}
.pspage .wopen{width:34px;text-align:right}
.pspage .wopen .i{font-size:12px;color:#5a5249;transition:.14s var(--ease)}
/* The type is a quiet tag, not a second status pill — the status is the
   thing being read, the type is what kind of thing it is. One width for
   all four codes, so the column is a straight edge rather than four
   ragged tags. */
.pspage .wkind{display:inline-flex;align-items:center;justify-content:center;width:44px;
  padding:3px 0;border-radius:5px;white-space:nowrap;
  font-family:var(--mono);
  font-size:10.5px;font-weight:700;letter-spacing:.04em;color:var(--text-dim);
  border:1px solid var(--border);background:#272423}
/* The key, spelled out under the table. A code nobody can read is worse
   than the ragged column it replaced. */
.pspage .wkey{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;
  padding:11px 14px;border-top:1px solid var(--line);background:#211e1d}
.pspage .wkey:empty{display:none}
.pspage .wkeyitem{display:inline-flex;align-items:center;gap:8px;
  font-size:11px;color:var(--text-faint)}
/* One line, always: the reason a judge refused an application can run
   long, and a row that grows to three lines breaks the rhythm of the
   table. The full text is on the row's title and on the warrant page. */
.pspage .wsub{display:block;margin-top:3px;font-style:normal;font-size:11px;line-height:1.5;
  color:var(--text-faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Everything but the subject holds one line, so the subject column takes
   whatever is left and the rows stay one height. */
.pspage #pane-warrants .tbl td{vertical-align:middle;white-space:nowrap}
.pspage #pane-warrants .tbl td:nth-child(3){white-space:normal;width:100%;max-width:0}
.pspage #pane-warrants .tbl td:nth-child(3) > b{display:block;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.pspage .wnone{color:var(--text-faint);font-style:normal}
/* Active is separated from the rest: it is the only state that means
   something is outstanding now, so it gets its own weight and a rule
   between it and the historic filters. */
/* Active is the same chip as the rest. What marks it out is the count —
   the one number on this row that means something is outstanding right
   now — and the shield beside it. No tinted background: the row already
   has a red pill in it and two reds fight. */
.pspage .chip--live .i{font-size:12px;color:var(--amber)}
.pspage .chip--live .ps-n{color:#d98d86;background:rgba(201,82,74,.18)}
.pspage .chip--live:hover .ps-n{color:#e0968f}
.pspage .chip--live.ps-on .i{color:var(--gold-hi)}
.pspage .chip--live.ps-on .ps-n{color:#e8a49c;background:rgba(201,82,74,.26)}
/* Nothing outstanding is worth saying quietly. */
.pspage .chip--quiet .i{color:#5a5249}
.pspage .chip--quiet .ps-n,
.pspage .chip--quiet:hover .ps-n{color:#9a9083;background:#312b26}
.pspage .chip--quiet.ps-on .ps-n{color:var(--gold-hi);background:rgba(212,146,58,.2)}
.pspage .chipsep{width:1px;height:18px;background:var(--border);margin:0 3px}

/* Narrow: the two people and the applied date go before the subject does.
   Who signed it is on the warrant's own page; which warrant it is, what
   kind and where it stands are not negotiable. */
@media (min-width:961px) and (max-width:1478px){
  .pspage #pane-warrants .tbl th:nth-child(7),
.pspage #pane-warrants .tbl td:nth-child(7),
.pspage #pane-warrants .tbl th:nth-child(6),
.pspage #pane-warrants .tbl td:nth-child(6){display:none}
}
@media (max-width:960px){
  .pspage #pane-warrants .tbl th:nth-child(7),
.pspage #pane-warrants .tbl td:nth-child(7),
.pspage #pane-warrants .tbl th:nth-child(6),
.pspage #pane-warrants .tbl td:nth-child(6){display:none}
}

@media (min-width:961px) and (max-width:1198px){
  .pspage #pane-warrants .tbl th:nth-child(5),
.pspage #pane-warrants .tbl td:nth-child(5){display:none}
}
@media (max-width:868px){
  .pspage #pane-warrants .tbl th:nth-child(5),
.pspage #pane-warrants .tbl td:nth-child(5){display:none}
}

@media (min-width:961px) and (max-width:998px){
  .pspage #pane-warrants .tbl th:nth-child(2),
.pspage #pane-warrants .tbl td:nth-child(2){display:none}
  /* No type column, no need for its key. */
  .pspage .wkey{display:none}
  /* Down here the subject is allowed to wrap: three columns and a link
     arrow is the whole row, and cutting the subject to an ellipsis on a
     phone would leave nothing worth reading. */
  .pspage #pane-warrants .tbl td{white-space:normal}
  .pspage #pane-warrants .tbl td:nth-child(3){max-width:none;width:auto}
  .pspage #pane-warrants .tbl td:nth-child(3) > b{white-space:normal;overflow:visible}
  .pspage #pane-warrants .tbl td > .ps-pill{width:auto}
  .pspage .wsub{white-space:normal;overflow:visible}
  /* The whole row is the link, so the arrow is decoration the width
     cannot afford here. */
  .pspage #pane-warrants .tbl th:last-child,
.pspage #pane-warrants .wopen{display:none}
  .pspage #pane-warrants .tbl .mono{font-size:11px}
  .pspage .tbl th,
.pspage .tbl td{padding-left:10px;padding-right:10px}
}
@media (max-width:668px){
  .pspage #pane-warrants .tbl th:nth-child(2),
.pspage #pane-warrants .tbl td:nth-child(2){display:none}
  /* No type column, no need for its key. */
  .pspage .wkey{display:none}
  /* Down here the subject is allowed to wrap: three columns and a link
     arrow is the whole row, and cutting the subject to an ellipsis on a
     phone would leave nothing worth reading. */
  .pspage #pane-warrants .tbl td{white-space:normal}
  .pspage #pane-warrants .tbl td:nth-child(3){max-width:none;width:auto}
  .pspage #pane-warrants .tbl td:nth-child(3) > b{white-space:normal;overflow:visible}
  .pspage #pane-warrants .tbl td > .ps-pill{width:auto}
  .pspage .wsub{white-space:normal;overflow:visible}
  /* The whole row is the link, so the arrow is decoration the width
     cannot afford here. */
  .pspage #pane-warrants .tbl th:last-child,
.pspage #pane-warrants .wopen{display:none}
  .pspage #pane-warrants .tbl .mono{font-size:11px}
  .pspage .tbl th,
.pspage .tbl td{padding-left:10px;padding-right:10px}
}


/* Five filters will not sit beside a title on a narrow screen, so the
   header gives up its fixed height and lets them wrap under it. */
@media (min-width:961px) and (max-width:1378px){
  .pspage #pane-warrants .panel > header{height:auto;min-height:40px;flex-wrap:wrap;
    padding-top:9px;padding-bottom:9px;row-gap:9px}
  .pspage #pane-warrants .panel > header .ps-side{flex-wrap:wrap}
  .pspage #pane-warrants .subtabs{flex-wrap:wrap;row-gap:7px}
}
@media (max-width:960px){
  .pspage #pane-warrants .panel > header{height:auto;min-height:40px;flex-wrap:wrap;
    padding-top:9px;padding-bottom:9px;row-gap:9px}
  .pspage #pane-warrants .panel > header .ps-side{flex-wrap:wrap}
  .pspage #pane-warrants .subtabs{flex-wrap:wrap;row-gap:7px}
}


/* ── CITATIONS ────────────────────────────────────────────
   The offence gets the room: some run to a full clause, and truncating
   the one thing the row is about to fit a button nobody presses was the
   wrong trade. Nothing here is actionable — payment is recorded when the
   player pays — so the row's only job is to open its report. */
.pspage .citlist{display:flex;flex-direction:column}
.pspage .cithead,
.pspage .citrow{display:grid;align-items:center;
  grid-template-columns:132px 1fr 108px 108px 92px 30px;gap:14px}
.pspage .cithead{padding:8px 16px;background:#252220;border-bottom:1px solid #3a342c;
  font-size:10px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:#8a8073}
.pspage .cithead span:nth-child(5){text-align:right}
.pspage .citrow{width:100%;text-align:left;padding:11px 16px;border-bottom:1px solid #322c26;
  transition:.14s var(--ease)}
.pspage .citrow:hover{background:rgba(255,255,255,.02)}
.pspage .citrow.ps-open{background:#221f1d}
.pspage .cref{font-family:var(--mono);font-size:11px;
  color:var(--text-dim);white-space:nowrap}
.pspage .coff{min-width:0}
.pspage .coff b{display:block;font-size:12.5px;font-weight:700;color:var(--parch);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pspage .coff em{display:block;margin-top:3px;font-style:normal;font-size:11px;color:var(--text-faint)}
.pspage .cwhen{font-size:12px;color:var(--text-dim);white-space:nowrap}
.pspage .cwhen em{display:block;margin-top:3px;font-style:normal;font-size:10.5px;color:var(--text-faint)}
.pspage .camt{text-align:right;font-size:13px;font-weight:800;color:var(--text-dim);
  font-variant-numeric:tabular-nums}
.pspage .camt--owed{color:var(--gold-hi)}
.pspage .citrow .chev{display:grid;place-items:center;font-size:11px;color:#5a5249;
  transition:.16s var(--ease)}
.pspage .citrow:hover .chev{color:var(--text-dim)}
.pspage .citrow.ps-open .chev{transform:rotate(180deg);color:var(--gold)}

/* The report, laid out the same way a licence is: a strip of particulars
   across the top, then the two things worth reading side by side. */
.pspage .citdet{padding:18px 16px 20px;border-bottom:1px solid #322c26;background:#1b1917}
.pspage .citdet[hidden]{display:none}
.pspage .citwrap{display:flex;flex-direction:column;gap:1px;
  border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--border)}
.pspage .citstrip{display:flex;flex-wrap:wrap;gap:8px 40px;padding:13px 16px;background:#242120}
.pspage .citstrip > div{display:flex;flex-direction:column;gap:4px;min-width:0}
.pspage .citstrip dt{font-size:10px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:#8a8073}
.pspage .citstrip dd{font-size:12px;font-weight:700;color:var(--parch)}
.pspage .citstrip dd.mono{font-family:var(--mono);font-size:11.5px}
/* Stacked, not side by side. An account is four or five lines of prose
   and the evidence is a list of however many items there are — set them
   in two columns and one of them is always half empty. Stacked, each
   band is exactly as tall as what is in it. */
.pspage .citgrid2{display:flex;flex-direction:column;gap:1px;background:var(--border)}
.pspage .citpane{position:relative;display:flex;flex-direction:column;padding:14px 16px;
  background:#242120;min-width:0}
.pspage .citpane--why{max-height:180px}
.pspage .citpane--ev{max-height:340px}
.pspage .citpane h4{flex:none;display:flex;align-items:center;gap:8px;height:16px;
  font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:#8a8073;margin-bottom:11px}
.pspage .citpane h4 .h4n{font-size:10px;font-weight:800;color:#8a8175;padding:1px 6px;
  border-radius:4px;background:#2e2926;letter-spacing:.06em}
.pspage .citscroll{flex:1;min-height:0;overflow-y:auto;scrollbar-gutter:stable;
  padding-right:4px;margin-right:-4px;scrollbar-color:#3d362f #2a2624}
.pspage .citscroll::-webkit-scrollbar-track{background:#2a2624;border-radius:9px;
  border:3px solid transparent;background-clip:content-box}
.pspage .citwhy{margin:0;font-size:12px;line-height:1.65;color:var(--text-dim)}
.pspage .evlist{display:flex;flex-direction:column;gap:6px}
.pspage .evrow{display:grid;grid-template-columns:116px 1fr;gap:10px;align-items:baseline;
  padding:8px 10px;border-radius:7px;border:1px solid var(--border);background:#262220}
.pspage .evkind{font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:var(--gold);white-space:nowrap}
.pspage .evwhat{font-size:11.5px;line-height:1.5;color:var(--text-dim);min-width:0}
/* Who wrote it, and the fact that neither they nor anyone else can go
   back and change it. */
.pspage .citfoot{display:flex;align-items:flex-start;gap:9px;margin-top:12px;padding:10px 12px;
  border-radius:8px;border:1px solid var(--border);background:#201d1c}
.pspage .citfoot .i{font-size:12px;color:var(--text-faint);flex:none;margin-top:1px}
.pspage .citfoot span{font-size:11px;line-height:1.55;color:var(--text-faint)}

/* Columns leave in order of what an officer can do without: the
   reference first, then the date it was written. The offence, what is
   owed and when it is owed by stay to the last. */
@media (min-width:961px) and (max-width:1478px){
  .pspage .cithead,
.pspage .citrow{grid-template-columns:1fr 108px 108px 92px 30px}
  .pspage .cithead > span:nth-child(1),
.pspage .citrow > span:nth-child(1){display:none}
}
@media (max-width:960px){
  .pspage .cithead,
.pspage .citrow{grid-template-columns:1fr 108px 108px 92px 30px}
  .pspage .cithead > span:nth-child(1),
.pspage .citrow > span:nth-child(1){display:none}
}

@media (min-width:961px) and (max-width:1158px){
  .pspage .cithead,
.pspage .citrow{grid-template-columns:1fr 108px 92px 30px}
  .pspage .cithead > span:nth-child(3),
.pspage .citrow > span:nth-child(3){display:none}
}
@media (max-width:828px){
  .pspage .cithead,
.pspage .citrow{grid-template-columns:1fr 108px 92px 30px}
  .pspage .cithead > span:nth-child(3),
.pspage .citrow > span:nth-child(3){display:none}
}

@media (max-width:608px){
  .pspage .cithead,
.pspage .citrow{grid-template-columns:1fr 92px 30px;gap:10px}
  .pspage .cithead > span:nth-child(4),
.pspage .citrow > span:nth-child(4){display:none}
  .pspage .coff b{white-space:normal}
  .pspage .evrow{grid-template-columns:1fr;gap:4px}
}


/* Where the stop happened, sitting above the account rather than in the
   particulars. It is generated from the officer's position, so it reads
   as a fact of the report and is marked as not typed. */
.pspage .citloc{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:11px;
  padding:8px 11px;border-radius:7px;border:1px solid var(--border);background:#262220}
.pspage .citloc .i{font-size:12px;color:var(--gold);flex:none}
.pspage .citloc span{font-size:11.5px;font-weight:700;color:var(--parch)}
.pspage .citloc em{font-style:normal;font-size:10px;font-weight:800;letter-spacing:.11em;
  text-transform:uppercase;color:var(--text-faint);margin-left:auto;white-space:nowrap}

/* Images are links, not files. The tile says which host holds it and in
   what format, so a dead link is obvious before it is clicked. */
.pspage .evlab{display:flex;align-items:center;gap:8px;margin:14px 0 8px;
  font-size:10px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:#968c7e}
.pspage .evlab span{font-size:10px;font-weight:800;color:#8a8175;padding:1px 5px;border-radius:4px;
  background:#2e2926}
.pspage .evlab::after{content:"";flex:1;height:1px;background:var(--line)}
/* Evidence is the pictures themselves. A grid of thumbnails says more in
   one glance than a list of filenames ever did, and one click opens the
   full size without leaving the file. */
.pspage .evgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:10px}
.pspage .evtile{display:block;text-align:left;border-radius:8px;border:1px solid var(--border);
  background:#262220;overflow:hidden;transition:.14s var(--ease)}
.pspage .evtile:hover{border-color:#5a4c39;background:#2b2624}
.pspage .evframe{position:relative;display:grid;place-items:center;height:104px;
  background:#1a1817;border-bottom:1px solid var(--border);overflow:hidden}
.pspage .evimg{width:100%;height:100%;object-fit:cover;display:block}
.pspage .evimg.ps-dead{display:none}
/* The glyph sits under the picture and only shows through when there is
   no picture — a dead link reads as a dead link, not as a blank box. */
.pspage .evfall{position:absolute;inset:0;display:grid;place-items:center;z-index:0}
.pspage .evfall .i{font-size:20px;color:#4a443c}
.pspage .evfall.ps-on .i{color:#8a6f5c}
.pspage .evimg{position:relative;z-index:1}
.pspage .evplay{position:absolute;z-index:2;display:grid;place-items:center;width:34px;height:34px;
  border-radius:50%;background:rgba(23,20,15,.72);border:1px solid rgba(240,214,154,.35)}
.pspage .evplay .i{font-size:16px;color:var(--gold-hi)}
.pspage .evtile:hover .evplay{background:rgba(23,20,15,.85);border-color:var(--gold)}
.pspage .evcap{display:block;padding:8px 10px;min-width:0}
.pspage .evcap b{display:block;font-size:11.5px;font-weight:700;color:var(--parch);line-height:1.35;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pspage .evcap em{display:block;margin-top:3px;font-style:normal;font-size:10.5px;color:var(--text-faint);
  font-family:var(--mono)}
.pspage .evtile--edit{position:relative}
.pspage .evtile--edit .xbtn{position:absolute;top:6px;right:6px;z-index:3;
  background:rgba(23,20,15,.78);border-radius:6px}

/* ── the viewer ───────────────────────────────────────── */
.pspage .ps-modal--wide{max-width:1040px;width:calc(100vw - 80px)}
.pspage .evstage{position:relative;display:grid;place-items:center;min-height:340px;
  max-height:calc(100vh - 260px);padding:16px;background:#141211}
.pspage .evbig{max-width:100%;max-height:calc(100vh - 300px);border-radius:8px;display:block}
.pspage .evbig.ps-dead{display:none}
/* An author display: beats the browser's own [hidden] rule, so the
   hidden state has to be declared here or the notice shows over a
   perfectly good picture. */
.pspage .evdead{display:flex;flex-direction:column;align-items:center;gap:9px;max-width:460px;
  text-align:center;padding:26px 20px}
.pspage .evdead[hidden]{display:none}
.pspage .evdead .i{font-size:22px;color:var(--gold)}
.pspage .evdead b{font-size:13px;font-weight:800;color:var(--parch)}
.pspage .evdead span{font-size:11.5px;line-height:1.6;color:var(--text-faint)}
.pspage .evdead code{font-family:var(--mono);font-size:11px;
  color:var(--text-dim);padding:7px 10px;border-radius:6px;border:1px solid var(--border);
  background:#201d1c;word-break:break-all}
.pspage .evnav{position:absolute;top:50%;transform:translateY(-50%);z-index:4;
  display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--border);background:rgba(26,24,23,.9);color:var(--text-dim);
  transition:.14s var(--ease)}
.pspage .evnav:hover{border-color:var(--gold);color:var(--gold-hi)}
.pspage .evnav--prev{left:14px}
.pspage .evnav--next{right:14px}
.pspage .evnav .i{font-size:13px}

/* ── ISSUE A CITATION ─────────────────────────────────────
   Fields the officer cannot change are shown, not hidden: seeing that
   the fine and the due date were worked out for you is the point. */
.pspage .inp--auto{color:var(--text-faint);background:#201d1c;cursor:default}
.pspage .autotag{font-style:normal;font-size:10px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:#8a8073;margin-left:8px}
.pspage .autotag--ok{color:#7fae87}
/* The pin sits inside the field rather than beside it, so a typed
   location still reads as a location. */
.pspage .locfield{position:relative;display:block}
.pspage .locfield .i{position:absolute;left:11px;top:50%;transform:translateY(-50%);
  font-size:12px;color:var(--gold);pointer-events:none}
.pspage .locfield .inp{padding-left:32px}
.pspage .ta--tall{min-height:120px}

.pspage .evbuild{border-top:1px solid var(--line);padding-top:14px}
.pspage .evhead{display:flex;align-items:center;gap:8px;margin-bottom:10px;
  font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#8a8073}
.pspage .evhead .ps-n{font-size:10px;font-weight:800;color:#8a8175;padding:1px 6px;border-radius:4px;
  background:#2e2926;letter-spacing:.06em}
.pspage .evadd{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;align-items:center}
.pspage .evnote{display:flex;align-items:flex-start;gap:9px;margin:10px 0 0;
  font-size:11px;line-height:1.55;color:var(--text-faint)}
.pspage .evnote .i{font-size:12px;color:var(--text-faint);flex:none;margin-top:1px}
.pspage .evnote b{color:var(--text-dim);font-family:var(--mono);
  font-size:11px}
.pspage .evempty{margin:12px 0 0;font-size:11.5px;line-height:1.6;color:var(--text-faint)}


@media (min-width:961px) and (max-width:1058px){
  .pspage .evadd,
.pspage .evadd--charge{grid-template-columns:1fr}
}
@media (max-width:728px){
  .pspage .evadd,
.pspage .evadd--charge{grid-template-columns:1fr}
}


/* ── INTELLIGENCE DATABASE ────────────────────────────────
   Affiliation first. It is the thing an officer wants to know before
   they read a word of the rest, so it is lifted out of the records and
   stated across the top of the tab. */
/* One line, whatever the file carries. The position is stated in words,
   two affiliations are shown, and the rest are behind the button — ten
   chips wrapped over four rows is not a summary of anything. */
.pspage .affstrip{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;
  padding:12px 16px;border-bottom:1px solid var(--line);background:#211e1d}
.pspage .affwrap{display:flex;flex-wrap:wrap;gap:8px;min-width:0}
.pspage .affall{margin-left:auto;flex:none}
.pspage .affall .i:last-child{font-size:10.5px;opacity:.7}
.pspage .afflab{display:flex;align-items:center;gap:8px;flex:none;
  font-size:10px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:#968c7e}
.pspage .afflab .ps-n{font-size:10px;font-weight:800;color:#8a8175;padding:2px 7px;border-radius:4px;
  background:#2e2926;letter-spacing:.06em;text-transform:none}
.pspage .afflab .i{font-size:13px;color:var(--gold)}
.pspage .afflab--none{color:var(--text-faint)}
.pspage .afflab--none .i{color:#5a5249}
.pspage .affchip{display:inline-flex;align-items:center;gap:9px;padding:6px 11px;border-radius:8px;
  flex:none;max-width:320px;white-space:nowrap;
  border:1px solid rgba(212,146,58,.34);background:rgba(212,146,58,.08);
  transition:.14s var(--ease)}
.pspage .affchip:hover{border-color:var(--gold);background:rgba(212,146,58,.14)}
.pspage .affchip b{font-size:11.5px;font-weight:800;color:var(--gold-hi);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
/* A group they have left is kept, but it is not a warning. */
.pspage .affchip--old{border-color:var(--border);background:#232020}
.pspage .affchip--old b{color:var(--text-dim);font-weight:700}
.pspage .affchip--old:hover{border-color:#4a423a;background:#282422}
.pspage .affchip em{font-style:normal;font-size:11px;color:var(--text-faint)}

/* Search, kind, then handling — the handling chips are pushed to the far
   end, so the band reads as "find" on the left and "narrow" on the
   right. Adding a record is the tab's action and lives in its header. */
.pspage .filterbar--int{gap:9px;flex-wrap:nowrap}
.pspage .filterbar--int .subtabs{margin-left:auto;flex:none}
/* Two rows for one band read as two decisions. Everything is held on
   one line and the search field gives up the width, because a short
   search field is still a search field and a wrapped filter row is a
   mess. */
.pspage .filterbar--int .srchbox{flex:1 1 200px;min-width:172px;max-width:300px}
.pspage .filterbar--int select.inp--slim{flex:1 1 160px;width:auto;min-width:128px;max-width:230px}
.pspage .filterbar--int .chip{padding:0 9px;gap:6px}
.pspage .filterbar--int .subtabs{gap:6px}
/* Narrow: the filters stack and the handling chips wrap rather than
   running off the edge of the panel. */
@media (min-width:961px) and (max-width:1498px){
  .pspage .filterbar--int{flex-wrap:wrap}
  .pspage .filterbar--int .subtabs{margin-left:auto;flex-wrap:wrap;row-gap:7px}
  .pspage .filterbar--int .srchbox{flex:1 1 200px;max-width:none}
  .pspage .filterbar--int select.inp--slim{flex:1 1 200px;width:auto;max-width:none}
}
@media (max-width:960px){
  .pspage .filterbar--int{flex-wrap:wrap}
  .pspage .filterbar--int .subtabs{margin-left:auto;flex-wrap:wrap;row-gap:7px}
  .pspage .filterbar--int .srchbox{flex:1 1 200px;max-width:none}
  .pspage .filterbar--int select.inp--slim{flex:1 1 200px;width:auto;max-width:none}
}

@media (max-width:568px){
  .pspage .filterbar--int .srchbox,
.pspage .filterbar--int select.inp--slim{flex:1 1 100%;width:100%}
}

.pspage .srchbox{position:relative;display:block;flex:1;min-width:180px;max-width:320px}
.pspage .srchbox .i{position:absolute;left:11px;top:50%;transform:translateY(-50%);
  font-size:12px;color:#8a8073;pointer-events:none}
/* One height for everything in the band — the search field, the select
   and the chips are the same control to the eye and have to measure the
   same. Padding is set to nothing vertically and the height does the
   work, because a select will not take padding the way an input does. */
.pspage .filterbar--int .inp,
.pspage .filterbar--int select.inp,
.pspage .filterbar--int .chip{height:28px;
  padding-top:0;padding-bottom:0;font-size:12px}
.pspage .filterbar--int .chip{font-size:11px}
.pspage .srchbox .inp{padding-left:32px;padding-right:11px}
.pspage select.inp--slim{width:auto;min-width:230px;max-width:340px}

/* Each record says what kind of intelligence it is before it says
   anything else — the kind is why you are reading it. */
.pspage .nkind{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:6px;
  white-space:nowrap;font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--text-dim);border:1px solid var(--border);background:#272423}
.pspage .nkind .i{font-size:12px;color:var(--gold)}
/* The grading sits in a band of its own between the heading and the
   record: it qualifies everything below it, so it reads better as a
   line across the card than as the first sentence of the body. */
.pspage .noteline{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;
  padding:9px 14px;background:#1e1c1b;border-bottom:1px solid var(--line)}
/* The grade is two judgements, not one: how good the source is and how
   well the information stands up. Both are shown in full. */
.pspage .grade{display:inline-flex;align-items:center;gap:9px}
.pspage .grade b{display:grid;place-items:center;width:30px;height:22px;border-radius:5px;
  font-family:var(--mono);font-size:11px;font-weight:700;
  color:var(--gold-hi);border:1px solid rgba(212,146,58,.34);background:rgba(212,146,58,.10)}
.pspage .grade em{font-style:normal;font-size:11px;color:var(--text-faint)}
.pspage .nref{font-family:var(--mono);font-size:11px;
  color:var(--text-faint)}
.pspage .nrev{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:#d9a06a}
.pspage .nrev .i{font-size:11px}

.pspage .affbox{margin:12px 14px 0;border-radius:9px;border:1px solid rgba(212,146,58,.30);
  background:rgba(212,146,58,.06);overflow:hidden}
.pspage .affhead{display:flex;align-items:center;gap:9px;padding:10px 13px;
  border-bottom:1px solid rgba(212,146,58,.20)}
.pspage .affhead .i{font-size:13px;color:var(--gold)}
.pspage .affhead b{font-size:12.5px;font-weight:800;color:var(--gold-hi);margin-right:auto}
.pspage .affgrid{display:flex;flex-wrap:wrap;gap:8px 34px;margin:0;padding:11px 13px 0}
.pspage .affgrid > div{display:flex;flex-direction:column;gap:3px}
.pspage .affgrid dt{font-size:10px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:#8a8073}
.pspage .affgrid dd{margin:0;font-size:12px;font-weight:700;color:var(--parch)}
.pspage .affnote{margin:10px 13px 12px;font-size:11.5px;line-height:1.6;color:var(--text-dim)}

/* What the record points at: people, vehicles, places. Each one is a
   search, so a name in one record finds it in all the others. */
.pspage .nlinks{display:flex;flex-wrap:wrap;gap:7px;margin:0 14px}
/* The body's own bottom padding is the gap above whatever follows it,
   so the links and the pictures add nothing on top. One number, 14px,
   above and below every block in the card. */
.pspage .nlink{display:inline-flex;align-items:center;gap:7px;padding:5px 10px;border-radius:7px;
  font-size:11px;color:var(--text-dim);border:1px solid var(--border);background:#232020;
  transition:.14s var(--ease)}
.pspage .nlink:hover{border-color:#5a4c39;color:var(--parch);background:#2a2523}
.pspage .nlink .i{font-size:11px;color:#968c7e}
.pspage .nlink:hover .i{color:var(--gold)}
/* Every block inside a record carries its own bottom margin rather than
   relying on :last-of-type — the footer is a div too, so "last of type"
   never matched the links or the pictures and they sat flush against it. */
.pspage .nev{margin:0 14px 14px}
.pspage .nlinks{margin-bottom:14px}
.pspage .nlinks + .nev{margin-top:0}
.pspage .affbox + .notebody{padding-top:12px}

/* The composer explains what each choice means as it is made, rather
   than leaving the officer to guess what "restricted" costs them. */
.pspage .fldnote{display:flex;align-items:flex-start;gap:9px;margin:9px 0 0;
  font-size:11px;line-height:1.55;color:var(--text-faint)}
.pspage .fldnote .i{font-size:12px;color:var(--gold);flex:none;margin-top:1px}
.pspage .fldnote b{color:var(--text-dim)}
/* The two adders name themselves so the shape is explicit rather than
   inherited by accident: a link row needs a kind, a media row does not. */
.pspage .evadd--url{grid-template-columns:1fr 1fr auto}
.pspage .evadd--link{grid-template-columns:150px 1fr auto}
.pspage .evadd--charge{grid-template-columns:1fr 88px auto}
/* The hint sits under the label rather than beside it — a whole sentence
   of guidance does not belong on a label line. */
.pspage .fldhint{font-style:normal;font-size:11px;line-height:1.5;color:var(--text-faint);
  margin:-1px 0 3px}
.pspage .evhead .autotag{margin-left:0}
/* A link chip in the composer carries its own remove button. */
.pspage .evbuild .nlinks{margin:0}
.pspage .evbuild .nlinks.gap9{margin-top:9px}
.pspage .nlinks .nlink .xbtn{margin-left:2px;width:18px;height:18px}
.pspage .nlinks .nlink .xbtn .i{font-size:10px}
@media (min-width:961px) and (max-width:1058px){ .pspage .evadd--link{grid-template-columns:1fr} }
@media (max-width:728px){ .pspage .evadd--link{grid-template-columns:1fr} }


/* The affiliated flag is a button, not a label — it is the way into the
   records that put it there, so it says so with an arrow. */
.pspage .pill--go{gap:7px;transition:.14s var(--ease)}
.pspage .pill--go em{font-style:normal;font-weight:800;padding:0 5px;border-radius:4px;
  background:rgba(0,0,0,.22)}
.pspage .pill--go .i:last-child{font-size:10px;opacity:.75}
.pspage .pill--go:hover{filter:brightness(1.22)}
.pspage .pill--go:hover .i:last-child{opacity:1}

/* ── the affiliation report ───────────────────────────── */
.pspage .affsum{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);
  border:1px solid var(--border);border-radius:9px;overflow:hidden;margin-bottom:16px}
.pspage .affsum > div{padding:11px 14px;background:#242120}
.pspage .affsum dt{font-size:10px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:#8a8073;margin-bottom:5px}
.pspage .affsum dd{margin:0;font-size:20px;font-weight:800;letter-spacing:-.02em;color:var(--parch)}
.pspage .affsum dd.warnv{color:var(--gold-hi)}
.pspage .affsum dd.bad{color:#dd7b73}
/* The report's group headings are their own thing, not the endorsement
   label borrowed: that one is sticky inside a scroller and carries its
   own background, and here it sat flush against the row above it. */
.pspage .afgl{display:flex;align-items:center;gap:8px;margin:22px 0 10px;
  font-size:10px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:#968c7e}
.pspage .afgl:first-child{margin-top:0}
.pspage .afgl span{font-size:10px;font-weight:800;color:#8a8175;padding:1px 5px;border-radius:4px;
  background:#2e2926}
.pspage .afgl::after{content:"";flex:1;height:1px;background:var(--line)}
.pspage .afgl--old{color:#5f584e}
.pspage .afflist{display:flex;flex-direction:column;gap:7px}
/* The standing column is pinned so the three pills stack on one edge —
   an auto column put FORMER thirty pixels left of CONFIRMED. */
.pspage .affrow > .ps-pill{width:104px;justify-content:center}
.pspage .affrow{display:grid;grid-template-columns:26px 1fr 104px 96px 20px;align-items:center;gap:12px;
  text-align:left;padding:11px 13px;border-radius:9px;border:1px solid var(--border);
  background:#242120;transition:.14s var(--ease)}
.pspage .affrow:hover{border-color:#5a4c39;background:#2a2523}
.pspage .affrow-i{display:grid;place-items:center}
.pspage .affrow-i .i{font-size:14px;color:var(--gold)}
.pspage .afflist--old .affrow-i .i{color:#5a5249}
.pspage .affrow-m{min-width:0}
.pspage .affrow-m b{display:block;font-size:12.5px;font-weight:800;color:var(--parch)}
.pspage .affrow-m em{display:block;margin-top:3px;font-style:normal;font-size:11px;color:var(--text-dim)}
.pspage .affrow-m i{display:block;margin-top:5px;font-style:normal;font-size:11px;line-height:1.5;
  color:var(--text-faint)}
.pspage .affrow-w{text-align:right;font-size:11px;color:var(--text-dim);white-space:nowrap}
.pspage .affrow-w em{display:block;margin-top:3px;font-style:normal;font-size:10.5px;color:var(--text-faint)}
.pspage .affrow-g{display:grid;place-items:center}
.pspage .affrow-g .i{font-size:11px;color:#5a5249}
.pspage .affrow:hover .affrow-g .i{color:var(--gold)}
.pspage .afflist--old .affrow{background:#221f1e}
.pspage .afflist--old .affrow-m b{color:var(--text-dim)}
@media (min-width:961px) and (max-width:998px){
  .pspage .affrow{grid-template-columns:26px 1fr 104px}
  .pspage .affrow-w,
.pspage .affrow-g{display:none}
}
@media (max-width:668px){
  .pspage .affrow{grid-template-columns:26px 1fr 104px}
  .pspage .affrow-w,
.pspage .affrow-g{display:none}
}


/* ── amending and withdrawing a record ────────────────── */
.pspage .amendbar{display:flex;align-items:flex-start;gap:9px;margin-bottom:16px;padding:11px 13px;
  border-radius:9px;border:1px solid var(--border);background:#201d1c}
.pspage .amendbar .i{font-size:12px;color:var(--gold);flex:none;margin-top:1px}
.pspage .amendbar span{font-size:11.5px;line-height:1.6;color:var(--text-faint)}
.pspage .amendbar b{color:var(--text-dim);font-weight:700}
/* A record that has been amended says so on its face, and the line is a
   way into every version it has ever had — an amendment nobody can see
   is a rewrite. */
.pspage .amended{display:inline-flex;align-items:center;gap:7px;margin-left:12px;padding:3px 8px;
  border-radius:6px;border:1px solid var(--border);background:#232020;
  font-size:11px;color:var(--text-faint);transition:.14s var(--ease)}
.pspage .amended:hover{border-color:#5a4c39;color:var(--text-dim);background:#282422}
.pspage .amended .i{font-size:11px;color:#968c7e}
.pspage .amended:hover .i{color:var(--gold)}
.pspage .amended em{font-style:normal;font-size:10px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:#8a8073}

/* ── a withdrawn record ───────────────────────────────── */
.pspage .chip--gone .i{font-size:11px;color:#a8635c}
.pspage .chip--gone.ps-on{color:#f0b4ad;border-color:rgba(201,82,74,.5);background:rgba(201,82,74,.16)}
.pspage .chip--gone.ps-on .i{color:#e0968f}
.pspage .ps-note--gone{border-color:rgba(201,82,74,.28)}
/* Struck through, not hidden. What was once said about somebody, and
   who decided it should not have been, both stay readable. */
.pspage .ps-note--gone .notehead b,
.pspage .ps-note--gone .notebody{text-decoration:line-through;
  text-decoration-color:rgba(201,82,74,.45);text-decoration-thickness:1px}
.pspage .ps-note--gone .notehead b,
.pspage .ps-note--gone .notebody,
.pspage .ps-note--gone .nkind,
.pspage .ps-note--gone .grade b{color:var(--text-faint)}
.pspage .ps-note--gone .notebody strong{color:var(--text-faint)}
.pspage .gonebar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 14px;
  border-bottom:1px solid rgba(201,82,74,.24);background:rgba(201,82,74,.10)}
.pspage .gonebar .i{font-size:13px;color:#dd7b73;flex:none}
.pspage .gonebar > span{flex:1;min-width:200px;font-size:11.5px;line-height:1.55;color:#e0968f}
.pspage .gonebar b{color:#f0a49c;font-weight:800}
.pspage .gonebar i{display:block;margin-top:3px;font-style:normal;color:var(--text-faint)}

/* ── the history of a record ──────────────────────────── */
.pspage .gap0{margin-top:0}
.pspage .vertl{position:relative;display:flex;flex-direction:column;gap:10px;padding-left:20px}
.pspage .vertl::before{content:"";position:absolute;left:5px;top:8px;bottom:8px;width:1px;
  background:var(--line)}
.pspage .verrow{position:relative}
.pspage .verdot{position:absolute;left:-19px;top:14px;width:9px;height:9px;border-radius:50%;
  background:#4a443c;border:2px solid var(--panel)}
.pspage .verrow--now .verdot{background:var(--gold)}
.pspage .verrow--gone .verdot{background:#c9524a}
.pspage .vercard{border-radius:9px;border:1px solid var(--border);background:#242120;padding:11px 13px}
.pspage .verrow--now .vercard{border-color:rgba(212,146,58,.30);background:rgba(212,146,58,.05)}
.pspage .verrow--gone .vercard{border-color:rgba(201,82,74,.28);background:rgba(201,82,74,.06)}
.pspage .verhead{display:flex;align-items:baseline;gap:10px}
.pspage .verhead b{font-size:12px;font-weight:800;color:var(--parch);margin-right:auto}
.pspage .verhead span{font-size:11px;color:var(--text-faint);white-space:nowrap}
.pspage .verwho{margin-top:3px;font-size:11px;color:var(--text-dim)}
.pspage .verwhy{display:flex;align-items:flex-start;gap:8px;margin:9px 0 0;
  font-size:11.5px;line-height:1.55;color:var(--gold-hi)}
.pspage .verwhy .i{font-size:11px;color:var(--gold);flex:none;margin-top:2px}
.pspage .verwas{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;margin-top:10px;
  padding-top:10px;border-top:1px solid var(--line)}
.pspage .verwas dt{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:#8a8073;white-space:nowrap}
.pspage .verwas dd{margin:0;font-size:11.5px;line-height:1.6;color:var(--text-faint)}

/* What is about to be withdrawn, shown in full. Nobody should be
   confirming a reference number they cannot read back. */
.pspage .delcard{border-radius:10px;border:1px solid var(--border);background:#221f1e;overflow:hidden}
.pspage .delhead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:11px 13px;
  background:#272423;border-bottom:1px solid var(--border)}
.pspage .delhead b{font-size:12.5px;font-weight:700;color:var(--parch);margin-right:auto}
.pspage .delmeta{display:flex;align-items:center;gap:12px;padding:10px 13px;
  font-size:11px;color:var(--text-faint)}
.pspage .delwarn{display:flex;align-items:flex-start;gap:9px;margin:0;padding:11px 13px;
  border-top:1px solid var(--line);background:rgba(201,82,74,.08);
  font-size:11.5px;line-height:1.6;color:#e0968f}
.pspage .delwarn .i{font-size:13px;color:#dd7b73;flex:none;margin-top:1px}
.pspage .delwarn b{color:#f0a49c;font-weight:800}

/* ── CRIMINAL RECORD ──────────────────────────────────────
   The arrest report leads and every charge on it is listed underneath,
   on the face of the record. Nothing folds away: the charge list is the
   record, and a charge behind a click is a charge nobody reads. */
.pspage .crcases{display:flex;flex-direction:column;gap:12px;padding:14px 16px}
.pspage .crcase{border:1px solid var(--border);border-radius:10px;background:#211e1d;overflow:hidden}
.pspage .crcase.ps-open{border-color:#3f382f}
.pspage .crtop{display:flex;align-items:center;gap:11px;flex-wrap:wrap;width:100%;text-align:left;
  padding:11px 14px;background:#272423;transition:.14s var(--ease)}
.pspage .crtop:hover{background:#2c2827}
.pspage .crcase.ps-open .crtop{border-bottom:1px solid var(--border)}
.pspage .crbody[hidden]{display:none}
/* Collapsed still names every charge. "And 3 more" is how a charge gets
   missed, so the codes stay on the face of the card and the sheet is
   what opens. */
.pspage .crtags{display:flex;flex-wrap:wrap;gap:5px;flex:none;max-width:340px}
.pspage .crtag{font-family:var(--mono);font-size:10.5px;font-weight:700;
  padding:3px 7px;border-radius:5px;white-space:nowrap;border:1px solid transparent}
.pspage .crtag--f{color:#e0968f;background:rgba(201,82,74,.14);border-color:rgba(201,82,74,.32)}
.pspage .crtag--m{color:var(--gold-hi);background:rgba(212,146,58,.13);border-color:rgba(212,146,58,.3)}
.pspage .crtag--i{color:#9dc0e0;background:rgba(127,168,212,.13);border-color:rgba(127,168,212,.3)}
/* A charge that did not stick is kept, struck through — it is part of
   what was alleged even when it is not part of what was proved. */
.pspage .crtag--out{opacity:.5;text-decoration:line-through}
.pspage .crsent{font-size:11.5px;font-weight:700;color:var(--text-dim);white-space:nowrap;
  min-width:96px;text-align:right}
.pspage .crtop .chev{display:grid;place-items:center;font-size:11px;color:#5a5249;
  transition:.16s var(--ease)}
.pspage .crtop:hover .chev{color:var(--text-dim)}
.pspage .crcase.ps-open .chev{transform:rotate(180deg);color:var(--gold)}

/* The plea and what the charges carry, side by side and each labelled.
   These are the two things that decide what happens to somebody, so
   they get a band of their own rather than a sentence of prose. */
.pspage .pleagrid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border);
  border-top:1px solid var(--border)}
.pspage .pleacell{padding:12px 14px;background:#1e1c1b}
.pspage .pleacell dt{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:#8a8073;margin-bottom:7px}
.pspage .pleacell dd{margin:0}
.pspage .pleacell dd em{font-style:normal;font-size:12px;color:var(--text-faint)}
.pspage .pleabig{font-size:15px;font-weight:800;letter-spacing:-.01em;color:var(--gold-hi)}
.pspage .pleacell p{margin:8px 0 0;font-size:11.5px;line-height:1.55;color:var(--text-faint)}
@media (min-width:961px) and (max-width:1058px){ .pspage .pleagrid{grid-template-columns:1fr} }
@media (max-width:728px){ .pspage .pleagrid{grid-template-columns:1fr} }

.pspage .crbar{display:flex;align-items:center;gap:9px;padding:11px 14px;border-top:1px solid var(--line)}
.pspage .crtop > .i{font-size:15px;color:var(--gold);flex:none}
.pspage .crtitle{flex:1;min-width:200px}
/* The reference is the thing people read off the screen to each other,
   so it is set larger and with more weight than a caption deserves, and
   the line under it is no longer a whisper. */
.pspage .crtitle b{display:block;font-family:var(--mono);font-size:13px;letter-spacing:.01em;
  font-weight:700;color:var(--parch)}
.pspage .crtitle em{display:block;margin-top:4px;font-style:normal;font-size:11.5px;
  color:var(--text-dim)}

.pspage .crnone{display:inline-flex;align-items:center;gap:7px;font-size:11px;color:var(--text-faint)}
.pspage .crnone .i{font-size:12px}

/* The charge sheet. Code, class, offence, counts, what it starts at and
   what the court did with it — one line each, every line filled. */
.pspage .chlist{display:flex;flex-direction:column}
.pspage .chhead,
.pspage .chrow{display:grid;grid-template-columns:66px 126px 1fr 44px 136px 112px;gap:12px;
  align-items:center;padding:9px 14px}
.pspage .chhead{background:#252220;border-bottom:1px solid #3a342c;
  font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#8a8073}
.pspage .chhead span:nth-child(4),
.pspage .chhead span:nth-child(5){text-align:center}
.pspage .chhead span:nth-child(6){text-align:center}
.pspage .chrow{border-bottom:1px solid #2b2620}
/* The last row of the read-only sheet loses its rule; a row in the
   composer is a bordered card and must keep all four sides. Written as
   :not() rather than left to source order, because :last-child adds a
   point of specificity that the modifier class cannot answer. */
.pspage .chrow:last-child:not(.chrow--flat){border-bottom:none}
.pspage .chcode{font-family:var(--mono);font-size:11px;font-weight:700;
  color:var(--gold-hi);padding:2px 6px;border-radius:4px;background:rgba(212,146,58,.12);
  text-align:center}
.pspage .chrow > .cls{justify-content:center;width:100%}
.pspage .chname{min-width:0;font-size:12px;font-weight:700;color:var(--parch)}
.pspage .chname em{display:block;margin-top:2px;font-style:normal;font-size:11px;font-weight:600;
  color:var(--text-faint)}
.pspage .chct{font-size:11.5px;font-weight:800;color:var(--text-dim);text-align:center}
.pspage .chstart{font-size:11.5px;color:var(--text-dim);text-align:center;white-space:nowrap}
.pspage .chrow > .ps-pill{justify-content:center;width:100%}
/* The charge as it sits in the report being written: code, class,
   offence, the term it carries, a count that can be nudged, and a way
   to take it off again. */
.pspage .chrow--flat{grid-template-columns:66px 126px 1fr 136px 78px 26px;border-bottom:none;
  border:1px solid var(--border);border-radius:8px;background:#262220;margin-bottom:6px}
.pspage .chrow--flat .ctstep{justify-self:end}


/* The way through to the report the case was built on. */
.pspage .reportlink{display:grid;grid-template-columns:20px 1fr 16px;align-items:center;gap:11px;
  width:100%;text-align:left;padding:10px 12px;border-radius:9px;border:1px solid var(--border);
  background:#262220;transition:.14s var(--ease)}
.pspage .reportlink:hover{border-color:#5a4c39;background:#2b2624}
.pspage .reportlink .i{font-size:14px;color:var(--gold)}
.pspage .reportlink .i:last-child{font-size:11px;color:#5a5249}
.pspage .reportlink b{display:block;font-family:var(--mono);
  font-size:11.5px;color:var(--parch)}
.pspage .reportlink em{display:block;margin-top:3px;font-style:normal;font-size:11px;
  color:var(--text-faint)}

@media (min-width:961px) and (max-width:1478px){
  .pspage .chhead,
.pspage .chrow{grid-template-columns:66px 1fr 44px 136px 108px}
  .pspage .chhead > span:nth-child(2),
.pspage .chrow > .cls{display:none}
  .pspage .chrow--flat{grid-template-columns:66px 1fr 136px 78px 26px}
}
@media (max-width:960px){
  .pspage .chhead,
.pspage .chrow{grid-template-columns:66px 1fr 44px 136px 108px}
  .pspage .chhead > span:nth-child(2),
.pspage .chrow > .cls{display:none}
  .pspage .chrow--flat{grid-template-columns:66px 1fr 136px 78px 26px}
}

@media (min-width:961px) and (max-width:1058px){
  .pspage .chhead,
.pspage .chrow{grid-template-columns:66px 1fr 108px}
  .pspage .chhead > span:nth-child(4),
.pspage .chhead > span:nth-child(5),
.pspage .chct,
.pspage .chstart{display:none}
  .pspage .chrow--flat{grid-template-columns:66px 1fr 78px 26px}
  .pspage .chrow--flat .chterm{display:none}
}
@media (max-width:728px){
  .pspage .chhead,
.pspage .chrow{grid-template-columns:66px 1fr 108px}
  .pspage .chhead > span:nth-child(4),
.pspage .chhead > span:nth-child(5),
.pspage .chct,
.pspage .chstart{display:none}
  .pspage .chrow--flat{grid-template-columns:66px 1fr 78px 26px}
  .pspage .chrow--flat .chterm{display:none}
}


/* ── THE ARREST REPORT ────────────────────────────────────
   Read far more often than written, so both states are the same
   document: the same headings, in the same order, every time. */
.pspage .arhead{display:flex;flex-wrap:wrap;gap:10px 34px;padding:13px 15px;margin-bottom:4px;
  border-radius:10px;border:1px solid var(--border);background:#242120}
.pspage .arhead > div{display:flex;flex-direction:column;gap:4px;min-width:0}
.pspage .arhead dt{font-size:10px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:#8a8073}
.pspage .arhead dd{margin:0;font-size:12px;font-weight:700;color:var(--parch)}
.pspage .arhead dd small{font-size:11px;font-weight:600;color:var(--text-faint)}
.pspage .arhead--sub{background:#201d1c;margin-top:9px}
.pspage .arbody{display:flex;flex-direction:column}
.pspage .arsec{padding:15px 0;border-top:1px solid var(--line)}
.pspage .arsec h4{margin:0 0 8px;font-size:10px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:#8a8073}
/* The paragraph breaks the officer typed are the paragraph breaks the
   court reads. Without this the whole section renders as one block. */
.pspage .arsec p{margin:0;font-size:12.5px;line-height:1.72;color:var(--text-dim);
  white-space:pre-line}
.pspage .arbook{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px}
.pspage .archeck{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:8px;
  border:1px solid var(--border);background:#242120;font-size:11.5px;color:var(--text-faint)}
.pspage .archeck.ps-on{border-color:rgba(212,146,58,.32);background:rgba(212,146,58,.07);
  color:var(--parch)}
.pspage .archeck .tickbox-mark{width:20px;height:20px;font-size:10.5px}
.pspage .archeck.ps-on .tickbox-mark{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.pspage .archeck input{position:absolute;opacity:0;width:0;height:0}
.pspage .archeck input:checked + .tickbox-mark{background:var(--gold);border-color:var(--gold);
  color:var(--ink)}
.pspage label.archeck{cursor:pointer}
.pspage label.archeck:hover{border-color:#4a423a}


/* ── THE CHARGE PICKER ────────────────────────────────────
   A list this size cannot be a dropdown: it resets to the top every
   time a charge is added, and nobody can find R-205 by scrolling. */
.pspage .picker{border-radius:10px;border:1px solid var(--border);background:#201d1c;overflow:hidden}
.pspage .pickbar{display:flex;align-items:center;gap:10px;padding:10px 12px;
  border-bottom:1px solid var(--border);background:#242120}
.pspage .pickbar .srchbox{flex:1;max-width:none}
.pspage .pickbar .inp{height:32px;padding-top:0;padding-bottom:0;font-size:12px}
.pspage .pickn{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:#8a8073;white-space:nowrap}
.pspage .picklist{max-height:246px;overflow-y:auto;scrollbar-gutter:stable;
  scrollbar-color:#3d362f #2a2624;padding:8px}
.pspage .picklist::-webkit-scrollbar-track{background:#2a2624;border-radius:9px;
  border:3px solid transparent;background-clip:content-box}
.pspage .pickrow{display:grid;grid-template-columns:66px 126px 1fr 136px 24px;gap:12px;align-items:center;
  width:100%;text-align:left;padding:8px 10px;border-radius:8px;transition:.12s var(--ease)}
.pspage .pickrow:hover{background:#2a2523}
.pspage .pickrow.ps-on{background:rgba(212,146,58,.09)}
.pspage .pickrow .pickgo{display:grid;place-items:center;font-size:11px;color:#5a5249}
.pspage .pickrow:hover .pickgo{color:var(--gold)}
.pspage .pickrow.ps-on .pickgo{color:#7fae87}
.pspage .chterm{font-size:11.5px;color:var(--text-dim);text-align:right;white-space:nowrap}
/* A count that can be nudged rather than retyped. */
.pspage .ctstep{display:inline-flex;align-items:center;gap:2px}
.pspage .ctstep b{min-width:22px;text-align:center;font-size:12px;font-weight:800;color:var(--parch)}
.pspage .ctstep .xbtn{width:22px;height:22px;font-size:13px;font-weight:700;color:var(--text-dim)}

/* ── THE PRESETS ──────────────────────────────────────────
   Standard wording, written once here rather than a hundred times from
   memory, with the officer, the date and the charges already in it. */
.pspage .arwrite{padding:14px 0;border-top:1px solid var(--line)}
.pspage .arwhead{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.pspage .arwlab{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#8a8175}
.pspage .arwhead .fldhint{flex:1;min-width:180px;margin:0}
.pspage .prechk{display:inline-flex;align-items:center;gap:8px;padding:5px 10px;border-radius:7px;
  border:1px solid var(--border);background:#242120;cursor:pointer;
  font-size:11px;color:var(--text-faint);white-space:nowrap;transition:.14s var(--ease)}
.pspage .prechk:hover{border-color:#4a423a;color:var(--text-dim)}
.pspage .prechk.ps-on{border-color:rgba(212,146,58,.4);background:rgba(212,146,58,.09);
  color:var(--gold-hi)}
.pspage .prechk input{position:absolute;opacity:0;width:0;height:0}
.pspage .prechk .tickbox-mark{width:18px;height:18px;font-size:10px}
.pspage .prechk input:checked + .tickbox-mark{background:var(--gold);border-color:var(--gold);
  color:var(--ink)}
.pspage .arwrite .ta{min-height:132px;line-height:1.65}

/* ── THE EVIDENCE LOG ─────────────────────────────────── */
.pspage .loglist{border-radius:9px;border:1px solid var(--border);overflow:hidden}
.pspage .loghead,
.pspage .logrow{display:grid;grid-template-columns:200px 1fr 92px 30px;gap:9px;align-items:center}
.pspage .loghead{padding:8px 11px;background:#252220;border-bottom:1px solid var(--border);
  font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#8a8073}
.pspage .logrow{padding:8px 11px;border-bottom:1px solid var(--line);background:#221f1e}
.pspage .logrow:last-child{border-bottom:none}
.pspage .logrow .inp{height:32px;padding-top:0;padding-bottom:0;font-size:12px}
.pspage .logrow--read{grid-template-columns:200px 1fr 92px;font-size:12px;color:var(--text-dim)}
.pspage .logrow--read .mono{font-family:var(--mono);font-size:11px}

@media (min-width:961px) and (max-width:1058px){
  .pspage .pickrow{grid-template-columns:66px 1fr 24px}
  .pspage .pickrow > .cls,
.pspage .pickrow .chterm{display:none}
  .pspage .loghead,
.pspage .logrow{grid-template-columns:1fr}
  .pspage .loghead{display:none}
}
@media (max-width:728px){
  .pspage .pickrow{grid-template-columns:66px 1fr 24px}
  .pspage .pickrow > .cls,
.pspage .pickrow .chterm{display:none}
  .pspage .loghead,
.pspage .logrow{grid-template-columns:1fr}
  .pspage .loghead{display:none}
}


/* ── SETTING A CHARGE'S OUTCOME ──────────────────────────
   The outcome pill on a charge is a control, not a label: charges on one
   case do not all end the same way. */
.pspage .chrow .pill--go{gap:6px;cursor:pointer}
.pspage .chrow .pill--go .i{font-size:9px;opacity:.7}
.pspage .chrow .pill--go:hover{filter:brightness(1.25)}
.pspage .outlist{display:flex;flex-direction:column;gap:7px}
.pspage .outrow{display:grid;grid-template-columns:24px 1fr;gap:11px;align-items:start;
  text-align:left;padding:11px 13px;border-radius:9px;border:1px solid var(--border);
  background:#242120;transition:.14s var(--ease)}
.pspage .outrow:hover{border-color:#4a423a;background:#2a2523}
.pspage .outrow.ps-on{border-color:rgba(212,146,58,.45);background:rgba(212,146,58,.08)}
.pspage .outmark{display:grid;place-items:center;width:20px;height:20px;border-radius:6px;
  border:1.5px solid #4a423a;background:#201d1b;font-size:10.5px;color:transparent;margin-top:1px}
.pspage .outrow.ps-on .outmark{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.pspage .outtxt b{display:block;font-size:12.5px;font-weight:700;color:var(--parch)}
.pspage .outtxt em{display:block;margin-top:4px;font-style:normal;font-size:11.5px;line-height:1.5;
  color:var(--text-faint)}
/* In a narrow dialog the charge is a header, not a table row: the code,
   the class and the term on one line, the offence under them. */
.pspage #ouModal .chrow--flat{display:flex;flex-wrap:wrap;align-items:center;gap:9px 11px;
  margin-bottom:0;padding:12px 13px}
.pspage #ouModal .chrow--flat > .cls{width:auto;justify-content:flex-start}
.pspage #ouModal .chrow--flat .chterm{margin-left:auto;text-align:right}
.pspage #ouModal .chrow--flat .chname{flex:1 1 100%;order:9}

/* ── THE PICKER, KEPT APART FROM WHAT IS PICKED ─────────
   The list you are choosing from and the charges you have chosen were
   running into one another. They are two different things and now they
   look it: the list is a sunken well, the chosen are cards under their
   own heading. */
.pspage .picker{background:#1a1817}
.pspage .pickhead,
.pspage .chosenhead{display:flex;align-items:center;gap:8px;margin:0 0 9px;
  font-size:10px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:#8a8073}
.pspage .chosenhead{margin-top:16px}
.pspage .chosenhead span{font-size:10px;font-weight:800;color:#a1978a;padding:1px 6px;border-radius:4px;
  background:#2e2926}
.pspage .chosenhead::after{content:"";flex:1;height:1px;background:var(--line)}
.pspage .chosen{border-left:2px solid rgba(212,146,58,.4);padding-left:11px}

/* ── WATCHING A FILE ────────────────────────────────────── */
.pspage .watchlist,
.pspage .watchhow{display:flex;flex-direction:column;gap:7px}
.pspage label.outrow{cursor:pointer}
.pspage label.outrow input{position:absolute;opacity:0;width:0;height:0}
.pspage label.outrow input:checked + .outmark{background:var(--gold);border-color:var(--gold);
  color:var(--ink)}
/* Everything below the flag is dead until the flag is on — shown, not
   hidden, so an officer can see what they are turning on. */
.pspage .ps-off{opacity:.42;pointer-events:none}

/* ── THE SUMMARY, MADE TO LEAVE THE MDC ─────────────────
   Screenshots get resized, forwarded and read on a phone, so this is
   set heavier and harder than the page around it and carries its own
   heading — it has to make sense with none of the MDC beside it. */
.pspage .sheet{border-radius:12px;border:1px solid #4a4238;background:#17150f;padding:20px 22px}
.pspage .sheethead{display:flex;align-items:flex-start;gap:20px;flex-wrap:wrap;
  padding-bottom:16px;margin-bottom:16px;border-bottom:2px solid #4a4238}
.pspage .sheethead > div:first-child{flex:1;min-width:200px}
.pspage .sheethead b{display:block;font-size:19px;font-weight:800;letter-spacing:-.01em;
  color:var(--parch)}
.pspage .sheethead em{display:block;margin-top:5px;font-style:normal;font-size:12px;
  color:var(--text-faint)}
.pspage .sheetsum{display:flex;gap:22px}
.pspage .sheetsum span{display:block}
.pspage .sheetsum dt{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:#8a8073;margin-bottom:4px}
.pspage .sheetsum dd{margin:0;font-size:22px;font-weight:800;letter-spacing:-.02em;color:var(--parch)}
.pspage .sheetsum dd.bad{color:#e0968f}
.pspage .sheetsum dd.warnv{color:var(--gold-hi)}
.pspage .sheetcase{padding:13px 0;border-bottom:1px solid #322c26}
.pspage .sheetcase:last-of-type{border-bottom:none}
.pspage .sheetcasehead{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.pspage .sheetcasehead b{font-size:14px;font-weight:800;color:var(--parch)}
.pspage .sheetcasehead .mono{font-family:var(--mono);font-size:12px;color:var(--text-faint)}
.pspage .sheetcasehead em{margin-left:auto;font-style:normal;font-size:14px;font-weight:800;
  color:var(--gold-hi)}
.pspage .sheetch{display:grid;grid-template-columns:70px 126px 1fr auto;gap:12px;align-items:center;
  padding:6px 0;font-size:13px;color:var(--parch)}
.pspage .sheetch em{font-style:normal;font-size:12px;font-weight:700;color:var(--text-faint)}
.pspage .sheetch--out{opacity:.55}
.pspage .sheetch--out > span:nth-child(3){text-decoration:line-through}
.pspage .sheetnone{margin:0;font-size:13px;color:var(--text-dim)}
.pspage .sheetfoot{margin:16px 0 0;padding-top:14px;border-top:1px solid #322c26;
  font-size:11.5px;line-height:1.55;color:var(--text-faint)}
.pspage .sumtext{min-height:400px;font-family:var(--mono);font-size:12px;line-height:1.7;
  white-space:pre;overflow-x:auto}
@media (min-width:961px) and (max-width:1058px){
  .pspage .sheetch{grid-template-columns:70px 1fr auto}
  .pspage .sheetch > .cls{display:none}
}
@media (max-width:728px){
  .pspage .sheetch{grid-template-columns:70px 1fr auto}
  .pspage .sheetch > .cls{display:none}
}


/* The change line belongs to the charge above it: indented to its text
   column, quieter than the row, and a way into the whole trail. */
.pspage .chchg{display:flex;align-items:center;gap:9px;width:100%;text-align:left;
  padding:7px 14px 9px 218px;margin-top:-4px;border-bottom:1px solid #2b2620;
  transition:.14s var(--ease)}
.pspage .chchg:hover{background:rgba(212,146,58,.05)}
.pspage .chchg .i{font-size:11px;color:#8a8073;flex:none}
.pspage .chchg span{flex:1;font-size:11.5px;color:var(--text-faint)}
.pspage .chchg b{color:var(--text-dim);font-weight:700;margin-right:6px}
.pspage .chchg:hover .i{color:var(--gold)}
.pspage .chchg em{font-style:normal;font-size:10px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:#8a8073;padding:2px 7px;border-radius:4px;background:#2e2926}
/* A charge that did not stick is dimmed on the sheet as well as the chip. */
.pspage .chrow--out .chname{opacity:.62}
.pspage .chrow--out .chname > :first-child,
.pspage .chrow--out .chcode{text-decoration:none}
@media (min-width:961px) and (max-width:1478px){ .pspage .chchg{padding-left:92px} }
@media (max-width:960px){ .pspage .chchg{padding-left:92px} }

@media (min-width:961px) and (max-width:1058px){ .pspage .chchg{padding-left:14px} }
@media (max-width:728px){ .pspage .chchg{padding-left:14px} }


/* ── THE LOOKUP ───────────────────────────────────────────
   The search is the page. Nothing about anybody is on screen until a
   whole name has been typed and looked up, and the result is either one
   file or a plain statement that there is not one. */
.pspage .lookup{display:flex;flex-direction:column;align-items:center;gap:22px;
  padding:64px 0 40px}
.pspage .lookup[hidden]{display:none}
.pspage .lookhero{width:100%;max-width:620px;text-align:center}
.pspage .lookicon{display:grid;place-items:center;width:56px;height:56px;margin:0 auto 20px;
  border-radius:16px;border:1px solid rgba(212,146,58,.3);background:rgba(212,146,58,.08)}
.pspage .lookicon .i{font-size:24px;color:var(--gold)}
.pspage .lookhero h1{margin:0;font-size:27px;font-weight:800;letter-spacing:-.02em;color:var(--parch)}
.pspage .lookhero > p{margin:11px auto 0;max-width:480px;font-size:13.5px;line-height:1.65;
  color:var(--text-dim)}
.pspage .lookform{display:flex;gap:9px;margin-top:15px}
.pspage .fbox--big{flex:1}
.pspage .fbox--big input{font-size:15px}
.pspage .lookform .ps-gbtn{padding-left:26px;padding-right:26px;font-size:13.5px}
.pspage .lookhint{display:none;align-items:flex-start;gap:9px;margin-top:14px;padding:10px 13px;
  border-radius:9px;text-align:left;font-size:12px;line-height:1.55}
.pspage .lookhint.ps-on{display:flex}
.pspage .lookhint .i{font-size:13px;flex:none;margin-top:1px}
.pspage .lookhint--bad{border:1px solid rgba(201,82,74,.3);background:rgba(201,82,74,.08);color:#e0968f}
.pspage .lookhint--bad .i{color:#dd7b73}
/* What the field will take, said once, across the foot of the panel —
   it fills the width the old centred blurb left empty and it answers
   the only question the field raises. */
.pspage .lookfoot{display:flex;flex-wrap:wrap;align-items:center;gap:9px 22px;margin-top:14px;
  padding-top:13px;border-top:1px solid var(--line)}
.pspage .lookrule{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;color:var(--text-faint)}
.pspage .lookrule .i{flex:none;font-size:12px;color:#6b6154}
.pspage .lookrule b{font-weight:700;color:var(--text-dim)}
.pspage .lookrule--note{margin-left:auto}

/* ── the search running ───────────────────────────────── */
.pspage .looksearch{display:flex;align-items:center;gap:13px;position:relative;overflow:hidden;
  margin-top:16px;padding:13px 15px;border:1px solid var(--border);border-radius:10px;
  background:var(--panel);text-align:left;
  animation:psIn .22s ease both}
.pspage .looksearch[hidden]{display:none}
@keyframes psIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.pspage .lsring{flex:none;width:22px;height:22px;border-radius:50%;
  border:2px solid var(--line);border-top-color:var(--gold);
  animation:psSpin .7s linear infinite}
.pspage .lsring span{display:none}
@keyframes psSpin{to{transform:rotate(360deg)}}
.pspage .lstext{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.pspage .lstext b{font-size:13px;font-weight:700;color:var(--parch);letter-spacing:.01em}
.pspage .lstext em{font-style:normal;font-size:11.5px;color:var(--text-faint);
  font-family:var(--mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pspage .lstext em:empty{display:none}
.pspage .lsbar{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--line);overflow:hidden}
.pspage .lsbar span{display:block;width:38%;height:100%;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  animation:psSlide 1.15s ease-in-out infinite}
@keyframes psSlide{0%{transform:translateX(-110%)}100%{transform:translateX(370%)}}
.pspage .lookform.ps-busy .fbox{opacity:.55}
.pspage .lookform.ps-busy .ps-gbtn{opacity:.7;cursor:progress}
.pspage #profile.ps-reveal{animation:psReveal .3s ease both}
@keyframes psReveal{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .pspage .looksearch,
.pspage .lsring,
.pspage .lsbar span,
.pspage #profile.ps-reveal{animation:none}
  .pspage .lsring{border-top-color:var(--gold)}
}


/* Not finding somebody is a result, not an error — it is said plainly,
   with the two or three things worth checking before trying again. */
.pspage .looknone{width:100%}
.pspage .looknone[hidden]{display:none}
/* One band the width of the search, in the search's own red: the mark,
   the verdict, and the things to check - side by side, no empty room. */
.pspage .nonecard{display:grid;grid-template-columns:auto 1fr auto;gap:0 22px;align-items:center;
  padding:14px 20px;border-radius:12px;border:1px solid rgba(160,78,72,.42);
  background:#1f1c1a;text-align:left}
.pspage .noneicon{display:grid;place-items:center;width:44px;height:44px;margin:0;
  border-radius:12px;border:1px solid var(--border);background:#262220}
.pspage .noneicon .i{font-size:19px;color:#8a8073}
.pspage .nonehead{min-width:0}
.pspage .nonehead > b{display:block;font-size:15px;font-weight:800;color:var(--parch)}
.pspage .nonehead > p{margin:4px 0 0;font-size:12.5px;line-height:1.55;color:var(--text-dim)}
.pspage .nonelist{padding-left:22px;border-left:1px solid var(--line)}
.pspage .nonelist > span{margin-bottom:5px}
.pspage .nonelist ul{line-height:1.6}
/* with people to offer, the list of them runs under the band, full width */
.pspage .nonecard--near,.pspage .nonecard--many{border-color:var(--border);background:#211e1d}
.pspage .nonecard--near .noneicon,.pspage .nonecard--many .noneicon{border-color:var(--border);background:#262220}
.pspage .nonecard--near .noneicon .i,.pspage .nonecard--many .noneicon .i{color:#8a8073}
.pspage .nonenear{grid-column:1 / -1;margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
  text-align:left}
@media (max-width:900px){
  .pspage .nonecard{grid-template-columns:auto 1fr}
  .pspage .nonelist{grid-column:1 / -1;margin-top:12px;padding:12px 0 0;border-left:0;border-top:1px solid var(--line)}
}
.pspage .nonelist > span,
.pspage .nonenear > span{display:flex;align-items:center;gap:8px;margin-bottom:10px;
  font-size:10px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:#8a8073}
.pspage .nonelist > span .i,
.pspage .nonenear > span .i{font-size:12px;color:var(--gold)}
.pspage .nonelist ul{margin:0;padding-left:18px;font-size:12px;line-height:1.75;color:var(--text-faint)}
.pspage .nearrow{display:grid;grid-template-columns:1fr 16px;align-items:center;gap:12px;
  width:100%;text-align:left;padding:9px 11px;margin-bottom:6px;border-radius:9px;
  border:1px solid var(--border);background:#262220;transition:.14s var(--ease)}
.pspage .nearrow:hover{border-color:#5a4c39;background:#2b2624}
.pspage .nearrow .i{font-size:11px;color:#8a8073}
.pspage .nearrow:hover .i{color:var(--gold)}
@media (max-width:588px){
  .pspage .lookup{padding-top:36px}
  .pspage .lookform{flex-direction:column}
}


/* ══ limited lookup ═══════════════════════════════════════ */
.pspage #limited[hidden]{display:none}
.pspage #limited.ps-reveal{animation:psReveal .3s ease both}
/* One rhythm down the whole view: every block sits 14px below the one
   before it and carries no margin of its own. The blocks are shared
   with the full file, and each of them brought a different margin. */
.pspage .ltwrap > *{margin:0 !important}
.pspage .ltwrap > * + *{margin-top:14px !important}
.pspage .ltnotice{display:flex;align-items:flex-start;gap:11px;
  padding:13px 15px;border:1px solid rgba(212,146,58,.28);border-radius:10px;
  background:rgba(212,146,58,.07);font-size:12.5px;line-height:1.6;color:var(--text-dim)}
.pspage .ltnotice .i{flex:none;margin-top:2px;font-size:14px;color:var(--gold)}
.pspage .ltnotice b{color:var(--gold-hi);font-weight:700}

.pspage .ltrow{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.pspage .ltcell{padding:12px 14px;border:1px solid var(--border);border-radius:11px;background:var(--panel)}
.pspage .ltcell dt{display:flex;align-items:center;gap:7px;margin:0 0 7px;
  font-size:9.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--text-faint)}
.pspage .ltcell dt .i{font-size:12px;color:var(--text-dim)}
.pspage .ltcell dd{margin:0;font-size:14px;font-weight:700;color:var(--parch);line-height:1.35}
.pspage .ltcell dd.hot{color:#e6968f}
.pspage .ltcell em{display:block;margin-top:6px;font-style:normal;font-size:11px;
  line-height:1.5;color:var(--text-faint)}

.pspage .ltsig{padding:12px 16px 16px}
.pspage .ltsig .ccsec:first-child{margin-top:2px}
.pspage .ltheld{padding:16px 18px;border:1px solid var(--line);
  border-radius:12px;background:rgba(38,34,32,.5)}
.pspage .lthh{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 10px;margin-bottom:13px}
.pspage .lthh .i{font-size:13px;color:var(--text-faint);align-self:center}
.pspage .lthh b{font-size:13px;font-weight:700;color:var(--parch)}
.pspage .lthh span{font-size:11.5px;color:var(--text-faint)}
.pspage .ltgrid{display:flex;flex-wrap:wrap;gap:10px}
.pspage .ltoff{flex:1 1 290px;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;
  gap:2px 10px;padding:11px 13px;border:1px solid var(--line);border-radius:9px;
  background:var(--panel);opacity:.72}
.pspage .ltoff .i{grid-row:1 / span 2;align-self:center;font-size:14px;color:var(--text-faint)}
.pspage .ltoff b{font-size:12.5px;font-weight:700;color:var(--text-dim)}
.pspage .ltoff span{font-size:11px;line-height:1.45;color:var(--text-faint)}


@media (min-width:961px) and (max-width:1198px){
  .pspage .ltrow{grid-template-columns:1fr}
}
@media (max-width:868px){
  .pspage .ltrow{grid-template-columns:1fr}
}


/* ══ the search page ══════════════════════════════════════ */
/* The page has a background behind it. Nothing here floats on it:
   the search sits on a panel of its own, and everything under it
   sits on one too. */
.pspage .lookup{align-items:stretch;gap:14px;max-width:1120px;margin:0 auto;padding-top:26px}
.pspage .lookpanel{padding:20px 22px 18px}
/* A column of centred text in a 1120px box leaves the box mostly
   empty. The band reads across it instead: what this is on the left,
   how it will open on the right, and the field the full width. */
.pspage .lookband{display:flex;align-items:center;gap:14px;padding-bottom:15px;
  border-bottom:1px solid #342f2a}
.pspage .lookicon{flex:none;display:grid;place-items:center;width:40px;height:40px;
  border-radius:10px;border:1px solid rgba(212,146,58,.30);background:rgba(212,146,58,.09)}
/* The tile uses its own magnifier: a shorter handle and a slightly
   smaller ring, drawn so the ink is centred in the viewBox. The page
   magnifier is longer in the handle and would sit high and left here
   however the box is aligned. */
.pspage .lookicon .i{display:block;font-size:19px;color:var(--gold)}
.pspage .looktitle{flex:1 1 auto;min-width:0}
.pspage .looktitle h1{margin:0;font-size:19px;font-weight:800;letter-spacing:-.02em;color:var(--parch)}
.pspage .looktitle p{margin:4px 0 0;font-size:12.5px;line-height:1.5;color:var(--text-faint)}

/* Full file or limited — chosen before the search, because the two
   are different visits and the audit records which one you made. */
.pspage .lookmode{flex:none;display:flex;align-items:center;gap:11px}
.pspage .lookmode > span{font-size:10px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--text-faint)}
.pspage .seg{display:inline-flex;padding:3px;gap:3px;border-radius:9px;
  border:1px solid var(--border);background:var(--surface)}
.pspage .seg button{display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 12px;
  border-radius:6px;font-size:11.5px;font-weight:700;color:var(--text-faint);
  background:none;border:1px solid transparent;transition:.14s var(--ease)}
.pspage .seg button .i{font-size:12px}
.pspage .seg button:hover{color:var(--text-dim)}
.pspage .seg button.ps-on{color:var(--gold-hi);border-color:#5a4c39;background:#332c24}

/* ── the three blocks under the search ────────────────── */
.pspage .lookcols{display:grid;grid-template-columns:1.45fr 1fr;gap:14px;align-items:stretch}
/* The two panels are one frame. Both hold five rows, both carry a
   footer, and the list area takes whatever is left — so paging the
   watch list never drags the column beside it up or down. */
.pspage .lookcols > .panel{display:flex;flex-direction:column;margin-bottom:0}
.pspage .colbody{flex:1 1 auto;display:flex;flex-direction:column;min-height:300px}
.pspage .colbody .prows,
.pspage .colbody .wrows{flex:1 1 auto}
/* An empty panel says so in the middle of itself, not in its top-left
   corner: the empty state fills the list area and centres both ways. */
.pspage .colbody > .ps-empty{flex:1 1 auto;display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:24px 18px}
.pspage .colfoot{display:flex;flex-wrap:wrap;align-items:center;gap:9px;
  padding:11px 14px;border-top:1px solid var(--line);background:#211e1d}
.pspage .colfoot > span{flex:1 1 auto;min-width:0;font-size:11px;color:var(--text-faint)}
.pspage .colfoot .ps-stepper[hidden]{display:none}
.pspage .hdnote{font-size:11px;color:var(--text-faint)}
/* The count and the way through are one control: a quiet pill that says
   "See all changes", with the number sitting in front of it as a badge
   when there is one. No number, no badge - the door is still there. */
.pspage .cluster{display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 11px 0 6px;
  border-radius:999px;border:1px solid var(--border);background:var(--surface);
  font-size:11.5px;font-weight:700;color:var(--text-dim);transition:.14s var(--ease)}
.pspage .cluster:has(.cnum[hidden]){padding-left:11px}
.pspage .cluster:hover{border-color:#5a4c39;background:#2a2624;color:var(--gold-hi)}
.pspage .cnum{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;
  border-radius:999px;font-size:10.5px;font-weight:800;line-height:1;
  font-variant-numeric:tabular-nums;color:#1a1614;background:var(--gold)}
.pspage .cnum[hidden]{display:none}
.pspage .cgo{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.pspage .cgo .i{font-size:10px;color:#6b6154;transition:.14s var(--ease)}
.pspage .cluster:hover .cgo .i{color:var(--gold);transform:translateX(2px)}
.pspage .panel > header .ps-n{font-variant-numeric:tabular-nums;font-size:10.5px;font-weight:800;
  padding:2px 8px;border-radius:5px;color:var(--gold-hi);
  border:1px solid rgba(212,146,58,.30);background:rgba(212,146,58,.10)}
.pspage .panel > header .ps-n[hidden]{display:none}

.pspage .prows,
.pspage .wrows{display:flex;flex-direction:column;height:100%}
/* Rows keep their own height. Spreading a short page over the panel
   floated a lone row in the middle of 300px of nothing; the slack sits
   under the list instead, where a list is expected to end. */
.pspage .prows > *,
.pspage .wrows > *{flex:0 0 auto}
.pspage a.prow{text-decoration:none;color:inherit;box-sizing:border-box}
.pspage .prow{display:flex;align-items:center;gap:12px;width:100%;padding:11px 14px;
  text-align:left;background:none;border:0;border-bottom:1px solid var(--line);
  transition:.14s var(--ease)}
.pspage .prow:last-child{border-bottom:0}
.pspage .prow:hover{background:#262322}
.pspage .prow > .i,
.pspage .wrow2 > .i{flex:none;font-size:13px;color:#5f574d}
.pspage .prow:hover > .i,
.pspage .wrow2:hover > .i{color:var(--gold)}
.pspage .ps-who{flex:1 1 130px;min-width:120px;display:flex;flex-direction:column;gap:3px}
.pspage .ps-who > span{white-space:nowrap}
.pspage .ps-who b{font-size:13.5px;font-weight:700;color:var(--parch);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pspage .ps-who > span{font-size:11px;color:var(--text-faint)}
.pspage .prowtags{display:flex;justify-content:flex-end;gap:5px;flex:0 1 auto;min-width:0;overflow:hidden}
.pspage .prowtags .ps-pill{white-space:nowrap}
.pspage .prowwhen{flex:none;display:flex;flex-direction:column;gap:3px;align-items:flex-end;
  text-align:right;min-width:104px}
.pspage .prowwhen b{font-size:11.5px;font-weight:600;color:var(--text-dim);white-space:nowrap}
.pspage .prowwhen em{font-style:normal;font-size:10px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-faint)}

/* One line per watched file: who, the latest thing that happened,
   when, and how many. Everything else is in the dialog, so the row
   height is fixed and five of them always measure the same. */
.pspage .wrow2{display:flex;align-items:center;gap:12px;width:100%;padding:0 14px;min-height:60px;
  text-align:left;background:none;border:0;border-bottom:1px solid var(--line);
  transition:.14s var(--ease)}
.pspage .wrow2:last-child{border-bottom:0}
.pspage .wrow2:hover{background:#262322}
.pspage .wrow2 .ps-who > span{display:flex;align-items:center;gap:7px}
.pspage .wrow2 .ps-who > span .i{flex:none;font-size:12px;color:var(--gold)}
.pspage .wmeta{flex:none;display:flex;flex-direction:column;gap:3px;align-items:flex-end;text-align:right}
.pspage .wmeta b{font-size:11.5px;font-weight:600;color:var(--text-dim);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.pspage .wmeta em{font-style:normal;font-size:10px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-faint)}

/* the changes themselves, in the dialog */
.pspage .wclist{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.pspage .wcrow{display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:8px;
  border:1px solid var(--line);background:var(--surface)}
.pspage .wcrow .i{flex:none;font-size:13px;color:var(--gold)}
.pspage .wcrow b{flex:1 1 auto;min-width:0;font-size:12.5px;font-weight:600;color:var(--text-dim)}
.pspage .wcrow em{flex:none;font-style:normal;font-size:11px;color:var(--text-faint);
  font-variant-numeric:tabular-nums}

.pspage .regrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
.pspage .regcell{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto auto;
  gap:0 11px;padding:14px 16px;background:var(--panel)}
.pspage .regcell .i{grid-row:1 / span 3;align-self:center;font-size:17px;color:#6b6154}
.pspage .regcell b{font-size:22px;font-weight:800;letter-spacing:-.02em;color:var(--parch);
  font-variant-numeric:tabular-nums;line-height:1.15}
.pspage .regcell dt{margin:2px 0 0;font-size:10px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--text-dim)}
.pspage .regcell em{font-style:normal;font-size:11px;color:var(--text-faint);margin-top:3px}
/* When the register cannot be read the four cells still stand, with a
   dash where each figure would be, and the reason runs under them. */
.pspage .regcell--off b{color:#5a534a}
.pspage .regcell--off .i{color:#4a423a}
.pspage .regrid > .ps-empty,
.pspage .regnote{grid-column:1 / -1}
.pspage .regnote{display:flex;align-items:center;gap:9px;padding:10px 16px;background:var(--panel);
  border-top:1px solid rgba(201,82,74,.25);font-size:11.5px;color:#e0968f}
.pspage .regnote .i{flex:none;font-size:12px;color:#dd7b73}

@media (min-width:961px) and (max-width:1198px){
  .pspage .lookcols{grid-template-columns:1fr}
  .pspage .regrid{grid-template-columns:repeat(2,1fr)}
  .pspage .prowtags{display:none}
}
@media (max-width:868px){
  .pspage .lookcols{grid-template-columns:1fr}
  .pspage .regrid{grid-template-columns:repeat(2,1fr)}
  .pspage .prowtags{display:none}
}

@media (max-width:528px){
  .pspage .regrid{grid-template-columns:1fr}
  .pspage .prowwhen{min-width:0}
  .pspage .lookmode{flex-direction:column;gap:8px}
}


/* ══ everything you watch ═════════════════════════════════ */
.pspage .waalist{display:flex;flex-direction:column}
.pspage .waarow{display:flex;align-items:center;gap:14px;padding:12px 2px;
  border-bottom:1px solid var(--line)}
.pspage .waarow:last-child{border-bottom:0}
.pspage .waarow .ps-who{flex:1 1 300px;min-width:250px;overflow:hidden}
.pspage .waaname{display:flex;align-items:center;gap:8px;min-width:0}
.pspage .waaname b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:13.5px;font-weight:700;color:var(--parch)}
.pspage .waaname .ps-pill{flex:none}
.pspage .waarow .ps-who > span{white-space:nowrap;color:var(--text-faint);
  overflow:hidden;text-overflow:ellipsis}
.pspage .waarow .ps-who .warnv{font-weight:700;color:#d08279}
.pspage .waastate{flex:1 1 250px;min-width:0;display:flex;flex-direction:column;
  align-items:flex-start;gap:5px}
.pspage .waastate em{display:flex;align-items:center;gap:7px;font-style:normal;font-size:11px;
  color:var(--text-faint);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  max-width:100%}
.pspage .waastate em .i{flex:none;font-size:11px;color:#6b6154}
.pspage .waaacts{flex:none;display:flex;gap:7px}
@media (min-width:961px) and (max-width:1058px){
  .pspage .waarow{flex-wrap:wrap;gap:9px}
  .pspage .waaacts{margin-left:auto}
}
@media (max-width:728px){
  .pspage .waarow{flex-wrap:wrap;gap:9px}
  .pspage .waaacts{margin-left:auto}
}


/* ══ the photograph dialog ════════════════════════════════ */
.pspage .mgrid{display:grid;grid-template-columns:150px 1fr;gap:18px;align-items:start}
.pspage .mgleft{display:flex;flex-direction:column;gap:8px}
.pspage .pv{width:150px;height:150px;border-radius:10px;overflow:hidden;
  border:1px solid var(--border);background:#2b2724}
.pspage .pv img{width:100%;height:100%;object-fit:cover;display:block}
.pspage .pvnone{display:grid;place-items:center;width:100%;height:100%;padding:0 10px;text-align:center;
  font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#6a6257}
.pspage .pvcap{font-size:10.5px;color:var(--text-faint);text-align:center}
.pspage .mgright{min-width:0;display:flex;flex-direction:column}
.pspage .mgright .updrop{width:100%}
.pspage .orline{display:flex;align-items:center;gap:12px;margin:13px 0;
  font-size:9.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--text-faint)}
.pspage .orline::before,
.pspage .orline::after{content:"";flex:1;height:1px;background:var(--line)}
.pspage .urlrow{display:flex;gap:8px}
.pspage .urlrow .inp{flex:1 1 auto;min-width:0}
.pspage .urlrow .ps-gbtn{flex:none}
.pspage .urlerr:empty{display:none}
.pspage .urlerr{margin-top:9px;font-size:11.5px;color:#e0968f}
.pspage .mirror{display:flex;align-items:flex-start;gap:10px;margin-top:13px;padding:11px 13px;
  border-radius:9px;border:1px solid var(--line);background:var(--surface);
  font-size:11.5px;line-height:1.55;color:var(--text-faint)}
.pspage .mirror .i{flex:none;margin-top:1px;font-size:13px;color:var(--gold)}
.pspage .mirror b{color:var(--text-dim);font-weight:700}

.pspage .mgconf{display:flex;align-items:flex-start;gap:16px}
.pspage .pv--sm{width:96px;height:96px;flex:none}
.pspage .mgconf b{display:block;font-size:14px;font-weight:700;color:var(--parch)}
.pspage .mgconf p{margin:8px 0 0;font-size:12.5px;line-height:1.6;color:var(--text-faint)}
@media (max-width:588px){
  .pspage .mgrid{grid-template-columns:1fr}
  .pspage .mgleft{align-items:center}
}


/* A rank that does not carry the full file sees the choice, locked. */
.pspage .seg button:disabled{cursor:not-allowed;color:#5a534a}
.pspage .seg button.seg-lock:hover{color:#5a534a}
.pspage .lookmode--locked > span::after{content:" \00b7 locked";color:#6b6154}

@media (min-width:961px){
  .pspage .ps-ovl{padding-left:322px}
  /* the wide dialog measured itself against the window; here the window
     is the page plus the rail, so it measures the space it is centred in */
  .pspage .ps-modal--wide{width:calc(100% - 32px)}
}


/* ═══════════════════════════════════════════════════════════════════
   PENAL CODE

   Every selector is prefixed .pcpage, so nothing here reaches another
   page. The reverse is not true: anything unprefixed in the terminal's
   stylesheet still reaches in, and a prefixed rule cannot undo a
   property the page never declares. Three had to be answered directly
   — .panel > header's min-height, which would have held the header at
   56px against a declared 40; the global h1/h2 from the sign-in
   stylesheet, sized for a marketing page; and the two text tokens,
   which this design was approved against at their lighter values.
   ═══════════════════════════════════════════════════════════════════ */
.pcpage{
  --text-dim:#b6ac9d; --text-faint:#93897b;
  --mono:ui-monospace,'Cascadia Mono','Segoe UI Mono','Roboto Mono',Menlo,Consolas,monospace;
}
.pcpage h1,.pcpage h2,.pcpage h3{margin:0;line-height:normal;
  font-size:inherit;font-weight:inherit;letter-spacing:inherit}
.pcpage button{text-align:left}
.pcpage input,.pcpage select,.pcpage textarea{color:inherit}


.pcpage .panel{background:#1f1c1a;border:1px solid var(--border);border-radius:11px;overflow:hidden}
.pcpage .panel > header{display:flex;align-items:center;gap:9px;padding:0 14px;
  height:40px;min-height:0;min-height:0;
  background:#2a2624;border-bottom:1px solid var(--border)}
.pcpage .panel > header .i{display:block;font-size:13px;color:var(--amber)}
.pcpage .panel > header h2{font-size:10.5px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-dim);margin:0}
.pcpage .panel > header .pc-side{margin-left:auto;display:flex;align-items:center;gap:7px}
.pcpage .hdnote{font-size:11px;color:var(--text-faint)}

/* ── page head ─────────────────────────────────────────── */
.pcpage .pc-dh{display:flex;align-items:flex-start;gap:20px;flex-wrap:wrap;margin-bottom:18px}
.pcpage .pc-dh h1{font-size:26px;font-weight:800;letter-spacing:-.03em;line-height:normal;margin:0}
.pcpage .pc-dh p{margin-top:8px;font-size:13px;color:var(--text-faint);line-height:1.6;max-width:74ch}
.pcpage .pc-dh .pc-side{margin-left:auto;display:flex;align-items:center;gap:9px}

/* One height for every one of these, set on the button rather than
   left to the padding — the count on the charge sheet is a box of its
   own and was pushing that button taller than the one beside it. */
.pcpage .pc-gbtn{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 16px;border-radius:8px;
  font-size:12.5px;font-weight:700;border:1px solid var(--border);background:#272423;
  color:var(--text-dim);transition:.15s var(--ease);white-space:nowrap}
.pcpage .pc-gbtn .i{font-size:14px}
.pcpage .pc-gbtn:hover{color:var(--parch);border-color:#4a423a;background:#2f2b28}
.pcpage .pc-gbtn--go{background:var(--gold);border-color:var(--gold);color:var(--ink);font-weight:800}
.pcpage .pc-gbtn--go:hover{background:var(--gold-hi);border-color:var(--gold-hi);color:var(--ink)}
.pcpage .pc-gbtn:disabled{opacity:.4;pointer-events:none}
.pcpage .pc-gbtn .cnt{display:inline-flex;align-items:center;height:20px;padding:0 7px;
  font-variant-numeric:tabular-nums;font-size:11px;font-weight:800;
  border-radius:5px;background:rgba(23,20,15,.22)}

.pcpage .pc-minibtn{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;
  border-radius:7px;font-size:11.5px;font-weight:700;color:var(--text-dim);
  border:1px solid var(--border);background:#272423;transition:.14s var(--ease);white-space:nowrap}
.pcpage .pc-minibtn .i{font-size:12px}
.pcpage .pc-minibtn:hover{color:var(--parch);border-color:#4a423a;background:#2f2b28}
.pcpage .pc-gbtn--go .i{color:var(--ink)}
.pcpage .pc-minibtn:disabled{opacity:.42;pointer-events:none}

/* ── the filter band ───────────────────────────────────── */
.pcpage .pc-bar{display:flex;align-items:center;gap:9px;flex-wrap:nowrap;
  padding:10px 14px;border-bottom:1px solid var(--line);background:#232020}
.pcpage .srchbox{position:relative;display:block;flex:1 1 200px;min-width:170px;max-width:340px}
.pcpage .srchbox .i{position:absolute;left:11px;top:50%;transform:translateY(-50%);
  font-size:12px;color:#8a8073;pointer-events:none}
.pcpage .inp{width:100%;height:28px;padding:0 11px;border-radius:8px;border:1px solid var(--border);
  background:#1c1a18;color:var(--parch);font-size:12px;outline:none;caret-color:var(--gold)}
.pcpage .inp::placeholder{color:#655d51}
.pcpage .inp:focus{border-color:rgba(212,146,58,.5)}
.pcpage .srchbox .inp{padding-left:32px}
.pcpage select.inp{width:auto;min-width:150px;max-width:230px;flex:0 1 auto;
  -webkit-appearance:none;appearance:none;padding-right:28px;
  background-image:linear-gradient(45deg,transparent 50%,#8a8073 50%),
                   linear-gradient(135deg,#8a8073 50%,transparent 50%);
  background-position:calc(100% - 15px) 12px,calc(100% - 10px) 12px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.pcpage select.inp:focus{background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),
                                  linear-gradient(135deg,var(--gold) 50%,transparent 50%);
  background-position:calc(100% - 15px) 12px,calc(100% - 10px) 12px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.pcpage .subtabs{display:flex;gap:6px;align-items:center;margin-left:auto;flex:none}
.pcpage .chip{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 10px;border-radius:7px;
  font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:#8a8175;border:1px solid #35302a;background:#242120;
  transition:.14s var(--ease);white-space:nowrap}
.pcpage .chip:hover{color:#b5aa9c;border-color:#48413a;background:#2a2624}
.pcpage .chip.pc-on{color:var(--gold-hi);border-color:#5a4c39;background:#332c24}
.pcpage .chip .pc-n{font-variant-numeric:tabular-nums;font-size:10px;font-weight:800;
  padding:1px 5px;border-radius:4px;color:#9a9083;background:#312b26}
.pcpage .chip:hover .pc-n{color:#b5aa9c}
.pcpage .chip.pc-on .pc-n{color:var(--gold-hi);background:#3d3227}
@media (min-width:961px) and (max-width:1478px){
  .pcpage .pc-bar{flex-wrap:wrap}
  .pcpage .subtabs{margin-left:auto}
  .pcpage .srchbox{flex:1 1 200px;max-width:none}
}
@media (max-width:960px){
  .pcpage .pc-bar{flex-wrap:wrap}
  .pcpage .subtabs{margin-left:auto}
  .pcpage .srchbox{flex:1 1 200px;max-width:none}
}

@media (max-width:608px){ .pcpage .srchbox,
.pcpage select.inp{flex:1 1 100%;max-width:none;width:100%} }


/* ── the split: index on the left, the section on the right ── */
.pcpage .pc-split{display:grid;grid-template-columns:392px 1fr;min-height:640px}
.pcpage .pc-list{border-right:1px solid var(--line);display:flex;flex-direction:column;min-width:0}
/* The sticky title header can only be as wide as the scrolled content,
   so the scrollbar leaves a channel beside it. Colouring the track to
   the header's own background makes that channel read as part of the
   header band instead of a gap cut out of it. */
.pcpage .pc-rows{flex:1;overflow-y:auto;max-height:calc(100vh - 260px);min-height:520px;
  scrollbar-width:thin;scrollbar-color:#4a423a #232020}
.pcpage .pc-rows::-webkit-scrollbar{width:8px}
.pcpage .pc-rows::-webkit-scrollbar-track{background:#232020}
.pcpage .pc-rows::-webkit-scrollbar-thumb{background:#4a423a;border-radius:4px;
  border:2px solid #232020}
.pcpage .pc-rows::-webkit-scrollbar-thumb:hover{background:#5c5348}
.pcpage .pc-view{min-width:0;overflow-y:auto;max-height:calc(100vh - 260px);min-height:520px}
@media (min-width:961px) and (max-width:1378px){
  .pcpage .pc-split{grid-template-columns:1fr}
  .pcpage .pc-list{border-right:none;border-bottom:1px solid var(--line)}
  .pcpage .pc-rows{max-height:360px;min-height:0}
  .pcpage .pc-view{max-height:none;min-height:0}
}
@media (max-width:960px){
  .pcpage .pc-split{grid-template-columns:1fr}
  .pcpage .pc-list{border-right:none;border-bottom:1px solid var(--line)}
  .pcpage .pc-rows{max-height:360px;min-height:0}
  .pcpage .pc-view{max-height:none;min-height:0}
}


/* the title a run of sections sits under, held at the top of the
   list while its sections scroll past — an offence number means
   nothing without the title it belongs to */
.pcpage .tgrp{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:9px;
  padding:8px 14px;background:#232020;border-bottom:1px solid var(--line);
  border-top:1px solid var(--line)}
.pcpage .tgrp:first-child{border-top:none}
.pcpage .tgrp b{font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--amber);font-variant-numeric:tabular-nums}
.pcpage .tgrp span{font-size:11px;color:var(--text-faint);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.pcpage .tgrp em{margin-left:auto;flex:none;font-style:normal;font-size:10px;font-weight:700;
  color:#6b6154;font-variant-numeric:tabular-nums}

.pcpage .orow{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:11px;
  width:100%;padding:9px 14px;border-bottom:1px solid var(--line);
  transition:.13s var(--ease)}
.pcpage .orow:hover{background:#262322}
.pcpage .orow.pc-on{background:#2d2721;box-shadow:inset 3px 0 0 var(--gold)}
.pcpage .onum{font-size:12.5px;font-weight:700;color:var(--text-faint);
  font-variant-numeric:tabular-nums;letter-spacing:.01em}
.pcpage .orow.pc-on .onum{color:var(--gold-hi)}
.pcpage .owho{min-width:0;display:flex;flex-direction:column;gap:3px}
.pcpage .owho b{font-size:13px;font-weight:600;color:var(--parch);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pcpage .owho span{font-size:11px;color:var(--text-faint);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pcpage .otags{display:flex;align-items:center;gap:5px;flex:none}

/* the kind badge — one letter, and the only saturated thing in a row */
.pcpage .kb{display:grid;place-items:center;width:19px;height:19px;border-radius:5px;
  font-size:10px;font-weight:800;letter-spacing:0}
.pcpage .kb--F{color:#e58d85;border:1px solid rgba(201,82,74,.45);background:rgba(201,82,74,.13)}
.pcpage .kb--M{color:#f2d79c;border:1px solid rgba(212,146,58,.45);background:rgba(212,146,58,.13)}
.pcpage .kb--I{color:#9fb6cd;border:1px solid rgba(90,149,214,.40);background:rgba(90,149,214,.12)}
.pcpage .kb--MF{color:#dcb08a;border:1px solid rgba(201,120,74,.45);background:rgba(201,120,74,.13);
  width:auto;padding:0 6px;font-size:10px;letter-spacing:-.01em}
.pcpage .cb{display:inline-flex;align-items:center;height:19px;padding:0 7px;border-radius:5px;
  font-size:11px;font-weight:600;color:var(--text-dim);letter-spacing:.01em;
  border:1px solid var(--border);background:#272423;white-space:nowrap}

/* ── the section itself ────────────────────────────────── */
.pcpage .vhead{padding:20px 22px 16px;border-bottom:1px solid var(--line)}
.pcpage .vnum{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.pcpage .vnum b{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--gold);
  letter-spacing:.04em}
.pcpage .vnum span{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-faint)}
.pcpage .vhead h2{font-size:23px;font-weight:800;letter-spacing:-.025em;line-height:1.2;
  color:var(--parch);margin:0}
.pcpage .vbadges{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-top:12px}

/* Every badge on the section header shares one height and one type
   size. The class chip is a phrase, so it is set in the page face and
   sentence case like the flags beside it — monospace and small-caps
   tracking were fighting each other across three different heights. */
.pcpage .vbadges .kb{width:24px;height:24px;border-radius:6px;font-size:12px}
.pcpage .vbadges .kb--MF{width:auto;padding:0 8px;font-size:12px}
.pcpage .vbadges .cb{height:24px;padding:0 9px;border-radius:6px;font-size:11.5px;font-weight:600}
.pcpage .flag{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:6px;
  font-size:11.5px;font-weight:600;letter-spacing:.01em;white-space:nowrap}
.pcpage .flag .i{font-size:12px}
.pcpage .flag--court{color:#f2d79c;border:1px solid rgba(212,146,58,.45);background:rgba(212,146,58,.11)}
.pcpage .flag--ck{color:#dcb08a;border:1px solid rgba(201,120,74,.45);background:rgba(201,120,74,.11)}
.pcpage .flag--enh{color:#9fb6cd;border:1px solid rgba(90,149,214,.38);background:rgba(90,149,214,.10)}
.pcpage .flag--susp{color:#e58d85;border:1px solid rgba(201,82,74,.5);background:rgba(201,82,74,.14)}
.pcpage .flag--noenf{color:#e58d85;border:1px solid rgba(201,82,74,.5);background:rgba(201,82,74,.14)}

.pcpage .vbody{padding:18px 22px}
.pcpage .vsec{margin-bottom:20px}
.pcpage .vsec:last-child{margin-bottom:0}
.pcpage .vsec > h3{display:flex;align-items:center;gap:9px;margin:0 0 11px;
  font-size:10px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:#8a8073;line-height:normal}
.pcpage .vsec > h3::after{content:"";flex:1;height:1px;background:var(--line)}
.pcpage .vsec > h3 .i{font-size:12px;color:var(--amber)}

.pcpage .el{font-size:12.5px;line-height:1.72;color:var(--text-dim)}
.pcpage .el p{margin-bottom:9px}
.pcpage .el p:last-child{margin-bottom:0}
.pcpage .cl{display:grid;grid-template-columns:22px 1fr;gap:0 12px;margin-bottom:12px}
.pcpage .cl:last-child{margin-bottom:0}
.pcpage .cl > b{font-size:12.5px;font-weight:700;color:var(--amber);line-height:1.72}
.pcpage .cl > span{font-size:12.5px;line-height:1.72;color:var(--text-dim)}

/* the sentence, in whichever of its five shapes this offence uses */
.pcpage .sbox{border:1px solid var(--border);border-radius:10px;background:#232120;overflow:hidden}
.pcpage .sbox + .sbox{margin-top:11px}
.pcpage .stop{display:flex;flex-wrap:wrap;align-items:center;gap:9px;padding:11px 14px;
  border-bottom:1px solid var(--line);background:#282422}
.pcpage .stop .cb{height:22px}
.pcpage .swhen{font-size:11.5px;color:var(--text-faint);font-style:italic}
.pcpage .srange{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}
.pcpage .srange > div{padding:11px 14px;background:#232120}
.pcpage .srange dt{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:#8a8073;margin-bottom:6px}
.pcpage .srange dd{margin:0;font-size:15px;font-weight:700;color:var(--parch);
  font-variant-numeric:tabular-nums}
.pcpage .srange dd em{font-style:normal;font-size:11px;font-weight:600;color:var(--text-faint);
  display:block;margin-top:3px}
.pcpage .sextra{display:flex;flex-direction:column;gap:7px;padding:11px 14px;border-top:1px solid var(--line)}
.pcpage .sline{display:flex;align-items:flex-start;gap:9px;font-size:12.5px;line-height:1.65;color:var(--text-dim)}
.pcpage .sline .i{flex:none;margin-top:2px;font-size:12px;color:#6b6154}
.pcpage .sline b{color:var(--parch);font-weight:700}

.pcpage .stab{width:100%;border-collapse:collapse}
.pcpage .stab th{padding:9px 14px;text-align:left;font-size:10px;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:#8a8073;background:#252220;
  border-bottom:1px solid var(--border);white-space:nowrap}
.pcpage .stab td{padding:11px 14px;font-size:12.5px;line-height:1.6;color:var(--text-dim);
  border-bottom:1px solid #322c26;vertical-align:top}
.pcpage .stab tr:last-child td{border-bottom:none}
.pcpage .stab td:first-child{font-weight:600;color:var(--parch)}
.pcpage .stab--code td:first-child{font-family:var(--mono);font-weight:700;color:var(--gold-hi);width:104px}
.pcpage .stab--code th:first-child{width:104px}
.pcpage .stab td.num{font-variant-numeric:tabular-nums;color:var(--parch);font-weight:600}

.pcpage .slad{counter-reset:step;padding:4px 0}
.pcpage .slad > div{display:grid;grid-template-columns:26px 1fr;gap:10px;align-items:baseline;
  padding:8px 14px;border-bottom:1px solid var(--line)}
.pcpage .slad > div:last-child{border-bottom:none}
.pcpage .slad b{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--text-faint)}
.pcpage .slad span{font-size:12.5px;line-height:1.6;color:var(--text-dim)}

.pcpage .vnote{display:flex;align-items:flex-start;gap:10px;padding:13px 15px;border-radius:9px;
  border:1px solid var(--line);background:#232120;font-size:12.5px;line-height:1.72;
  color:var(--text-dim)}
.pcpage .vnote .i{flex:none;margin-top:2px;font-size:13px;color:#6b6154}
.pcpage .vooc{border-color:rgba(90,149,214,.28);background:rgba(90,149,214,.07);color:#a8bccf}
.pcpage .vooc .i{color:#5a95d6}
.pcpage .vwarn{border-color:rgba(201,82,74,.4);background:rgba(201,82,74,.09);color:#e0968f}
.pcpage .vwarn .i{color:#dd7b73}
.pcpage .vwarn b{color:#f0c4c0}

.pcpage .vdefs{display:flex;flex-direction:column;gap:9px}
.pcpage .vdef{padding:11px 14px;border-radius:9px;border:1px solid var(--line);background:#232120}
.pcpage .vdef b{display:block;font-size:12px;font-weight:700;color:var(--parch);margin-bottom:4px}
.pcpage .vdef span{font-size:12.5px;line-height:1.72;color:var(--text-faint)}

.pcpage .vbar{display:flex;flex-wrap:wrap;align-items:center;gap:9px;padding:14px 22px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#211e1d}
.pcpage .vbar .why{flex:1 1 auto;min-width:0;font-size:11.5px;color:var(--text-faint)}

.pcpage .pc-empty{padding:60px 24px;text-align:center;color:var(--text-faint);font-size:12.5px}
.pcpage .pc-empty .i{display:block;margin:0 auto 10px;font-size:24px;color:#443c34}
.pcpage .pc-empty b{display:block;color:var(--text-dim);font-weight:700;margin-bottom:5px;font-size:13px}

/* ── the charge sheet ──────────────────────────────────── */
.pcpage .sheet{position:fixed;right:0;top:0;bottom:0;width:430px;z-index:70;display:flex;
  flex-direction:column;background:#201d1b;border-left:1px solid var(--border);
  box-shadow:-24px 0 60px rgba(0,0,0,.5);transform:translateX(100%);
  transition:transform .22s var(--ease)}
.pcpage .sheet.pc-on{transform:none}
.pcpage .shead{display:flex;align-items:center;gap:10px;padding:0 16px;height:52px;flex:none;
  border-bottom:1px solid var(--border);background:#282320}
.pcpage .shead b{font-size:14px;font-weight:800;letter-spacing:-.01em;color:var(--parch)}
.pcpage .shead .pc-n{font-variant-numeric:tabular-nums;font-size:11px;font-weight:800;padding:2px 8px;
  border-radius:5px;color:var(--gold-hi);border:1px solid rgba(212,146,58,.3);
  background:rgba(212,146,58,.1)}
.pcpage .shead .mx{margin-left:auto;width:30px;height:30px;display:grid;place-items:center;
  border-radius:8px;font-size:13px;color:var(--text-dim);border:1px solid var(--border);
  background:#272423;transition:.14s var(--ease)}
.pcpage .shead .mx:hover{color:var(--red);border-color:rgba(201,82,74,.45);background:#2c2321}
.pcpage .sbody{flex:1;overflow-y:auto;padding:14px 16px}
.pcpage .sfoot{flex:none;border-top:1px solid var(--border);background:#1c1a18}

.pcpage .crow{border:1px solid var(--border);border-radius:10px;background:#262322;margin-bottom:10px}
.pcpage .crow:last-child{margin-bottom:0}
.pcpage .ctop{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;
  padding:10px 12px}
.pcpage .ctop .onum{font-size:11.5px}
.pcpage .ctop .cname{min-width:0;font-size:12.5px;font-weight:600;color:var(--parch);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pcpage .cx{width:24px;height:24px;display:grid;place-items:center;border-radius:6px;font-size:11px;
  color:#5f574d;transition:.14s var(--ease)}
.pcpage .cx:hover{color:#e08a80;background:rgba(201,82,74,.14)}
.pcpage .copts{display:flex;flex-wrap:wrap;gap:7px;padding:0 12px 10px}
.pcpage .copts select.inp{height:26px;font-size:11.5px;min-width:0;max-width:none;flex:1 1 130px}
.pcpage .cnum2{display:flex;align-items:center;gap:0;flex:none;border:1px solid var(--border);
  border-radius:7px;overflow:hidden;background:#1c1a18}
.pcpage .cnum2 button{width:26px;height:26px;display:grid;place-items:center;font-size:12px;
  color:var(--text-faint);transition:.13s var(--ease)}
.pcpage .cnum2 button:hover{color:var(--gold);background:#2a2624}
.pcpage .cnum2 span{min-width:26px;text-align:center;font-size:11.5px;font-weight:700;
  color:var(--parch);font-variant-numeric:tabular-nums}
.pcpage .cwhy{display:flex;align-items:center;gap:8px;padding:8px 12px;border-top:1px solid var(--line);
  font-size:11px;color:var(--text-faint)}
.pcpage .cwhy .i{font-size:11px;color:#6b6154}

.pcpage .stot{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}
.pcpage .stot > div{padding:12px 14px;background:#1c1a18}
.pcpage .stot dt{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:#8a8073;margin-bottom:6px}
.pcpage .stot dd{margin:0;font-size:17px;font-weight:800;color:var(--parch);
  font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.pcpage .stot dd em{display:block;margin-top:3px;font-style:normal;font-size:10.5px;font-weight:600;
  color:var(--text-faint);letter-spacing:0}
.pcpage .sacts{display:flex;gap:9px;padding:12px 14px;border-top:1px solid var(--line)}
.pcpage .sacts .pc-gbtn{flex:1;justify-content:center}
.pcpage .snote{padding:0 14px 12px;font-size:11px;line-height:1.55;color:var(--text-faint)}
.pcpage .sback{position:fixed;inset:0;z-index:69;background:rgba(10,9,8,.5);opacity:0;
  visibility:hidden;transition:.2s var(--ease);pointer-events:none}
.pcpage .sback.pc-on{pointer-events:auto}
.pcpage .sback.pc-on{opacity:1;visibility:visible}
/* Below 900 the sheet covers the page, so it behaves as a dialog
   and the scrim comes back with it. */
@media (max-width:900px){ .pcpage .sheet{width:min(430px,100%)} }

@media (max-width:560px){ .pcpage .sheet{width:100%} }

/* the page gives up the width the sheet takes, rather than hiding under it */
body.pc-sheet .inner{max-width:1180px}
@media (min-width:900px){ body.pc-sheet .page{padding-right:430px} }

/* ── dialogs ───────────────────────────────────────────── */
.pcpage .pc-ovl{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:24px;
  background:rgba(10,9,8,.72);opacity:0;visibility:hidden;
  transition:opacity .18s var(--ease),visibility .18s}
.pcpage .pc-ovl.pc-on{opacity:1;visibility:visible}
.pcpage .pc-modal{width:min(720px,100%);max-height:min(86vh,860px);display:flex;flex-direction:column;
  border:1px solid var(--border);border-radius:13px;background:var(--panel);
  box-shadow:0 40px 90px rgba(0,0,0,.6);transform:translateY(8px);
  transition:transform .18s var(--ease)}
.pcpage .pc-ovl.pc-on .pc-modal{transform:none}
.pcpage .pc-mh{display:flex;align-items:center;gap:10px;padding:0 18px;height:54px;flex:none;
  border-bottom:1px solid var(--line);background:#282320;border-radius:13px 13px 0 0}
.pcpage .pc-mh .t{font-size:16px;font-weight:800;letter-spacing:-.02em}
.pcpage .pc-mh .msub{font-size:11.5px;color:var(--text-faint)}
.pcpage .pc-mh .pc-side{margin-left:auto;display:flex;align-items:center;gap:9px}
.pcpage .pc-mh .mx{width:32px;height:32px;display:grid;place-items:center;border-radius:8px;
  font-size:14px;color:var(--text-dim);border:1px solid var(--border);background:#272423;
  transition:.15s var(--ease)}
.pcpage .pc-mh .mx:hover{color:var(--red);border-color:rgba(201,82,74,.45);background:#2c2321}
.pcpage .mbody{padding:18px;overflow-y:auto}
.pcpage .pc-mfoot{flex:none;display:flex;align-items:center;gap:12px;padding:13px 18px;
  border-top:1px solid var(--line);background:#211e1c;border-radius:0 0 13px 13px}
.pcpage .pc-mfoot .mnote{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:8px;
  font-size:11px;line-height:1.5;color:var(--text-faint)}
.pcpage .pc-mfoot .mnote .i{flex:none;font-size:12px;color:#6b6154}
.pcpage .pc-mfoot .pc-mact{margin-left:auto;display:flex;gap:8px}

.pcpage .gsec{margin-bottom:18px}
.pcpage .gsec:last-child{margin-bottom:0}
.pcpage .gsec h3{margin:0 0 9px;font-size:10px;font-weight:800;letter-spacing:.15em;
  text-transform:uppercase;color:var(--text-faint);line-height:normal}
.pcpage .grow{display:grid;grid-template-columns:72px 1fr;gap:13px;align-items:center;
  padding:11px 14px;border:1px solid var(--line);border-radius:10px;background:#232120;
  margin-bottom:9px}
.pcpage .grow:last-child{margin-bottom:0}
.pcpage .grow b{font-size:12.5px;font-weight:700;color:var(--parch)}
/* Scoped to the description column. As `.grow span` it was (0,1,1) and
   beat .gtag's (0,1,0), turning the tag back into a block and pushing
   its letter to the left — the tag is a span too. */
.pcpage .grow > div span{display:block;margin-top:4px;font-size:12px;line-height:1.68;
  color:var(--text-faint)}
/* the left column: one word, sized to be read, in the colour of the
   thing it names rather than a chip beside it */
.pcpage .gtag{display:flex;align-items:center;justify-content:center;height:26px;border-radius:7px;
  font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
/* the crime type is one letter, and the row's own title already says
   the word — so the letter is given the room instead of an abbreviation */
.pcpage .gtag--one{font-size:13px;letter-spacing:0}
.pcpage .gtag--F{color:#e58d85;border:1px solid rgba(201,82,74,.42);background:rgba(201,82,74,.11)}
.pcpage .gtag--M{color:#f2d79c;border:1px solid rgba(212,146,58,.42);background:rgba(212,146,58,.11)}
.pcpage .gtag--I{color:#9fb6cd;border:1px solid rgba(90,149,214,.38);background:rgba(90,149,214,.10)}
.pcpage .gtag--MF{color:#dcb08a;border:1px solid rgba(201,120,74,.42);background:rgba(201,120,74,.11);
  font-size:12px;letter-spacing:0}
.pcpage .gtag--c{color:var(--gold-hi);border:1px solid #5a4c39;background:#332c24}
.pcpage .gtag--n{color:var(--text-dim);border:1px solid var(--border);background:#272423;
  font-family:var(--mono);letter-spacing:.02em}
.pcpage .gp{font-size:12.5px;line-height:1.72;color:var(--text-dim);margin-bottom:11px}
.pcpage .gp:last-child{margin-bottom:0}

/* the provisions — the titles that are read, not charged */
.pcpage .prov{padding:18px 22px}
/* A run of provisions ends with a rule; the next heading needs to sit
   clear of it, not on it. */
.pcpage .provhead{display:flex;align-items:center;gap:11px;margin:26px 0 4px}
.pcpage .provhead:first-child{margin-top:0}
.pcpage .provhead b{flex:none;font-size:10px;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--amber)}
.pcpage .provhead::after{content:"";flex:1;height:1px;background:var(--line)}
.pcpage .provrow{display:grid;grid-template-columns:56px 1fr;gap:0 16px;padding:13px 0;
  border-bottom:1px solid var(--line)}
.pcpage .provrow:last-child,
.pcpage .provrow:has(+ .provhead){border-bottom:none}
.pcpage .provrow > b{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--text-faint);
  font-variant-numeric:tabular-nums}
.pcpage .provrow .pt{font-size:12.5px;font-weight:700;color:var(--parch);margin-bottom:5px}
.pcpage .provrow .pd{font-size:12.5px;line-height:1.72;color:var(--text-dim)}
.pcpage .provmul{display:inline-flex;align-items:center;gap:6px;margin-top:7px;height:22px;padding:0 8px;
  border-radius:6px;font-size:10.5px;font-weight:700;color:var(--gold-hi);
  border:1px solid rgba(212,146,58,.3);background:rgba(212,146,58,.09)}

/* ══════════════════════════════════════════════════════════
   AMENDING A SECTION
   The editor is a form that looks like the section it edits —
   same cards, same rules — so it never feels like a different
   application bolted on beside the code.
   ══════════════════════════════════════════════════════════ */
.pcpage .pc-modal--wide{width:min(880px,100%)}

.pcpage .vtop{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap}
.pcpage .vtop h2{flex:1 1 260px;min-width:0}
.pcpage .vacts{display:flex;align-items:center;gap:7px;flex:none;padding-top:2px}
.pcpage .vamd{color:var(--gold-hi);border-color:#5a4c39;background:#332c24}
.pcpage .vamd:hover{color:var(--gold-hi);border-color:#6d5c44;background:#3c3329}
.pcpage .vamd .i{color:var(--gold)}

/* the list marks an amended section before it is opened */
.pcpage .oamd{display:grid;place-items:center;width:19px;height:19px;border-radius:5px;font-size:11px;
  color:var(--gold);border:1px solid #5a4c39;background:#332c24}

.pcpage .edcard{border:1px solid var(--border);border-radius:10px;background:#232120;
  padding:14px;margin-bottom:12px}
.pcpage .edcard:last-child{margin-bottom:0}
.pcpage .edcard--why{border-color:#5a4c39;background:#272220}
.pcpage .edcardh{display:flex;align-items:center;gap:9px;
  padding-bottom:10px;border-bottom:1px solid var(--line)}
.pcpage .edcardh .i{font-size:13px;color:var(--amber)}
.pcpage .edcardh b{font-size:12.5px;font-weight:700;color:var(--parch)}
.pcpage .edcardh span{margin-left:auto;font-size:11px;color:var(--text-faint);text-align:right}

.pcpage .edgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:11px}
.pcpage .edf{display:block}
.pcpage .edf--wide{grid-column:1/-1}
.pcpage .edf > span{display:block;margin-bottom:6px;font-size:10px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:#8a8073}
.pcpage .edf textarea.inp{height:auto;min-height:56px;padding:8px 11px;line-height:1.6;resize:vertical}
.pcpage .edf .inp:disabled{color:var(--text-faint);background:#1e1c1b;cursor:not-allowed}
.pcpage .edchk{display:flex;align-items:center;gap:8px;height:28px;font-size:12px;color:var(--text-dim)}
.pcpage .edchk input{width:15px;height:15px;accent-color:var(--amber);cursor:pointer}
.pcpage .edchips{display:flex;flex-wrap:wrap;gap:7px}
.pcpage .edchips .chip .i{font-size:11px}

/* the elements of the offence, each one a row that can move */
.pcpage .ederows{display:flex;flex-direction:column;gap:9px}
.pcpage .ederow{display:grid;grid-template-columns:118px 1fr auto;gap:9px;align-items:start;
  padding:9px;border:1px solid var(--line);border-radius:9px;background:#1f1d1c}
.pcpage .edeside{display:flex;flex-direction:column;gap:6px}
.pcpage .edeside select.inp{width:100%;min-width:0;max-width:none;font-size:11.5px}
.pcpage .edelet{text-align:center;font-weight:700}
.pcpage .edetext{height:auto;padding:8px 11px;line-height:1.6;resize:vertical;font-size:12.5px}
.pcpage .edeacts{display:flex;flex-direction:column;gap:5px}
.pcpage .edicon{width:28px;padding:0;justify-content:center}
.pcpage .edicon--x:hover{color:#e58d85;border-color:rgba(201,82,74,.45);background:#2c2321}

/* a sentence table, edited in place */
.pcpage .edtabwrap{overflow-x:auto}
.pcpage .edtab{width:100%;border-collapse:collapse}
.pcpage .edtab th{padding:0 6px 7px;text-align:left;font-size:10px;font-weight:800;letter-spacing:.11em;
  text-transform:uppercase;color:#8a8073;white-space:nowrap}
.pcpage .edtab td{padding:3px 3px}
.pcpage .edtab td:first-child{padding-left:0}
.pcpage .edtab .inp{min-width:92px;font-size:12px}
.pcpage .edtabx{width:36px}

.pcpage .edlad{display:flex;flex-direction:column;gap:7px}
.pcpage .edladrow{display:grid;grid-template-columns:38px 1fr auto;gap:9px;align-items:center}
.pcpage .edladrow b{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--amber);text-align:right}

.pcpage .edsign{display:flex;align-items:flex-start;gap:9px;padding-top:11px;
  border-top:1px solid var(--line);font-size:11.5px;line-height:1.6;color:var(--text-faint)}
.pcpage .edsign .i{flex:none;margin-top:2px;font-size:13px;color:var(--amber)}
.pcpage .edsign b{color:var(--text-dim);font-weight:700}

/* ── before and after ──────────────────────────────────── */
.pcpage .dfhead{display:flex;align-items:flex-start;gap:9px;margin-bottom:12px;padding:11px 13px;
  border:1px solid #5a4c39;border-radius:9px;background:#272220;
  font-size:12px;line-height:1.6;color:var(--text-dim)}
.pcpage .dfhead .i{flex:none;margin-top:2px;font-size:13px;color:var(--gold)}
.pcpage .dfhead b{color:var(--parch);font-weight:700}
.pcpage .dfrow{border:1px solid var(--line);border-radius:9px;background:#1f1d1c;margin-bottom:9px;
  overflow:hidden}
.pcpage .dfrow:last-child{margin-bottom:0}
.pcpage .dff{padding:8px 13px;border-bottom:1px solid var(--line);background:#262322;
  font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#9a9083}
.pcpage .dfpair{display:grid;grid-template-columns:1fr 30px 1fr;align-items:stretch}
.pcpage .dfside{padding:11px 13px;min-width:0}
.pcpage .dfside span{display:block;margin-bottom:5px;font-size:10px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:#7d7367}
.pcpage .dfside p{font-size:12.5px;line-height:1.65;word-break:break-word}
.pcpage .dfside--from p{color:var(--text-faint);text-decoration:line-through;
  text-decoration-color:rgba(201,82,74,.6)}
.pcpage .dfside--to{background:rgba(87,178,106,.06)}
.pcpage .dfside--to span{color:#79ad84}
.pcpage .dfside--to p{color:var(--parch)}
.pcpage .dfarrow{display:grid;place-items:center;font-size:12px;color:#6b6154;
  border-left:1px solid var(--line);border-right:1px solid var(--line);background:#232120}
.pcpage .dfmiss{font-style:normal;color:#e58d85}
@media (max-width:640px){
  .pcpage .dfpair{grid-template-columns:1fr}
  .pcpage .dfarrow{height:26px;border-left:none;border-right:none;
    border-top:1px solid var(--line);border-bottom:1px solid var(--line);transform:rotate(90deg)}
  .pcpage .ederow{grid-template-columns:1fr}
  .pcpage .edeacts{flex-direction:row}
}


/* ── the history ───────────────────────────────────────── */
.pcpage .hxrec{border:1px solid var(--border);border-radius:10px;background:#232120;
  padding:14px;margin-bottom:12px}
.pcpage .hxrec:last-child{margin-bottom:0}
.pcpage .hxtop{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:11px}
.pcpage .hxv{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:6px;
  font-size:11px;font-weight:800;color:var(--gold-hi);border:1px solid #5a4c39;background:#332c24}
.pcpage .hxsec{font-size:12px;font-weight:700;color:var(--text-dim);text-decoration:underline;
  text-decoration-color:#4a423a;text-underline-offset:3px}
.pcpage .hxsec:hover{color:var(--gold-hi);text-decoration-color:var(--gold)}
.pcpage .hxat{margin-left:auto;font-size:11px;color:var(--text-faint);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.pcpage .hxwho{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.pcpage .hxwho .i{flex:none;font-size:14px;color:var(--amber)}
.pcpage .hxwho b{display:block;font-size:12.5px;font-weight:700;color:var(--parch)}
.pcpage .hxwho span{display:block;margin-top:2px;font-size:11px;color:var(--text-faint)}
.pcpage .hxwhy{margin-bottom:11px;padding:10px 12px;border-left:2px solid var(--amber);
  border-radius:0 8px 8px 0;background:#262322;font-size:12.5px;line-height:1.7;color:var(--text-dim)}
.pcpage .hxorig{display:flex;align-items:flex-start;gap:9px;padding:11px 13px;border:1px dashed var(--border);
  border-radius:9px;font-size:12px;line-height:1.65;color:var(--text-faint)}
.pcpage .hxorig .i{flex:none;margin-top:2px;font-size:13px;color:#6b6154}
.pcpage .hxorig b{color:var(--text-dim);font-weight:700}

/* One rhythm down the card, set on the flow rather than on each
   control — a label that sat straight under the field above it was
   the field above it reading as its own. */
.pcpage .edcard > * + *{margin-top:13px}
.pcpage .edcard > .edcardh + *{margin-top:12px}

/* A dialog is centred over the page, not over the window. The overlay is
   fixed to the viewport, which here is the page plus the 298px rail — so
   without this every dialog sits 149px right of the column it belongs to.
   Only while the rail is actually beside the page. */
@media (min-width:961px){
  .pcpage .pc-ovl{padding-left:322px}
}
/* The provisions used to be a second .inner under .page, so the gap above
   them was one gutter's bottom plus the next one's top. Inside the single
   .inner the terminal draws, that gap is carried here instead. */
.pcpage .pcprov{margin-top:68px}

/* ── the dashboard's bulletin viewer draws the same blocks as the APB
   database (one renderer, window.MDC_APB), so it needs the same block
   styles: the headline line, the portrait, the callouts, the If-located
   panel, the bullet list and the wide attachment figures. ── */
.apb-body .headline{margin:0 0 14px;padding-bottom:11px;border-bottom:1px solid var(--line);font-size:13px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--gold-hi)}
.apb-body figure.ab-portrait{float:right;width:150px;margin:0 0 12px 18px;text-align:center}
.apb-body figure.ab-portrait img{width:150px;height:150px;object-fit:cover}
.apb-body figure.ab-wide{clear:right}
.apb-body figure.ab-wide img{width:100%;max-height:340px;object-fit:cover}
.apb-body ul{margin:0 0 12px;padding:0;list-style:none}
.apb-body li{position:relative;padding-left:16px;margin-bottom:5px}
.apb-body li::before{content:"";position:absolute;left:2px;top:9px;width:5px;height:5px;transform:rotate(45deg);background:var(--amber)}
.apb-body .callout{margin:0 0 12px;padding:11px 14px;border-radius:8px;clear:right;border:1px solid var(--border);border-left:3px solid var(--text-faint);background:#272423}
.apb-body .callout p{margin:0}
.apb-body .callout--danger{border-color:rgba(201,82,74,.4);border-left-color:var(--red);background:#2e2220}
.apb-body .callout--danger p{color:#e5cfcc}
.apb-body .callout--danger strong{color:#f7e6e4}
.apb-body .callout--caution{border-color:rgba(212,146,58,.4);border-left-color:var(--amber);background:#2e2619}
.apb-body .callout--do{border-color:rgba(87,178,106,.34);border-left-color:var(--green);background:#232b23}
.apb-body .ab-act{margin:16px 0 14px;border-radius:9px;overflow:hidden;clear:right;border:1px solid rgba(212,146,58,.34);background:#241f1a}
.apb-body .ab-act .hd{display:flex;align-items:center;gap:9px;padding:8px 13px;background:linear-gradient(90deg,rgba(212,146,58,.18),rgba(212,146,58,.05));border-bottom:1px solid rgba(212,146,58,.24);font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-hi)}
.apb-body .ab-act .hd .i{font-size:14px;color:var(--gold)}
.apb-body .ab-act .bd{padding:12px 14px}
.apb-body .ab-act .bd p{margin:0;color:#e6ddcb}
.apb-body .ab-act .bd strong{color:#fff4e2}
.apb-body table,.apb-body .ab-act,.apb-body .callout{clear:right}