/* Foll · field instrument. The application surface described by the Foll app
   screen templates: charcoal or off-white ground, one hairline system, a fixed
   product header, five bottom destinations and ruled records rather than cards.
   This file owns tokens, chrome, typography and the shared record vocabulary.
   controls.css owns working control dimensions, handheld.css owns the phone and
   iPad geometry, instrument.css owns drawing, photo, voice and assistance. */

/* ---------------------------------------------------------------- tokens - */
:root {
  color-scheme: light;
  font-family: var(--su-font, 'Urbanist', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif);
  font-synthesis: none;

  /* Ground and ink, mapped to the shared SuDu tokens. Off-white rather than
     clinical white; charcoal rather than black. No accent colour of our own. */
  --paper: var(--su-off-white, #F3F1EA);
  --surface: var(--su-off-white, #F3F1EA);
  --field: var(--su-plate, #E8E5DC);
  --selected: #E0DDD4;
  --ink: var(--su-ink, #171613);
  --muted: var(--su-secondary, #67655D);
  --line: rgba(23, 22, 19, .25);
  --line-strong: rgba(23, 22, 19, .52);
  --accent: var(--su-ink, #171613);
  --signal: var(--su-ink, #171613);
  --primary: var(--su-ink, #171613);
  --on-primary: var(--su-light-ink, #F5F3EC);
  --attention: var(--su-ink, #171613);
  --attention-surface: var(--su-plate, #E8E5DC);
  --error: var(--su-ink, #171613);
  --error-surface: var(--su-plate, #E8E5DC);

  /* Geometry. One working height and one small radius throughout. */
  --radius: 6px;
  --sheet-radius: 10px;
  --control-height: 44px;
  --control-radius: 6px;
  --capture-size: 56px;
  --pin-size: 44px;

  /* Chrome. Heights exclude the device insets, which are added separately. */
  --header-height: 56px;
  --nav-height: 48px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --content-pad: 16px;
  --gutter: max(var(--content-pad), var(--safe-left));
  --gutter-end: max(var(--content-pad), var(--safe-right));
  --sheet-gutter: 16px;
  /* Clearance below scrolling content: navigation, the SuDu preferences rail
     and the floating capture controls all sit above the record. */
  --capture-clearance: 84px;
  --workspace-bottom: calc(var(--navigation-clearance, 72px) + var(--capture-clearance));

  --floating: 0 2px 8px rgb(23 22 19 / 12%);
  --sheet-shadow: 0 -2px 24px rgb(23 22 19 / 10%);

  background: var(--paper);
  color: var(--ink);
}
:root[data-appearance='dark'] {
  color-scheme: dark;
  --paper: var(--su-charcoal, #121110);
  --surface: var(--su-charcoal, #121110);
  --field: #23221F;
  --selected: #34322E;
  --ink: var(--su-light-ink, #F5F3EC);
  --muted: #AEACA6;
  --line: rgba(245, 243, 236, .25);
  --line-strong: rgba(245, 243, 236, .52);
  --accent: var(--su-light-ink, #F5F3EC);
  --signal: var(--su-light-ink, #F5F3EC);
  --primary: var(--su-light-ink, #F5F3EC);
  --on-primary: var(--su-ink, #121110);
  --attention: var(--su-light-ink, #F5F3EC);
  --attention-surface: #34322E;
  --error: var(--su-light-ink, #F5F3EC);
  --error-surface: #34322E;
  --floating: 0 2px 8px rgb(0 0 0 / 28%);
  --sheet-shadow: 0 -2px 24px rgb(0 0 0 / 40%);
}

/* ------------------------------------------------------------------ base - */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; }
button, a, .file-link, .file-button, summary { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; text-underline-offset: 4px; }
h1, h2, h3, h4, p { margin-top: 0; }
h1, h2, h3, h4 { color: var(--ink); font-weight: 600; }
img { max-width: 100%; }
svg {
  width: 18px; height: 18px; flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
[hidden] { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.pre-wrap { white-space: pre-wrap; }

/* Own the control colours. A native tint is not part of this palette. */
button, input[type=button], input[type=submit], input[type=reset] {
  -webkit-appearance:none; appearance:none;
  min-height: var(--control-height); padding: 10px 14px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--field); color:var(--ink);
  -webkit-text-fill-color:currentColor;
  line-height: 1.25; cursor: pointer;
}
input, select, textarea { accent-color:var(--ink); }
input::file-selector-button {
  font: inherit; min-height: var(--control-height);
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--field); color: var(--ink);
}
input::-webkit-date-and-time-value { color: inherit; text-align: left; }
button:disabled, input:disabled, select:disabled, textarea:disabled,
fieldset:disabled .file-button { opacity: .5; cursor: not-allowed; }
@media (forced-colors: active) { input, select, textarea { accent-color: auto; } }

/* One deliberate focus ring, not a browser default double outline. */
:where(button, a, input, select, textarea, summary):focus-visible,
:where(.file-button, .file-link):focus-within {
  outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--radius);
}
.skip-link {
  position: fixed; z-index: 40; top: calc(var(--safe-top) + 8px); left: 8px;
  width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
  background: var(--primary); color: var(--on-primary);
}
.skip-link:focus {
  width: auto; height: auto; padding: 12px 18px; margin: 0; overflow: visible;
  clip-path: none; border-radius: var(--radius);
}

/* ------------------------------------------------------------- app chrome -*/
/* The Foll mark, then the product name and release. The header carries the
   status bar inset as padding, so the shell below it starts clear of the
   status bar on both devices. --safe-top is env(safe-area-inset-top) and is
   read nowhere else; index.html and sign-in/index.html both declare
   viewport-fit=cover, without which that env() reports zero. */
.top {
  position: fixed; z-index: 15; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  height: calc(var(--header-height) + var(--safe-top));
  padding: var(--safe-top) var(--gutter-end) 0 var(--gutter);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.top::before, .shell::before { display: none; }
.wordmark { display: flex; align-items: center; min-height: 44px; padding: 0; }
.wordmark img { display: block; width: auto; height: 26px; }
.wordmark .mark-on-dark { display: none; }
:root[data-appearance='dark'] .wordmark .mark-on-light { display: none; }
:root[data-appearance='dark'] .wordmark .mark-on-dark { display: block; }
.top-right { display: flex; align-items: center; gap: 16px; margin-left: auto; min-width: 0; }
.app-name {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 1.125rem; font-weight: 600; line-height: 1.2; letter-spacing: -.02em;
}
.release-label { color: var(--muted); font-size: .75rem; font-weight: 500; letter-spacing: 0; }
/* The device's own inset numbers, read back from the running page. Quiet, but
   legible enough to read out loud over a phone call. */
.device-insets { font-variant-numeric: tabular-nums; opacity: .85; }
.workspace-caption, .theme-toggle, .edition, .caption-divider { display: none; }

.shell {
  display: block;
  min-height: 100svh;
  padding-top: calc(var(--header-height) + var(--safe-top));
}
.workspace-content { display: flex; flex-direction: column; width: 100%; min-width: 0; background: var(--surface); }
main {
  flex: 1; width: 100%; max-width: 1600px; min-width: 0; margin: 0 auto;
  padding: 16px var(--gutter-end) var(--workspace-bottom) var(--gutter);
}
main:focus { outline: none; }

/* Five destinations, labels only, marked by a short rule rather than a pill.
   The shared SuDu preferences rail sits below; studio-rail.css owns that band. */
.shell > aside {
  position: fixed; z-index: 14; left: 0; right: 0; top: auto;
  bottom: var(--sudu-tool-footer, var(--safe-bottom));
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: center; gap: 4px;
  height: var(--nav-height); min-height: var(--nav-height);
  padding: 0 max(12px, calc((100vw - 660px) / 2));
  border: 0; border-top: 1px solid var(--line);
  background: var(--surface);
}
.shell > aside > .section-label,
.shell > aside > .aside-foot,
.shell > aside .nav-count { display: none; }
.nav-link {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 4px 2px; margin: 0;
  border: 0; border-radius: 0; background: none;
  color: var(--muted); font-size: .75rem; font-weight: 500; line-height: 1;
  text-align: center;
}
.nav-link svg { display: none; }
.nav-link.active { color: var(--ink); background: none; font-weight: 600; }
.nav-link.active::after {
  content: ''; position: absolute; bottom: -2px; left: calc(50% - 8px);
  width: 16px; height: 2px; background: var(--ink);
}

/* Persistent status stays available to assistive technology without taking
   working space. Save failures keep their visible warning. */
.trial-strip {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); border: 0;
}
.update-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 8px var(--gutter); background: var(--selected); color: var(--ink); font-size: .875rem;
}
.save-warning {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 16px;
  margin: 12px var(--gutter) 0; padding: 14px 16px;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--error-surface); color: var(--error); font-size: .875rem;
}
.save-error { color: var(--error) !important; }
.appearance-notice { margin: 0; padding: 12px var(--gutter) 0; color: var(--muted); font-size: .875rem; }
.notice {
  position: fixed; z-index: 22; left: 50%;
  bottom: calc(var(--navigation-clearance, 72px) + var(--capture-clearance) + 12px);
  transform: translateX(-50%);
  width: max-content; max-width: calc(100vw - 32px); padding: 12px 18px;
  border-radius: var(--radius); background: var(--primary); color: var(--on-primary);
  font-size: .875rem; line-height: 1.5; box-shadow: var(--floating); pointer-events: none;
}

/* ------------------------------------------------------------ typography - */
/* Context is one breadcrumb row above the title. */
.workspace-path {
  display: flex; align-items: center; gap: 8px;
  min-height: 44px; margin: -8px 0 4px;
  color: var(--muted); font-size: .875rem;
}
.workspace-path :is(.back-link, .text-button) {
  min-height: 44px; margin: 0; padding: 6px 0;
  color: var(--muted); font-size: .875rem; overflow-wrap: anywhere;
}
.workspace-path > span { color: var(--muted); }
.back-link {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0; margin: -10px 0 8px;
  border: 0; background: none; color: var(--muted);
  font-size: .8125rem; text-align: left; overflow-wrap: anywhere;
}
.back-link svg { width: 14px; height: 14px; }

:is(.page-head, .home-heading, .field-heading, .visit-header) h1 {
  margin: 0; font-size: 1.75rem; font-weight: 600; line-height: 1.15;
  letter-spacing: -.03em; overflow-wrap: anywhere;
}
:is(.page-head, .home-heading) {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin: 0 0 12px;
}
:is(.page-head, .home-heading) > div { min-width: 0; }
.page-head .sub, .sub { margin: 6px 0 0; color: var(--muted); font-size: .875rem; line-height: 1.5; max-width: 64ch; }
.eyebrow { margin: 0 0 6px; color: var(--muted); font-size: .75rem; letter-spacing: .06em; overflow-wrap: anywhere; }
h2 { font-size: 1.125rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.35; }
h3 { font-size: 1rem; font-weight: 600; line-height: 1.4; }
:is(.meta, .help, .file-info) { color: var(--muted); font-size: .875rem; line-height: 1.5; }
.meta-row { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.count-label, .tab-count, .nav-count, .journal-count, .draft-count { font-variant-numeric: tabular-nums; }
.section-label { margin-bottom: 12px; padding: 0 12px; color: var(--muted); font-size: .75rem; }
.section-heading {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 8px 12px; margin: 20px 0 8px;
}
.section-heading h2 { margin: 0; font-size: 1rem; font-weight: 600; overflow-wrap: anywhere; }
.section-heading .meta { font-size: .8125rem; }
.form-section, .review-eyebrow {
  margin: 24px 0 12px; color: var(--muted);
  font-size: .75rem; font-weight: 500; letter-spacing: .06em;
}

/* -------------------------------------------------------------- controls - */
.actions-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.primary, .secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--control-height); padding: 8px 14px;
  border: 1px solid transparent; border-radius: var(--radius);
  font-size: .9375rem; line-height: 1.4; text-align: center;
  transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease;
}
.primary { background: var(--primary); color: var(--on-primary); border-color: var(--primary); font-weight: 600; }
.secondary { background: transparent; color: var(--ink); border-color: var(--line-strong); font-weight: 500; }
.primary svg, .secondary svg { width: 18px; height: 18px; }
.text-button, .file-link {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: var(--control-height); padding: 8px 0;
  border: 0; border-radius: var(--radius); background: transparent;
  color: var(--ink); font-size: .875rem; font-weight: 500; line-height: 1.4;
  text-align: left; text-decoration: none;
  transition: background-color 140ms ease, color 140ms ease;
}
.file-link, .file-button { position: relative; cursor: pointer; }
.file-link input, .file-button input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; padding: 0; opacity: 0; cursor: pointer;
}
.file-button { overflow: hidden; margin: 0; }
.icon-button, .record-open, .record-options, .close, .sheet-open {
  display: grid; place-items: center; flex: none;
  width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0;
  border: 0; border-radius: var(--radius); background: transparent; color: var(--ink);
  transition: background-color 140ms ease;
}
.record-open { color: var(--muted); }
.record-open svg, .icon-button svg, .sheet-open svg { width: 18px; height: 18px; }
.close svg { width: 22px; height: 22px; }
.record-options svg { width: 20px; height: 20px; fill: currentColor; stroke: none; }
.record-link { display: inline-flex; align-items: center; min-height: 44px; border-radius: 2px; text-decoration: none; }
summary { min-height: 44px; padding: 8px 0; border-radius: var(--radius); font-size: .875rem; font-weight: 500; cursor: pointer; }

/* Tabs share one edge and one marker. They are not category pills. */
.field-tabs, .collection-tabs, .area-group-tabs {
  display: flex; align-items: stretch; gap: 20px;
  margin: 0 0 12px; padding: 0;
  border-bottom: 1px solid var(--line);
  overflow-x: auto; scrollbar-width: none;
}
.field-tabs::-webkit-scrollbar, .collection-tabs::-webkit-scrollbar, .area-group-tabs::-webkit-scrollbar { display: none; }
:is(.field-tabs, .collection-tabs, .area-group-tabs) > button {
  position: relative; display: inline-flex; align-items: center; gap: 4px;
  flex: 0 0 auto; min-height: 44px; padding: 8px 0;
  /* The marker sits on the row's hairline rather than a pixel above it. */
  margin-bottom: -1px;
  border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  background: none; color: var(--muted);
  font-size: .875rem; font-weight: 500; line-height: 1; white-space: nowrap;
}
/* The label sets the width; this reaches the touch area into the gap. */
:is(.field-tabs, .collection-tabs, .area-group-tabs) > button::before {
  content: ''; position: absolute; inset: 0 -6px; z-index: 0;
}
:is(.field-tabs, .collection-tabs, .area-group-tabs) > button:is(.active, [aria-pressed=true], [aria-current=page]) {
  color: var(--ink); border-bottom-color: var(--ink); background: none; font-weight: 600; box-shadow: none;
}
:is(.field-tabs, .collection-tabs, .area-group-tabs) > button > span {
  position: static; margin: 0; padding: 0; background: none; font: inherit; line-height: inherit;
}
:is(.field-tabs, .collection-tabs) > button > .tab-count { color: var(--muted); font-size: .75rem; font-weight: 400; }
/* On the narrowest screens a tab row genuinely cannot hold its labels, so it
   scrolls. app.mjs marks which edges have more beyond them and the row fades
   there, so a half-shown tab reads as "keep going" rather than as a tab
   snapped off against the screen. */
:is(.field-tabs, .collection-tabs, .area-group-tabs).more-end {
  mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
}
:is(.field-tabs, .collection-tabs, .area-group-tabs).more-start {
  mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent);
}
:is(.field-tabs, .collection-tabs, .area-group-tabs).more-start.more-end {
  mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent);
}
.field-tabs > button > svg { display: none; }

/* ------------------------------------------------------------ home + hub - */
.capture-home, .home-hub { max-width: none; padding-top: 0; }
.home-heading h1 { flex: 1; }
.home-heading > .primary { flex: none; }
.home-overview { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 12px; }
.home-intro { margin: 0; max-width: none; color: var(--muted); font-size: .9375rem; line-height: 1.5; }
.journal-utilities { display: flex; flex-wrap: wrap; gap: 24px; }
.journal-utility {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 4px 0;
  border: 0; border-radius: 0; background: none; color: var(--ink);
  font-size: .875rem; font-weight: 400;
}
.journal-utility > svg { width: 14px; height: 14px; }
.journal-count { color: var(--muted); }
.home-destinations { display: grid; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.hub-link {
  display: flex; align-items: center; gap: 12px;
  min-height: 48px; padding: 10px 0;
  border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  background: none; color: var(--ink); text-align: left;
}
.hub-link:last-child { border-bottom: 0; }
.hub-link > span:first-child { flex: 1; }
.hub-link > span:nth-child(2) { color: var(--muted); font-variant-numeric: tabular-nums; }
.home-journal { min-width: 0; margin-top: 4px; border-top: 1px solid var(--line-strong); }
.home-journal > .section-heading {
  align-items: center; justify-content: space-between;
  min-height: 48px; margin: 0; padding: 8px 0; gap: 8px;
}
.home-journal .section-heading h2 { margin: 0; font-size: 1rem; font-weight: 600; }
.home-save-state { max-width: none; color: var(--muted); font-size: .8125rem; font-weight: 400; text-align: right; }
.home-visits { margin: 0; }
.home-start { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 12px; }
.home-start > span { flex: 1 1 160px; padding: 0; color: var(--muted); font-size: .875rem; }
.home-setup-visit { padding: 8px 0; }

/* ----------------------------------------------------------- record rows - */
/* Visits, projects, connections and settings share one ruled row. No cards,
   no borders inside borders, and a separate 44 px target for row options. */
.record-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 44px;
  align-items: center; gap: 8px; min-width: 0; padding: 0;
  border-bottom: 1px solid var(--line);
}
.record-row > .capture-home-row,
.draft-grid .record-row > button[data-action='resume'] { flex: 1; min-width: 0; border: 0; }
.capture-home-row {
  display: flex; align-items: center; gap: 14px;
  width: 100%; min-height: 104px; margin: 0; padding: 16px 4px 16px 0;
  border: 0; border-radius: 0; background: none; color: inherit; text-align: left;
}
.capture-home-row > span { min-width: 0; }
.visit-date {
  display: flex; flex-direction: column; align-items: flex-start;
  flex: 0 0 60px; width: 60px; padding-right: 8px;
  border-right: 1px solid var(--line); color: var(--ink);
}
.visit-date b { font-size: 2rem; font-weight: 400; line-height: 1; letter-spacing: -.06em; }
.visit-date small, .capture-home-row .visit-date small {
  margin-top: 6px; color: var(--muted); white-space: nowrap;
  font-size: .75rem; line-height: 1.3; text-transform: uppercase; letter-spacing: .02em;
}
.visit-row-copy { flex: 1; min-width: 0; }
.capture-home-row .visit-row-copy strong {
  display: block; color: var(--ink);
  font-size: 1.0625rem; font-weight: 600; line-height: 1.35; letter-spacing: -.02em;
  overflow-wrap: anywhere;
}
.capture-home-row .visit-row-copy small, .visit-row-tally {
  display: block; margin-top: 4px; color: var(--muted);
  font-size: .8125rem; line-height: 1.4; overflow-wrap: anywhere;
}
.capture-home-row > svg { width: 18px; height: 18px; flex: none; color: var(--muted); }

.project-index, .project-browser .project-index { border-top: 1px solid var(--line-strong); }
.project-index-row {
  display: flex; align-items: center; gap: 16px;
  min-height: 104px; padding: 20px 0; border-bottom: 1px solid var(--line);
}
.project-index-copy { flex: 1; min-width: 0; }
.project-index-row h2 {
  margin: 0; font-size: 1.25rem; font-weight: 500; line-height: 1.3;
  letter-spacing: -.025em; overflow-wrap: anywhere;
}
.project-index-copy .meta, .project-index-detail { margin: 4px 0 0; font-size: .875rem; line-height: 1.5; }
.project-index-state { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 4px; font-size: .875rem; line-height: 1.5; }
.needs-action { color: var(--attention); font-weight: 500; }

.connection-workbench, .settings-workbench { display: grid; gap: 24px; margin-top: 16px; max-width: none; }
.connection-heading, .settings-workbench > section > h2, .directory-source-heading {
  display: flex; align-items: center; gap: 12px;
  margin: 0; padding: 0 0 12px; border-bottom: 1px solid var(--line-strong);
  font-size: 1rem; font-weight: 600; line-height: 1.4;
}
.connection-heading h2 { margin: 0; font-size: 1rem; font-weight: 600; }
.connection-heading > span { display: none; }
.connection-row, .settings-row, .directory-project-row {
  display: flex; align-items: center; gap: 16px;
  width: 100%; min-height: 80px; padding: 16px 0;
  border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  background: transparent; color: var(--ink); text-align: left;
}
.directory-project-row > :first-child { flex: 1; min-width: 0; }
/* A saved contact is a name with its practice and role, not an icon row. */
.person-row {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: 2px 16px;
  width: 100%; min-height: 56px; padding: 12px 0;
  border: 0; border-bottom: 1px solid var(--line);
  color: var(--ink); text-align: left;
}
.person-row > strong { flex: 1 1 auto; min-width: 0; font-size: 1rem; font-weight: 500; overflow-wrap: anywhere; }
.person-row > span { flex: 0 1 auto; color: var(--muted); font-size: .8125rem; overflow-wrap: anywhere; }
.connection-row > svg:first-child, .settings-row > svg:first-child { width: 24px; height: 24px; }
.connection-row > span, .settings-row > span { flex: 1; min-width: 0; }
.connection-row strong, .settings-row strong {
  display: block; font-size: 1rem; font-weight: 500; line-height: 1.35; overflow-wrap: anywhere;
}
.connection-row small, .settings-row small, .connection-state {
  display: block; margin-top: 4px; color: var(--muted); font-size: .875rem; line-height: 1.45;
}
.menu-grid { display: flex; flex-direction: column; margin: 12px 0; border: 0; }
.menu-tile {
  display: flex; align-items: center; justify-content: flex-start; gap: 16px;
  min-height: 64px; padding: 12px 0;
  border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  background: none; color: var(--ink); font-size: .9375rem; text-align: left;
}
.menu-tile > svg { width: 24px; height: 24px; }
.share-file { display: flex; align-items: center; gap: 16px; min-width: 0; padding: 14px 0; }
.share-file > svg { width: 28px; height: 28px; }
.share-file strong { display: block; font-size: .9375rem; font-weight: 500; overflow-wrap: anywhere; }
.share-file small { color: var(--muted); font-size: .8125rem; }
.attachment-row {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 8px; border-bottom: 1px solid var(--line);
}
.attachment-row > span { flex: 1; min-width: 0; font-size: .875rem; overflow-wrap: anywhere; }
.folder-destinations button {
  display: flex; align-items: center; gap: 14px; width: 100%;
  min-height: 64px; padding: 14px 0;
  border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  background: none; color: var(--ink); text-align: left;
}
.folder-destinations button > span { flex: 1; min-width: 0; }

/* The visit register keeps the edges of every other ruled list. */
.visit-list { border-top: 1px solid var(--line-strong); }
.visit-row {
  display: grid; grid-template-columns: 32px minmax(0, 1fr) auto 44px;
  align-items: center; gap: 6px 14px;
  padding: 18px 0; border-bottom: 1px solid var(--line);
}
.visit-index { align-self: start; padding-top: 3px; color: var(--muted); font-size: .875rem; font-variant-numeric: tabular-nums; }
.visit-row h2 {
  margin: 0 0 4px; font-size: 1.0625rem; font-weight: 600;
  line-height: 1.35; letter-spacing: -.02em; overflow-wrap: anywhere;
}
.visit-total { color: var(--muted); font-size: .8125rem; text-align: right; }
.visit-total strong { color: var(--ink); font-weight: 400; font-variant-numeric: tabular-nums; }

/* The project register is the same vocabulary expressed as a table. */
.project-register { width: 100%; border-collapse: collapse; table-layout: fixed; text-align: left; }
.project-register caption { text-align: left; }
.project-register th {
  padding: 12px 0; border-bottom: 1px solid var(--line-strong);
  color: var(--muted); font-size: .75rem; font-weight: 400;
}
.project-register td { padding: 20px 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
.project-register th:not(:first-child), .project-register td:not(:first-child) { padding-left: 12px; }
.project-register .numeric { font-size: .875rem; font-variant-numeric: tabular-nums; text-align: right; }
.project-register th.numeric { font-size: .75rem; }
.project-name { margin: 0 0 4px; font-size: 1.0625rem; font-weight: 500; line-height: 1.4; letter-spacing: -.02em; overflow-wrap: anywhere; }
.project-meta, .project-address { color: var(--muted); font-size: .8125rem; overflow-wrap: anywhere; }
.project-address { display: block; margin-top: 4px; }
.date-cell { color: var(--muted); font-size: .875rem; font-variant-numeric: tabular-nums; }
.mobile-label { display: none; color: var(--muted); font-size: .8125rem; }
.control-column { width: 44px; }
.record-open { margin-left: auto; }

/* -------------------------------------------------------- record content - */
/* Field notes and observations are ruled entries, not cards within cards. */
.field-note, .field-records .obs {
  margin: 0; padding: 16px 0;
  border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none;
}
.note-meta {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px;
  margin: 0; color: var(--muted); font-size: .8125rem; line-height: 1.4;
}
.note-meta > svg { display: none; }
.note-number { color: var(--ink); font-size: .8125rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.field-note > p {
  margin: 10px 0; max-width: 72ch;
  font-size: 1.0625rem; line-height: 1.55;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.field-note > h3 { margin: 10px 0 0; font-size: 1.0625rem; font-weight: 500; line-height: 1.4; }
.field-note > .text-button { padding: 6px 0; color: var(--muted); }
.obs { padding: 20px 0; border-top: 1px solid var(--line); }
.obs-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.obs-top > div { min-width: 0; }
.obs h3 { margin: 0 0 6px; font-size: 1.0625rem; font-weight: 600; line-height: 1.35; letter-spacing: -.02em; overflow-wrap: anywhere; }
.item-no { display: inline-block; margin-right: 8px; color: var(--muted); font-size: .8125rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.obs-top .meta { font-size: .8125rem; }
.status { align-self: flex-start; max-width: 96px; color: var(--ink); font-size: .8125rem; font-weight: 500; line-height: 1.4; text-align: right; }
.status.closed { color: var(--muted); }
.obs-note { margin: 12px 0; font-size: 1.0625rem; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.obs-detail { margin: 8px 0; color: var(--muted); font-size: .875rem; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.obs-detail strong { color: var(--ink); font-weight: 500; }
.obs-foot {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 8px 16px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line);
}
.obs-foot .meta { font-size: .8125rem; }
.history { margin-top: 12px; padding-top: 4px; border-top: 1px solid var(--line); }
.history summary { margin-bottom: 4px; color: var(--muted); font-weight: 400; }
.history p { margin: 0 0 12px; font-size: .875rem; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.highlight { margin: 16px 0; padding: 12px 14px; border-left: 2px solid var(--attention); background: var(--attention-surface); }
.highlight p { margin: 0; color: var(--ink); font-size: .875rem; line-height: 1.5; }
.highlight strong { font-weight: 500; }
.draft-banner {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  margin-bottom: 16px; padding: 14px 16px;
  border: 1px solid var(--line); border-left: 2px solid var(--accent); border-radius: var(--radius);
  background: var(--field);
}
.draft-banner strong { font-size: .875rem; font-weight: 500; }
.draft-banner p { margin: 4px 0 0; color: var(--muted); font-size: .8125rem; }
.carry-forward { margin: 20px 0; padding: 8px 16px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--field); }
.carry-forward > summary { color: var(--ink); }
.carry-forward > .help { margin-top: 4px; font-size: .8125rem; }
.carry-forward .obs { margin: 12px 0 0; padding: 16px 0 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; }
.review-context {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px;
  margin-bottom: 16px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius);
}
.context-label { margin-bottom: 6px; color: var(--muted); font-size: .8125rem; }
.context-value { font-size: 1rem; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.panel-heading {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 8px; min-height: 44px; margin: 0; padding: 0;
}
.panel-heading h2 { margin: 0; font-size: 1rem; font-weight: 600; letter-spacing: -.015em; }
.visit-brief { margin: 20px 0 8px; }
.visit-brief > summary { min-height: 48px; font-size: .875rem; }
.visit-brief > summary > span:nth-of-type(2) { overflow-wrap: anywhere; }
.checklist-banner {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
  width: 100%; margin-bottom: 12px; padding: 14px 0;
  border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  background: transparent; color: var(--ink); text-align: left;
}
.checklist-item { padding: 16px 0; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.checklist-item h3 { font-size: 1rem; white-space: pre-wrap; }
.checklist-item [aria-pressed=true] { background: var(--selected); }
.next-review-choice { display: flex; align-items: center; gap: 12px; min-height: 48px; }
.next-review-choice input { width: 22px; height: 22px; }

/* Empty states speak plainly and keep the working controls reachable. */
.empty {
  display: flex; flex-direction: column; align-items: center;
  padding: 40px 16px; text-align: center;
}
.empty .actions-row { justify-content: center; }
.capture-empty, .journal-empty {
  display: flex; flex-direction: column; align-items: flex-start;
  max-width: 46ch; padding: 24px 0; text-align: left;
}
:is(.empty, .capture-empty) h2, .journal-empty h3 {
  margin: 0 0 8px; font-size: 1.375rem; font-weight: 500; line-height: 1.25; letter-spacing: -.025em;
}
:is(.empty, .capture-empty) p, .journal-empty p { margin: 0 0 16px; color: var(--muted); font-size: .9375rem; line-height: 1.5; }
.journal-empty p { margin-bottom: 0; }
.capture-empty > svg { width: 40px; height: 40px; margin-bottom: 16px; color: var(--muted); stroke-width: 1.1; }
.capture-empty.compact { min-height: 0; padding: 16px 0; }
.capture-empty.compact h2 { font-size: 1.125rem; }
.empty-glyph {
  display: grid; place-items: center; width: 48px; height: 48px; margin: 0 auto 16px;
  border: 1px solid var(--line); border-radius: var(--radius); color: var(--muted);
}
.empty-glyph svg { width: 24px; height: 24px; stroke-width: 1.2; }
.project-register .empty-cell { padding: 0; }
.error { padding: 10px 0; color: var(--error); font-size: 1rem; line-height: 1.5; }
.guide { max-width: 68ch; font-size: 1rem; line-height: 1.65; }
.guide h2 { margin-top: 24px; font-size: 1.125rem; }
.guide p, .guide li { color: var(--muted); }
.guide li { padding: 0 0 12px 4px; }

/* ------------------------------------------------------ forms and sheets - */
dialog {
  width: min(680px, calc(100% - 32px));
  max-height: calc(100dvh - 40px);
  padding: 0 var(--sheet-gutter) 12px;
  border: 1px solid var(--line); border-radius: var(--sheet-radius);
  background: var(--surface); color: var(--ink);
  box-shadow: var(--sheet-shadow);
  overflow: auto; overscroll-behavior: contain;
}
dialog::backdrop { background: rgb(0 0 0 / 40%); }
.dialog-top {
  position: sticky; top: 0; z-index: 3;
  display: flex; align-items: center; gap: 8px;
  min-height: 60px; margin: 0 0 16px; padding: 8px 0;
  border-bottom: 1px solid var(--line); background: var(--surface);
}
.dialog-top h2 {
  flex: 1; min-width: 0; margin: 0;
  font-size: 1.375rem; font-weight: 500; line-height: 1.25; letter-spacing: -.025em;
  overflow-wrap: anywhere;
}
.dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 12px; }
#form-fields { min-width: 0; margin: 0; padding: 4px 0 16px; border: 0; }
.form-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 16px; }
form label { display: block; min-width: 0; margin-bottom: 16px; color: var(--ink); font-size: .875rem; font-weight: 500; line-height: 1.45; }
form small { display: block; margin-top: 6px; color: var(--muted); font-size: .875rem; font-weight: 400; line-height: 1.5; }
.help { margin: 0 0 16px; }
.conditional { padding-top: 16px; border-top: 1px solid var(--line); }
input, select, textarea {
  display: block; width: 100%; min-width: 0; max-width: 100%;
  min-height: var(--control-height); margin-top: 6px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--field); color: var(--ink);
  -webkit-text-fill-color: currentColor;
  font-size: 1rem; font-weight: 400; line-height: 1.4; box-shadow: none;
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
textarea { min-height: 112px; line-height: 1.55; resize: vertical; }
input:read-only, textarea:read-only { background: transparent; }
select {
  -webkit-appearance: none; appearance: none; padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2367655D' stroke-width='1.5'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
:root[data-appearance='dark'] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23AEACA6' stroke-width='1.5'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
}
/* One field edge in every state. Focus strengthens the existing hairline; it
   never adds an inset shadow, offset ring, glow or browser bevel. */
:is(input:where(:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=button]):not([type=submit]):not([type=reset])), select, textarea) {
  -webkit-appearance: none; appearance: none;
}
:is(input:where(:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=button]):not([type=submit]):not([type=reset])), select, textarea):is(:focus, :focus-visible) {
  outline: none; border-color: var(--ink); box-shadow: none;
}
input[type='hidden'] { display: none; }
input::-webkit-datetime-edit, input::-webkit-date-and-time-value { color: var(--ink); -webkit-text-fill-color: currentColor; }
.editor-body { min-width: 0; padding: 0; }
.editor-footer { padding-top: 10px; border-top: 1px solid var(--line); }
.dialog-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0; padding: 0; border: 0; }
.form-save-actions { display: flex; align-items: stretch; gap: 8px; }
#draft-status { color: var(--muted); font-size: .75rem; }
.pill-select { width: auto; max-width: 100%; margin: 0; }
.check-option, form .check-option {
  display: flex; align-items: center; gap: 10px;
  min-height: 44px; margin: 0; font-size: .875rem; font-weight: 400;
}
.check-option input { flex: none; width: 20px; height: 20px; min-height: 0; margin: 0; padding: 0; accent-color: var(--accent); }
.discipline-picks { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px 16px; margin: 0 0 16px; padding: 0; border: 0; }
.discipline-picks legend { margin-bottom: 8px; font-size: .875rem; font-weight: 500; }
.choice-grid, .purpose-grid, .people-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.choice-key, .person-choice {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 0; min-height: 64px; padding: 10px;
  border: 1px solid transparent; border-radius: var(--radius);
  background: var(--field); color: var(--ink);
  font-size: .9375rem; line-height: 1.4; text-align: center; overflow-wrap: anywhere;
}
:is(.choice-key, .person-choice)[aria-pressed=true] { background: var(--selected); border-color: var(--ink); }
.person-choice { justify-content: flex-start; gap: 12px; min-height: 72px; padding: 12px; text-align: left; }
.person-choice > span:not(.person-initials) { min-width: 0; }
.person-choice small { font-size: .8125rem; line-height: 1.4; }
.person-initials { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 50%; font-size: .8125rem; }
.choice-tick { margin-left: auto; }
.setup-section { margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--line); }
.setup-section h3 { margin: 0 0 16px; font-size: 1rem; font-weight: 600; }
.setup-details, .setup-sources { margin: 0 0 16px; }
.setup-details > summary, .setup-sources > summary { color: var(--muted); font-weight: 400; }
.setup-details[open] > summary { margin-bottom: 12px; color: var(--ink); }
.setup-guide-label { margin-bottom: 10px; color: var(--muted); font-size: .8125rem; }
.setup-guidance ul { margin: 0; padding-left: 18px; }
.setup-guidance li { margin-bottom: 10px; padding-left: 4px; font-size: .875rem; line-height: 1.6; }
.setup-sources p { margin-bottom: 10px; color: var(--muted); font-size: .8125rem; line-height: 1.5; }
.setup-sources a, .setup-guidance a, .guide a {
  display: inline-flex; align-items: center; min-height: 44px;
  text-decoration: underline; text-underline-offset: 4px;
}
.setup-sources small { display: block; font-size: .75rem; }
.setup-feedback { margin-top: -10px; font-size: .875rem; }
.record-options-sheet {
  box-sizing: border-box; position: fixed; z-index: 30;
  inset: auto 0 calc(var(--sudu-tool-footer, 0px) + 8px);
  width: calc(100% - 24px); max-width: 420px; margin: 0 auto; padding: 16px;
  max-height: calc(var(--visible-height, 100dvh) - var(--sudu-tool-footer, 0px) - 32px);
  border: 1px solid var(--line); border-radius: var(--sheet-radius);
  background: var(--surface); color: var(--ink); overflow: auto;
}
.record-options-sheet h2 { margin: 0 0 6px; font-size: 1.125rem; overflow-wrap: anywhere; }
.record-options-sheet p { margin: 6px 0 12px; color: var(--muted); font-size: .875rem; }
.record-options-choices { display: grid; margin: 8px 0 12px; }
.record-options-choices button {
  min-height: 56px; padding: 12px 0; text-align: left;
  border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  background: transparent; color: var(--ink);
}
.record-options-sheet .options-cancel { width: 100%; min-height: 44px; }
.record-options-sheet::backdrop { background: rgb(0 0 0 / 40%); backdrop-filter: none; }

/* ---------------------------------------------------------------- report - */
/* The issued record reads as a professional document on white paper. */
.report {
  --ink: #242422; --muted: #666662; --line: #DEDED8; --accent: #171613;
  color-scheme: light; max-width: 900px; margin: 0 auto; padding: 28px;
  border: 1px solid #DEDED8; border-radius: 2px;
  background: #fff; color: var(--ink); line-height: 1.5;
}
.report-kicker {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  color: var(--muted); font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
}
.report-mark { display: block; width: auto; height: 14px; }
.report-title { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding: 16px 0; border-bottom: 2px solid var(--ink); }
.report-title h1 { margin: 0; font-size: 28px; font-weight: 600; line-height: 1.15; letter-spacing: -.02em; overflow-wrap: anywhere; }
.report-title p { margin: 8px 0 0; }
.report-title strong { color: var(--accent); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.report-disclaimer { margin: 20px 0; padding-left: 12px; border-left: 2px solid var(--accent); color: var(--muted); font-size: 13px; }
.report-context { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px 24px; }
.report-field { margin: 0 0 10px; break-inside: avoid; }
.report dt { color: var(--muted); font-size: 12px; }
.report dd { margin: 3px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.report h2 { margin: 26px 0 14px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 19px; font-weight: 600; }
.report h2 span { margin-left: 8px; color: var(--muted); font-size: 15px; font-weight: 400; }
.report-item { padding: 16px 0; border-top: 1px solid var(--line); }
.report-item-head { display: flex; justify-content: space-between; gap: 12px; }
.report-item-head span { font-size: 13px; }
.report h3 { margin: 0 0 8px; font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
.report-note { white-space: pre-wrap; overflow-wrap: anywhere; }
.report-photos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.report-photos figure { margin: 0; break-inside: avoid; }
.report-photos img { display: block; max-width: 100%; max-height: 260px; height: auto; object-fit: contain; }
.report figcaption, .report-small { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.report-carry { padding: 10px 0; border-bottom: 1px solid var(--line); }
.report-carry p { margin: 4px 0; white-space: pre-wrap; }
.report-category { margin-top: 20px; font-weight: 600; }
.report-footer { margin-top: 24px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }

/* ------------------------------------------------ workspace tools, access -*/
.workspace-tools { position: relative; }
.workspace-tools > summary { display: flex; align-items: center; gap: 10px; padding: 10px 12px; color: var(--muted); font-size: .8125rem; font-weight: 400; list-style: none; }
.workspace-tools > summary::-webkit-details-marker { display: none; }
.workspace-tools[open] > summary { background: var(--selected); color: var(--ink); }
.menu-chevron { width: 14px; margin-left: auto; }
.tools-icon { width: 20px; height: 20px; }
.workspace-menu {
  position: absolute; z-index: 12; bottom: calc(100% + 8px); left: 0;
  width: 232px; padding: 8px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); box-shadow: var(--floating);
}
.workspace-menu > p { margin: 0; padding: 8px 12px; color: var(--muted); font-size: .75rem; }
.workspace-menu .text-button, .workspace-menu .file-link { display: flex; width: 100%; padding: 10px 12px; }
.workspace-menu small { display: block; margin-top: 4px; padding: 10px 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: .75rem; line-height: 1.5; }
.access-account { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); }
.access-account p { overflow-wrap: anywhere; }
.access-lock { max-width: 520px; padding: 24px; }
.access-lock::backdrop { background: var(--paper); }
.access-lock h2 { font-size: 1.375rem; }
.access-lock a, .access-lock button { display: inline-flex; align-items: center; min-height: 44px; margin: 8px 8px 0 0; text-decoration: none; }
.appearance-swatch { flex: none; width: 20px; height: 20px; border: 1px solid currentColor; border-radius: 50%; }
.appearance-choices, .hand-choices, .note-categories, .category-chips, .dictation-takes, .attendance-options {
  display: flex; align-items: stretch; flex-wrap: wrap; gap: 8px; margin-top: 12px;
}
:is(.appearance-choices, .hand-choices, .note-categories, .category-chips, .dictation-takes) button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  flex: 0 1 auto; min-width: 44px; min-height: 44px; margin: 0; padding: 8px 14px;
  border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink);
  font-size: .9375rem; line-height: 1.4; text-align: center; overflow-wrap: anywhere;
}
:is(.appearance-choices, .hand-choices, .note-categories, .category-chips, .dictation-takes) button[aria-pressed=true] {
  background: var(--selected); border-color: var(--line-strong);
}
.hand-choices [data-value=left] > svg { transform: scaleX(-1); }

/* ------------------------------------------------------- hover and state - */
@media (hover: hover) and (pointer: fine) {
  :is(.secondary, .text-button, .record-options, .record-open, .icon-button, .close, .nav-link, .menu-tile, .sheet-open):hover {
    background: var(--field); color: var(--ink);
  }
  .primary:hover:not(:disabled) { background: var(--accent); }
  .secondary:hover:not(:disabled) { border-color: var(--ink); background: var(--field); }
  :is(.record-row, .project-index-row, .connection-row, .settings-row):hover,
  .project-register tbody tr:not(.empty-row):hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
  .journal-utility:hover { text-decoration: underline; text-underline-offset: 4px; }
  .workspace-menu .text-button:hover, .workspace-menu .file-link:hover { background: var(--selected); }
}
:is(.primary, .secondary):active:not(:disabled) { transform: translateY(1px); }

@media (prefers-contrast: more) { :root { --line: var(--line-strong); } button:disabled { opacity: .7; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}
@media (forced-colors: active) {
  :is(.review-context, .obs, .carry-forward, .draft-banner, .report, dialog, .notice, .save-warning, .primary, .secondary, .close, input, select, textarea) {
    border: 1px solid CanvasText; box-shadow: none;
  }
  .nav-link.active::after { background: Highlight; }
  :is(.field-tabs, .collection-tabs, .area-group-tabs) > button.active { border-bottom-color: Highlight; }
  :is(input, textarea, select):focus-visible { border-color: Highlight; }
  :where(button, a, input, select, textarea, summary):focus-visible { outline-color: Highlight; }
}

/* ----------------------------------------------------------------- print - */
@media print {
  @page { size: A4; margin: 16mm; }
  :root, :root[data-appearance='dark'] {
    color-scheme: light;
    --paper: #fff; --surface: #fff; --ink: #242422; --muted: #666662;
    --line: #DEDED8; --accent: #171613;
  }
  body { background: #fff; color: #242422; }
  .top, .shell > aside, .trial-strip, .save-warning, .appearance-notice,
  .draft-banner, dialog, .notice, .page-head, .back-link, .highlight, .skip-link,
  .workspace-path, .visit-actions, .record-options, .record-options-sheet,
  .update-banner, .home-hub, .field-tabs { display: none !important; }
  .shell, .workspace-content { display: block; min-height: 0; }
  main { max-width: none; padding: 0; }
  .report { max-width: none; margin: 0; padding: 0; border: 0; border-radius: 0; font-size: 11pt; }
  .report-title h1 { font-size: 22pt; }
  .report-context, .report-photos { grid-template-columns: 1fr 1fr; }
  .report-disclaimer { font-size: 10pt; }
  .report-item { break-inside: auto; }
  .report-photos, .report-field { break-inside: avoid; }
  .report img { width: auto; max-height: 250px; }
  a { text-decoration: none; }
}