/* Layout for the docketing app on top of the Industry design system (screen plan v3). Tokens only:
   colours, fonts and spacing come from static/ds/industry.css. Sizes follow the v3 mock. */
body { margin: 0; background: var(--color-bg); color: var(--color-text); font-size: 14px; }
a { color: var(--color-accent-700); } a:hover { color: var(--color-accent-800); }

/* UI-01 top bar */
.topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: var(--space-2);
  padding: 0 var(--space-4); height: 58px; border-bottom: 1px solid var(--color-divider); background: var(--color-bg); }
.brand { display: flex; flex-direction: column; line-height: 1; text-decoration: none; color: var(--color-text);
  flex: none; margin-right: var(--space-2); }
.brand:hover { color: var(--color-text); }
.brand-name { font-family: var(--font-heading); font-weight: 600; font-size: 22px; letter-spacing: -.01em; }
.brand-instance { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-accent-700); margin-top: 3px; }
.topnav { display: flex; align-items: stretch; height: 100%; }
.topnav-item { display: flex; align-items: center; gap: 6px; height: 100%; padding: 0 6px; font-family: var(--font-heading);
  font-weight: 600; font-size: 15px; white-space: nowrap; color: var(--color-text); text-decoration: none;
  border-bottom: 2px solid transparent; cursor: pointer; list-style: none; box-sizing: border-box; }
.topnav-item::-webkit-details-marker { display: none; }
.topnav-item:hover { background: color-mix(in srgb, var(--color-text) 6%, transparent); color: var(--color-text); }
.topnav-item.on { border-bottom-color: var(--color-accent); }
.topnav .count { padding: 0 6px; font-family: var(--font-body); font-size: 11px; font-weight: 500; }
.caret { font-size: 10px; color: var(--color-neutral-700); }
.menu { position: relative; display: flex; }
.menu > summary { list-style: none; }
.menu-panel { position: absolute; left: 0; top: 58px; z-index: 40; min-width: 280px; background: var(--color-bg); padding: 6px 0; }
.menu-right .menu-panel { left: auto; right: 0; top: 44px; }
.menu-item { display: flex; flex-direction: column; width: 100%; box-sizing: border-box; padding: 7px 14px; text-align: left;
  font: inherit; color: var(--color-text); text-decoration: none; background: transparent; border: 0;
  border-left: 2px solid transparent; cursor: pointer; }
.menu-item:hover { background: var(--color-accent-100); color: var(--color-text); }
.menu-item.on { border-left-color: var(--color-accent); }
.menu-item.static { cursor: default; } .menu-item.static:hover { background: transparent; }
.menu-label { font-size: 13.5px; } .menu-hint { font-size: 11.5px; color: var(--color-neutral-700); }
.topsearch { margin-left: auto; flex: 0 1 320px; } .topsearch .input { width: 100%; box-sizing: border-box; }
.avatar { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--color-divider);
  font-family: var(--font-heading); font-weight: 600; font-size: 13px; cursor: pointer; }
.avatar::-webkit-details-marker { display: none; }

.main { padding: var(--space-6) var(--space-6) var(--space-8); max-width: 1440px; box-sizing: border-box; }

.kicker { color: var(--color-accent-700); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
/* UI-02 page header: kicker (h6) + title + one-line subtitle, as on every v3 page */
.page-head, .record-head { margin-bottom: var(--space-6); }
.page-head h6, .record-head h6 { color: var(--color-accent-700); margin: 0 0 4px; }
.main h1 { font-size: 32px; margin: 0; }
.main h2 { font-size: 22px; margin: var(--space-6) 0 var(--space-2); }
.main h3, .main h2.h3 { font-size: 17px; margin: 0 0 var(--space-2); }
.page-head p, .record-head p { margin: 4px 0 0; }
.sub, .record-title { color: color-mix(in srgb, var(--color-text) 68%, transparent); }
.record-links { font-size: 13px; }
.head-actions { display: flex; gap: var(--space-2); margin-top: var(--space-3); flex-wrap: wrap; }

/* UI-03 controls: native elements look like the design system's .input / .btn */
.main input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]), .main select, .main textarea {
  min-height: 34px; padding: 5px 10px; font: inherit; font-size: 14px; color: var(--color-text);
  caret-color: var(--color-accent); background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: 0; }
.main input:hover, .main select:hover, .main textarea:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.main input:focus-visible, .main select:focus-visible, .main textarea:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
.main textarea { min-height: 70px; resize: vertical; width: 100%; }
.main input[type=checkbox], .main input[type=radio] { accent-color: var(--color-accent); }
.main button:not(.menu-item) { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px;
  padding: 5px 12px; font: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer; color: var(--color-text);
  background: transparent; border: 1px solid var(--color-divider); border-radius: 0; white-space: nowrap; }
.main button:not(.menu-item):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.main button:not(.menu-item):active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.main button.btn-primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-bg); }
.main button.btn-primary:hover { background: var(--color-accent-600); }
.main button.btn-primary:active { background: var(--color-accent-700); }
.main button.btn-ghost { border-color: transparent; color: var(--color-accent-700); }
a.btn { text-decoration: none; color: var(--color-text); font-size: 13.5px; font-weight: 500; padding: 6px 12px; }
a.btn:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); color: var(--color-text); }
.inline { display: inline-flex; gap: 4px; align-items: center; margin: 0; }
.actions { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.edit-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-3) var(--space-4);
  align-items: end; max-width: 1100px; }
.edit-form .field, .field { display: flex; flex-direction: column; gap: 4px; font-size: 12px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.edit-form .field input, .edit-form .field select, .edit-form .field textarea { width: 100%; color: var(--color-text); }
.edit-form .wide, .edit-form fieldset, .edit-form .form-actions, .edit-form > p, .edit-form > section { grid-column: 1 / -1; }
.form-actions { display: flex; gap: var(--space-2); align-items: center; }
fieldset { border: 1px solid var(--color-divider); padding: var(--space-3) var(--space-4); margin: 0 0 var(--space-3); }
fieldset label { display: inline-flex; gap: 6px; align-items: center; margin-right: var(--space-4); font-size: 14px; }
legend { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-neutral-700); padding: 0 4px; }
.form-group, .checkline { display: flex; gap: 6px; align-items: center; margin: var(--space-2) 0; font-size: 14px; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; background: var(--color-surface); padding: 1px 4px; }

/* UI-03 data: every table is a v3 data table; lists are divider rows, never bullets */
.main table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.main th { text-align: left; font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-neutral-700); padding: var(--space-2); border-bottom: 1px solid var(--color-divider); white-space: nowrap; }
.main td { padding: var(--space-2); border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent); vertical-align: top; }
.main tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }
.main td a { text-decoration: none; } .main td a:hover { text-decoration: underline; }
ul.list { list-style: none; padding: 0; margin: 0; font-size: 13.5px; }
ul.list > li { padding: 6px 0; border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent); }
.muted, tr.muted td { color: color-mix(in srgb, var(--color-text) 68%, transparent); }
.mono, .num { font-variant-numeric: tabular-nums; }
.section { padding: var(--space-4); margin-bottom: var(--space-6); }
.section > h3, .section > h2.h3 { font-size: 20px; }
.empty { color: color-mix(in srgb, var(--color-text) 68%, transparent); padding: var(--space-3) 0; }

/* states and messages */
.notice, .messages { list-style: none; border-left: 2px solid var(--color-accent); background: var(--color-accent-100);
  padding: var(--space-2) var(--space-3); margin: 0 0 var(--space-4); font-size: 13px; }
.ok { border-left: 2px solid var(--color-accent); background: var(--color-accent-100); padding: var(--space-2) var(--space-3); }
.error, .errors { border-left: 2px solid var(--color-accent-2-700); background: var(--color-accent-2-100); color: var(--color-accent-2-900);
  padding: var(--space-2) var(--space-3); margin: 0 0 var(--space-3); font-size: 13.5px; }
.errors ul { margin: 0; padding-left: var(--space-4); }
.warnings { border-left: 2px solid var(--color-neutral-500); background: var(--color-neutral-100); padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-3); }
.badge { display: inline-flex; padding: 2px 8px; font-size: 11px; background: var(--color-neutral-100); color: var(--color-neutral-800); }
.badge.red { background: var(--color-accent-800); color: var(--color-bg); }
.badge.amber { background: var(--color-accent-200); color: var(--color-accent-900); }
.badge.grey { background: var(--color-neutral-100); color: var(--color-neutral-700); }
.prio-Critical, .prio-critical { color: var(--color-accent-900); font-weight: 600; } .prio-Important { color: var(--color-accent-700); }
.tag { white-space: nowrap; }

/* tabs (v3 page tabs) for filter rows */
.filters, .tabs, .chips { display: flex; gap: 0; border-bottom: 1px solid var(--color-divider); margin: 0 0 var(--space-4); }
.filters a, .tabs a, .chips a { padding: 8px 12px; text-decoration: none; color: var(--color-text); font-size: 13.5px;
  border-bottom: 2px solid transparent; margin-bottom: -1px; }
.filters a:hover, .tabs a:hover, .chips a:hover { background: color-mix(in srgb, var(--color-text) 6%, transparent); }
.filters a.on, .tabs a.on, .chips a.active { border-bottom-color: var(--color-accent); font-weight: 500; }
.toolbar { display: flex; gap: var(--space-2); align-items: center; margin: 0 0 var(--space-4); }
.toolbar form { display: flex; gap: var(--space-2); flex: 1; max-width: 520px; } .toolbar input { flex: 1; }
.filters a.push { margin-left: auto; }
.jobform { flex-wrap: wrap; } .jobform input[size] { min-height: 30px; padding: 3px 6px; } .jobform select { min-height: 30px; }
pre.mailbody { white-space: pre-wrap; font: inherit; font-size: 13px; background: var(--color-surface); padding: var(--space-2) var(--space-3); margin: 4px 0 0; }
.edit-form.stacked { display: block; max-width: 1100px; }
fieldset { text-align: left; } .field > span { text-align: left; }
.edit-section { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-3) var(--space-4); align-items: end; }
fieldset.edit-section { margin-bottom: var(--space-4); }
.edit-section .wide, .edit-section details { grid-column: 1 / -1; }
.edit-section details > .edit-section { margin-top: var(--space-3); }
.edit-form.stacked .form-actions, .edit-form.stacked > .field { margin-top: var(--space-3); }
.inline-menu { position: relative; display: inline-block; }
.inline-menu > summary { list-style: none; } .inline-menu > summary::-webkit-details-marker { display: none; }
.popover { position: absolute; z-index: 20; top: 40px; left: 0; width: 380px; grid-template-columns: 1fr;
  background: var(--color-bg); border: 1px solid var(--color-divider); box-shadow: var(--shadow-md); padding: var(--space-4); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.main h1 .mono, .main h1.mono { font-family: var(--font-heading); }
.pagination { display: flex; gap: var(--space-3); align-items: center; margin-top: var(--space-4); font-size: 13px; }

/* records */
.cols3 { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(320px, 1fr); gap: var(--space-8); }
.col-main, .col-side { min-width: 0; }
.panel { margin-bottom: var(--space-6); }
.panel > h3, .panel > h2.h3 { font-size: 17px; padding-bottom: 4px; border-bottom: 1px solid var(--color-divider); }
dl.facts { display: grid; grid-template-columns: 200px 1fr; gap: 4px var(--space-3); margin: 0 0 var(--space-4); font-size: 13.5px; }
dl.facts dt { color: var(--color-neutral-700); } dl.facts dd { margin: 0; }
details > summary { cursor: pointer; font-size: 13px; color: var(--color-accent-700); }

/* timeline */
.note-composer { display: grid; grid-template-columns: 1fr auto; gap: var(--space-2); margin-bottom: var(--space-3); }
.note-composer textarea { grid-column: 1 / -1; min-height: 60px; }
.note-composer label { display: inline-flex; gap: 6px; align-items: center; font-size: 12.5px; }
.timeline { list-style: none; padding: 0; margin: 0; font-size: 13.5px; }
.timeline li { padding: 6px 0; border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent); }
.timeline li .mono { color: var(--color-neutral-700); font-size: 12px; margin-right: 6px; }
.timeline li .muted { display: block; font-size: 12px; }
.tl-note { border-left: 2px solid var(--color-accent); padding-left: 8px !important; }

/* calendar */
table.calendar { table-layout: fixed; }
table.calendar td { height: 104px; padding: 4px 6px; border: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent); }
table.calendar td.muted { background: color-mix(in srgb, var(--color-text) 3%, transparent); }
table.calendar td.today { box-shadow: inset 0 0 0 2px var(--color-accent); }
.daynum { font-family: var(--font-heading); font-weight: 600; font-size: 15px; margin-bottom: 2px; }
.cal-item { font-size: 12px; line-height: 1.3; margin-bottom: 3px; padding-left: 4px; border-left: 2px solid var(--color-accent-300); }
.cal-item.prio-Critical { border-left-color: var(--color-accent-800); }
.cal-item a { color: var(--color-text); text-decoration: none; } .cal-item a:hover { text-decoration: underline; }

/* dashboard (UI-04) */
.kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-bottom: var(--space-6); }
.kpi { display: flex; flex-direction: column; gap: 2px; padding: var(--space-4); text-decoration: none; color: var(--color-text);
  border-left: 1px solid var(--color-divider); }
.kpi:first-child { border-left-color: transparent; }
.kpi:hover { background: var(--color-accent-100); color: var(--color-text); }
.kpi-label { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-neutral-700); }
.kpi-n { font-family: var(--font-heading); font-weight: 600; font-size: 38px; line-height: 1.05; }
.kpi-sub { font-size: 12px; color: var(--color-accent-700); }
.buckets { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-6); }
.bucket { text-decoration: none; color: var(--color-text); display: block; }
.bucket-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.bucket-n { font-family: var(--font-heading); font-weight: 600; font-size: 26px; }
.bar { display: flex; height: 10px; background: var(--color-neutral-200); margin-bottom: 6px; }
.bar > span { display: block; height: 100%; }
.bar .c { background: var(--color-accent-800); } .bar .i { background: var(--color-accent-500); } .bar .f { background: var(--color-accent-200); }
.bucket-sub { font-size: 11.5px; color: var(--color-accent-700); }
.legend { display: flex; gap: var(--space-3); font-size: 12px; } .legend .bar-c { background: var(--color-accent-800); } .legend .bar-i { background: var(--color-accent-500); } .legend .bar-f { background: var(--color-accent-200); }
.legend i { display: inline-block; width: 10px; height: 10px; margin-right: 4px; }
.sec-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); margin-bottom: var(--space-3); }
.sec-head h3, .sec-head h2.h3 { margin: 0; font-size: 20px; }
.dash-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-6); }
.hbar { display: grid; grid-template-columns: 150px 1fr 60px; gap: var(--space-3); align-items: center; font-size: 13px; padding: 4px 0; }
.hbar .bar { margin: 0; } .hbar .bar > span { background: var(--color-accent); }
.hbar .num { text-align: right; }
.agreement-text { max-width: 760px; padding: var(--space-4); border: 1px solid var(--color-divider); margin-bottom: var(--space-4);
  max-height: 50vh; overflow: auto; font-size: 14px; }
.container { max-width: none; }
.login { max-width: 420px; margin: 12vh auto; padding: var(--space-6); }

@media (max-width: 1100px) { .topsearch { display: none; } }
@media (max-width: 900px) { .topbar { overflow-x: auto; } .cols3, .dash-grid { grid-template-columns: 1fr; } .kpis, .buckets { grid-template-columns: repeat(2, minmax(0, 1fr)); } .main { padding: var(--space-4); } }
@media print { .topbar, .note-composer, form { display: none; } .main { padding: 0; } }

/* a11y: contrast >= 4.5:1 on the ground (axe-core, browser review 04/10/2026). Muted text one step darker; the
   primary button uses the darker steps of the same accent ramp (the plain accent on light text was 3.7:1). */
.text-muted { color: color-mix(in srgb, var(--color-text) 68%, transparent); }
.main button.btn-primary, .btn-primary { background: var(--color-accent-700); border-color: var(--color-accent-700); }
.main button.btn-primary:hover, .btn-primary:hover { background: var(--color-accent-800); }
.main button.btn-primary:active, .btn-primary:active { background: var(--color-accent-900); }

/* History & notes vs Data log (04-10) */
.tl-remark { border-left: 2px solid var(--color-neutral-300, #c9c9c9); padding-left: 8px !important; }
.datalog-panel > summary { cursor: pointer; display: flex; align-items: baseline; gap: 10px; list-style: none; }
.datalog-panel > summary::-webkit-details-marker { display: none; }
.datalog-panel > summary h2 { margin: 0; }
.datalog-panel > summary::before { content: "\25B8"; color: var(--color-neutral-700); }
.datalog-panel[open] > summary::before { content: "\25BE"; }
.datalog-panel .table-wrap { overflow-x: auto; margin-top: 8px; }
table.datalog { width: 100%; font-size: 12.5px; border-collapse: collapse; }
table.datalog th { text-align: left; font-weight: 600; color: var(--color-neutral-700); padding: 4px 6px; }
table.datalog td { padding: 4px 6px; border-top: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent); vertical-align: top; }
table.datalog td.old { color: var(--color-neutral-700); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--color-text) 35%, transparent); }
.small { font-size: 12px; }

/* Matter at a glance (04-10): semantic tones; muted to sit with the Industry palette, text >= 7:1 on its fill */
:root { --ok-bg: #e2f0e5; --ok-fg: #1d5a31; --info-bg: #e3ebf5; --info-fg: #23456b; --warn-bg: #fbeed2; --warn-fg: #6e4300;
        --bad-bg: #f7e0dd; --bad-fg: #84261f; --muted-bg: var(--color-neutral-100); --muted-fg: var(--color-neutral-800);
        --t-patent: #3a6ea5; --t-tm: #7a4f9f; --t-design: #2c7c74; --t-copy: #9a6526; --t-um: #5b6b7d; --t-other: #8a8a8a; }
.glance { margin: 10px 0 12px; }
.glance-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.sc { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; font-size: 12.5px; line-height: 1.4;
      border-radius: 999px; background: var(--muted-bg); color: var(--muted-fg); text-decoration: none; white-space: nowrap; }
a.sc:hover { filter: brightness(0.96); text-decoration: underline; }
.sc-sm { padding: 1px 8px; font-size: 12px; }
.sc-country { font-weight: 600; letter-spacing: .02em; }
.tone-ok { background: var(--ok-bg); color: var(--ok-fg); }
.tone-info { background: var(--info-bg); color: var(--info-fg); }
.tone-warn { background: var(--warn-bg); color: var(--warn-fg); }
.tone-bad { background: var(--bad-bg); color: var(--bad-fg); font-weight: 600; }
.tone-muted { background: var(--muted-bg); color: var(--muted-fg); }
.sc-type i, .type-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--t-other); }
.type-dot { margin-right: 6px; vertical-align: middle; }
.t-patent i, .type-dot.t-patent { background: var(--t-patent); }
.t-tm i, .type-dot.t-tm { background: var(--t-tm); }
.t-design i, .type-dot.t-design { background: var(--t-design); }
.t-copy i, .type-dot.t-copy { background: var(--t-copy); }
.t-um i, .type-dot.t-um { background: var(--t-um); }
.due { padding: 1px 6px; border-radius: 4px; }
.due.tone-none { padding: 0; }
.stage { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; gap: 0; }
.stage li { position: relative; flex: 1 1 0; min-width: 92px; padding: 0 8px 0 0; display: flex; flex-direction: column; gap: 2px; }
.stage li::before { content: ""; position: absolute; top: 6px; left: 14px; right: 0; height: 2px; background: var(--color-neutral-200, #ddd); }
.stage li:last-child::before { display: none; }
.stage .dot { position: relative; z-index: 1; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--color-neutral-400, #aaa); background: var(--color-bg, #fff); }
.stage .st-label { font-size: 12.5px; font-weight: 600; color: var(--color-text); }
.stage .st-date { font-size: 11.5px; color: var(--color-neutral-700); }
.stage .st-done .dot { background: var(--ok-fg); border-color: var(--ok-fg); }
.stage .st-done::before { background: var(--ok-fg); opacity: .45; }
.stage .st-current .dot { border-color: var(--info-fg); box-shadow: 0 0 0 3px var(--info-bg); }
.stage .st-current .st-label { color: var(--info-fg); }
.stage .st-todo .st-label, .stage .st-skipped .st-label { color: var(--color-neutral-700); font-weight: 500; }
.stage .st-skipped .dot { border-style: dashed; }
.stage .st-ended .dot { background: var(--bad-fg); border-color: var(--bad-fg); }
.stage .st-ended .st-label { color: var(--bad-fg); }
@media (max-width: 640px) { .stage li { min-width: 33%; margin-bottom: 8px; } }

/* List filters (04-10) */
.filterbar { margin: 4px 0 8px; }
.fb-basic { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.fb-basic .ff { min-width: 180px; flex: 1 1 200px; max-width: 320px; }
.ff { display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.ff > span, .ff legend, .ff-multi summary > span { font-size: 12px; color: var(--color-neutral-700); font-weight: 600; }
.ff input[type=search], .ff select, .ff input[type=date] { width: 100%; }
.ff-date { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 4px; }
.ff-date legend { grid-column: 1 / -1; padding: 0; margin-bottom: 3px; text-transform: none; letter-spacing: normal; }
.ff-date input { min-width: 0; }
.fb-grid .ff-date { grid-column: span 2; }
@media (max-width: 720px) { .fb-grid .ff-date { grid-column: auto; } }
.ff-multi { position: relative; }
.ff-multi summary { list-style: none; cursor: pointer; display: flex; flex-direction: column; gap: 3px; }
.ff-multi summary::-webkit-details-marker { display: none; }
.ff-multi summary em { font-style: normal; border: 1px solid color-mix(in srgb, var(--color-text) 18%, transparent); background: var(--color-bg, #fff); padding: 5px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ff-multi[open] summary em { border-color: var(--color-accent); }
.ff-opts { position: absolute; z-index: 20; top: 100%; left: 0; min-width: 100%; max-width: 360px; max-height: 260px; overflow: auto; background: var(--color-bg, #fff); border: 1px solid color-mix(in srgb, var(--color-text) 18%, transparent); box-shadow: 0 6px 18px rgba(0,0,0,.08); padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.ff-opts label { display: flex; gap: 6px; align-items: center; padding: 2px 4px; white-space: nowrap; }
.ff-opts label:hover { background: var(--color-neutral-100); }
.ff-find { margin-bottom: 4px; }
.fb-adv { margin-top: 8px; }
.fb-adv > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--color-accent-800, var(--color-accent)); }
.fb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 14px; margin: 10px 0; }
.fb-status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0 10px; font-size: 13px; }
.fb-save input { width: 160px; }
.fb-saved { color: var(--color-neutral-700); }
.fb-saved a { margin-left: 6px; }
a.sort { color: inherit; text-decoration: none; white-space: nowrap; }
a.sort:hover, a.sort.on { text-decoration: underline; }
@media (max-width: 640px) { .fb-basic .ff { max-width: none; } }

/* Risk tier badges (K1) */
.tier { font-weight: 600; }
.tier-1 { background: var(--muted-bg); color: var(--muted-fg); }
.tier-2 { background: var(--info-bg); color: var(--info-fg); }
.tier-3 { background: var(--warn-bg); color: var(--warn-fg); }

/* links inside muted text must not rely on colour alone (axe link-in-text-block, 04-10) */
.muted a, .sub a, .hint a { text-decoration: underline; text-underline-offset: 2px; }
table.datalog tr.dl-more td { border-top: 0; }  /* further fields of the same save (change set) */

/* Keyboard navigation (05-10) */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; padding: 8px 12px; background: var(--color-accent-800); color: #fff; }
.skip-link:focus { left: 8px; top: 8px; }
a:focus-visible, button:focus-visible, summary:focus-visible, .menu-item:focus-visible { outline: 2px solid var(--color-accent-600); outline-offset: 2px; }
.main table tbody tr.kb-sel { background: var(--color-accent-100); box-shadow: inset 3px 0 0 var(--color-accent-600); }
dialog.palette, dialog.keys-help { border: 1px solid var(--color-divider); padding: 0; width: min(640px, calc(100vw - 32px)); background: var(--color-bg); color: var(--color-text); }
dialog.palette { margin-top: 12vh; }
dialog.palette::backdrop, dialog.keys-help::backdrop { background: color-mix(in srgb, #1d1f20 35%, transparent); }
.palette input { width: 100%; box-sizing: border-box; border: 0; border-bottom: 1px solid var(--color-divider); padding: 14px 16px; font-size: 1.05rem; background: transparent; }
.palette input:focus-visible { outline: none; }
.palette [role=listbox] { max-height: 50vh; overflow-y: auto; }
.pal-item { display: flex; justify-content: space-between; gap: 12px; padding: 9px 16px; color: inherit; text-decoration: none; }
.pal-item.on, .pal-item:hover { background: var(--color-accent-100); }
.pal-hint, .keys-help kbd + span { color: var(--color-neutral-700); font-size: .85rem; }
.palette footer, .keys-help footer { padding: 8px 16px; border-top: 1px solid var(--color-divider); color: var(--color-neutral-700); font-size: .8rem; }
.keys-help .body { padding: 12px 16px; display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; }
kbd { font-family: ui-monospace, monospace; font-size: .8rem; border: 1px solid var(--color-neutral-400); border-bottom-width: 2px; border-radius: 3px; padding: 0 5px; background: var(--color-neutral-100); }
.keys-help h2 { margin: 0; padding: 12px 16px; border-bottom: 1px solid var(--color-divider); font-size: 1rem; }
.style-row { margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid var(--color-divider); } .style-row:last-of-type { border-bottom: 0; } .style-row .checkline { display: block; margin-top: 6px; }

/* Client insights (05-10) */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 0 0 16px; }
.tile { border: 1px solid var(--color-divider); padding: 12px 14px; background: var(--color-neutral-100); }
.tile-n { display: block; font-size: 1.8rem; font-weight: 600; line-height: 1.1; }
.tile-l { color: var(--color-neutral-700); font-size: .85rem; }
.tile-bad .tile-n { color: var(--bad-fg); }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
table.bars { width: 100%; border-collapse: collapse; }
table.bars th { text-align: left; font-weight: 400; padding: 3px 8px 3px 0; white-space: nowrap; width: 1%; }
table.bars td.num { width: 1%; padding-left: 8px; text-align: right; font-variant-numeric: tabular-nums; }
.bar-cell { width: 100%; }
.bar { display: block; height: 10px; min-width: 2px; border-radius: 0 4px 4px 0; background: var(--color-accent-600); }
@media print {
  .topbar, .no-print, .skip-link, dialog, .notice { display: none !important; }
  .main { padding: 0; }
  .panel, .tile { break-inside: avoid; }
  .bar { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}

.feedback-tab { position: fixed; right: 0; bottom: 96px; transform: rotate(-90deg); transform-origin: bottom right; padding: 4px 12px; background: var(--color-accent-700); color: #fff; text-decoration: none; font-size: .8rem; z-index: 20; }
.feedback-tab:hover, .feedback-tab:focus-visible { background: var(--color-accent-800); color: #fff; }
.rem-custom { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: flex-end; margin: 8px 0 12px; }
.rem-pair { display: flex; gap: 6px; align-items: flex-end; }
.rem-pair input[type=number] { width: 5.5em; }

nav.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--color-divider); margin: 0 0 10px; }
nav.tabs .tab { padding: 8px 14px; color: inherit; text-decoration: none; border-bottom: 2px solid transparent; }
nav.tabs .tab.on { border-bottom-color: var(--color-accent-600); font-weight: 600; }

/* Mark / design image on the case header (05-10) */
.mark-image { display: inline-block; margin: 4px 0 8px; padding: 4px; border: 1px solid var(--color-border, #ddd); border-radius: 6px; background: #fff; }
.mark-image img { display: block; max-height: 120px; max-width: 260px; object-fit: contain; }