/* Regwise v2 — app layout. Components live in components.css, values in tokens.css. */

.app { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; background: linear-gradient(90deg, var(--surface-2) 0 231px, var(--line) 231px 232px, transparent 232px); }

/* ---------- Sidebar ---------- */
.side {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  background: var(--surface-2); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; padding: var(--space-4) var(--space-3);
}
.mark { display: flex; gap: var(--space-2); align-items: center; padding: var(--space-1) var(--space-2) var(--space-4); }
.mark-glyph { width: 28px; height: 28px; flex: none; }
.mark-glyph .g1 { fill: var(--brand); }
.mark-glyph .g2 { fill: var(--change); }
.mark b { display: block; font-size: 15px; line-height: 20px; }
.mark small { display: block; font-size: 12px; line-height: 16px; color: var(--ink-muted); }

.nav { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.nav a {
  display: flex; align-items: center; gap: var(--space-2);
  padding: 7px var(--space-2); border-radius: var(--radius-md);
  color: var(--ink); text-decoration: none; font-weight: 500;
}
.nav a svg { width: 18px; height: 18px; color: var(--ink-icon); flex: none; }
.nav a:hover { background: var(--surface-1); }
.nav a[aria-current="page"] { background: var(--surface-1); box-shadow: inset 3px 0 0 var(--brand); }
.nav a[aria-current="page"] svg { color: var(--brand); }
.nav .count { margin-left: auto; min-width: 20px; padding: 0 6px; border-radius: var(--radius-pill); font: 600 12px/20px var(--font-sans); text-align: center; background: var(--surface-1); color: var(--ink-muted); }
.nav .count.is-change { background: var(--change-soft); color: var(--change); }
.nav .count.is-danger { background: var(--danger-soft); color: var(--danger); }

.side-foot { margin-top: auto; display: grid; gap: var(--space-2); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.side-foot .field { gap: 2px; }
.side-foot .row-inline { display: flex; gap: var(--space-1); flex-wrap: wrap; }

/* ---------- Main ---------- */
.main { min-width: 0; padding: var(--space-5) var(--space-6) var(--space-7); }
.page-head { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end; justify-content: space-between; margin-bottom: var(--space-5); max-width: 1240px; }
.page-head h1 { margin: 0; font-size: 20px; line-height: 28px; font-weight: 600; }
.page-head p { margin: var(--space-1) 0 0; color: var(--ink-muted); }
.crumb { font-size: 13px; color: var(--ink-muted); margin-bottom: var(--space-1); }
.crumb a { color: var(--ink-muted); }
.view { max-width: 1240px; display: grid; gap: var(--space-5); }

.demo-banner { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--ink-muted); }

/* ---------- Today ---------- */
.headline { font-size: 28px; line-height: 36px; font-weight: 600; letter-spacing: -0.01em; margin: 0; max-width: 30em; }
.headline em { font-style: normal; color: var(--change); }
.headline .late { color: var(--danger); }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
.stat { padding: var(--space-3) var(--space-4); }
.stat b { display: block; font: 500 24px/28px var(--font-mono); }
.stat span { font-size: 13px; color: var(--ink-muted); }
.stat.is-danger b { color: var(--danger); }
.stat.is-change b { color: var(--change); }
.today-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.todo-why { font-size: 13px; line-height: 20px; color: var(--ink-muted); margin-top: 2px; }
.todo-icon { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.todo-icon.is-danger { color: var(--danger); }
.todo-icon.is-change { color: var(--change); }
.todo-icon.is-info { color: var(--info); }

.agenda { list-style: none; margin: 0; padding: var(--space-2) var(--space-4) var(--space-4); }
.agenda li { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--space-3); padding: var(--space-2) 0; border-top: 1px solid var(--line); }
.agenda li:first-child { border-top: 0; }
.agenda .d { font: 500 13px/20px var(--font-mono); color: var(--ink-muted); }
.agenda .d b { display: block; font-size: 15px; color: var(--ink); }
.agenda .what { font-size: 13px; line-height: 20px; }
.agenda .what strong { font-weight: 600; }

/* ---------- Inbox ---------- */
.split { display: grid; grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.split > .card:first-child { position: sticky; top: var(--space-5); max-height: calc(100vh - 48px); overflow-y: auto; }
.filters { display: flex; flex-wrap: wrap; gap: var(--space-1); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); }
.ev-title { font-weight: 600; font-size: 14px; line-height: 20px; }
.detail { display: grid; gap: var(--space-5); min-width: 0; }
.detail-head h2 { margin: var(--space-2) 0 var(--space-1); font-size: 24px; line-height: 32px; font-weight: 600; }
.detail-head .en { font-size: 13px; color: var(--ink-muted); }
.detail-head .chips { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.summary { font-size: 15px; line-height: 24px; margin: var(--space-3) 0 0; max-width: 46em; }

.change { padding: var(--space-4); border-top: 1px solid var(--line); display: grid; gap: var(--space-2); }
.change:first-of-type { border-top: 0; }
.change-head { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.change-head .penalty { margin-left: auto; }
.change p { margin: 0; }
.change > .btn { justify-self: start; }
details.raw summary { cursor: pointer; font-size: 13px; color: var(--brand); width: max-content; }
details.raw[open] summary { margin-bottom: var(--space-2); }

.impact { padding: var(--space-4); border-top: 1px solid var(--line); display: grid; gap: var(--space-3); }
.impact:first-of-type { border-top: 0; }
.impact-top { display: flex; gap: var(--space-3); align-items: flex-start; flex-wrap: wrap; }
.impact-top .row-main { min-width: 220px; }
.impact-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.why { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); align-items: center; font-size: 13px; color: var(--ink-muted); }
.suggest { margin: 0; padding-left: 20px; font-size: 13px; line-height: 20px; }
.suggest li + li { margin-top: 2px; }
.decided { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; font-size: 13px; }
.reason-box { display: grid; gap: var(--space-2); }
.section-title { display: flex; align-items: baseline; gap: var(--space-2); justify-content: space-between; flex-wrap: wrap; margin: 0 0 var(--space-3); }
.section-title h3 { margin: 0; font-size: 20px; line-height: 28px; font-weight: 600; }
.section-title p { margin: 0; font-size: 13px; color: var(--ink-muted); }
.log { list-style: none; margin: 0; padding: var(--space-2) var(--space-4) var(--space-3); font-size: 13px; line-height: 20px; }
.log li { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: var(--space-2); padding: 6px 0; border-top: 1px solid var(--line); }
.log li:first-child { border-top: 0; }
.log time { font-family: var(--font-mono); color: var(--ink-muted); }
.callout { display: flex; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--change-soft); color: var(--ink); font-size: 13px; line-height: 20px; }
.callout svg { width: 18px; height: 18px; color: var(--change); flex: none; margin-top: 1px; }
.callout.is-danger { background: var(--danger-soft); }
.callout.is-danger svg { color: var(--danger); }
.callout.is-info { background: var(--info-soft); }
.callout.is-info svg { color: var(--info); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.form-grid .span2 { grid-column: 1 / -1; }

/* ---------- Tasks board ---------- */
.board { display: grid; grid-template-columns: repeat(4, minmax(220px, 1fr)); gap: var(--space-3); align-items: start; overflow-x: auto; padding-bottom: var(--space-2); }
.col { background: var(--surface-2); border-radius: var(--radius-md); padding: var(--space-2); display: grid; gap: var(--space-2); min-width: 0; }
.col-head { display: flex; justify-content: space-between; align-items: center; padding: var(--space-1) var(--space-2); font: 600 13px/20px var(--font-sans); }
.col-head span { color: var(--ink-muted); font-family: var(--font-mono); }
.tcard { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-3); display: grid; gap: var(--space-2); cursor: pointer; text-align: left; font: inherit; color: inherit; width: 100%; }
.tcard:hover { border-color: var(--line-strong); }
.tcard.is-late { box-shadow: inset 0 3px 0 var(--danger); }
.tcard .tt { font-weight: 600; line-height: 20px; }
.tcard .te { font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.tcard .tm { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.progress { height: 4px; border-radius: var(--radius-pill); background: var(--line); overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--brand); }

/* ---------- Tabs ---------- */
.tabs { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--line); }
.tabs a { padding: var(--space-2) var(--space-3); color: var(--ink-muted); text-decoration: none; font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--brand); }

.cov-status { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; font-size: 13px; white-space: nowrap; }
.cov-status svg { width: 16px; height: 16px; }
.cov-ok { color: var(--brand); }
.cov-na { color: var(--ink-muted); }
.cov-miss { color: var(--danger); }

/* ---------- Trace ---------- */
.trace-wrap { position: relative; }
.trace { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr) minmax(0, 1.1fr); gap: 72px; position: relative; z-index: 1; }
.trace-col h3 { margin: 0 0 var(--space-2); font: 600 12px/16px var(--font-sans); letter-spacing: 0.02em; color: var(--ink-muted); }
.trace-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.node { width: 100%; text-align: left; display: flex; gap: var(--space-2); align-items: center; padding: 6px var(--space-2); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-1); color: var(--ink); font: 500 13px/18px var(--font-sans); cursor: pointer; }
.node .ref { border: 0; padding: 0; background: none; }
.node .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--change); flex: none; margin-left: auto; }
.trace.has-focus .node { opacity: 0.38; }
.trace.has-focus .node.is-on { opacity: 1; border-color: var(--brand); }
.trace.has-focus .node.is-focus { opacity: 1; background: var(--brand-soft); border-color: var(--brand); }
.trace-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; overflow: visible; }
.trace-svg path { fill: none; stroke: var(--brand); stroke-width: 1.5; opacity: 0.7; }
.trace-svg path.is-change { stroke: var(--change); stroke-dasharray: 4 3; }

.trace-layout { grid-template-columns: minmax(0, 1fr) 400px; align-items: start; }
.trace-layout .trace { gap: 56px; }
.trace-detail { position: sticky; top: var(--space-5); max-height: calc(100vh - 48px); overflow-y: auto; }
.td-body { padding: var(--space-4); display: grid; gap: var(--space-4); }
.td-body h3 { margin: 0; font-size: 17px; line-height: 24px; font-weight: 600; }
.td-section { display: grid; gap: 6px; }
.td-section .tcard { box-shadow: none; }
.td-link { display: flex; gap: var(--space-2); align-items: flex-start; padding: 6px var(--space-2); border: 1px solid var(--line); border-radius: var(--radius-md); text-decoration: none; color: var(--ink); font-size: 13px; line-height: 18px; }
.td-link:hover { background: var(--surface-2); border-color: var(--line-strong); }
.clause-scroll { max-height: 360px; overflow-y: auto; font-size: 14px; line-height: 23px; }
.src-dl { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 2px var(--space-2); margin: 0; font-size: 13px; line-height: 20px; }
.src-dl dt { color: var(--ink-muted); }
.src-dl dd { margin: 0; overflow-wrap: anywhere; }

/* ---------- Sources ---------- */
.src-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--space-3); }
.src { display: grid; gap: var(--space-2); }
.src h3 { margin: 0; font-size: 15px; line-height: 22px; }
.src dl { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 2px var(--space-2); margin: 0; font-size: 13px; line-height: 20px; }
.src dt { color: var(--ink-muted); }
.src dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

.legend { display: flex; flex-wrap: wrap; gap: var(--space-4); font-size: 13px; color: var(--ink-muted); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .today-grid, .split { grid-template-columns: minmax(0, 1fr); }
  .split > .card:first-child { position: static; max-height: 420px; }
  .trace-layout { grid-template-columns: minmax(0, 1fr); }
  .trace-detail { position: static; max-height: none; order: -1; scroll-margin-top: 120px; }
  .trace { gap: 40px; }
}
@media (max-width: 860px) {
  .app { grid-template-columns: minmax(0, 1fr); background: none; }
  .side { position: sticky; top: 0; z-index: 30; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); border-right: 0; border-bottom: 1px solid var(--line); }
  .mark { padding: 0; }
  .mark small { display: none; }
  .nav { order: 3; width: 100%; display: flex; overflow-x: auto; gap: var(--space-1); padding-bottom: 2px; }
  .nav a { white-space: nowrap; padding: 6px var(--space-2); }
  .nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--brand); }
  .side-foot { order: 2; margin: 0 0 0 auto; border: 0; padding: 0; display: flex; gap: var(--space-1); }
  .side-foot .field > span, .side-foot .hide-sm { display: none; }
  .main { padding: var(--space-4) var(--space-4) var(--space-7); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .headline { font-size: 22px; line-height: 30px; }
  .board { grid-template-columns: minmax(0, 1fr); overflow: visible; }
  .trace { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .trace-svg { display: none; }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .track { grid-auto-flow: row; grid-auto-columns: auto; gap: var(--space-2); }
  .track li { padding: 0 0 0 22px; }
  .track li::before { display: none; }
  .track li::after { top: 4px; }
}

/* Trace: let long clause references wrap inside their column */
.trace-col { min-width: 0; }
.node { min-width: 0; }
.node .ref { white-space: normal; text-align: left; }
.td-link .ref { white-space: normal; }

pre.email { margin: 0; padding: var(--space-3); background: var(--surface-2); border-radius: var(--radius-sm); font: 400 13px/20px var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 320px; overflow-y: auto; }

/* Impact map (Trace → one change against the whole policy register) */
.imap-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.imap-head { display: flex; gap: var(--space-5); justify-content: space-between; align-items: center; flex-wrap: wrap; }
.imap-title { display: grid; gap: 2px; min-width: 0; max-width: 620px; font-size: 13px; line-height: 18px; }
.imap-title b { font: 600 18px/24px var(--font-sans); color: var(--ink); }
.imap-stats { display: flex; gap: var(--space-5); flex-wrap: wrap; }
.imap-stat { display: grid; gap: 2px; }
.imap-stat b { font: 600 30px/34px var(--font-sans); color: var(--ink); }
.imap-stat b small { font: 500 15px/20px var(--font-sans); color: var(--ink-muted); }
.imap-stat span { font-size: 13px; line-height: 16px; color: var(--ink-muted); }
.impact-map { position: relative; }
.impact-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; overflow: visible; }
.impact-svg path { fill: none; stroke: var(--brand); stroke-width: 1.6; opacity: 0.75; }
.impact-svg path.kw { stroke: var(--change); stroke-dasharray: 5 4; opacity: 0.85; }
.imap { display: grid; grid-template-columns: minmax(240px, 320px) minmax(300px, 430px) minmax(220px, 1fr); position: relative; z-index: 1; align-items: start; }
.imap-col { min-width: 0; }
.imap-c2 { margin-left: 110px; }
.imap-c3 { margin-left: var(--space-6); }
.imap-col h3 { margin: 0 0 var(--space-3); font: 600 12px/16px var(--font-sans); letter-spacing: 0.02em; color: var(--ink-muted); }
.imap-changes, .ptiles, .preg { list-style: none; margin: 0; padding: 0; }
.imap-changes { display: grid; gap: 8px; }
.imap-rest { margin-top: var(--space-3); }
.imap-rest summary { cursor: pointer; font-size: 13px; color: var(--ink-muted); padding: 4px 0; }
.imap-rest .imap-changes { margin-top: var(--space-2); }
.imap-change { display: grid; gap: 4px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-1); color: var(--ink); text-decoration: none; }
.imap-change:hover { border-color: var(--brand); }
.imap-change.is-sel { border-color: var(--brand); background: var(--brand-soft); }
.imap.has-sel .imap-change:not(.is-sel) { background: var(--surface-2); border-color: transparent; }
.imap-change .why { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.imap-count { margin-left: auto; font: 600 12px/16px var(--font-sans); color: var(--brand); }
.imap-plain { font-size: 13px; line-height: 18px; color: var(--ink-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ptiles { display: grid; grid-template-columns: minmax(0, 1fr); gap: 5px; }
.ptiles li { min-width: 0; }
.ptile { width: 100%; min-width: 0; overflow: hidden; display: flex; gap: 8px; align-items: baseline; text-align: left; padding: 4px 10px; border: 1px solid var(--brand); border-radius: var(--radius-md); background: var(--brand-soft); box-shadow: inset 3px 0 0 var(--brand); color: var(--ink); font: 500 13px/17px var(--font-sans); cursor: pointer; }
.ptile.is-kw { border: 1px dashed var(--change); background: var(--change-soft); box-shadow: none; }
.ptile .ref { flex: none; border: 0; padding: 0; background: none; color: var(--ink-muted); font-size: 12px; line-height: 17px; }
.ptile-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ptile-why { flex: none; max-width: 40%; font: 500 11px/17px var(--font-mono); color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.preg { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; max-width: 320px; }
.pdot { width: 100%; aspect-ratio: 1.3 / 1; display: grid; place-items: center; border: 1px solid transparent; border-radius: var(--radius-sm); background: var(--surface-2); color: var(--ink-muted); font: 500 12px/1 var(--font-mono, ui-monospace, monospace); cursor: pointer; }
.pdot:hover { border-color: var(--line-strong); }
.pdot.is-cites { background: var(--brand); color: var(--on-brand); }
.pdot.is-kw { background: var(--change-soft); border: 1px dashed var(--change); color: var(--ink); }
.imap-legend { display: grid; gap: 6px; margin-top: var(--space-4); font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.imap-legend i { display: inline-block; width: 22px; border-top: 2px solid var(--brand); vertical-align: middle; margin-right: 8px; }
.imap-legend i.kw { border-top: 2px dashed var(--change); }
@keyframes ptile-in { from { opacity: 0; transform: translateX(-10px); } }
@keyframes pdot-in { from { background: var(--surface-2); color: var(--ink-muted); border-color: transparent; } }
.imap.is-animating .ptile { animation: ptile-in 0.4s ease both; animation-delay: var(--d, 0ms); }
.imap.is-animating .pdot.is-cites, .imap.is-animating .pdot.is-kw { animation: pdot-in 0.4s ease both; animation-delay: var(--d, 0ms); }
@media (prefers-reduced-motion: reduce) { .imap.is-animating .ptile, .imap.is-animating .pdot { animation: none; } }
@media (max-width: 1400px) {
  .imap { grid-template-columns: minmax(230px, 300px) minmax(0, 1fr); }
  .imap-c2 { margin-left: 90px; }
  .imap-c3 { grid-column: 2; margin: var(--space-5) 0 0 90px; }
}
@media (max-width: 860px) {
  .imap { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .imap-c2, .imap-c3 { margin: 0; grid-column: auto; }
  .impact-svg { display: none; }
  .imap-stats { gap: var(--space-4); }
  .imap-stat b { font-size: 24px; line-height: 28px; }
}

/* Suggested changes on a policy's impact block */
.proposals { display: grid; gap: var(--space-3); margin-top: var(--space-2); padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-0); }
.proposals-head { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: baseline; font-size: 13px; }
.proposals.is-done { padding: var(--space-2) var(--space-3); }
.proposals.is-done summary { cursor: pointer; font-size: 13px; color: var(--ink-muted); }
.proposals.is-done[open] summary { margin-bottom: var(--space-3); }
.proposal { display: grid; gap: 6px; padding-top: var(--space-3); border-top: 1px solid var(--line); }
.proposals > .proposal:first-of-type, .proposals.is-done .proposal:first-of-type { border-top: 0; padding-top: 0; }
.proposal-pick { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 13px; }
.proposal-pick input { width: 16px; height: 16px; accent-color: var(--brand); }
.proposal-why { margin: 0; font-size: 13px; line-height: 19px; color: var(--ink); }
.proposal-text { margin: 0; font-size: 14px; line-height: 22px; }
.proposal-quote { margin: 0; padding: 6px 10px; border-left: 3px solid var(--line-strong); background: var(--surface-1); font-size: 13px; line-height: 19px; color: var(--ink-muted); }
.proposal-edit summary { cursor: pointer; font-size: 13px; color: var(--brand); }
.proposal-edit textarea, .proposal .field textarea { margin-top: 6px; min-height: 90px; }
.bulk-bar { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; margin-bottom: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--brand-soft); color: var(--ink); font-size: 14px; }
.bulk-bar span { flex: 1; min-width: 220px; }
.bulk-bar > svg { flex: none; width: 18px; height: 18px; color: var(--brand); }

/* Trace: three columns (law · latest changes · policies), the selected chain lit, lines between */
.tstats { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.tstats span { padding: 6px 12px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-1); font-size: 13px; color: var(--ink-muted); }
.tstats b { font: 600 18px/1 var(--font-sans); color: var(--ink); margin-right: 4px; }
.tmap { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px; }
.tmap-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; overflow: visible; }
.tcol { position: relative; z-index: 1; }
.tmap-svg path { fill: none; stroke-width: 2; }
.tmap-svg circle { stroke: none; }
.tmap-svg .cites { stroke: var(--brand); } .tmap-svg circle.cites { fill: var(--brand); }
.tmap-svg .check { stroke: var(--change); stroke-dasharray: 6 4; } .tmap-svg circle.check { fill: var(--change); }
.tmap-svg .change { stroke: var(--change); } .tmap-svg circle.change { fill: var(--change); }
.tmap-svg .relies { stroke: var(--line-strong); stroke-width: 1.4; } .tmap-svg circle.relies { fill: var(--line-strong); }
.tcol { display: flex; flex-direction: column; min-width: 0; height: clamp(420px, calc(100vh - 330px), 760px); padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-1); box-shadow: var(--shadow-raised); }
.tcol-head { display: flex; align-items: center; gap: var(--space-2); }
.tcol-head h3 { margin: 0; flex: 1; font: 600 16px/22px var(--font-sans); }
.tcol-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--brand); color: var(--on-brand); flex: none; }
.tcol-icon svg { width: 17px; height: 17px; }
.tcol-search { margin: var(--space-3) 0; }
.tcol-search .input { width: 100%; }
.tcol-list { list-style: none; margin: 0 -6px; padding: 2px 6px; display: grid; gap: 8px; align-content: start; overflow-y: auto; flex: 1; }
.tcard2 { width: 100%; display: flex; gap: var(--space-3); align-items: center; text-align: left; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-1); color: var(--ink); cursor: pointer; font: inherit; transition: background .15s, border-color .15s; }
.tcard2:hover { border-color: var(--brand); }
.tcard2-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); flex: none; }
.tcard2-icon svg { width: 17px; height: 17px; }
.tcard2-text { display: grid; gap: 2px; min-width: 0; flex: 1; }
.tcard2-text b { font: 600 14px/19px var(--font-sans); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tcard2-text small { font-size: 12px; line-height: 16px; color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tcard2-badge { flex: none; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--change-soft); color: var(--change); font: 600 12px/22px var(--font-sans); text-align: center; }
.tcard2.is-sel { border: 2px solid var(--brand); padding: 9px 11px; background: var(--brand-soft); }
.tcard2.is-on { border-color: var(--brand); }
.tcard2.is-off { background: var(--surface-2); border-color: transparent; color: var(--ink-muted); }
.tcard2.is-off .tcard2-icon { background: var(--surface-1); color: var(--ink-icon); }
.tbottom { margin-top: var(--space-5); padding: var(--space-4) var(--space-5); }
.tbottom.empty { color: var(--ink-muted); }
.tbottom-head { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; padding-bottom: var(--space-3); border-bottom: 1px solid var(--line); }
.tbottom-head b { font: 600 17px/24px var(--font-sans); }
.tbottom-actions { margin-left: auto; display: flex; gap: var(--space-2); flex-wrap: wrap; }
.tbottom-text { width: 100%; }
.tbottom-text summary { cursor: pointer; font-size: 13px; color: var(--brand); }
.tchain { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--space-3); align-items: start; margin-top: var(--space-3); }
.tchain-step { display: flex; gap: var(--space-2); min-width: 0; }
.tchain-n { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--surface-2); font: 600 12px/22px var(--font-sans); text-align: center; color: var(--ink-muted); }
.tchain-title { font: 600 12px/22px var(--font-sans); letter-spacing: .02em; color: var(--ink-muted); }
.tchain-items { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.tchip { padding: 4px 10px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-0); color: var(--ink); font-size: 13px; text-decoration: none; }
.tchip:hover { border-color: var(--brand); }
.tchain-arrow { color: var(--ink-icon); padding-top: 26px; }
.tchain-arrow svg { width: 18px; height: 18px; }
@media (max-width: 1100px) { .tmap { gap: 32px; } }
@media (max-width: 860px) {
  .tmap { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .tmap-svg { display: none; }
  .tcol { height: auto; max-height: 520px; }
  .tchain { grid-template-columns: minmax(0, 1fr); }
  .tchain-arrow { display: none; }
}

/* One page: top bar + Trace + work panel (no sidebar) */
.app { display: block; background: var(--surface-0); }
.topbar { position: sticky; top: 0; z-index: 20; display: flex; gap: var(--space-4); align-items: center; flex-wrap: wrap; padding: var(--space-3) var(--space-6); background: var(--surface-1); border-bottom: 1px solid var(--line); }
.topbar .mark { display: flex; gap: var(--space-2); align-items: center; color: var(--ink); text-decoration: none; }
.topbar .mark b { display: block; font: 600 16px/20px var(--font-sans); }
.topbar .mark small { display: block; font-size: 12px; color: var(--ink-muted); }
.topbar .mark-glyph { width: 28px; height: 28px; }
.topbar .tstats span { padding: 4px 10px; }
.topbar .tstats b { font-size: 15px; }
.topbar-actions { margin-left: auto; display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.select-sm { height: 32px; padding-top: 4px; padding-bottom: 4px; font-size: 13px; }
.main.one { padding: var(--space-5) var(--space-6) var(--space-7); max-width: 1600px; margin: 0 auto; }
.main.one .tcol { height: clamp(380px, calc(100vh - 230px), 640px); }

.work { margin-top: var(--space-5); display: grid; gap: var(--space-4); padding: var(--space-5); scroll-margin-top: 80px; }
.work.empty { color: var(--ink-muted); }
.work-head { display: flex; gap: var(--space-4); align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.work-head h2 { margin: 2px 0 0; font: 600 22px/28px var(--font-sans); display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.work-head .muted { font-size: 13px; }
.work-tags { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.work-sec { display: grid; gap: var(--space-2); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.work-sec h3 { margin: 0; font: 600 13px/18px var(--font-sans); letter-spacing: .02em; color: var(--ink-muted); }
.evrow { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.evrow:last-child { border-bottom: 0; }
.evrow > a { color: var(--ink); }
.evrow .muted { font-size: 13px; flex: 1; min-width: 160px; }
.inline-form { display: flex; gap: var(--space-2); flex: 1 1 100%; flex-wrap: wrap; }
.inline-form .input { flex: 1; min-width: 220px; }
.chg { padding: 8px 0; border-bottom: 1px solid var(--line); }
.chg-head { display: flex; gap: var(--space-2); align-items: baseline; flex-wrap: wrap; font-size: 14px; line-height: 20px; }
.chg details summary { cursor: pointer; font-size: 13px; color: var(--brand); margin-top: 4px; }

/* The policy text, paragraph by paragraph */
.doc { gap: 0; }
.para { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: var(--space-2); padding: 8px 10px; border-left: 3px solid transparent; border-radius: 4px; }
.para-n { font: 500 12px/24px var(--font-mono); color: var(--ink-icon); text-align: right; }
.para-text { margin: 0; font-size: 15px; line-height: 24px; }
.para.is-hot { background: var(--change-soft); border-left-color: var(--change); }
.para.is-changed, .para.is-added { background: var(--brand-soft); border-left-color: var(--brand); }
.para-body > .chip { margin-top: 6px; }
.para-refs { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.para-ref { font: 500 11px/18px var(--font-mono); padding: 0 6px; border: 1px solid var(--line); border-radius: 4px; color: var(--ink-muted); background: var(--surface-1); }
.para-ref.is-ai { border-style: dashed; }
.para-orig summary { cursor: pointer; font-size: 13px; color: var(--ink-muted); margin-top: 6px; }
.para-orig p { margin: 4px 0 0; font-size: 14px; line-height: 22px; color: var(--ink-muted); text-decoration: line-through; text-decoration-color: var(--line-strong); }
.para-gap { display: block; width: 100%; margin: 4px 0; padding: 6px; border: 1px dashed var(--line); border-radius: var(--radius-md); background: none; color: var(--ink-muted); font: inherit; font-size: 13px; cursor: pointer; }
.para-gap:hover { border-color: var(--brand); color: var(--ink); }

/* A suggestion, sitting under the paragraph it changes */
.sugg { margin: 4px 0 12px 44px; padding: var(--space-3) var(--space-4); border: 1px solid var(--change); border-radius: var(--radius-md); background: var(--surface-1); display: grid; gap: 8px; box-shadow: var(--shadow-raised); }
.work-sec > .sugg { margin-left: 0; }
.sugg-head { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 13px; }
.sugg-why { margin: 0; font-size: 14px; line-height: 21px; }
.sugg-text { margin: 0; font-size: 15px; line-height: 24px; }
.sugg-form { display: grid; gap: 8px; }
.sugg-form .textarea { min-height: 110px; }

.publish { background: var(--surface-0); margin: 0 calc(-1 * var(--space-5)) calc(-1 * var(--space-5)); padding: var(--space-4) var(--space-5) var(--space-5); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.publish h3 { color: var(--ink); font-size: 15px; letter-spacing: 0; }
.notice-pick { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; font-size: 14px; }
.notice-pick .select { min-width: 220px; }

.steps { margin: 0; padding-left: 20px; display: grid; gap: var(--space-3); font-size: 14px; line-height: 21px; }
.code { margin: 0; padding: var(--space-3); border-radius: var(--radius-md); background: var(--surface-2); font: 12px/18px var(--font-mono); overflow-x: auto; white-space: pre; }

@media (max-width: 860px) {
  .topbar { padding: var(--space-3) var(--space-4); gap: var(--space-2); }
  .topbar .tstats { display: none; }
  .topbar-actions { margin-left: 0; }
  .main.one { padding: var(--space-4); }
  .work { padding: var(--space-4); }
  .sugg { margin-left: 0; }
  .para { grid-template-columns: 24px minmax(0, 1fr); padding: 6px; }
  .publish { margin: 0 calc(-1 * var(--space-4)) calc(-1 * var(--space-4)); }
}
.topbar .select { width: auto; }
.main.one .view { max-width: none; }
.quiet-head { display: flex; gap: var(--space-3); align-items: center; justify-content: space-between; flex-wrap: wrap; }
.quiet { list-style: none; margin: 0; padding: 0; display: grid; }
.quiet li { display: flex; gap: var(--space-3); align-items: baseline; flex-wrap: wrap; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 13px; line-height: 19px; }
.quiet li:last-child { border-bottom: 0; }
.quiet li > span:not(.ref) { flex: 1; min-width: 200px; color: var(--ink-muted); }
.quiet li a { white-space: nowrap; }
.quiet li .ref { flex: none; }
@media (max-width: 860px) { .topbar { position: static; } }

/* A selected card opens in place, in its own column; that column widens */
.tmap.open-1 { grid-template-columns: minmax(0, 1.8fr) minmax(0, .8fr) minmax(0, .8fr); }
.tmap.open-2 { grid-template-columns: minmax(0, .8fr) minmax(0, 1.8fr) minmax(0, .8fr); }
.tmap.open-3 { grid-template-columns: minmax(0, .8fr) minmax(0, .8fr) minmax(0, 1.8fr); }
.tmap[class*="open-"] { gap: 40px; }
.main.one .tmap[class*="open-"] .tcol { height: max(560px, calc(100vh - 120px)); }
.tcard2-chev { flex: none; color: var(--ink-icon); display: grid; }
.tcard2-chev svg { width: 16px; height: 16px; transition: transform .15s; }
.tcard2[aria-expanded="true"] .tcard2-chev svg { transform: rotate(180deg); }
.tcol-list > li.is-open { display: grid; gap: 0; }
.topen { border: 2px solid var(--brand); border-top: 0; border-radius: 0 0 var(--radius-md) var(--radius-md); margin-top: -6px; padding: 6px 4px 4px; background: var(--surface-1); }
.tcol-list > li.is-open > .tcard2 { border-radius: var(--radius-md) var(--radius-md) 0 0; }
.topen .work { margin: 0; padding: var(--space-3) var(--space-3) var(--space-4); border: 0; box-shadow: none; background: transparent; gap: var(--space-3); }
.topen .work-head h2 { display: none; }
.topen .work-sec { padding-top: var(--space-3); }
.topen .para { padding: 6px 8px; grid-template-columns: 28px minmax(0, 1fr); }
.topen .para-text { font-size: 14px; line-height: 22px; }
.topen .sugg { margin-left: 36px; }
.topen .publish { margin: 0 calc(-1 * var(--space-3)) calc(-1 * var(--space-4)); padding: var(--space-3) var(--space-3) var(--space-4); }
.topen .clause-scroll { max-height: 360px; }
@media (max-width: 860px) {
  .tmap[class*="open-"] { grid-template-columns: minmax(0, 1fr); }
  .main.one .tmap[class*="open-"] .tcol { height: auto; max-height: none; }
  .main.one .tmap[class*="open-"] .tcol-list { overflow: visible; }
  .topen .sugg { margin-left: 0; }
}

.quiet-box summary { cursor: pointer; font-size: 13px; color: var(--brand); margin-top: 4px; }

/* A change's sections, each with the policies and paragraphs it reaches */
.chg .clause { margin: 8px 0 0; font-size: 14px; line-height: 22px; }
.chg-hits { display: grid; gap: 6px; margin-top: 10px; }
.chg-hits-title { font: 600 12px/16px var(--font-sans); letter-spacing: .02em; color: var(--ink-muted); }
.chg-hit { display: grid; gap: 4px; padding: 8px 10px; border: 1px solid var(--line); border-left: 3px solid var(--brand); border-radius: var(--radius-md); color: var(--ink); text-decoration: none; background: var(--surface-1); }
.chg-hit.is-check { border-left: 3px dashed var(--change); }
.chg-hit.is-quiet { border-left-color: var(--line-strong); background: var(--surface-0); }
.chg-hit:hover { border-color: var(--brand); }
.chg-hit-top { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 13px; }
.chg-hit-top .chip { margin-left: auto; }
.chg-hit-quote { font: 13px/19px var(--font-serif); color: var(--ink-muted); }
.tmap-svg .quiet { stroke: var(--line-strong); stroke-width: 1; opacity: .5; } .tmap-svg circle.quiet { fill: var(--line-strong); }

/* A suggestion: the original and the suggested wording, both in full */
.sugg-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2); }
.sugg-pair .clause { margin: 0; }
.sugg-missing { color: var(--ink-muted); font-style: italic; }
.para.is-target { outline: 2px solid var(--brand); outline-offset: 2px; }
@media (max-width: 1100px) { .sugg-pair { grid-template-columns: minmax(0, 1fr); } }
.topen .sugg-pair { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1500px) { .topen .sugg-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* Several cards open at once (one per column): the open columns share the width */
@media (min-width: 861px) {
  .tmap.open-1.open-2 { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.4fr) minmax(0, .7fr); }
  .tmap.open-1.open-3 { grid-template-columns: minmax(0, 1.4fr) minmax(0, .7fr) minmax(0, 1.4fr); }
  .tmap.open-2.open-3 { grid-template-columns: minmax(0, .6fr) minmax(0, 1.4fr) minmax(0, 1.6fr); }
  .tmap.open-1.open-2.open-3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr); }
}
/* Lines: the curves between columns sit behind them; the stubs up to each item are drawn over the column */
.tmap-svg.tmap-top { z-index: 2; }
.chg-hit-top .muted { font-size: 12px; }

/* Policy text in a suggestion is the service's own wording, not legislation: sans, not serif */
.sugg .clause.sugg-text { font-family: var(--font-sans); font-size: 14px; line-height: 22px; }

/* Download a version as Word or PDF */
.export { display: inline-flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; font-size: 13px; }
.export-row { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--line); }

/* A notice's own words: quoted, but not legislation (so not serif) */
.notice-quote { margin: 8px 0 0; padding: var(--space-2) var(--space-3); border-left: 3px solid var(--line-strong); background: var(--surface-2); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: 13px; line-height: 20px; color: var(--ink-muted); }

/* ---------- Follow-through (#/plan): staff, actions with due dates, the QIP note ---------- */
.tnav { display: flex; gap: var(--space-1); }
.tnav a { display: inline-flex; gap: var(--space-2); align-items: center; padding: 6px 12px; border-radius: var(--radius-md); color: var(--ink-muted); text-decoration: none; font: 600 14px/20px var(--font-sans); }
.tnav a:hover { background: var(--surface-2); color: var(--ink); }
.tnav a.is-on { background: var(--brand-soft); color: var(--brand); }
.plan { display: grid; gap: var(--space-5); max-width: 1240px; margin: 0 auto; }
.plan-top { display: flex; gap: var(--space-4); align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.plan-top h1 { margin: 0 0 var(--space-1); font: 600 24px/32px var(--font-sans); }
.plan-top p { margin: 0; max-width: 72ch; }
.plan-next { color: inherit; text-decoration: none; align-items: center; }
.plan-ev .card-head { align-items: flex-start; }
.plan-ev .card-head .chip { flex: none; }
.plan-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--space-5); padding: var(--space-4); }
.plan-col { display: grid; gap: var(--space-3); align-content: start; min-width: 0; }
.plan-col h4 { margin: 0; font: 600 12px/16px var(--font-sans); letter-spacing: 0.02em; color: var(--ink-muted); }
.act { display: grid; gap: var(--space-2); padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-left: 3px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface-1); scroll-margin-top: 96px; }
.act.is-late { border-left-color: var(--danger); }
.act.is-soon, .act.is-ok { border-left-color: var(--info); }
.act.is-suggested { border-left-color: var(--change); }
.act.is-done .act-head b { color: var(--ink-muted); }
.act-head { display: flex; gap: var(--space-2) var(--space-3); justify-content: space-between; align-items: flex-start; flex-wrap: wrap; }
.act-head b { font: 600 15px/22px var(--font-sans); }
.act-head .chip { flex: none; }
.act-detail { margin: 0; font-size: 14px; line-height: 21px; }
.act-btns { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.act-progress { display: flex; gap: var(--space-3); align-items: baseline; font-size: 14px; line-height: 21px; }
.act-progress > span:last-child { min-width: 0; }
.act-progress .meter { align-self: center; width: 96px; height: 6px; border-radius: var(--radius-pill); background: var(--surface-2); overflow: hidden; flex: none; }
.act-progress .meter span { display: block; height: 100%; background: var(--brand); }
.act-staff { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-2) var(--space-4); padding: var(--space-3); border-radius: var(--radius-md); background: var(--surface-2); font-size: 14px; }
.act-keep { display: grid; grid-template-columns: 160px minmax(0, 1fr) auto; gap: var(--space-2); align-items: end; padding-top: var(--space-2); border-top: 1px dashed var(--line); }
.act-meta { font-size: 13px; line-height: 20px; overflow-wrap: anywhere; }
.tstats[hidden] { display: none; }
.qip-note { display: grid; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-md); background: var(--surface-2); font-size: 14px; line-height: 21px; }
.qip-note p { margin: 0; }
.qip-note .muted { font-size: 13px; }
.plan-points { margin: 0; padding-left: 20px; display: grid; gap: var(--space-2); font-size: 14px; line-height: 21px; }
.plan-qa { display: grid; gap: var(--space-2); font-size: 14px; line-height: 21px; }
.plan-qa p { margin: 0; }
.plan-form { display: grid; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-2); }
.plan-add { justify-self: start; }
.staff-add { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(0, 0.9fr) auto; gap: var(--space-2); align-items: end; }
.staff-list { border: 1px solid var(--line); border-radius: var(--radius-md); }
.staff-list .row { align-items: center; }
@media (max-width: 1100px) { .plan-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 860px) {
  .act-keep, .staff-add { grid-template-columns: minmax(0, 1fr); }
  .plan-grid { padding: var(--space-3); }
  .act { padding: var(--space-3); }
}
/* The staff sheet: read on screen, printed for the staff room */
.sheet { max-width: 780px; margin: 0 auto; padding: var(--space-5) var(--space-6); background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--radius-lg); font-size: 15px; line-height: 23px; }
.sheet-bar { display: flex; justify-content: space-between; margin-bottom: var(--space-4); }
.sheet h1 { margin: var(--space-2) 0; font: 600 24px/32px var(--font-sans); }
.sheet h2 { margin: var(--space-5) 0 var(--space-2); font: 600 16px/24px var(--font-sans); }
.sheet h3 { margin: var(--space-3) 0 var(--space-1); font: 600 14px/20px var(--font-sans); }
.sheet ul { margin: 0; padding-left: 20px; display: grid; gap: var(--space-1); }
.sheet-para { margin: 0 0 var(--space-3); padding-left: var(--space-3); border-left: 3px solid var(--line-strong); }
.sheet-para small { color: var(--ink-muted); }
.sheet-para p { margin: 0; white-space: pre-wrap; }
.sheet-sign { width: 100%; border-collapse: collapse; margin-bottom: var(--space-3); }
.sheet-sign th, .sheet-sign td { border: 1px solid var(--line-strong); padding: 10px 8px; text-align: left; font-size: 14px; }
.sheet-sign th:nth-child(3) { width: 34%; }
@media (max-width: 860px) { .sheet { padding: var(--space-4); } }
@media print {
  .sheet-bar, #overlay, #toast { display: none !important; }
  .app, body { background: none; }
  .main.one { padding: 0; }
  .sheet { max-width: none; padding: 0; border: 0; }
}
@media (max-width: 860px) { .plan-next { flex-direction: column; align-items: flex-start; gap: var(--space-2); } }

/* ---------- Staff and training (#/staff) ---------- */
.train th { white-space: normal; min-width: 136px; vertical-align: bottom; line-height: 16px; }
.train th small, .train td small { display: block; margin-top: 2px; font: 400 12px/16px var(--font-sans); letter-spacing: 0; color: var(--ink-muted); }
.train th:first-child, .train td:first-child { min-width: 176px; }
.train td { vertical-align: middle; }
.train-cell { display: inline-flex; text-decoration: none; border-radius: var(--radius-pill); }
.train-cell:hover .chip, .train-cell:hover .train-none { box-shadow: 0 0 0 2px var(--focus); }
.train-none { padding: 1px 8px; border: 1px dashed var(--line-strong); border-radius: var(--radius-pill); font-size: 12px; line-height: 18px; color: var(--ink-muted); }
.type-row { align-items: center; flex-wrap: wrap; }
.type-add { margin: var(--space-3) var(--space-4); grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto auto; align-items: end; }
@media (max-width: 860px) { .type-add { grid-template-columns: minmax(0, 1fr); } }
.plan { grid-template-columns: minmax(0, 1fr); }
.plan > * { min-width: 0; }
.train-person { color: inherit; text-decoration: none; }
.train-person:hover b { text-decoration: underline; }
.train td small.train-gap { color: var(--danger); }
.rec-item { align-items: center; font-size: 14px; line-height: 21px; }
.rec-item .chip { flex: none; text-decoration: none; }
.rec-file { margin-top: var(--space-2); }
label.btn { cursor: pointer; }

/* The law column: each law by name, its clauses inside */
.tgroup { display: grid; gap: 8px; }
.tgroup-head { display: flex; gap: var(--space-3); align-items: center; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface-1); color: var(--ink); text-decoration: none; }
.tgroup-head:hover, .tgroup-head.is-on { border-color: var(--brand); }
.tgroup-head.is-off { color: var(--ink-muted); }
.tgroup-head .tcard2-text small { white-space: normal; }
.tgroup-head .tcard2-chev { flex: none; color: var(--ink-icon); }
.tgroup-head .tcard2-chev svg { width: 16px; height: 16px; display: block; transition: transform 0.15s; }
.tgroup.is-open > .tgroup-head .tcard2-chev svg { transform: rotate(180deg); }
.tgroup-list { list-style: none; margin: 0; padding: 0 0 0 10px; display: grid; gap: 8px; border-left: 2px solid var(--line); }
@media (prefers-reduced-motion: reduce) { .tgroup-head .tcard2-chev svg { transition: none; } }
.tpart { margin-top: var(--space-2); font: 600 12px/16px var(--font-sans); letter-spacing: 0.02em; color: var(--ink-muted); }
.taside { font-size: 13px; line-height: 20px; padding: var(--space-2) 0; }

/* A notice in full, with the passages that need something in the policies marked */
.notice-text { display: grid; gap: var(--space-2); font-size: 15px; line-height: 23px; max-width: 78ch; }
.notice-text p { margin: 0; color: var(--ink-muted); }
.notice-text p.has-mark { color: var(--ink); }
.notice-text p.is-short { font-size: 14px; line-height: 20px; }
.nmark { background: var(--change-soft); color: var(--ink); border-bottom: 2px solid var(--change); border-radius: 2px; padding: 1px 2px; text-decoration: none; cursor: pointer; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.nmark sup { margin-left: 3px; font: 600 11px/1 var(--font-sans); color: var(--change); }
.nmark:hover, .nmark:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
/* Everything it lands in has been reviewed: still marked, no longer asking for attention */
.nmark.is-done { background: var(--brand-soft); border-bottom-color: var(--brand); }
.nmark.is-done sup { color: var(--brand); }
.nmark.is-none { background: var(--surface-2); border-bottom: 2px dashed var(--line-strong); cursor: default; }
.nmark.is-none sup { color: var(--ink-muted); }
.nlegend { margin: 0 0 var(--space-3); font-size: 13px; line-height: 20px; }
.nitem { margin: var(--space-1) 0 var(--space-3); padding: var(--space-3); border: 1px solid var(--line); border-left: 3px solid var(--change); border-radius: var(--radius-md); background: var(--surface-1); display: grid; gap: var(--space-2); }
.nitem-head { display: flex; gap: var(--space-2); align-items: baseline; font-size: 14px; line-height: 21px; color: var(--ink); }
.nnum { flex: none; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--change-soft); color: var(--change); font: 600 12px/20px var(--font-sans); text-align: center; }

/* A suggestion's heading says what it is and where it comes from; the controls are the buttons under it */
.sugg-kind { font: 600 14px/20px var(--font-sans); color: var(--ink); }
.sugg-kind.is-review { color: var(--change); }
.sugg-src { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.sugg-src:hover { color: var(--brand); }
.is-flash { outline: 3px solid var(--focus); outline-offset: 2px; }
.para-done { display: inline-flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.decided-box .quiet li { align-items: center; }

/* How sure the assistant is of a suggestion */
.sugg-conf { display: flex; gap: var(--space-2); align-items: baseline; font-size: 13px; line-height: 20px; color: var(--ink); }
.sugg-conf.is-medium, .sugg-conf.is-low { padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--change-soft); }
.conf-meter { display: inline-flex; gap: 2px; flex: none; align-self: center; }
.conf-meter i { width: 5px; height: 12px; border-radius: 1px; background: var(--line-strong); opacity: 0.45; }
.conf-meter i.on { opacity: 1; background: var(--ink-icon); }
.sugg-conf.is-medium .conf-meter i.on, .sugg-conf.is-low .conf-meter i.on { background: var(--change); }
.sugg-conf.is-high .conf-meter i.on { background: var(--brand); }