/* ============================================================
   Ovation: design system (v2)
   Brand: neon graduation emblem · teal→cyan→violet gradient
   ============================================================ */
:root{
  /* The app's token names, pointed at Obi (obi/ via obi-web.css). ovation-theme.js writes the same
     values inline; these are the fallback for the moment before it runs. --ink is Obi's (text). */
  --navy:var(--surface);
  --panel:var(--surface); --panel-2:var(--surface-raised);
  --panel-line:var(--border); --panel-line-2:var(--border);
  --teal:var(--success); --cyan:var(--sky); --violet:var(--sage);
  --text:var(--ink); --muted:var(--ink-70); --muted-dim:var(--text-muted);
  --warn:var(--attention); --bad:var(--concern);
  --grad:linear-gradient(var(--accent-primary),var(--accent-primary));
  --grad-soft:linear-gradient(var(--apricot-tint),var(--apricot-tint));
  --radius:var(--radius-card);
  --shadow:var(--elev-1);
  --shadow-glow:none;
  --ring:0 0 0 2px var(--focus-ring);
  --ease:var(--ease-out);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{
  min-height:100dvh;
}
body::before{
  content:"";position:fixed;inset:0;z-index:-1;
  background:var(--bg-page);
}
button{font-family:inherit}
.fmono{font-family:var(--font-sans);font-variant-numeric:tabular-nums}

/* ---------- header ---------- */
header{
  position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:var(--space-4);
  padding:var(--space-3) var(--space-5);background:var(--bg-page);backdrop-filter:none;
  border-bottom:1px solid var(--panel-line);
}
.logo-lockup{display:flex;align-items:center;gap:var(--space-3);text-decoration:none}
/* The Obi logo (brand/obi-logo, R2): the horizontal artwork, the apricot tile and "Obi.", never re-typed. 100 x 28, above its 96px minimum. */
.brand .logo-art{display:block;flex:none;align-self:flex-start;width:auto;height:28px;max-width:100%;user-select:none;-webkit-user-drag:none} /* its own width, at the start of the brand column (a stretched box would centre it) */
.logo-tile{
  width:44px;height:44px;flex:0 0 auto;border-radius:var(--radius-card);display:grid;place-items:center;
  background:var(--surface);
  border:1px solid var(--panel-line);box-shadow:var(--elev-1);
}
.logo-tile svg{width:34px;height:34px;display:block}
.brand{display:flex;flex-direction:column;line-height:var(--lh-display)}
/* The Ovation wordmark: Obi's construction (Inter bold, tight tracking, an apricot full stop). */
.brand .word{font-family:var(--font-sans);font-weight:var(--fw-bold);letter-spacing:var(--ls-tight);font-size:var(--text-h3);line-height:var(--lh-display);
  color:var(--ink);background:none;-webkit-background-clip:border-box;background-clip:border-box}
.brand .word .dot{color:var(--apricot)}
.brand small{letter-spacing:var(--ls-label);font-size:var(--text-caption);color:var(--muted);margin-top:var(--space-1);text-transform:none}
.meta{margin-left:auto;display:flex;gap:var(--space-2);align-items:center;flex-wrap:wrap;font-size:var(--text-caption);color:var(--muted)}
.meta .field{display:flex;flex-direction:row;align-items:center;gap:var(--space-2)}
.meta input{background:var(--cream);border:1px solid var(--warm-grey);color:var(--ink);
  border-radius:var(--radius-control);padding:var(--space-2) var(--space-3);font-family:inherit;font-size:var(--text-caption);width:118px;transition:border-color .15s,box-shadow .15s}
.meta input:focus{border-color:var(--sky);box-shadow:none}
.pill{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);border:1px solid var(--panel-line);
  border-radius:var(--radius-pill);background:var(--grad-soft);color:var(--text);font-weight:var(--fw-medium)}

/* ---------- tabs ---------- */
/* The rail's own rules live in ovation-shell.js; the old flat tab bar's screen rules were removed in Pass 2
   (they outranked the rail's, code map C1). The print rule below still hides nav.tabs. */

main{padding:var(--space-5) var(--space-5) var(--space-7);max-width:1180px;margin:0 auto;animation:fade .3s var(--ease)}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* ---------- cards ---------- */
.card{background:var(--panel);border:1px solid var(--panel-line);border-radius:var(--radius);
  padding:var(--space-5) var(--space-5);margin-bottom:var(--space-4);box-shadow:var(--shadow);
  transition:border-color .2s,transform .2s var(--ease),box-shadow .2s}
h2{font-size:var(--text-h3);line-height:var(--lh-h3);margin:0 0 var(--space-1);letter-spacing:var(--ls-tight)} /* card or section heading (§15.1) */
h3{font-size:var(--text-body-lg);line-height:var(--lh-body);font-weight:var(--fw-semibold);margin:var(--space-5) 0 var(--space-3);color:var(--text)} /* sub-heading inside a card */
.sub{color:var(--muted);font-size:var(--text-caption);margin:0 0 var(--space-4);max-width:72ch}
.row{display:flex;gap:var(--space-3);flex-wrap:wrap;align-items:flex-end}
label.fld{font-size:var(--text-label);font-weight:var(--fw-semibold);color:var(--muted);display:flex;flex-direction:column;gap:6px/*keep: Obi Input label gap*/;letter-spacing:var(--ls-normal)} /* Obi Input label: 15 semibold, gap 6 */

/* ---------- controls ---------- */
/* Obi Input: every text-like field (checkboxes, radios, ranges, colour and file inputs are left alone).
   input:where(:not([type])) keeps the specificity of a bare element (0,0,1), so a module's own class rule for a
   compact typeless field (.ob-note, .ov-filter) still sets its size, as it did before. */
select,textarea,input:where(:not([type])),input[type=text],input[type=number],input[type=password],input[type=email],
input[type=search],input[type=date],input[type=tel],input[type=url]{
  background:var(--cream);border:1px solid var(--warm-grey);color:var(--ink);
  border-radius:var(--radius-control);min-height:var(--field-height);padding:0 var(--space-4);font-family:inherit;font-size:var(--text-body);line-height:var(--lh-label);
  transition:border-color .15s,box-shadow .15s}
textarea{padding:var(--space-3) var(--space-4);line-height:var(--lh-body)}
/* §15.2: a field in a table, grid, toolbar or the header takes the dense size */
:is(td,th,header,.dense) :is(select,input:where(:not([type])),input[type=text],input[type=number],input[type=search],input[type=date],input[type=email],input[type=tel],input[type=url]){
  min-height:var(--control-dense);padding:0 var(--space-3);font-size:var(--text-label)}
:is(td,th,header,.dense) select{padding-right:var(--space-6)}
select:focus,textarea:focus,input:where(:not([type])):focus,input[type=text]:focus,input[type=number]:focus,input[type=password]:focus,
input[type=email]:focus,input[type=search]:focus,input[type=date]:focus,input[type=tel]:focus,input[type=url]:focus{border-color:var(--sky);box-shadow:none}
select{min-width:190px;cursor:pointer;
  appearance:none;-webkit-appearance:none;padding-right:var(--space-6);
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
input[type=number]{width:92px;text-align:center}
input::placeholder,textarea::placeholder{color:var(--text-muted)}

/* Obi Button: primary, secondary (ghost), destructive (danger), disabled. Hover and active hexes are
   Obi's own Button values. */
.btn{display:inline-flex;align-items:center;gap:var(--space-2);background:var(--apricot);color:var(--on-accent);border:1px solid transparent;
  border-radius:var(--radius-control);min-height:var(--tap-min);padding:0 20px/*keep: Obi Button md*/;font-weight:var(--fw-semibold);font-size:var(--text-body);line-height:var(--lh-label);cursor:pointer;justify-content:center;
  box-shadow:none;transition:background var(--motion-fast) var(--ease-out),transform var(--motion-fast) var(--ease-out)}
.btn:hover{background:#DA762C}
.btn:active{background:#C96A26;transform:scale(.98)}
.btn.ghost{background:var(--cream);color:var(--ink);border:1px solid var(--warm-grey);box-shadow:none}
.btn.ghost:hover{background:var(--sand)}
.btn.ghost:active{background:#EAE1CF}
.btn.sm{min-height:var(--control-dense);padding:0 var(--space-3);font-size:var(--text-label);border-radius:var(--radius-control)} /* §15.2 dense: rows, toolbars, card headers */
.btn svg{width:20px;height:20px;flex:0 0 auto} .btn.sm svg{width:16px;height:16px} /* §15.4 icon sizes */
/* danger, three shapes: text on anything that is not a button; Obi's filled destructive button;
   and the small outline button (derived: the secondary look in concern). */
.danger{color:var(--clay-text)}
.btn.danger{background:var(--clay);color:#FFFFFF;border-color:transparent}
.btn.danger:hover{background:#A44C31}
.btn.danger:active{background:#934229}
.btn.ghost.danger{background:var(--cream);color:var(--clay-text);border-color:var(--clay)}
.btn.ghost.danger:hover{background:var(--concern-tint)}
/* Obi Button disabled: never opacity. .btn:disabled joins button:disabled so a disabled .btn.ghost
   (which outranks button:disabled) still gets the disabled look. */
button:disabled,button:disabled:hover,button:disabled:active,
.btn:disabled,.btn:disabled:hover,.btn:disabled:active{background:var(--sand);color:var(--warm-grey);border-color:var(--line);
  cursor:not-allowed;box-shadow:none;transform:none;filter:none;opacity:1}

/* ---------- tables ---------- */
table{width:100%;border-collapse:collapse;font-size:var(--text-label)}
th,td{text-align:left;padding:var(--space-1) var(--space-3);height:var(--row-dense);line-height:var(--lh-label);border-bottom:1px solid var(--panel-line-2)} /* §15.3: --row-dense rows */
thead th{color:var(--muted);font-weight:var(--fw-semibold);font-size:var(--text-caption);text-transform:none;letter-spacing:var(--ls-label);
  border-bottom:1px solid var(--panel-line)}
tbody tr{transition:background .12s}
tbody tr:hover td{background:var(--surface-raised)}
td.num,th.num{text-align:center}
.empty{color:var(--muted-dim);font-style:italic;padding:var(--space-4) 0;text-align:center}

/* ---------- rubric ---------- */
.rubric-group{margin:var(--space-4) 0 var(--space-2);font-size:var(--text-caption);text-transform:none;letter-spacing:var(--ls-label);color:var(--sky-ink);font-weight:var(--fw-semibold)}
.crit{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-2) var(--space-1);border-bottom:1px solid var(--panel-line-2)}
.crit span{font-size:var(--text-label)}
.codes{display:flex;gap:var(--space-2)}
.code-btn{width:var(--control-dense);height:var(--control-dense);padding:0;border-radius:var(--radius-control);border:1px solid var(--panel-line);background:var(--panel-2);
  color:var(--muted);cursor:pointer;font-weight:var(--fw-bold);font-size:var(--text-caption);transition:background var(--motion-fast) var(--ease-out)}
.code-btn:hover{background:var(--line);filter:none;transform:none}
/* on: the solid tone with Obi's ink for that fill */
.code-btn.E.on{background:var(--success);color:#FFFFFF;border-color:transparent}
.code-btn.G.on{background:var(--attention);color:var(--attention-ink);border-color:transparent}
.code-btn.X.on{background:var(--concern);color:#FFFFFF;border-color:transparent}

/* ---------- badges / tags ---------- */
.badge{display:inline-block;padding:var(--space-1) var(--space-3);border-radius:var(--radius-pill);font-size:var(--text-caption);font-weight:var(--fw-semibold);font-family:var(--font-sans);font-variant-numeric:tabular-nums}
/* CAPS 7-point achievement ramp (Obi): level N is the --caps-N fill with its --caps-N-ink text. */
.lvl1{background:var(--caps-1);color:var(--caps-1-ink)}
.lvl2{background:var(--caps-2);color:var(--caps-2-ink)}
.lvl3{background:var(--caps-3);color:var(--caps-3-ink)}
.lvl4{background:var(--caps-4);color:var(--caps-4-ink)}
.lvl5{background:var(--caps-5);color:var(--caps-5-ink)}
.lvl6{background:var(--caps-6);color:var(--caps-6-ink)}
.lvl7{background:var(--caps-7);color:var(--caps-7-ink)}
/* The same classes also mark things that are not achievement levels. There they keep their meaning and take
   Obi's StatusPill tone for it, scoped by where they appear (the markup keeps its classes). */
/* strength / growth / concern: the Observe legend, evidence sentiment, the copilot band, profile behaviour tallies */
.legend .badge.lvl7,.ev .badge.lvl7,.co-badge.lvl7,.pf-g .badge.lvl7{background:var(--success-tint);color:var(--success-text)}
.legend .badge.lvl3,.ev .badge.lvl3,.co-badge.lvl3,.pf-g .badge.lvl3{background:var(--attention-tint);color:var(--attention-ink)}
.legend .badge.lvl1,.ev .badge.lvl1,.co-badge.lvl1,.pf-g .badge.lvl1{background:var(--concern-tint);color:var(--clay-text)}
/* insight trends: improving / holding steady / slipping */
.ov-trends .badge.lvl7{background:var(--success-tint);color:var(--success-text)}
.ov-trends .badge.lvl3{background:var(--sand);color:var(--ink)}
.ov-trends .badge.lvl1{background:var(--concern-tint);color:var(--clay-text)}
/* profile "at a glance" standing: thriving / on track / emerging / needs support */
.pf-glance .badge.lvl7{background:var(--success-tint);color:var(--success-text)}
.pf-glance .badge.lvl5{background:var(--info-tint);color:var(--sky-ink)}
.pf-glance .badge.lvl3{background:var(--attention-tint);color:var(--attention-ink)}
.pf-glance .badge.lvl1{background:var(--concern-tint);color:var(--clay-text)}
/* change-history actions: capture / mark / override / note and edit / delete */
.audit-h .badge.lvl6{background:var(--success-tint);color:var(--success-text)}
.audit-h .badge.lvl4{background:var(--info-tint);color:var(--sky-ink)}
.audit-h .badge.lvl3{background:var(--attention-tint);color:var(--attention-ink)}
.audit-h .badge.lvl5{background:var(--sand);color:var(--ink)}
.audit-h .badge.lvl1{background:var(--concern-tint);color:var(--clay-text)}
/* Admin role badges: a label, not a status: neutral */
.cred-tbl .badge.lvl3,.cred-tbl .badge.lvl5,.cred-tbl .badge.lvl6,.cred-tbl .badge.lvl7{background:var(--sand);color:var(--ink)}
/* Obi ProgressBar: sand track, sage fill, full radius */
.bar{height:8px;border-radius:var(--radius-full);background:var(--sand);overflow:hidden;min-width:80px}
.bar>i{display:block;height:100%;background:var(--sage);border-radius:var(--radius-full);transition:width .5s var(--ease)}
.hint{font-size:var(--text-caption);color:var(--muted-dim);margin-top:var(--space-2);line-height:var(--lh-body)}
.pct{font-family:var(--font-sans);font-variant-numeric:tabular-nums;font-weight:var(--fw-bold)}
.subtotal{margin-top:var(--space-4);font-size:var(--text-caption);color:var(--muted);display:flex;gap:var(--space-2);align-items:center;flex-wrap:wrap}
/* Obi Chip: neutral / skill (obs) / subject (cont); no border */
.tag{display:inline-flex;align-items:center;gap:6px/*keep: Obi StatusPill gap*/;min-height:28px;font-size:var(--text-caption);letter-spacing:var(--ls-normal);padding:0 var(--space-3);border-radius:var(--radius-pill);border:0;background:var(--surface-raised);color:var(--ink);font-weight:var(--fw-semibold)}
.tag.obs{color:var(--sage-ink);background:var(--sage-tint)}
.tag.cont{color:var(--sky-ink);background:var(--sky-tint)}

/* ---------- toast ---------- */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(8px);background:var(--navy);
  border:1px solid var(--panel-line);color:var(--text);padding:var(--space-3) var(--space-5);border-radius:var(--radius-card);font-size:var(--text-caption);
  opacity:0;transition:opacity .25s,transform .25s var(--ease);pointer-events:none;z-index:200;box-shadow:var(--elev-2)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- misc ---------- */
.legend{display:flex;gap:var(--space-4);font-size:var(--text-caption);color:var(--muted);flex-wrap:wrap;margin-top:var(--space-3)}
.legend b{color:var(--text)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
/* the report card (ui3.js reportCard): its bar column gives way on a phone (the % beside it says the same), and the
   table scrolls inside its card, never the page (WCAG 1.4.10 allows a data table to scroll) */
.rc-bar{width:120px} .rc-scroll{overflow-x:auto}
@media(max-width:480px){.rc-bar{display:none}}
.domain-hd{display:flex;justify-content:space-between;align-items:center;margin-top:var(--space-5);gap:var(--space-3);flex-wrap:wrap}
.domain-hd h4{margin:0;font-size:var(--text-label)}
.notes{width:100%;background:var(--cream);border:1px solid var(--warm-grey)/* 4.V (1.4.11): the field's edge, as every input's */;color:var(--ink);border-radius:var(--radius-control);
  padding:var(--space-3);font-family:inherit;font-size:var(--text-caption);margin-top:var(--space-3);resize:vertical;min-height:56px;transition:border-color .15s,box-shadow .15s}
.notes:focus{border-color:var(--sky);box-shadow:none}

/* welcome / empty hero */
.hero{text-align:center;padding:var(--space-6) var(--space-4)}
.hero .logo-tile{width:64px;height:64px;border-radius:var(--radius-pill);margin:0 auto var(--space-4)}
.hero .logo-tile svg{width:48px;height:48px}
.hero .brand{align-items:center;margin:0 auto var(--space-4)}
.hero h2{font-size:var(--text-h2);line-height:var(--lh-h2)} /* a view title (§15.1) */
.hero .sub{margin:var(--space-2) auto var(--space-5)}

/* ---------- AI components ---------- */
.ai-chip{font-size:var(--text-caption);letter-spacing:var(--ls-label);text-transform:none;padding:var(--space-1) var(--space-3);border-radius:var(--radius-pill);
  background:var(--sage-tint);color:var(--sage-ink);vertical-align:middle;margin-left:var(--space-2);font-weight:var(--fw-bold);font-family:var(--font-sans)}
.capbox{margin-top:var(--space-2)}
.mic-live{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--text-caption);color:var(--clay-text);font-weight:var(--fw-semibold)}
/* Obi keeps a soft pulse ring on the active mic */
.mic-live .dot{width:9px;height:9px;border-radius:var(--radius-full);background:var(--bad);box-shadow:0 0 0 0 color-mix(in srgb, var(--concern) 60%, transparent);animation:pulse 1.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--concern) 55%, transparent)}70%{box-shadow:0 0 0 8px color-mix(in srgb, var(--concern) 0%, transparent)}100%{box-shadow:0 0 0 0 color-mix(in srgb, var(--concern) 0%, transparent)}}
.thumbwrap{display:flex;gap:var(--space-3);align-items:center;margin-top:var(--space-3)}
.thumb{width:96px;height:72px;object-fit:cover;border-radius:var(--radius-control);border:1px solid var(--panel-line)}
.thumb.sm{width:52px;height:40px}
.ai-out{border-color:var(--sage);box-shadow:var(--elev-2)}
.ev-summary{background:var(--panel-2);border:1px solid var(--panel-line);border-radius:var(--radius-control);padding:var(--space-3) var(--space-4);font-size:var(--text-label);line-height:var(--lh-body);margin:var(--space-2) 0}
.ev-summary:focus{border-color:var(--sky)}
.skills-line{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;margin:var(--space-2) 0;font-size:var(--text-caption)}
.skills-line b{font-size:var(--text-caption);text-transform:none;letter-spacing:var(--ls-label);color:var(--muted);min-width:108px}
/* Obi StatusPill tones: success / attention / concern */
.skill{display:inline-block;padding:var(--space-1) var(--space-3);border-radius:var(--radius-pill);font-size:var(--text-caption);border:1px solid var(--panel-line)}
.skill.E{background:var(--success-tint);color:var(--success-text);border-color:transparent}
.skill.G{background:var(--attention-tint);color:var(--attention-ink);border-color:transparent}
.skill.X{background:var(--concern-tint);color:var(--clay-text);border-color:transparent;margin:var(--space-1)}
.ev{display:flex;gap:var(--space-3);align-items:flex-start;padding:var(--space-3) 0;border-bottom:1px solid var(--panel-line-2)}
.ev-icon{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-control);
  background:var(--panel-2);border:1px solid var(--panel-line);font-size:var(--text-body);flex:0 0 auto}
.ev-note{border-radius:var(--radius-control);padding:var(--space-1) var(--space-2);margin:-4px -8px 2px;transition:background .15s,box-shadow .15s;cursor:text}
.ev-note:hover{background:var(--panel-2)}
.ev-note:focus{background:var(--panel-2)}
.ins-list{margin:var(--space-2) 0 0;padding-left:var(--space-4);font-size:var(--text-label);line-height:var(--lh-body)}
.ins-list li{margin:var(--space-1) 0}
.mod{border-left:3px solid var(--teal)}
.mod.flagged{border-left-color:var(--bad)}
.mod h3{font-size:var(--text-caption);text-transform:none;letter-spacing:var(--ls-label);color:var(--sky-ink);margin:var(--space-4) 0 var(--space-2)}
.flag{background:var(--concern-tint);border:1px solid color-mix(in srgb, var(--concern) 30%, transparent);color:var(--clay-text);padding:var(--space-3) var(--space-3);border-radius:var(--radius-control);font-size:var(--text-caption);margin:var(--space-3) 0}

/* ---------- change-log / audit ---------- */
.audit-list{max-height:56vh;overflow:auto;margin-top:var(--space-2);padding-right:var(--space-1)}
.audit-row{padding:var(--space-3) 0;border-bottom:1px solid var(--panel-line-2)}
.audit-h{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;font-size:var(--text-caption)}
.audit-d{margin-top:var(--space-2);font-size:var(--text-caption);display:flex;gap:var(--space-2);align-items:flex-start;flex-wrap:wrap}
.a-before{color:var(--clay-text);background:var(--concern-tint);border-radius:var(--radius-sm);padding:2px var(--space-2);text-decoration:line-through;text-decoration-color:color-mix(in srgb, var(--concern) 50%, transparent)}
.a-after{color:var(--success-text);background:var(--success-tint);border-radius:var(--radius-sm);padding:2px var(--space-2)}
.a-arrow{color:var(--muted-dim)}

/* ---------- modal ---------- */
.modal-bg{position:fixed;inset:0;background:color-mix(in srgb, var(--ink) 40%, transparent);backdrop-filter:none;z-index:100;
  display:flex;align-items:center;justify-content:center;padding:var(--space-5);animation:fade .2s var(--ease)}
.modal{background:var(--navy);border:1px solid var(--panel-line);border-radius:var(--radius-card);padding:var(--space-5);max-width:450px;width:100%;box-shadow:var(--elev-3)}
.modal .fld{width:100%}
.modal input,.modal select{width:100%}

/* footer */
.foot{max-width:1180px;margin:0 auto;padding:var(--space-2) var(--space-5) var(--space-6);color:var(--muted-dim);font-size:var(--text-caption);
  display:flex;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap;font-family:var(--font-sans)}

@media(max-width:760px){.grid2{grid-template-columns:1fr}.meta .field{display:none}.brand small{display:none}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- print ---------- */
@media print{
  header,nav.tabs,.meta,button,.foot{display:none!important}
  body::before{display:none}body{background:#fff;color:#111}
  main{max-width:none}
  main>.card:not(#reportArea){display:none}
  .no-print{display:none!important} /* on-screen instructions ("edit freely, then Save or Print") mean nothing on paper */
  #reportArea .card{display:block;border-color:#ddd;background:#fff;break-inside:avoid;box-shadow:none}
  #reportArea .brand .word,#reportArea .word{color:#111!important;-webkit-text-fill-color:#111}
  #reportArea .word .dot{color:#111!important;-webkit-text-fill-color:#111}
  .bar{background:#eee}.bar>i{background:#444}
  .badge{border:1px solid #ccc;color:#111!important}
}