/* LWG CRM v2: design tokens, the layout shell and the components.
   The look follows the approved mock (docs/v2/mock: Main, Record, Phone
   and System): a cream side rail with the logo, a white top bar, calm
   white panels on a warm page, Lora headings, Figtree for the interface,
   and gold reserved for the one main action. Palette and type pairing
   match localworksglobal.org and the LWG logo (design section 3.5). Fonts
   are self-hosted below: the Content-Security-Policy only allows 'self'
   for fonts. Dark mode comes later (T4 spec section 3). */

/* ---------- Fonts (self-hosted, Latin subset only) ---------- */

@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/lora/lora-latin-500-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/lora/lora-latin-600-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/figtree/figtree-latin-400-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/figtree/figtree-latin-600-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/figtree/figtree-latin-700-normal.woff2') format('woff2');
}

/* ---------- Design tokens ---------- */

:root {
  /* Brand, exact values from the design doc, the logo and the website. */
  --indigo: #150049;
  --teal: #147E9F;
  /* Small teal text and links: 6.5:1 on white, 6.0:1 on cream (brand
     teal is only 4.3:1 on cream). Brand teal stays for fills, borders,
     icons and large text. */
  --link-teal: #0E6680;
  --link-teal-hover: #0A4F63;
  --dark-teal: #053748;
  --sky: #BBE5F1;
  --cream: #FAF5E5;
  --gold: #B8922E;

  /* From the approved mock. */
  --page: #FBF8EF;          /* the warm page behind the panels */
  --white: #FFFFFF;
  --line: #E8E1CC;          /* panel and bar borders */
  --line-soft: #F0EAD8;     /* dividers inside panels */
  --line-input: #D9D0B6;    /* inputs and quiet buttons */
  --slate: #4F6B76;         /* secondary text, 5.7:1 on white */
  --chip: #F1EBDA;
  --info-bg: #E4F4F9;
  --restricted-bg: #ECE8F6;
  --example-bg: #F6EDD3;
  --example-ink: #6E5316;
  --good-bg: #E5F2E3;
  --good-ink: #2F6130;
  --due-bg: #FCEEDD;
  --due-ink: #9A4A0F;
  --stop-bg: #FBE9E6;
  --stop-ink: #A5271B;
  --quiet-bg: #EEF2F3;

  --color-bg: var(--page);
  --color-surface: var(--white);
  --color-text: var(--dark-teal);
  --color-text-muted: var(--slate);
  --color-heading: var(--indigo);
  --color-link: var(--link-teal);
  --color-link-hover: var(--link-teal-hover);
  --color-border: var(--line);
  --color-input-border: var(--line-input);
  --color-focus-ring: var(--teal);
  --color-error: #A4261C;
  --color-error-bg: #FBEAE8;
  --color-success: #1D5E36;
  --color-success-bg: #E6F2EA;

  --font-heading: 'Lora', Georgia, 'Times New Roman', serif;
  --font-body: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-panel: 14px;
  --radius-pill: 999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;

  --shadow-soft: 0 1px 2px rgba(5, 55, 72, 0.08);
  --shadow-menu: 0 10px 30px rgba(5, 55, 72, 0.18);
  --shadow-fab: 0 8px 20px rgba(5, 55, 72, 0.25);

  --rail-width: 248px;
  --top-bar-height: 76px;
}

/* ---------- Base ---------- */

html {
  box-sizing: border-box;
}

/* border-box on every element, set directly rather than inherited: a
   <details> element passes its content through a built-in slot that
   inheritance can't reach, so inputs inside folded boxes (notes, emails,
   More details) would otherwise spill out by their padding and border. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--color-heading);
  font-weight: 600;
  line-height: 1.2;
}

p {
  max-width: 70ch;
}

a {
  color: var(--color-link);
}

a:hover {
  color: var(--color-link-hover);
}

::selection {
  background: var(--sky);
}

img {
  max-width: 100%;
}

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
}

/* Visible on every interactive element, every input method. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

[hidden] {
  display: none !important;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--white);
  color: var(--color-text);
  padding: var(--space-2) var(--space-3);
  border-radius: 0 0 var(--radius-sm) 0;
}

.skip-link:focus {
  left: 0;
}

.icon {
  flex: none;
}

.icon-bold {
  stroke-width: 2.4;
}

.muted {
  color: var(--slate);
}

.prose {
  white-space: pre-line;
}

/* ---------- The shell: side rail, top bar, page ---------- */

.shell {
  display: flex;
  min-height: 100vh;
}

.rail {
  width: var(--rail-width);
  flex-shrink: 0;
  background: var(--cream);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 24px 14px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.rail-logo {
  display: block;
  margin: 0 10px 26px;
}

.rail-logo img {
  display: block;
  width: 170px;
  height: auto;
}

.rail-places {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rail-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  color: var(--dark-teal);
  font-weight: 500;
  font-size: 15px;
  text-decoration: none;
}

.rail-link:hover {
  background: rgba(255, 255, 255, 0.6);
  color: var(--indigo);
}

.rail-link[aria-current="page"] {
  background: var(--white);
  color: var(--indigo);
  font-weight: 700;
  box-shadow: var(--shadow-soft);
}

.rail-more {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--dark-teal);
}

.rail-more:hover,
.rail-more[aria-current="page"] {
  background: var(--white);
}

.rail-more-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  font-size: 15px;
}

.rail-more-list {
  font-size: 12px;
  color: var(--slate);
  padding-left: 31px;
}

.shell-main {
  flex-grow: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.top-bar {
  height: var(--top-bar-height);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 40px;
  border-bottom: 1px solid var(--line);
  background: var(--white);
  position: sticky;
  top: 0;
  z-index: 40;
}

.top-logo,
.top-search-link {
  display: none;
}

.top-search {
  flex-grow: 1;
  max-width: 560px;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line-input);
  border-radius: var(--radius-lg);
  background: var(--page);
  color: var(--slate);
}

.top-search:focus-within {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(20, 126, 159, 0.2);
}

.top-search input {
  flex-grow: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 15px;
  color: var(--dark-teal);
  outline: none;
}

.top-search input::placeholder {
  color: var(--slate);
  opacity: 1;
}

.key-hint {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--slate);
  border: 1px solid var(--line-input);
  border-radius: var(--radius-sm);
  padding: 2px 7px;
}

.top-spacer {
  flex-grow: 1;
}

.btn-new {
  height: 44px;
  padding: 0 18px;
  font-size: 15px;
}

/* The user menu (initials): My account, Admin, Sign out. */
.account-nav {
  position: relative;
}

.user-menu {
  position: relative;
}

.user-menu > summary {
  list-style: none;
  cursor: pointer;
}

.user-menu > summary::-webkit-details-marker {
  display: none;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-lg);
  background: var(--indigo);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
}

.menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 240px;
  list-style: none;
  margin: 0;
  padding: 6px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-menu);
  z-index: 60;
}

.menu a,
.menu-button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  color: var(--dark-teal);
  font: inherit;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
}

.menu a:hover,
.menu-button:hover {
  background: var(--page);
}

.menu-who {
  display: flex;
  flex-direction: column;
  padding: 8px 12px 10px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line-soft);
  font-weight: 700;
  color: var(--indigo);
}

.menu-who span {
  font-weight: 400;
  font-size: 13px;
  color: var(--slate);
  word-break: break-all;
}

.page {
  flex-grow: 1;
  width: 100%;
  max-width: 1280px;
  padding: 28px 40px 48px;
}

.page.narrow {
  max-width: 640px;
}

.bottom-bar,
.new-fab {
  display: none;
}

/* Pages for visitors who aren't signed in (sign in, set a password). */
.public-header {
  display: flex;
  justify-content: center;
  padding: 40px 16px 8px;
}

.public-header img {
  width: 200px;
  height: auto;
}

.public-main {
  max-width: 960px;
  margin: 0 auto;
  padding: 24px 16px 48px;
}

.public-main.narrow {
  max-width: 520px;
}

/* ---------- Page headings ---------- */

.page-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 22px;
}

.page-head-row {
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.page-title {
  margin: 0;
  font-size: 38px;
  line-height: 1.1;
}

.page-title-large {
  font-size: 40px;
}

.lede {
  margin: 0;
  font-size: 16px;
  color: var(--slate);
}

.eyebrow {
  margin: 0;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slate);
}

.eyebrow-teal {
  color: var(--link-teal);
  letter-spacing: 0.08em;
}

.crumbs {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--slate);
}

.crumbs a {
  font-weight: 600;
  text-decoration: none;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 11px;
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

/* Gold is reserved for the one main action (New, Save). */
.btn-primary {
  background: var(--gold);
  color: var(--indigo);
}

.btn-primary:hover {
  background: #A9852A;
  color: var(--indigo);
}

.btn-teal {
  background: var(--teal);
  color: var(--white);
}

.btn-teal:hover {
  background: #106B88;
  color: var(--white);
}

.btn-secondary {
  background: var(--white);
  color: var(--link-teal);
  border-color: var(--teal);
}

.btn-secondary:hover {
  background: var(--info-bg);
  color: var(--link-teal-hover);
}

.btn-quiet {
  background: var(--white);
  color: var(--dark-teal);
  border-color: var(--line-input);
  font-weight: 600;
}

.btn-quiet:hover {
  background: var(--page);
  color: var(--dark-teal);
}

.btn-danger {
  background: var(--color-error);
  color: var(--white);
}

.btn-danger:hover {
  background: #8C1F17;
  color: var(--white);
}

.btn-small {
  min-height: 36px;
  padding: 0 12px;
  font-size: 14px;
  border-radius: var(--radius-md);
}

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}

.btn-link,
.link-button {
  background: none;
  border: none;
  color: var(--color-link);
  text-decoration: underline;
  font: inherit;
  cursor: pointer;
}

.link-button {
  padding: 0;
}

.inline-form {
  display: inline;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

/* ---------- Chips, pills, badges ---------- */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--dark-teal);
  background: var(--chip);
  border-radius: var(--radius-pill);
  padding: 4px 11px;
  text-decoration: none;
}

a.chip-link:hover {
  background: var(--line);
  color: var(--indigo);
}

.chip-small {
  font-size: 12.5px;
  padding: 2px 9px;
  margin: 1px 0;
}

.chip-sensitivity {
  color: var(--indigo);
  background: var(--restricted-bg);
  font-weight: 700;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 700;
  border-radius: var(--radius-pill);
  padding: 3px 9px;
  white-space: nowrap;
}

.pill-example {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--example-ink);
  background: var(--example-bg);
  padding: 4px 10px;
}

.pill-good {
  color: var(--good-ink);
  background: var(--good-bg);
}

.pill-info {
  color: var(--link-teal);
  background: var(--info-bg);
}

.pill-inferred,
.pill-quiet {
  color: var(--slate);
  background: var(--quiet-bg);
}

.badge {
  display: inline-block;
  min-width: 1.5em;
  padding: 0 var(--space-1);
  border-radius: var(--radius-pill);
  background: var(--teal);
  color: var(--white);
  font-size: 0.8rem;
  font-weight: 700;
  text-align: center;
}

/* ---------- Panels ---------- */

.panel,
.card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 22px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  margin: 0 0 22px;
}

.card > h1:first-child,
.card > h2:first-child,
.panel > h2:first-child {
  margin-top: 0;
}

.panel h2,
.card h2 {
  margin: 0;
  font-size: 21px;
}

.panel p,
.card p {
  margin: 0;
}

.panel-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.panel-head h2 {
  flex-grow: 1;
}

.panel-link {
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.sub-h {
  margin: 6px 0 0;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slate);
}

.placeholder {
  padding: 12px 14px;
  border-radius: var(--radius-lg);
  background: var(--page);
  border: 1px dashed var(--line-input);
  color: var(--slate);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.empty-state {
  color: var(--slate);
}

.empty-panel {
  padding: 24px;
  border: 1px dashed var(--line-input);
  border-radius: var(--radius-panel);
  background: var(--white);
  color: var(--slate);
}

.empty-panel p {
  margin: 0;
}

.help-text,
.field-hint {
  color: var(--slate);
  font-size: 14px;
}

/* ---------- Banners and notes ---------- */

.banners {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 22px;
}

.banner {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 16px;
  border-radius: var(--radius-lg);
  background: var(--info-bg);
  border: 1px solid var(--sky);
  color: var(--dark-teal);
  font-size: 14.5px;
  max-width: none;
  margin: 0;
}

.banner .icon {
  color: var(--link-teal);
  margin-top: 1px;
}

.banner-strong {
  font-weight: 700;
}

.banner-stop {
  background: var(--stop-bg);
  border-color: #F2C4BD;
}

.banner-stop .icon {
  color: var(--stop-ink);
}

.note-line {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 0 0 12px;
  font-size: 14.5px;
  color: var(--dark-teal);
  max-width: none;
}

.note-line .icon {
  color: var(--link-teal);
  margin-top: 2px;
}

.same-name-notes {
  margin-bottom: 12px;
}

.sealed-notice {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 10px 14px;
  border-radius: var(--radius-lg);
  border: 1px dashed #9FB1B8;
  color: var(--slate);
  font-size: 14px;
}

/* ---------- Help: first-time tips, change notes, "?" hints ---------- */

.screen-tip,
.change-note {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  justify-content: space-between;
  padding: 16px 18px;
  margin: 0 0 22px;
  border-radius: var(--radius-panel);
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 4px solid var(--teal);
}

.change-note {
  border-left-color: var(--gold);
  padding: 12px 16px;
  margin-bottom: 16px;
}

.panel .change-note {
  margin: 0;
}

.screen-tip h2 {
  margin: 0 0 6px;
  font-size: 18px;
}

.screen-tip p,
.change-note p {
  margin: 0 0 6px;
  font-size: 14.5px;
}

.change-note-eyebrow {
  font-size: 12px !important;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--example-ink);
}

.change-note-title {
  font-weight: 700;
  color: var(--indigo);
}

.tip-dismiss {
  flex: none;
}

.label-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.label-row label {
  margin: 0 !important;
}

.hint {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.hint > summary {
  list-style: none;
  cursor: pointer;
}

.hint > summary::-webkit-details-marker {
  display: none;
}

.hint-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--teal);
  color: var(--link-teal);
  background: var(--white);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1;
}

.hint[open] > .hint-toggle {
  background: var(--teal);
  color: var(--white);
}

.hint-body {
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  z-index: 50;
  width: min(320px, 80vw);
  padding: 12px 14px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-menu);
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--dark-teal);
  text-transform: none;
  letter-spacing: normal;
}

.hint-body p {
  margin: 0 0 6px;
}

.hint-body p:last-child {
  margin-bottom: 0;
}

.hint-title {
  font-weight: 700;
  color: var(--indigo);
}

/* ---------- Record pages (laid out like Record.dc.html) ---------- */

.record-top {
  margin-bottom: 18px;
}

.record-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.record-title {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.record-subtitle {
  margin: 0;
  font-size: 16px;
  color: var(--dark-teal);
}

.record-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.soon {
  width: 100%;
  font-size: 13px;
  color: var(--slate);
  text-align: right;
}

.action-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.record-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 22px;
  align-items: start;
}

.record-main {
  grid-column: span 7;
  min-width: 0;
}

.record-side {
  grid-column: span 5;
  min-width: 0;
}

.item-list,
.connection-list,
.note-list,
.plain-rows,
.pick-list,
.result-list,
.pair-list,
.card-grid,
.change-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--line-soft);
}

.item:first-child {
  border-top: none;
  padding-top: 4px;
}

.item-inferred {
  border-top-style: dashed;
}

.item-main {
  min-width: 0;
}

.item-title {
  margin: 0;
  font-weight: 700;
  color: var(--indigo);
}

.item-title a {
  color: var(--indigo);
}

.item-text {
  margin: 2px 0 0;
  font-size: 14px;
  color: var(--slate);
}

.item-side {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: flex-start;
  justify-content: flex-end;
}

.row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.plain-rows li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--line-soft);
  flex-wrap: wrap;
}

.plain-rows li:first-child {
  border-top: none;
}

.plain-rows .row-actions {
  margin-top: 0;
}

.connection {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  margin-bottom: 10px;
  border-radius: var(--radius-lg);
  background: var(--page);
  border: 1px solid var(--line-soft);
}

.connection-inferred {
  background: var(--white);
  border: 1px dashed #9FB1B8;
}

.connection-top {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.connection-text {
  font-size: 14px;
  line-height: 1.5;
}

.connection-text a {
  color: var(--indigo);
}

.soon-line {
  font-size: 13px;
}

.note {
  padding: 12px 0;
  border-top: 1px solid var(--line-soft);
}

.note:first-child {
  border-top: none;
  padding-top: 4px;
}

.note-pinned {
  background: var(--page);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: 12px 14px;
  margin-bottom: 10px;
}

.note-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  font-size: 13px;
  margin-bottom: 4px;
}

.note-title {
  margin: 4px 0;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
}

.note-body {
  white-space: pre-line;
  font-size: 14.5px;
}

.note-sources {
  font-size: 13.5px;
  margin-top: 4px !important;
}

.facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 0;
  font-size: 14px;
}

.facts-two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 18px;
}

.facts dt {
  font-size: 12.5px;
  color: var(--slate);
  display: flex;
  align-items: center;
  gap: 6px;
}

.facts dd {
  margin: 2px 0 0;
  font-weight: 600;
}

.add-box > summary {
  list-style: none;
  width: fit-content;
}

.add-box > summary::-webkit-details-marker {
  display: none;
}

.add-box[open] > summary {
  margin-bottom: 12px;
}

.add-box form {
  padding: 14px;
  border-radius: var(--radius-lg);
  background: var(--page);
  border: 1px solid var(--line-soft);
}

.tick-list {
  margin: 0;
  padding-left: 20px;
}

.tick-list li {
  margin: 4px 0;
}

/* ---------- Lists and filters ---------- */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 14px;
  align-items: flex-end;
  padding: 16px 18px;
  margin-bottom: 18px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
}

.filter {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 150px;
  flex: 1 1 150px;
}

.filter-search {
  flex: 2 1 260px;
}

.filter label {
  font-size: 13px;
  font-weight: 600;
}

.filter-actions {
  flex: 0 0 auto;
  min-width: 0;
  flex-direction: row;
  gap: 8px;
}

.filter input,
.filter select,
.search-row input,
.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field input[type="search"],
.field input[type="url"],
.field input[type="tel"],
.field input[type="number"],
.field input[type="date"],
.field input:not([type]),
.field select,
.field textarea {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--line-input);
  border-radius: var(--radius-md);
  background: var(--white);
  color: var(--dark-teal);
  font-family: var(--font-body);
  font-size: 15px;
}

.field textarea {
  min-height: 88px;
  line-height: 1.5;
  resize: vertical;
}

.field select[multiple] {
  min-height: 160px;
}

.results-count {
  margin: 0 0 10px;
  font-size: 14px;
  color: var(--slate);
}

.record-name {
  font-weight: 700;
  color: var(--indigo);
  text-decoration: none;
}

.record-name:hover {
  text-decoration: underline;
}

.match-reason {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  font-weight: 400;
  color: var(--slate);
}

.pagination {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}

.pagination-where {
  font-size: 14px;
  color: var(--slate);
}

.tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--chip);
  border-radius: var(--radius-lg);
  width: fit-content;
  margin-bottom: 18px;
}

.tabs a {
  display: flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 9px;
  color: var(--dark-teal);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
}

.tabs a[aria-current="page"] {
  background: var(--white);
  color: var(--indigo);
  box-shadow: 0 1px 3px rgba(5, 55, 72, 0.16);
}

/* ---------- Tables (become cards on a phone) ---------- */

.table-wrap {
  overflow-x: auto;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
  font-size: 14.5px;
}

.data-table th,
.data-table td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}

.data-table tbody tr:last-child th,
.data-table tbody tr:last-child td {
  border-bottom: none;
}

.data-table thead th {
  position: sticky;
  top: 0;
  background: var(--white);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slate);
  border-bottom: 1px solid var(--line);
}

.data-table tbody th {
  font-weight: 400;
}

.compare-table td label {
  margin-left: 6px;
}

/* ---------- Search, pickers, networks, duplicates ---------- */

.search-panel label {
  font-weight: 700;
}

.search-row {
  display: flex;
  gap: 10px;
  align-items: center;
}

.search-row input {
  flex-grow: 1;
}

.search-group h2 {
  font-size: 19px;
}

.result {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  padding: 10px 0;
  border-top: 1px solid var(--line-soft);
}

.result:first-child {
  border-top: none;
}

.result-name {
  font-weight: 700;
  color: var(--indigo);
  text-decoration: none;
}

.result-name:hover {
  text-decoration: underline;
}

.result-text {
  font-size: 14px;
  color: var(--slate);
}

.result .match-reason {
  flex-basis: 100%;
  margin: 0;
}

.picker-search label {
  display: block;
  font-weight: 700;
  margin-bottom: 4px;
}

.pick-list li + li {
  margin-top: 6px;
}

.pick-choice {
  margin: 0;
}

.pick-button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
  color: var(--dark-teal);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.pick-button:hover {
  border-color: var(--teal);
  background: var(--page);
}

.pick-name {
  font-weight: 700;
  color: var(--indigo);
}

.pick-action {
  margin-left: auto;
  font-weight: 700;
  color: var(--link-teal);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}

.card-grid .panel {
  margin: 0;
}

.network-name {
  font-size: 19px !important;
}

.network-name a {
  color: var(--indigo);
  text-decoration: none;
}

.network-name a:hover {
  text-decoration: underline;
}

.member-counts {
  display: flex;
  gap: 16px;
  font-size: 14px;
  color: var(--slate);
}

.member-counts strong {
  color: var(--indigo);
}

.pair {
  gap: 10px;
}

.pair-names {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-weight: 700;
  color: var(--indigo);
}

.pair-and {
  font-weight: 400;
  color: var(--slate);
}

.pair-reasons {
  margin: 0;
  padding-left: 20px;
  font-size: 14px;
  color: var(--slate);
}

.compare-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.compare-grid .panel {
  margin: 0 0 22px;
}

.more-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.more-link {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 4px;
  border-top: 1px solid var(--line-soft);
  text-decoration: none;
}

.more-list li:first-child .more-link {
  border-top: none;
}

.more-link-title {
  font-weight: 700;
  color: var(--indigo);
}

.more-link-text {
  font-size: 14px;
  color: var(--slate);
}

.more-link-phone {
  display: none;
}

.more-sign-out {
  margin-top: 8px;
}

.change-item h2 {
  font-size: 19px;
}

.change-list {
  display: flex;
  flex-direction: column;
}

.today-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.quick-links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.quick-links a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-weight: 600;
  text-decoration: none;
}

/* ---------- Add something new (T4d) ----------
   Where "+ New" leads: four large choices, each tile one link, four
   across on wide screens and two across below 1100 px and on phones (so
   all four fit on a phone's first screen). Then the name check, with a
   search box like the top bar's. */

.new-grid {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.new-grid > li {
  display: flex;
  min-width: 0;
}

.new-tile {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 168px;
  padding: 18px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-soft);
  color: var(--dark-teal);
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.new-tile:hover {
  color: var(--dark-teal);
  border-color: var(--teal);
  box-shadow: 0 8px 22px rgba(5, 55, 72, 0.12);
  transform: translateY(-2px);
}

.new-tile-icon {
  width: 46px;
  height: 46px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  background: var(--info-bg);
  color: var(--link-teal);
}

.new-tile-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--indigo);
}

.new-tile-plus {
  width: 24px;
  height: 24px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--gold);
  color: var(--indigo);
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
}

.new-tile-text {
  font-size: 14px;
}

/* What it needs, at the bottom of the tile: muted while the page it opens
   isn't ready yet. */
.new-tile-needs {
  margin-top: auto;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--link-teal);
}

.new-tile-later {
  color: var(--slate);
}

.new-read-only {
  margin: -8px 0 22px;
  color: var(--slate);
}

.name-check-box {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 14px;
  border: 1px solid var(--line-input);
  border-radius: var(--radius-lg);
  background: var(--page);
  color: var(--slate);
}

.name-check-box:focus-within {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(20, 126, 159, 0.2);
}

.name-check-box input {
  flex-grow: 1;
  min-width: 0;
  min-height: 46px;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 16px;
  color: var(--dark-teal);
  outline: none;
}

.name-check-box input::placeholder {
  color: var(--slate);
  opacity: 1;
}

.name-check-results {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.name-check-results .sub-h {
  margin: 0;
}

.name-check-add {
  font-weight: 700;
  color: var(--indigo);
}

@media (max-width: 1099px) {
  .new-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .new-tile {
    transition: none;
  }

  .new-tile:hover {
    transform: none;
  }
}

/* ---------- Forms ---------- */

.form-panel {
  max-width: 820px;
}

.form-section {
  border: none;
  padding: 0;
  margin: 0 0 18px;
}

.form-section > legend {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 19px;
  color: var(--indigo);
  padding: 0;
  margin-bottom: 12px;
}

/* The organization's kind in up to three steps: sector, type, and detail. */
.kind-steps {
  border: none;
  padding: 0;
  margin: 0;
  min-width: 0;
}

.kind-steps > legend {
  padding: 0;
  margin-bottom: 6px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slate);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 18px;
}

.form-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.inline-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 0 14px;
  align-items: flex-end;
}

.inline-fields .field {
  flex: 1 1 180px;
}

.inline-fields > .btn {
  margin-bottom: 16px;
}

.field {
  margin: 0 0 16px;
}

.field > label,
.choice-set > legend,
.fieldset legend {
  display: block;
  font-weight: 600;
  margin-bottom: 4px;
}

.field-hint,
.field-error {
  margin: 0 0 6px;
}

.field-hint-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: -8px 0 16px;
}

.field-hint-row .field-hint {
  margin: 0;
}

.field-error {
  color: var(--color-error);
  font-weight: 600;
}

.field-invalid input,
.field-invalid select,
.field-invalid textarea {
  border-color: var(--color-error) !important;
}

.choice-set {
  border: none;
  padding: 0;
}

.choice-set > legend {
  float: left;
  width: auto;
  margin-right: 6px;
}

.choice-set > .hint {
  margin-bottom: 4px;
}

.choice-set > .field-hint,
.choice-set > .field-error,
.choice-set > .choice-list {
  clear: both;
}

.choice-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 4px;
}

.choice-columns .choice-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 4px 16px;
}

.choice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-height: 32px;
}

.choice input {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.2rem;
  flex: none;
  accent-color: var(--teal);
}

.tag-group {
  margin-bottom: 10px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: 10px 14px;
}

.tag-group > summary {
  font-weight: 700;
  cursor: pointer;
  min-height: 32px;
  display: list-item;
}

.tag-group[open] > summary {
  margin-bottom: 10px;
}

/* Quick add (T4c): the essentials first, everything else folded under
   "More details (optional)", a native <details> (templates/_forms.html).
   The summary is a full-width bar at least 48 px tall, with a chevron
   that points down when open.

   A browser passes a <details> element's content through a built-in slot
   that inheritance can't reach (the base rule now sets border-box directly), so that content
   would fall back to content-box, and full-width inputs inside would
   spill out by their padding and border. The summary and the body set it
   again, and everything in the body inherits it from there. */
.more-details {
  margin: 0 0 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
}

.more-details > summary,
.more-details-body {
  box-sizing: border-box;
}

.more-details > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 10px 16px;
  border-radius: var(--radius-lg);
  list-style: none;
  cursor: pointer;
  font-weight: 700;
  color: var(--indigo);
}

.more-details > summary::-webkit-details-marker {
  display: none;
}

.more-details > summary::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin: 0 4px 0 2px;
  border-right: 2px solid var(--teal);
  border-bottom: 2px solid var(--teal);
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
}

.more-details[open] > summary::before {
  transform: rotate(45deg);
}

.more-details > summary:hover {
  background: var(--page);
}

.more-details[open] > summary {
  border-bottom: 1px solid var(--line-soft);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.more-details-body {
  padding: 18px 16px 2px;
}

.field-checkbox {
  margin-bottom: 12px;
}

.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.checkbox-row input[type="checkbox"] {
  width: 1.2rem;
  height: 1.2rem;
  margin-top: 0.2rem;
  flex: none;
  accent-color: var(--teal);
}

.field-checkbox .field-hint {
  margin-left: calc(1.2rem + 8px);
}

.fieldset {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  margin: 0 0 var(--space-4);
}

.error-summary {
  border: 3px solid var(--color-error);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  margin-bottom: var(--space-4);
  background: var(--white);
}

.error-summary h2 {
  margin-top: 0;
  font-size: 1.1rem;
}

.error-summary a {
  color: var(--color-error);
  font-weight: 600;
}

/* ---------- Messages ---------- */

.notices {
  margin-bottom: var(--space-4);
}

.notice {
  max-width: none;
  border-left: 4px solid var(--link-teal);
  background: var(--info-bg);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  margin: 0 0 var(--space-3);
}

.notice-error {
  border-left-color: var(--color-error);
  background: var(--color-error-bg);
  color: var(--color-error);
  font-weight: 600;
}

.notice-success {
  border-left-color: var(--color-success);
  background: var(--color-success-bg);
  color: var(--color-success);
}

.status {
  font-weight: 700;
}

.status-on {
  color: var(--color-success);
}

.status-off {
  color: var(--color-error);
}

/* ---------- htmx loading indicators ----------
   htmx's built-in indicator styles are switched off in base.html (htmx
   would inject them as a <style> tag, which the Content-Security-Policy
   blocks), so the same behavior lives here instead. */

.htmx-indicator {
  opacity: 0;
  transition: opacity 200ms ease-in;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  opacity: 1;
}

.htmx-request.results,
.htmx-request .results {
  opacity: 0.6;
}

@media (prefers-reduced-motion: reduce) {
  .htmx-indicator {
    transition: none;
  }
}

/* ---------- Sign-in, account and admin pages (T3) ---------- */

.sub-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--line);
  padding-bottom: var(--space-2);
}

.sub-nav a[aria-current="page"] {
  font-weight: 700;
  text-decoration: none;
  color: var(--indigo);
}

.steps {
  padding-left: 1.25rem;
}

.steps > li {
  margin-bottom: var(--space-4);
}

/* A QR code needs dark squares on a light background. */
.qr-code {
  display: inline-block;
  background: #ffffff;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
}

.qr-code img {
  display: block;
}

.secret-key,
.recovery-codes,
.link-box {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.secret-key {
  font-size: 1.1rem;
  letter-spacing: 0.05em;
  word-break: break-word;
}

.recovery-codes {
  background: var(--page);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  font-size: 1.1rem;
  line-height: 1.8;
  columns: 2;
}

.copy-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  margin-bottom: var(--space-3);
}

.link-box {
  flex: 1 1 20rem;
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line-input);
  border-radius: var(--radius-sm);
  background: var(--page);
  color: var(--dark-teal);
  font-size: 0.9rem;
}

.plain-list {
  padding-left: 1.25rem;
}

.summary-list {
  display: grid;
  grid-template-columns: minmax(8rem, max-content) 1fr;
  gap: var(--space-2) var(--space-4);
  margin: 0;
}

.summary-list dt {
  font-weight: 600;
}

.summary-list dd {
  margin: 0;
}

.action-list {
  display: grid;
  gap: var(--space-4);
}

.action h3 {
  margin: 0 0 var(--space-1);
  font-size: 1.05rem;
}

.action p {
  margin-top: 0;
}

.request-list {
  list-style: none;
  padding: 0;
}

.request-list h2 {
  margin: 0 0 var(--space-1);
  font-size: 1.15rem;
}

/* ---------- Phone: below 768 px ---------- */

@media (max-width: 767px) {
  .rail {
    display: none;
  }

  .top-bar {
    height: 62px;
    padding: 0 12px 0 16px;
    gap: 6px;
  }

  .top-logo {
    display: block;
    margin-right: auto;
  }

  .top-logo img {
    display: block;
    width: 118px;
    height: auto;
  }

  .top-search,
  .top-spacer,
  .btn-new,
  .top-example {
    display: none;
  }

  .top-search-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-lg);
    color: var(--dark-teal);
  }

  .avatar {
    width: 44px;
    height: 44px;
    border-radius: 11px;
  }

  .page {
    padding: 18px 16px 120px;
  }

  .page-title {
    font-size: 27px;
    line-height: 1.15;
  }

  .page-title-large {
    font-size: 27px;
  }

  .bottom-bar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    height: 76px;
    background: var(--white);
    border-top: 1px solid var(--line);
  }

  .bottom-bar a {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 44px;
    color: var(--slate);
    font-size: 11.5px;
    font-weight: 600;
    text-decoration: none;
    border-top: 3px solid transparent;
  }

  .bottom-bar a[aria-current="page"] {
    color: var(--indigo);
    font-weight: 700;
    border-top-color: var(--teal);
  }

  .new-fab {
    display: flex;
    align-items: center;
    gap: 8px;
    position: fixed;
    right: 16px;
    bottom: 92px;
    z-index: 55;
    height: 56px;
    padding: 0 22px;
    border-radius: 28px;
    background: var(--gold);
    color: var(--indigo);
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    box-shadow: var(--shadow-fab);
  }

  .record-grid,
  .today-grid,
  .compare-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .record-actions {
    width: 100%;
  }

  .soon {
    text-align: left;
  }

  .form-grid,
  .form-grid-3,
  .facts-two {
    grid-template-columns: 1fr;
  }

  .btn,
  .pick-button,
  .filter input,
  .filter select {
    min-height: 44px;
  }

  .btn-small {
    min-height: 44px;
  }

  .hint-toggle {
    width: 28px;
    height: 28px;
  }

  .more-details > summary {
    padding: 10px 12px;
  }

  .more-details-body {
    padding: 16px 12px 2px;
  }

  .new-grid {
    gap: 10px;
  }

  .new-tile {
    min-height: 0;
    padding: 14px;
  }

  .new-tile-icon {
    width: 40px;
    height: 40px;
  }

  .new-tile-title {
    gap: 6px;
    font-size: 16px;
  }

  .new-tile-plus {
    width: 20px;
    height: 20px;
    font-size: 15px;
  }

  .new-tile-text {
    font-size: 13px;
  }

  .more-link-phone {
    display: flex;
  }

  .screen-tip,
  .change-note {
    flex-direction: column;
  }

  /* Tables become cards: one card per row, each value with its label. */
  .record-table thead {
    display: none;
  }

  .record-table,
  .record-table tbody,
  .record-table tr,
  .record-table th,
  .record-table td {
    display: block;
    width: 100%;
  }

  .record-table tr {
    padding: 12px 14px;
    border-bottom: 1px solid var(--line-soft);
  }

  .record-table th,
  .record-table td {
    border: none;
    padding: 2px 0;
  }

  .record-table td[data-label]:not(:empty)::before {
    content: attr(data-label) ": ";
    font-size: 13px;
    color: var(--slate);
  }

  .record-table td:empty {
    display: none;
  }

  .summary-list {
    grid-template-columns: 1fr;
  }

  .summary-list dd {
    margin-bottom: var(--space-2);
  }

  .public-header {
    padding-top: 24px;
  }
}