/* Adapted from the BOS frame, auth and row-modal layouts. Shared components
   and primitive values come from dna-ref. */
body {font-size:var(--fs-small); background:var(--frame);}
.backup-settings .c-input, .recovery-panel .c-input {min-width:var(--space-0); max-width:100%;}
.backup-settings .c-field, .translated-view, .translated-view .minute-rich {min-width:var(--space-0); overflow-wrap:anywhere;}
.recovery-key {white-space:pre-wrap; overflow-wrap:anywhere; font-family:var(--font-mono); font-size:var(--fs-h3); line-height:var(--lh-mono); letter-spacing:var(--ls-mono); margin:var(--space-0);}
.translation-progress {width:100%; accent-color:var(--text);}
.network-choice {cursor:pointer;}
.domain-step .c-input {max-width:100%; min-width:var(--space-0);}
.domain-step .break-word, .domain-step a {overflow-wrap:anywhere;}
.restore-screen {position:absolute; inset:var(--space-0); z-index:var(--z-overlay); background:var(--panel);}
.notes-screen, .notes-card, .notes-composer, .notes-filters > * {min-width:var(--space-0);}
.notes-screen .c-input, .notes-input {max-width:100%;}
.notes-input {width:100%; min-width:var(--space-0); resize:vertical; min-height:var(--control-h-l);}
.notes-body {white-space:pre-wrap; overflow-wrap:anywhere;}
.notes-meta, .notes-visibility {overflow-wrap:anywhere;}
.notes-counter {text-align:end; font-variant-numeric:var(--figures-tabular);}
.notes-filters {display:flex; flex-wrap:wrap; gap:var(--space-4);}
.notes-filters > * {flex:1;}
.notes-selection {position:sticky; top:var(--space-0); z-index:var(--z-raised);}
.signature-pad, .signature-register, .signature-form {width:100%; max-width:var(--line-modal-w); min-width:var(--space-0);}
.signature-canvas {display:block; width:100%; height:200px; max-width:600px; box-sizing:border-box; touch-action:none; border:var(--bw-hair) solid var(--border); border-radius:var(--radius-sm); background:transparent;}
.signature-image {display:block; max-width:100%; width:var(--signature-w); height:auto; max-height:var(--signature-h); object-fit:contain; object-position:left center;}
.signature-list {list-style:none; padding:var(--space-0); margin:var(--space-0);}
.signature-list li {display:flex; flex-wrap:wrap; gap:var(--space-3); justify-content:space-between; overflow-wrap:anywhere; min-width:var(--space-0);}
.signature-form .check-row {align-items:center; overflow-wrap:anywhere;}
[hidden] {display:none !important;}
#root {position:relative; overflow:hidden;}
button, a, input, select, textarea {touch-action:manipulation;}
button {font:inherit;}
h1 {font-size:var(--fs-app-title); font-weight:var(--fw-extralight); letter-spacing:var(--ls-h1); line-height:var(--lh-h1); overflow-wrap:anywhere;}
h2 {font-size:var(--fs-app-h); line-height:var(--lh-h3); font-weight:var(--fw-light);}
.stack {--stack-gap:var(--space-3); display:grid; gap:var(--stack-gap); min-width:var(--space-0);}
.form-grid {display:grid; gap:var(--space-4) var(--space-5); min-width:var(--space-0); align-content:start;}
.fm-select {position:relative; min-width:var(--space-0);}
.csel-native {position:absolute; width:var(--bw-hair); height:var(--bw-hair); overflow:hidden; clip-path:inset(50%);}
.visually-hidden {position:absolute; width:var(--bw-hair); height:var(--bw-hair); overflow:hidden; clip-path:inset(50%);}
.fm-select .csel-btn {width:100%;}
.fm-select .csel-btn .ic {width:var(--icon-size-sm); height:var(--icon-size-sm);}
.fm-select .csel-pop {position:absolute; inset:auto var(--space-0); top:100%; min-width:100%; margin:var(--space-0);}
@supports (anchor-name:--fm-select) {
  .fm-select .csel-btn[aria-expanded=true] {anchor-name:--fm-select;}
  .fm-select .csel-pop {position:fixed; position-anchor:--fm-select; inset:auto; top:anchor(bottom); left:anchor(left); min-width:anchor-size(width); position-try-fallbacks:flip-block;}
}
.screen-head {display:grid; gap:var(--space-3);}
.screen-head h1[tabindex="-1"]:focus {outline:none;}
.app-shell .phone-only {display:none;}
.actions {display:flex; flex-wrap:wrap; gap:var(--space-2); align-items:center; margin-block:var(--space-0);}
.two-columns {display:grid; grid-template-columns:repeat(2,minmax(var(--space-0),1fr)); gap:var(--space-3);}
.auth {position:relative; height:100%; overflow-y:auto; background:var(--frame);}
.auth-panel {min-height:100%; display:grid; grid-template-columns:repeat(2,minmax(var(--space-0),1fr));}
.auth-brand {display:flex; align-items:center; padding:var(--space-7); margin:var(--frame-gap) var(--space-0) var(--frame-gap) var(--frame-gap); border-radius:var(--radius-panel); background:radial-gradient(circle at 12% 88%,color-mix(in srgb,var(--brand-glow-a) 55%,transparent),transparent 60%),radial-gradient(circle at 92% 8%,color-mix(in srgb,var(--brand-glow-b) 55%,transparent),transparent 55%),var(--panel-sheen); min-width:var(--space-0);}
.ab-mid {display:grid; gap:var(--space-5); min-width:var(--space-0);}
.themed-logo {display:contents;}
html[data-theme="dark"] .themed-logo .logo-light, html:not([data-theme="dark"]) .themed-logo .logo-dark {display:none !important;}
.ab-mark img {display:block; width:var(--auth-mark); height:var(--auth-mark); object-fit:contain;}
.ab-name {font-size:var(--fs-app-kpi); letter-spacing:var(--ls-h2); line-height:var(--lh-tight); overflow-wrap:anywhere;}
.wordmark .w1 {font-weight:var(--fw-extralight);}
.wordmark .w2 {font-weight:var(--fw-wordmark);}
.ab-line {margin:var(--space-0); margin-top:calc(var(--space-3) - var(--space-5)); font-size:var(--fs-app-h); font-weight:var(--fw-extralight); line-height:var(--lh-body); color:var(--text-2); overflow-wrap:anywhere;}
.auth-side {display:flex; flex-direction:column; padding:var(--space-6) var(--space-7); min-width:var(--space-0); color:var(--text);}
.auth-top {display:flex; justify-content:flex-end; align-items:center; gap:var(--space-2);}
.auth-lang {width:var(--auth-lang-w);}
.auth-lang > label {display:none;}
.auth-form {flex:1; width:100%; max-width:var(--auth-form-w); margin:var(--space-0) auto; padding:var(--space-4) var(--space-0); display:flex; flex-direction:column; justify-content:center; gap:var(--space-3); min-width:var(--space-0);}
.wizard-card {max-width:var(--auth-wizard-w); justify-content:flex-start; flex:0 0 auto;}
.wizard-card .stepper {margin-bottom:calc(var(--space-2) + var(--space-1) + var(--space-1) / 2);}
/* Wizard steps sit on the page background: no panel behind any step. */
.wizard-card .pane {--card-pad:var(--space-0); border:none; border-radius:var(--space-0); background:none;}
/* The hosting choice looks like every other checkbox: square box, centered tick. */
label.network-choice .c-radio .box {border-radius:var(--radius-xs);}
label.network-choice .c-radio input:checked + .box {background:var(--text); border-color:var(--text); box-shadow:none;}
.auth h1 b {font-weight:var(--fw-regular);}
.auth-sub {margin:var(--space-0); font-weight:var(--fw-light); line-height:var(--lh-body); color:var(--text-2);}
.auth-sub b {font-weight:var(--fw-regular); color:var(--text);}
.auth-fields {display:grid; gap:var(--space-3);}
.auth-row {display:flex; align-items:center; justify-content:space-between; gap:var(--space-3);}
.auth-stay {display:flex; align-items:center; gap:var(--space-3); font-size:var(--fs-caption); color:var(--text-2);}
.auth .c-switch {font-size:var(--space-0); background:transparent; border-color:var(--border-strong); flex-shrink:0;}
.auth .c-switch::after {background:var(--text-3); box-shadow:none;}
.auth .c-switch[aria-checked=true] {background:var(--text-3); border-color:var(--text-3);}
.auth .c-switch[aria-checked=true]::after {background:var(--panel);}
.auth .c-inwrap .trail .c-btn {font-size:var(--space-0);}
.c-inwrap .trail {display:flex; align-items:center;}
.pw-state {display:inline-flex; align-items:center; justify-content:center; width:calc(var(--control-h-m) - var(--space-2)); height:calc(var(--control-h-m) - var(--space-2)); color:var(--text-negative);}
.pw-state[hidden] {display:none;}
.pw-state.ok {color:var(--accent-positive);}   /* the same green tick in light and dark */
.pw-state .ic {width:var(--icon-size-sm); height:var(--icon-size-sm);}
.c-help {font-size:var(--fs-caption); line-height:1.35; margin-top:var(--space-1);}
.auth-fields > .actions {display:flex; justify-content:flex-end;}
.auth-err {font-size:var(--fs-caption); color:var(--text-2);}
.legal-terms {overflow-wrap:anywhere; line-height:var(--lh-body);}
/* Licence text: 24 px before each section title, 4 px under it, 8 px between paragraphs and lists. */
.legal-terms > * + * {margin-top:var(--space-2);}
.legal-terms > :is(h2, h3):not(:first-child) {margin-top:var(--space-5);}
.legal-terms > :is(h2, h3) + * {margin-top:var(--space-1);}
.wizard .legal-terms {max-height:var(--terms-max-h); overflow:auto; padding:var(--space-4); border:var(--bw-hair) solid var(--border);}
.brand-previews {display:flex; flex-wrap:wrap; gap:var(--space-4);}
.brand-tile {display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-3); padding:var(--space-4); border:var(--bw-hair) solid var(--border); border-radius:var(--radius-sm); max-width:100%; overflow-wrap:anywhere;}
.brand-tile-light {background:var(--brand-preview-light); color:var(--brand-preview-dark);}
.brand-tile-dark {background:var(--brand-preview-dark); color:var(--brand-preview-light);}
.brand-tile img {object-fit:contain;}
.branding-logo-preview {width:var(--col-min-xs); height:var(--col-min-xs); max-width:100%; object-fit:contain;}
.branding-crop {display:block; touch-action:none; cursor:move; outline:var(--bw-hair) solid currentColor;}
.brand-slot {align-items:flex-start; align-self:flex-start; width:max-content; max-width:100%;}
.crop-row {display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-3);}
.crop-box {width:var(--col-min-xs); height:var(--col-min-xs); display:grid; place-items:center;}
.brand-slot .crop-tool .c-help, .brand-slot .crop-tool .notice {max-width:calc(var(--col-min-xs) * 2 + var(--space-3)); color:inherit;}
.crop-warning {border-left:var(--bw-strong) solid var(--border-warning); padding-left:var(--space-3);}
.branding-counter {text-align:end;}
@media (max-width:899px) {
  .auth-panel {grid-template-columns:minmax(var(--space-0),1fr); grid-template-rows:auto 1fr;}
  .auth-brand {margin:var(--frame-gap) var(--frame-gap) var(--space-0); padding:var(--space-5); border-radius:var(--radius-panel-phone);}
  .ab-mid {grid-template-columns:auto minmax(var(--space-0),1fr); align-items:center; column-gap:var(--space-4); row-gap:var(--space-2);}
  .ab-mark img {width:var(--auth-mark-s); height:var(--auth-mark-s);}
  .ab-name {font-size:var(--fs-app-title-s);}
  .ab-line {grid-column:1 / -1; margin-top:var(--space-0); font-size:var(--fs-body);}
  .auth-side {padding:var(--space-4) var(--space-5);}
  .auth-form {padding-block:var(--space-3);}
  .auth button:not(.c-switch), .auth input:not([type=checkbox]):not([type=radio]), .auth .csel-btn {min-height:var(--tap);}
}
.auth .c-field {min-width:var(--space-0);}
.notice {color:var(--text-2); overflow-wrap:anywhere;}
.notice:not(.c-help) {font-size:var(--fs-small);}
.email-success {border-left:var(--bw-strong) solid var(--border-positive); padding-left:var(--space-3); color:var(--text-positive);}
.email-form .c-field, .email-settings .c-field {min-width:var(--space-0);}
.email-form .c-input, .email-settings .c-input {max-width:100%; min-width:var(--space-0);}
.email-settings h3 {font-size:var(--fs-body); font-weight:var(--fw-regular);}
.notice.error {display:flex; gap:var(--space-2);}
.notice.error::before {content:""; flex:none; margin-top:var(--space-2); width:var(--app-dot); height:var(--app-dot); border-radius:var(--radius-2xs); background:var(--border-negative);}
.form-status:empty, .shell-status:empty {display:none;}
.loading-screen {padding:var(--space-4);}
.app-shell {height:100%; background:var(--frame); padding:var(--frame-gap); display:grid; grid-template-columns:var(--app-rail-w) minmax(var(--space-0),1fr);}
.app-shell {border-radius:var(--radius-device); overflow:hidden;}
.app-rail {display:flex; flex-direction:column; align-items:center; gap:var(--space-3); padding:var(--space-4) var(--space-0); min-height:var(--space-0); overflow-y:auto;}
.rail-pages, .rail-account {display:flex; flex-direction:column; align-items:center; gap:var(--space-2);}
.rail-account {margin-top:auto;}
.rail-item {display:grid; place-items:center; flex:none; width:var(--app-rail-item); height:var(--app-rail-item); border:var(--space-0); border-radius:var(--radius-md); background:transparent; color:var(--rail-icon); cursor:pointer; padding:var(--space-0);}
.rail-item:hover {background:var(--rail-hover, var(--surface-2)); color:var(--text);}
.rail-account .c-avatar {height:var(--avatar-m); min-height:var(--avatar-m); width:var(--avatar-m);}
.rail-item[aria-current=page] {background:var(--rail-pill); color:var(--rail-icon-active);}
.app-panel {position:relative; min-width:var(--space-0); min-height:var(--space-0); border-radius:var(--radius-panel); background:var(--panel-sheen); overflow:hidden;}
.app-scroll {height:100%; overflow-y:auto; padding:var(--space-5); padding-right:calc(var(--space-5) + var(--scroll-gutter));}
/* Every titled section on a screen is divided from the one above by a hair line (as on the minutes screen). */
.app-scroll :is(section, article, div):has(> h2:first-child):not(:first-child) {border-top:var(--bw-hair) solid var(--border); padding-top:var(--space-5);}
.shell-header {position:relative; z-index:var(--z-overlay); display:flex; justify-content:center; align-items:center; min-width:var(--space-0); margin-bottom:var(--space-4);}
.table-region {position:relative; min-width:var(--space-0);}
/* A box holding a table never grows wider than its page column: the table scrolls inside it instead. */
.stack > :has(> .table-region) {min-width:var(--space-0);}
.table-wrap {position:relative; max-width:100%; overflow:auto; padding-bottom:var(--scroll-gutter);}
.c-table th {white-space:nowrap;}
.c-table td {overflow-wrap:anywhere;}
.c-table .actions {flex-wrap:nowrap;}
/* Rows that open something: the whole row is the target; the name is a plain (not underlined) link for the keyboard. */
.c-table tr.row-link {cursor:pointer;}
.c-table a.row-open {color:inherit; text-decoration:none;}
.c-table a.row-open:hover {text-decoration:none;}
.c-table tr.drop-before > td, .c-table tbody.drop-before > tr:first-child > td {box-shadow:inset 0 var(--bw-strong) 0 0 var(--text);}
.c-table tr.drop-after > td, .c-table tbody.drop-after > tr:last-child > td {box-shadow:inset 0 calc(var(--bw-strong) * -1) 0 0 var(--text);}
.c-table .dragging {opacity:var(--opacity-muted);}
.grip {cursor:grab; color:var(--text-3); flex:none; touch-action:none;}
.dna-app button.grip {align-content:center; justify-content:center;}
/* Project tree: every row (project or minute) has the same height; minutes sit one step in. */
.project-table td {height:calc(var(--control-h-s) + var(--space-3) * 2); vertical-align:middle;}
.tree-name {display:flex; align-items:center; gap:var(--space-2); min-width:var(--space-0);}
/* Only the project name is medium weight, so it stands apart from its minutes. */
.project-row .tree-name .row-open {font-weight:var(--fw-regular);}
.tree-child {padding-inline-start:calc(var(--control-h-s) + var(--space-2));}
.tree-toggle {width:var(--control-h-s); height:var(--control-h-s); min-height:var(--control-h-s); flex:none; border:none; background:transparent; color:var(--text-3);}
.tree-toggle .icon-wrap {transition:transform var(--dur-fast);}
.tree-toggle[aria-expanded="false"] .icon-wrap {transform:rotate(-90deg);}
.tree-count {color:var(--text-3);}
.project-table tr.minute-child > td {color:var(--text-2);}
.lm-ov {position:absolute; inset:var(--space-0); z-index:var(--z-overlay); display:grid; place-items:center; padding:var(--space-4); background:var(--overlay);}
.lm {position:relative;}
.lm-head {display:flex; align-items:center; justify-content:space-between; gap:var(--space-4);}
.lm-grid {position:relative;}
.break-word, .connection a {overflow-wrap:anywhere;}
.clipboard-proxy {position:fixed; opacity:var(--space-0); pointer-events:none;}
#toasts {position:fixed; right:var(--space-5); bottom:var(--space-5); max-width:calc(100% - var(--space-7)); z-index:var(--z-toast); display:grid; gap:var(--space-2);}
.toast, .tip-pop {background:var(--tooltip-bg); color:var(--tooltip-fg); padding:var(--space-3) var(--space-4); border-radius:var(--radius-sm); box-shadow:var(--shadow-2);}
.tip-pop {position:fixed; top:auto; z-index:var(--z-tooltip); bottom:var(--space-6); left:50%; transform:translateX(-50%); pointer-events:none; font-size:var(--fs-caption); padding:var(--space-1) var(--space-3);}
@supports (anchor-name:--tip) {
  [data-tip-open] {anchor-name:--tip;}
  .tip-pop {position-anchor:--tip; top:calc(anchor(bottom) + var(--space-2)); bottom:auto; left:anchor(center); position-try-fallbacks:flip-block;}
  @media (min-width:45.001em) {
    body:has(.app-rail :is(.rail-item, .c-avatar)[data-tip-open]) .tip-pop {left:calc(anchor(right) + var(--space-2)); top:anchor(center); transform:translateY(-50%);}
  }
}
.stepper {list-style:none; padding:var(--space-0); margin:var(--space-0); display:flex; flex-wrap:wrap; gap:var(--space-3) var(--space-4);}
.stepper li {display:flex; gap:var(--space-2); align-items:center; color:var(--text-3); font-size:var(--fs-caption);}
.stepper li[aria-current=step] {color:var(--text); text-decoration:underline; text-underline-offset:var(--underline-offset);}
.stepper li .ic {width:var(--icon-size-sm); height:var(--icon-size-sm);}
.step-number {font-variant-numeric:var(--figures-tabular);}
.instructions {margin:var(--space-0); padding-left:var(--space-5);}
.instructions li {padding-left:var(--space-1);}
.instructions.stack {gap:var(--space-4);}
.instructions .step p {margin:var(--space-0) var(--space-0) var(--space-2);}
.tailscale-instructions .substeps {margin-bottom:var(--space-2);}
.tailscale-instructions .step {min-width:var(--space-0); overflow-wrap:anywhere;}
.tailscale-instructions h3 {margin:var(--space-0) var(--space-0) var(--space-2);}
.ts-strong {font-weight:var(--fw-menu-title);}
.spin[hidden] {display:none;}
.lines {display:grid; gap:var(--space-1);}
.lines p {margin:var(--space-0);}
.fine {color:var(--text-2);}
.advanced {display:grid; gap:var(--space-3);}
.advanced > summary {display:flex; align-items:center; gap:var(--space-1); width:fit-content; list-style:none; cursor:pointer; font-size:var(--fs-small); color:var(--text-2);}
.advanced > summary::-webkit-details-marker {display:none;}
.advanced > summary .icon-wrap {color:var(--icon-idle); transform:rotate(-90deg); transition:transform var(--dur-fast);}
.advanced[open] > summary .icon-wrap {transform:none;}
.advanced > summary:hover .icon-wrap {color:var(--icon-on);}
.wizard-nav {justify-content:flex-end; flex-wrap:nowrap; gap:var(--space-1);}
.wizard-nav .nav-back {margin-right:auto;}
.checklist {list-style:none; margin:var(--space-0); padding:var(--space-0); display:grid; gap:var(--space-4);}
.checklist li {display:flex; gap:var(--space-3); align-items:flex-start;}
.qr {width:var(--qr-size); max-width:100%; height:auto;}
/* The QR modules are painted with the logo greens, shaded diagonally: the image only masks the gradient. */
.qr {opacity:0;}
.qr-frame {display:inline-block; width:fit-content; max-width:100%; line-height:0; margin-block:var(--space-1) var(--space-4); background:var(--qr-ink); -webkit-mask:var(--qr-mask) center / 100% 100% no-repeat; mask:var(--qr-mask) center / 100% 100% no-repeat;}
.scroll-lane {position:absolute; top:var(--space-6); right:var(--space-1); bottom:var(--space-6); width:var(--scroll-gutter); z-index:var(--z-raised);}
.scroll-lane svg {width:100%; height:100%; overflow:visible; touch-action:none; cursor:pointer;}
.scroll-lane rect {fill:var(--scrollbar-thumb-hover);}
.scroll-lane:hover rect {fill:var(--text-2);}
.scroll-lane.horizontal {top:auto; left:var(--space-0); right:var(--space-0); bottom:var(--space-0); width:100%; height:var(--scroll-gutter);}
@media (max-width:45em) {
  .app-shell .desktop-only {display:none;}
  .app-shell .phone-only {display:grid;}
  .app-shell {grid-template-columns:minmax(var(--space-0),1fr); grid-template-rows:minmax(var(--space-0),1fr) auto; padding-bottom:var(--space-0);}
  .app-rail {grid-row:2; flex-direction:row; justify-content:center; padding:var(--space-2) var(--space-0); gap:var(--space-0); padding-bottom:max(var(--space-2), env(safe-area-inset-bottom));}
  .rail-pages, .rail-account {flex-direction:row; gap:var(--space-0);}
  .rail-account {margin-top:var(--space-0);}
  .app-rail {overflow-x:auto; justify-content:flex-start;}
  .rail-item {width:var(--tap);}
  .app-panel {grid-row:1; border-radius:var(--radius-panel-phone);}
  .app-scroll {padding:var(--space-4); padding-right:calc(var(--space-4) + var(--scroll-gutter));}
  .shell-header {margin-bottom:var(--space-3);}
  .two-columns {grid-template-columns:minmax(var(--space-0),1fr);}
  .auth {padding:var(--space-0);}
  .lm-ov, .c-overlay:not(.static) {padding:var(--frame-gap); place-items:stretch;}
  .lm, .c-overlay:not(.static) > .c-modal {width:100%; height:100%; max-height:100%; min-height:var(--space-0); display:flex; flex-direction:column; border-radius:var(--radius-panel-phone); transform:none; overflow:hidden;}
  .c-modal > :is(.lm-body, .modal-body) {flex:1; min-height:var(--space-0); overflow:auto;}
  .c-modal > .acts {margin-top:auto; flex:none;}
  .c-table, .c-table tbody, .c-table tr, .c-table td {display:block; min-width:var(--space-0);}
  .c-table :is(th, td):not(.main) {width:auto;}
  .c-table thead {position:absolute; width:var(--bw-hair); height:var(--bw-hair); overflow:hidden; clip-path:inset(50%);}
  .c-table tr {padding-block:var(--space-4); border-bottom:var(--bw-hair) solid var(--border);}
  .c-table td {border:none; padding:var(--space-2) var(--space-0); white-space:normal;}
  .c-table td::before {content:attr(data-label); display:block; font-size:var(--fs-label); letter-spacing:var(--ls-label); text-transform:var(--tt-label); color:var(--text-3); margin-bottom:var(--space-1);}
  #toasts, .tip-pop {bottom:calc(var(--tap) + var(--space-5));}
  .tip-pop {position-anchor:auto; top:auto; left:50%; transform:translateX(-50%);}
}

.wizard-language {display:flex; justify-content:flex-end; padding-inline:var(--space-2);}
.rail-logo {width:var(--app-rail-item); height:var(--app-rail-item); display:grid; place-items:center; margin-bottom:var(--space-3);}
.rail-logo img {width:var(--logo-rail); height:var(--logo-rail);}
.search-island {position:relative; min-width:var(--space-0); width:min(100%,var(--island-w)); border-radius:calc(var(--island-h) / 2); background:var(--frame); color:var(--rail-icon-active);}
.search-bar {display:flex; align-items:center; gap:var(--space-3); min-height:var(--island-h); padding:var(--space-0) var(--space-4);}
.search-bar input {min-width:var(--space-0); width:100%; background:transparent; color:inherit; border:none; font:inherit;}
.search-results {position:absolute; top:100%; width:100%; z-index:var(--z-overlay); padding:var(--space-4); background:var(--frame); border-radius:var(--radius-md); box-shadow:var(--shadow-2);}
.search-bar > .search-open {display:none;}
/* Small window: the name in the middle and a search button at the end; the button swaps the name for the field. */
@media (max-width:45em) {
 .search-bar {position:relative; justify-content:center;}
 .search-island:not(.is-searching) .search-bar > :is(.icon-wrap, input), .search-island.is-searching .search-bar > :is(.t-label, .search-open) {display:none;}
 .dna-app .search-bar > .search-open {display:grid; position:absolute; inset-inline-end:var(--space-2); top:50%; transform:translateY(-50%); color:inherit;}
 .search-bar input {flex:1;}
}
/* Minute editor: adapted oldapp rows, toolbar and print rules, using BOS tokens. */
.minute-screen, .minute-section, .minute-row-grid > *, .minute-header > * {min-width:var(--space-0);}
.minute-meta {display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-3); font-size:var(--fs-small);}
.minute-meta .notice {margin:var(--space-0); color:var(--text-3);}
/* Meeting info: compact grid like the meeting-minute template; each value sits on one hair line. */
.minute-info {display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, calc(var(--space-8) * 3 + var(--space-5))), 1fr)); gap:var(--space-3) var(--space-5); align-items:start;}
.minute-info .wide {grid-column:span 2;}
.minute-info .c-field {gap:var(--space-1);}
.minute-info .help, .minute-info .c-field small {font-size:var(--fs-caption); color:var(--text-3);}
.minute-info .minute-picker {border:none; margin:var(--space-0); padding:var(--space-0); border-radius:var(--space-0); display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2);}
.minute-info .minute-picker legend {float:left; width:100%; padding:var(--space-0); margin-bottom:var(--space-1); font-size:var(--fs-label); letter-spacing:var(--ls-label); text-transform:var(--tt-label); color:var(--text-3);}
.minute-info .minute-picker > .actions:empty {display:none;}
.minute-info .minute-picker .c-field {flex:1 1 calc(var(--space-8) * 2); gap:var(--space-0);}
.minute-info .minute-picker .c-field > label {position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap;}
/* Sections are split by a hair line; the heading and its hint share one line. */
.minute-section, .minute-attachments {border-top:var(--bw-hair) solid var(--border); padding-top:var(--space-5);}
.minute-section-head {display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--space-2) var(--space-3);}
.minute-section-head h2, .minute-votes > h2, .minute-attachments > h2 {font-size:var(--fs-h4); line-height:var(--lh-h4); font-weight:var(--fw-h4); letter-spacing:var(--ls-h4); margin:var(--space-0);}
.minute-section-head .notice {margin:var(--space-0); font-size:var(--fs-caption); color:var(--text-3);}
/* Action dock: grows out of the frame's right edge, joined by two concave curves (brandbook .dock). */
.app-scroll:has(.minute-dock) {padding-right:calc(var(--space-5) + var(--scroll-gutter) + var(--dock-w));}
.minute-dock {position:fixed; right:var(--space-0); top:50%; transform:translateY(-50%); z-index:var(--z-overlay); width:calc(var(--dock-w) + var(--frame-gap));
  padding:var(--space-3) var(--frame-gap) var(--space-3) var(--space-0); background:var(--frame); border-radius:var(--radius-xl) var(--space-0) var(--space-0) var(--radius-xl);
  display:flex; flex-direction:column; align-items:center; gap:var(--space-1);}
.minute-dock::before, .minute-dock::after {content:""; position:absolute; right:var(--space-0); width:calc(var(--dock-fillet) + var(--frame-gap)); height:calc(var(--dock-fillet) + var(--aa) * 2); pointer-events:none;}
.minute-dock::before {bottom:calc(100% - var(--aa) * 2); background:radial-gradient(circle at 0 0, transparent calc(var(--dock-fillet) - var(--aa)), var(--frame) var(--dock-fillet));}
.minute-dock::after {top:calc(100% - var(--aa) * 2); background:radial-gradient(circle at 0 100%, transparent calc(var(--dock-fillet) - var(--aa)), var(--frame) var(--dock-fillet));}
.minute-dock .dock-g {display:flex; flex-direction:column; align-items:center; gap:var(--space-1);}
.minute-dock .dock-g:not(:first-child)::before {content:""; width:var(--space-4); height:var(--bw-hair); background:var(--rail-pill); margin:var(--space-1) var(--space-0);}
.minute-dock .dock-btn {text-decoration:none;}
.minute-dock .dock-btn:hover {background:var(--rail-hover, var(--rail-pill)); color:var(--rail-icon-active);}
.minute-dock .dock-btn:disabled {opacity:var(--opacity-disabled); cursor:not-allowed; background:transparent; color:var(--rail-icon);}
@supports (anchor-name:--tip) {
  @media (min-width:45.001em) {
    body:has(.minute-dock .dock-btn[data-tip-open]) .tip-pop {left:auto; right:calc(anchor(left) + var(--space-4)); top:anchor(center); transform:translateY(-50%);}
  }
}
@media (max-width:45em) {
  .app-scroll:has(.minute-dock) {padding-right:calc(var(--space-4) + var(--scroll-gutter));}
  .minute-dock {position:static; transform:none; width:auto; padding:var(--space-0); background:none; border-radius:var(--space-0); flex-direction:row; flex-wrap:wrap; justify-content:flex-start;}
  .minute-dock::before, .minute-dock::after {content:none;}
  .minute-dock .dock-g {flex-direction:row;}
  .minute-dock .dock-g:not(:first-child)::before {width:var(--bw-hair); height:var(--space-4); margin:var(--space-0) var(--space-1); background:var(--border);}
  .minute-dock .dock-btn {color:var(--text-2);}
  .minute-dock .dock-btn:hover {background:var(--surface-2); color:var(--text);}
  .minute-info .wide {grid-column:auto;}
}
.minute-row-grid {display:grid; grid-template-columns:repeat(3,minmax(var(--space-0),1fr)); gap:var(--space-4);}
.minute-row {overflow-wrap:anywhere;}
.minute-row .c-input, .minute-header .c-input {width:100%; min-width:var(--space-0); max-width:100%;}
.minute-picker {border:var(--bw-hair) solid var(--border); padding:var(--space-3); border-radius:var(--radius-md); min-width:var(--space-0); display:grid; gap:var(--space-3);}
.minute-picker legend {font-size:var(--fs-small); color:var(--text-2);}
.minute-chip {max-width:100%; white-space:normal; overflow-wrap:anywhere;}
.minute-badge {display:inline-flex; flex-wrap:wrap; gap:var(--space-2); padding:var(--space-1) var(--space-3); border:var(--bw-hair) solid var(--border); border-radius:var(--radius-pill); font-size:var(--fs-caption); overflow-wrap:anywhere;}
.minute-rich {min-height:var(--control-h-l); padding:var(--space-3); border:var(--bw-hair) solid var(--border); border-radius:var(--radius-sm); background:var(--input-bg); overflow-wrap:anywhere; white-space:pre-wrap;}
.minute-rich:focus {outline:var(--bw-focus) solid var(--focus-ring); outline-offset:var(--focus-offset);}
.minute-rich-field, .owner-statuses {grid-column:span 2;}
.minute-toolbar {padding:var(--space-3); border-block:var(--bw-hair) solid var(--border);}
.minute-toolbar .c-input {width:auto; max-width:100%;}
.minute-colours {max-width:100%;}
.minute-colours[open] {flex-basis:100%;}
.minute-row.dragging {opacity:var(--opacity-muted);}
.minute-row.drop-target {outline:var(--bw-strong) solid var(--focus-ring);}
.minute-value {white-space:pre-wrap; overflow-wrap:anywhere;}
.minute-toolbar {position:sticky; top:var(--space-0); z-index:var(--z-raised); background:var(--panel); gap:var(--space-1);}
/* Template-style letter buttons: B I U S, A colour, H highlight, lists, clear. */
.minute-format {display:inline-grid; place-items:center; min-width:var(--tap); height:var(--tap); padding:var(--space-0) var(--space-2); border:none; border-radius:var(--radius-sm); background:transparent; color:var(--text); font:inherit; font-size:var(--fs-body); line-height:1; cursor:pointer; list-style:none;}
.minute-format:hover {background:var(--surface-2);}
.minute-format:focus-visible {outline:var(--bw-focus) solid var(--focus-ring); outline-offset:var(--focus-offset);}
.minute-sep {align-self:center; width:var(--bw-hair); height:var(--control-h-s); background:var(--border); margin-inline:var(--space-1);}
.minute-colour span {border-bottom:var(--bw-strong) solid var(--accent-negative); padding-inline:var(--space-1);}
.minute-highlight span {background:var(--accent-alert); color:var(--on-alert); padding-inline:var(--space-1); border-radius:var(--radius-sm);}
.minute-toolbar .bold {font-weight:bolder;}
.minute-toolbar .italic {font-style:italic;}
.minute-toolbar .underline {text-decoration:underline;}
.minute-toolbar .strikeThrough {text-decoration:line-through;}
.minute-colours {position:relative;}
.minute-colours summary::marker {content:'';}
.minute-colours[open] {flex-basis:auto;}
.minute-swatches {position:absolute; inset-inline-end:var(--space-0); top:100%; width:var(--menu-w); padding:var(--space-3); background:var(--panel); border:var(--bw-hair) solid var(--border); border-radius:var(--radius-sm); box-shadow:var(--shadow-2);}
.minute-swatches {display:flex; gap:var(--space-2);}
.minute-swatch {width:var(--control-h-s); height:var(--control-h-s); border:var(--bw-hair) solid var(--border); border-radius:var(--radius-pill); background:var(--swatch); cursor:pointer;}
.swatch-text {--swatch:var(--text);}
.swatch-accent-brand {--swatch:var(--accent-brand);}
.swatch-accent-positive {--swatch:var(--accent-positive);}
.swatch-accent-alert {--swatch:var(--accent-alert);}
.swatch-accent-negative {--swatch:var(--accent-negative);}
.minute-table-scroll {min-width:var(--space-0); max-width:100%;}
.minutes-table, .minute-rows {display:block; width:100%;}
.minutes-table > colgroup, .minutes-table > thead {display:none;}
.minute-rows {display:grid; gap:var(--space-4);}
.minute-cell {display:block; min-width:var(--space-0);}
.minute-cell-off {display:none;}
.minute-row {grid-template-columns:minmax(var(--space-0),1fr); gap:var(--space-3);}
.minute-row-controls, .minute-handle {border:var(--space-0); padding:var(--space-0);}
/* Phones: the rows stack like every other table (no box around each one), a hair line between them. */
@media (max-width:45em) {
  .minute-rows {gap:var(--space-0);}
  .dna-app .minute-rows > .minute-row.pane {border:none; border-bottom:var(--bw-hair) solid var(--border); border-radius:var(--space-0); padding:var(--space-4) var(--space-0); background:none; box-shadow:none;}
}
.minute-chip {padding:var(--space-1) var(--space-2); font-size:var(--fs-caption);}
.minute-chip .ic {width:var(--icon-size-sm); height:var(--icon-size-sm); flex:none;}
@media (min-width:45.001em) {
  .minute-toolbar {flex-wrap:nowrap;}
  .minute-table-scroll {overflow:auto; max-height:var(--tabl-h);}
  .minutes-table {display:table; table-layout:fixed; border-collapse:separate; border-spacing:var(--space-0); min-width:calc(var(--minute-handle-w) + var(--minute-subject-w) + var(--minute-description-w) + var(--minute-owner-w) + var(--minute-deadline-w) + var(--minute-status-w) + var(--minute-notes-w) + var(--minute-vote-w) * 2 + var(--minute-label-w) * 2 + var(--minute-tools-w));}
  .minutes-table > colgroup {display:table-column-group;}
  .minutes-table > thead {display:table-header-group; position:sticky; top:var(--space-0); z-index:var(--z-raised); background:var(--panel);}
  .minutes-table th {text-align:start; padding:var(--space-2); font-size:var(--fs-label); font-weight:var(--fw-regular); color:var(--text-3);}
  .minute-rows {display:table-row-group;}
  .minute-row {display:table-row; background:transparent;}
  .minute-row > td {display:table-cell; vertical-align:middle; padding:var(--space-0);}
  .minute-cell .c-field > label, .minute-cell .t-label, .minute-cell legend {display:none;}
  .minute-cell .c-field {gap:var(--space-1);}
  .minute-col-0 {width:var(--minute-handle-w);}
  .minute-col-1 {width:var(--minute-subject-w);}
  .minute-col-2 {width:var(--minute-description-w);}
  .minute-col-3 {width:var(--minute-owner-w);}
  .minute-col-4 {width:var(--minute-deadline-w);}
  .minute-col-5 {width:var(--minute-status-w);}
  .minute-col-6 {width:var(--minute-notes-w);}
  .minute-col-7, .minute-col-10 {width:var(--minute-vote-w);}
  .minute-col-8, .minute-col-9 {width:var(--minute-label-w);}
  .minute-col-11 {width:var(--minute-tools-w);}
  /* Plain table, like the minute template: only horizontal lines, fields without boxes, underlines or focus marks. */
  .minutes-table th, .minute-row > td {border-bottom:var(--bw-hair) solid var(--border);}
  .minutes-table th {border-top:var(--bw-hair) solid var(--border);}
  .dna-app .minute-cell .c-input, .dna-app .minute-cell .c-input:focus, .dna-app .minute-cell .c-input:hover, .dna-app .minute-cell .csel-btn[aria-expanded="true"], .minute-cell .minute-rich {width:100%; min-height:var(--control-h-s); height:auto; border:none; border-radius:var(--space-0); background:transparent; box-shadow:none; outline:none; padding:var(--space-1) var(--space-2);}
  .minute-cell .minute-rich:focus, .minute-cell .minute-rich:focus-visible {outline:none;}
  .minute-cell .minute-value {padding:var(--space-1) var(--space-2);}
  .minute-cell .minute-picker {padding:var(--space-0); border:none; gap:var(--space-0);}
  /* The hidden native select pokes 2px out of the select box and made the table scroll. */
  .minute-cell .fm-select {overflow:clip;}
  .minute-cell .minute-picker > .actions:empty, .minute-cell .owner-statuses:empty {display:none;}
  .minute-cell-off {background:var(--surface-2);}
  .minute-handle, .minute-row-controls {text-align:center;}
  .dna-app .minute-handle .grip {margin-inline:auto;}
  .minute-row-controls {white-space:nowrap;}
  .dna-app .minute-row-controls .c-btn {display:inline-grid; vertical-align:middle; width:var(--control-h-s); height:var(--control-h-s); min-height:var(--control-h-s); min-width:var(--control-h-s); padding:var(--space-0);}
}
.votes-screen, .vote-card, .vote-panel {min-width:var(--space-0); overflow-wrap:anywhere;}
/* Vote page only: each option is a full-width box in the description-box style (48px, 12px padding, hair border, input background). */
.vote-ballot {display:flex; flex-direction:column; gap:var(--space-2);}
.dna-app .c-btn.vote-choice {display:flex; justify-content:center; align-items:center; width:100%; height:auto; min-height:var(--control-h-l); padding:var(--space-3); border:var(--bw-hair) solid var(--border); border-radius:var(--radius-sm); background:var(--input-bg); color:var(--text); white-space:normal; text-align:center; text-transform:none; letter-spacing:var(--ls-body); font-size:var(--fs-body); font-weight:var(--fw-regular); line-height:var(--row-line-h);}
.dna-app .c-btn.vote-choice:hover {background:var(--hover-bg, var(--input-bg)); border-color:var(--border-strong);}
.dna-app .c-btn.vote-choice:focus-visible {outline:var(--bw-focus) solid var(--focus-ring); outline-offset:var(--focus-offset);}
/* Vote page: the description shows as plain rich text in a row (no input box); the description and status lines are light. */
.dna-app .list-rows > :is(.rich-view, .vote-state) {font-weight:var(--fw-light); overflow-wrap:anywhere;}
.dna-app .rich-view > * {margin:var(--space-0);}
.vote-entry {padding-block:var(--space-3); border-bottom:var(--bw-hair) solid var(--border);}
.vote-subject {font-size:var(--fs-body-l);}
.dna-app .minute-tool.is-on {color:var(--accent-brand);}
.project-description {color:var(--text-2); white-space:pre-line;}
.vote-types .vote-type-archived {color:var(--text-3);}
.vote-types .c-table .actions {flex-wrap:wrap;}
.vote-participation {list-style:none; padding:var(--space-0); margin:var(--space-0);}
.vote-participation li {display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-2);}
.vote-nav-badge {position:absolute; top:var(--space-0); right:var(--space-0); padding:var(--space-0) var(--space-1); border-radius:var(--radius-sm); background:var(--panel); color:var(--text); font-size:var(--fs-caption);}
.rail-item:has(.vote-nav-badge) {position:relative;}
.minute-attachments .c-table .actions {flex-wrap:wrap;}
.search-results {max-height:var(--scroll-card-h); overflow-y:auto;}
.search-result {display:grid; width:100%; text-align:start; border:var(--space-0); border-radius:var(--radius-sm); background:transparent; color:var(--rail-icon-active); padding:var(--space-3); overflow-wrap:anywhere;}
.search-result[aria-selected=true] {background:var(--rail-pill);}
.search-result:hover {background:var(--rail-hover, var(--rail-pill)); color:var(--rail-icon-active);}
.search-results .t-label {padding-inline:var(--space-3); margin-block:var(--space-2) var(--space-1);}
.search-results .t-label:first-child {margin-top:var(--space-0);}
.search-results .notice, .search-results .t-label {color:var(--rail-icon-active);}
@media (max-width:45em) {
  .minute-row-grid {grid-template-columns:minmax(var(--space-0),1fr);}
  .minute-rich-field, .owner-statuses {grid-column:auto;}
}
@media print {
  .minute-dock {display:none !important;}
  .minute-screen {--text:var(--fedisgray3); --text-2:var(--fedisgray2); --text-3:var(--fedisgray1); --border:var(--fedissand3); --panel:var(--fediswhite1); --input-bg:var(--fediswhite1);}
  html, body, #root, .app-shell, .app-panel, .app-scroll {height:auto; overflow:visible; position:static; display:block; padding:var(--space-0); border-radius:var(--space-0); background:var(--fediswhite1); color:var(--fedisgray3);}
  .app-rail, .shell-header, .shell-status, .minute-toolbar, .minute-controls, .minute-row-controls, .minute-row-footer, .minute-lifecycle, .minute-attachments, .minute-status, .scroll-lane, #toasts, .tip-pop, .lm-ov {display:none !important;}
  .minute-screen {gap:var(--space-4);}
  .minute-screen .c-input, .minute-rich {border:none; background:transparent; color:inherit; font-size:var(--print-fs-body);}
  .minute-screen .minute-picker .c-field, .minute-screen .minute-picker button, .minute-screen .csel-btn {display:none;}
  .minute-screen .minute-picker button.minute-chip {display:inline-flex;}
  .minute-screen .csel-native {position:static; width:auto; height:auto; clip-path:none; appearance:none;}
  .minute-row {break-inside:avoid; padding:var(--space-3); background:transparent; border-radius:var(--space-0);}
  .minute-row-grid {grid-template-columns:repeat(3,minmax(var(--space-0),1fr));}
  .minute-header {grid-template-columns:repeat(2,minmax(var(--space-0),1fr));}
  .minute-screen h1 {font-size:var(--print-fs-title);}
  .minute-screen h2 {font-size:var(--print-fs-name);}
}

@page {size:A4 landscape; margin:var(--page-margin-top) var(--page-margin-x) var(--page-margin-bottom);}
/* Task views reuse BOS panes, segmented controls, rows and oldapp KPI cards. */
.task-screen, .task-content, .task-toolbar, .task-filters > *, .board-column, .calendar-day {min-width:var(--space-0);}
.task-filters {display:flex; flex-wrap:wrap; gap:var(--space-2); align-items:center; min-width:var(--space-0);}
.task-filters > .c-field {flex:1 1 var(--col-min-xs); margin:var(--space-0);}
.dna-app .task-screen .c-seg {gap:var(--space-0); margin-inline:var(--space-0); flex-wrap:nowrap;}
.task-toolbar {display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-3);}
.task-toolbar > .task-filters {flex:1;}
.task-toolbar .task-filters > .c-field {flex:1 1 var(--cell-w-s);}
.task-toolbar .csel-btn {padding-block:var(--space-1); font-size:var(--fs-caption);}
.task-toolbar .task-new {margin-left:auto;}
.task-filter-button {display:none;}
.task-screen {padding-bottom:var(--tabbar-h);}
.task-content > .actions {position:relative;}
.task-screen .c-input, .kpi-screen .c-input {width:100%; max-width:100%; min-width:var(--space-0);}
.task-title {display:block; max-width:100%; min-height:var(--tap); padding:var(--space-0); background:transparent; border:none; color:var(--text); text-align:start; overflow-wrap:anywhere; white-space:normal; cursor:pointer;}
.task-table tr.row-link:hover .task-title {text-decoration:none;}
.task-title:focus-visible, .timeline-bar:focus-visible {outline:var(--bw-focus) solid var(--focus-ring); outline-offset:var(--focus-offset);}
.task-board {display:grid; grid-template-columns:repeat(3,minmax(var(--space-0),1fr)); gap:var(--space-4); align-items:start;}
.task-card.pane {position:relative; display:grid; grid-template-columns:auto minmax(var(--space-0),1fr) auto; gap:var(--space-1) var(--space-2); overflow-wrap:anywhere;}
.task-card > .task-title {grid-column:2; font-weight:var(--fw-bold);}
.task-card > .task-grip {grid-row:1; align-self:center;}
.task-card > .task-meta, .task-card > .task-deadline, .task-card > .task-badges {grid-column:2 / -1; font-size:var(--fs-caption);}
.task-meta:empty {display:none;}
.task-move {grid-column:3; grid-row:1; align-self:center;}
.task-move summary {display:flex; cursor:pointer; list-style:none; padding:var(--space-2);}
.task-move summary::-webkit-details-marker {display:none;}
.task-move[open] .c-field {position:absolute; right:var(--space-2); z-index:var(--z-raised); width:var(--menu-w); padding:var(--space-3); background:var(--panel); box-shadow:var(--shadow-2);}
.board-column {gap:var(--space-3);}
.board-column h2 {display:flex; align-items:center; gap:var(--space-2); font-size:var(--fs-h4);}
.task-grip {touch-action:none; cursor:grab;}
.task-card.dragging {opacity:var(--opacity-muted);}
.over-t {box-shadow:inset 0 var(--bw-strong) 0 var(--accent-positive);}
.over-b {box-shadow:inset 0 calc(var(--bw-strong) * -1) 0 var(--accent-positive);}
.board-segments {display:none;}
.task-cell {display:flex; align-items:center; gap:var(--space-2); min-width:var(--space-0);}
.dna-app .task-cell > .task-title {min-width:var(--space-0); min-height:var(--space-0); height:auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:inherit;}
.task-cell > .c-badge {flex:none;}
.calendar-grid {display:grid; grid-template-columns:repeat(7,minmax(var(--space-0),1fr)); border-top:var(--bw-hair) solid var(--border);}
.calendar-day {padding:var(--space-2); border-bottom:var(--bw-hair) solid var(--border); border-right:var(--bw-hair) solid var(--border); overflow-wrap:anywhere;}
.calendar-day .task-title {font-size:var(--fs-caption);}
.dna-app .calendar-day .c-badge {display:block; max-width:100%; white-space:normal; overflow-wrap:anywhere; letter-spacing:var(--ls-body);}
.calendar-day .c-badge::before {display:inline-block; margin-inline-end:var(--space-1);}
.calendar-day[data-weekend=true], .calendar-day[data-outside=true] {background:var(--surface-2);}
/* Calendar day: the date and each task are 22px lines from the cell's top padding, with no gap; a long title ends in "..." (full title in the tooltip). */
.calendar-day {display:flex; flex-direction:column; min-width:var(--space-0); overflow:hidden;}
.dna-app .calendar-day .task-title {width:100%; min-height:var(--space-0); height:var(--row-line-h); line-height:var(--row-line-h); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.calendar-day [data-task] {display:flex; align-items:center; gap:var(--space-1); min-width:var(--space-0);}
.calendar-day [data-task] > .c-badge {flex:none;}
/* Each task in a day starts with a 6px square marker in the bar colour (alert colour when delayed); its text is regular. */
.calendar-day [data-task]::before {content:""; flex:none; width:var(--app-dot); height:var(--app-dot); border-radius:var(--radius-2xs); background:var(--chart-1);}
.calendar-day [data-task].is-delayed::before {background:var(--accent-alert);}
.dna-app .calendar-day [data-task] .task-title {font-weight:var(--fw-regular);}
.calendar-title > .actions {margin-inline-start:auto;}
.dna-app .calendar-title > .actions > .c-btn.icon {height:var(--row-line-h); min-height:var(--space-0);}
/* The calendar's first group is the first block under the page bar: it still draws its group lines. */
.dna-app .app-scroll .task-content > .row-group:first-child {border-block:var(--bw-hair) solid var(--border-strong); border-bottom-width:var(--group-end-w); padding-block:var(--group-pad);}
.calendar-day button[aria-pressed=true] {text-decoration:underline; font-weight:var(--fw-regular);}
.timeline-scroll {max-width:100%; overflow-x:auto; position:relative; padding-bottom:var(--space-4);}
.timeline-chart {position:relative;}
.timeline-chart {--timeline-track-start:calc((100% - var(--space-2)) / 4 + var(--space-2));}
.timeline-lines {position:absolute; top:var(--space-0); bottom:var(--space-0); left:var(--timeline-track-start); right:var(--space-0); pointer-events:none;}
.timeline-gridline {position:absolute; top:var(--space-0); bottom:var(--space-0); left:var(--bar-left); border-left:var(--bw-hair) solid var(--border);}
.timeline-head {display:grid; grid-template-columns:minmax(var(--space-0),1fr) minmax(var(--space-0),3fr); align-items:center; gap:var(--space-2); border-bottom:var(--bw-hair) solid var(--border-strong);}
.dna-app .timeline-head > h2 {margin:var(--space-0); padding-block:var(--group-title-pad); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.timeline-dates {position:relative; height:var(--table-head-h); overflow:hidden;}
.timeline-dates .tick-short {display:none;}
/* the name of the period shown, after the period buttons */
.timeline-zoom {align-self:center; padding-inline-start:var(--space-2); font-size:var(--fs-small); color:var(--text-2); white-space:nowrap;}
/* Too narrow for the full dates (set by the chart): only the day numbers. */
.timeline-dates.is-short .tick-full {display:none;}
.timeline-dates.is-short .tick-short {display:inline;}
.timeline-dates.is-week > span {display:flex; flex-direction:column; align-items:center; width:var(--bar-width); padding-inline:var(--space-0); line-height:var(--lh-tight);}
.timeline-dates > span {position:absolute; top:50%; transform:translateY(-50%); left:var(--bar-left); padding-inline-start:var(--space-3); font-size:var(--fs-caption); color:var(--text-2); white-space:nowrap;}
.timeline-row {display:grid; grid-template-columns:minmax(var(--space-0),1fr) minmax(var(--space-0),3fr); align-items:center; gap:var(--space-2); padding-block:var(--row-pad); box-shadow:inset 0 var(--bw-hair) 0 var(--border);}
.timeline-head + .timeline-row {box-shadow:none;}
.dna-app .timeline-row > .task-title {min-height:var(--space-0); font-weight:var(--fw-regular); height:var(--row-line-h); line-height:var(--row-line-h); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.timeline-track {position:relative; min-height:var(--row-line-h);}
.timeline-track > span {font-size:var(--fs-small); font-weight:var(--fw-light); line-height:var(--row-line-h);}
.dna-app button.timeline-bar {position:absolute; top:50%; transform:translateY(-50%); left:var(--bar-left); width:var(--bar-width); height:var(--timeline-bar-h); min-height:var(--space-0); padding:var(--space-0); background:var(--timeline-bar); border:none; border-radius:var(--radius-pill); cursor:pointer;}
.dna-app button.timeline-bar.delayed {background:var(--accent-alert); color:var(--on-alert);}
.timeline-today {position:absolute; top:var(--space-0); bottom:var(--space-0); left:var(--bar-left); border-left:var(--bw-hair) solid var(--text); z-index:var(--z-raised); pointer-events:none;}
.kpi-cards {display:grid; grid-template-columns:repeat(3,minmax(var(--space-0),1fr)); gap:var(--space-3);}
.c-kpi {border-top:var(--bw-hair) solid var(--border); padding-top:var(--space-4); min-width:var(--space-0);}
.c-kpi .k-l {font-size:var(--fs-label); letter-spacing:var(--ls-label); text-transform:var(--tt-label); color:var(--text-3);}
.c-kpi .k-v {font-size:var(--fs-app-kpi); line-height:var(--lh-tight); font-weight:var(--fw-extralight); letter-spacing:var(--ls-num); margin:var(--space-3) var(--space-0) var(--space-2); font-variant-numeric:var(--figures-tabular);}
.c-kpi .k-s {color:var(--text-3); font-size:var(--fs-caption);}
.kpi-charts {display:flex; flex-wrap:wrap; align-items:start; gap:var(--space-3);}
.kpi-chart {flex:1 1 var(--col-min-md); width:100%; margin:var(--space-0); max-width:var(--line-modal-w); min-width:var(--space-0);}
.kpi-chart svg {display:block; width:100%; height:auto;}
.kpi-chart-round {max-width:var(--menu-w);}
.kpi-chart figcaption {font-size:var(--fs-small); margin-bottom:var(--space-3);}
@media (max-width:767px) {
 .board-segments {display:flex;}
 .task-board {grid-template-columns:minmax(var(--space-0),1fr);}
 .board-column[data-active=false] {display:none;}
 .task-toolbar > .task-filters, .task-toolbar.page-bar > .task-filters {display:none;}   /* phones use the Filters button */
 .dna-app .task-filter-button {display:flex;}
 .task-toolbar {gap:var(--space-0); flex-wrap:nowrap;}
 .task-toolbar > .c-btn {flex:none;}
 .task-toolbar > .c-seg {flex:none; margin:var(--space-0); gap:var(--space-0);}
 .task-toolbar > .task-new {margin-left:auto;}
 .task-filters > .c-field {flex-basis:100%;}
 .kpi-charts {flex-direction:column;}
 .kpi-chart {flex:auto;}
 .task-screen {padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom));}
 .kpi-cards {grid-template-columns:repeat(2,minmax(var(--space-0),1fr));}
 .calendar-day {padding:var(--space-1);}
 .calendar-day .task-grip {padding:var(--space-1); font-size:var(--fs-caption); min-width:var(--space-0); width:100%; overflow-wrap:anywhere;}
}
.owner-statuses {display:flex; flex-direction:column; align-items:flex-start;}
.task-status-button {display:inline-flex; flex-wrap:wrap; gap:var(--space-2); align-items:center; min-height:var(--tap); padding:var(--space-0); border:0; font:inherit; color:var(--text); background:transparent; text-align:start; cursor:pointer;}
.task-status-button:focus-visible {outline:var(--bw-focus) solid var(--focus-ring); outline-offset:var(--focus-offset);}

@media (max-width:767px) {
 .calendar-day [data-task] .task-title {white-space:nowrap; overflow:hidden; text-overflow:ellipsis; width:100%;}
 .calendar-day .task-grip {width:auto; margin-block:var(--space-2);}
}
.update-reload { position: fixed; z-index: 200; inset-inline: var(--space-3); bottom: var(--space-3); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--frame); color: var(--text); border: var(--bw-hair) solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-2); overflow-wrap: anywhere; }
.update-reload span { min-width: 0; }
.update-reload button { flex-shrink: 0; }
.update-notes { white-space: pre-wrap; overflow-wrap: anywhere; }
.file-picker {min-width:var(--space-0);}
.file-picker > .break-word {min-width:var(--space-0); flex:1;}

/* T-010 */
.network-state {grid-template-columns:minmax(var(--space-0),1fr);}
.network-copy-row {display:flex; align-items:center; gap:var(--space-2); min-width:var(--space-0);}
.network-copy-row > :first-child {min-width:var(--space-0); overflow-wrap:anywhere;}
.network-copy-row > .c-btn {flex-shrink:0;}

/* T-011 */
.settings-card-heading {display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); cursor:pointer; min-width:var(--space-0);}
.settings-card-heading h2 {font-size:var(--fs-app-h); min-width:var(--space-0); overflow-wrap:anywhere;}
.settings-card-heading > button, .theme-toggle {flex-shrink:0;}
.settings-card-heading > button[aria-expanded=true] .icon-wrap {transform:rotate(180deg);}
.settings-card-body {min-width:var(--space-0);}
.settings-card-body[hidden] {display:none;}

.c-inwrap .c-input.has-trail {padding-right:calc(var(--tap) + var(--space-2));}
.c-inwrap .c-input.has-trail-2 {padding-right:calc(var(--tap) + var(--control-h-m) + var(--space-2));}
/* Resizable table columns: drag the edge of a heading; the button at the top right resets the layout.
   Phones keep the default stacked layout, so the saved widths and the controls apply from the width where tables stop stacking (45em), like every other table. */
.col-resize {display:none;}
@media (min-width:45.001em) {
  .c-table th, .minutes-table th {position:relative;}
  .col-resize {display:block; position:absolute; inset-block:var(--space-0); inset-inline-end:var(--space-0); width:var(--space-2); cursor:col-resize; touch-action:none; z-index:var(--z-raised);}
  .col-resize::after {content:""; position:absolute; inset-block:var(--space-2); inset-inline-end:var(--space-0); border-inline-end:var(--bw-hair) solid var(--border-strong); opacity:0; transition:opacity var(--dur-fast) var(--ease-standard);}
  thead:hover .col-resize::after, .col-resize:active::after {opacity:1;}
  .is-resized {table-layout:fixed;}
  .c-table.is-resized td {overflow:hidden; text-overflow:ellipsis;}
}
@media (max-width:45em) {
  .table-reset {display:none;}
  .is-resized {width:auto !important;}
  .is-resized col {width:auto !important;}
}
/* Home: the page title with the desktop-shortcut button on the same line; the welcome is plain like My tasks. */
.home-head {grid-template-columns:minmax(var(--space-0), 1fr) auto; align-items:center;}
/* Project page: the archive icon sits on the title line; the description runs under both. */
.project-page-head {row-gap:var(--space-0);}
.project-page-head > .project-head {display:contents;}
.project-page-head > .project-head > .project-description {grid-column:1 / -1;}
.project-page-head > .home-device {grid-row:1; grid-column:2;}
.home-welcome p {margin:var(--space-0);}
/* Exception to the group rule (owner's choice): the welcome group has no top line and no top space. */
.dna-app .app-scroll section.home-welcome.row-group {border-top:none; padding-top:var(--space-0);}
/* The greeting is Regular; only the person's name in it stays Medium. */
.dna-app main .home-welcome > h2 {font-weight:var(--fw-regular);}
.dna-app main .home-welcome > h2 .home-name {font-weight:var(--fw-menu-title);}
.home-name {font-weight:var(--fw-menu-title);}
/* Every text box: one line high, grows with the text up to five lines, then scrolls. Descriptions in
   dialogs take the full width under the name. */
.dna-app textarea.c-input {field-sizing:content; min-height:var(--control-h-m); max-height:calc(5lh + 2 * var(--space-3)); overflow-y:auto; resize:none;}
.lm .form-grid > .c-field:has(textarea) {grid-column:1 / -1;}
/* Tables with a description column (projects, notes, votes, users, a project's minutes): the name and the description share the free
   width (name 35%, description 65%), each one line ending in "...", so the table fits the page without scrolling sideways. */
@media (min-width:45.001em) {
  .c-table:has(.col-desc) :is(th, td).main {width:35%; max-width:var(--space-0); white-space:nowrap;}
  .c-table :is(th, td).col-desc:not(.main) {width:65%; max-width:var(--space-0);}
  .c-table.is-resized:has(.col-desc) :is(th, td):is(.main, .col-desc) {max-width:none;}
}
.cell-clip {display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text-3);}
/* Project page: name (Medium) with the description beside it, smaller; filter and New minute on one line. */
.project-back {font-size:var(--fs-small);}
.project-head {display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--space-2) var(--space-4);}
.project-title {font-weight:var(--fw-menu-title);}
.project-head .project-description {flex:1 1 24ch; min-width:var(--space-0); margin:var(--space-0); font-size:var(--fs-body); color:var(--text-3);}
.dna-app .project-head textarea.project-description {border-bottom-color:transparent;}
.dna-app .project-head textarea.project-description:is(:hover, :focus) {border-bottom-color:var(--border-strong);}
.project-tools {align-items:flex-end;}
/* Meeting header as compact table rows: label on the left, value on the right, one table-row height each,
   a hairline under every row. Two fields per line on wide screens; the description is last, full width. */
.minute-info {grid-template-columns:minmax(var(--space-0), 1fr); gap:var(--space-0) var(--space-5); align-items:stretch;}
.minute-info .wide {grid-column:1 / -1;}
.minute-info > :is(.c-field, .minute-picker, .stack) {display:grid; grid-template-columns:var(--minute-info-label-w) minmax(var(--space-0), 1fr); align-items:center; column-gap:var(--space-3); gap:var(--space-0) var(--space-3); min-height:var(--minute-info-row-h); padding-block:var(--space-1); border-bottom:var(--bw-hair) solid var(--border);}
.minute-info > .c-field > :is(label, .t-label) {margin:var(--space-0); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.minute-info > .c-field > :not(label, .t-label) {grid-column:2;}
.dna-app .minute-info .c-input, .dna-app .minute-info .csel-btn {height:var(--control-h-s); min-height:var(--control-h-s); border-bottom-color:transparent;}
.dna-app .minute-info textarea.c-input {height:auto; padding-block:var(--space-1);}
.dna-app .minute-info :is(.c-input, .csel-btn):is(:hover, :focus) {border-bottom-color:var(--border-strong);}
.minute-info .minute-value {padding-block:var(--space-1);}
/* A fieldset legend cannot be a grid or flex item, so it floats in the label column and the rest sits beside it. */
.minute-info > .minute-picker {display:block;}
.minute-info > .minute-picker legend {float:left; width:var(--minute-info-label-w); margin:var(--space-0) var(--space-3) var(--space-0) var(--space-0); padding:var(--space-0); line-height:var(--control-h-s); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.minute-info > .minute-picker > :not(legend) {display:flow-root; margin:var(--space-0);}
.minute-info > .minute-picker > .actions:empty {display:none;}
@media (min-width:900px) {.minute-info {grid-template-columns:repeat(2, minmax(var(--space-0), 1fr));}}
/* The text-format bar is one table row high. */
.minute-toolbar {padding-block:var(--space-0); padding-inline:var(--space-2); box-sizing:border-box; height:var(--minute-info-row-h); min-height:var(--minute-info-row-h); align-items:center;}
.dna-app .minute-toolbar :is(.c-input, .c-btn, select) {height:var(--control-h-s); min-height:var(--control-h-s);}
.dna-app .minute-toolbar .c-btn.icon {width:var(--control-h-s);}
/* Labels sit right on top of their value: no gap, and on wide screens one-line boxes are one small control high. */
.dna-app .c-field {gap:var(--space-0);}
@media (min-width:900px) {
  .dna-app .c-input:not(textarea), .dna-app .csel-btn {height:var(--control-h-s); min-height:var(--control-h-s);}
}
.dna-app textarea.c-input {min-height:var(--control-h-s); max-height:calc(5lh + 2 * var(--space-1)); padding-block:var(--space-1); padding-inline-end:var(--scroll-gutter);}
/* Past five lines a text box scrolls with the brand dot (scroll.js), drawn in a lane beside the text. */
:where(*):has(> textarea.c-input) {position:relative;}
.scroll-lane.in-field {bottom:auto; right:var(--space-0);}
/* The six-dot drag column is narrow and has no heading text, so the headings start above the names. */
.project-table .col-grip {width:var(--minute-handle-w); padding-inline:var(--space-0); text-align:center;}
.project-table .col-grip .grip {margin-inline:auto;}
.project-table .col-grip .col-resize {display:none;}
/* People pickers: the chips stay on one line inside the row (it scrolls sideways when full); + opens a tick list. */
.picker-line {display:flex; flex-wrap:nowrap; align-items:center; gap:var(--space-2); min-width:var(--space-0);}
.minute-info > .minute-picker > .picker-line {display:flex;}
.minute-chips {flex:0 1 auto; flex-wrap:nowrap; overflow-x:auto; min-width:var(--space-0); gap:var(--space-1);}
.dna-app .c-btn.secondary.minute-chip {flex:none; height:var(--space-5); min-height:var(--space-5); padding:var(--space-0) var(--space-2); gap:var(--space-1); white-space:nowrap; text-transform:none; letter-spacing:var(--ls-caption); font-size:var(--fs-caption); font-weight:var(--fw-regular);}
.picker-wrap {flex:none; position:relative;}
.minute-cell .fm-select.picker-wrap {overflow:visible;}
@supports (anchor-name:--fm-select) {.picker-add[aria-expanded=true] {anchor-name:--fm-select;}}
.fm-select .picker-pop {min-width:calc(var(--space-8) * 3);}
/* The people list opens toward the left, under the + button. */
.fm-select .picker-pop {left:auto; right:var(--space-0);}
@supports (anchor-name:--fm-select) {.fm-select .picker-pop {left:auto; right:anchor(right);}}
.picker-pop .csel-opt {min-height:var(--control-h-s); cursor:pointer;}
/* The text-format bar ends with one hairline, the same as the one above it. */
.minute-toolbar {border-bottom:var(--bw-hair) solid var(--border);}
/* Project page: the description sits under the name on one line ending in "...", inside the page width. */
.project-head {display:grid; gap:var(--space-0);}
.project-head .project-description {display:block; width:100%; max-width:100%; flex:none; margin:var(--space-0); font-size:var(--fs-small); color:var(--text-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.dna-app .project-head input.project-description {height:var(--control-h-s); min-height:var(--control-h-s); border-bottom-color:transparent; font-size:var(--fs-small); color:var(--text-3);}
.dna-app .project-head input.project-description:is(:hover, :focus) {border-bottom-color:var(--border-strong); color:var(--text);}
/* Phones have their own back button, so the side menu's back/forward is for wide screens only. */
@media (max-width:45em) {
  .minute-dock .dock-nav, .minute-dock.nav-only {display:none;}
}
.minute-chips:empty {display:none;}
.dna-app .picker-add.c-btn.s {width:var(--control-h-s); height:var(--control-h-s); min-height:var(--control-h-s); min-width:var(--control-h-s);}
.minute-info > .minute-picker > .picker-line {min-height:var(--control-h-s);}
/* Every icon button in the pages is one size: a 32 px rounded square with the 24 px icon, like the meeting table's
   row actions. Text buttons in a page bar are 32 px high too. On touch screens an invisible 44 px area around them keeps them easy to hit. */
.dna-app .c-btn.icon {width:var(--control-h-s); height:var(--control-h-s); min-width:var(--control-h-s); min-height:var(--control-h-s); padding:var(--space-0);}
.dna-app .page-bar > .c-btn:not(.icon) {height:var(--control-h-s); min-height:var(--control-h-s);}
@media (pointer:coarse) {
  .dna-app .c-btn.icon {width:var(--control-h-s); height:var(--control-h-s); min-width:var(--control-h-s); min-height:var(--control-h-s);}
  .dna-app :is(.c-btn.icon, .page-bar > .c-btn)::before {content:""; position:absolute; inset:calc((var(--tap) - var(--control-h-s)) / -2);}
}

/* Titles sit close to what they head. */
.minute-section, .minute-attachments {gap:var(--space-1); padding-top:var(--space-3);}
.minute-section > .notice, .minute-attachments > .notice {margin:var(--space-0);}
/* The + of a people picker sits at the right edge of its cell. */
.minute-cell .picker-line, .minute-info .picker-line {width:100%;}
.picker-wrap {margin-inline-start:auto;}
/* Dragging a row: a soft fill only, no outline. */
.minute-row.drop-target {outline:none; background:var(--surface-2);}
.minute-row.drop-target > td {background:var(--surface-2);}
/* Task board: each column starts on a hairline, title close under it; compact cards. */
.board-column {gap:var(--space-2); border-top:var(--bw-hair) solid var(--border); padding-top:var(--space-2);}
.board-column > h2 {margin:var(--space-0);}
.task-card.pane {--card-pad:var(--space-2) var(--space-3); gap:var(--space-0) var(--space-2);}
.dna-app .task-card .task-title {min-height:var(--space-0); height:auto;}
.task-move summary {padding:var(--space-1);}
.minute-section-head {align-items:center;}
/* Section titles in any stack sit 4px above their content (the stack's own gap stays between other items). */
.stack:not(.minute-section, .minute-attachments, .board-column) > :is(h2, h3):not(:last-child) {margin-bottom:calc(var(--space-1) - var(--space-3));}
.board-column {gap:var(--space-1);}
/* Beats the generic section hairline rule (line 138) so all three columns start the same way. */
.app-scroll .task-board > .stack.board-column[data-column] {border-top:var(--bw-hair) solid var(--border); padding-top:var(--space-2);}
/* Notes: + and the two filters on one line above the table. */
.notes-toolbar {display:flex; flex-wrap:wrap; align-items:end; gap:var(--space-3);}
.notes-toolbar > .c-field {flex:0 1 auto; min-width:var(--space-0);}
.notes-screen .notes-body {display:block;}
/* A table with saved column widths still fills the page; extra room is shared between its columns. */
.c-table.is-resized {min-width:100%;}
/* Every table row is 45px, like the meeting Tasks table: one line of text, cut with "..." (full text on hover),
   32px buttons and a 32px drag handle. Phones keep their card layout. */
@media (min-width:45.001em) {
  .dna-app .c-table tbody td {height:var(--minute-info-row-h); padding-block:var(--space-0); vertical-align:middle; white-space:nowrap;}
  .dna-app .c-table tbody td.main {max-width:var(--space-0); min-width:calc(var(--space-6) * 6); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .dna-app .c-table tbody td.main > * {overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .dna-app .c-table:has(.col-desc) :is(th, td).main {min-width:calc(var(--space-6) * 4);}
  .dna-app .c-table :is(th, td).col-desc:not(.main) {min-width:calc(var(--space-6) * 3);}
  .dna-app .c-table tbody td.col-desc {overflow:hidden; text-overflow:ellipsis;}
  .dna-app .c-table button.grip {height:var(--control-h-s); min-height:var(--control-h-s); width:var(--control-h-s); min-width:var(--control-h-s);}
}
/* Page bar: the same one line under every page title. Icon buttons, then filters with their name inside
   the box ("Project: All"), then the table's reset button at the right end. */
.page-bar {display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2); min-height:var(--minute-info-row-h); min-width:var(--space-0);}
.page-bar > .c-field, .page-bar .task-filters > .c-field {flex:0 1 auto; min-width:var(--space-0); gap:var(--space-0); margin:var(--space-0);}
.page-bar .task-filters {display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2); flex:0 1 auto;}
.page-bar .c-field > label {position:absolute; width:var(--bw-hair); height:var(--bw-hair); overflow:hidden; clip-path:inset(50%);}
.dna-app .page-bar .csel-btn::before {content:attr(aria-label) ": "; position:static; inset:auto; white-space:pre; color:var(--text-3);}
.dna-app .page-bar :is(.c-input, .csel-btn) {width:auto; height:var(--control-h-s); min-height:var(--control-h-s); padding-block:var(--space-0);}
.dna-app .task-toolbar.page-bar .task-new {margin-left:var(--space-0);}
@media (min-width:45.001em) { .task-sort {display:none;} }
/* A card title is exactly one line high, so cards side by side start their content at the same height. */
.pane > :is(h2, h3):first-child {block-size:1lh; overflow:visible;}
/* A stack stretched by its neighbour (two cards side by side) keeps its content at the top. */
.stack {align-content:start;}
/* Filters in the page bar keep their full text ("Project: All") on one line. */
.page-bar .c-field, .page-bar .task-filters > .c-field, .page-bar .task-filters {flex:none;}
.page-bar .fm-select, .dna-app .page-bar .csel-btn {width:auto;}
.dna-app .page-bar .csel-btn {display:inline-flex; align-items:center; gap:var(--space-1); white-space:nowrap;}
/* Sortable headings show their name, then the sort arrows. */
.c-table th .th-sort {flex-direction:row-reverse;}
.page-bar .csel-btn .v, .page-bar .csel-btn::before {flex:none;}
.c-table th .th-sort {white-space:nowrap;}
/* Compact lists: no empty placeholder lines between the toolbar line and the table, and short header rows. */
.app-scroll .stack > div:empty:not([role], [aria-live]) {display:none;}
/* An empty live message area stays for screen readers but takes no place, so it adds no gap under a title. */
.app-scroll .stack > [aria-live]:empty {position:absolute;}
.dna-app .c-table thead th {padding-block:var(--space-0);}
@media (min-width:45.001em) {.dna-app .c-table thead th button {height:auto; min-height:var(--space-0);}}
/* Settings: closed cards are one 45px line, 8px apart; the app icon sits inside the Company card. */
.settings-screen {row-gap:var(--space-2);}
.settings-screen .settings-card {--card-pad:calc((var(--minute-info-row-h) - var(--control-h-s)) / 2 - var(--bw-hair)) var(--space-4); gap:var(--space-2);}
.settings-screen .settings-card-body:not([hidden]) {padding-bottom:var(--space-2);}
.settings-screen .settings-card-body > :first-child {margin-top:var(--space-0);}
.install-type {align-items:center; flex-wrap:nowrap;}
.install-type > p {margin:0;}
.minute-dock .dock-table {display:none;}
/* The reset button shows only while a table has dragged column widths. */
@media (min-width:45.001em) { body:has(.is-resized) .minute-dock .dock-table {display:flex;} }
/* Invite users: one line per person (name, email, role, language, remove); stacked on phones. */
.invite-row {display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) minmax(0,0.8fr) minmax(0,0.8fr) auto; gap:var(--space-2); align-items:end; border:none; padding:var(--space-0); margin:var(--space-0); min-width:var(--space-0);}
.invite-row > .c-field {margin:var(--space-0); min-width:var(--space-0);}
.invite-row .invite-remove {margin-bottom:var(--space-1);}
.invite-result {display:grid; gap:var(--space-1); padding-block:var(--space-2); border-bottom:var(--bw-hair) solid var(--border);}
.invite-result:last-child {border-bottom:none;}
.invite-result p {margin:var(--space-0);}
.invite-qr {align-items:center; justify-items:center; text-align:center;}
@media (max-width:45em) {
  .invite-row {grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; padding-bottom:var(--space-3); border-bottom:var(--bw-hair) solid var(--border);}
  .invite-row > .c-field:has([name=display_name], [name=email]) {grid-column:1 / -1;}
}
/* Task and note files and server link: one line each, the Copy button right after the link. */
.item-link {display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2); min-width:var(--space-0);}
.item-link-label {color:var(--text-3);}
.item-files-box h3 {font-size:var(--fs-body); font-weight:var(--fw-regular); margin:var(--space-0);}
.item-files {list-style:none; margin:var(--space-0); padding:var(--space-0); display:grid; gap:var(--space-1);}
.item-file {display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2); min-width:var(--space-0);}
.item-file-size {font-size:var(--fs-caption); color:var(--text-3);}

/* ==============================================================

   UI rules (FedisCove notes/UI-RULES.md, decision D17). This last section is the one shared place for the app's
   spacing, groups, rows, tables, pop-ups, dropdowns, checkboxes, tooltips, dots and hover; it wins over the older
   rules above. Values come from the "UI rules" tokens at the end of tokens.css.
   ===================================================================== */

/* ---- type: titles and labels Medium, body Regular, secondary sentences Light ---- */
.dna-app h1, .dna-app .app-scroll h2, .dna-app .lm-head h2, .dna-app .c-field > label, .dna-app .c-label,
.dna-app .roles legend, .dna-app .minute-picker legend {font-weight:var(--fw-menu-title);}
.dna-app :is(.notice, .c-help, .fine, .muted, .auth-sub, .project-description, .cell-clip, .item-file-size, .minute-meta, .form-status) {font-weight:var(--fw-light);}

/* ---- groups: no cards. A group is a top and a bottom line, 10 px inside, 24 px between groups ---- */
.dna-app :is(.pane, .card, .welcome-card):not(.minute-row, .task-card, .network-choice, .kpi-chart) {background:none; border:none; border-radius:var(--space-0); box-shadow:none;
  border-block:var(--bw-hair) solid var(--border-strong); border-bottom-width:var(--group-end-w); padding:var(--group-pad) var(--space-0);}
.dna-app .stack:has(> :is(.pane, .card, .welcome-card):not(.minute-row, .task-card, .network-choice, .kpi-chart)) {--stack-gap:var(--group-gap); row-gap:var(--group-gap);}
/* the older "hair line above every titled section" rule: a group draws its own lines */
.app-scroll :is(section, article, div):is(.pane, .card, .welcome-card):has(> h2:first-child):not(:first-child) {padding-top:var(--group-pad); border-top-color:var(--border-strong);}
/* inside a group: the title bar is 4 / title / 4, the rows below it 8 / content / 8 */
.dna-app :is(.pane, .card, .welcome-card).stack {row-gap:calc(var(--row-pad) * 2);}
.dna-app :is(.pane, .card, .welcome-card) > :is(h2, h3):first-child, .dna-app .settings-card-heading {padding-block:var(--group-title-pad); margin:var(--space-0); block-size:auto;}
.dna-app :is(.pane, .card, .welcome-card).stack > :is(h2, h3, .settings-card-heading):first-child:not(:last-child) {margin-bottom:calc(var(--row-pad) - var(--row-pad) * 2);}
/* Settings: every part is a group that opens on its title line */
.settings-screen .settings-card {--card-pad:var(--group-pad) var(--space-0); padding:var(--group-pad) var(--space-0); gap:var(--space-0);}
.settings-screen {--stack-gap:var(--group-gap); row-gap:var(--group-gap);}
.settings-screen .settings-card-body:not([hidden]) {padding-top:var(--row-pad); padding-bottom:var(--space-0);}
.settings-screen .settings-card-body.stack {row-gap:calc(var(--row-pad) * 2);}
/* the wizard keeps its steps on the page, with no group lines */
.dna-app .wizard-card .pane {border:none; padding:var(--space-0);}
/* a choice clicked as a whole (hosting type): a row with an inset line, no box */
.dna-app .pane.network-choice {background:none; border:none; border-radius:var(--space-0); padding:var(--row-pad) var(--space-0); box-shadow:inset 0 calc(var(--bw-hair) * -1) 0 var(--border);}
/* task board: each task is a row of its column */
.dna-app .task-card.pane {--card-pad:var(--row-pad) var(--space-0); background:none; border:none; border-radius:var(--space-0); box-shadow:inset 0 var(--bw-hair) 0 var(--border);}
.dna-app .board-column > .task-card.pane:first-of-type {box-shadow:none;}
.dna-app .board-column {row-gap:var(--space-0);}
/* An empty column's "No records" line is a row like a task: 8 / text / 8, level with a task's first line. */
.dna-app .board-column > .notice {margin:var(--space-0); padding-block:var(--row-pad); line-height:var(--row-line-h);}
.dna-app .kpi-chart.pane {background:none; border:none; border-radius:var(--space-0); border-block:var(--bw-hair) solid var(--border-strong); border-bottom-width:var(--group-end-w); padding:var(--group-pad) var(--space-0);}
/* Device tiles are cells inside a group (Profile, Users QR, first sign-in): no lines of their own. */
.dna-app .device-tile.pane {border-block:none; padding:var(--space-0);}

/* ---- rows and lists: 8 / content / 8, a hair line between rows that adds no height, none above the first ---- */
.dna-app :is(.vote-entry, .invite-result, .signature-list > li, .item-file, .vote-participation > li, .checklist > li, .list-rows > *) {padding-block:var(--row-pad); border-bottom:none; box-shadow:inset 0 var(--bw-hair) 0 var(--border);}
.dna-app :is(.vote-entry, .invite-result, .signature-list > li, .item-file, .vote-participation > li, .checklist > li, .list-rows > *):first-child {box-shadow:none;}
.dna-app :is(.item-files, .checklist, .invite-results, .signature-list, .vote-participation, .list-rows) {gap:var(--space-0); row-gap:var(--space-0);}
/* A list that follows another list in the same group continues it: its first row gets the line too. */
.dna-app .list-rows + .list-rows > :first-child {box-shadow:inset 0 var(--bw-hair) 0 var(--border);}
/* The shared list of rows: one line per row, body weight; long text is cut with "..." (full text in the tooltip). */
.list-rows {display:flex; flex-direction:column; min-width:var(--space-0);}
.list-rows > * {margin:var(--space-0); line-height:var(--row-line-h);}
.list-row {display:flex; align-items:center; gap:var(--space-2); min-width:var(--space-0); font-weight:var(--fw-regular);}
.list-row-main {flex:1 1 auto; min-width:var(--space-0); min-height:var(--space-0); overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.dna-app .list-row > .task-title.list-row-main {height:auto; min-height:var(--space-0); font-weight:inherit;}
/* Badges inside a row stay pills but no taller than the row's text line, so every one-line row is 38px. */
.dna-app .list-row :is(.minute-badge, .c-badge) {box-sizing:border-box; height:var(--row-line-h); padding-block:var(--space-0); align-items:center;}
/* A group made only of a title bar and rows: no gap, the title bar is 4 / title / 4 and each row 8 / content / 8. */
.dna-app .app-scroll .row-group.stack {row-gap:var(--space-0);}
.dna-app .app-scroll .row-group > h2:first-child {padding-block:var(--group-title-pad); margin:var(--space-0);}
/* A list of rows that shows 5 rows and scrolls for the rest, with the shared scroll dot beside it. */
.row-group {position:relative;}
.list-scroll {max-height:calc(var(--list-rows-max) * (var(--row-line-h) + var(--row-pad) * 2)); overflow-y:auto; padding-inline-end:var(--scroll-gutter);}
/* A group title with an icon button right after it; the button keeps the title bar at 4 / title / 4. */
.group-title {display:flex; align-items:center; gap:var(--space-2);}
.dna-app .group-title > .c-btn.icon {height:auto; min-height:var(--space-0);}
/* A whole row that opens something: plain text, the shared hover background. */
.dna-app a.row-link {color:inherit; text-decoration:none; cursor:pointer;}
.dna-app a.row-link:hover, .dna-app a.row-link:focus-visible {background:var(--hover-bg);}
/* The task a link pointed to (Home > My tasks): the selected background. */
.dna-app [data-task].is-focus {background:var(--selected-bg);}
/* the meeting header: label and value rows, 8 / 22 px control / 8 */
.dna-app .minute-info > :is(.c-field, .minute-picker, .stack) {min-height:var(--space-0); padding-block:var(--row-pad); border-bottom:none; box-shadow:inset 0 calc(var(--bw-hair) * -1) 0 var(--border);}
.dna-app .minute-info > .minute-picker legend {line-height:var(--row-line-h);}
.dna-app .minute-info .minute-value {padding-block:var(--space-0);}
.dna-app .minute-info textarea.c-input {padding-block:var(--space-0);}
.dna-app .minute-info > .minute-picker > .picker-line {min-height:var(--row-line-h);}
.dna-app .minute-toolbar {height:auto; min-height:var(--space-0); padding-block:var(--row-pad);}
.dna-app .page-bar {min-height:var(--space-0); padding-block:var(--row-pad);}

/* ---- tables: one standard. Header 32, rows 36, cells 8 apart and 12 from the edges, strong header line, row lines,
   no line under the last row, header pinned and filled with the panel ---- */
.dna-app :is(.c-table, .minutes-table) th {height:var(--table-head-h); padding-block:var(--space-0); padding-inline:calc(var(--table-cell-gap) / 2);
  font-size:var(--fs-caption); letter-spacing:var(--ls-th); text-transform:var(--tt-label); font-weight:var(--fw-regular); color:var(--text-3);
  border-top:none; border-bottom:var(--bw-hair) solid var(--border-strong); vertical-align:middle;}
.dna-app .c-table td {padding-block:var(--space-0); padding-inline:calc(var(--table-cell-gap) / 2); font-size:var(--fs-small); line-height:var(--lh-small); font-weight:var(--fw-light); border-bottom:var(--bw-hair) solid var(--border);}
/* Every table: the first column in regular, the rest in light. */
.dna-app .c-table td:is(.main, :first-child), .dna-app .minute-row > td.minute-cell:nth-child(2) {font-weight:var(--fw-regular);}
.dna-app :is(.c-table, .minutes-table) :is(th, td):first-child {padding-inline-start:var(--table-edge);}
.dna-app :is(.c-table, .minutes-table) :is(th, td):last-child {padding-inline-end:var(--table-edge);}
.dna-app :is(.c-table, .minutes-table) > tbody > tr:last-child > td {border-bottom:none;}
.dna-app .c-table thead th button {height:var(--table-head-h); min-height:var(--space-0);}
.dna-app .c-table thead th {position:sticky; top:var(--space-0); z-index:var(--z-raised); background:var(--panel-sheen) fixed;}
.dna-app .lm .c-table thead th {background:transparent;}
@media (min-width:45.001em) {
  .dna-app .c-table tbody td {height:var(--table-row-h); padding-block:var(--space-0);}
  .dna-app .project-table td {height:var(--table-row-h);}
  /* the row hover covers the whole row */
  .dna-app .c-table tbody tr > td:first-child::before {border-radius:var(--space-0); inset:var(--space-0);}
}
.dna-app .c-table tbody tr:hover > td:first-child::before, .dna-app .c-table tbody tr.is-hover > td:first-child::before {background:var(--hover-bg);}
.dna-app .c-table tbody tr.sel > td:first-child::before, .dna-app .c-table tbody tr.is-selected > td:first-child::before {background:var(--selected-bg);}
@media (max-width:45em) {
  /* phones: the table becomes one block per row, 8 / content / 8, lines between rows */
  .dna-app .c-table tr {padding-block:var(--row-pad); border-bottom:none; box-shadow:inset 0 var(--bw-hair) 0 var(--border);}
  .dna-app .c-table tbody > tr:first-child {box-shadow:none;}
  .dna-app .c-table td, .dna-app .c-table td:is(:first-child, :last-child) {padding:var(--space-1) var(--space-0); border:none;}
  .dna-app .c-table td::before {font-size:var(--fs-caption); letter-spacing:var(--ls-th); margin-bottom:var(--space-0);}
}
/* the meeting's own table follows the same lines */
@media (min-width:45.001em) {
  .dna-app .minutes-table > thead {background:var(--panel-sheen) fixed;}
  .dna-app .minute-rows > .minute-row:last-child > td {border-bottom:none;}
  /* Same spacing as every table: cells 8 apart and 12 from the edges, regular text, and a one-line row is 36px.
     Here the text wraps, so a row grows by whole lines: text cells keep 7 / line / 7, button cells 2 / 32 / 2, top aligned. */
  .dna-app .minute-row > td {height:auto; vertical-align:top; padding-block:calc((var(--table-row-h) - var(--row-line-h)) / 2); padding-inline:calc(var(--table-cell-gap) / 2); font-size:var(--fs-small); line-height:var(--row-line-h); font-weight:var(--fw-light);}
  .dna-app .minute-row > td:is(.minute-handle, .minute-row-controls) {padding-block:calc((var(--table-row-h) - var(--control-h-s)) / 2);}
  .dna-app .minute-row > td.minute-handle, .dna-app .minutes-table th:first-child {padding-inline:var(--space-0);}
  .dna-app .minute-row > td:last-child {padding-inline-end:var(--table-edge);}
  .dna-app .minute-row > td.minute-cell {overflow-wrap:anywhere;}
  .dna-app .minute-cell :is(.c-input, .csel-btn, .minute-rich, .minute-value), .dna-app .minute-cell .c-input:is(:focus, :hover) {height:auto; min-height:var(--row-line-h); padding:var(--space-0); font-size:inherit; font-weight:inherit; line-height:var(--row-line-h);}
  .dna-app .minute-cell textarea.c-input {resize:none; overflow:hidden; field-sizing:content; min-height:var(--row-line-h); max-height:none; padding:var(--space-0);}
  .dna-app .minute-cell :is(.minute-chip, .minute-rich, .minute-rich *, .task-status-button, .task-status-button *, .minute-value) {font-weight:inherit;}
  .dna-app .minute-cell .minute-rich > * {margin:var(--space-0);}
  .dna-app .minute-cell .c-field {gap:var(--space-0);}
  .dna-app .minute-cell .task-status-button {height:auto; min-height:var(--row-line-h);}
  .dna-app .minute-cell .minute-chips {flex-wrap:wrap; overflow:visible; row-gap:var(--space-0);}
  .dna-app .minute-cell .c-btn.secondary.minute-chip {height:var(--row-line-h); min-height:var(--space-0); font-weight:inherit;}
  .dna-app .minute-cell .picker-line {align-items:flex-start;}
  .dna-app .minute-cell .c-btn.icon.picker-add {height:var(--row-line-h); min-height:var(--space-0);}
  .dna-app .minute-handle button.grip, .dna-app .minute-row-controls .c-btn {height:var(--control-h-s); min-height:var(--control-h-s);}
  .dna-app .minute-row:hover > td:not(.minute-cell-off) {background:var(--hover-bg);}
}

/* ---- pop-ups: 24 px all round, no gaps between sections, title 4 / 4, footer 16 / line / 8 ---- */
.dna-app .lm {padding:var(--pop-pad); gap:var(--space-0);}
.dna-app .lm-head {padding-bottom:var(--group-title-pad); align-items:center;}
.dna-app .lm .lm-fields {row-gap:var(--space-0);}
.dna-app .lm .lm-fields > * {padding-block:var(--row-pad);}
.dna-app .lm .lm-fields > .form-status:empty {display:none;}
.dna-app .lm > .lm-grid > .stack {row-gap:calc(var(--row-pad) * 2);}
.dna-app .lm > .lm-grid {padding-top:var(--row-pad);}
.dna-app .lm .form-grid > .actions, .dna-app .lm .lm-content > .actions {margin-top:var(--pop-foot-gap); padding-top:var(--pop-foot-pad); border-top:var(--bw-hair) solid var(--border); justify-content:flex-end;}
/* text boxes inside pop-ups: links, paths, previews, long terms */
.dna-app .lm :is(p.break-word, a.break-word, .legal-terms, .recovery-key) {display:block; padding:var(--space-1) var(--space-2); background:var(--hover-bg); border:var(--bw-hair) solid var(--border);}

/* ---- dropdowns: 22 px, no vertical padding, 8 px at the sides, no background, the arrow 8 px after the text ---- */
html .dna-app .csel-btn.csel-btn {height:var(--row-line-h); min-height:var(--row-line-h); padding-block:var(--space-0); padding-inline:var(--dropdown-pad-x); gap:var(--space-2); background:none;}
html .dna-app .c-select .csel-btn.csel-btn {padding-right:var(--dropdown-pad-x);}
.dna-app .csel-btn::before {top:calc((var(--row-line-h) - var(--tap)) / 2); bottom:calc((var(--row-line-h) - var(--tap)) / 2);}
/* one-line text boxes share the dropdown height on screens with a mouse; touch screens keep the 44 px target */
@media (pointer:fine) {
  html .dna-app .c-input.c-input:not(textarea, select, [type=file]) {height:var(--row-line-h); min-height:var(--row-line-h); padding-block:var(--space-0);}
}
.dna-app .c-field {gap:var(--label-gap);}
.dna-app .page-bar .c-field, .dna-app .minute-info > .c-field {gap:var(--space-0);}

/* ---- checkboxes: 13 x 13, 4 px corners, strong hair border, filled when checked, no tick, 2 px focus ring ---- */
.dna-app {--check:var(--check-app);}
.dna-app .c-check .box, .dna-app .check-row input[type=checkbox], .dna-app label.network-choice .c-radio .box {border-radius:var(--radius-check); border:var(--bw-hair) solid var(--border-strong); background:var(--input-bg);}
.dna-app .c-check input:checked + .box, .dna-app .check-row input[type=checkbox]:checked, .dna-app label.network-choice .c-radio input:checked + .box {background:var(--text); border-color:var(--text);}
.dna-app .c-check .box .ic {display:none;}
.dna-app .c-check input:focus-visible + .box, .dna-app .check-row input:focus-visible {outline:var(--bw-focus) solid var(--focus-ring); outline-offset:var(--focus-offset);}

/* ---- tooltips: may wrap, at most 320 px; side-column tooltips open 8 px from the button, centred ---- */
.tip-pop {max-width:min(var(--tip-max-w), calc(100vw - var(--space-8))); white-space:pre-line;}
@supports (anchor-name:--tip) {
  @media (min-width:45.001em) {
    body:has(.minute-dock .dock-btn[data-tip-open]) .tip-pop {right:calc(anchor(left) + var(--space-2));}
  }
}

/* ---- dots: a 6 px square with 2 px corners ---- */
.cal-d[aria-current="date"] .cal-n::before {width:var(--app-dot); height:var(--app-dot); border-radius:var(--radius-2xs);}

/* ---- hover: one shared background; selected items use the secondary surface ---- */
.dna-app :is(.c-btn, .csel-opt, .cal-nav, .cal-d, .minute-format, .tag button):hover, .dna-app .csel-opt.active,
.dna-app .c-seg button:hover, .dna-app .lm .c-btn.icon:hover, .dna-app .c-modal .c-btn.icon:hover, .dna-app .c-btn.icon.del:hover {background:var(--hover-bg);}
.dna-app .lm .c-btn.icon[aria-pressed="true"], .dna-app .screen-head .c-btn.icon[aria-pressed="true"], .dna-app .csel-opt[aria-selected="true"] {background:var(--selected-bg);}
.dna-app .minute-row.drop-target, .dna-app .minute-row.drop-target > td {background:var(--hover-bg);}

/* ---- sign-in, password and recovery screens: one group, title and subtitle 4 / 4, every row 8 / 8, footer 8 / 8 ---- */
.dna-app .auth-form:not(.wizard-card) {gap:var(--space-0); flex:0 0 auto; margin-block:auto; padding:var(--group-pad) var(--space-0);}
.dna-app .auth-form > .screen-head {gap:var(--space-0);}
.dna-app .auth-form > .screen-head > h1 {padding-block:var(--group-title-pad);}
.dna-app .auth-form > .screen-head > .auth-sub {padding-block:var(--group-title-pad); margin:var(--space-0);}
.dna-app .auth-form:not(.wizard-card) .auth-fields {gap:var(--space-0); row-gap:var(--space-0);}
.dna-app .auth-form:not(.wizard-card) .auth-fields > *, .dna-app .auth-form:not(.wizard-card) > :is(.notice, .c-btn, p) {padding-block:var(--row-pad); margin:var(--space-0);}
.dna-app .auth-fields > .form-status:empty {display:none;}
.dna-app .auth-form:not(.wizard-card) .auth-fields > :is(.actions, .auth-row) {border-top:var(--bw-hair) solid var(--border);}
.dna-app .auth .c-field {gap:var(--label-gap);}
.dna-app :is(.crop-warning, .email-success) {border:none; padding-left:var(--space-0);}
.dna-app .search-bar input {height:var(--row-line-h); padding:var(--space-0); line-height:var(--row-line-h);}
/* Any page section that opens with an h2 is a group: a top line, 10px inside, 24px between groups.
   The wizard is still under review and keeps its bottom line. */
.dna-app .wizard-card {--group-end-w:var(--bw-hair);}
.app-scroll :is(section, article, div):has(> h2:first-child):not(:first-child) {border-block:var(--bw-hair) solid var(--border-strong); border-bottom-width:var(--group-end-w); padding-block:var(--group-pad);}
.app-scroll .stack:has(> :is(section, article, div):not(:first-child) > h2:first-child) {--stack-gap:var(--group-gap); row-gap:var(--group-gap);}
/* Every page: 20px from the page title to the first block, whatever gap the page uses between its other blocks. */
.dna-app .app-scroll .stack > .screen-head:not(:last-child) {margin-bottom:calc(var(--title-gap) - var(--stack-gap));}
.app-scroll :is(section, article, div):has(> h2:first-child):not(:first-child) > h2:first-child {padding-block:var(--group-title-pad); margin:var(--space-0);}
/* Minute page: header, rows, votes and files are groups; the editor's text-size select is a plain dropdown. */
.dna-app .minute-screen :is(.minute-info, .minute-section, .minute-attachments) {border-block:var(--bw-hair) solid var(--border-strong); border-bottom-width:var(--group-end-w); padding-block:var(--group-pad);}
.dna-app .minute-screen .minute-info > :last-child {border-bottom:none;}
/* Group titles 4 / title / 4 (the Tasks title shares its line with the column reset), then the content with no gap, like Home. */
.dna-app .minute-screen :is(.minute-section, .minute-attachments) {row-gap:var(--space-0);}
.dna-app .minute-screen .minute-section-head {padding-block:var(--group-title-pad);}
.dna-app .minute-toolbar :is(button.minute-format, .minute-colours, .minute-colours > summary, .minute-sep) {height:var(--row-line-h); min-height:var(--space-0);}
/* Task board: each column is a group. */
.app-scroll .task-board > .stack.board-column[data-column] {border-block:var(--bw-hair) solid var(--border-strong); border-bottom-width:var(--group-end-w); padding-block:var(--group-pad);}
.app-scroll .task-board > .board-column > h2:first-child {padding-block:var(--group-title-pad); margin:var(--space-0);}
/* Pop-ups: no gap between sections; rows keep their own 8/8 and the footer its 16px. */
.dna-app .lm :is(.lm-content, .lm-grid) {row-gap:var(--space-0);}
/* Every title, at any level, on pages and in pop-ups: weight 500. */
.dna-app :is(main, .lm, .auth) :is(h1, h2, h3, h4) {font-weight:var(--fw-menu-title);}
/* Page forms: every field, help and button row is 8 / content / 8, with no extra gap between rows. */
.dna-app .app-scroll .form-grid:not(.page-bar *, .minute-info *) {row-gap:var(--space-0);}
.dna-app .app-scroll .form-grid:not(.page-bar *, .minute-info *) > :is(.c-field, .actions, .c-row, .stack, fieldset) {padding-block:var(--row-pad);}

/* Putting the app on a device: one tile per address (QR, link, copy, download), the guide and the Home icons. */
.device-tiles {display:grid; grid-template-columns:repeat(auto-fit, minmax(var(--qr-size), 1fr)); gap:var(--space-4); align-items:start;}
.device-tile {justify-items:center; text-align:center; min-width:var(--space-0); overflow-wrap:anywhere;}
.device-tile h3 {margin:var(--space-0); font-size:var(--fs-body); font-weight:var(--fw-regular);}
.device-tile .qr-frame {margin-block:var(--space-1);}
.device-tile .actions {justify-content:center;}
/* Install on this device and Profile: name with download, QR under it, link with copy under the QR; left aligned. */
.device-tile-side {display:grid; gap:var(--space-2); justify-items:start; text-align:start;}
.device-tile-side .qr-frame {margin-block:var(--space-0);}
.device-tile-head {display:flex; align-items:center; gap:var(--space-2);}
.device-link {display:flex; align-items:center; gap:var(--space-2); min-width:var(--space-0);}
.device-help {display:flex; align-items:center; gap:var(--space-2);}
.device-glyph {display:inline-flex; vertical-align:middle;}
.device-steps {margin:var(--space-0); padding-inline-start:var(--space-5); display:grid; gap:var(--space-2);}
.device-guide h3 {margin:var(--space-0); font-size:var(--fs-body); font-weight:var(--fw-menu-title);}
.device-fail {margin:var(--space-0); font-size:var(--fs-small);}
.home-device {justify-content:flex-end;}
.device-screen {max-width:calc(var(--qr-size) * 3);}
.profile-addresses {min-width:var(--space-0);}
.profile-addresses h2 {margin:var(--space-0);}

/* The vote QR: the dialog body and the full-screen view for the projector. */
.vote-qr {justify-items:center; text-align:center;}
.qr-full {position:fixed; inset:var(--space-0); z-index:var(--z-overlay); display:grid; place-items:center; background:var(--surface); padding:var(--space-5);}
.qr-full-body {display:grid; gap:var(--space-4); justify-items:center; text-align:center; max-width:100%;}
.qr-full .qr-frame {margin-block:var(--space-0);}
.qr-full .qr {width:min(70vmin, 100%);}
.qr-full-link {margin:var(--space-0); font-size:var(--fs-body); color:var(--text-2);}
.qr-full-close {position:absolute; top:var(--space-4); right:var(--space-4);}
/* A table wider than the page (ui.js fit, the Votes rule): fixed column widths, cells cut with "...". Plain tables keep one
   line per row; the meeting rows keep their wrapping text. */
.dna-app :is(.c-table, .minutes-table).is-fit {table-layout:fixed; width:100%; min-width:var(--space-0);}
.dna-app .c-table.is-fit.is-fit :is(th, td) {min-width:var(--space-0); max-width:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.dna-app .c-table.is-fit.is-fit td > .actions {flex-wrap:nowrap; min-width:var(--space-0);}
.dna-app .minutes-table.is-fit.is-fit :is(th, td) {min-width:var(--space-0); overflow:hidden; text-overflow:ellipsis;}
/* Meeting tasks: every column title on one line, as in the Votes table; the rows below wrap their text. */
.dna-app .minutes-table th {white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
/* Owner names in a narrow column: each name starts at its left edge and the add button moves under them. */
.dna-app .minute-cell .picker-line {flex-wrap:wrap;}
.dna-app .minute-cell .minute-chips {min-width:var(--space-0); max-width:100%;}
.dna-app .minute-cell .c-btn.secondary.minute-chip {justify-content:flex-start; min-width:var(--space-0); max-width:100%; overflow:hidden; white-space:nowrap;}
/* The title row of the meeting header carries an arrow that folds the header down to that row. */
.dna-app .minute-info > .c-field:has(> .minute-info-fold) {grid-template-columns:var(--minute-info-label-w) minmax(var(--space-0), 1fr) auto;}
.dna-app .minute-info > .c-field > .minute-info-fold {grid-column:3;}
.dna-app .minute-info.is-folded > :not(:first-child) {display:none;}
/* Text formatting side menu: opens from the dock's T button as a vertical bar to the left of the dock. */
.dna-app .minute-dock > .minute-toolbar.minute-text-side {position:absolute; right:calc(100% + var(--space-2)); top:50%; transform:translateY(-50%); flex-direction:column; flex-wrap:nowrap; align-items:center; height:auto; min-height:var(--space-0); margin:var(--space-0); padding:var(--space-3) var(--space-2); gap:var(--space-1); border:none; border-radius:var(--radius-xl); background:var(--frame); box-shadow:var(--shadow-2);}
.dna-app .minute-dock > .minute-toolbar.minute-text-side[hidden] {display:none;}
.dna-app .minute-dock > .minute-text-side .minute-sep {width:var(--space-4); height:var(--bw-hair); margin:var(--space-1) var(--space-0);}
.dna-app .minute-dock > .minute-text-side .minute-swatches {inset-inline-end:calc(100% + var(--space-3)); top:var(--space-0);}
@media (max-width:45em) {
  .dna-app .minute-dock > .minute-toolbar.minute-text-side {position:static; transform:none; flex-direction:row; flex-wrap:wrap; flex-basis:100%; padding:var(--space-0); background:none; box-shadow:none;}
  .dna-app .minute-dock > .minute-text-side .minute-sep {width:var(--bw-hair); height:var(--space-4); margin:var(--space-0) var(--space-1);}
  .dna-app .minute-dock > .minute-text-side .minute-swatches {inset-inline-end:var(--space-0); top:100%;}
}
/* Task owners in the meeting table use the regular body weight, like the rest of the row. */
.dna-app .minute-cell .minute-chip {font-weight:inherit;}
/* Icon buttons (menu, dock, toolbars, table actions): dimmer than the text at rest; on hover and when selected they
   only turn to the full text colour, with no background or border. */
.dna-app.dna-app :is(.rail-item, .dock-btn, .minute-format, .c-btn.icon:not(.del)) {color:var(--icon-idle); background:transparent; border-color:transparent; box-shadow:none;}
.dna-app.dna-app :is(.rail-item, .dock-btn, .minute-format, .c-btn.icon:not(.del)):is(:hover, .is-hover, [aria-current=page], [aria-pressed="true"], .active) {color:var(--icon-on); background:transparent; border-color:transparent;}
.dna-app.dna-app .c-btn.icon.del:is(:hover, .is-hover) {background:transparent;}
/* Small icons inside controls (chip remove cross, dropdown arrow, date and time pickers) use the same dim colour. */
.dna-app.dna-app :is(.minute-chip .icon-wrap, .csel-btn .ic) {color:var(--icon-idle);}
.dna-app.dna-app :is(.minute-chip:hover .icon-wrap, .csel-btn:hover .ic) {color:var(--icon-on);}
.dna-app input::-webkit-calendar-picker-indicator {opacity:var(--opacity-icon); cursor:pointer;}
.dna-app input::-webkit-calendar-picker-indicator:hover {opacity:var(--opacity-full);}