/* Global: an explicit display: on a class (.pill etc.) must never beat the hidden attribute. */
[hidden]{display:none !important}
/* ============================================================================
   FK BMS — BASE SHELL (bms.flyingkarlis.com admin surface)
   Loaded AFTER tokens.css + app.css.  The core admin shell (.admin-shell /
   .admin-sidebar / .admin-nav / .admin-main / .brand) is inherited VERBATIM from
   app.css — this file adds ONLY the BMS-specific base-shell pieces:
     (1) global density: html font-size 68% (15% smaller than the mockup's 80%, Karlis 2026-07-06);
     (2) the sidebar-nav count badge;
     (3) the shell mount points (#side-peek / #modal-root / #cmd-palette), empty
         containers wired up by later phases.
   Screen styles (widgets / KPI / pills / queues) land in later phases, NOT here.
   Semantic tokens (var(--color-*)) ONLY — no hardcoded hex.  Content-hashed at
   startup by templating.py (edit + restart auto-busts the cache).
   Owner: Flying Karlis SIA.
   ============================================================================ */

/* (1) density — scales every rem-based type + spacing token at once.
   68% = 15% smaller than the mockup's 80% baseline (Karlis, 2026-07-06; was
   80% from 2026-06-10). scrollbar-gutter keeps the layout from shifting when a
   long page adds a scrollbar. */
html.bms{font-size:68%; overflow-y:scroll; scrollbar-gutter:stable}

/* The BMS shell fills the viewport; the app.css .admin-main default surface is a
   card white — the BMS home sits on the app background so widgets read as cards. */
.bms .admin-main{background:var(--color-bg)}

/* (2) Sidebar-nav count badge (e.g. Inbox · 7).  Small accent pill, right-aligned
   against the nav label.  Ported from the mockup bms.css badge, re-tokened. */
.admin-nav a .badge{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:18px; height:18px; padding:0 5px; margin-left:.5rem;
  border-radius:9px; line-height:1; vertical-align:middle;
  background:var(--color-accent); color:var(--color-on-accent);
  font-size:var(--t-xs); font-weight:800;
}
/* A nested / secondary nav item (e.g. a sub-page under Courses) reads lighter. */
.admin-nav a.sub{padding-left:1.9rem; font-size:.9em}

/* (3) Shell mount points — empty containers the later phases render into:
     #side-peek   — the right-hand slide-in detail panel (contact / course peek);
     #modal-root  — centred dialogs (confirm / edit);
     #cmd-palette — the ⌘K command palette overlay.
   Hidden until a phase toggles them; kept in the base shell so every BMS page has
   a stable place to mount without touching the layout grid. */
#side-peek,
#modal-root,
#cmd-palette{display:none}

/* When toggled open (a phase adds .is-open), each becomes a fixed overlay layer.
   Base positioning only — the panels' own chrome ships with their phase. */
#side-peek.is-open{
  display:block; position:fixed; top:0; right:0; bottom:0; z-index:120;
  width:min(440px, 92vw);
  background:var(--color-card); border-left:1px solid var(--color-line);
  box-shadow:var(--shadow); overflow-y:auto;
}
#modal-root.is-open,
#cmd-palette.is-open{
  display:flex; position:fixed; inset:0; z-index:200;
  justify-content:center; align-items:flex-start;
  padding:var(--s-6) var(--s-4); overflow:auto;
  background:color-mix(in srgb, var(--color-ink) 55%, transparent);
}

/* ============================================================================
   Step 5 — Home + Inbox queue/widget vocabulary. Ported from the signed-off
   console mockup (app/static/design/bms/{bms.css,console.css}), re-tokened
   onto the STATE tokens in tokens.css — zero hardcoded hex. `bms-` prefixed
   so nothing here can collide with an existing app.css class; `.pill`/`.btn*`
   stay reused as-is (only NEW compound colour variants are added below).
   ============================================================================ */
.bms-pg-head{display:flex; align-items:baseline; gap:var(--s-4); flex-wrap:wrap; margin-bottom:var(--s-5)}
.bms-pg-head h1{font-family:var(--font-head); font-size:var(--t-xl); color:var(--color-ink); margin:0}
.bms-pg-head .bms-sub{font-size:var(--t-sm); color:var(--color-muted)}

.bms-attn-bar{
  background:var(--color-accent-wash); border:1px solid var(--color-line); border-left:4px solid var(--color-accent);
  border-radius:var(--radius-sm); padding:var(--s-3) var(--s-4); margin-bottom:var(--s-5); font-size:var(--t-sm);
  display:flex; align-items:center; gap:var(--s-4); flex-wrap:wrap;
}
.bms-attn-bar .bms-hl{font-weight:800; color:var(--color-accent-text)}
.bms-attn-bar .bms-dt{color:var(--color-muted)}
/* warning variant — e.g. "shared lesson used in N KBs" (amber, not the accent) */
.bms-attn-bar--warn{ background:#fff7ed; border-color:#f0c9a0; border-left-color:#e17335; }

.bms-cc-grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--s-5)}
@media(max-width:900px){.bms-cc-grid{grid-template-columns:1fr}}

.bms-widget{background:var(--color-card); border:1px solid var(--color-line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; margin-bottom:var(--s-5)}
.bms-whead{display:flex; align-items:center; gap:var(--s-3); padding:var(--s-3) var(--s-4); border-bottom:1px solid var(--color-line); background:var(--color-bg)}
.bms-whead h3{font-size:var(--t-sm); font-weight:800; color:var(--color-ink); margin:0}
.bms-whead .bms-wct{font-size:.75rem; font-weight:800; background:var(--color-accent); color:var(--color-on-accent); border-radius:999px; padding:1px 8px}
.bms-whead .bms-wct.green{background:var(--color-success)}
.bms-whead .bms-wct.amber{background:var(--color-warning)}
.bms-whead .bms-wct.blue{background:var(--color-info)}
.bms-whead .bms-sp{flex:1}
.bms-wempty{padding:var(--s-5) var(--s-4); font-size:var(--t-sm); color:var(--color-muted); text-align:center}

.bms-qrow{display:flex; align-items:center; gap:var(--s-3); padding:var(--s-3) var(--s-4); border-top:1px solid var(--color-line); flex-wrap:wrap}
.bms-qrow:first-child{border-top:none}
.bms-qrow:hover{background:var(--color-accent-wash)}
.bms-av{flex:0 0 auto; width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-family:var(--font-head); font-weight:800; font-size:.78rem; background:var(--color-accent-wash); color:var(--color-accent-text)}
.bms-av.green{background:var(--color-success-wash); color:var(--color-success-ink)}
.bms-av.blue{background:var(--color-info-wash); color:var(--color-info-ink)}
.bms-av.amber{background:var(--color-warning-wash); color:var(--color-warning-ink)}
.bms-qbody{flex:1 1 auto; min-width:0}
.bms-qbody .bms-name{font-weight:700; color:var(--color-ink); font-size:var(--t-sm)}
.bms-qbody .bms-meta{font-size:.8rem; color:var(--color-muted); margin-top:.1rem}
.bms-qbody .bms-meta b{color:var(--color-body); font-weight:600}
.bms-qact{flex:0 0 auto; display:flex; align-items:center; gap:.4rem; flex-wrap:wrap}

.pill.green{background:var(--color-success-wash); color:var(--color-success-ink)}
.pill.amber{background:var(--color-warning-wash); color:var(--color-warning-ink)}
.pill.blue{background:var(--color-info-wash); color:var(--color-info-ink)}
.pill.red{background:var(--color-danger-wash); color:var(--color-danger-ink)}

.bms-money-amt{color:var(--color-success-ink); font-weight:700}
.bms-toast{
  background:var(--color-success-wash); color:var(--color-success-ink);
  border:1px solid var(--color-success-wash); border-radius:var(--radius-sm);
  padding:var(--s-3) var(--s-4); font-size:var(--t-sm); font-weight:700; margin-bottom:var(--s-4);
}

/* ============================================================================
   Step 6 — Contacts (list + record + activity rail + email). Ported from the
   signed-off console mockups (contacts/contact/contact-notes/contact-email
   .html), re-tokened onto STATE tokens — zero hardcoded hex. `bms-` prefixed.
   ============================================================================ */

/* -- List: scope-tag + chip strip (role/scope filters) -- */
.bms-scope-tag{
  display:inline-block; font-size:.73rem; color:var(--color-muted);
  background:var(--color-bg); border:1px solid var(--color-line);
  border-radius:999px; padding:1px 8px; white-space:nowrap;
}
.bms-chip-strip{display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:var(--s-3)}
.bms-chip{
  display:inline-flex; align-items:center; background:var(--color-card);
  border:1.5px solid var(--color-line); border-radius:999px; padding:3px 14px;
  font-size:.78rem; font-weight:700; color:var(--color-muted); cursor:pointer;
  white-space:nowrap; text-decoration:none;
}
.bms-chip.is-active{background:var(--color-accent-wash); border-color:var(--color-accent-text); color:var(--color-accent-text)}
.bms-search{
  display:inline-flex; align-items:center; gap:var(--s-2); background:var(--color-card);
  border:1.5px solid var(--color-line); border-radius:var(--radius-sm);
  padding:.35rem var(--s-3); font-size:var(--t-sm); min-width:220px;
}
.bms-search input{border:none; outline:none; font:inherit; flex:1; background:transparent; color:var(--color-body)}

/* -- Record: header card -- */
.bms-contact-header{
  background:var(--color-card); border:1px solid var(--color-line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:var(--s-5); margin-bottom:var(--s-5);
  display:flex; align-items:center; gap:var(--s-5); flex-wrap:wrap;
}
.bms-big-av{
  width:64px; height:64px; border-radius:14px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-head); font-weight:800; font-size:1.35rem;
  background:var(--color-accent-wash); color:var(--color-accent-text);
}
.bms-hname{font-family:var(--font-head); font-size:var(--t-xl); font-weight:800; color:var(--color-ink); line-height:1.1; margin-bottom:.3rem}
.bms-hsub{font-size:var(--t-sm); color:var(--color-muted); display:flex; align-items:center; gap:var(--s-3); flex-wrap:wrap}

/* -- Record: two-column body -- */
.bms-contact-cols{display:grid; grid-template-columns:1fr 320px; gap:var(--s-5); align-items:start}
@media(max-width:900px){.bms-contact-cols{grid-template-columns:1fr}}

/* -- Record: profile field rows (click-to-edit) -- */
.bms-pfield{
  display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap;
  padding:.5rem var(--s-4); border-bottom:1px solid var(--color-line);
  gap:var(--s-3); cursor:pointer; position:relative;
}
.bms-pfield:last-child{border-bottom:none}
.bms-pfield:hover{background:var(--color-accent-wash)}
.bms-pfield:hover .bms-edit-hint{opacity:1}
.bms-pfield.is-editing{cursor:default}
.bms-pk{font-size:var(--t-sm); color:var(--color-muted); flex-shrink:0; min-width:130px}
.bms-pv{font-size:var(--t-sm); font-weight:600; color:var(--color-ink); text-align:right}
.bms-pv.muted{font-weight:400; color:var(--color-muted)}
.bms-edit-hint{
  font-size:.72rem; color:var(--color-accent-text); opacity:0; transition:.1s;
  background:var(--color-accent-wash); border-radius:4px; padding:1px 6px; pointer-events:none;
}
.bms-pfield-form{display:flex; gap:.4rem; align-items:center; flex:1; justify-content:flex-end; flex-wrap:wrap}
.bms-edit-input{
  font:inherit; padding:.25rem .5rem; border:1px solid var(--color-accent);
  border-radius:var(--radius-sm); max-width:12rem;
}
.bms-choice-list{display:flex; gap:.3rem; flex-wrap:wrap; justify-content:flex-end}
.bms-choice-opt{
  font:inherit; font-size:var(--t-xs); font-weight:700; padding:.25rem .6rem;
  border:1.5px solid var(--color-line); border-radius:999px; background:var(--color-card);
  color:var(--color-body); cursor:pointer;
}
.bms-choice-opt.is-sel{background:var(--color-accent-wash); border-color:var(--color-accent-text); color:var(--color-accent-text)}

/* -- Record: Role widget (6B.4) — standalone toggle row, not inside a .bms-pfield-form -- */
.bms-role-toggles{padding:var(--s-4); justify-content:flex-start}

/* -- Record: reusable geography picker (6B.3) -- */
/* `.fk-dd`/`.fk-dd-panel`/`.fk-dd-list`/`.fk-dd-opt` are the SHARED vendored-
   dropdown rules already defined in app.css; only the empty-state collapse
   below is specific to the server-driven (HTMX) variant of that widget —
   the client-side buildDropdown() variant manages visibility via the
   [hidden] attribute instead, so it does not need this rule. */
.geo-picker-panel:empty{display:none; padding:0; border:none; box-shadow:none}
.geo-picker{max-width:16rem}
/* Match .bms-edit-input's compact sizing (the other profile_field_*_edit
   inputs in the same row) rather than app.css's full-size default input. */
.geo-picker-input{font:inherit; font-size:var(--t-sm); padding:.25rem .5rem; border:1px solid var(--color-accent); border-radius:var(--radius-sm); margin:0}

/* -- Record: multi-value rows (emails/phones) -- */
.bms-mv-row{display:flex; align-items:center; gap:var(--s-3); padding:.45rem var(--s-4); border-bottom:1px solid var(--color-line); flex-wrap:wrap}
.bms-mv-row:last-child{border-bottom:none}
.bms-mv-row:hover{background:var(--color-accent-wash)}
.bms-mv-val{flex:1; min-width:0; font-size:var(--t-sm); color:var(--color-ink)}
.bms-mv-actions{display:flex; gap:.4rem; align-items:center; flex-shrink:0}
.bms-mv-add{padding:.5rem var(--s-4); font-size:var(--t-sm); color:var(--color-muted); cursor:pointer; display:flex; align-items:center; gap:.4rem}
.bms-mv-add:hover{color:var(--color-accent-text); background:var(--color-accent-wash)}
.bms-add-plus{width:20px; height:20px; border-radius:50%; border:1.5px dashed var(--color-muted); display:flex; align-items:center; justify-content:center; font-size:.9rem; line-height:1}

/* -- Record: event/ledger rows -- */
.bms-ev-row,.bms-led-row{display:flex; align-items:center; gap:var(--s-3); padding:.6rem var(--s-4); border-bottom:1px solid var(--color-line)}
.bms-ev-row:last-child,.bms-led-row:last-child{border-bottom:none}
.bms-ev-row:hover,.bms-led-row:hover{background:var(--color-accent-wash)}
.bms-ev-name{flex:1; font-size:var(--t-sm); font-weight:700; color:var(--color-ink)}
.bms-ev-name a{color:inherit; text-decoration:none}
.bms-ev-name a:hover{color:var(--color-accent-text); text-decoration:underline}
.bms-ev-date{font-size:.8rem; color:var(--color-muted)}
.bms-led-desc{flex:1; font-size:var(--t-sm); color:var(--color-body)}
.bms-led-amt{font-size:var(--t-sm); font-weight:700; text-align:right; white-space:nowrap}

/* -- Record: history widget -- */
.bms-hist-line{display:flex; align-items:flex-start; gap:var(--s-3); padding:.4rem 0 .4rem var(--s-4); border-left:2px solid var(--color-line); margin-left:var(--s-1); font-size:var(--t-sm)}
.bms-hist-line .ht{font-size:.78rem; color:var(--color-muted); margin-left:auto; flex-shrink:0}

/* -- Activity rail tabs (contact-notes) -- */
.bms-rail-tabs{display:flex; gap:0; border-bottom:2px solid var(--color-line); padding:0 var(--s-4)}
.bms-rtab{padding:var(--s-2) var(--s-3); font-size:var(--t-sm); font-weight:700; color:var(--color-muted); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-2px; text-decoration:none}
.bms-rtab.is-active{color:var(--color-accent-text); border-bottom-color:var(--color-accent-text)}
.bms-note-card{background:var(--color-bg); border:1px solid var(--color-line); border-radius:var(--radius-sm); padding:var(--s-3); margin-bottom:var(--s-3); font-size:var(--t-sm); color:var(--color-body); line-height:1.5; white-space:pre-wrap}
.bms-note-meta{font-size:.75rem; color:var(--color-muted); margin-top:.4rem}
.bms-file-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-4)}
@media(max-width:820px){.bms-file-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.bms-file-grid{grid-template-columns:1fr}}
.bms-fcard{border:1px solid var(--color-line); border-radius:var(--radius-sm); overflow:hidden; background:var(--color-card)}
.bms-fthumb{height:80px; display:flex; align-items:center; justify-content:center; font-size:var(--t-xs); color:var(--color-muted); background:var(--color-accent-wash); text-align:center; padding:0 .5rem}
.bms-fthumb.pdf{background:var(--color-danger-wash); color:var(--color-danger); font-family:var(--font-head); font-weight:800; font-size:1rem}
.bms-fmeta{padding:.4rem var(--s-3)}
.bms-fsub{font-size:.74rem; color:var(--color-muted); margin-top:.1rem}
.bms-dropzone{grid-column:1/-1; border:1.5px dashed var(--color-line); border-radius:var(--radius-sm); background:var(--color-bg); padding:var(--s-5); text-align:center; font-size:var(--t-sm); color:var(--color-muted)}
.bms-cmsg{display:flex; gap:var(--s-3)}
.bms-cbub{background:var(--color-bg); border:1px solid var(--color-line); border-radius:var(--radius-sm); padding:.5rem var(--s-4); font-size:var(--t-sm); color:var(--color-body); line-height:1.5; flex:1}
.bms-cau{font-size:.75rem; color:var(--color-accent-text); font-weight:700; margin-bottom:.2rem}
.bms-av-sm{width:28px; height:28px; border-radius:8px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; font-family:var(--font-head); font-weight:800; font-size:.68rem; background:var(--color-accent-wash); color:var(--color-accent-text)}

/* -- Email compose + branded preview -- */
.bms-to-chip{display:inline-flex; align-items:center; gap:.45rem; background:var(--color-accent-wash); color:var(--color-accent-text); border:1px solid var(--color-accent-text); border-radius:999px; padding:.25rem .7rem; font-size:.82rem; font-weight:700}
.bms-sig-chip{display:inline-flex; align-items:center; gap:.35rem; padding:.28rem .75rem; border-radius:999px; font-size:.78rem; font-weight:700; border:1.5px solid var(--color-line); background:var(--color-card); color:var(--color-body); cursor:pointer}
.bms-sig-chip input{margin:0}
.bms-sig-chip.is-on{background:var(--color-accent-wash); color:var(--color-accent-text); border-color:var(--color-accent-text)}
.bms-merge-btn{font-size:var(--t-xs); border:1px solid var(--color-line); background:var(--color-card); border-radius:var(--radius-sm); padding:.2rem .5rem; cursor:pointer; color:var(--color-muted)}
.bms-eml-frame{max-width:560px; margin:0 auto; background:var(--color-bg); border-radius:var(--radius); overflow:hidden}
.bms-eml-head{padding:var(--s-4); font-family:var(--font-head); font-weight:800; color:var(--color-ink)}
.bms-eml-rule{height:3px; background:var(--color-accent)}
.bms-eml-body{padding:var(--s-5); background:var(--color-card); font-size:var(--t-sm); color:var(--color-body); line-height:1.6}
.bms-eml-body h1{font-size:var(--t-lg); color:var(--color-ink)}
.bms-eml-cta{display:inline-block; margin:var(--s-3) 0; padding:.6rem var(--s-4); background:var(--color-accent); color:var(--color-on-accent); border-radius:var(--radius-sm); text-decoration:none; font-weight:700}
.bms-eml-sig{margin-top:var(--s-4); padding-top:var(--s-3); border-top:1px solid var(--color-line); font-size:var(--t-xs); color:var(--color-muted)}
.bms-eml-foot{padding:var(--s-4); text-align:center; font-size:.72rem; color:var(--color-muted); background:var(--color-bg)}

/* ---------------------------------------------------------------------
   Phase-6 audit hardening (round 1) — shared layout/utility classes that
   REPLACE inline style="" attributes across the Contacts templates (rule:
   "use design-system classes + tokens ... NO raw hex, NO inline styles").
   Token-based only. Reused across contact.html/_email/_notes/_multi/etc —
   add here rather than re-inlining if a future BMS screen needs the same
   shape.
   ------------------------------------------------------------------- */
.bms-sp{flex:1}
.bms-flex{display:flex}
.bms-flex-col{display:flex; flex-direction:column}
.bms-items-center{align-items:center}
.bms-items-start{align-items:flex-start}
.bms-items-end{align-items:flex-end}
.bms-flex-wrap{flex-wrap:wrap}
.bms-gap-2{gap:var(--s-2)}
.bms-gap-3{gap:var(--s-3)}
.bms-gap-4{gap:var(--s-4)}
.bms-gap-5{gap:var(--s-5)}
.bms-mt-1{margin-top:.3rem}
.bms-mt-2{margin-top:var(--s-2)}
.bms-mt-4{margin-top:var(--s-4)}
.bms-mt-5{margin-top:var(--s-5)}
.bms-p-4{padding:var(--s-4)}
.bms-flex-1{flex:1}
.bms-w-full{width:100%}
.bms-w-170{width:170px}
.bms-w-220{width:220px}
.bms-lh-155{line-height:1.55}
.bms-min-w0{min-width:0}
.bms-text-center{text-align:center}
.bms-muted{color:var(--color-muted)}
.bms-muted-xs{color:var(--color-muted); font-size:var(--t-xs)}
.bms-muted-sm{color:var(--color-muted); font-size:var(--t-sm)}
.bms-cursor-default{cursor:default}
.bms-crumb-link{color:var(--color-muted); font-weight:400; text-decoration:none; font-size:var(--t-base)}
.bms-field-label{display:block; font-size:.75rem; font-weight:800; text-transform:uppercase; letter-spacing:.07em; color:var(--color-muted)}
.bms-field-value{font-size:var(--t-sm); color:var(--color-body)}
.bms-field-value.is-strong{font-weight:700; color:var(--color-ink)}
.bms-inline{display:inline}
.bms-input-block{width:100%; font:inherit; padding:.5rem; border:1px solid var(--color-line); border-radius:var(--radius-sm)}
.bms-textarea-block{width:100%; font:inherit; padding:.7rem; border:1px solid var(--color-line); border-radius:var(--radius-sm); resize:vertical}
.bms-form-stack{padding:var(--s-4); display:flex; flex-direction:column; gap:var(--s-4)}
.bms-form-row{display:flex; gap:var(--s-3); align-items:center; padding:var(--s-3) var(--s-4)}
.bms-form-row.is-b-bottom{border-bottom:1px solid var(--color-line)}
.bms-form-row.is-b-top{border-top:1px solid var(--color-line)}
.bms-form-row.is-align-start{align-items:flex-start}
.bms-form-footer{display:flex; align-items:center; gap:var(--s-3); padding-top:var(--s-2); border-top:1px solid var(--color-line)}
.bms-widget--narrow{max-width:44rem}
.bms-sticky-col{position:sticky; left:0; z-index:1; background:var(--color-card)}
.bms-name-cell{position:sticky; left:0; z-index:1; background:var(--color-card); font-weight:700}
.bms-td-link{color:var(--color-ink); text-decoration:none}
.bms-led-amt.is-income{color:var(--color-success-ink)}
.bms-led-amt.is-expense{color:var(--color-danger-ink)}
.bms-led-title{font-weight:600; color:var(--color-ink)}
.bms-led-sub{font-size:.78rem; color:var(--color-muted)}
.bms-av-sm.is-tiny{width:22px; height:22px; font-size:.62rem}
.bms-danger-text{color:var(--color-danger-ink); font-size:var(--t-sm)}
.bms-file-thumb-img{width:100%; height:80px; object-fit:cover; display:block}
.bms-file-name{font-size:var(--t-sm); font-weight:700; color:var(--color-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.bms-file-view-row{padding-top:.3rem}
.bms-file-view-link{color:var(--color-accent-text); font-size:.78rem; font-weight:700; text-decoration:none}
.bms-modal-eml-preview{background:var(--color-card); border-radius:var(--radius); padding:var(--s-4); max-width:38rem; width:100%; box-shadow:var(--shadow)}
.bms-modal-eml-head{display:flex; align-items:center; margin-bottom:var(--s-3)}
.bms-modal-eml-head .bms-eml-preview-label{font-weight:700; font-size:var(--t-sm); color:var(--color-muted)}
.bms-pre-wrap{white-space:pre-wrap}
.bms-comment-time{font-size:.74rem; color:var(--color-muted); margin-top:.2rem}
.bms-toast--danger{background:var(--color-danger-wash); color:var(--color-danger-ink)}
.bms-bt{border-top:1px solid var(--color-line)}
.bms-activity-body{padding:var(--s-3) var(--s-4)}
.bms-pill-sm{font-size:.68rem}
.bms-wempty.is-compact{padding:.5rem var(--s-4); text-align:left}
.kb-section.is-unfiled{opacity:.9}
.bms-list-footer{padding:var(--s-2) var(--s-1)}
.bms-merge-row{margin:.3rem 0}
.bms-mv-error{flex-basis:100%; margin-top:.2rem}

/* Round-2 audit hardening (Step 7) — same rule as the Phase-6 block above:
   these REPLACE inline style="" attributes introduced by the Courses/
   Cockpit/SIV-Log templates. Add here (not back inline) if a future screen
   needs the same shape. */
.bms-mb-4{margin-bottom:var(--s-4)}
.bms-fw-700{font-weight:700}
.bms-contents{display:contents}
.bms-text-warning{color:var(--color-warning)}
.bms-text-success{color:var(--color-success)}
.bms-link-strong{color:var(--color-accent-text); text-decoration:none; font-weight:700}
.bms-widget-note{padding:var(--s-4) var(--s-4) 0}

/* ============================================================================
   Step 7 — Courses list + Cockpit + SIV Log Book. Ported from the signed-off
   console mockups (courses/cockpit/siv-log.html), re-tokened onto STATE
   tokens — zero hardcoded hex. `bms-` prefixed; `.pill`/`.fieldtable`/`.btn*`
   stay reused as-is (matches the Step 5/6 convention above).
   ============================================================================ */

/* -- Capacity bar (Courses list rows + Cockpit stat strip) -- */
.bms-capbar{display:flex; align-items:center; gap:.5rem}
.bms-capbar-track{flex:1; height:6px; background:var(--color-line); border-radius:3px; min-width:80px; overflow:hidden}
.bms-capbar-fill{height:100%; border-radius:3px; background:var(--color-success)}
.bms-capbar-fill.is-warn{background:var(--color-accent)}
.bms-capbar-fill.is-low{background:var(--color-muted)}
.bms-capbar-frac{font-size:.78rem; color:var(--color-muted); white-space:nowrap}

/* -- Neutral/"muted" pill variant (cancelled/completed/locked states) -- */
.pill.muted{background:var(--color-bg); color:var(--color-muted); border:1px solid var(--color-line)}

/* -- Cockpit: two-col grid + stat chips + info panels -- */
.bms-cockpit-grid{display:grid; grid-template-columns:1fr 320px; gap:var(--s-5); align-items:start}
@media(max-width:900px){.bms-cockpit-grid{grid-template-columns:1fr}}

.bms-cstat-row{display:flex; gap:var(--s-3); flex-wrap:wrap; margin-bottom:var(--s-4)}
.bms-cstat{background:var(--color-card); border:1px solid var(--color-line); border-radius:var(--radius-sm); padding:var(--s-3) var(--s-4); min-width:84px; text-align:center}
.bms-cstat .n{font-family:var(--font-head); font-size:1.45rem; font-weight:800; color:var(--color-accent-text); line-height:1}
.bms-cstat .l{font-size:.72rem; font-weight:700; color:var(--color-muted); text-transform:uppercase; letter-spacing:.05em; margin-top:.2rem}
.bms-cstat.green .n{color:var(--color-success-ink)}
.bms-cstat.amber .n{color:var(--color-warning-ink)}

.bms-info-panel{background:var(--color-card); border:1px solid var(--color-line); border-radius:var(--radius); box-shadow:var(--shadow); padding:var(--s-4); margin-bottom:var(--s-4)}
.bms-info-panel h3{font-size:var(--t-sm); font-weight:800; color:var(--color-ink); margin:0 0 var(--s-3); display:flex; align-items:center; gap:.4rem; flex-wrap:wrap}
.bms-info-row{display:flex; justify-content:space-between; align-items:baseline; gap:var(--s-3); padding:.35rem 0; border-bottom:1px solid var(--color-line); font-size:var(--t-sm)}
.bms-info-row:last-child{border-bottom:none}
.bms-info-row .bms-ik{color:var(--color-muted)}
.bms-info-row .bms-iv{font-weight:700; color:var(--color-ink); text-align:right}

/* -- Cockpit access panel: one row per roster contact -- */
.bms-arow{display:flex; align-items:center; gap:var(--s-3); padding:.5rem var(--s-4); border-top:1px solid var(--color-line); font-size:var(--t-sm); flex-wrap:wrap}
.bms-arow:first-child{border-top:none}
.bms-arow .bms-an{font-weight:700; color:var(--color-ink); flex:1 1 auto; min-width:120px}

/* -- SIV Log Book: view tabs (reuses .bms-chip-strip/.bms-chip) + summary strip -- */
.bms-sum-strip{display:flex; gap:var(--s-3); flex-wrap:wrap; margin-bottom:var(--s-5)}
.bms-sum{background:var(--color-card); border:1px solid var(--color-line); border-radius:var(--radius-sm); padding:.5rem 1rem; text-align:center; min-width:90px}
.bms-sum .n{font-family:var(--font-head); font-size:1.35rem; font-weight:800; color:var(--color-accent-text); line-height:1}
.bms-sum .l{font-size:.72rem; font-weight:700; color:var(--color-muted); text-transform:uppercase; letter-spacing:.05em; margin-top:.2rem}

/* ============================================================================
   Step 8 — Ledger + Banking + Assets. Ported from the signed-off console
   mockups (ledger/banking/assets.html), re-tokened onto STATE tokens — zero
   hardcoded hex. `bms-` prefixed. Reuses .bms-widget/.bms-whead/.bms-cstat/
   .bms-scope-tag/.bms-chip*/.bms-search/.bms-money-amt/.bms-toast/.bms-form-*
   from the Step 5-7 blocks above; adds ONLY the Ledger KPI strip + the money-
   specific row/amend/lock vocabulary that had no equivalent yet.
   ============================================================================ */

/* -- Ledger KPI strip (4 headline cards: Income / Expenses / Net / Liability).
   Bigger + label+value+sub, distinct from the compact .bms-cstat used for the
   Assets/Cockpit stat chips. Value colour is semantic (income=success,
   expense=warning, liability=danger). -- */
.bms-kpi-row{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-4); margin-bottom:var(--s-5)}
@media(max-width:1000px){.bms-kpi-row{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.bms-kpi-row{grid-template-columns:1fr}}
.bms-kpi-card{background:var(--color-card); border:1px solid var(--color-line); border-radius:var(--radius); box-shadow:var(--shadow); padding:var(--s-4) var(--s-5)}
.bms-kpi-label{font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--color-muted)}
.bms-kpi-value{font-family:var(--font-head); font-size:1.65rem; font-weight:800; color:var(--color-ink); line-height:1.15; margin-top:.25rem; font-variant-numeric:tabular-nums}
.bms-kpi-value.is-income{color:var(--color-success-ink)}
.bms-kpi-value.is-expense{color:var(--color-warning-ink)}
.bms-kpi-value.is-debt{color:var(--color-danger-ink)}
.bms-kpi-sub{font-size:.76rem; color:var(--color-muted); margin-top:.2rem}

/* -- Ledger "amend adds an offsetting row" explainer banner. -- */
.bms-amend-note{
  background:var(--color-info-wash); border:1px solid var(--color-info-wash); border-left:3px solid var(--color-info);
  border-radius:var(--radius-sm); padding:var(--s-3) var(--s-4); font-size:.82rem; color:var(--color-info-ink); margin-bottom:var(--s-4);
}

/* -- Ledger table cells (reuses .fieldtable base + .bms-scope-tag/.bms-money-amt).
   Numeric amount column, right-aligned, tabular figures. -- */
.bms-amt-cell{text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; font-weight:700}
.bms-amt-cell.is-income{color:var(--color-success-ink)}
.bms-amt-cell.is-expense{color:var(--color-warning-ink)}
.bms-amend-tag{display:inline-block; font-size:.66rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  color:var(--color-info-ink); background:var(--color-info-wash); border-radius:4px; padding:0 5px; margin-left:.4rem; vertical-align:middle}
.bms-ld-date{color:var(--color-muted); white-space:nowrap; font-variant-numeric:tabular-nums; font-size:.8rem}

/* -- Banking: bank-account row + the "locked account" pill. -- */
.bms-acct{display:flex; align-items:flex-start; gap:var(--s-4); padding:.7rem var(--s-4); border-top:1px solid var(--color-line)}
.bms-acct:first-child{border-top:none}
.bms-acct:hover{background:var(--color-accent-wash)}
.bms-acct .bms-acct-body{flex:1 1 auto; min-width:0}
.bms-acct .bms-acct-name{font-weight:800; color:var(--color-ink); font-size:var(--t-sm); display:flex; align-items:center; gap:.5rem; flex-wrap:wrap}
.bms-acct .bms-acct-detail{font-size:.8rem; color:var(--color-muted); margin-top:.15rem; font-variant-numeric:tabular-nums}
.bms-acct .bms-acct-detail b{color:var(--color-body); font-weight:600}
.bms-acct .bms-acct-act{flex:0 0 auto; display:flex; gap:.4rem; align-items:center}
.bms-lock{display:inline-flex; align-items:center; gap:.3rem; font-size:.74rem; font-weight:700; background:var(--color-bg);
  border:1px solid var(--color-line); border-radius:999px; padding:.1rem .55rem; color:var(--color-body)}

/* -- Assets: liability callout row (danger-wash) + debt value. -- */
.bms-liab-row{display:flex; align-items:center; gap:var(--s-4); padding:var(--s-4); background:var(--color-danger-wash)}
.bms-liab-av{width:40px; height:40px; border-radius:10px; flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-head); font-weight:800; background:var(--color-card); color:var(--color-danger-ink)}
.bms-debt-val{color:var(--color-danger-ink); font-weight:800; font-variant-numeric:tabular-nums}
.bms-asset-child{padding-left:1.4rem}
.bms-asset-child::before{content:"\21B3"; color:var(--color-muted); margin-right:.35rem}

   Step 9, Forms & Tests builder. Field list with the settings opened inline under the field (2026-10-16).
   Step 9 — Forms & Tests builder. Two-column field-list + settings panel.
   Ported from the console form-edit/test-edit mockups, tokens only.
   ============================================================================ */
.bms-fb-list{list-style:none; margin:0; padding:0}
.bms-fb-item{border-top:1px solid var(--color-line)}
.bms-fb-item:first-child{border-top:none}
.bms-fb-row{display:flex; align-items:center; gap:var(--s-3); padding:.35rem var(--s-4)}
.bms-fb-item:hover .bms-fb-row{background:var(--color-accent-wash)}
.bms-fb-item.is-selected{box-shadow:inset 2px 0 0 var(--color-accent-text)}
.bms-fb-item.is-selected .bms-fb-row{background:var(--color-accent-wash)}
/* Flat items (no .bms-fb-row child: the KB lesson rows, lesson blocks, settings lookups) are their own row.
   5dbb8e4 moved the flex off .bms-fb-item onto .bms-fb-row, which left these stacking as plain blocks. */
.bms-fb-item:not(:has(> .bms-fb-row)){display:flex; align-items:center; gap:var(--s-3); padding:.35rem var(--s-4)}
.bms-fb-item:not(:has(> .bms-fb-row)):hover{background:var(--color-accent-wash)}
.bms-fb-item.is-selected:not(:has(> .bms-fb-row)){background:var(--color-accent-wash)}
/* The grip: a 44px-wide hit area (the three lines stay small), and touch-action:none so a
   finger on the grip drags the row instead of scrolling the page. */
.bms-fb-handle{width:44px; min-height:44px; margin:-.35rem 0 -.35rem calc(var(--s-4) * -1); padding:0 16px; box-sizing:border-box;
  flex:0 0 auto; display:flex; flex-direction:column; justify-content:center; gap:2px; cursor:grab; touch-action:none; user-select:none}
.bms-fb-handle span{display:block; height:2px; background:var(--color-ink); border-radius:1px; opacity:.45}
.bms-fb-handle:hover span{opacity:.9}
.bms-fb-handle:active{cursor:grabbing}
.bms-fb-label{flex:1; min-width:0; min-height:44px; display:flex; align-items:center; text-align:left; background:none; border:0; padding:0; font:inherit; font-size:var(--t-sm); font-weight:700; color:var(--color-ink); cursor:pointer}
.bms-fb-label:hover{color:var(--color-accent-text)}
.bms-fb-edit-cue{display:inline-flex; align-items:center; gap:.35rem; flex:0 0 auto; font-size:var(--t-xs); font-weight:700; color:var(--color-accent-text)}
.bms-fb-chev{width:.55rem; height:.55rem; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg) translateY(-2px); transition:transform .15s}
.bms-fb-item.is-selected .bms-fb-chev{transform:rotate(-135deg) translateY(-2px)}
.bms-fb-edit-panel{border-top:1px solid var(--color-line); background:var(--color-card)}
.bms-fb-editor .bms-form-footer .bms-sp{flex:1}
.row-ghost{opacity:.4}
@media(max-width:600px){
  .bms-fb-row{flex-wrap:wrap; row-gap:0}
  .bms-fb-label{flex:1 1 calc(100% - 7rem)}
  .bms-fb-row .bms-scope-tag,.bms-fb-row .bms-fb-bind{order:5}
}
.bms-fb-req{width:7px; height:7px; border-radius:50%; flex:0 0 auto; background:var(--color-danger)}
.bms-fb-req.is-opt{background:transparent; border:1px solid var(--color-line)}
.bms-fb-bind{font-size:.7rem; color:var(--color-muted); background:var(--color-bg); border:1px solid var(--color-line);
  border-radius:4px; padding:1px 6px; white-space:nowrap; flex-shrink:0; max-width:170px; overflow:hidden; text-overflow:ellipsis; font-family:var(--font-mono, monospace)}
.bms-fb-palette{padding:var(--s-3) var(--s-4); border-top:1px solid var(--color-line); background:var(--color-bg)}
.bms-fb-chips{display:flex; flex-wrap:wrap; gap:.35rem; margin-top:var(--s-2)}
.bms-fb-check{display:flex; align-items:center; gap:var(--s-2); font-size:var(--t-sm); color:var(--color-body)}
.bms-fb-score{border-top:1px solid var(--color-line); padding-top:var(--s-3)}

/* ── PCKB lesson editor (Editor.js) ─────────────────────────────────────── */
.bms-lesson-editor{ border:1px solid var(--color-border,#e2e2e2); border-radius:var(--radius-md,8px);
  padding:var(--s-2,8px) var(--s-5,20px); background:var(--color-surface,#fff); min-height:340px; }
.bms-lesson-editor .codex-editor__redactor{ padding-bottom:100px !important; }
.bms-editor-help{ margin-top:var(--s-2,8px); }
.bms-save-status{ font-size:var(--t-xs,12px); color:var(--color-muted,#6b7280); }
.bms-save-status[data-kind="saved"]{ color:var(--color-success,#2e7d32); }
.bms-save-status[data-kind="error"]{ color:var(--color-danger,#c0392b); }
.bms-save-status[data-kind="saving"],.bms-save-status[data-kind="dirty"]{ color:var(--color-body,#4b5563); }
/* custom Callout tool */
.ce-callout{ border-left:4px solid var(--color-border,#e2e2e2); border-radius:var(--radius-sm,6px);
  padding:var(--s-2,8px) var(--s-3,12px); margin:var(--s-2,8px) 0; background:var(--color-surface-2,#f7f7f8); }
.ce-callout__kinds{ display:flex; gap:4px; margin-bottom:6px; flex-wrap:wrap; }
.ce-callout__kind{ font-size:11px; text-transform:capitalize; padding:2px 8px; cursor:pointer;
  border:1px solid var(--color-border,#e2e2e2); border-radius:999px; background:transparent; color:var(--color-muted,#6b7280); }
.ce-callout__kind.is-active{ background:var(--color-ink,#163450); color:#fff; border-color:var(--color-ink,#163450); }
.ce-callout[data-kind="red"]{ border-left-color:#c0392b; }
.ce-callout[data-kind="green"]{ border-left-color:#2e7d32; }
.ce-callout[data-kind="warning"]{ border-left-color:#e17335; }
.ce-callout[data-kind="tip"]{ border-left-color:#2980b9; }
.ce-callout__text{ outline:none; min-height:1.4em; }
.ce-callout__text:empty::before{ content:attr(data-placeholder); color:var(--color-muted,#9aa0a6); }
/* custom PDF tool */
.ce-pdf{ display:flex; gap:var(--s-2,8px); margin:var(--s-2,8px) 0; }
.ce-pdf input{ flex:1; padding:6px 8px; font-size:var(--t-sm,14px);
  border:1px solid var(--color-border,#e2e2e2); border-radius:var(--radius-sm,6px); }
/* image tool: FK-added alt-text field (E3) */
.ce-image-alt{ margin-top:6px; }
.ce-image-alt__input{ width:100%; padding:6px 8px; font-size:var(--t-sm,14px);
  border:1px solid var(--color-border,#e2e2e2); border-radius:var(--radius-sm,6px);
  color:var(--color-body,#4b5563); }
.ce-image-alt__input::placeholder{ color:var(--color-muted,#9aa0a6); }

/* ============================================================================
   Media library (plan-pictures A.2). Tokens only, `bms-media-` prefixed.
   ============================================================================ */
.bms-media-note{background:var(--color-accent-wash); color:var(--color-accent-text); border:1px solid var(--color-line); border-radius:var(--radius-sm); padding:var(--s-2) var(--s-3); margin-bottom:var(--s-3); font-size:var(--t-sm)}
.bms-media-note.is-warn{background:var(--color-danger-wash); color:var(--color-danger)}
.bms-media-drop{display:flex; align-items:center; gap:var(--s-3); flex-wrap:wrap; border:1.5px dashed var(--color-line); border-radius:var(--radius-sm); background:var(--color-bg); padding:var(--s-4); margin-bottom:var(--s-4); font-size:var(--t-sm); color:var(--color-muted)}
.bms-media-drop.is-over{border-color:var(--color-accent-text); background:var(--color-accent-wash)}
.bms-media-drop label{flex:1; min-width:12rem; cursor:pointer}
.bms-media-pick{color:var(--color-accent-text); font-weight:700; text-decoration:underline}
.bms-media-drop input[type=file]{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none}
.bms-media-bar{display:flex; align-items:center; gap:var(--s-3); flex-wrap:wrap; margin-bottom:var(--s-3)}
.bms-media-bar .bms-chip-strip{margin-bottom:0}
.bms-media-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:var(--s-4)}
.bms-media-card{border:1px solid var(--color-line); border-radius:var(--radius-sm); overflow:hidden; background:var(--color-card); display:flex; flex-direction:column}
.bms-media-thumb{display:block; position:relative; aspect-ratio:4/3; background:var(--color-accent-wash); overflow:hidden}
.bms-media-thumb img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.bms-media-meta{padding:var(--s-2) var(--s-3); min-width:0}
.bms-media-title{font-weight:700; font-size:var(--t-sm); color:var(--color-ink); overflow-wrap:anywhere}
.bms-media-title a{color:inherit; text-decoration:none}
.bms-media-sub{font-size:.74rem; color:var(--color-muted); margin-top:.15rem; overflow-wrap:anywhere}
.bms-media-sub .pill{margin:0 .2rem .2rem 0}
.bms-media-pager{display:flex; align-items:center; justify-content:center; gap:var(--s-3); margin-top:var(--s-5)}
.bms-media-empty{padding:var(--s-5); text-align:center; color:var(--color-muted)}
.bms-media-detail{display:grid; grid-template-columns:minmax(0,3fr) minmax(0,2fr); gap:var(--s-4); align-items:start}
@media(max-width:820px){.bms-media-detail{grid-template-columns:1fr}}
.bms-media-preview{padding:var(--s-3)}
.bms-media-preview img{max-width:100%; height:auto; display:block; margin:0 auto}
.bms-media-side .bms-widget{padding:var(--s-3)}
.bms-media-side{display:flex; flex-direction:column; gap:var(--s-4); min-width:0}
.bms-media-form{display:flex; flex-direction:column; gap:var(--s-2); padding:var(--s-3)}
.bms-media-form label{font-size:var(--t-sm); font-weight:700; color:var(--color-ink)}
.bms-media-form button{align-self:flex-start}
.bms-media-h{font-family:var(--font-head); font-size:var(--t-base,1rem); color:var(--color-ink); margin:0 0 var(--s-2)}
.bms-media-used{margin:0; padding-left:1.1rem; font-size:var(--t-sm)}
.bms-media-bar .bms-search input{border:none; padding:0; box-shadow:none; background:transparent; width:100%; min-width:0}
@media(max-width:520px){.bms-media-grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s-3)}}