/* 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, .tabs a[aria-current] { 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; }
#firm-fields { scroll-margin-top: 120px; } /* a save comes back to the first firm-field row: keep it clear of the top bar */
/* A panel's table starts where its heading and labels start (Govind 28/10: "fix the label alignments"): no inset on
   the first and last columns; a heading with an action keeps the button on its own line, inside the rule. */
.panel table.table > * > tr > :first-child { padding-left: 0; }
.panel table.table > * > tr > :last-child { padding-right: 0; }
.panel > h2.h3.has-action { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.panel > h2.h3.has-action > .btn, .panel > h2.h3.has-action > a { flex: none; font-size: 13px; }
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); }
/* a bar split by IP type (Matters by status): the same colour for a type in every bar, grey for the types drawn together */
.hbar .bar > span + span { border-left: 1px solid var(--color-bg); }
.hbar .bar > span.t0, .legend i.t0 { background: var(--color-accent-800); }
.hbar .bar > span.t1, .legend i.t1 { background: var(--color-accent-500); }
.hbar .bar > span.t2, .legend i.t2 { background: var(--color-accent-300); }
.hbar .bar > span.to, .legend i.to { background: var(--color-neutral-500); }
.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: 900px) { .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], .ff input.dd { 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%; }
/* the bar of a client's insights is the fill itself; the dashboard's .bar (above) is a light track holding a fill, so this must not
   reach it: it once did, and painted every track in the fill's colour, so that all of them looked full (11-10) */
table.bars .bar { display: block; height: 10px; min-width: 2px; margin: 0; border-radius: 0 4px 4px 0; background: var(--color-accent-600); }
@media print {
  .topbar, .no-print, .skip-link, dialog, .notice, .assistant-panel, .assistant-toggle, nav.work-tabs { display: none !important; }
  .main { padding: 0; }
  .panel, .tile { break-inside: avoid; }
  .bar { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  /* A sheet of paper is under 900px wide, so the narrow-screen rule that scrolls a table inside its box would cut the
     last columns off a printout (testers 16/10, 12.6) */
  .main table { display: table !important; overflow: visible !important; max-width: none; width: 100%; }
  .report-table th, .report-table td { font-size: 10.5px; white-space: normal; padding: 3px 4px; overflow-wrap: anywhere; }
}

.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; }
/* My work's three pages (Suggestions, Double check, Attention): a segmented strip above the page, apart from the page's own tabs */
nav.work-tabs { display: inline-flex; gap: 2px; padding: 3px; margin: 0 0 14px; background: color-mix(in srgb, var(--color-text) 6%, transparent); border-radius: 8px; max-width: 100%; overflow-x: auto; }
nav.work-tabs a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 6px; color: var(--color-text); text-decoration: none; font-size: 13.5px; white-space: nowrap; }
nav.work-tabs a:hover { background: color-mix(in srgb, var(--color-text) 8%, transparent); }
nav.work-tabs a[aria-current] { background: var(--color-surface, #fff); font-weight: 600; box-shadow: 0 1px 2px color-mix(in srgb, var(--color-text) 18%, transparent); }
nav.work-tabs b { font-weight: 600; font-size: 12px; padding: 0 6px; border-radius: 10px; background: color-mix(in srgb, var(--color-accent) 16%, transparent); }
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; }


/* lazy roll-ups and busy calendar days (05-10) */
.cal-item.more { border-left-color: transparent; }
.cal-item.more button, .more-row button.linklike { background: none; border: 0; padding: 0; color: var(--color-accent-700, inherit); cursor: pointer; font: inherit; text-decoration: underline; }
details.lazy-closed { margin-top: 10px; }
details.lazy-closed > summary { cursor: pointer; font-size: 13px; color: var(--color-text-muted, inherit); }
details.lazy-closed[open] > summary { margin-bottom: 6px; }
.more-row td, li.more-row { border-bottom: 0; padding-top: 8px; }

/* Admin home */
.admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.admin-panel { border: 1px solid var(--color-divider); border-radius: 8px; padding: 16px; margin-bottom: 0; }
.admin-links { list-style: none; margin: 8px 0 0; padding: 0; }
.admin-links li { display: flex; flex-direction: column; padding: 8px 0; border-top: 1px solid var(--color-divider); }
.admin-links li:first-child { border-top: 0; }
.admin-links a { font-weight: 600; }
/* Reports (05-10) */
.report-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .report-grid { grid-template-columns: 1fr; } }
.report-form select[multiple] { width: 100%; }
.report-table .row-overdue td { background: var(--bad-bg); }
.linkbtn { background: none; border: 0; padding: 0 0 0 6px; cursor: pointer; text-decoration: underline; }

/* Column chooser (05-10) */
.col-chooser .col-form { min-width: 280px; max-height: 70vh; overflow: auto; }
.col-list { list-style: none; margin: 8px 0; padding: 0; }
.col-list li { display: flex; justify-content: space-between; align-items: center; padding: 2px 0; }
.col-list li.off { opacity: .7; }
.col-move .linkbtn { text-decoration: none; padding: 0 4px; }
/* Calendar views and dashboard panel (05-10) */
.cal-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.cal-bar .seg { display: inline-flex; gap: 2px; }
.cal-bar .btn.on { background: var(--color-accent); color: #fff; }
.cal-title { margin-left: 4px; }
table.calendar.cal-week td { height: 180px; vertical-align: top; }
.cal-item.prio-critical { border-left-color: var(--color-accent-800); font-weight: 600; }
.cal-item.prio-important { border-left-color: var(--color-accent-600, var(--color-accent)); }
.cal-item.reminder, .cal-item.sent { border-left-style: dashed; }
.cal-day .cal-item { padding: 4px 6px; margin-bottom: 4px; }
.quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.dash-cal-panel { overflow-x: auto; }

/* checkbox groups inside forms (05-10) */
.edit-form .field input[type=checkbox], .edit-form .field input[type=radio] { width: auto; }
.report-form .field, .cal-filter .field, .report-form .field > span, .cal-filter .field > span { align-items: stretch; text-align: left; }
.checks { display: flex; flex-wrap: wrap; gap: 0 18px; }
.checks .checkline { margin: 3px 0; }
.cal-filter .popover { min-width: 340px; }
button.linkbtn { border: 0; background: none; box-shadow: none; min-height: 0; height: auto; padding: 0 0 0 6px; font-size: 12px; color: var(--color-text-muted, inherit); }

/* 05-10: form labels sit left above their input (a flex rule centred them); full-page calendar */
.field { align-items: stretch; }
.field > span, .field > label { text-align: left; }
.main:has(.cal-page) { max-width: none; }
.cal-page table.calendar td { height: max(110px, calc((100vh - 300px) / 6)); }
.cal-page table.calendar.cal-week td { height: max(320px, calc(100vh - 300px)); }
.cal-page .cal-item { font-size: 13px; }

.main button.linkbtn:not(.menu-item) { border: 0; background: none; min-height: 0; padding: 0 0 0 6px; font-size: 12px; text-decoration: underline; color: inherit; }

/* ===== Readability (05-10). People spend the day here: one font, 14-15px text, labels and headings in normal case,
   grey text dark enough to read (contrast >= 7:1 on the page), numbers in fixed width so columns line up. Placed last
   so it wins over the sizes above. ===== */
body { font-size: 14.5px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  font-feature-settings: "cv05", "cv08"; }
:root { --color-text-muted: #4a4b4f; }
.muted, tr.muted td, .sub, .record-title, .menu-hint, .caret, .hint { color: #4a4b4f; }
h1, h2, h3, h4, h5, h6, .main h1 .mono, .main h1.mono { letter-spacing: -0.01em; }
.main h1 { font-size: 26px; font-weight: 650; }
.main h2 { font-size: 20px; font-weight: 600; }
.main h3 { font-size: 17px; font-weight: 600; }
h6, .kicker, .card-kicker, .brand-instance, legend, .kpi-label, .main th, .table th {
  text-transform: none; letter-spacing: 0; }
h6, .kicker { font-size: 13px; font-weight: 500; color: var(--color-accent-700); }
.brand-name { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.brand-instance { font-size: 11.5px; }
.topnav-item { font-family: var(--font-body); font-weight: 500; font-size: 14.5px; padding: 0 9px; }
.topnav .count, .badge, .tag, .card-meta { font-size: 12px; }
.menu-label { font-size: 14px; } .menu-hint { font-size: 12.5px; }
.main th, .table th { font-size: 12.5px; font-weight: 600; color: #3a3b3e; }
.main td, .table td, .table { font-size: 14px; }
.main table, .mono, .kpi-n, .bucket-n, .daynum { font-variant-numeric: tabular-nums; }
.mono { font-size: 0.95em; }
.main h1 .mono, .main h1.mono { font-family: var(--font-heading); }
.edit-form .field, .field, .ff > span, .ff legend, .ff-multi summary > span { font-size: 13px; color: #3a3b3e; }
legend { font-size: 13px; font-weight: 600; color: #3a3b3e; }
.label { font-size: 13px; }
.input, select, textarea, input[type=text], input[type=date], input.dd, input[type=email], input[type=search], input[type=number] {
  font-family: var(--font-body); font-size: 14px; }
.btn, button { font-family: var(--font-body); font-size: 13.5px; font-weight: 500; }
.small, .timeline li .muted, .timeline li .mono, .legend, .kpi-sub, .cal-item, code { font-size: 12.5px; }
.card-body, .dialog-body { opacity: 1; font-size: 14px; }
.kpi-label { font-size: 13px; color: #3a3b3e; }
.kpi-n { font-weight: 650; font-size: 34px; }
.checks label, .check, .radio, label:has(> input[type=checkbox]) { font-size: 14px; line-height: 1.4; }
button.linkbtn, .main button.linkbtn:not(.menu-item) { font-size: 13px; }

/* Fields look like fields: white boxes with a visible edge on the grey page; a clear focus ring. Primary links read
   white on blue (a.btn set dark text on them). */
.main input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]), .main select, .main textarea,
.input, .topsearch .input { background: #fff; border-color: #b9bbc0; }
.main input:focus-visible, .main select:focus-visible, .main textarea:focus-visible, .input:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--color-accent) 45%, transparent); outline-offset: 0; border-color: var(--color-accent); }
.main input:disabled, .main select:disabled, .main textarea:disabled { background: var(--color-neutral-100); color: #4a4b4f; }
a.btn.btn-primary, a.btn-primary, .main a.btn.btn-primary:hover { color: #fff; }
.main button:not(.menu-item), a.btn { border-color: #b9bbc0; }

/* Dockets, dates and office numbers: the text font with fixed-width figures and a slashed zero (0 vs O stays clear)
   instead of a typewriter face, which was tiring in long lists. Code blocks keep the monospace font. */
.mono, td.mono, .mono a, a.mono { font-family: var(--font-body); font-feature-settings: "tnum", "zero"; font-size: 1em;
  letter-spacing: 0; }
code, kbd, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* Destructive actions look different from the rest and sit apart (05-10 usability). */
.btn-danger, a.btn.btn-danger, .main button.btn-danger { color: #a3262a; border-color: #d9a3a5; margin-left: 14px; }
.btn-danger:hover, a.btn.btn-danger:hover { background: #fbeceb; color: #8a1f22; }
.main button.btn-danger-solid, .btn-danger-solid { background: #b3261e; border-color: #b3261e; color: #fff; }
.main button.btn-danger-solid:hover { background: #8c1d17; }
.edit-section.people { align-items: start; }

/* Button rows wrap instead of pushing the page wider than the window (crawl 05-10: Reports). */
.form-actions, .actions, .head-actions { flex-wrap: wrap; row-gap: 6px; }
.ep-form .checks, .checks-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 2px 12px; }
.ep-form { margin-top: 8px; }
#google-error:empty { display: none; }
.google-signin { margin-top: 12px; }
.similar-box { margin-top: 4px; padding: 6px 10px; background: #fff8e1; border-left: 3px solid #d9a400; font-size: 13px; }
.similar-list { margin: 2px 0 0; padding-left: 18px; }

/* review queue (06-10): proposed values one per line, wide enough to read */
td.proposed { min-width: 15rem; }
.setup-help { margin: 0 0 1rem; }
.setup-help ol { margin: .5rem 0 0 1.2rem; }
.setup-help li { margin-bottom: .35rem; max-width: 70rem; }
.field-static { margin: 0 0 .5rem; }

/* Attention list (09-10 review): checks grouped by severity, a record table with its context, a bulk bar. Pattern after
   Semrush Site Audit issues (a sentence, a count, "how to fix", one button), ClickUp's bulk bar and HubSpot's tabs. */
.crumb { margin: 0 0 var(--space-3); }
.attn-bar { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); align-items: flex-end; justify-content: space-between;
  margin-bottom: var(--space-4); }
.attn-tabs { flex: 1 1 auto; margin: 0; }
.attn-tabs a { display: inline-flex; align-items: center; gap: 6px; }
.attn-tabs a.push { margin-left: auto; }
.attn-n { display: inline-block; min-width: 22px; padding: 0 6px; border-radius: 999px; background: var(--color-neutral-200); color: #2b2b2d;
  font-size: 12px; font-weight: 600; line-height: 1.5; text-align: center; font-variant-numeric: tabular-nums; }
.attn-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #8a8a8f; flex: none; }
.attn-dot.sev-red { background: #b3261e; } .attn-dot.sev-amber { background: #d98e04; } .attn-dot.sev-grey { background: #8a8a8f; }
.attn-scope .seg-opt, a.seg-opt { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; font-size: 13.5px; cursor: pointer;
  text-decoration: none; color: var(--color-text); }
a.seg-opt:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); color: var(--color-text); }
a.seg-opt.on { background: var(--color-accent-700); color: #fff; }
a.seg-opt.on .attn-n { background: rgba(255, 255, 255, .25); color: #fff; }
.attn-total { margin: 0 0 var(--space-3); }
.attn-sevhead { display: flex; align-items: center; gap: 8px; margin: var(--space-6) 0 var(--space-2); font-size: 17px; }
.attn-checks { list-style: none; margin: 0 0 var(--space-6); padding: 0; }
.attn-check { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-4); align-items: center;
  padding: var(--space-3) var(--space-4); background: #fff; border: 1px solid var(--color-divider); border-left: 4px solid #8a8a8f;
  margin-bottom: -1px; }
.attn-check.sev-red { border-left-color: #b3261e; } .attn-check.sev-amber { border-left-color: #d98e04; }
.attn-check.sev-grey { border-left-color: #a9a9ae; }
.attn-title { font-weight: 600; font-size: 15.5px; color: var(--color-text); text-decoration: none; }
.attn-title:hover { text-decoration: underline; color: var(--color-text); }
.attn-why { margin: 2px 0 4px; color: #3a3b3e; font-size: 13.5px; max-width: 72ch; }
.attn-how > summary { font-size: 12.5px; }
.attn-how > p { margin: 4px 0 0; font-size: 13.5px; max-width: 72ch; padding-left: 12px; border-left: 2px solid var(--color-accent-300); }
.attn-side { display: grid; grid-template-columns: 5ch 84px 22ch; align-items: center; gap: var(--space-4); }
.attn-side .btn { justify-self: stretch; }
.attn-count { font-family: var(--font-heading); font-weight: 650; font-size: 24px; min-width: 3ch; text-align: right;
  font-variant-numeric: tabular-nums; }
.attn-code { font-size: 11.5px; color: #4a4b4f; background: transparent; padding: 0; overflow-wrap: anywhere; }
.attn-cleanup { padding: var(--space-3) var(--space-4); border: 1px solid var(--color-divider); background: var(--color-neutral-100); }
.attn-cleanup > summary { cursor: pointer; font-size: 14px; color: var(--color-text); }
.attn-cleanup .attn-checks { margin: var(--space-3) 0 0; }
.attn-clear { padding: var(--space-6) 0; font-size: 16px; }
.attn-clear::before { content: "\2713"; color: var(--ok-fg); font-weight: 700; margin-right: 8px; }
.attn-head .attn-fix { margin-top: 6px; max-width: 72ch; padding: 8px 12px; background: var(--color-accent-100);
  border-left: 3px solid var(--color-accent-600); font-size: 14px; }
.attn-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 var(--space-3); }
.attn-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px; border-radius: 999px; font-size: 13px;
  background: var(--muted-bg); color: var(--muted-fg); }
.attn-chip.sev-red { background: var(--bad-bg); color: var(--bad-fg); } .attn-chip.sev-amber { background: var(--warn-bg); color: var(--warn-fg); }
.attn-find { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin: 0 0 var(--space-3); }
.attn-find input[type=search] { width: 300px; max-width: 100%; }
.attn-table .attn-pick { width: 34px; padding-right: 0; }
.attn-table td { vertical-align: top; }
.attn-rec { font-weight: 600; }
.attn-actions .actions { justify-content: flex-end; gap: 6px; }
.attn-actions input[type=date], .attn-actions input.dd { min-height: 30px; }
.btn-sm, .main button.btn-sm, a.btn.btn-sm { min-height: 30px; padding: 3px 10px; font-size: 13px; }
.inline-menu.right .popover { left: auto; right: 0; }
.attn-pop { display: flex; flex-direction: column; gap: var(--space-3); width: 320px; max-width: calc(100vw - 32px); }
.attn-pop .stack { display: flex; flex-direction: column; gap: var(--space-2); }
.bulkbar { position: sticky; bottom: 0; z-index: 10; display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center;
  padding: 10px 14px; margin-top: var(--space-3); background: var(--color-accent-100); border: 1px solid var(--color-accent-300);
  box-shadow: 0 -4px 12px rgba(0, 0, 0, .06); }
.attn-dismissbox { display: inline-flex; gap: 6px; margin-left: auto; }
.attn-dismissbox input { width: 240px; max-width: 50vw; }
@media (max-width: 760px) { .attn-check { grid-template-columns: 1fr; } .attn-side { justify-content: space-between; } }

/* Attention panel (09-10): the case and its fix beside the list, so a record is fixed where it is found. The list stays,
   the panel is sticky, and the next record opens after each fix. Seen on Mobbin: Unify and Gumloop (a record's panel with
   its title, a close button, stepping to the next record and "Open"), Featurebase (date presets on a snooze), Klaviyo
   (Snooze beside Close); links in docs/product/UI_FEEDBACK_PLAN.md. */
.attn-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.attn-layout.has-panel { grid-template-columns: minmax(0, 1fr) minmax(360px, 440px); }
.attn-drawer, .attn-pagepanel { background: var(--color-surface); border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.attn-drawer { position: sticky; top: 72px; max-height: calc(100vh - 88px); overflow-y: auto; }
.attn-drawer[hidden] { display: none; }
.attn-pagepanel { max-width: 560px; }
.attn-panel { padding: var(--space-4); }
.attn-panel:focus { outline: none; }
.attn-panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3);
  padding-bottom: var(--space-3); margin-bottom: var(--space-3); border-bottom: 1px solid var(--color-divider); }
.attn-panel-head h2 { margin: 2px 0 0; overflow-wrap: anywhere; }
.attn-panel-head .kicker { margin: 0; color: #4a4b4f; }
.attn-panel-close { font-size: 22px; line-height: 1; padding: 0 10px; min-height: 32px; }
.attn-panel-sec { margin: 0 0 var(--space-4); padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-divider); }
.attn-panel-sec:last-of-type { border-bottom: 0; margin-bottom: 0; }
.attn-panel-sec p { margin: 0 0 var(--space-2); }
.attn-panel h3.attn-h, .attn-panel p.attn-h { margin: 0 0 6px; text-transform: uppercase; letter-spacing: .05em; font-size: 12px; font-weight: 650; color: #4a4b4f; }
.attn-fix-box { padding: var(--space-3); background: var(--color-accent-100); border: 1px solid var(--color-accent-300);
  border-radius: var(--radius-md); }
.attn-waitbox { padding: var(--space-3); background: var(--warn-bg); border-radius: var(--radius-md); }
.attn-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 3px 14px; margin: 0 0 var(--space-3); font-size: 13.5px; }
.attn-facts dt { color: #4a4b4f; } .attn-facts dd { margin: 0; overflow-wrap: anywhere; }
.attn-pair { display: flex; flex-wrap: wrap; gap: var(--space-3); } .attn-grow { flex: 1 1 160px; }
.attn-later form + form { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px dashed var(--color-divider); }
.attn-later .stack, .attn-fix-box .stacked { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-2); }
.attn-done { padding: 8px 12px; background: var(--ok-bg); color: var(--ok-fg); border-radius: var(--radius-md); }
.attn-skip { margin: var(--space-3) 0 0; text-align: right; font-size: 13.5px; }
.attn-row.is-open { background: var(--color-accent-100); box-shadow: inset 3px 0 0 var(--color-accent-700); }
.attn-laterbox { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.attn-laterbox input[name=note] { width: 190px; max-width: 40vw; }
@media (max-width: 1100px) {
  .attn-layout.has-panel { grid-template-columns: minmax(0, 1fr); }
  .attn-drawer { position: fixed; left: 0; right: 0; bottom: 0; top: auto; max-height: 82vh; z-index: 60;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
}
.attn-presets { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 var(--space-2); }

/* Calendar colour code (09-10). Colour says how serious (Critical red, Important amber, Follow up blue); the shape says what
   it is (a deadline is a filled chip, a reminder a dashed outline, a mail sent a faded tick); overdue is hatched. A reminder
   takes the colour IPIGLU gave its stage (green, orange, yellow, tomato, red for the daily ones; .rc-* below). Seen on
   Mobbin: HoneyBook (a legend of coloured dots beside the grid, hatched bars for the tentative ones), Buffer (filter pills
   above the grid, today as a filled badge), Basecamp (today tinted, weekends shaded), Midday (days outside the month
   hatched, "+n more"); links in docs/product/UI_FEEDBACK_PLAN.md. */
.cal-legend { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; margin: 0 0 var(--space-3); font-size: 13px; }
.cal-key { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--color-divider);
  color: var(--color-text); text-decoration: none; background: var(--color-surface); }
a.cal-key:hover { border-color: var(--color-accent-700); color: var(--color-text); }
.cal-key.on { border-color: var(--color-accent-700); background: var(--color-accent-100); font-weight: 600; }
.cal-key .n { font-variant-numeric: tabular-nums; color: #4a4b4f; }
.cal-key.off { opacity: .6; text-decoration: line-through; text-decoration-color: #8a8a8f; }
span.cal-key { cursor: default; }
.cal-swatch { width: 12px; height: 12px; border-radius: 3px; flex: none; border: 1px solid transparent; }
.cal-swatch.k-critical { background: var(--bad-bg); border-color: #b3261e; box-shadow: inset 3px 0 0 #b3261e; }
.cal-swatch.k-important { background: var(--warn-bg); border-color: #c98a00; box-shadow: inset 3px 0 0 #c98a00; }
.cal-swatch.k-follow_up { background: var(--info-bg); border-color: #2f6fae; box-shadow: inset 3px 0 0 #2f6fae; }
.cal-swatch.k-overdue { background: repeating-linear-gradient(135deg, var(--bad-bg) 0 3px, #e8b4ae 3px 5px); border-color: #b3261e; }
.cal-swatch.k-reminder { background: transparent; border: 1px dashed #5f6064; }
.cal-swatch.k-sent { background: var(--ok-bg); border-color: #2e7d46; }
.cal-chips { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-left: 4px; }
.cal-chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 4px 1px 10px; border-radius: 999px; background: var(--info-bg);
  color: var(--info-fg); font-size: 12.5px; text-decoration: none; }
.cal-chip:hover { text-decoration: underline; }
.cal-reset { font-size: 12.5px; }
.cal-item { border-left-width: 4px; border-radius: 3px; padding: 1px 5px; margin-bottom: 3px; overflow-wrap: anywhere; }
.cal-item.due { background: var(--muted-bg); border-left-color: #8a8a8f; }
.cal-item.due.sev-critical { background: var(--bad-bg); border-left-color: #b3261e; }
.cal-item.due.sev-important { background: var(--warn-bg); border-left-color: #c98a00; }
.cal-item.due.sev-follow_up { background: var(--info-bg); border-left-color: #2f6fae; }
.cal-item.due.sev-critical a { color: var(--bad-fg); } .cal-item.due.sev-important a { color: var(--warn-fg); }
.cal-item.due.sev-follow_up a { color: var(--info-fg); }
.cal-item.due.overdue { background-image: repeating-linear-gradient(135deg, transparent 0 5px, rgba(179, 38, 30, .16) 5px 7px); }
.cal-item.due.overdue::before { content: "!"; font-weight: 700; color: #b3261e; margin-right: 4px; }
.cal-item.reminder { background: color-mix(in srgb, var(--rc, #8a8a8f) 11%, transparent); border: 1px dashed var(--rc, #8a8a8f);
  border-left: 4px solid var(--rc, #8a8a8f); color: #3c3d41; }
/* The reminder colours of IPIGLU's calendar (calendar_color_list), as a class per colour name so no style is written inline */
.rc-green { --rc: #3a9d5d; } .rc-orange { --rc: #e8890c; } .rc-yellow { --rc: #d9b400; } .rc-tomato { --rc: #e5533d; }
.rc-red { --rc: #c9302c; } .rc-blue { --rc: #3a6fb5; } .rc-brown { --rc: #8a5a2b; } .rc-gold { --rc: #c9a227; }
.rc-indigo { --rc: #4b3fa8; } .rc-lime { --rc: #84b816; } .rc-skyblue { --rc: #4aa8d8; } .rc-olive { --rc: #7a7a1f; }
.rc-pink { --rc: #e377a8; } .rc-maroon { --rc: #8e2a3c; } .rc-gray { --rc: #7a7a7f; } .rc-purple { --rc: #8a4bb0; }
.rc-teal { --rc: #1f8f8a; } .rc-violet { --rc: #9b5de5; } .rc-wheat { --rc: #d8c08a; }
.cal-stages { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-left: 6px; font-size: 12.5px; color: #4a4b4f; }
.cal-stage { display: inline-flex; align-items: center; gap: 4px; }
.cal-stage i { width: 10px; height: 10px; border-radius: 50%; background: var(--rc); border: 1px solid color-mix(in srgb, var(--rc) 70%, #000); }
.cal-item.sent { background: transparent; opacity: .75; border-left-style: solid; border-left-color: #2e7d46; }
.cal-item.sent::before { content: "\2713"; color: #2e7d46; margin-right: 4px; }
table.calendar td.today .daynum { display: inline-block; min-width: 24px; padding: 0 6px; border-radius: 999px; background: var(--color-accent-700); color: #fff; text-align: center; }
table.calendar td.today { background: var(--color-accent-100); }
table.calendar td:nth-child(6), table.calendar td:nth-child(7) { background-color: color-mix(in srgb, var(--color-text) 2.5%, transparent); }
table.calendar td.muted { background-image: repeating-linear-gradient(135deg, transparent 0 6px, rgba(0, 0, 0, .035) 6px 8px); }

/* Feedback with a picture (09-10) */
.feedback-dialog { border: 1px solid var(--color-divider); border-radius: var(--radius-lg); padding: 0; width: min(640px, calc(100vw - 24px));
  max-height: calc(100vh - 32px); box-shadow: var(--shadow-lg); background: var(--color-surface); color: var(--color-text); }
.feedback-dialog::backdrop { background: rgba(20, 22, 26, .45); }
.feedback-body { padding: var(--space-4); overflow-y: auto; max-height: calc(100vh - 40px); }
.feedback-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-2); }
.feedback-head h2 { margin: 0; }
.feedback-x { font-size: 22px; line-height: 1; padding: 0 10px; min-height: 32px; }
.fb-shot-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fb-choose { cursor: pointer; position: relative; }
.fb-choose:focus-within { outline: 2px solid var(--color-accent-700); outline-offset: 2px; }
.fb-thumb { max-width: 100%; max-height: 220px; border: 1px solid var(--color-divider); border-radius: var(--radius-md); margin-top: var(--space-2); }
.fb-shot [hidden], .fb-shot [data-fb-note]:empty { display: none; }
.feedback-form .error { margin: 0; }
.fb-help { margin: 0 0 var(--space-2); font-size: 13px; }
.fb-help > summary { cursor: pointer; color: var(--color-accent-700); width: fit-content; }
.fb-help > p { margin: 6px 0 0; max-width: 78ch; }
.fb-thumb-sm { max-height: 90px; margin-top: 6px; }

/* Suggested party merges (09-10): the same columns in every group so the groups line up. On a narrow screen the table keeps
   its width and scrolls inside its panel; the page itself does not scroll sideways. */
.party-merge .table-wrap { overflow-x: auto; }
.party-merge table.table { table-layout: fixed; min-width: 880px; }
.party-merge th:nth-child(1), .party-merge th:nth-child(2) { width: 64px; }
.party-merge th:nth-child(3) { width: 22%; } .party-merge th:nth-child(4) { width: 10%; }
.party-merge th:nth-child(5) { width: 17%; } .party-merge th:nth-child(6) { width: 56px; }
.party-merge th:nth-child(7) { width: 11%; } .party-merge th:nth-child(8) { width: 19%; }
.party-merge td { overflow-wrap: anywhere; }

/* Record pages (09-10): the notes and the deadlines first, the details and the side panels fold away. Seen on Mobbin: Attio
   (activity in the main column, a "Details" side column), Twenty (property groups that fold), Plane and Plain (a task's
   properties in a side list, the activity under the title); links in docs/product/UI_FEEDBACK_PLAN.md. */
.fold-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; cursor: pointer; }
.fold-head > a, .fold-head > button:not(.fold-toggle), .fold-head > .btn { cursor: pointer; }
.fold-head > .btn:first-of-type { margin-left: auto; }
.main button.fold-toggle:not(.menu-item) { flex: none; width: 24px; height: 24px; min-height: 0; padding: 0; margin-left: -6px; border: 0;
  border-radius: 4px; background: none; box-shadow: none; color: var(--color-accent-700); cursor: pointer; }
.fold-toggle::before { content: ""; display: block; width: 7px; height: 7px; margin: 0 auto; border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .12s; }
.is-folded > .fold-head > .fold-toggle::before { transform: translateX(-2px) rotate(-45deg); }
.main button.fold-toggle:not(.menu-item):hover { background: color-mix(in srgb, var(--color-text) 8%, transparent); }
.main button.fold-toggle:focus-visible { outline: 2px solid var(--color-accent-700); outline-offset: 1px; }
.fold-count { min-width: 22px; padding: 0 7px; border-radius: 999px; background: var(--info-bg); color: var(--info-fg);
  font-size: 12px; font-weight: 500; line-height: 20px; text-align: center; font-variant-numeric: tabular-nums; }
.is-folded > .fold-head { margin-bottom: 0; }
.panel.is-folded { margin-bottom: var(--space-3); }
.fold-tools { margin: 0 0 var(--space-2); text-align: right; color: #4a4b4f; }
.cols3.side-hidden { grid-template-columns: minmax(0, 1fr); }
.cols3.side-hidden > .col-side { display: none; }
.head-end { margin-left: auto; }
.btn-quiet { background: none; border-color: transparent; color: var(--color-accent-700); }
@media print { .fold-body[hidden] { display: block !important; } .fold-toggle, .fold-tools, [data-fold-side] { display: none; } }
@media (max-width: 900px) { .main button[data-fold-side] { display: none; } }

/* The history of a record scrolls inside its panel, so the page under it stays in reach */
.timeline-scroll { max-height: 24rem; overflow-y: auto; padding-right: 6px; margin-bottom: var(--space-2);
  border-top: 1px solid var(--color-divider); }
.timeline-scroll:focus-visible { outline: 2px solid var(--color-accent-700); outline-offset: 2px; }
.timeline-panel .note-composer { margin-bottom: var(--space-2); }

/* Open deadlines of a record, as a table */
table.deadline-table th, table.deadline-table td { padding: 6px 8px; vertical-align: top; }
table.deadline-table td:first-child { white-space: nowrap; }
.sc.sev-critical { background: var(--bad-bg); color: var(--bad-fg); font-weight: 600; }
.sc.sev-important { background: var(--warn-bg); color: var(--warn-fg); }
.sc.sev-follow_up { background: var(--info-bg); color: var(--info-fg); }

/* Deadline page: the details in a side list, the notes and the reminders in the main column */
.props dl.facts { grid-template-columns: 112px 1fr; }
.ball-form { display: grid; gap: var(--space-2); margin: var(--space-3) 0 0; padding-top: var(--space-3); border-top: 1px solid var(--color-divider); }
.ball-form .btn { justify-self: start; }
table.reminder-table th, table.reminder-table td { padding: 5px 8px; }
.record-head .glance-chips { margin: var(--space-2) 0 0; }
.record-head .glance-chips .sc.tone-muted { border: 1px solid var(--color-divider); }

/* Record actions (10-10): every record page keeps its actions in one bar at the top right: the page's main button, Edit and an
   Actions menu with the rest; the forms behind the menu open as dialogs. */
.record-actions { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.record-actions form { margin: 0; }
.actions-menu { position: relative; display: inline-block; }
.actions-menu > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.actions-menu > summary::-webkit-details-marker { display: none; }
.actions-menu[open] > summary { background: var(--color-accent-100); border-color: var(--color-accent-600); }
.actions-panel { top: calc(100% + 4px); left: auto; right: 0; min-width: 310px; padding: 4px 0; }
.menu-item.compact { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 18px; padding: 6px 14px; }
.menu-item.compact .menu-hint { white-space: nowrap; }
.menu-sep { height: 1px; background: var(--color-divider); margin: 4px 0; }
/* a group that drew nothing leaves no line: never two in a row, never one at an end of the menu */
.menu-sep + .menu-sep, .menu-sep:not(:is(.menu-item, .menu-form) ~ .menu-sep),
.menu-sep:not(:has(~ :is(.menu-item, .menu-form))) { display: none; }
.menu-item.danger { color: #a3262a; } .menu-item.danger:hover { background: #fbeceb; color: #8a1f22; }
form.menu-form { margin: 0; display: block; }
/* a header with the bar on its right (family, client, deadline, party, document, agent) */
.record-head.has-bar { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); flex-wrap: wrap; }
.record-head.has-bar > .record-head-main { flex: 1 1 320px; min-width: 0; }
.record-head.has-bar > .record-actions { flex: none; margin-top: 2px; }
/* a page whose header sits in the main column (matter, contact): the bar is the first row of the side column; with the side
   panels hidden it is a row above the page, right-aligned */
.cols3.has-bar { grid-template-rows: auto 1fr; row-gap: var(--space-2); }
.cols3.has-bar > .record-actions { grid-column: 2; grid-row: 1; justify-self: end; align-self: start; }
.cols3.has-bar > .col-main { grid-column: 1; grid-row: 1 / span 2; }
.cols3.has-bar > .col-side { grid-column: 2; grid-row: 2; }
.cols3.has-bar.side-hidden > .record-actions { grid-column: 1; grid-row: 1; }
.cols3.has-bar.side-hidden > .col-main { grid-column: 1; grid-row: 2; }
@media (max-width: 900px) {
  /* on a narrow screen the menu hangs from the left edge of the bar, not from its button, so it stays on the screen */
  .record-actions { position: relative; }
  .actions-menu { position: static; }
  .actions-panel { left: 0; right: auto; top: calc(100% + 4px); width: min(340px, calc(100vw - 32px)); min-width: 0; }
  .cols3.has-bar > .record-actions { grid-column: 1; grid-row: 1; justify-self: start; }
  .cols3.has-bar > .col-main { grid-column: 1; grid-row: 2; }
  .cols3.has-bar > .col-side { grid-column: 1; grid-row: 3; }
  .record-head.has-bar > .record-actions { flex: 1 1 100%; }
}
@media print { .record-actions { display: none; } }
dialog.action-dialog { border: 1px solid var(--color-divider); padding: var(--space-4); width: min(460px, calc(100vw - 32px)); background: var(--color-bg); color: var(--color-text); box-shadow: var(--shadow-lg); }
dialog.action-dialog::backdrop { background: color-mix(in srgb, #1d1f20 35%, transparent); }
dialog.action-dialog h2 { margin: 0 0 var(--space-2); }
dialog.action-dialog .field { display: block; margin-top: var(--space-3); }
dialog.action-dialog .field input:not([type=radio]):not([type=file]), dialog.action-dialog .field select, dialog.action-dialog .field textarea { width: 100%; box-sizing: border-box; }
dialog.action-dialog fieldset.field { border: 0; padding: 0; margin: var(--space-3) 0 0; }
dialog.action-dialog .dialog-extra { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--color-divider); }

/* Add deadline opens as the whole form inside the Coming up panel; the reminder section is shared with Edit deadline (10-10) */
details.add-deadline { margin: 0 0 var(--space-3); }
details.add-deadline > summary { list-style: none; display: inline-block; cursor: pointer; }
details.add-deadline > summary::-webkit-details-marker { display: none; }
details.add-deadline[open] > summary { margin-bottom: var(--space-3); }
details.add-deadline > form.add-form { padding: var(--space-4); border: 1px solid var(--color-divider); background: var(--color-bg); max-width: none; }
.reminder-setup > .rem-mode, .reminder-setup > .rem-custom, .reminder-setup > .notice, .reminder-setup > p, .reminder-setup > table { grid-column: 1 / -1; }
.reminder-setup .rem-mode { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.reminder-setup .rem-mode .checkline { margin: 0; }
.reminder-setup .rem-custom { margin: 0; }
.reminder-setup .notice { margin: 0; }
table.rem-plan { max-width: 640px; }
table.rem-plan tr.rem-past td:not(:last-child) { color: color-mix(in srgb, var(--color-text) 50%, transparent); text-decoration: line-through; }
table.rem-plan tr.rem-running td:first-child { font-style: italic; }

/* The top-bar search offers records while the person types (10-10, after Zoho Books) */
.topsearch { position: relative; display: flex; align-items: stretch; flex: 0 1 460px; }
.topsearch .input { flex: 1 1 auto; min-width: 0; }
.topsearch .ss-scope { flex: 0 0 auto; width: auto; max-width: 8.5em; border: 1px solid #b9bbc0; border-right: 0; background: var(--color-surface); color: var(--color-text); font-size: 12.5px; padding: 0 4px; }
.ss-panel { display: none; position: absolute; z-index: 40; top: calc(100% + 4px); right: 0; width: min(600px, 92vw); max-height: min(72vh, 640px); overflow-y: auto;
  background: var(--color-bg); border: 1px solid var(--color-divider); box-shadow: var(--shadow-lg); }
.topsearch.open .ss-panel:not(:empty) { display: block; }
.ss-head { padding: 8px 14px 4px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-neutral-700); }
.ss-item { display: flex; align-items: center; gap: 10px; padding: 7px 14px; color: var(--color-text); text-decoration: none; border-left: 2px solid transparent; }
.ss-item:hover, .ss-item.on { background: var(--color-accent-100); border-left-color: var(--color-accent-600); color: var(--color-text); }
.ss-icon { flex: 0 0 auto; color: var(--color-accent-700); }
.ss-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.ss-title { font-weight: 500; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-sub { font-size: 12px; color: var(--color-neutral-700); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-why { margin-left: 8px; font-style: normal; color: var(--color-accent-800); }
.ss-type { flex: 0 0 auto; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-neutral-700); }
.ss-empty { padding: 14px; font-size: 13.5px; color: var(--color-neutral-800); }
.ss-foot { border-top: 1px solid var(--color-divider); margin-top: 4px; }
.ss-all .ss-title { font-weight: 400; }
.ss-tip { padding: 6px 14px 8px; font-size: 11.5px; color: var(--color-neutral-700); }
.ss-panel mark, .search-hits mark { background: color-mix(in srgb, var(--color-accent-600) 22%, transparent); color: inherit; padding: 0; }
.tab-count { display: inline-block; margin-left: 4px; font-size: 11px; color: var(--color-neutral-700); font-variant-numeric: tabular-nums; }
.search-page { max-width: 1100px; } .search-page input[name=q] { flex: 1; }
/* Narrow screens (11-10, checked in a browser at 390, 768 and 1024 px). The top bar wraps instead of hiding the search or clipping its menus
   (an overflow-x on it cut the dropdowns off); a wide table scrolls inside the page instead of widening it. */
@media (max-width: 1100px) {
  .topbar { flex-wrap: wrap; height: auto; padding-block: 6px; row-gap: 4px; }
  .topnav { flex-wrap: wrap; height: auto; }
  .topnav-item { height: 40px; }
  .menu-panel { top: 100%; }
  .topsearch { order: 10; flex: 1 1 100%; margin: 0 0 4px; }
}
@media (max-width: 900px) {
  .topbar { position: static; }
  /* position: relative makes the scrolling table the containing block of the screen-reader-only text in its cells, which sits at
     the right edge and would otherwise stretch the page */
  .main table, .main .tabs { display: block; max-width: 100%; overflow-x: auto; position: relative; }
  .main .tabs { white-space: nowrap; }
}
@media (max-width: 700px) {
  /* name and menu on the first row, then the menus, then the search */
  .topnav { order: 5; flex: 1 1 100%; }
  .menu-right, .topbar > .avatar { margin-left: auto; }
  /* a menu opens across the width of the bar, just under it, instead of hanging off the right edge of the screen */
  .topbar { position: relative; }
  .menu { position: static; }
  .menu-panel, .menu-right .menu-panel { left: 8px; right: 8px; top: 100%; min-width: 0; }
}
.reminder-setup .rem-pair > span.muted { align-self: flex-end; padding-bottom: 8px; }

/* The Assistant (12-10): a button in the top bar and a panel on the right that pushes the page over; on narrower screens it covers it. */
.assistant-toggle { margin-left: var(--space-2); height: 32px; padding: 0 12px; font: inherit; font-family: var(--font-heading); font-weight: 600;
  font-size: 14px; color: #fff; background: var(--color-accent-700); border: 1px solid var(--color-accent-700); cursor: pointer; flex: none; }
.assistant-toggle:hover, .assistant-toggle[aria-expanded=true] { background: var(--color-accent-900); border-color: var(--color-accent-900); }
.assistant-panel { position: fixed; top: 58px; right: 0; bottom: 0; width: 380px; max-width: 100vw; z-index: 25; display: flex; flex-direction: column;
  background: var(--color-bg); border-left: 1px solid var(--color-divider); box-shadow: var(--shadow-md); }
.assistant-panel[hidden] { display: none; }
#assistant-body { display: flex; flex-direction: column; height: 100%; min-height: 0; }
@media (min-width: 1200px) { body.assistant-open .main { margin-right: 380px; } }
@media (max-width: 1100px) { .assistant-panel { top: 0; z-index: 50; } }
@media (max-width: 700px) { .assistant-panel { width: 100vw; } }
.a-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: 8px 12px 8px 14px; border-bottom: 1px solid var(--color-divider); }
.a-title { margin: 0; font-size: 16px; }
.a-head-actions { display: flex; align-items: center; }
.a-head-actions .btn-ghost { background: transparent; border: 0; font: inherit; font-size: 13px; color: var(--color-accent-700); padding: 4px 8px; cursor: pointer; text-decoration: none; }
.a-head-actions .btn-ghost:hover { background: var(--color-accent-100); }
.a-log { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.a-log.a-page { overflow: visible; max-width: 760px; padding: 0; }
.a-msg { max-width: 94%; padding: 8px 10px; line-height: 1.45; overflow-wrap: anywhere; border: 1px solid var(--color-divider); box-sizing: border-box; }
.a-msg p { margin: 0; }
.a-user { align-self: flex-end; background: var(--color-accent-100); border-color: var(--color-accent-300); }
.a-user.a-sending { opacity: .6; }
.a-bot { align-self: flex-start; background: #fff; }
.a-note { align-self: stretch; max-width: none; background: var(--color-accent-100); border-left: 2px solid var(--color-accent); font-size: 13px; }
.a-hint { color: var(--color-neutral-800); font-size: 13.5px; } .a-hint ul { margin: 6px 0 6px 18px; padding: 0; } .a-hint p { margin: 6px 0; }
.a-muted { color: var(--color-neutral-700); font-size: 13px; }
.a-error { color: #b3261e; font-size: 13px; margin: 6px 0 0; }
.a-warn { margin: 6px 0 0; padding: 4px 8px; font-size: 13px; background: #fff4e0; border-left: 2px solid #d98e04; }
.a-card { margin-top: 8px; padding: 10px; background: var(--color-neutral-100); border: 1px solid var(--color-accent-400); border-left-width: 3px; }
.a-card.a-done { border-color: #2e7d32; } .a-card.a-cancelled, .a-card.a-expired { border-color: var(--color-neutral-400); }
.a-card.a-refused, .a-card.a-failed { border-color: #b3261e; }
.a-card header { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; font-size: 13px; }
.a-card-title { font-family: var(--font-heading); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--color-accent-700); }
.a-lines { display: grid; grid-template-columns: max-content 1fr; gap: 3px 10px; margin: 0; font-size: 13.5px; }
.a-lines dt { color: var(--color-neutral-700); } .a-lines dd { margin: 0; overflow-wrap: anywhere; }
.a-field { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; font-size: 13px; }
.a-field input { font: inherit; font-size: 14px; padding: 5px 8px; border: 1px solid #b9bbc0; background: #fff; border-radius: 0; }
.a-actions { display: flex; gap: var(--space-2); margin-top: 10px; }
.a-actions .btn-primary { padding: 5px 12px; cursor: pointer; }
.a-actions .btn-ghost { background: transparent; border: 0; font: inherit; color: var(--color-accent-700); cursor: pointer; padding: 5px 8px; }
.a-until { margin: 6px 0 0; font-size: 12px; color: var(--color-neutral-700); }
.a-done { color: #2e7d32; } .a-card .a-done { margin: 8px 0 0; font-size: 13.5px; }
.a-form { display: flex; align-items: flex-end; gap: var(--space-2); padding: 10px 14px; border-top: 1px solid var(--color-divider); }
.a-form textarea { flex: 1; min-width: 0; min-height: 52px; max-height: 160px; resize: vertical; font: inherit; font-size: 14px; padding: 6px 8px; border: 1px solid #b9bbc0; background: #fff; border-radius: 0; box-sizing: border-box; }
.a-form .btn-primary { padding: 6px 14px; cursor: pointer; }
.a-thinking { display: none; margin: 0; padding: 0 14px 10px; font-size: 13px; color: var(--color-neutral-700); }
.a-thinking.htmx-request { display: block; }

/* Admin > AI models (12-10): the model name takes the room, the ticks are narrow, and every provider's table lines up with the next. */
.ai-models { table-layout: fixed; width: 100%; } .ai-models th:first-child { width: 34%; } .ai-models td:first-child { overflow-wrap: anywhere; }
.ai-models td:not(:first-child), .ai-models th:not(:first-child) { text-align: center; }
.ai-prov { margin-bottom: var(--space-4); } .ai-add { margin-top: var(--space-6); }

/* The Assistant's confirmation loop (12-10): choices when a docket was not matched fully, and the check box on a card for a guessed record. */
.a-choices { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.a-choice { font: inherit; font-size: 13px; text-align: left; padding: 5px 9px; color: var(--color-accent-800); background: var(--color-accent-100);
  border: 1px solid var(--color-accent-400); cursor: pointer; max-width: 100%; overflow-wrap: anywhere; }
.a-choice:hover:not(:disabled) { background: var(--color-accent-200); } .a-choice:disabled { opacity: .55; cursor: default; }
.a-choice-static { display: inline-block; padding: 3px 8px; font-size: 13px; background: var(--color-neutral-100); border: 1px solid var(--color-divider); }
.a-verify { margin-top: 8px; padding: 6px 8px; font-size: 13px; background: #fff4e0; border-left: 2px solid #d98e04; }
.a-verify p { margin: 0 0 4px; }
.a-tick { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-weight: 600; cursor: pointer; }
.a-request { margin: 6px 0 0; font-size: 12px; color: var(--color-neutral-700); overflow-wrap: anywhere; }

/* Docketing mail (14/10): views | the mail | the open mail, as shared inboxes lay it out (Plain, Front, Gorgias on Mobbin) */
.inbox { display: grid; grid-template-columns: 190px minmax(260px, 340px) minmax(0, 1fr); border: 1px solid var(--color-divider);
  background: var(--color-surface); min-height: 70vh; }
.inbox-views { border-right: 1px solid var(--color-divider); padding: var(--space-2) 0; }
.inbox-views > a { display: flex; justify-content: space-between; gap: 8px; padding: 7px var(--space-3); color: var(--color-text);
  text-decoration: none; }
.inbox-views > a:hover { background: var(--color-accent-100); }
.inbox-views > a[aria-current] { background: var(--color-accent-100); font-weight: 600; box-shadow: inset 3px 0 0 var(--color-accent-700); }
.inbox-views b { font-size: 12px; font-weight: 600; color: var(--color-accent-700); }
.inbox-cats { display: flex; flex-direction: column; gap: 2px; margin-top: var(--space-2); padding: var(--space-2) var(--space-3) 0;
  border-top: 1px solid var(--color-divider); }
.inbox-cats a { padding: 2px 0; font-size: 12.5px; color: var(--color-text-muted); text-decoration: none; }
.inbox-cats a[aria-current] { color: var(--color-accent-700); font-weight: 600; }
.inbox-list { border-right: 1px solid var(--color-divider); max-height: 78vh; overflow-y: auto; }
.inbox-count { margin: 0; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-divider); }
.inbox-list ul { list-style: none; margin: 0; padding: 0; }
.inbox-list li { border-bottom: 1px solid var(--color-divider); }
.inbox-list li.empty { padding: var(--space-3); }
.inbox-list li > a { display: grid; gap: 3px; padding: 10px var(--space-3); color: var(--color-text); text-decoration: none; }
.inbox-list li > a:hover { background: var(--color-accent-100); }
.inbox-list li.on > a { background: var(--color-accent-100); box-shadow: inset 3px 0 0 var(--color-accent-700); }
.ml-top { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; }
.ml-from { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.ml-top time { color: var(--color-text-muted); white-space: nowrap; }
.ml-subject { overflow: hidden; font-size: 13.5px; text-overflow: ellipsis; white-space: nowrap; }
.ml-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.ml-digest { display: -webkit-box; overflow: hidden; font-size: 12.5px; color: var(--color-text-muted); -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; }
.inbox-thread { min-width: 0; max-height: 78vh; overflow-y: auto; padding: var(--space-4) 24px; }
.thread-back { display: none; }
.thread-head { margin-bottom: var(--space-4); padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-divider); }
.main .thread-subject { margin: 0 0 6px; font-size: 20px; }
.thread-where { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 var(--space-2); }
.thread-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.thread-owner { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 var(--space-2); }
.give-form select { max-width: 160px; }
.ml-top time.late { color: var(--bad-fg); font-weight: 600; }
.place-box { margin-bottom: var(--space-4); padding: var(--space-3) var(--space-4); background: var(--warn-bg);
  border-left: 3px solid var(--warn-fg); }
.place-box.quiet { background: transparent; border-left-color: var(--color-divider); }
.main .place-box h3 { margin: 0 0 4px; }
.place-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2); }
.thread-summary { margin-bottom: var(--space-4); padding: var(--space-3) var(--space-4); background: var(--info-bg); }
.main .thread-summary h3 { margin: 0 0 4px; font-size: 12px; color: var(--info-fg); letter-spacing: .06em; text-transform: uppercase; }
.thread-summary p { margin: 0; }
.callout { margin: 0 0 var(--space-3); padding: var(--space-2) var(--space-3); }
.main .suggest h3, .main .thread-mail h3 { margin: var(--space-4) 0 var(--space-2); font-size: 15px; }
.suggest-table td { vertical-align: top; }
.sg-title { margin-bottom: 2px; font-weight: 600; }
.sg-line { font-size: 13.5px; }
.sg-quote { margin: 6px 0 0; padding: 4px 10px; border-left: 3px solid var(--color-accent-700); font-size: 13px; font-style: italic;
  color: var(--color-text-muted); }
.sg-actions { width: 240px; }
.sg-actions form { margin: 0 0 6px; }
.sg-dismiss select, .sg-assign select { max-width: 140px; }
.sg-missed, .sg-decided, .sg-refused { margin-top: var(--space-3); }
.mail-msg { margin-bottom: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--color-bg);
  border: 1px solid var(--color-divider); }
.mail-from { margin: 0 0 var(--space-2); font-size: 13px; overflow-wrap: anywhere; }
.mail-body { font-size: 13.5px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.mail-body mark { padding: 0 1px; background: var(--warn-bg); color: var(--color-text); box-shadow: 0 1px 0 var(--warn-fg); }
.thread-asks, .thread-files { margin-bottom: var(--space-4); }
.thread-asks { padding: var(--space-3) var(--space-4); border-left: 3px solid var(--info-fg); background: var(--info-bg); }
.main .thread-asks h3, .main .thread-files h3 { margin: 0 0 var(--space-2); font-size: 15px; }
.thread-asks ul, .thread-files ul { margin: 0; padding: 0; list-style: none; }
.thread-asks li + li { margin-top: var(--space-3); }
.thread-asks .sg-quote { color: var(--color-text); }
.ask-links { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; }
.thread-files li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 6px 0;
  border-bottom: 1px solid var(--color-divider); }
.file-name { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; }
.file-form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.file-form select { max-width: 160px; }
.mail-file { margin: var(--space-2) 0 0; }
details.mail-file > summary { font-size: 13px; cursor: pointer; }
details.mail-file .mail-body { margin-top: 6px; padding: var(--space-2) var(--space-3); background: var(--color-surface);
  border-left: 3px solid var(--color-divider); }
.inbox-search { display: flex; align-items: center; gap: 6px; padding: var(--space-2); border-bottom: 1px solid var(--color-divider); }
.inbox-search input { flex: 1 1 auto; min-width: 0; }
.inbox-guide { max-width: 640px; }
.inbox-guide ol { padding-left: 1.2em; }
.inbox-guide li { margin-bottom: 8px; }
@media (max-width: 1100px) {
  .inbox { grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); }
  .inbox-views { display: flex; flex-wrap: wrap; grid-column: 1 / -1; gap: 2px; padding: var(--space-2); border-right: 0;
    border-bottom: 1px solid var(--color-divider); }
  .inbox-views > a { padding: 4px 10px; }
  .inbox-cats { flex-direction: row; flex-wrap: wrap; gap: 10px; width: 100%; margin: 0; padding: 4px 10px 0; border-top: 0; }
}
@media (max-width: 760px) {
  .inbox { grid-template-columns: minmax(0, 1fr); }
  .inbox-list, .inbox-thread { max-height: none; border-right: 0; }
  .inbox-thread { padding: var(--space-3); }
  .inbox.has-thread .inbox-list, .inbox.has-thread .inbox-views, .inbox:not(.has-thread) .inbox-thread { display: none; }
  .thread-back { display: inline-block; margin-bottom: var(--space-2); }
  .suggest-table, .suggest-table tbody, .suggest-table tr, .suggest-table td { display: block; }
  .sg-actions { width: auto; }
}
@media (max-width: 760px) { .inbox-head .sub { display: none; } }

/* Double check (14/10): the checker's list and the guides for new users */
.checks-table td { vertical-align: top; }
.checks-table tr.removes td:first-child { border-left: 3px solid var(--bad-fg); }
.check-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.check-changes { margin: 4px 0; padding-left: 1.2em; }
.check-evidence { margin: 6px 0; padding: 6px 10px; border-left: 3px solid var(--info-fg); background: var(--info-bg); }
.check-evidence > div { margin-top: 2px; }
.check-quote { margin: 0 0 4px; font-style: italic; white-space: pre-wrap; }
.check-actions { width: 240px; }
.check-actions form, .check-more { margin: 0 0 6px; }
.check-more > summary { cursor: pointer; font-size: 13px; }
.check-history { margin: 4px 0; } .check-history > summary { cursor: pointer; }
.check-history ol { margin: 4px 0; padding-left: 1.4em; } .check-history ul { margin: 2px 0; padding-left: 1.2em; }
.tabs b.flag { background: var(--bad-bg); color: var(--bad-fg); }
.guide > summary { cursor: pointer; }
.guide-steps { padding-left: 1.2em; }
.guide-steps li { margin-bottom: 6px; }
.guide-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 var(--space-3); }
.guide-strip span { flex: 1 1 320px; }
@media (max-width: 760px) { .check-actions { width: auto; } .checks-table tr, .checks-table td { display: block; } }


/* What failed to send (services/sent_mail.py): the deadline page's callout and the dashboard line */
.callout.tone-bad { font-weight: 400; border-radius: var(--radius-md); }
.callout.tone-bad ul.list { margin: 4px 0; }
.sent-log td { vertical-align: top; }

/* User manual (help/manual.html) and its tab above Feedback */
.manual-tab { position: fixed; right: 0; bottom: 186px; transform: rotate(-90deg); transform-origin: bottom right; padding: 4px 12px; background: var(--color-neutral-700, #444); color: #fff; text-decoration: none; font-size: .8rem; z-index: 20; }
.manual-tab:hover, .manual-tab:focus-visible { background: var(--color-neutral-800, #222); color: #fff; }
.manual { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--space-5, 24px); align-items: start; }
.manual-toc { position: sticky; top: 72px; font-size: 14px; }
.manual-toc ol { margin: 0; padding-left: 1.2em; }
.manual-toc li { margin: 4px 0; }
.manual-body { max-width: 900px; }
.manual-body section { scroll-margin-top: 72px; margin-bottom: 40px; }
.manual-body h2 { border-bottom: 1px solid var(--color-neutral-300, #ccc); padding-bottom: 4px; }
.manual-body figure { margin: 12px 0 18px; }
.manual-body figure img { max-width: 100%; height: auto; border: 1px solid var(--color-neutral-300, #ccc); border-radius: 6px; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.manual-body figcaption { font-size: 13px; color: var(--color-neutral-700, #555); margin-top: 4px; }
.manual-body .tip { border-left: 3px solid var(--color-accent-700); padding: 6px 12px; background: var(--color-neutral-50, #fafafa); }
.manual-body kbd { font-family: var(--font-mono, monospace); border: 1px solid #bbb; border-radius: 3px; padding: 0 4px; font-size: 12px; }
@media (max-width: 860px) { .manual { grid-template-columns: 1fr; } .manual-toc { position: static; } }
/* The day in words under a date box (static/js/dates.js); it is also where a date that cannot be is said (is-error), except in a filter bar (hidden below): there the browser's own message says it */
.date-words { display: block; font-size: 12px; color: color-mix(in srgb, var(--color-text) 68%, transparent); min-height: 1em; }
.date-words:empty { display: none; }
.filterbar .date-words, .ff-date .date-words { display: none; }
.ff-date .ff-bad { grid-column: 1 / -1; font-size: 12px; color: #b3261e; }
/* Date boxes (static/js/dates.js): the text box, a calendar button and the native picker it opens (kept out of sight, never submitted) */
.dd-wrap { position: relative; display: flex; min-width: 0; }
/* width auto, not 100%: in a box that shrinks to its content (an inline label) 100% of nothing is nothing; size=12 gives it a width of its own */
.dd-wrap input.dd { flex: 1 1 auto; min-width: 0; width: auto; padding-right: 34px; font-variant-numeric: tabular-nums; }
/* a bare <label>From <input></label> in a row of controls keeps its box beside the words, as the browser's own control was */
label:not(.field):not(.ff) > .dd-wrap { display: inline-flex; vertical-align: middle; }
/* inside .main the general input rule (five :not()s) is more specific than the rules above: say the same again, as strongly */
.main .dd-wrap input.dd:not([type=hidden]):not([type=file]):not([type=radio]):not([type=checkbox]) { padding-right: 34px; }
.main button.dd-cal, button.dd-cal { position: absolute; right: 1px; top: 1px; bottom: 1px; width: 32px; min-height: 0; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 0 4px 4px 0; background: transparent; color: var(--color-neutral-700, #555); cursor: pointer; }
button.dd-cal:hover:not(:disabled) { background: var(--color-neutral-100, #eee); }
button.dd-cal:disabled { opacity: .4; cursor: default; }
.dd-picker { position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; opacity: 0; pointer-events: none; border: 0; padding: 0; }
input.dd[aria-invalid="true"], .main input.dd[aria-invalid="true"]:not([type=hidden]):not([type=file]):not([type=radio]):not([type=checkbox]) { border-color: #b3261e; }
.date-words.is-error { color: #b3261e; }
/* For you (notices, services/notify.py) and the admins' warning when background jobs stop (services/system_alerts.py) */
.for-you { color: inherit; text-decoration: none; font-size: 14px; padding: 4px 8px; white-space: nowrap; }
.for-you.has { font-weight: 600; }
.sys-alert { border-left: 4px solid var(--bad-fg, #84261f); background: var(--bad-bg, #f7e0dd); }
.sys-alert { display: flex; align-items: flex-start; gap: .75rem; }
.sys-alert-text { flex: 1; }
.sys-alert-hide { margin: 0; }
.sys-alert-x { background: none; border: 0; padding: 0 .25rem; font-size: 1.4rem; line-height: 1; cursor: pointer;
  color: var(--bad-fg, #84261f); }
.sys-alert-x:hover, .sys-alert-x:focus-visible { background: rgba(0, 0, 0, .06); border-radius: 4px; }
.notices .notice-row { display: flex; gap: 12px; align-items: baseline; justify-content: space-between; }
.notices .notice-row.unread { background: color-mix(in srgb, var(--color-text) 4%, transparent); }
.linklike { background: none; border: 0; padding: 0; color: inherit; text-align: left; cursor: pointer; font: inherit; }
.linklike:hover { text-decoration: underline; }

/* How a matter's deadlines work (Add deadline, 16/10) */
.rule-notes summary { cursor: pointer; font-weight: 600; }
.rule-notes-list dt { font-weight: 600; margin-top: .6rem; }
.rule-notes-list dd { margin: .15rem 0 0; color: var(--muted, #555); max-width: 70ch; }
.rule-gist { max-width: 60ch; margin-top: .15rem; }
.rule-form { max-width: 46rem; }
.rule-form input[inputmode="numeric"] { max-width: 7rem; }
.rule-form select { max-width: 18rem; }
.rule-form input[type="date"], .rule-form .dd-wrap { max-width: 14rem; }
/* Fast-track matters (16/10) */
.sc.fast-track { background: var(--accent-soft, #e6f0ff); color: var(--accent, #1d4ed8); border: 1px solid currentColor; }
.office-expect li.overdue { border-left: 3px solid var(--danger, #b91c1c); padding-left: .5rem; }
tr.overdue td:first-child { box-shadow: inset 3px 0 0 var(--danger, #b91c1c); }

/* Right or supporting filing (16/10): each choice with what it means */
.role-choices .role-choice { display: block; margin: .4rem 0; }
.role-choices .role-choice span { display: block; margin-left: 1.6rem; max-width: 60ch; }

/* Admin > Modules and access: presets (16/10) */
.preset-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--space-3, .75rem); }
.preset-card { border: 1px solid var(--color-border, #ddd); border-radius: 6px; padding: .75rem; display: flex; flex-direction: column; gap: .4rem; }
.preset-card.is-current { border-color: var(--color-accent); }
.preset-card p { flex: 1; margin: 0; }

/* a wide table scrolls inside its panel, never the page (Admin > Modules: one column per module; 16/10 audit) */
.table-wrap { overflow-x: auto; }

/* To-dos (16/10): web/templates/todos/, _todos.html */
ul.plain { list-style: none; padding: 0; margin: 0; }
ul.plain > li { padding: 3px 0; }
.prewrap { white-space: pre-wrap; }
ul.todos > li.todo-row form.inline { margin-right: 6px; }
ul.todos > li.todo-row.late { border-left: 3px solid var(--bad-fg); padding-left: 8px; }
ul.todos > li.todo-row.done strong { text-decoration: line-through; color: color-mix(in srgb, var(--color-text) 60%, transparent); }
ul.todos > li.todo-row .danger { color: var(--bad-fg); font-weight: 600; }

/* Dashboard panels fold (16/10): the Fold all bar spans the grid, a folded panel does not stretch to its neighbour,
   the heading's link sits at its right end */
.dash-grid[data-fold-group] { align-items: start; }
.dash-grid > .fold-tools { grid-column: 1 / -1; margin: 0; }
[data-fold-group^="dash"] .fold-head > a.small { margin-left: auto; font-weight: 400; }

/* Docketing mail, Side by side (intake/side.html): the attached file beside what was found in it */
.side-split{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:1rem;align-items:start}
.side-file{position:sticky;top:.5rem}
.side-text{max-height:78vh;overflow:auto;white-space:pre-wrap}
.side-tabs{display:flex;flex-wrap:wrap;gap:.25rem .75rem;margin-bottom:.5rem}
.side-tabs a.on{font-weight:600;text-decoration:none;border-bottom:2px solid currentColor}
.sg-src{margin-top:.25rem}
@media (max-width:900px){.side-split{grid-template-columns:1fr}.side-file{position:static}.side-pdf{height:60vh}}

/* pdf.js viewer (static/js/pdfview.js, _pdfview.html): pages drawn on canvases with an invisible, selectable text
   layer over each, the found sentences marked (ported from PFC3's Document Review) */
.pdfv{display:flex;flex-direction:column;gap:.4rem}
.pdfv-bar{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap}
.pdfv-pages{height:74vh;overflow:auto;background:#525659;padding:.5rem;border-radius:4px}
.pdfv-page{position:relative;margin:0 auto .5rem;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.35)}
.pdfv-page canvas{display:block}
.pdfv-text{position:absolute;inset:0;overflow:hidden;line-height:1;text-align:initial;text-size-adjust:none;forced-color-adjust:none;transform-origin:0 0;caret-color:CanvasText}
.pdfv-text span,.pdfv-text br{color:transparent;position:absolute;white-space:pre;cursor:text;transform-origin:0% 0%}
.pdfv-text ::selection{background:rgba(0,90,255,.28)}
.pdfv-text br::selection{color:transparent}
.pdfv-text .endOfContent{position:absolute;inset:100% 0 0;z-index:-1;cursor:default;user-select:none}
.pdfv-text span.pdfv-hit{background:rgba(255,200,0,.42);border-radius:2px}
@media (max-width:900px){.pdfv-pages{height:60vh}}

/* The front page (sign-in with the gist of the system; Govind 20/10). Grid areas put the sign-in beside the story on a wide screen and
   straight under the headline on a phone. Text sits on solid grounds; only the paper behind carries the faint blueprint grid. */
body.landing {
  background-color: var(--color-bg);
  background-image: linear-gradient(var(--color-divider) 1px, transparent 1px), linear-gradient(90deg, var(--color-divider) 1px, transparent 1px);
  background-size: 32px 32px; background-position: -1px -1px;
}
.landing-grid {
  max-width: 1180px; margin: 0 auto; padding: var(--space-8) var(--space-6) 56px; box-sizing: border-box;
  display: grid; gap: var(--space-6) 56px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "hero" "signin" "story";
}
.l-hero { grid-area: hero; padding-top: var(--space-4); }
.l-signin { grid-area: signin; background: #fff; padding: var(--space-6); align-self: start; }
.l-story { grid-area: story; min-width: 0; }
.l-brand { display: flex; align-items: center; gap: 10px; margin: 0 0 var(--space-6); font-weight: 600; font-size: 16px; letter-spacing: .01em; }
.l-brand img { display: block; border-radius: 6px; }
.l-hero h1 { font-size: clamp(30px, 5.2vw, 46px); line-height: 1.1; margin: 0 0 var(--space-4); letter-spacing: -.01em; max-width: 16ch; }
.l-lead { font-size: 17px; line-height: 1.55; margin: 0; max-width: 56ch; color: var(--color-neutral-800); }
.l-signin-title { font-size: 22px; margin: 0 0 var(--space-4); }
.l-signin .btn-primary { width: 100%; min-height: 40px; }
.l-account { margin: var(--space-4) 0 0; padding-top: var(--space-3); border-top: 1px solid var(--color-divider); }
.l-h2 { font-size: 22px; margin: var(--space-8) 0 var(--space-4); }
.l-story > section:first-child .l-h2 { margin-top: 0; }

.l-steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: var(--space-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.l-steps li { counter-increment: step; position: relative; background: #fff; border: 1px solid var(--color-divider); padding: var(--space-4) var(--space-4) var(--space-4) 52px; }
.l-steps li::before {
  content: counter(step); position: absolute; left: var(--space-4); top: var(--space-4); width: 26px; height: 26px; box-sizing: border-box;
  border: 1px solid var(--color-accent-700); color: var(--color-accent-700); font-weight: 600; font-size: 13px; line-height: 24px; text-align: center;
}
.l-steps h3, .l-tiles h3 { font-size: 15px; margin: 0 0 4px; }
.l-steps p, .l-tiles p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--color-neutral-800); }

.l-example { margin: var(--space-6) 0 0; background: var(--color-accent-100); border: 1px dashed var(--color-accent-500); padding: var(--space-4); display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); position: relative; }
.l-tag { position: absolute; top: -10px; left: var(--space-4); margin: 0; padding: 0 8px; background: var(--color-bg); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--color-accent-800); }
.l-label { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--color-accent-800); margin-bottom: 6px; }
.l-mail, .l-suggest { background: #fff; border: 1px solid var(--color-divider); padding: var(--space-3) var(--space-4); font-size: 14px; line-height: 1.5; }
.l-mail q { quotes: none; display: block; border-left: 3px solid var(--color-accent-400); padding-left: 10px; background: color-mix(in srgb, var(--color-accent-300) 35%, transparent); }
.l-suggest dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 0; }
.l-suggest dt { color: var(--color-neutral-700); } .l-suggest dd { margin: 0; font-weight: 500; }
.l-suggest dt:first-child { grid-column: 1 / -1; font-weight: 600; color: var(--color-text); }
.l-suggest dt:first-child + dd { grid-column: 1 / -1; font-size: 18px; margin-bottom: 4px; }
.l-buttons { display: flex; gap: 8px; margin: var(--space-3) 0 0; }
.l-fake { display: inline-block; padding: 5px 14px; border: 1px solid var(--color-neutral-400); font-size: 13px; font-weight: 500; background: #fff; }
.l-fake-primary { background: var(--color-accent-700); border-color: var(--color-accent-700); color: #fff; }

.l-tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.l-tiles li { background: #fff; border: 1px solid var(--color-divider); border-top: 3px solid var(--color-accent-600); padding: var(--space-3) var(--space-4) var(--space-4); }
.l-also { margin: var(--space-4) 0 0; font-size: 14px; line-height: 1.5; }
.l-trust { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.l-trust li { background: #fff; border: 1px solid var(--color-divider); padding: var(--space-4); font-size: 14px; line-height: 1.5; }
.l-trust strong { display: block; margin-bottom: 4px; font-size: 15px; }
.l-foot { margin: var(--space-8) 0 0; padding-top: var(--space-4); border-top: 1px solid var(--color-divider); }

@media (min-width: 1000px) {
  .landing-grid { grid-template-columns: minmax(0, 1fr) 400px; grid-template-areas: "hero signin" "story signin"; align-content: start; padding-top: 56px; }
  .l-signin { position: sticky; top: var(--space-8); margin-top: 8px; }
}
@media (max-width: 760px) {
  .landing-grid { padding: var(--space-4) var(--space-4) 40px; }
  .l-steps, .l-example, .l-trust, .l-tiles { grid-template-columns: minmax(0, 1fr); }
  .l-lead { font-size: 16px; }
}
@media print { body.landing { background: none; } }

/* Where a suggestion comes from (My work > Suggestions, Govind 21/10): one colour per origin, on each row and its tab. */
.src-chip { display: inline-block; margin-bottom: 4px; padding: 1px 7px; border: 1px solid; border-radius: 2px;
  font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.src-dot { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; vertical-align: 1px; }
.src-chip.src-rules { color: var(--color-accent-800); background: var(--color-accent-100); border-color: var(--color-accent-400); }
.src-dot.src-rules { background: var(--color-accent-600); }
.src-chip.src-mail { color: #6b4300; background: #fff4dc; border-color: #e0b35a; }
.src-dot.src-mail { background: #c98a12; }
.src-chip.src-office { color: #1f5a37; background: #e8f5ec; border-color: #8cc5a0; }
.src-dot.src-office { background: #3d8f5c; }
.src-chip.src-request, .src-chip.src-assistant, .src-chip.src-other { color: var(--color-neutral-800);
  background: var(--color-neutral-100); border-color: var(--color-neutral-400); }
.src-dot.src-request, .src-dot.src-assistant, .src-dot.src-other { background: var(--color-neutral-600); }
.tabs.tabs-sub { margin-top: -6px; font-size: 13px; }
.dismiss-note { min-width: 14rem; max-width: 100%; margin: 0 4px; }  /* a Critical deadline is dismissed with words */

/* Tools (21/10): a tab beside Manual and Feedback opens a drawer over the page; the tools are drawn by the server. */
.tools-tab { position: fixed; right: 0; bottom: 266px; transform: rotate(-90deg); transform-origin: bottom right; padding: 4px 12px; background: var(--color-neutral-600, #555); color: #fff; text-decoration: none; font-size: .8rem; z-index: 20; }
.tools-tab:hover, .tools-tab:focus-visible, .tools-tab[aria-expanded=true] { background: var(--color-neutral-800, #222); color: #fff; }
.tools-drawer { position: fixed; top: 58px; right: 28px; bottom: 0; width: 400px; max-width: calc(100vw - 28px); z-index: 26; overflow-y: auto;
  background: var(--color-bg); border-left: 1px solid var(--color-divider); box-shadow: var(--shadow-md); padding: 10px 14px 24px; }
.tools-drawer[hidden] { display: none; }
@media (max-width: 1100px) { .tools-drawer { top: 0; z-index: 50; } }
@media (max-width: 700px) { .tools-drawer { right: 0; width: 100vw; max-width: 100vw; } }
.tools-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tools-head h2 { margin: 0; font-size: 20px; }
.tools-page { max-width: 560px; }
.tools-page [data-tools-close] { display: none; }
details.tool { border-top: 1px solid var(--color-divider); padding: 6px 0; }
details.tool > summary { cursor: pointer; font-family: var(--font-heading); font-weight: 600; padding: 4px 0; }
.tool-form { display: grid; gap: 6px; margin: 6px 0; }
.tool-form .field { margin: 0; }
.tool-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: end; }
.tool-num { width: 7rem; }
.tool-split { border-top: 1px dashed var(--color-divider); padding-top: 6px; margin-top: 10px; }
.tool-answer { background: var(--color-neutral-100, #f4f4f4); padding: 6px 10px; margin: 4px 0; }
.tool-answer p { margin: 2px 0; }
.tool-clocks td { padding: 3px 6px; }
.tool-todos li { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.tools-drawer .linklike, .tools-page .linklike { color: var(--color-accent-700); text-decoration: underline; }
.quick-card { border-left: 3px solid var(--color-accent-700); padding: 4px 10px; margin: 8px 0; background: var(--color-neutral-100, #f4f4f4); }
.quick-card p { margin: 2px 0; }
.quick-found li { padding: 2px 0; }
details.quick-close > summary { cursor: pointer; font-size: 14px; }
.tool-links li { padding: 3px 0; }

/* The Videos tab (video manual, Govind 21/10): above Tools */
.videos-tab { position: fixed; right: 0; bottom: 336px; transform: rotate(-90deg); transform-origin: bottom right; padding: 4px 12px; background: #8a5a12; color: #fff; text-decoration: none; font-size: .8rem; z-index: 20; }
.videos-tab:hover, .videos-tab:focus-visible { background: #6b440c; color: #fff; }
.manual-watch { margin: -.2rem 0 .6rem; font-size: .9rem; }
@media print { .videos-tab, .manual-watch { display: none; } }
.stale-page { max-width: 640px; margin: 48px auto; padding: 0 16px; }
.stale-note { position: sticky; top: 0; z-index: 30; }
.copy-line { display: block; padding: 4px 8px; margin: 4px 0; background: var(--color-neutral-100, #f4f4f4); user-select: all; overflow-wrap: anywhere; }