:root {
  /* Surfaces */
  --bg: #F7F6FB;
  --surface: #ffffff;
  --surface-2: #FAFAFE;
  --border: #E4E3EE;
  --border-soft: #F3F4F6;

  /* Text */
  --text: #1F2033;
  --text-2: #3F3F52;
  --muted: #6B6B80;
  /* The palest text. It was #9CA3AF, 2.5:1 on white, set on 23 kinds of
     text including the view switcher and secondary buttons; 4.5:1 is the
     floor for reading (WCAG AA). #6E7183 at first, which measured 4.49:1
     where a view switcher sits on the page grey (Appointments, CRM); now
     5.1:1 on white and 4.8:1 on the page grey (4 October 2026). Still a
     step lighter than --muted. */
  --faint: #6A6D7F;

  /* Accent and states */
  --accent: #4F46E5;
  --accent-dark: #4338CA;
  --accent-soft: #EEF2FF;
  --ok: #065F46;
  --ok-soft: #D1FAE5;
  --warn: #92400E;
  --warn-soft: #FEF3C7;
  --danger: #991B1B;
  --danger-soft: #FEE2E2;

  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --r-card: 14px;
  --r-control: 10px;
  --r-pill: 9999px;
  --shadow-sm: 0 2px 12px rgba(31, 32, 51, 0.06), 0 1px 3px rgba(31, 32, 51, 0.04);
  --shadow-md: 0 8px 24px rgba(31, 32, 51, 0.08);
  --shadow-pop: 0 32px 80px rgba(79, 70, 229, 0.12), 0 8px 24px rgba(31, 32, 51, 0.08);

  --rail: 240px;

  /* Named in the dark-mode work (4 October 2026): these were written into
     rules as plain colours, so they could not change with the theme. The
     light values are the ones they had. */
  --border-strong: #d0d7e2;
  --border-dashed: #d6dde6;
  --track: #eef1f5;
  --track-2: #e3e8ef;
  --pill-bg: #F3F4F6;
  --pill-text: #374151;
  --chip-bg: #f2f4f7;
  --neutral-soft: #F1F1F5;
  --high-bg: #E8E9F1;
  --accent-line: #C7D2FE;
  --ok-line: #a6f4c5;
  --warn-line: #f6cfa8;
  --warn-softer: #fffbeb;
  --danger-line: #fecdc9;
  /* Indigo as a background under white text (buttons, the chat button).
     The same as --accent in light; in dark --accent is brighter, for text
     and lines on a dark page, and buttons keep a deeper one. */
  --accent-solid: #4F46E5;
  --accent-solid-hover: #4338CA;
  /* Signers' colours in the signing editor (e-signature, 19 October 2026):
     identity only, never a status, so no red (Urgent) and no amber (late).
     Each is 4.5:1 or more on --surface, as its number is written in it. */
  --sig-0: #4F46E5;
  --sig-1: #0F766E;
  --sig-2: #9A3412;
  --sig-3: #7C3AED;
  --sig-4: #0369A1;
  --sig-5: #4D7C0F;
  --sig-6: #BE185D;
  --sig-7: #475569;

  /* The sign-in pages' navy panel and the white card drawn on it (from
     the Codex design preview, 8 October 2026). Not redefined for dark
     mode on purpose: the panel is dark in both themes, and the card is a
     drawing of the light app. Every text colour is at least 4.5:1 on the
     surface it sits on. */
  --auth-navy: #080F27;
  --auth-on-navy: #FFFFFF;
  --auth-navy-text: #AAB7D1;
  --auth-navy-faint: #8D9BBD;
  --auth-navy-accent: #8E9FFF;
  --auth-navy-line: rgba(255, 255, 255, 0.09);
  --auth-card: #FFFFFF;
  --auth-card-bar: #F7F9FE;
  --auth-card-border: #DBE3F2;
  --auth-card-text: #253557;
  --auth-card-muted: #5F6B85;
  --auth-card-soft: #EDF1FF;
  --auth-card-blue: #4458E0;
  --auth-card-line: #E3E9F6;
  --auth-toast: rgba(23, 37, 64, 0.94);
  --auth-toast-border: rgba(83, 101, 140, 0.4);
  --auth-toast-text: #E0E7FC;
  --auth-toast-muted: #A3B1CE;
  --auth-toast-icon: rgba(109, 135, 252, 0.1);
  --auth-toast-icon-border: rgba(124, 148, 253, 0.19);
  --auth-grid: rgba(113, 132, 181, 0.07);
  --auth-card-shadow: 0 24px 65px rgba(1, 6, 22, 0.4);
  --auth-toast-shadow: 0 14px 35px rgba(3, 8, 25, 0.31);
  --auth-card-teal-bg: #E6F1F4;
  --auth-card-teal: #2F6676;
  --auth-mini: #172542;
  --auth-mini-border: rgba(113, 136, 196, 0.27);
  --auth-mini-bar: rgba(126, 145, 189, 0.44);
  --auth-mini-dash: rgba(127, 148, 196, 0.38);
  --auth-mini-text: #B4C4E8;
  /* An edge for the navy panel, needed only on a dark page. */
  --auth-panel-edge: transparent;

  /* The top bar on a laptop (9 October 2026): deep indigo in both themes,
     like the sign-in panel, so not redefined for dark. Text on it: white
     16:1, --gbar-muted 10:1, and 8.6:1 on --gbar-field. */
  --gbar: #17153B;
  --gbar-text: #FFFFFF;
  --gbar-muted: #C9C8EC;
  --gbar-field: #26235A;
  --gbar-line: #3A3770;

  color-scheme: light;
}

/* Dark: chosen in Settings (data-theme="dark" on <html>), or the device's
   own setting when the choice is Automatic. Two copies of the same values
   because CSS cannot say "dark, unless Light was chosen" in one selector.
   Every text colour here is at least 4.5:1 on the surfaces it sits on
   (measured 4 October 2026: --faint 5.4:1 on --surface-2, --accent 7.2:1
   on --surface, white on --accent-solid 5.4:1). */
:root[data-theme='dark'] {
  --bg: #0F1020;
  --surface: #181A2B;
  --surface-2: #1E2033;
  --border: #2E3048;
  --border-soft: #25273B;
  --text: #ECEDF5;
  --text-2: #C9CBDA;
  --muted: #A6A9BD;
  --faint: #9295AB;
  --accent: #A29DFF;
  --accent-dark: #C4C1FF;
  --accent-soft: #28264D;
  --ok: #6EE7B7;
  --ok-soft: #123329;
  --warn: #FCD34D;
  --warn-soft: #3A2E12;
  --danger: #FCA5A5;
  --danger-soft: #3D1C21;
  --shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-pop: 0 32px 80px rgba(0, 0, 0, 0.55), 0 8px 24px rgba(0, 0, 0, 0.4);
  --border-strong: #3B3E5A;
  --border-dashed: #3A3D58;
  --track: #2A2C42;
  --track-2: #34364F;
  --pill-bg: #2A2C42;
  --pill-text: #D7D9E6;
  --chip-bg: #24263A;
  --neutral-soft: #26283C;
  --high-bg: #34364F;
  --accent-line: #3C3A70;
  --ok-line: #1E5A47;
  --warn-line: #5C4718;
  --warn-softer: #2A2414;
  --danger-line: #6A2A31;
  --accent-solid: #5B54E8;
  --accent-solid-hover: #6A63F0;
  --sig-0: #A29DFF;
  --sig-1: #5EEAD4;
  --sig-2: #FDBA74;
  --sig-3: #C4B5FD;
  --sig-4: #7DD3FC;
  --sig-5: #BEF264;
  --sig-6: #F9A8D4;
  --sig-7: #CBD5E1;
  --auth-panel-edge: rgba(255, 255, 255, 0.08);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #0F1020;
    --surface: #181A2B;
    --surface-2: #1E2033;
    --border: #2E3048;
    --border-soft: #25273B;
    --text: #ECEDF5;
    --text-2: #C9CBDA;
    --muted: #A6A9BD;
    --faint: #9295AB;
    --accent: #A29DFF;
    --accent-dark: #C4C1FF;
    --accent-soft: #28264D;
    --ok: #6EE7B7;
    --ok-soft: #123329;
    --warn: #FCD34D;
    --warn-soft: #3A2E12;
    --danger: #FCA5A5;
    --danger-soft: #3D1C21;
    --shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
    --shadow-pop: 0 32px 80px rgba(0, 0, 0, 0.55), 0 8px 24px rgba(0, 0, 0, 0.4);
    --border-strong: #3B3E5A;
    --border-dashed: #3A3D58;
    --track: #2A2C42;
    --track-2: #34364F;
    --pill-bg: #2A2C42;
    --pill-text: #D7D9E6;
    --chip-bg: #24263A;
    --neutral-soft: #26283C;
    --high-bg: #34364F;
    --accent-line: #3C3A70;
    --ok-line: #1E5A47;
    --warn-line: #5C4718;
    --warn-softer: #2A2414;
    --danger-line: #6A2A31;
    --accent-solid: #5B54E8;
    --accent-solid-hover: #6A63F0;
    --sig-0: #A29DFF;
    --sig-1: #5EEAD4;
    --sig-2: #FDBA74;
    --sig-3: #C4B5FD;
    --sig-4: #7DD3FC;
    --sig-5: #BEF264;
    --sig-6: #F9A8D4;
    --sig-7: #CBD5E1;
    --auth-panel-edge: rgba(255, 255, 255, 0.08);
    color-scheme: dark;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body,
#root {
  height: 100%;
}

/* Placeholders were the browser's own grey, which is 3.7:1 on a dark
   field (found 4 October 2026: the dark-mode contrast scan looked only at
   text, not at placeholders). --faint is 5.1:1 on white and passes in
   dark. opacity: Firefox dims placeholders on its own. */
::placeholder {
  color: var(--faint);
  opacity: 1;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 0.875rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'cv05' 1;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================ shell ============================ */

.app {
  display: grid;
  grid-template-columns: var(--rail) 1fr;
  min-height: 100%;
}

.rail {
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 1.25rem 0 1rem;
  /* A grid item defaults to min-width:auto, so it refuses to shrink below the
     width of its widest content. On a phone the navigation turns into a row
     of nine items that do not wrap, and without this the rail stretched the
     whole grid column to about 1160px: the page was three times wider than
     the screen and every screen had to be scrolled sideways. */
  min-width: 0;
}

.rail__brand {
  padding: 0 1.125rem 1rem;
}

.brandlogo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.brandmark {
  flex: 0 0 auto;
  display: block;
}

.brandlogo__word {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rail__org {
  padding: 0 1.125rem 1rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-soft);
}

.rail__org-name {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
}

.rail__org-meta {
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 0.125rem;
}

.rail__nav {
  display: flex;
  flex-direction: column;
  padding: 0.25rem 0.625rem;
  gap: 0.125rem;
  flex: 1;
}

/* On a laptop the More wrapper takes no part in the layout and the More
   button is not shown: the rail lists everything, as before. */
.rail__more {
  display: contents;
}

.rail__nav .navitem--more,
.navitem__short {
  display: none;
}

.navitem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-2);
  background: none;
  border: none;
  border-radius: var(--r-control);
  padding: 0.5rem 0.625rem;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s ease, color 0.12s ease;
}

.navitem:hover {
  background: var(--bg);
  color: var(--text);
}

.navitem--active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}

.navitem__body {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-width: 0;
}

.navitem__icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--faint);
}

.navitem:hover .navitem__icon {
  color: var(--muted);
}

.navitem--active .navitem__icon {
  color: var(--accent);
}

.navitem__count {
  font-size: 0.75rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--faint);
}

.navitem--active .navitem__count {
  color: var(--accent-dark);
}

/* Listed twice because the active rule above is more specific: on the
   selected item the count was drawn in #4338ca on its own #4f46e5 pill,
   so the number vanished exactly where you were looking. */
.navitem__count--flag,
.navitem--active .navitem__count--flag {
  color: #fff;
  background: var(--accent-solid);
  border-radius: var(--r-pill);
  padding: 0.0625rem 0.4375rem;
  font-weight: 700;
}

.rail__foot {
  padding: 0.875rem 1.125rem 0;
  border-top: 1px solid var(--border-soft);
  font-size: 0.8125rem;
}

.rail__user {
  color: var(--muted);
  word-break: break-all;
  margin-bottom: 0.375rem;
}

.raillink {
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--muted);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.raillink:hover {
  color: var(--accent);
}

.raillink + .raillink {
  margin-left: 0.875rem;
}

/* Filled on a laptop only (placeShellTools); on a phone search, New and
   the bell are in the page header and this is empty. */
.rail__tools {
  display: none;
}

/* ====================== top bar (laptop) ======================
   The left rail became a dark top bar over a row of rounded section
   tabs (9 October 2026, from the design the founder chose: the layout
   of enterprise workspaces, in Macsen's own colours and shapes). The
   same rail element as the phone's: the phone rules (max-width: 860px)
   are untouched, and these only apply above them. */
@media (min-width: 861px) {
  .app {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr;
  }

  /* The page uses the width the bar does. The 1400px cap was set while
     the menu was a rail down the left; under a full-width bar it left a
     strip of empty page on the right of any wider screen (reported by
     the founder, 9 October 2026). Two classes: this block comes before
     the plain .content rule in the file, which would otherwise win. */
  .app .content {
    max-width: none;
  }

  /* Two rows: the bar (3.5rem, drawn by the background) and the tabs.
     Above the page (z-index) so the bell and New menus open over it. */
  .rail {
    position: relative;
    z-index: 50;
    display: grid;
    grid-template-columns: auto minmax(0, max-content) minmax(0, 1fr) auto;
    grid-template-rows: 3.5rem auto;
    grid-template-areas:
      'brand org tools foot'
      'nav   nav nav   nav';
    align-items: center;
    padding: 0;
    border-right: none;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(var(--gbar) 0 3.5rem, var(--surface) 3.5rem);
  }

  .rail__brand {
    grid-area: brand;
    padding: 0 1rem 0 1.25rem;
  }

  .rail .brandlogo__word {
    color: var(--gbar-text);
  }

  /* A cap, because the grid would not shrink it: a long name
     ("Provincial Government of Negros Oriental, Office of the
     Governor") took 440px and pushed the page 99px wider than an
     861px screen. It ends in an ellipsis; the full name is its title. */
  .rail__org {
    grid-area: org;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    max-width: 20rem;
    margin: 0;
    padding: 0.25rem 0 0.25rem 1rem;
    border-bottom: none;
    border-left: 1px solid var(--gbar-line);
  }

  .rail__org-name {
    color: var(--gbar-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* "Support session" and "Platform staff" change what you are looking
     at, so they are a badge, not small print. */
  .rail__org-meta {
    margin: 0;
    flex: none;
    padding: 0.0625rem 0.5rem;
    border-radius: var(--r-pill);
    background: var(--gbar-field);
    color: var(--gbar-muted);
    font-weight: 600;
  }

  .rail__tools {
    grid-area: tools;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    padding: 0 0.75rem 0 1.25rem;
  }

  .rail__tools .searchtrigger {
    flex: 0 1 26rem;
    width: auto;
    min-width: 9rem;
    margin-right: auto;
    background: var(--gbar-field);
    border-color: var(--gbar-line);
    box-shadow: none;
    color: var(--gbar-muted);
  }

  .rail__tools .searchtrigger:hover {
    border-color: var(--gbar-muted);
  }

  .rail__tools .searchtrigger__hint {
    color: var(--gbar-muted);
    border-color: var(--gbar-line);
  }

  .rail__tools .bellbtn {
    background: transparent;
    border-color: transparent;
    color: var(--gbar-muted);
  }

  .rail__tools .bellbtn:hover {
    background: var(--gbar-field);
    color: var(--gbar-text);
  }

  .rail__foot {
    grid-area: foot;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.25rem 1.25rem 0.25rem 1rem;
    border-top: none;
    border-left: 1px solid var(--gbar-line);
  }

  /* The address is what Account opens. */
  .rail__user {
    display: none;
  }

  .rail__foot .raillink {
    color: var(--gbar-muted);
    white-space: nowrap;
  }

  .rail__foot .raillink:hover {
    color: var(--gbar-text);
  }

  .rail__foot .raillink + .raillink {
    margin: 0;
  }

  /* The sections: one row of rounded tabs, scrolling sideways only if a
     narrow laptop cannot fit them all. */
  .rail__nav {
    grid-area: nav;
    flex-direction: row;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 1rem;
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .rail__nav .navitem {
    width: auto;
    flex: none;
    gap: 0.375rem;
    padding: 0.4375rem 0.875rem;
    border-radius: var(--r-pill);
    white-space: nowrap;
  }

  .rail__nav .navitem__icon {
    display: none;
  }

  .rail__nav .navitem:hover {
    background: var(--accent-soft);
    color: var(--text);
  }

  .rail__nav .navitem--active,
  .rail__nav .navitem--active:hover {
    background: var(--accent-solid);
    color: #ffffff;
  }

  .rail__nav .navitem__count {
    color: var(--muted);
  }

  /* On the filled tab the count is a white chip with the tab's colour;
     a flagged one too (its own fill is the tab's colour and would
     vanish). White text on a translucent chip was 4.0:1 (3.6:1 dark). */
  .rail__nav .navitem--active .navitem__count,
  .rail__nav .navitem--active .navitem__count--flag {
    color: var(--accent-solid);
    background: #ffffff;
    border-radius: var(--r-pill);
    padding: 0.0625rem 0.4375rem;
  }

  .rail__nav .navitem__count--flag {
    color: #ffffff;
  }

  .rail__tools .searchtrigger {
    white-space: nowrap;
    overflow: hidden;
  }
}

/* A narrow laptop: at 861px the tabs ran 78px past the screen (Settings
   half hidden) and "Search or jump to…" broke onto two lines in a 151px
   box, making the bar taller. Tighter tabs and the short label. */
@media (min-width: 861px) and (max-width: 1040px) {
  .rail__nav {
    gap: 0.125rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .rail__nav .navitem {
    padding-left: 0.625rem;
    padding-right: 0.625rem;
  }

  .rail__tools .searchtrigger__long {
    display: none;
  }

  .rail__org {
    max-width: 12rem;
  }

  .rail__tools .searchtrigger {
    min-width: 6rem;
  }

  .rail__tools .searchtrigger__short {
    display: inline;
  }
}

/* ============================ main ============================ */

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

.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 1rem 1.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: center;
  justify-content: space-between;
}

.topbar__left {
  min-width: 0;
}

.topbar__title {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.25;
  margin: 0;
}

.topbar__actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.content {
  padding: 1.5rem 1.75rem 4rem;
  max-width: 1400px;
}

.content--wide {
  max-width: none;
}

.crumbs {
  display: flex;
  align-items: center;
  gap: 0.3125rem;
  font-size: 0.8125rem;
  color: var(--muted);
  margin-bottom: 0.1875rem;
}

.crumbs__link {
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--muted);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.crumbs__link:hover {
  color: var(--accent);
}

/* ======================= attention block ======================= */

.attention {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--warn);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-sm);
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
}

.attention__title {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--warn);
  margin-bottom: 0.625rem;
}

.attention__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
}

.attention__item {
  display: flex;
  align-items: baseline;
  gap: 0.4375rem;
  font-size: 0.875rem;
  color: var(--text-2);
}

.attention__count {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1;
  color: var(--warn);
  font-variant-numeric: tabular-nums;
}

.calm {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-sm);
  padding: 0.875rem 1.25rem;
  margin-bottom: 1.25rem;
  color: var(--muted);
}

/* ======================== metric cards ======================== */

.register {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0.875rem;
  margin-bottom: 1.5rem;
}

.figure {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-sm);
  padding: 1.25rem;
}

.figure__value {
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.figure__label {
  font-size: 0.8125rem;
  color: var(--muted);
  margin-top: 0.25rem;
}

.figure--muted .figure__value {
  color: var(--faint);
}

.figure--link {
  cursor: pointer;
  text-align: left;
  width: 100%;
  font-family: var(--sans);
  transition: box-shadow 0.12s ease, border-color 0.12s ease;
}

.figure--link:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}

/* ========================== panels =========================== */

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin-bottom: 1.25rem;
}

.panel__head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: center;
  justify-content: space-between;
  padding: 1.125rem 1.25rem 0.875rem;
}

.panel__heading {
  min-width: 0;
}

/* Not shown (4 October 2026). Every panel carried a small capital label
   over its title ("OVERVIEW", "CHECKPOINTS", "COLLABORATION") that only
   restated it, and on a record page that was eight of them. The page-level
   .eyebrow above the page title stays. panel() still accepts one, so a
   label can come back for a panel where it says something new. */
.panel__eyebrow {
  display: none;
}

.panel__title {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0;
}

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  align-items: start;
}

@media (max-width: 980px) {
  .split {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

/* =========================== rows ============================ */

.rows {
  list-style: none;
  margin: 0;
  padding: 0.5rem 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.row {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr) auto auto;
  gap: 0.625rem 1rem;
  align-items: center;
  padding: 0.8125rem 0.9375rem;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.row:hover {
  background: var(--surface);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}

.row--plain {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.rowhead,
.rowhead:hover {
  background: transparent;
  border: none;
  box-shadow: none;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0.25rem 0.9375rem 0;
}

.row__ref {
  font-size: 0.8125rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.row__link {
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.row__link:hover {
  color: var(--accent);
}

/* The subject and, under it, the street. The track is minmax(0, 1fr), so
   the cell itself cannot widen; what keeps a long street inside it is the
   street's own nowrap + overflow + ellipsis. Measured 3 October 2026 at
   1280px: without the overflow, "Intersection of Martin Luther King Jr
   Boulevard..." painted to 1030px, over the status column at 735px.
   min-width: 0 is kept for any flex parent this ends up in. */
.row__main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.row__sub {
  font-size: 0.8125rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.row__where,
.row__when {
  font-size: 0.8125rem;
  color: var(--muted);
  white-space: nowrap;
}

.row__when {
  font-variant-numeric: tabular-nums;
}

.row__person {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  min-width: 0;
  font-size: 0.8125rem;
  color: var(--muted);
}

.row__person span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.row--req {
  /* 1.5rem the tick box (9 October 2026); 8.5rem fits "REQ-2026-00012",
     the reference as the requester sees it; 9rem the longest status,
     "Waiting on requester" (8rem cut it off once pills became 12px and
     capitalised, 4 October 2026); 6rem a due day with "3 days over"
     under it. Columns are counted from the tick box: 2 reference,
     3 subject, 4 status, 5 due, 6 priority, 7 department, 8 assignee. */
  grid-template-columns: 1.5rem 8.5rem minmax(0, 1fr) 9rem 6rem 5.5rem 9rem 9rem;
}

/* Below 1400px seven columns left the subject 70px wide at 1280, so the
   department goes (the filter above the list covers it) and the subject
   gets roughly 280px back. */
@media (max-width: 1400px) {
  .row--req {
    grid-template-columns: 1.5rem 8.5rem minmax(0, 1fr) 9rem 6rem 5.5rem 9rem;
  }
  .row--req > :nth-child(7) {
    display: none;
  }
}

/* And below 1250px the priority too: at 1100 the subject was down to 82px.
   Ref, subject, status, due and assignee are what a desk scans for. */
@media (max-width: 1250px) {
  .row--req {
    grid-template-columns: 1.5rem 8.5rem minmax(0, 1fr) 9rem 6rem 9rem;
  }
  .row--req > :nth-child(6) {
    display: none;
  }
}

.row--when {
  grid-template-columns: 8.5rem minmax(0, 1fr) auto auto;
}

/* The projects table: project, stage, owner, progress, spent, deadline.
   Measured 4 October 2026 at 1280: "In progress" 81px, "Alex Rivera" with
   avatar 104px, "24% of ₱2,500,000" 121px, "Overdue Sep 30" 107px. Wider
   columns (9rem for owner and spent) left the project name 198px. Longer
   values are cut with an ellipsis; the full figure is in the title. */
.row--project {
  grid-template-columns: minmax(0, 1fr) 7rem 8rem 6.5rem 8rem 7.5rem;
}

.row--project > .row__where {
  overflow: hidden;
  text-overflow: ellipsis;
}

.row__progress {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.row__progress .progress__track {
  display: block;
  flex: 1 1 auto;
  min-width: 1.5rem;
}

/* The table builds the bar from spans, and an inline span ignores its
   width: the bar drew empty at 20% until this. */
.row__progress .progress__fill {
  display: block;
}

/* The tasks table: ref, task (project underneath), status, due, priority,
   assignee. Its own columns, not the requests list's: see taskTable. */
.row--task {
  grid-template-columns: 3rem minmax(0, 1fr) 7rem 7rem 5rem 9rem;
}

/* A grid item stretches to its column, which would draw each pill as a
   bar the column's full width. */
.row--project > .pill,
.row--task > .pill {
  justify-self: start;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Both tables drop columns as the screen narrows, least needed first, so
   the name keeps roughly 200px or more. Measured 4 October 2026: at 1024
   with every column the project name was 0px wide and the task title 80px;
   now the narrowest is about 210px, just above each breakpoint.
   Projects lose spent, then progress, then owner; tasks lose priority,
   then the reference, then the assignee. */
@media (max-width: 1250px) {
  .row--project {
    grid-template-columns: minmax(0, 1fr) 7rem 8rem 6.5rem 7.5rem;
  }
  .row--project > :nth-child(5) {
    display: none;
  }
  .row--task {
    grid-template-columns: 3rem minmax(0, 1fr) 7rem 7rem 9rem;
  }
  .row--task > :nth-child(5) {
    display: none;
  }
}

@media (max-width: 1100px) {
  .row--project {
    grid-template-columns: minmax(0, 1fr) 7rem 8rem 7.5rem;
  }
  .row--project > :nth-child(4) {
    display: none;
  }
  .row--task {
    grid-template-columns: minmax(0, 1fr) 7rem 7rem 9rem;
  }
  .row--task > :nth-child(1) {
    display: none;
  }
}

/* 7.5rem for the date at every width: pills are 12px (since 4 October
   2026; below 860px they always were) and "Overdue Sep 30" needs 115px. */
@media (max-width: 1000px) {
  .row--project {
    grid-template-columns: minmax(0, 1fr) 7rem 7.5rem;
  }
  .row--project > :nth-child(3) {
    display: none;
  }
  .row--task {
    grid-template-columns: minmax(0, 1fr) 7rem 7.5rem;
  }
  .row--task > :nth-child(6) {
    display: none;
  }
}

/* On a phone each row is a small card of two columns, with no header row
   (it would stack into a column of orphan labels, as the Settings
   categories table did). Everything dropped above comes back except the
   task reference and priority: name and stage or status first, then who
   and when, then progress and spending. */
@media (max-width: 620px) {
  .row--project.rowhead,
  .row--task.rowhead {
    display: none;
  }
  /* .row.row-- so it outranks the general phone rule for .row further
     down, which stacks every row into one column (and, with justify-items:
     start, let a long task title run to 482px on a 375px screen). */
  .row.row--project,
  .row.row--task {
    grid-template-columns: minmax(0, 1fr) auto;
    justify-items: stretch;
    column-gap: 0.75rem;
  }
  .row--project > :nth-child(n),
  .row--task > :nth-child(n) {
    display: revert;
  }
  .row--project > .row__main,
  .row--task > .row__main,
  .row--project > .row__progress,
  .row--task > .row__person,
  .row--project > .row__person {
    display: flex;
  }
  /* Without column headings a lone dash for "nothing spent" says nothing. */
  .row--task > .row__ref,
  .row--task > :nth-child(5),
  .row--project > .row__none {
    display: none;
  }
  .row--project > .row__person { order: 3; }
  .row--project > :nth-child(6) { order: 4; justify-self: end; }
  .row--project > .row__progress { order: 5; }
  .row--project > :nth-child(5) { order: 6; justify-self: end; }
  .row--task > :nth-child(4) { order: 3; justify-self: start; }
  .row--task > .row__person { order: 4; justify-self: end; }
}

@media (max-width: 1150px) {
  /* Ref, subject, status and due: the due day matters more here than
     priority or department. From 1150px, not 1000: with the assignee still
     showing, the subject was 96px wide at 1010. */
  .row--req {
    grid-template-columns: 1.5rem 8.5rem minmax(0, 1fr) 9rem 6rem;
  }
  .row--req > :nth-child(n + 6) {
    display: none;
  }
}

@media (max-width: 620px) {
  /* No tick boxes on a phone: acting on many at once is desk work. */
  .row--req {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .row--req > :nth-child(1),
  .row--req > :nth-child(2) {
    display: none;
  }
  .bulkbar {
    display: none;
  }
  .row--when {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  /* Three columns of which two never wrap: on a phone the date pill and the
     place together wanted more than the row had, so the title column — a
     minmax(0, 1fr) that is allowed to reach zero — collapsed to nothing and
     rows appeared with no title at all. Two columns, and the third item
     drops to a second line. */
  .row--plain {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .row__where {
    white-space: normal;
  }
}

/* =========================== pills =========================== */

.pill {
  display: inline-block;
  /* 12px, was 11px: a status is often the one thing on a row someone is
     looking for. */
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.5;
  padding: 0.125rem 0.625rem;
  border-radius: var(--r-pill);
  white-space: nowrap;
  background: var(--pill-bg);
  color: var(--pill-text);
}

.pill--open {
  background: var(--accent-soft);
  color: var(--accent-dark);
}

.pill--attention {
  background: var(--warn-soft);
  color: var(--warn);
}

.pill--done {
  background: var(--ok-soft);
  color: var(--ok);
}

/* Cancelled, no-show and the like: finished without happening, which is
   a fact to note, not an alarm. They were red, the colour now kept for
   Urgent. */
.pill--stop {
  background: var(--neutral-soft);
  color: var(--muted);
}

/* Priority. Amber meant overdue, blocked, high priority, in review, on
   hold and waiting for approval at once, so it stopped meaning anything
   (4 October 2026). Now amber is "late or stuck", red is Urgent, and High
   is a darker neutral that stands out without raising an alarm. */
.pill--urgent {
  background: var(--danger-soft);
  color: var(--danger);
}

.pill--high {
  background: var(--high-bg);
  color: var(--text);
}

/* ========================== avatars ========================== */

.avatar {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: 0.6875rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.assigned {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
}

/* ========================== buttons ========================== */

.button {
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: #ffffff;
  background: var(--accent-solid);
  border: none;
  border-radius: var(--r-pill);
  padding: 0.5rem 1.0625rem;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}

.button:hover:not(:disabled) {
  background: var(--accent-solid-hover);
  transform: translateY(-1px);
}

.button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.button--block {
  width: 100%;
  padding: 0.5625rem 1rem;
}

/* The same shape, size and type as .button, outlined. Ghost buttons had
   only a colour and a border, so they took the browser's square corners
   and font: "Share to chat" and "Remove" sat square beside the rounded
   "Edit project" (4 October 2026). */
.button--ghost {
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: calc(0.5rem - 1px) 1.0625rem;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease, color 0.15s ease;
}

.button--ghost:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.button--ghost:hover:not(:disabled) {
  color: var(--text);
  border-color: var(--border-strong);
  transform: translateY(-1px);
}

.button--small {
  font-size: 0.8125rem;
  padding: 0.25rem 0.75rem;
}

.button--ghost.button--small {
  padding: calc(0.25rem - 1px) 0.75rem;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.25rem;
}

.linkbutton {
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--accent);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.linkbutton:hover {
  text-decoration: underline;
}

.segmented {
  display: inline-flex;
  gap: 4px;
  padding: 0;
  background: transparent;
  border-radius: var(--r-control);
}

.segmented .button,
.segmented .button--ghost {
  box-shadow: none;
  border-color: transparent;
}

.segmented .button--ghost {
  background: transparent;
  border: none;
  color: var(--faint);
  border-radius: 8px;
  padding: 0.3125rem 0.875rem;
}

.segmented .button--ghost:hover {
  background: var(--surface);
  color: var(--text);
}

.segmented .button {
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 8px;
  padding: 0.3125rem 0.875rem;
  transform: none;
}

.segmented .button:hover:not(:disabled) {
  background: var(--accent-soft);
  transform: none;
}

/* ========================== forms ============================ */

.form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-sm);
  padding: 1.375rem;
  max-width: 44rem;
  margin-bottom: 1.25rem;
}

/* New-record pages (newRecordPage): the form, and anything beside it at
   the page's top level, in the middle of the page, not on the left. */
.newrecord > * {
  max-width: 44rem;
  margin-left: auto;
  margin-right: auto;
}

.group {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
  margin: 1.5rem 0 0.875rem;
  padding-top: 1.125rem;
  border-top: 1px solid var(--border-soft);
}

.group:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.field {
  display: block;
  margin-bottom: 1rem;
}

/* A field shown only sometimes (Why it was lost). */
.field[hidden] {
  display: none;
}

.field__label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-2);
  margin-bottom: 0.3125rem;
}

.field__input,
.field__select,
.field__textarea {
  width: 100%;
  padding: 0.5rem 0.6875rem;
  font-family: var(--sans);
  font-size: 0.875rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-control);
  box-shadow: var(--shadow-sm);
}

.field__textarea {
  min-height: 5.5rem;
  resize: vertical;
}

.field__input:focus,
.field__select:focus,
.field__textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(14, 124, 107, 0.12);
}

.field__input:disabled,
.field__select:disabled,
.field__textarea:disabled {
  background: var(--bg);
  color: var(--muted);
  box-shadow: none;
}

/* "Who can see this" (16 October 2026): two choices, each with what it
   means under its name. */
.vischoice { display: grid; gap: 0.5rem; }
.vischoice__option {
  display: flex; gap: 0.625rem; align-items: flex-start;
  border: 1px solid var(--border); border-radius: 10px; padding: 0.625rem 0.75rem;
  cursor: pointer; background: var(--surface);
}
.vischoice__option:has(input:checked) { border-color: var(--accent); }
.vischoice__option:has(input:disabled) { cursor: default; }
.vischoice__option input { margin-top: 0.2rem; flex: none; }
.vischoice__text { display: grid; gap: 0.125rem; min-width: 0; }
.vischoice__name { font-weight: 600; }
.vischoice__hint { font-size: 0.8125rem; color: var(--muted); }
.visfact::before { content: "\1F512\FE0E"; margin-right: 0.3rem; font-size: 0.8em; }
/* Since 16 October 2026 the setting sits at the top of the Collaborators
   panel, saved as soon as it changes, with the people under it. */
/* Panel bodies have no padding of their own: each row brings 1.25rem
   (the empty box, the add row), so this does too. */
.visset { display: grid; gap: 0.5rem; padding: 0 1.25rem 1rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--border); }
.visset .vischoice { border: 0; padding: 0; margin: 0; min-width: 0; }
.visset__label { padding: 0; margin-bottom: 0.125rem; font-size: 0.8125rem; font-weight: 600; color: var(--muted); }
.visset .vischoice__option { padding: 0.5rem 0.625rem; }
.visset .field__hint { margin: 0; }
.visset__status:empty { display: none; }
/* A person's Apps (22 October 2026): the ticks under "Only the apps
   ticked", two to a row where there is room. */
.appticks { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: 0.25rem 1rem; padding: 0.25rem 0.25rem 0; }
.appticks[hidden] { display: none; }
/* New document's "What is it for?" (22 October 2026): the same cards,
   without the browser's fieldset frame, a field's gap under it. */
.docpurpose { border: 0; margin: 0 0 1.25rem; padding: 0; min-width: 0; }
.docpurpose .visset__label { margin-bottom: 0.375rem; font-size: 0.875rem; color: var(--text); }

/* New document (23 October 2026): the optional Send it on panel, the
   sentence saying who can see it, and the folded details. */
.doctransmit {
  margin: 0.5rem 0 1.25rem;
  padding: 0.875rem 1rem 0.25rem;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--bg);
  min-width: 0;
}
.doctransmit__title {
  margin: 0 0 0.25rem;
  font-size: 0.9375rem;
}
.doctransmit > .panelnote {
  margin: 0 0 0.75rem;
  padding: 0;
}
.docaccess {
  margin: 0.25rem 0 1rem;
  padding: 0.625rem 0.75rem;
  border-left: 3px solid var(--accent);
  background: var(--bg);
  font-size: 0.875rem;
  color: var(--text);
}
.docsignmore {
  margin: 0 0 1.25rem;
}
.docaccess {
  margin-bottom: 0.5rem;
}
.docaccess__more {
  margin: 0 0 1.25rem;
}
.docaccess__more > summary {
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.375rem 0;
  color: var(--accent);
}
.docaccess__more[open] > summary {
  margin-bottom: 0.5rem;
}
.docsignmore > summary {
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.375rem 0;
}
.docsignmore[open] > summary {
  margin-bottom: 0.5rem;
}
.visset__status { margin: 0; font-size: 0.8125rem; }
.visset__status--ok { color: var(--ok); }
.visset__follows { margin: 0 0 1.25rem; padding: 0 1.25rem 1rem; border-bottom: 1px solid var(--border); }

.field__hint {
  font-size: 0.8125rem;
  color: var(--muted);
  margin-top: 0.25rem;
}

/* "Required" / "Optional" beside a label, as on the public form. */
.field__need {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--muted);
  margin-left: 0.5rem;
}

/* A mistake under its own box (markInvalid). */
.field__error {
  font-size: 0.8125rem;
  color: var(--danger);
  margin-top: 0.3125rem;
}

.field--invalid .field__input,
.field--invalid .field__select,
.field--invalid .field__textarea,
[aria-invalid='true'].field__input,
[aria-invalid='true'].field__select,
[aria-invalid='true'].field__textarea {
  border-color: var(--danger);
}

/* A form's sections: the heading with a line under it, a short note. */
.group__note {
  display: block;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--muted);
  margin-top: 0.1875rem;
}

/* Three short boxes in a row (date, time, length), each labelled. */
.fieldtrio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 1rem;
  /* A label that wraps ("City or municipality  Optional") pushed its box
     below its neighbours'; the boxes line up along the bottom instead. */
  align-items: end;
}

@media (max-width: 700px) {
  .fieldtrio {
    grid-template-columns: 1fr;
  }
}

.fieldpair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 1rem;
}

@media (max-width: 700px) {
  .fieldpair {
    grid-template-columns: 1fr;
  }
}

/* Town, state and ZIP of a request's location side by side, wrapping to
   one per line when they no longer fit. min(100%, ...) so a phone narrower
   than one column still gets a single full-width column rather than a
   track wider than the form. */
.fieldtrio {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  gap: 0 1rem;
}

.checkline {
  display: flex;
  gap: 0.625rem;
  align-items: flex-start;
  margin-bottom: 1rem;
}

.checkline input {
  margin-top: 0.25rem;
}

.checkline__text {
  font-size: 0.875rem;
  font-weight: 500;
}

.checkline__hint {
  font-size: 0.8125rem;
  color: var(--muted);
  margin-top: 0.125rem;
}

/* Notification settings: one row per category, a column per channel.
   minmax(0, 1fr) rather than 1fr: a plain 1fr track will not shrink below its
   longest word, and the hints are long enough to push the checkboxes off a
   phone screen. */
.notifygrid {
  display: grid;
  margin-top: 0.75rem;
}

.notifygrid__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 5.5rem 5.5rem 5.5rem;
  gap: 0 0.75rem;
  align-items: start;
  padding: 0.75rem 0;
  border-top: 1px solid var(--border-soft);
}

.notifygrid__row--head {
  border-top: 0;
  padding-top: 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
}

.notifygrid__name {
  min-width: 0;
}

.notifygrid__col {
  text-align: center;
}

.notifygrid__col input {
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.125rem;
}

.notifygrid__always {
  font-size: 0.8125rem;
  color: var(--muted);
}

/* Three switches on a phone: narrower columns, so the names keep about
   120px at 375 wide; the headings wrap onto two lines instead. */
@media (max-width: 480px) {
  .notifygrid__row {
    grid-template-columns: minmax(0, 1fr) 3.5rem 3.5rem 3.5rem;
    gap: 0 0.375rem;
  }
}

.notifygrid__col input:disabled {
  opacity: 0.45;
}

/* A meeting's "Are you going?", under its header for whoever is invited. */
.answerbox {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  padding: 0.875rem 1.125rem;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-card);
}

.answerbox__text {
  min-width: 0;
  font-size: 0.875rem;
  color: var(--text);
}

.answerbox__question {
  font-size: 0.9375rem;
  font-weight: 600;
}

.answerbox__status {
  margin-top: 0.125rem;
  color: var(--muted);
}

.answerbox__choices {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.answerbox .notice {
  flex-basis: 100%;
  margin: 0;
}

.attendees__tally {
  margin: 0;
  padding: 0.75rem 1.125rem 0;
  font-size: 0.8125rem;
  color: var(--muted);
}

.row.row--plain.row--attendee {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}
.row--attendee .attendee__who {
  flex: 1 1 10rem;
}
.row--attendee > button {
  flex: none;
}

/* A guest's answer from their invitation page (1 November 2026): people
   they bring and their note, under the name. */
.attendee__who {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}
/* Seats (2 November 2026): the count above the list, the picker on a row,
   and the import, template and download under the add-guest row. */
.attendees__seats {
  padding: 0.25rem 1.125rem 0;
  font-size: 0.8125rem;
  color: var(--muted);
}
.row--attendee select.attendee__seats {
  flex: none;
  width: auto;
  min-width: 7.5rem;
}
.guesttools {
  margin-top: 0.75rem;
  display: grid;
  gap: 0.5rem;
}
.guesttools__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.guesttools__review {
  display: grid;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: var(--surface);
}
.guesttools__review p {
  margin: 0;
}
.guesttools__skipped {
  margin: 0;
  padding-left: 1.25rem;
  font-size: 0.8125rem;
  color: var(--muted);
}
.guesttools__slot:empty {
  display: none;
}

/* Under a guest's row: "Link copied", or the link to copy by hand. */
.attendee__link {
  flex: 1 1 100%;
  min-width: 0;
}
.attendee__link:empty {
  display: none;
}
.attendee__link .field__hint,
.attendee__link .field__error {
  margin: 0.25rem 0 0;
}
.attendee__added {
  font-size: 0.8125rem;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.attendees__nudge {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  padding: 0.5rem 1.125rem 0.75rem;
}
.attendees__nudgesaid {
  font-size: 0.8125rem;
  color: var(--muted);
}

/* Settings > "Your meetings in your phone's calendar". */
.calfeed__intro {
  margin-top: 0;
}

.calfeed__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.75rem 0;
}

/* The buttons are links here (webcal: and Google's page), so they carry
   the button look without an underline. */
.calfeed__actions a {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

.calfeed__url {
  width: 100%;
  font-size: 1rem;
}

.calfeed__note {
  margin-bottom: 0;
}

/* Settings > Notifications: whether this device gets alerts. */
.devicealerts {
  margin-top: 0.875rem;
  padding: 0.875rem 1rem;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-control);
}

.devicealerts__title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
}

.devicealerts__text {
  margin: 0.25rem 0 0;
  font-size: 0.875rem;
  color: var(--muted);
}

.devicealerts__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.devicealerts__actions:not(:empty) {
  margin-top: 0.75rem;
}

.devicealerts .notice,
.devicealerts .flash {
  margin: 0.75rem 0 0;
}

/* The Overview's offer to turn alerts on, on phones. Indigo, not amber:
   amber means late or stuck, and this is neither. */
.pushprompt {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  padding: 0.875rem 1.125rem;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-card);
}

.pushprompt__title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text);
}

.pushprompt__text {
  margin-top: 0.125rem;
  font-size: 0.875rem;
  color: var(--muted);
}

.pushprompt__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.pushprompt .notice {
  flex-basis: 100%;
  margin: 0;
}

.readout {
  padding: 0.5625rem 0;
  border-top: 1px solid var(--border-soft);
  font-size: 0.875rem;
}

.readout__label {
  font-size: 0.75rem;
  color: var(--muted);
}

.formbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
  padding-bottom: 1rem;
  margin-bottom: 1.125rem;
  border-bottom: 1px solid var(--border-soft);
}

.inline-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.875rem 1.125rem;
  border-top: 1px solid var(--border-soft);
  background: var(--surface-2);
}

.inline-form .field__input,
.inline-form .field__select {
  flex: 1 1 13rem;
  width: auto;
}

/* Ready replies: buttons that insert a name or the reference. */
.replyfields {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
}

.replyfields__label {
  font-size: 0.75rem;
  color: var(--muted);
  margin-right: 0.25rem;
}

/* A client's Legacy client box, under the plan and status in the
   control panel. */
.legacyclient {
  border-top: 1px solid var(--border-soft);
  padding: 1rem 1.25rem 0.25rem;
}

/* Settings, Requests, Stages: one row per stage, the name editable in
   place, what it does under it, and its buttons at the end. */
.stagesay {
  margin: 0 1.25rem;
  min-height: 0;
  font-size: 0.8125rem;
  color: var(--muted);
}
.stagesay:empty { display: none; }
.stages__problem { margin: 0.5rem 1.25rem; }
.stagelist {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
}
.stagerow {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 1.25rem;
  border-top: 1px solid var(--border-soft);
}
.stagerow__num {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--muted);
  text-align: right;
}
.stagerow__text {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
}
.stagerow__text .field__input { width: 100%; max-width: 24rem; }
.stagerow__what {
  font-size: 0.75rem;
  color: var(--muted);
}
.stagerow__tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.375rem;
}
.stages__add { margin-top: 0.5rem; }
.stages__hint { margin: 0.625rem 1.25rem 1rem; }
@media (max-width: 620px) {
  .stagerow { grid-template-columns: 1.5rem minmax(0, 1fr); }
  .stagerow__tools { grid-column: 2; justify-content: flex-start; }
}

/* A guest's first and last name share a line where there is room. */
.inline-form .field__input--name {
  flex-basis: 9rem;
}

/* ======================== record header ====================== */

.metastrip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-sm);
  padding: 0.9375rem 1.125rem;
  margin-bottom: 1.25rem;
}

.metaitem__label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.1875rem;
}

.metaitem__value {
  font-size: 0.875rem;
  font-weight: 500;
}

/* ========================= messages ========================== */

.notice {
  margin: 0 0 1rem;
  padding: 0.625rem 0.875rem;
  font-size: 0.875rem;
  color: var(--danger);
  background: var(--danger-soft);
  border: 1px solid var(--danger-line);
  border-radius: var(--r-control);
}

.flash {
  margin-bottom: 1.25rem;
  padding: 0.625rem 0.875rem;
  font-size: 0.875rem;
  color: var(--ok);
  background: var(--ok-soft);
  border: 1px solid var(--ok-line);
  border-radius: var(--r-control);
}

.banner {
  background: var(--warn-soft);
  border: 1px solid var(--warn-line);
  border-left: 3px solid var(--warn);
  border-radius: var(--r-card);
  padding: 0.875rem 1.125rem;
  margin-bottom: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem 1rem;
  align-items: center;
  justify-content: space-between;
}

.banner__text {
  font-size: 0.875rem;
}

.banner__strong {
  font-weight: 600;
}

.banner__meta {
  font-size: 0.8125rem;
  color: var(--muted);
  margin-top: 0.125rem;
}

.empty {
  padding: 1.25rem 1.125rem;
  color: var(--muted);
  font-size: 0.875rem;
}

.state {
  padding: 1.25rem 0;
  color: var(--muted);
  font-size: 0.875rem;
}

.emptystate {
  padding: 2.25rem 1.25rem;
  text-align: center;
}

.emptystate__title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.emptystate__text {
  font-size: 0.875rem;
  color: var(--muted);
  max-width: 34rem;
  margin: 0 auto 0.875rem;
}

/* ========================== search =========================== */

.search {
  position: relative;
  flex: 0 1 18rem;
}

.search__input {
  width: 100%;
  padding: 0.4375rem 0.6875rem;
  font-family: var(--sans);
  font-size: 0.875rem;
  border: 1px solid var(--border);
  border-radius: var(--r-control);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.search__input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(14, 124, 107, 0.12);
}

.search__results {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-pop);
  max-height: 22rem;
  overflow-y: auto;
}

.searchrow {
  display: block;
  width: 100%;
  text-align: left;
  font-family: var(--sans);
  font-size: 0.875rem;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border-soft);
  padding: 0.5rem 0.75rem;
  cursor: pointer;
}

.searchrow:last-child {
  border-bottom: none;
}

.searchrow:hover {
  background: var(--bg);
}

.searchrow__kind {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* ========================= filters =========================== */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  align-items: center;
  padding: 0.75rem 1.125rem;
  border-bottom: 1px solid var(--border-soft);
  background: var(--surface-2);
}

.filters__select {
  font-family: var(--sans);
  font-size: 0.8125rem;
  padding: 0.3125rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--r-control);
  background: var(--surface);
  color: var(--text);
}

.filters__search {
  /* 1rem: iOS Safari zooms into any smaller field and never zooms back. */
  font-family: var(--sans);
  font-size: 1rem;
  flex: 1 1 14rem;
  min-width: 0;
  padding: 0.3125rem 0.625rem;
  border: 1px solid var(--border);
  border-radius: var(--r-control);
  background: var(--surface);
  color: var(--text);
}

.filters__count {
  margin-left: auto;
  font-size: 0.8125rem;
  color: var(--muted);
}

/* ===================== list views and filters =====================
   The enterprise lists (9 October 2026): saved views as rounded choices
   with counts, the filters in use as removable tags, a filter panel
   beside the List (above the Inbox and Board), and a bar for what to do
   with ticked rows. */
.listviews {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem 0.25rem;
  overflow-x: auto;
  scrollbar-width: thin;
}

.listview {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  min-height: 2.125rem;
  padding: 0 0.875rem;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--text-2);
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}

.listview:hover {
  border-color: var(--border-strong);
  color: var(--text);
}

.listview--on,
.listview--on:hover {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent-dark);
  font-weight: 600;
}

.listview__n {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.listview--on .listview__n {
  color: var(--accent-dark);
}

/* Overdue's count in the late colour, in words beside it already. */
.listview__n--late {
  color: var(--warn);
}

.filtertag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  min-height: 1.75rem;
  padding: 0 0.25rem 0 0.625rem;
  border: 1px solid var(--accent-line);
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: nowrap;
}

.filtertag__x {
  width: 1.375rem;
  height: 1.375rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: var(--r-pill);
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.filtertag__x:hover {
  background: var(--surface);
}

.filtertag__x svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
}

.listlayout {
  display: flex;
  flex-direction: column;
}

.listlayout__main {
  min-width: 0;
}

.filterpanel {
  padding: 0.875rem 1.25rem 0.25rem;
  border-bottom: 1px solid var(--border-soft);
  background: var(--surface-2);
}

.filterpanel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.625rem;
}

.filterpanel__title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 700;
}

.filterpanel__fields {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: 0 1rem;
}

.filterpanel .filters__select {
  width: 100%;
  min-height: 2.25rem;
}

/* Beside the List on a laptop: the table keeps the width it needs and
   the panel takes a column on the right, wrapping under it below. */
@media (min-width: 1100px) {
  .listlayout--side {
    flex-direction: row;
    align-items: flex-start;
  }

  .listlayout--side .listlayout__main {
    flex: 1 1 0;
  }

  .listlayout--side .filterpanel {
    order: 2;
    flex: 0 0 15rem;
    align-self: stretch;
    border-bottom: none;
    border-left: 1px solid var(--border-soft);
  }

  .listlayout--side .filterpanel__fields {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* With the panel beside it the table loses 15rem: at 1280 and 1440 the
   subject was 182px. Priority and department, both in the panel, make
   way for it. */
@media (min-width: 1100px) and (max-width: 1700px) {
  .listlayout--side:has(> .filterpanel) .row--req {
    grid-template-columns: 1.5rem 8.5rem minmax(0, 1fr) 9rem 6rem 9rem;
  }

  .listlayout--side:has(> .filterpanel) .row--req > :nth-child(6),
  .listlayout--side:has(> .filterpanel) .row--req > :nth-child(7) {
    display: none;
  }
}

.bulkbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  padding: 0.5rem 1.25rem;
  border-bottom: 1px solid var(--accent-line);
  background: var(--accent-soft);
  font-size: 0.875rem;
}

.bulkbar[hidden] {
  display: none;
}

.bulkbar__count {
  color: var(--accent-dark);
}

.bulkbar__clear {
  margin-left: auto;
}

.row__tick {
  display: flex;
  align-items: center;
}

.row__tick input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--accent-solid);
}

.row--ticked {
  background: var(--accent-soft);
}

/* Tick boxes on the project and task tables (addTicks): in the row's
   left padding, out of the column grid, so the tables' column rules are
   untouched. An absolutely placed child takes no grid cell. Only above
   phone width; on a phone the box and the bar are not shown. */
/* Three classes: the phone rule that shows every cell of these rows
   (.row--project > :nth-child(n), display: revert) outranked one class,
   and the boxes showed on a phone. */
.rows--tick > .row > .rowtick,
.rows--tick > .contactitem > .rowtick,
.rows--tick > .docitem > .rowtick {
  display: none;
}

/* Docs: each row (a button) in a wrapper with its tick box, as contacts
   (printing several slips or receipts on one sheet). The dividing line
   moves to the wrapper; the heading row explains the boxes. */
.docitem {
  position: relative;
  border-bottom: 1px solid var(--border-soft);
}

.docitem:last-child {
  border-bottom: none;
}

.docitem > .docrow {
  border-bottom: none;
}

.docitem.row--ticked {
  background: var(--accent-soft);
}

.dochead {
  display: none;
  padding: 0.5rem 1.25rem 0.5rem 2.75rem;
  font-size: 0.8125rem;
  color: var(--muted);
}

/* Contacts: each row (a button) in a wrapper, so a tick box can sit
   beside it. The rows' dividing line was drawn on every row but the
   last; in a wrapper every row is its wrapper's last child, so the line
   moves to the wrapper. */
.contactitem {
  position: relative;
  border-bottom: 1px solid var(--border-soft);
}

.contactitem:last-child {
  border-bottom: none;
}

.contactitem > .contactrow {
  border-bottom: none;
}

.contactitem--ticked,
.contactitem.row--ticked {
  background: var(--accent-soft);
}

.contacthead {
  display: none;
  padding: 0.5rem 1.25rem 0.5rem 2.75rem;
  font-size: 0.8125rem;
  color: var(--muted);
}

@media (min-width: 621px) {
  .rows--tick > .row {
    position: relative;
    padding-left: 2.75rem;
  }

  .rows--tick > .contactitem > .contactrow {
    padding-left: 2.75rem;
  }

  .rows--tick > .contacthead,
  .rows--tick > .dochead {
    display: block;
  }

  .rows--tick > .docitem > .docrow,
  .rows--tick > .doclist__head {
    padding-left: 2.75rem;
  }

  .rows--tick > .contactitem > .rowtick,
  .rows--tick > .docitem > .rowtick,
  .rows--tick > .row > .rowtick {
    display: block;
    position: absolute;
    left: 0.9375rem;
    top: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0;
    accent-color: var(--accent-solid);
  }
}

/* The due day, and under it how far off in words: "Tomorrow", "3 days
   over" (in the late colour), "Paused" while waiting on the requester. */
.row__due {
  display: flex;
  flex-direction: column;
  font-size: 0.8125rem;
  color: var(--text-2);
  white-space: nowrap;
}

.row__duewords {
  font-size: 0.75rem;
  color: var(--muted);
}

.row__duewords--late {
  color: var(--warn);
  font-weight: 600;
}

/* ======================= activity feed ======================= */

.event {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: start;
  padding: 0.75rem 1.125rem;
  border-bottom: 1px solid var(--border-soft);
}

.event:last-child {
  border-bottom: none;
}

.event__text {
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--text-2);
}

.event__actor {
  font-weight: 600;
  color: var(--text);
}

.event__when {
  font-size: 0.75rem;
  color: var(--faint);
  white-space: nowrap;
}

/* ====================== workload bars ======================== */

.bars {
  padding: 1rem 1.125rem;
}

.bar {
  margin-bottom: 0.875rem;
}

.bar:last-child {
  margin-bottom: 0;
}

.bar__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.8125rem;
  margin-bottom: 0.3125rem;
}

.bar__count {
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.bar__track {
  height: 8px;
  background: var(--track);
  border-radius: 999px;
  overflow: hidden;
}

.bar__fill {
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
}

.bar__fill--flag {
  background: var(--warn);
}

/* ========================= skeletons ========================= */

.skeleton {
  padding: 1rem 1.125rem;
}

.skel {
  height: 11px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--track) 25%, var(--track-2) 37%, var(--track) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.3s ease-in-out infinite;
  margin-bottom: 0.625rem;
}

.skel:last-child {
  margin-bottom: 0;
}

.skel--w40 { width: 40%; }
.skel--w70 { width: 70%; }
.skel--w55 { width: 55%; }

@keyframes shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .skel { animation: none; }
}

/* =========================== board =========================== */

.board {
  display: flex;
  gap: 0.875rem;
  padding: 1rem 1.125rem 1.25rem;
  align-items: stretch;
}

.column {
  flex: 1 1 0;
  min-width: 0;
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-card);
  padding: 0.625rem;
  display: flex;
  flex-direction: column;
}

.column--over {
  background: var(--accent-soft);
  border-color: var(--accent);
}

/* An empty column keeps a narrow strip, still a place to drop a card, and
   gives its width to the columns with work in them. Five equal columns
   left each project card 156px at 1280, and a long name ran to six lines. */
.column:has(> .column__empty) {
  flex: 0 0 7.5rem;
}

.column__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0 0.25rem 0.5rem;
}

.column__name {
  display: flex;
  align-items: center;
  font-size: 0.8125rem;
  font-weight: 600;
}

.column__count {
  font-size: 0.75rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.column__dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 0.4375rem;
  background: var(--faint);
}

.column__dot--open { background: var(--accent); }
.column__dot--attention { background: var(--warn); }
.column__dot--done { background: var(--ok); }
.column__dot--stop { background: var(--faint); }

.column__empty {
  flex: 1;
  min-height: 4.5rem;
  border: 1px dashed var(--border-dashed);
  border-radius: var(--r-control);
  margin-top: 0.125rem;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--faint);
  border-radius: var(--r-control);
  box-shadow: var(--shadow-sm);
  padding: 0.625rem 0.6875rem;
  margin-bottom: 0.5rem;
  cursor: grab;
  transition: box-shadow 0.12s ease;
}

.card:hover {
  box-shadow: var(--shadow-md);
}

.card:last-child {
  margin-bottom: 0;
}

.card--dragging {
  opacity: 0.45;
}

.card--open { border-left-color: var(--accent); }
.card--attention { border-left-color: var(--warn); }
.card--done { border-left-color: var(--ok); }
.card--stop { border-left-color: var(--faint); }

.card__title {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.35;
  margin-bottom: 0.375rem;
  cursor: pointer;
  /* Three lines at most; the whole title is in the tooltip and on the
     record. Long names made one card as tall as the column. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  align-items: center;
  font-size: 0.75rem;
  color: var(--muted);
}

/* One line, like the inbox's: the whole street is in the tooltip. */
.card__where {
  font-size: 0.75rem;
  color: var(--muted);
  margin: -0.125rem 0 0.375rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.card__progress {
  font-size: 0.6875rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.card .avatar {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  font-size: 0.5625rem;
}

.card__move {
  display: none;
  margin-top: 0.5rem;
  width: 100%;
  font-family: var(--sans);
  font-size: 0.75rem;
  padding: 0.1875rem 0.25rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  color: var(--muted);
}

@media (hover: none), (pointer: coarse) {
  /* 16px: this list appears only on touch screens, and at 12px iPhone
     Safari zoomed in on tapping it and never zoomed back out. */
  .card__move { display: block; font-size: 1rem; }
  .card { cursor: default; }
}

@media (max-width: 1100px) {
  .board { overflow-x: auto; }
  .column { flex: 0 0 262px; }
}

/* ========================= timeline ========================== */

.timeline {
  padding: 1rem 1.125rem 1.25rem;
  overflow-x: auto;
}

.tlhead {
  display: grid;
  grid-template-columns: 12rem 1fr;
  gap: 0.75rem;
  align-items: end;
  margin-bottom: 0.5rem;
}

.tlmonths {
  display: flex;
  border-bottom: 1px solid var(--border);
}

.tlmonth {
  flex: 1;
  font-size: 0.6875rem;
  color: var(--muted);
  padding-bottom: 0.25rem;
  padding-left: 0.25rem;
  border-left: 1px solid var(--border-soft);
}

.tlmonth:first-child {
  border-left: none;
}

.tlrow {
  display: grid;
  grid-template-columns: 12rem 1fr;
  gap: 0.75rem;
  align-items: center;
  padding: 0.375rem 0;
}

.tlname {
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 500;
  text-align: left;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tlname:hover {
  color: var(--accent);
}

.tltrack {
  position: relative;
  height: 22px;
  background: var(--bg);
  border-radius: var(--r-control);
}

.tlbar {
  position: absolute;
  top: 3px;
  height: 16px;
  border-radius: 4px;
  background: var(--accent);
  min-width: 4px;
}

.tlbar--attention { background: var(--warn); }
.tlbar--done { background: var(--ok); }
.tlbar--stop { background: var(--faint); }

.tltoday {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 2px;
  background: var(--warn);
  opacity: 0.75;
}

.tlnote {
  font-size: 0.75rem;
  color: var(--muted);
  padding: 0 1.125rem 1rem;
}

/* ========================= schedule ========================== */

.dayhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6875rem 1.125rem 0.5rem;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border-soft);
}

.dayhead__label {
  font-size: 0.8125rem;
  font-weight: 600;
}

.dayhead__date {
  font-size: 0.8125rem;
  color: var(--muted);
}

.dayhead--today .dayhead__label {
  color: var(--accent);
}

.slot {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr) auto auto;
  gap: 0.5rem 1rem;
  align-items: center;
  padding: 0.6875rem 1.125rem;
  border-bottom: 1px solid var(--border-soft);
}

.slot:hover {
  background: var(--surface-2);
}

.slot__time {
  font-variant-numeric: tabular-nums;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-2);
}

.slot__time--allday {
  color: var(--muted);
  font-weight: 400;
}

.slot__sub {
  font-size: 0.8125rem;
  color: var(--muted);
  grid-column: 2 / -1;
  margin-top: -0.25rem;
}

.slot--cancelled .row__link {
  text-decoration: line-through;
  color: var(--muted);
}

@media (max-width: 860px) {
  .slot {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .slot__time {
    grid-column: 1 / -1;
  }
}

/* ==================== duration picker ======================== */

.timerow {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.75rem;
}

.presets {
  display: flex;
  gap: 0.375rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}

.endsat {
  font-size: 0.8125rem;
  color: var(--muted);
  margin: 0.5rem 0 1rem;
}

/* The Attendees panel's body has no padding of its own; each part
   carries 20px at the sides, so the clash warnings do too. */
.attendees__clash {
  padding: 0 20px;
}

.conflict {
  margin: 0 0 1rem;
  padding: 0.625rem 0.875rem;
  font-size: 0.875rem;
  color: var(--warn);
  background: var(--warn-soft);
  border: 1px solid var(--warn-line);
  border-radius: var(--r-control);
}

@media (max-width: 860px) {
  .timerow {
    grid-template-columns: 1fr;
  }
}

/* Workload (17 October 2026): a person, four counts and a bar. */
.workload__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  padding: 0.75rem 1.25rem;
}

.workload__top select {
  max-width: 20rem;
}

.workload {
  padding: 0 1.25rem 1rem;
}

.workload__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(4, 5.5rem) minmax(0, 10rem);
  gap: 0.75rem;
  align-items: center;
  padding: 0.625rem 0;
  border-bottom: 1px solid var(--border-soft);
}

.workload__row--head {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  padding-top: 0;
}

.workload__row .row__link {
  text-align: left;
  min-width: 0;
  overflow-wrap: anywhere;
}

.workload__n {
  font-variant-numeric: tabular-nums;
}

/* Overdue only when there is some: amber means late (colour rule). */
.workload__n--late {
  color: var(--warn);
  font-weight: 600;
}

.workload__bar {
  position: relative;
  display: block;
  height: 8px;
  border-radius: 999px;
  background: var(--track);
  overflow: hidden;
}

.workload__fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 999px;
  background: var(--accent);
}

.workload__fill--late {
  background: var(--warn);
}

@media (max-width: 760px) {
  .workload__row {
    grid-template-columns: minmax(0, 1fr) repeat(4, 3.25rem);
    gap: 0.5rem;
    font-size: 14px;
  }

  .workload__row--head {
    font-size: 11px;
  }

  .workload__barcell,
  .workload__row--head > :last-child {
    display: none;
  }
}

/* A recurring task's way to the one before and the next (17 October
   2026). */
.seriesnote {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  padding: 0.25rem 1.25rem 1rem;
}

/* Start from a template, on New project (17 October 2026). */
.tplpick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.tplpick select {
  flex: 1 1 14rem;
  min-width: 0;
}

/* ================== task checklist (17 October 2026) ================== */

.checklist__progress {
  margin: 0;
  padding: 0.25rem 1.25rem 0;
}

.checklist {
  list-style: none;
  margin: 0;
  padding: 0.5rem 1.25rem 0;
}

.checklist__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border-soft);
}

.checklist__label {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  flex: 1;
  min-width: 0;
  cursor: pointer;
}

.checklist__label input {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  flex: none;
  accent-color: var(--accent-solid);
}

.checklist__text {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* A done step: struck through, in the muted grey (5.1:1 on white, so
   still readable), not hidden. */
.checklist__item--done .checklist__text {
  color: var(--muted);
  text-decoration: line-through;
}

.checklist__who {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

.checklist__add {
  padding: 0.75rem 1.25rem 1rem;
}

.checklist + .notice {
  margin: 0.75rem 1.25rem 0;
}

@media (max-width: 620px) {
  .checklist__who {
    display: none;
  }
}

/* ====================== rooms (17 October 2026) ===================== */

/* A room's name on the left, its day on a line to the right, the hour
   marks above lined up with the lines (same two columns). */
.roomscale,
.room {
  display: grid;
  grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
  gap: 1rem;
  padding: 0 1.25rem;
}

.roomscale {
  padding-top: 0.75rem;
}

.roomscale__line {
  position: relative;
  height: 1.25rem;
}

.roomscale__tick {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}

.roomscale__tick:first-child {
  transform: none;
}

.roomscale__tick:last-child {
  transform: translateX(-100%);
}

.roomlist {
  list-style: none;
  margin: 0;
  padding: 0 0 0.5rem;
}

.room {
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
  border-top: 1px solid var(--border-soft);
}

.room__name {
  display: grid;
  gap: 0.125rem;
  min-width: 0;
  overflow-wrap: anywhere;
}

.room__cap {
  font-size: 12px;
  color: var(--muted);
}

.room__main {
  display: grid;
  gap: 0.5rem;
  min-width: 0;
}

.room__line {
  position: relative;
  height: 2.25rem;
  border-radius: var(--r-control);
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  overflow: hidden;
}

.roomblock {
  position: absolute;
  top: 3px;
  bottom: 3px;
  min-width: 4px;
  display: flex;
  align-items: center;
  padding: 0 0.5rem;
  border-radius: 6px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  color: var(--accent);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  overflow: hidden;
  text-align: left;
}

button.roomblock {
  cursor: pointer;
}

button.roomblock:hover {
  border-color: var(--accent);
}

/* Another department's or a private meeting: busy, nothing more. Grey,
   as waiting and ended things are. */
.roomblock--hidden {
  background: var(--neutral-soft);
  border-color: var(--border);
  color: var(--text-2);
}

/* Held while it waits for approval or posting. */
.roomblock--pending {
  border-style: dashed;
}

.roomblock__text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.room__free {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
}

.room__freelabel {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  margin-right: 0.25rem;
}

.room__booked {
  display: none;
}

@media (max-width: 620px) {
  .roomscale {
    display: none;
  }

  .room__booked {
    display: grid;
    gap: 0.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 14px;
  }

  .room__booked li {
    display: grid;
    grid-template-columns: 8.5rem minmax(0, 1fr);
    gap: 0.5rem;
    align-items: baseline;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  /* A meeting's link reads as the plain lines beside it: .row__link's
     own size and padding put it lower and larger (seen at 375 px). */
  .room__booked .row__link {
    font: inherit;
    padding: 0;
    text-align: left;
  }

  .room__when {
    color: var(--muted);
    font-variant-numeric: tabular-nums;
  }

  .room {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
  }
}

/* ====================== week calendar ======================== */

.weeknav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.weekgrid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-top: 1px solid var(--border-soft);
}

.weekday {
  border-right: 1px solid var(--border-soft);
  min-height: 9rem;
  padding: 0.5rem;
}

.weekday:last-child {
  border-right: none;
}

.weekday--today {
  background: var(--accent-soft);
}

.weekday--past {
  background: var(--surface-2);
}

.weekday__name {
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--muted);
}

.weekday__num {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.1;
  margin-bottom: 0.5rem;
}

.weekday--today .weekday__num {
  color: var(--accent-dark);
}

.chip {
  display: block;
  width: 100%;
  text-align: left;
  font-family: var(--sans);
  font-size: 0.75rem;
  line-height: 1.3;
  color: var(--text);
  background: var(--chip-bg);
  border: none;
  border-left: 3px solid var(--faint);
  border-radius: 4px;
  padding: 0.25rem 0.375rem;
  margin-bottom: 0.25rem;
  cursor: pointer;
}

.chip:hover {
  filter: brightness(0.97);
}

.chip--open {
  background: var(--accent-soft);
  border-left-color: var(--accent);
}

.chip--attention {
  background: var(--warn-soft);
  border-left-color: var(--warn);
}

/* The project under a task on the calendar. One line, cut with an
   ellipsis: in a 140px day a long project name would otherwise double the
   chip's height. */
.chip__sub {
  display: block;
  margin-top: 0.125rem;
  font-size: 0.6875rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chip--stop {
  background: var(--neutral-soft);
  border-left-color: var(--faint);
  text-decoration: line-through;
  color: var(--muted);
}

.chip__time {
  display: block;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

/* Said on a phone only, where empty days are hidden; on a laptop the
   empty grid says it. */
.weekgrid__none {
  display: none;
  margin: 0;
  padding: 1rem 1.125rem;
  font-size: 0.875rem;
  color: var(--muted);
}

@media (max-width: 860px) {
  .weekgrid {
    grid-template-columns: 1fr;
  }
  .weekday {
    border-right: none;
    border-bottom: 1px solid var(--border-soft);
    min-height: 0;
  }
  .weekday--empty {
    display: none;
  }
  .weekgrid__none {
    display: block;
  }
}


/* ========================= comments ========================== */

.comment {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 0.75rem;
  padding: 0.875rem 1.125rem;
  border-bottom: 1px solid var(--border-soft);
}

.comment:last-of-type {
  border-bottom: none;
}

.comment__head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 0.625rem;
  align-items: baseline;
  margin-bottom: 0.1875rem;
}

.comment__author {
  font-size: 0.875rem;
  font-weight: 600;
}

.comment__when {
  font-size: 0.75rem;
  color: var(--faint);
}

.comment__body {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--text-2);
  white-space: pre-wrap;
}

.mention {
  font-size: 0.75rem;
  padding: 0.0625rem 0.4375rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-dark);
}

.composer {
  padding: 0.875rem 1.125rem;
  border-top: 1px solid var(--border-soft);
  background: var(--surface-2);
}

.composer__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.5rem;
}

.tagpick {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 0.5rem;
}

.tagbtn {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.1875rem 0.5625rem 0.1875rem 0.1875rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-2);
  cursor: pointer;
}

.tagbtn:hover {
  border-color: var(--border-strong);
}

.tagbtn--on {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-dark);
}

.tagbtn .avatar {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  font-size: 0.5625rem;
}

/* ======================== attachments ======================== */

/* Flex rather than a fixed four-column grid: a row carries a different
   number of parts depending on whether the file came from the requester and
   whether the viewer may remove it, and a fixed grid put the buttons in
   different columns from one row to the next. */
.file {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.875rem;
  align-items: center;
  padding: 0.625rem 1.125rem;
  border-bottom: 1px solid var(--border-soft);
  font-size: 0.875rem;
}

.file:last-of-type {
  border-bottom: none;
}

.file__name {
  /* Takes the room, so everything after it sits to the right. */
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}

.file__size {
  font-size: 0.75rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.dropzone {
  margin: 0.875rem 1.125rem 1.125rem;
  padding: 1.125rem;
  border: 1px dashed var(--border-dashed);
  border-radius: var(--r-card);
  text-align: center;
  font-size: 0.875rem;
  color: var(--muted);
  background: var(--surface-2);
}

.dropzone--over {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-dark);
}

@media (max-width: 700px) {
  .file {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

/* ==================== platform console ======================= */

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

.client {
  display: grid;
  /* The details line used to be an "auto" column, which takes its whole
     width before the name gets any: on a phone the name's column was 0px
     and the name ran 52px over the details. Both can shrink now; on a
     phone they stack (below). */
  grid-template-columns: minmax(10rem, 1fr) minmax(0, max-content);
  gap: 0.75rem 1rem;
  align-items: center;
  padding: 1rem 1.125rem;
  border-bottom: 1px solid var(--border-soft);
}

.client:last-child {
  border-bottom: none;
}

.client__name {
  font-size: 0.9375rem;
  font-weight: 600;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* A client's modules: name, on or off, where that comes from, and up to two
   buttons, in one line that wraps. A plain row is a three-column grid, so
   the buttons fell onto a line of their own at the panel's full width. */
.row--module {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}

.row--module .row__link {
  flex: 1 1 10rem;
  min-width: 0;
}

.row--module .row__where {
  min-width: 6.5rem;
}

.row--module .row__btns {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  min-width: 12.5rem;
}

@media (max-width: 620px) {
  .row--module .row__btns {
    min-width: 0;
  }
}

@media (max-width: 620px) {
  .client {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Four totals one per row filled the whole first screen of the console
     before any client appeared. */
  .register {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* A client's name in the control panel's Recent changes: a long one ran
   97px past a 375px screen as one line. */
.pill.pill--org {
  white-space: normal;
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* The control panel's two attention figures, when they count anything. */
.figure.figure--flag .figure__value {
  color: var(--warn);
}

/* A line of text and a row of buttons inside a panel, in its padding. */
.panelnote {
  margin: 0;
  padding: 0.25rem 1.25rem 0.875rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--muted);
}

.panelactions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0 1.25rem 1.25rem;
}

/* Links with what each is for under the name (services, public pages). */
.linklist {
  list-style: none;
  margin: 0;
  padding: 0 0.75rem 0.75rem;
}

.linklist__item {
  display: grid;
  gap: 0.125rem;
  padding: 0.625rem 0.5rem;
  border-radius: var(--r-sm, 0.5rem);
  color: var(--text);
  text-decoration: none;
}

.linklist__item:hover,
.linklist__item:focus-visible {
  background: var(--surface-2);
}

.linklist__name {
  font-size: 0.875rem;
  font-weight: 600;
}

.linklist__arrow {
  color: var(--muted);
  font-weight: 400;
}

.linklist__what {
  font-size: 0.8125rem;
  color: var(--muted);
}

/* A form inside a panel, without a card of its own. */
.form.form--flat {
  border: none;
  box-shadow: none;
  border-radius: 0;
  background: transparent;
  margin: 0;
  padding: 0.25rem 1.25rem 1.25rem;
}

/* A client's use: four figures in a row (two on a phone). */
.usegrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  padding: 0.25rem 1.25rem 1rem;
}

.usegrid__cell {
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--border-soft);
  border-radius: 0.625rem;
  background: var(--surface-2);
  min-width: 0;
}

.usegrid__label {
  font-size: 0.75rem;
  color: var(--muted);
}

.usegrid__value {
  margin-top: 0.25rem;
  font-size: 1rem;
  font-weight: 700;
}

.usegrid__note {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.8125rem;
  color: var(--muted);
}

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

/* The control panel's Team: a person, their level and Remove on a line. */
.row--staff {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.row--staff .filters__select {
  min-width: 9.5rem;
}

@media (max-width: 620px) {
  .row.row--staff {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .row.row--staff .row__main {
    grid-column: 1 / -1;
  }
}

.levellist {
  list-style: none;
  margin: 0;
  padding: 0.25rem 1.25rem 1.25rem;
  display: grid;
  gap: 0.75rem;
}

.levellist__item {
  display: grid;
  gap: 0.125rem;
}

.levellist__name {
  font-size: 0.875rem;
  font-weight: 600;
}

.levellist__item--mine .levellist__name {
  color: var(--accent);
}

.levellist__what {
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--muted);
}

/* A client's trial on its page: no trial, open-ended, or a date. */
.trialform {
  padding: 0.875rem 1.25rem 1.25rem;
  border-top: 1px solid var(--border-soft);
}

.trialform__choices {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0.5rem 0 0.375rem;
}

.trialform__choice {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.9375rem;
}

.trialform__dated {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}

.trialform__date {
  width: auto;
  max-width: 12rem;
}

.client__info {
  min-width: 0;
}

.client__meta {
  font-size: 0.8125rem;
  color: var(--muted);
  margin-top: 0.1875rem;
}

.client__actions {
  display: flex;
  gap: 0.5rem;
}

/* ========================== sign in ========================== */

/* The layout of the Codex design preview (8 October 2026): a navy panel
   with the headline and a drawn workflow card beside a light panel with
   the form, both inside a 14px margin. Below 641px the navy panel becomes
   a short header with a small card in its corner and the form follows.
   Colours are the --auth-* tokens at the top of this file. */
.auth {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 100%;
  padding: 14px;
  background: var(--bg);
}

.auth__brand {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  padding: 2.4375rem 3rem 1.8125rem;
  border-radius: 15px;
  background: var(--auth-navy);
  box-shadow: inset 0 0 0 1px var(--auth-panel-edge);
  color: var(--auth-on-navy);
}

.auth__brand .brandlogo__word {
  color: var(--auth-on-navy);
  font-size: 1.625rem;
  font-weight: 800;
  letter-spacing: -0.04em;
}

.auth__brand .brandlogo {
  gap: 0.625rem;
}

.auth__story {
  position: relative;
  z-index: 1;
  margin-top: 3.5rem;
}

.auth__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin: 0 0 1.1875rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--auth-navy-text);
}

.auth__eyebrowline {
  width: 22px;
  height: 2px;
  background: var(--auth-navy-accent);
}

.auth__headline {
  /* Two lines on a laptop ("A clearer day / starts here.", as in the
     preview). The 5 October headline was longer and took three at this
     size, pushing the panel past a 1000px screen; this width is from it. */
  max-width: 22ch;
  margin: 0 0 1.375rem;
  font-size: clamp(2.125rem, 3.2vw, 3.25rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.035em;
  color: var(--auth-on-navy);
  /* Even lines rather than a lone word on the last one. */
  text-wrap: balance;
}

.auth__headline em {
  font-style: normal;
  color: var(--auth-navy-accent);
}

.auth__note {
  max-width: 44ch;
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--auth-navy-text);
}

/* The workflow card. */
.authflow {
  position: relative;
  isolation: isolate;
  flex: 1;
  min-height: 24.375rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 -0.75rem;
  padding: 2rem 1.25rem 3.125rem;
}

.authflow__grid {
  position: absolute;
  inset: 14px -20px 10px;
  z-index: -1;
  background-image:
    linear-gradient(var(--auth-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--auth-grid) 1px, transparent 1px);
  background-size: 38px 38px;
  -webkit-mask-image: radial-gradient(ellipse, #000 15%, transparent 70%);
  mask-image: radial-gradient(ellipse, #000 15%, transparent 70%);
}

.authflow__tick {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.authflow__stack {
  position: relative;
  width: 100%;
  max-width: 26rem;
}

.authflow__card {
  width: 100%;
  overflow: hidden;
  background: var(--auth-card);
  border: 1px solid var(--auth-card-border);
  border-radius: 12px;
  box-shadow: var(--auth-card-shadow);
  color: var(--auth-card-text);
  transform: rotate(-3deg);
}

.authflow__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1.125rem;
  background: var(--auth-card-bar);
  border-bottom: 1px solid var(--auth-card-line);
}

.authflow__app {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--auth-card-muted);
}

.authflow__sample,
.authflow__label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--auth-card-muted);
}

.authflow__body {
  padding: 1.1875rem 1.375rem 1.25rem;
}

.authflow__title {
  margin: 0.625rem 0 0.25rem;
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.02em;
}

.authflow__subtitle {
  font-size: 0.75rem;
  color: var(--auth-card-muted);
}

.authflow__stages {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin: 1.5rem 0 1.25rem;
}

.authflow__stages > i {
  flex: 1;
  height: 1px;
  margin: 14px 10px 0;
  background: var(--auth-card-border);
}

.authflow__stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  gap: 0.5rem;
  font-size: 0.6875rem;
  color: var(--auth-card-muted);
}

.authflow__dot {
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  border-radius: 50%;
  background: var(--auth-card-soft);
  color: var(--auth-card-blue);
}

.authflow__stage--done {
  font-weight: 600;
  color: var(--auth-card-blue);
}

.authflow__stage--done .authflow__dot {
  background: var(--auth-card-blue);
  color: var(--auth-card);
  box-shadow: 0 0 0 4px var(--auth-card-soft);
}

.authflow__task {
  display: flex;
  align-items: center;
  gap: 0.5625rem;
  padding: 0.6875rem 0;
  border-top: 1px solid var(--auth-card-line);
  font-size: 0.75rem;
  color: var(--auth-card-muted);
}

.authflow__check {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  background: var(--auth-card-soft);
  border: 1px solid var(--auth-card-border);
  border-radius: 4px;
  color: var(--auth-card-blue);
}

.authflow__check .authflow__tick {
  width: 12px;
  height: 12px;
  stroke-width: 2.4;
}

.authflow__person {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  margin-left: auto;
  border-radius: 50%;
  background: var(--auth-card-soft);
  color: var(--auth-card-blue);
  font-size: 0.625rem;
  font-weight: 600;
}

.authflow__person--2 {
  background: var(--auth-card-teal-bg);
  color: var(--auth-card-teal);
}

.authflow__progress {
  padding-top: 0.625rem;
}

.authflow__progress > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 0.625rem;
  font-size: 0.6875rem;
  color: var(--auth-card-muted);
}

.authflow__progress strong {
  font-weight: 600;
  color: var(--auth-card-blue);
}

.authflow__track {
  height: 4px;
  margin-top: 0.5625rem;
  overflow: hidden;
  border-radius: 5px;
  background: var(--auth-card-line);
}

.authflow__track span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--auth-navy-accent), var(--auth-card-blue));
}

.authflow__toast {
  position: absolute;
  left: -3.5rem;
  bottom: -1.75rem;
  width: min(23rem, calc(100% + 2rem));
  display: flex;
  align-items: center;
  gap: 0.6875rem;
  padding: 0.9375rem 1.0625rem;
  background: var(--auth-toast);
  border: 1px solid var(--auth-toast-border);
  border-radius: 10px;
  box-shadow: var(--auth-toast-shadow);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transform: rotate(2deg);
}

.authflow__toasticon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--auth-toast-icon);
  border: 1px solid var(--auth-toast-icon-border);
  color: var(--auth-navy-accent);
}

.authflow__toast strong {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--auth-toast-text);
}

.authflow__toast div > span {
  display: block;
  margin-top: 0.1875rem;
  font-size: 0.6875rem;
  color: var(--auth-toast-muted);
}

.authflow__mini {
  display: none;
}

.auth__brandfoot {
  position: relative;
  z-index: 1;
  margin-top: 0.75rem;
  padding-top: 1.375rem;
  border-top: 1px solid var(--auth-navy-line);
}

.auth__tagline {
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--auth-navy-faint);
}

.auth__features {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin-top: 0.5625rem;
  font-size: 0.75rem;
  color: var(--auth-navy-text);
}

.auth__features i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--auth-navy-faint);
}

/* The form panel. */
.auth__form {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 2rem 3rem 1rem;
}

.auth__inner {
  width: 100%;
  max-width: 24rem;
  margin: auto;
  padding: 2.5rem 0;
}

.auth__padlock {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 1.5rem;
  border-radius: 12px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  color: var(--accent);
}

.auth__padlock svg {
  width: 27px;
  height: 27px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.auth__heading {
  margin: 0 0 0.75rem;
  font-size: 2.1875rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.035em;
}

.auth__sub {
  margin: 0 0 1.875rem;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--muted);
}

.auth__fields {
  display: flex;
  flex-direction: column;
}

.auth .field {
  margin-bottom: 1.3125rem;
}

.auth .field__label {
  margin-bottom: 0.5rem;
  font-weight: 600;
}

/* Password's label and "Forgot password?" on one line. */
.auth__labelrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.auth__labelrow .field__label {
  margin: 0;
}

.authinput {
  position: relative;
  display: block;
}

.authinput__icon {
  position: absolute;
  top: 50%;
  left: 14px;
  z-index: 1;
  width: 19px;
  height: 19px;
  transform: translateY(-50%);
  color: var(--faint);
  pointer-events: none;
}

.authinput__icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The one form everyone uses every day gets full-size targets on every
   screen. 16px text so a phone does not zoom into the box (see the
   landmine about iOS). */
.auth .field__input {
  min-height: 3rem;
  padding-left: 2.75rem;
  font-size: 1rem;
}

.auth .button--block {
  min-height: 3rem;
  border-radius: var(--r-control);
  font-size: 0.9375rem;
}

.auth__caps {
  margin: -0.5rem 0 1rem;
  font-size: 0.8125rem;
  color: var(--warn);
}

/* "No account yet?" under a rule, as the preview has it. */
.auth__account {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  text-align: center;
  font-size: 0.8125rem;
  color: var(--muted);
}

.auth__account p {
  margin: 0.25rem 0 0;
  color: var(--text-2);
}

.auth__help {
  margin: 1.25rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--muted);
}

.auth__foot {
  /* "© year Macsen" at the left, "Made for your everyday." at the right. */
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  font-size: 0.75rem;
  color: var(--faint);
}

@media (min-width: 1450px) {
  .auth__brand {
    padding: 3rem 4.25rem 2.1875rem;
  }

  .auth__story {
    margin-top: 4.5rem;
  }

  .authflow__stack {
    max-width: 27.8rem;
  }

  .auth__form {
    padding: 2.4375rem 4.125rem 1.5rem;
  }

  .auth__inner {
    max-width: 25.625rem;
  }
}

@media (max-width: 1100px) {
  .auth__brand {
    padding: 2.125rem 2rem 1.6875rem;
  }

  .auth__story {
    margin-top: 3rem;
  }

  .auth__form {
    padding: 1.625rem 2rem 1rem;
  }

  .authflow {
    min-height: 22.8rem;
    margin: 0 -0.8rem;
    padding: 2.125rem 0.4rem 3.5rem;
  }

  .authflow__body {
    padding: 1rem;
  }

  .authflow__title {
    font-size: 1.0625rem;
  }

  .authflow__toast {
    left: -1rem;
    padding: 0.75rem;
  }
}

@media (max-width: 800px) {
  .auth {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
    padding: 10px;
  }

  .auth__brand {
    padding: 1.8rem 1.5rem 1.5rem;
  }

  .auth__form {
    padding: 1.375rem 1.5rem 0.875rem;
  }

  .auth__headline {
    font-size: 1.875rem;
  }

  .auth__heading {
    font-size: 1.875rem;
  }

  .auth__sub {
    font-size: 0.875rem;
  }

  .authflow__stages > i {
    margin-left: 4px;
    margin-right: 4px;
  }

  .authflow__toast {
    left: -0.5rem;
    width: 100%;
    gap: 0.5rem;
  }
}

/* Laptop screens are shorter than the panel's content (at 1280 by 800
   it ran 143px past the foot of the screen, 8 October 2026), so below
   960px of height the line at the foot goes and the card is drawn
   smaller, in steps. zoom rather than transform: scale, because zoom
   shrinks the space the card takes as well as the drawing. Measured
   with no page scroll at 1920x1080, 1440x1000, 1440x900, 1366x768,
   1280x800, 1280x680, 1024x768, 760x1000 and 660x900. */
@media (min-width: 641px) and (max-height: 960px) {
  .auth__story {
    margin-top: 2rem;
  }

  .authflow {
    min-height: 0;
    padding-top: 1rem;
    padding-bottom: 2.75rem;
    zoom: 0.82;
  }

  .auth__brandfoot {
    display: none;
  }

  .auth__inner {
    padding: 1.5rem 0;
  }
}

@media (min-width: 641px) and (max-height: 820px) {
  .authflow {
    zoom: 0.68;
  }
}

@media (min-width: 641px) and (max-height: 700px) {
  .authflow {
    zoom: 0.55;
  }

  .auth__form {
    padding-top: 1rem;
  }

  .auth__inner {
    padding: 0.5rem 0;
  }
}

@media (min-width: 641px) and (max-height: 580px) {
  .authflow {
    display: none;
  }
}

/* On a phone the navy panel is a short header: logo, eyebrow and
   headline, with a small card drawn in its corner; the form follows. A
   column of two blocks rather than a grid, because two auto rows in a
   min-height: 100% grid share out the spare height (see the landmine). */
@media (max-width: 640px) {
  .auth {
    display: flex;
    flex-direction: column;
    padding: 0;
    background: var(--surface);
  }

  /* min-height: the small card hangs from the header's bottom, so a
     shorter header lifts it. "A clearer day / starts here." is a line
     shorter than the headline before it, and the card rose over the end
     of "Your workday, connected" (8 October 2026). 14rem puts the card's
     top just under the eyebrow at every phone width. */
  .auth__brand {
    display: block;
    min-height: 14rem;
    padding: 1.4375rem 1.5625rem 1.5625rem;
    border-radius: 0;
  }

  .auth__brand .brandlogo__word {
    font-size: 1.375rem;
  }

  .auth__story {
    margin-top: 1.5rem;
  }

  .auth__eyebrow {
    margin-bottom: 0.75rem;
    letter-spacing: 0.08em;
    white-space: nowrap;
  }

  /* Clear of the small card in the corner (about 140px wide). */
  .auth__headline {
    max-width: calc(100% - 9rem);
    margin: 0;
    font-size: 1.5rem;
    line-height: 1.2;
    letter-spacing: -0.02em;
  }

  .auth__note,
  .auth__brandfoot,
  .authflow__card,
  .authflow__grid,
  .authflow__toast {
    display: none;
  }

  .authflow {
    position: absolute;
    right: 15px;
    bottom: 20px;
    z-index: 0;
    display: block;
    width: 130px;
    min-height: 0;
    margin: 0;
    padding: 0;
  }

  .authflow__mini {
    display: block;
    transform: rotate(-7deg);
  }

  .authflow__minicard {
    display: flex;
    align-items: center;
    gap: 0.5625rem;
    width: 130px;
    height: 58px;
    padding: 10px;
    background: var(--auth-mini);
    border: 1px solid var(--auth-mini-border);
    border-radius: 9px;
    box-shadow: var(--auth-toast-shadow);
  }

  .authflow__minilines {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 6px;
  }

  .authflow__minilines span {
    width: 32px;
    height: 3px;
    border-radius: 2px;
    background: var(--auth-mini-bar);
  }

  .authflow__minilines span + span {
    width: 22px;
    opacity: 0.6;
  }

  .authflow__minicheck {
    display: grid;
    place-items: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--auth-card-blue);
    color: var(--auth-on-navy);
  }

  .authflow__minicheck .authflow__tick {
    width: 11px;
    height: 11px;
    stroke-width: 2.6;
  }

  .authflow__miniline {
    display: block;
    height: 12px;
    margin-left: 105px;
    border-left: 1px dashed var(--auth-mini-dash);
  }

  .authflow__minidone {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-left: 26px;
    padding: 5px 7px;
    background: var(--auth-mini);
    border: 1px solid var(--auth-mini-border);
    border-radius: 5px;
    font-size: 0.6875rem;
    white-space: nowrap;
    color: var(--auth-mini-text);
  }

  .authflow__minidone .authflow__tick {
    width: 12px;
    height: 12px;
    color: var(--auth-navy-accent);
  }

  .auth__form {
    flex: 1;
    padding: 1.5rem 1.25rem 1.25rem;
  }

  .auth__inner {
    max-width: 26rem;
    margin: 0 auto;
    padding: 1.5rem 0 2rem;
  }

  .auth__padlock {
    display: none;
  }

  .auth__heading {
    font-size: 1.875rem;
  }

  .auth__foot {
    width: 100%;
    max-width: 26rem;
    margin: 0 auto;
  }
}

/* Too narrow for the headline and the small card side by side: at
   320px the card sat over "Every request,". */
@media (max-width: 359px) {
  .authflow {
    display: none;
  }

  .auth__headline {
    max-width: none;
  }
}

/* ====================== narrow screens ======================= */

@media (max-width: 860px) {
  .app {
    grid-template-columns: 1fr;
    /* Two auto rows in a grid with min-height:100% share the leftover height
       between them. With a full page of content that is invisible, because
       there is no leftover. The moment a screen is short or empty — which is
       exactly what every view looks like for the instant after you switch to
       it, before its rows arrive — the header was handed 360px of the 844px
       screen and its logo, navigation and account links drifted apart into
       the middle of it. The header takes the height it needs; the page takes
       the rest. */
    grid-template-rows: auto 1fr;
  }

  /* Stacked, the four bands of the rail — brand, organisation, navigation,
     account — took 215px, and with the page header under them a phone showed
     426px of chrome before a single row of content: more than half the
     screen. The brand and the account links share a row instead, and the
     organisation name goes, because the page header's eyebrow already says
     it on every screen. */
  .rail {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      'brand account'
      'org   org'
      'nav   nav';
    align-items: center;
    padding: 0.375rem 0 0.25rem;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  .rail__brand {
    grid-area: brand;
    padding: 0 0 0 1rem;
  }

  /* Kept in the layout, but only the "Support session" or "Platform staff"
     line can show: those change what the person is looking at, so they must
     survive. With no such line the row collapses to nothing. */
  .rail__org {
    grid-area: org;
    padding: 0 1rem;
    margin: 0;
    border-bottom: none;
  }

  .rail__org-name {
    display: none;
  }

  /* The navigation is a bar fixed along the bottom (see shellWith): four
     sections and More. It was a sideways-scrolling strip of nine under the
     logo, most of them off the screen (4 October 2026). */
  .rail__nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 120;
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    padding: 0.25rem 0.25rem calc(0.25rem + env(safe-area-inset-bottom));
    background: var(--surface);
    border-top: 1px solid var(--border);
    box-shadow: 0 -4px 16px rgba(31, 32, 51, 0.06);
  }

  /* Platform staff outside an organisation have one section, Clients:
     a bar with one button switches to nothing. */
  .rail__nav:has(> .navitem:only-child) {
    display: none;
  }

  .rail__nav > .navitem {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    min-height: 3.5rem;
    flex-direction: column;
    justify-content: center;
    gap: 0;
    padding: 0.375rem 0.125rem;
    font-size: 0.6875rem;
    text-align: center;
  }

  .rail__nav > .navitem .navitem__body {
    flex-direction: column;
    gap: 0.1875rem;
    min-width: 0;
    max-width: 100%;
  }

  .rail__nav > .navitem .navitem__body span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .rail__nav > .navitem .navitem__icon {
    width: 22px;
    height: 22px;
  }

  .rail__nav > .navitem:has(.navitem__short) .navitem__label {
    display: none;
  }

  .rail__nav > .navitem .navitem__short {
    display: block;
  }

  /* A plain count ("Projects 4") has no room in the bar; one that needs
     attention sits on the icon's corner as a badge. */
  .rail__nav > .navitem .navitem__count {
    display: none;
  }

  .rail__nav > .navitem .navitem__count--flag {
    display: block;
    position: absolute;
    top: 0.25rem;
    left: calc(50% + 0.375rem);
    font-size: 0.6875rem;
    line-height: 1.3;
  }

  /* Something under More needs attention (unread chat, say): a dot on
     More. :has() follows setNavCount, which changes the class in place. */
  .rail__nav:has(.rail__more .navitem__count--flag) .navitem--more::after {
    content: '';
    position: absolute;
    top: 0.5rem;
    left: calc(50% + 0.5rem);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
  }

  .rail__nav > .navitem--more {
    display: flex;
  }

  .rail__nav > .navitem--more[aria-expanded='true'] {
    background: var(--bg);
    color: var(--text);
  }

  /* The rest, in a panel above the bar while More is open. */
  .rail__more {
    display: none;
    position: fixed;
    left: 0.5rem;
    right: 0.5rem;
    bottom: calc(4.25rem + env(safe-area-inset-bottom));
    z-index: 121;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.5rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-card);
    box-shadow: var(--shadow-md);
  }

  .rail--more .rail__more {
    display: flex;
  }

  .rail__more .navitem {
    min-height: 2.75rem;
  }

  /* The page already ends 5.5rem above the foot of the screen on a phone
     (.content, below), which clears the 4rem bar; extra padding here only
     doubled the gap. Measured 4 October 2026: the last panel ends 43px
     above the bar. */

  /* The floating chat button sat over the content in the bottom corner;
     on a phone Chat is under More, with a dot when there is something
     unread. */
  /* Doubled class: the button's own rule comes later in the file and
     would otherwise win. */
  .chatfab.chatfab {
    display: none;
  }

  /* Everything else pinned to the foot of the screen sits above the bar:
     chat windows, and the bell and Create menus. Doubled classes for the
     same reason as above. */
  .dockrail.dockrail {
    bottom: calc(4.5rem + env(safe-area-inset-bottom));
  }

  .bellmenu.bellmenu,
  .createmenu.createmenu {
    bottom: calc(4.5rem + env(safe-area-inset-bottom));
    max-height: calc(100vh - 7rem);
  }

  .rail__foot {
    grid-area: account;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0 0.625rem 0 0;
  }

  /* The address is what "Account" opens; on a phone it is a long string
     competing with the brand for one row. */
  .rail__user {
    display: none;
  }

  /* 15px tall was not a target anyone could hit reliably. */
  .rail__foot .raillink {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    padding: 0 0.5rem;
  }

  .rail__foot .raillink + .raillink {
    margin: 0;
  }

  .topbar,
  .content {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .form {
    padding: 1.125rem;
  }

  .search {
    flex: 1 1 100%;
  }

  /* Rows of controls that were never told they may wrap. Each one was wider
     than the screen and, because the panel around it clips rather than
     scrolls, the controls past the edge could not be reached at all: the
     "Mine" filter on Requests and the view switches on Projects were simply
     gone on a phone. */
  .segmented {
    display: flex;
    flex-wrap: wrap;
  }

  .topbar__actions {
    flex-wrap: wrap;
  }

  /* Safari on iPhone zooms the page in whenever a focused field is set below
     16px, and does not zoom back out afterwards. Fields here ran from 12 to
     14px, so working through a form on a phone meant pinching the page back
     into place after every one of them. 16px only at phone widths; the
     denser sizes are kept on larger screens. */
  input,
  select,
  textarea,
  .field__input,
  .field__select,
  .field__textarea,
  .filters__select,
  .chatsearch__input,
  .chatsearch__scope {
    font-size: 1rem;
  }
}

/* ===================== page header ===================== */

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.375rem;
}

.eyebrow::before {
  content: '';
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
}

.pagelede {
  font-size: 0.9375rem;
  color: var(--muted);
  margin: 0.25rem 0 0;
  max-width: 60ch;
}

.sectionlabel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 1.75rem 0 0.75rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}

.sectionlabel__hint {
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--faint);
}

/* ===================== operational brief ===================== */

.brief {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(120px, 0.5fr));
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.brief__main {
  padding: 1.125rem 1.25rem;
  border-right: 1px solid var(--border-soft);
}

.brief__label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.brief__headline {
  display: block;
  margin-top: 0.4375rem;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.brief__note {
  margin: 0.3125rem 0 0;
  font-size: 0.8125rem;
  color: var(--muted);
}

.brief__item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0.9375rem 1.0625rem;
  border-right: 1px solid var(--border-soft);
}

.brief__item:last-child {
  border-right: none;
}

.brief__value {
  margin-top: 0.3125rem;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.brief__item--flag .brief__value {
  color: var(--warn);
}

.brief__item--ok .brief__value {
  color: var(--ok);
}

@media (max-width: 900px) {
  .brief {
    grid-template-columns: 1fr 1fr;
  }
  .brief__main {
    grid-column: 1 / -1;
    border-right: none;
    border-bottom: 1px solid var(--border-soft);
  }
}

/* ===================== command palette ===================== */

.cmdback {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  align-items: start;
  justify-items: center;
  padding: 12vh 1rem 1.5rem;
  background: rgba(16, 24, 40, 0.4);
  backdrop-filter: blur(3px);
}

.cmd {
  width: min(680px, 100%);
  max-height: min(70vh, 640px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 24px 64px rgba(16, 24, 40, 0.24);
}

.cmd__search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem 0.875rem;
  border-bottom: 1px solid var(--border);
}

.cmd__input {
  height: 2.25rem;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-family: var(--sans);
  font-size: 1rem;
}

.cmd__esc {
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--bg);
  color: var(--muted);
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 0.25rem 0.4375rem;
}

.cmd__body {
  overflow-y: auto;
  padding: 0.5rem;
}

.cmd__group {
  padding: 0.375rem 0.25rem 0.5rem;
}

.cmd__label {
  margin: 0 0 0.375rem 0.375rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.cmditem {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  padding: 0.5rem 0.5rem;
  border: 1px solid transparent;
  border-radius: var(--r-control);
  background: transparent;
  color: var(--text);
  font-family: var(--sans);
  text-align: left;
  cursor: pointer;
}

.cmditem:hover,
.cmditem--active {
  background: var(--accent-soft);
  border-color: transparent;
}

.cmditem__icon {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: var(--r-control);
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
  font-size: 0.75rem;
}

.cmditem--active .cmditem__icon {
  background: var(--surface);
}

.cmditem__title {
  font-size: 0.875rem;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cmditem__sub {
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 0.0625rem;
}

.cmditem__kind {
  font-size: 0.6875rem;
  color: var(--faint);
  white-space: nowrap;
}

.cmd__empty {
  padding: 1.25rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.875rem;
}

/* ===================== search trigger + create ===================== */

.searchtrigger {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 16rem;
  padding: 0.4375rem 0.6875rem;
  border: 1px solid var(--border);
  border-radius: var(--r-control);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  color: var(--muted);
  font-family: var(--sans);
  font-size: 0.875rem;
  cursor: pointer;
  text-align: left;
}

.searchtrigger:hover {
  border-color: var(--border-strong);
}

.searchtrigger__short {
  display: none;
}

.searchtrigger__hint {
  margin-left: auto;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--faint);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.0625rem 0.3125rem;
}

.createwrap {
  position: relative;
}

.createmenu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 40;
  min-width: 15rem;
  padding: 0.3125rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-pop);
}

.createmenu button {
  display: block;
  width: 100%;
  padding: 0.5rem 0.625rem;
  border: 0;
  border-radius: var(--r-control);
  background: transparent;
  color: var(--text);
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

.createmenu button:hover {
  background: var(--accent-soft);
  color: var(--accent-dark);
}

@media (max-width: 860px) {
  .searchtrigger {
    width: 100%;
  }
}

/* ===================== view bar ===================== */

.viewbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.125rem;
  border-bottom: 1px solid var(--border-soft);
  background: var(--surface-2);
}

.viewbar__left,
.viewbar__right {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  align-items: center;
}

.scopelabel {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ===================== month calendar ===================== */

.monthgrid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  border-top: 1px solid var(--border-soft);
}

.monthhead {
  padding: 0.4375rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--muted);
  background: var(--surface-2);
  border-right: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}

.monthhead:nth-child(7n) {
  border-right: none;
}

.daycell {
  min-height: 7rem;
  padding: 0.375rem;
  border-right: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}

.daycell:nth-child(7n) {
  border-right: none;
}

.daycell--out {
  background: var(--surface-2);
}

.daycell--today {
  background: var(--accent-soft);
}

.daycell__num {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: 0.25rem;
}

.daycell--out .daycell__num {
  color: var(--faint);
}

.daycell--today .daycell__num {
  color: var(--accent-dark);
}

/* Late work from before the grid's first day (see monthCalendar). */
.monthlate {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 0.5rem;
  padding: 0.75rem 1.125rem;
  border-top: 1px solid var(--border-soft);
}

.monthlate__label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--warn);
}

/* A chip is a full-width block inside a day; here they sit in a row. */
.monthlate .chip {
  width: auto;
  margin: 0;
  max-width: 100%;
}

/* The full date ("Wed, Sep 30") is for the phone list; the grid's column
   headings already say the weekday. Likewise the empty-month line. */
.daycell__date,
.monthgrid__none {
  display: none;
}

.monthgrid__none {
  margin: 0;
  padding: 1rem 1.125rem;
  font-size: 0.875rem;
  color: var(--muted);
}

/* On a phone the month is a list of the days with something on them (see
   monthCalendar). Days from the neighbouring months are kept when they
   have something: they were hidden outright, and with them a project
   overdue since the end of last month. */
@media (max-width: 860px) {
  .monthgrid {
    grid-template-columns: 1fr;
  }
  .monthhead {
    display: none;
  }
  .daycell {
    min-height: 0;
    border-right: none;
    padding: 0.625rem 0.75rem;
  }
  .daycell--empty {
    display: none;
  }
  .daycell__day {
    display: none;
  }
  .daycell__date {
    display: inline;
  }
  .daycell__num {
    font-size: 0.8125rem;
    margin-bottom: 0.375rem;
  }
  .monthgrid__none {
    display: block;
  }
}

/* ===================== portfolio overview ===================== */

.healthrow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  border-bottom: 1px solid var(--border-soft);
}

.healthcell {
  padding: 0.875rem 1.125rem;
  border-right: 1px solid var(--border-soft);
}

.healthcell:last-child {
  border-right: none;
}

.healthcell__label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}

.healthcell__value {
  margin-top: 0.3125rem;
  font-size: 1.375rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.healthcell--flag .healthcell__value {
  color: var(--warn);
}

/* A figure you can open. Rendered as a button, so it needs the button
   defaults stripped back to what the div looked like, and it needs to say
   it is pressable — otherwise it is a number that happens to respond. */
.healthcell--open {
  display: block;
  width: 100%;
  text-align: left;
  font-family: var(--sans);
  background: none;
  border: none;
  border-right: 1px solid var(--border-soft);
  cursor: pointer;
  transition: background 0.12s ease;
}

.healthcell--open:hover {
  background: var(--surface-2);
}

.healthcell--open .healthcell__label::after {
  content: ' \203a';
  color: var(--faint);
}

.healthcell--on {
  background: var(--accent-soft);
}

.healthcell--on .healthcell__label {
  color: var(--accent-dark);
}

.healthdrawer {
  padding: 0.875rem 1.125rem;
  border-bottom: 1px solid var(--border-soft);
  background: var(--surface-2);
}

.healthdrawer .sectionlabel {
  margin-bottom: 0.5rem;
}

/* The Projects page's Overview: headings in line with the rows under
   them. The lists are padded 1.25rem; the headings sat flush against the
   panel's edge (the founder's screenshot, 13 October 2026). */
.overviewlists {
  padding-bottom: 1.25rem;
}

.overviewlists > .sectionlabel,
.overviewlists > .linkbutton {
  margin-left: 1.25rem;
  margin-right: 1.25rem;
}

.unscheduled {
  padding: 0.75rem 1.125rem;
  border-top: 1px solid var(--border-soft);
  background: var(--surface-2);
  font-size: 0.8125rem;
  color: var(--muted);
}

/* ===================== record header ===================== */

.rechead {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-sm);
  padding: 1.125rem 1.25rem;
  margin-bottom: 1.25rem;
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}

.rechead__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  align-items: center;
}

/* The subject over the header, in the inbox pane only (see
   fillRequestDetail). */
.rechead__title {
  display: none;
  grid-column: 1 / -1;
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.reqdetail .rechead__title {
  display: block;
}

/* Pinned (laptop only, as the pinning is), the title takes the place of
   the reference line, on one line, so the header barely changes height
   as it pins. */
/* Pinned (laptop only), the title shows over the reference line, in its
   space, so the header keeps exactly its height (setStuck): any change
   in height made the page bounce. In the inbox the title is already
   shown, so nothing changes there. */
@media (min-width: 861px) {
  .rechead__ref {
    position: relative;
  }

  .rechead--stuck .rechead__ref[data-title] {
    color: transparent;
  }

  .rechead--stuck .rechead__ref[data-title]::after {
    content: attr(data-title);
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .reqdetail .rechead--stuck .rechead__ref[data-title] {
    color: var(--muted);
  }

  .reqdetail .rechead--stuck .rechead__ref[data-title]::after {
    content: none;
  }
}

/* The summary row and tags: a card of their own under the header that
   reads as part of it, out of the pinned header so it keeps one height. */
.rechead:has(+ .recsummary) {
  margin-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.recsummary {
  display: grid;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  padding: 0.875rem 1.25rem 1.125rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 1px solid var(--border-soft);
  border-radius: 0 0 var(--r-card) var(--r-card);
  box-shadow: var(--shadow-sm);
}

/* On its own, not under a record header (a client in the control panel). */
.recsummary.recsummary--alone {
  border-radius: var(--r-card);
}

.recsummary .recfacts {
  padding-top: 0;
  border-top: none;
}

/* Pinned, the header is a card on its own again (paint only). */
.rechead.rechead--stuck {
  border-radius: var(--r-card);
}

/* On a laptop a record's header, with its actions, stays at the top while
   the page scrolls: Edit, Mark resolved and the rest were a long scroll
   back up from the conversation (4 October 2026). While pinned, a second
   shadow in the page colour fills the gap above the header so rows do
   not show through it. Not on a phone, where the header is two rows of buttons and
   would take a third of the screen. */
@media (min-width: 861px) {
  .rechead {
    position: sticky;
    top: 0.75rem;
    z-index: 30;
  }

  /* Only while pinned: unpinned, the strip reached 1.75rem above the
     header and covered the inbox's "3 requests" count. */
  .rechead.rechead--stuck {
    box-shadow: var(--shadow-sm), 0 -1rem 0 0.75rem var(--bg);
  }
}

.rechead__ref {
  display: block;
  width: 100%;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.375rem;
}

.rechead__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-content: start;
}

/* ============ record pages (9 October 2026, enterprise) ============
   The summary row across the header, the stage track under it, and the
   tabs over the main column. */
.recfacts {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: 0.75rem 1.25rem;
  margin: 0;
  padding-top: 0.875rem;
  border-top: 1px solid var(--border-soft);
}

.recfacts__item {
  min-width: 0;
}

.recfacts__label {
  font-size: 0.75rem;
  color: var(--muted);
  margin-bottom: 0.25rem;
}

.recfacts__value {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.375rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
  overflow-wrap: anywhere;
}

.recfacts__stack {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.recfacts__person {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  min-width: 0;
}

.recfacts__note {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent-dark);
}

.recfacts__note--late {
  color: var(--warn);
}

.recfacts__note--paused {
  color: var(--muted);
}

/* Two to a row on a phone: one column made six facts 260px tall at
   375 (two of 152px did not quite fit in 305). */
@media (max-width: 620px) {
  .recfacts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem 1rem;
  }
}


/* Dots joined by a line: ticked (green) before the current stage, the
   current one ringed in indigo, the rest empty. From the sign-in page's
   illustration. */
.stagetrack {
  display: flex;
  align-items: flex-start;
  margin: 0 0 1.25rem;
  padding: 1rem 0.5rem 0.875rem;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-sm);
  overflow-x: auto;
}

.stagetrack__step {
  position: relative;
  flex: 1 1 0;
  min-width: 5.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4375rem;
  text-align: center;
}

.stagetrack__step::before {
  content: '';
  position: absolute;
  top: 0.8125rem;
  left: -50%;
  width: 100%;
  height: 2px;
  background: var(--track-2);
}

.stagetrack__step:first-child::before {
  display: none;
}

.stagetrack__step--done::before,
.stagetrack__step--now::before {
  background: var(--ok);
}

.stagetrack__dot {
  position: relative;
  z-index: 1;
  width: 1.75rem;
  height: 1.75rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--border-strong);
  border-radius: 50%;
  background: var(--surface);
}

.stagetrack__dot svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.stagetrack__step--done .stagetrack__dot {
  border-color: var(--ok);
  background: var(--ok);
  color: var(--surface);
}

.stagetrack__step--now .stagetrack__dot {
  border-color: var(--accent-solid);
  background: var(--accent-solid);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

.stagetrack__step--now .stagetrack__dot::after {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffffff;
}

/* Lost or cancelled: grey with a cross. The line into it stays grey, and
   so does the one into a won stage it skipped. */
.stagetrack__step--lost .stagetrack__dot {
  border-color: var(--muted);
  background: var(--muted);
  color: var(--surface);
}

.stagetrack__step--lost .stagetrack__name {
  color: var(--text-2);
}

.stagetrack__name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-2);
  padding: 0 0.25rem;
}

.stagetrack__step--done .stagetrack__name {
  color: var(--ok);
}

.stagetrack__step--now .stagetrack__name {
  color: var(--accent-dark);
}

.stagetrack__note {
  font-size: 0.75rem;
  color: var(--muted);
}

.rectabs {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 1rem;
  padding: 0.25rem;
  border-radius: var(--r-pill);
  background: var(--neutral-soft);
  overflow-x: auto;
  scrollbar-width: thin;
}

.rectabs__tab {
  flex: none;
  min-height: 2.25rem;
  padding: 0 1rem;
  border: none;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--text-2);
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}

.rectabs__tab:hover {
  color: var(--text);
}

.rectabs__tab--on,
.rectabs__tab--on:hover {
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

.panel[hidden] {
  display: none;
}

/* A labelled status list among the header's buttons (task page), the
   same height as a ghost button. */
.statuspick {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-width: 0;
}

.statuspick__label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--muted);
}

.statuspick__select {
  font-family: var(--sans);
  font-size: 0.8125rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-control);
  padding: 0.3125rem 0.5rem;
  min-width: 0;
  /* The height of the ghost buttons beside it (32px). */
  min-height: 2rem;
}

.statuspick__select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* 16px on phones: iPhone Safari zooms in on a smaller field and stays. */
@media (max-width: 860px) {
  .statuspick__select {
    font-size: 1rem;
  }
}

.progress {
  width: 100%;
  margin-top: 0.75rem;
}

.progress__head {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--muted);
  margin-bottom: 0.25rem;
}

.progress__track {
  height: 6px;
  border-radius: 999px;
  background: var(--track);
  overflow: hidden;
}

.progress__fill {
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
}

/* 1100 rather than 860: on a 1024px laptop the request list takes most of the
   width and leaves the detail pane about 326px, which squeezed the actions
   column of this header to 24px and left the "Edit request" button hanging
   out of it. The header is narrow long before the screen is. */
@media (max-width: 1100px) {
  .rechead {
    grid-template-columns: 1fr;
  }
}

/* ===================== record two-column body ===================== */

.reclayout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22rem;
  gap: 1.25rem;
  align-items: start;
}

@media (max-width: 1100px) {
  /* minmax(0, …) rather than a bare 1fr: a 1fr track's minimum is auto, so it
     grows to its widest content instead of to the space available. Every
     record page built on this layout was 409px wide inside a 358px column on
     a phone, and had been all along — the earlier audit only ever opened a
     request, which uses a layout of its own. */
  .reclayout {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ===================== read-only field tiles ===================== */

/* Two fixed columns meant a full-width field — a description, a subject —
   could not sit beside a narrow one, so it dropped to the next row and left
   the cell next to it empty. Two of the five rows on a project page were half
   blank. Auto-fit gives a wide panel three or four columns instead of two,
   and dense backfills the gaps a wide field leaves behind. Every tile carries
   its own label, so filling a gap out of order still reads correctly. */
.tiles {
  display: grid;
  /* 11rem, not 13: a record's detail panel sits in a two-column layout of its
     own and is only about 412px wide at 1440, where a 13rem minimum fell just
     short of fitting two tracks and gave one column — worse than the two it
     replaced. At 11rem that panel keeps two, and a full-width one gets four. */
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  grid-auto-flow: dense;
  gap: 0.25rem 1.5rem;
  padding: 1.125rem;
}

/* A label and its value, divided by a line rather than each in its own
   grey box: the details were boxes inside a panel inside the page
   (4 October 2026). */
.tile {
  background: none;
  border: none;
  border-top: 1px solid var(--border-soft);
  border-radius: 0;
  padding: 0.625rem 0 0.375rem;
  min-width: 0;
}

.tile--wide {
  grid-column: 1 / -1;
}

/* Sentence case, not small capitals: the labels are quiet now and the
   values carry the weight. */
.tile__label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--muted);
  margin-bottom: 0.125rem;
}

/* The address under a link in a details tile (the video call's URL), so
   people can see where it goes; long ones wrap rather than widen the
   tile. */
.tile__sub {
  margin-top: 0.125rem;
  font-size: 0.75rem;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.tile__value {
  font-size: 0.875rem;
  font-weight: 500;
  white-space: pre-wrap;
  word-break: break-word;
}

.tile__link {
  color: var(--accent);
  text-decoration: none;
}

.tile__link:hover {
  text-decoration: underline;
}

@media (max-width: 700px) {
  .tiles {
    grid-template-columns: 1fr;
  }
}

/* ===================== assignment block ===================== */

.assignbox {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.75rem;
  background: var(--accent-soft);
  border-radius: var(--r-control);
  margin-bottom: 0.75rem;
}

.assignbox__label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent-dark);
}

.assignbox__name {
  font-size: 0.875rem;
  font-weight: 600;
}

.factlist {
  padding: 0 1.125rem 1.125rem;
}

.fact {
  padding: 0.625rem 0;
  border-top: 1px solid var(--border-soft);
}

.fact__label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--muted);
}

.fact__value {
  font-size: 0.875rem;
  font-weight: 500;
  margin-top: 0.1875rem;
}

/* ===================== activity timeline ===================== */

.trail {
  padding: 1rem 1.125rem;
}

.trailitem {
  position: relative;
  padding: 0 0 0.875rem 1.125rem;
  border-left: 2px solid var(--border-soft);
}

.trailitem:last-child {
  border-left-color: transparent;
  padding-bottom: 0;
}

.trailitem::before {
  content: '';
  position: absolute;
  left: -6px;
  top: 3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--surface);
  box-shadow: 0 0 0 1px var(--border);
}

.trailitem__text {
  font-size: 0.875rem;
  color: var(--text-2);
}

.trailitem__when {
  font-size: 0.75rem;
  color: var(--faint);
  margin-top: 0.125rem;
}

/* ===== card treatment for the remaining list types ===== */

.slot,
.comment,
.event,
.file,
.client,
.attendee {
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  margin: 0 1.25rem 0.5rem;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.slot:hover,
.file:hover,
.client:hover {
  background: var(--surface);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}

.slot,
.file,
.client,
.comment,
.event {
  border-bottom: 1px solid var(--border-soft);
}

.dayhead {
  background: transparent;
  border-bottom: none;
  padding: 0.875rem 1.25rem 0.375rem;
}

.offices,
.records {
  padding: 0.5rem 1.25rem 1.25rem;
}

.offices__row {
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  padding: 0.8125rem 0.9375rem;
  margin-bottom: 0.5rem;
}

.offices__row:last-child {
  margin-bottom: 0;
}

/* Panels that hold a grid or chart need their own breathing room */
.bars,
.trail,
.tiles,
.factlist,
.skeleton {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.filters,
.viewbar,
.inline-form,
.composer {
  background: transparent;
  border-top: none;
  border-bottom: none;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.inline-form,
.composer {
  border-top: 1px solid var(--border-soft);
  padding-top: 1rem;
  margin-top: 0.25rem;
}

/* Empty states read as a placeholder card, matching the reference design */
.empty {
  margin: 0 1.25rem 1.25rem;
  padding: 1.5rem 1.125rem;
  text-align: center;
  border: 1px dashed var(--border-dashed);
  border-radius: 10px;
  background: var(--surface-2);
}

.emptystate {
  margin: 0 1.25rem 1.25rem;
  border: 1px dashed var(--border-dashed);
  border-radius: 10px;
  background: var(--surface-2);
}

/* Metric cards get the softer radius too */
.figure,
.card,
.column {
  border-radius: 11px;
}

.brief,
.metastrip,
.attention,
.calm,
.form,
.rechead {
  border-radius: var(--r-card);
}

.chosen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  align-items: center;
  margin-top: 0.5rem;
}

.chosen__label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
}

/* ===== threaded comments ===== */

.thread {
  margin: 0 1.25rem 0.5rem;
  border: 1px solid var(--border-soft);
  border-radius: 11px;
  background: var(--surface-2);
  overflow: hidden;
}

.thread .comment {
  margin: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  border-bottom: 1px solid var(--border-soft);
}

.thread .comment:last-child {
  border-bottom: none;
}

.comment--reply {
  padding-left: 3rem;
  background: var(--surface) !important;
}

.replybar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4375rem 0.625rem;
  margin-bottom: 0.5rem;
  border-radius: var(--r-control);
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: 0.75rem;
  font-weight: 600;
}

@media (max-width: 700px) {
  .comment--reply {
    padding-left: 1.5rem;
  }
}

/* Avatar background now set per-person in JS; keep only the text/shape rule */
.avatar {
  color: #ffffff;
  font-weight: 600;
}

/* ===== checkbox-style completion toggle, from the source task list ===== */

.checkbox {
  width: 17px;
  height: 17px;
  border-radius: 5px;
  border: 2px solid var(--border);
  background: transparent;
  flex: 0 0 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.checkbox--done {
  background: var(--ok-soft);
  border-color: #10B981;
}

.checkbox--done svg {
  stroke: #059669;
}

.checkbox:hover {
  border-color: var(--accent);
}

/* ===================== dashboard stat cards ===================== */

.statgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 1.75rem;
}

@media (max-width: 900px) {
  .statgrid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.statcard {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-sm);
  padding: 1.25rem;
  cursor: pointer;
  text-align: left;
  width: 100%;
  font-family: var(--sans);
}

.statcard__icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.75rem;
}

.statcard__icon svg {
  width: 18px;
  height: 18px;
}

.statcard__value {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--text);
}

.statcard__label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--muted);
  margin-top: 0.25rem;
}

.statcard__change {
  font-size: 0.75rem;
  font-weight: 600;
  margin-top: 0.375rem;
}

/* ===================== dashboard split ratios ===================== */

.split--dash {
  grid-template-columns: minmax(0, 1fr) 22.5rem;
}

.split--appt {
  grid-template-columns: minmax(0, 1fr) 21.25rem;
}

@media (max-width: 980px) {
  .split--dash,
  .split--appt {
    grid-template-columns: 1fr;
  }
}

/* Overview stage 3 (23 October 2026): what needs this person first, side by
   side when there are two; then two columns that stack on their own, so a
   long Schedule no longer leaves an empty space under My work. Below 981px
   the app moves the panels into one column in reading order (overviewPanels);
   nothing here reorders them. */
.dashcols--two {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22.5rem;
  gap: 1.25rem;
  align-items: start;
}

.dashcols__main,
.dashcols__side {
  min-width: 0;
}

.schedweek__more {
  margin: 0.25rem 1.25rem 0.5rem;
}

/* ===================== agenda list (schedule items) ===================== */

/* The overview Schedule's two parts, Today and This week. */
.schedsep {
  padding: 0.25rem 1.25rem 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
}

.schedsep__range { font-weight: 400; }

/* A panel whose read failed (Overview audit O1): the reason and Retry,
   instead of an empty state that reads as "nothing to do". */
.panelfail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  padding: 0.75rem 1.25rem;
}
.panelfail .notice { margin: 0; }
.mywork__foot .linkbutton { padding: 0; }

/* This week under today, a heading per day (22 October 2026). Each day's
   list keeps the agenda's look, with less space under it. */
.schedweek__date {
  padding: 0.25rem 1.25rem 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text);
}

.schedweek__day .agendalist {
  padding-bottom: 0.625rem;
}

.agendalist {
  padding: 0.5rem 1.125rem 1.125rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.agendaitem {
  display: flex;
  gap: 0.875rem;
  align-items: center;
}

.agendaitem__time {
  width: 3.75rem;
  flex: 0 0 3.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--faint);
}

.agendaitem__box {
  flex: 1;
  min-width: 0;
  background: var(--bg);
  border-radius: var(--r-control);
  padding: 0.625rem 0.875rem;
  /* A button: without these it drew the browser's own 2px outset frame
     and centred its text (Overview audit, 23 October 2026). Only the
     status stripe on the left is meant. */
  border: 0;
  border-left: 3px solid var(--accent);
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.agendaitem__box:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.agendaitem__title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text);
}

.agendaitem__sub {
  font-size: 0.6875rem;
  color: var(--muted);
  margin-top: 0.125rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The "Today" Overview (4 November 2026). The next meeting today marked,
   ones already over faded, Join beside a video call. */
.agendaitem--next .agendaitem__box {
  background: var(--accent-soft, var(--bg));
  box-shadow: inset 0 0 0 1px var(--accent);
}
.agendaitem--over .agendaitem__title { color: var(--muted); font-weight: 500; }
.agendaitem__flag {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 0.125rem;
}
.agendaitem__join { flex: 0 0 auto; text-decoration: none; }
/* display: flex outranked [hidden]: folded days and earlier meetings showed. */
.agendalist[hidden] { display: none; }

/* The next 7 days, a line a day that opens to its meetings. */
.schedday {
  display: flex;
  width: calc(100% - 2.25rem);
  margin: 0 1.125rem 0.375rem;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-control);
  background: var(--surface-2);
  font: inherit;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.schedday:hover { border-color: var(--border-strong); }
.schedday:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.schedday__name { font-size: 0.8125rem; font-weight: 600; }
.schedday__count { font-size: 0.75rem; color: var(--muted); text-align: right; }
.schedday::after {
  content: '';
  flex: 0 0 auto;
  width: 0.4rem;
  height: 0.4rem;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: rotate(45deg) translateY(-2px);
}
.schedday[aria-expanded='true']::after { transform: rotate(-135deg) translateY(-1px); }
.schedday + .agendalist { padding-top: 0.25rem; }

/* Do now and Coming up: what, its kind, its button. */
.donow .row__main { display: flex; flex-direction: column; min-width: 0; gap: 0.125rem; }
.donow .row__link { text-align: left; }
.donow__late { color: var(--warn); font-weight: 600; }
.donow__row--late { border-left: 3px solid var(--warn); }
.donow__signall { margin-left: auto; }
.donow__kind { display: none; }
/* Phone: one compact row per item, the title (two lines at most) and the
   kind leading the line under it, the action on the right. The general
   phone rule stacks every .row into one column with each child on its own
   line, which made each item 140px tall; this outranks it. */
@media (max-width: 620px) {
  .rows.donow .row.donow__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.125rem 0.625rem;
    padding: 0.625rem 0.75rem;
  }
  /* An action (Sign now, Approve and post) goes under the words: beside
     them it squeezed the title and date into a third of the row. */
  .rows.donow .row.donow__row > .button { grid-column: 1 / -1; justify-self: start; margin-top: 0.375rem; }
  .rows.donow .row.donow__row > .donow__pill,
  .rows.donow .row.donow__row > .donow__noaction { display: none; }
  .rows.donow .donow__kind { display: inline; font-weight: 600; color: var(--muted); }
  .rows.donow .donow__late .donow__kind { color: inherit; }
  /* The whole row opens the item (rowOpens), so the title needs no tap
     padding of its own; the date line may wrap rather than be cut off. */
  .rows.donow .row__sub { white-space: normal; }
  .rows.donow .row__link {
    padding: 0;
    min-height: 0;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .rows.donow { gap: 0.375rem; }
}
/* A document's page on a phone (6 November 2026): less padding round the
   header and the step card, so the work starts on the first screen. */
@media (max-width: 620px) {
  .rechead {
    padding: 0.875rem 1rem;
    gap: 0.75rem;
  }
  .recsummary {
    padding: 0.75rem 1rem 0.875rem;
  }
  .stepcard__head {
    padding: 1rem 1rem 0.75rem;
  }
  .stepcard__check,
  .stepcard__next {
    padding: 0.875rem 1rem 1rem;
  }
  .stepcard__foot {
    padding: 0.75rem 1rem 0.875rem;
  }
  /* A step with no papers listed: one quiet line, not a section. */
  .stepcard__check--empty {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
  }
  .stepcard__check--empty .stepcard__title {
    display: none;
  }
  .stepcard__check--empty .stepcard__sub {
    margin: 0;
  }
}

/* Day-number list item, used for "Upcoming this week" style panels */
.dayitem {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.dnum {
  width: 2.5rem;
  flex: 0 0 2.5rem;
  text-align: center;
}

.dnum__wd {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--faint);
}

.dnum__d {
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--text);
}

/* ===================== promo / callout card ===================== */

.callout {
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-card);
  padding: 1.375rem;
}

.callout__title {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--accent-dark);
  margin-bottom: 0.5rem;
}

.callout__text {
  font-size: 0.8125rem;
  color: var(--accent-dark);
  line-height: 1.55;
  margin-bottom: 1rem;
}

.callout__count {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--accent);
  margin-bottom: 0.25rem;
}

/* ===================== project card grid ===================== */

.projectgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.875rem;
  margin-bottom: 1.5rem;
}

@media (max-width: 980px) {
  .projectgrid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 620px) {
  .projectgrid {
    grid-template-columns: 1fr;
  }
}

.projectcard {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-sm);
  padding: 1rem 1.125rem;
  cursor: pointer;
  text-align: left;
  width: 100%;
  font-family: var(--sans);
}

.projectcard--active {
  border-color: var(--accent);
}

.projectcard__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.75rem;
}

.projectcard__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-top: 0.1875rem;
}

.projectcard__name {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.5rem;
}

.projectcard__meta {
  display: flex;
  justify-content: space-between;
  margin-top: 0.625rem;
  font-size: 0.6875rem;
  color: var(--muted);
}

.projectcard__footer {
  margin-top: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.projectcard__owner {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.projectcard__owner .avatar {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  font-size: 0.5625rem;
}

.projectcard__owner span {
  font-size: 0.6875rem;
  color: var(--muted);
}

/* ===================== single-project task panel ===================== */

.taskpanelhead {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border-soft);
}

.taskpanelhead__title {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.9375rem;
  font-weight: 700;
  min-width: 0;
}

.taskpanelhead__sub {
  font-size: 0.75rem;
  color: var(--faint);
  font-weight: 400;
}

.tasklisthead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 6.5rem 5.5rem 6rem 8rem;
  gap: 0.75rem;
  padding: 0.625rem 1.25rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--faint);
  border-bottom: 1px solid var(--border-soft);
}

.taskrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 6.5rem 5.5rem 6rem 8rem;
  gap: 0.75rem;
  align-items: center;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--border-soft);
}

.taskrow:hover {
  background: var(--surface-2);
}

.taskrow:last-child {
  border-bottom: none;
}

.taskrow__title {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-width: 0;
}

.taskrow__title span {
  font-size: 0.8125rem;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .tasklisthead {
    display: none;
  }
  .taskrow {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 0.375rem;
  }
  .taskrow > :nth-child(n + 3) {
    display: none;
  }
}

/* ===================== mini month calendar ===================== */

.minical {
  padding: 1.125rem 1.25rem 1.25rem;
}

.minical__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.875rem;
}

.minical__title {
  font-size: 0.875rem;
  font-weight: 700;
}

.minical__nav {
  display: flex;
  gap: 0.25rem;
}

.minical__navbtn {
  background: var(--bg);
  border: none;
  border-radius: 8px;
  width: 30px;
  height: 30px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
}

.minical__navbtn:hover {
  background: var(--border-soft);
}

.minical__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.375rem;
}

.minical__dow {
  text-align: center;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--faint);
  padding: 0.25rem 0;
}

.minical__day {
  position: relative;
  text-align: center;
  padding: 0.4375rem 0.25rem;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-size: 0.8125rem;
  background: transparent;
  color: var(--text);
  font-family: var(--sans);
}

.minical__day--busy {
  background: var(--accent-soft);
}

.minical__day--today {
  color: var(--accent);
  font-weight: 700;
}

.minical__day--selected {
  background: var(--accent-solid);
  color: #fff;
  font-weight: 700;
}

.minical__dot {
  position: absolute;
  bottom: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
}

.minical__day--selected .minical__dot {
  background: #fff;
}

/* ===================== day-event list (appointments detail) ===================== */

.dayevent {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border-soft);
}

.dayevent:last-child {
  border-bottom: none;
}

.dayevent:hover {
  background: var(--surface-2);
}

.dayevent__bar {
  width: 4px;
  border-radius: 4px;
  align-self: stretch;
  flex-shrink: 0;
  min-height: 3.125rem;
}

.dayevent__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.375rem;
}

.dayevent__title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.1875rem;
}

.dayevent__time {
  font-size: 0.75rem;
  color: var(--muted);
}

.dayevent__attendees {
  display: flex;
  align-items: center;
  margin-top: 0.25rem;
}

.dayevent__attendees .avatar {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  font-size: 0.625rem;
  border: 2px solid var(--surface);
  margin-left: -6px;
}

.dayevent__attendees .avatar:first-child {
  margin-left: 0;
}

.dayevent__names {
  font-size: 0.75rem;
  color: var(--muted);
  margin-left: 0.625rem;
}

/* ===================== requests master-detail split ===================== */

.split--req {
  /* Grows a little with the window instead of staying pinned at 23.75rem, and
     stops at 30rem so it never becomes the bigger half. The floor is the old
     fixed width, not something smaller: a first attempt at 21rem made the
     list narrower at 1440 than it had been, which is the opposite of the
     point. */
  grid-template-columns: clamp(23.75rem, 24%, 30rem) minmax(0, 1fr);
  align-items: stretch;
  /* Without a cap of its own, running the page wide would stretch a single
     request across a 2560px monitor. */
  max-width: 1760px;
}

@media (max-width: 980px) {
  .split--req {
    grid-template-columns: 1fr;
  }
}

/* The inbox shows a whole request beside the list, and the request page's
   two columns (a fixed 22rem side column) were decided by the window's
   width. At 1280px the pane is about 580px, so the details and the
   conversation, the part people read, got 210px and Assignment got 352px.
   Measured by the pane instead: below 50rem it is one column, in the same
   order as on a phone. The request page itself is not inside this
   container, so it is unaffected. */
.reqdetail {
  container: reqdetail / inline-size;
  min-width: 0;
}

@container reqdetail (max-width: 50rem) {
  .reclayout {
    grid-template-columns: minmax(0, 1fr);
  }
}

.reqlist {
  max-height: 37rem;
  overflow-y: auto;
}

.listmore {
  display: flex;
  justify-content: center;
  padding: 0.75rem 1.125rem 1rem;
}

.reqrow {
  display: block;
  width: 100%;
  text-align: left;
  font-family: var(--sans);
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--border-soft);
  border-left: 3px solid transparent;
  background: var(--surface);
  cursor: pointer;
}

.reqrow:hover {
  background: var(--surface-2);
}

.reqrow--active {
  background: var(--surface-2);
  border-left-color: var(--accent);
}

.reqrow__top {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.375rem;
}

.reqrow__title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
}

.reqrow__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.reqrow__meta {
  font-size: 0.6875rem;
  color: var(--faint);
}

/* Who has it and when it is due, beside the status (23 October 2026). */
.reqrow__who,
.reqrow__due {
  font-size: 0.75rem;
  color: var(--muted);
}
.reqrow__due--late {
  color: var(--warn);
  font-weight: 600;
}
.reqrow > .reqrow__meta {
  margin-top: 0.25rem;
}

/* On a phone the Inbox is the list alone: no inner scroll box, which put
   a scrolling list inside a scrolling page. */
.split--listonly .reqlist {
  max-height: none;
}

.reqrow__where {
  font-size: 0.75rem;
  color: var(--muted);
  margin: -0.125rem 0 0.375rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.reqdetail {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.reqdetail__head {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border-soft);
}

.reqdetail__badges {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.875rem;
}

.reqdetail__title {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin-bottom: 0.625rem;
}

.reqdetail__who {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.reqdetail__who span:first-of-type {
  font-size: 0.8125rem;
  font-weight: 600;
}

.reqdetail__who span.reqdetail__from {
  font-size: 0.8125rem;
  color: var(--muted);
}

.reqdetail__when {
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--faint);
}

.reqdetail__body {
  padding: 1.375rem 1.5rem;
  flex: 1;
}

.reqdetail__text {
  font-size: 0.875rem;
  color: var(--text-2);
  line-height: 1.7;
  margin-bottom: 1.25rem;
  white-space: pre-wrap;
}

.reqdetail__actions {
  display: flex;
  gap: 0.625rem;
  margin-top: 1.5rem;
}

.reqdetail__actions .button,
.reqdetail__actions .button--ghost {
  flex: 1;
  text-align: center;
}

.reqdetail__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 20rem;
  color: var(--faint);
  font-size: 0.875rem;
}

.tag {
  font-size: 0.75rem;
  font-weight: 500;
  background: var(--bg);
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 0.25rem 0.75rem;
}

/* ===================== task dependencies ===================== */

.depitem {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--border-soft);
}

.depitem:last-of-type {
  border-bottom: none;
}

.depitem__link {
  flex: 1;
  min-width: 0;
  text-align: left;
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text);
  background: none;
  border: none;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.depitem__link:hover {
  color: var(--accent);
}

.deplabel {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--faint);
  padding: 0.75rem 1.25rem 0.25rem;
}

.deplabel:first-child {
  padding-top: 1rem;
}

.blockednotice {
  margin: 0 1.25rem 1rem;
  padding: 0.625rem 0.875rem;
  font-size: 0.8125rem;
  color: var(--warn);
  background: var(--warn-soft);
  border-left: 3px solid var(--warn);
  border-radius: var(--r-control);
}

/* ===================== project team ===================== */

.teamrow {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--border-soft);
}

.teamrow:last-of-type {
  border-bottom: none;
}

.teamrow__name {
  flex: 1;
  min-width: 0;
  font-size: 0.8125rem;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.teamrow__lead {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
}

.teamrow__leadbtn {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  background: none;
  border: none;
  padding: 0.25rem 0.375rem;
  cursor: pointer;
}

.teamrow__leadbtn:hover {
  text-decoration: underline;
}

/* ===================== CRM ===================== */

.crmrow {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) 10rem 8rem;
  gap: 0.75rem;
  align-items: center;
  padding: 0.8125rem 1.25rem;
  border-bottom: 1px solid var(--border-soft);
}

.crmrow:last-child {
  border-bottom: none;
}

.crmrow:hover {
  background: var(--surface-2);
}

@media (max-width: 900px) {
  .crmrow {
    grid-template-columns: 2.5rem minmax(0, 1fr);
  }
  .crmrow > :nth-child(n + 3) {
    display: none;
  }
}

.pickresult {
  display: block;
  width: 100%;
  text-align: left;
  font-family: var(--sans);
  font-size: 0.8125rem;
  padding: 0.5rem 0.75rem;
  border: none;
  background: var(--surface);
  border-bottom: 1px solid var(--border-soft);
  cursor: pointer;
}

.pickresult:hover {
  background: var(--surface-2);
}

/* "Also reported by" under a request's details: the other people who
   reported the same thing. A divided list like the details above it, no
   boxes. */
.reporters {
  margin: 0 1.125rem 1.125rem;
  padding-top: 0.875rem;
  border-top: 1px solid var(--border);
  min-width: 0;
}

.reporters__title {
  margin: 0 0 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--muted);
}

.reporters__list {
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0;
}

.reporter {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border-soft);
  min-width: 0;
}

.reporter:last-child {
  border-bottom: none;
}

/* Name and how/when on one line, wrapping on a phone; the Remove button
   sits at the end of the first line. */
.reporter__top {
  flex: 1 1 12rem;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.5rem;
  align-items: baseline;
}

.reporter__name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
  overflow-wrap: anywhere;
}

.reporter__meta {
  font-size: 0.75rem;
  color: var(--muted);
}

.reporter .button--ghost {
  order: 2;
}

.reporter__reach,
.reporter__note {
  order: 3;
  flex: 1 1 100%;
  min-width: 0;
  margin: 0;
  font-size: 0.8125rem;
  overflow-wrap: anywhere;
}

.reporter__note {
  color: var(--text-2);
  white-space: pre-wrap;
}

.reporters__none {
  margin: 0 0 0.75rem;
  font-size: 0.8125rem;
  color: var(--muted);
}

.reporters__form {
  margin-top: 0.75rem;
}

.similar__add {
  margin-left: auto;
}

/* An appointment's "Linked to" panel: the task and request it is about,
   under its contact (10 October 2026). */
.linked__item + .linked__item,
.linkedcontact + .linked__item {
  margin-top: 0.875rem;
}

.linked__item .row__link {
  overflow-wrap: anywhere;
}

.linkedcontact {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.75rem;
  background: var(--surface-2);
  border-radius: var(--r-control);
}

.linkedcontact__name {
  flex: 1;
  min-width: 0;
  font-size: 0.8125rem;
  font-weight: 500;
}

.linkedcontact__sub {
  font-size: 0.75rem;
  color: var(--muted);
}

/* ===================== opportunity pipeline ===================== */

.oppcard {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--faint);
  border-radius: var(--r-control);
  box-shadow: var(--shadow-sm);
  padding: 0.625rem 0.6875rem;
  margin-bottom: 0.5rem;
  cursor: grab;
}

.oppcard--won { border-left-color: var(--ok); }
/* Grey, not red: red means Urgent only (4 October 2026). */
.oppcard--lost { border-left-color: var(--faint); }

.oppcard--dragging {
  opacity: 0.45;
}

/* A button, so the keyboard reaches it (it was a clickable div). */
.oppcard__title {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text);
  text-align: left;
  overflow-wrap: anywhere;
  cursor: pointer;
  margin-bottom: 0.375rem;
}

.oppcard__title:hover {
  color: var(--accent);
}

.oppcard__likely {
  margin-left: 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
}

/* Owner at the left, close date at the right; they wrap on a narrow card. */
.oppcard__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 0.5rem;
  margin-top: 0.375rem;
  font-size: 0.75rem;
  color: var(--muted);
}

.oppcard__owner {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.oppcard__date {
  white-space: nowrap;
}

.column__sum {
  padding: 0 0.25rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.oppcard__value {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--accent-dark);
  margin-bottom: 0.375rem;
}

.oppcard__meta {
  font-size: 0.75rem;
  color: var(--muted);
}

.pipelinetotal {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border-soft);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 2rem;
}

.pipelinetotal__item {
  font-size: 0.8125rem;
  color: var(--muted);
}

.pipelinetotal__value {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text);
  margin-right: 0.375rem;
}

/* ===================== deals ===================== */

/* The last column fixed (Edit and Remove): "auto" was 0px in the heading
   row and the buttons' width in the others, so headings drifted. */
.lineitem {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 4rem 6rem 4.5rem 4.5rem 6.5rem 8.5rem;
  gap: 0.625rem;
  align-items: center;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--border-soft);
}

.lineitem:last-of-type {
  border-bottom: none;
}

.lineitemhead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 4rem 6rem 4.5rem 4.5rem 6.5rem 8.5rem;
  gap: 0.625rem;
  padding: 0.625rem 1.25rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--faint);
  border-bottom: 1px solid var(--border-soft);
}

.lineitem__input {
  width: 100%;
  padding: 0.3125rem 0.5rem;
  font-family: var(--sans);
  font-size: 0.8125rem;
  border: 1px solid var(--border);
  border-radius: 6px;
}

.lineitem__total {
  font-size: 0.8125rem;
  font-weight: 600;
  text-align: right;
}

.revenuebox {
  padding: 1.125rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}

.revenuebox__item {
  text-align: center;
}

.revenuebox__value {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--accent-dark);
}

.revenuebox__label {
  font-size: 0.6875rem;
  color: var(--muted);
  margin-top: 0.125rem;
}

/* Below 900px each item is its name over its figures, every figure with
   its label (data-label), then Edit and Remove. This hid every figure
   after the quantity, the total too, until 9 October 2026. */
@media (max-width: 900px) {
  .lineitemhead {
    display: none;
  }

  .lineitem {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 1rem;
  }

  .lineitem > :first-child {
    flex-basis: 100%;
    font-weight: 600;
  }

  /* Two classes: the plain .lineitem__acts rule comes later in the file. */
  .lineitem .lineitem__acts {
    flex-basis: 100%;
    justify-content: flex-start;
    margin-top: 0.25rem;
  }

  .lineitem [data-label]::before {
    content: attr(data-label) ' ';
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--muted);
  }
}

/* ===================== milestones ===================== */

.milestonerow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--border-soft);
}

.milestonerow:last-of-type {
  border-bottom: none;
}

.milestonerow__name {
  flex: 1;
  min-width: 0;
  font-size: 0.875rem;
  font-weight: 500;
}

.milestonerow__name--done {
  text-decoration: line-through;
  color: var(--muted);
}

/* ===================== subtasks ===================== */

.subtaskrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--border-soft);
}

.subtaskrow:last-of-type {
  border-bottom: none;
}

.subtaskrow__title {
  flex: 1;
  min-width: 0;
  font-size: 0.875rem;
  font-weight: 500;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  color: var(--text);
  font-family: var(--sans);
}

.subtaskrow__title:hover {
  color: var(--accent);
}

.subtaskrow__title--done {
  text-decoration: line-through;
  color: var(--muted);
}

/* Requests and the work that answers them (6 October 2026): the request
   page's "Project and tasks" panel and the project page's "Requests". */
.worklink {
  display: grid;
  gap: 0.5rem;
  padding: 0.875rem 1.125rem;
  border-bottom: 1px solid var(--border-soft);
}

.worklink__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.375rem;
}

.worklink__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 0.625rem;
  min-width: 0;
}

.worklink__name {
  flex: 1 1 12rem;
  min-width: 0;
  overflow-wrap: anywhere;
  text-align: left;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--accent);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

span.worklink__name {
  color: var(--text);
  cursor: default;
}

.worklink__none {
  margin: 0;
  font-size: 0.875rem;
  color: var(--muted);
}

.workadd {
  display: grid;
  gap: 0.5rem;
  padding: 0.875rem 1.125rem;
}

.workdone {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin: 0.875rem 1.125rem 0;
  padding: 0.75rem 0.875rem;
  border-radius: var(--r-control);
  background: var(--ok-soft);
  color: var(--ok);
  font-size: 0.875rem;
}

.workdone p {
  margin: 0;
}

.parentnote {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  font-size: 0.8125rem;
  color: var(--muted);
}

.parentnote__link {
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--accent);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

/* ===================== comment attachments ===================== */

.commentfiles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 0.5rem;
}

/* A comment's file (9 October 2026): thumbnail, then the name over its
   size; opens in the pop-up. Capped so a long name wraps rather than
   widening the comment. */
.commentfile {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  max-width: min(100%, 20rem);
  min-width: 0;
  padding: 0.375rem 0.75rem 0.375rem 0.375rem;
  border: 1px solid var(--border);
  border-radius: var(--r-control);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.commentfile:hover,
.commentfile:focus-visible {
  border-color: var(--accent);
}

.commentfile:disabled {
  cursor: progress;
}

.commentfile__thumb {
  width: 2.75rem;
  height: 2.75rem;
}

.commentfile__text {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.commentfile__name {
  font-size: 0.8125rem;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.commentfile__size {
  font-size: 0.75rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.filechip {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--text-2);
  cursor: pointer;
}

.filechip:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.pendingfile {
  display: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 1rem;
  margin-top: 0.5rem;
  padding: 0.375rem 0.625rem;
  background: var(--accent-soft);
  border-radius: var(--r-control);
  font-size: 0.8125rem;
  color: var(--accent-dark);
}

/* One per chosen file, each with its own Remove (several per comment
   since 22 October 2026). A long name wraps rather than widening the box. */
.pendingfile__item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  overflow-wrap: anywhere;
}

.taskpanelhead__open {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
}

.taskpanelhead__open:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* ===================== mention notifications ===================== */

.bellwrap {
  position: relative;
}

.bellbtn {
  position: relative;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-control);
  cursor: pointer;
  color: var(--text-2);
}

.bellbtn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.bellbtn svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bellbadge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--warn);
  /* The surface colour: white in light, as it was; in dark --warn is a
     yellow and white on it measured 1.4:1. */
  color: var(--surface);
  font-size: 0.625rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.bellmenu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 40;
  width: 22rem;
  max-height: 26rem;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-pop);
}

.bellmenu__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border-soft);
}

.bellmenu__title {
  font-size: 0.875rem;
  font-weight: 700;
}

.mentionrow {
  display: flex;
  gap: 0.625rem;
  align-items: flex-start;
  width: 100%;
  padding: 0.75rem 1rem;
  border: none;
  border-bottom: 1px solid var(--border-soft);
  background: var(--surface);
  text-align: left;
  cursor: pointer;
  font-family: var(--sans);
}

.mentionrow:last-child {
  border-bottom: none;
}

.mentionrow:hover {
  background: var(--surface-2);
}

.mentionrow--unread {
  background: var(--accent-soft);
}

.mentionrow--unread:hover {
  background: var(--accent-soft);
  filter: brightness(0.97);
}

.mentionrow__body {
  flex: 1;
  min-width: 0;
}

.mentionrow__text {
  font-size: 0.8125rem;
  color: var(--text);
  line-height: 1.45;
}

.mentionrow__text b {
  font-weight: 600;
}

.mentionrow__snippet {
  font-size: 0.8125rem;
  color: var(--muted);
  margin-top: 0.1875rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mentionrow__when {
  font-size: 0.6875rem;
  color: var(--faint);
  margin-top: 0.25rem;
}

/* Both menus hang off the right edge of the button that opened them, which is
   right for a button on the right of a wide screen. On a phone the bell sits
   near the left edge, so a 22rem menu anchored to its right edge started at
   -300px: 300 of its 352 pixels were off the screen and all you could see was
   the tail of "Mark all read".

   Anchoring to the trigger cannot work at this width whichever side it uses,
   so on a phone they stop being drop-downs and become sheets pinned to the
   bottom of the screen: always fully visible, whatever opened them, and
   within reach of a thumb. Above the chat button, which would otherwise
   cover the last row. */
@media (max-width: 860px) {
  .bellmenu,
  .createmenu {
    position: fixed;
    inset: auto 0.75rem 0.75rem;
    width: auto;
    min-width: 0;
    max-height: 70vh;
    overflow-y: auto;
    z-index: 120;
  }
}

/* ===================== context-aware create split button ===================== */

.createsplit {
  display: flex;
  position: relative;
}

.createsplit__main {
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 600;
  color: #ffffff;
  background: var(--accent-solid);
  border: none;
  border-radius: var(--r-pill) 0 0 var(--r-pill);
  padding: 0.5rem 0.9375rem;
  cursor: pointer;
  white-space: nowrap;
}

.createsplit__main:hover {
  background: var(--accent-solid-hover);
}

.createsplit__caret {
  font-family: var(--sans);
  color: #ffffff;
  background: var(--accent-solid);
  border: none;
  border-left: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 0 var(--r-pill) var(--r-pill) 0;
  padding: 0.5rem 0.625rem;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.createsplit__caret:hover {
  background: var(--accent-solid-hover);
}

.createsplit__caret svg {
  width: 12px;
  height: 12px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ===================== unlinked contact suggestion ===================== */

.suggestbox {
  border: 1px dashed var(--border-dashed);
  border-radius: 10px;
  background: var(--surface-2);
  padding: 0.875rem;
}

.suggestbox__label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.625rem;
}

.suggestbox__text {
  font-size: 0.8125rem;
  color: var(--muted);
  margin: 0 0 0.625rem;
}

.suggestbox__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

/* ===================== custom field definitions ===================== */

.cfrow {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--border-soft);
}

.cfrow:last-of-type {
  border-bottom: none;
}

.cfrow__main {
  flex: 1;
  min-width: 0;
}

.cfrow__label {
  font-size: 0.875rem;
  font-weight: 600;
}

.cfrow__meta {
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 0.125rem;
}

.nameline {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* ===================== chat ===================== */

.chatwrap {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

@media (max-width: 900px) {
  /* A 1fr track has a minimum of auto, so it grows to the widest thing in
     it. The conversation list needs about 466px before it will truncate, and
     that is what the whole Chat page was being sized to on a phone. */
  .chatwrap {
    grid-template-columns: minmax(0, 1fr);
  }
}

.chanlist {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.chanlist__group {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0.875rem 0.875rem 0.375rem;
}

.chanitem {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 0.875rem;
  border: none;
  background: transparent;
  font-family: var(--sans);
  font-size: 0.8125rem;
  color: var(--text-2);
  text-align: left;
  cursor: pointer;
}

.chanitem:hover {
  background: var(--surface-2);
}

.chanitem--active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}

.chanitem__hash {
  color: var(--faint);
  font-weight: 600;
}

.chanitem--active .chanitem__hash {
  color: var(--accent);
}

.chanitem__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chatpane {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  /* The height of the screen below the page header, rather than a fixed
     32rem: at 1280x800 the conversation showed about five messages above
     157px of empty page (4 October 2026). Never shorter than it was. */
  height: max(32rem, calc(100vh - 12.5rem));
  height: max(32rem, calc(100dvh - 12.5rem));
}

/* On a phone the pane sits under the conversation list and is scrolled to
   when a conversation is chosen; it fits the screen above the bottom
   navigation bar (4rem), so the message box is not hidden behind it. */
@media (max-width: 900px) {
  .chatpane,
  .threadpane {
    height: max(24rem, calc(100vh - 6rem - env(safe-area-inset-bottom)));
    height: max(24rem, calc(100dvh - 6rem - env(safe-area-inset-bottom)));
  }
}

.chathead {
  padding: 0.875rem 1.125rem;
  border-bottom: 1px solid var(--border-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.chathead__name {
  font-size: 0.9375rem;
  font-weight: 700;
}

.chathead__sub {
  font-size: 0.75rem;
  color: var(--muted);
}

.chatlog {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1.125rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.msg {
  display: flex;
  gap: 0.625rem;
  align-items: flex-start;
}

.msg__body {
  flex: 1;
  min-width: 0;
}

.msg__head {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.msg__author {
  font-size: 0.8125rem;
  font-weight: 600;
}

.msg__when {
  font-size: 0.6875rem;
  color: var(--faint);
}

.msg__text {
  font-size: 0.875rem;
  color: var(--text-2);
  white-space: pre-wrap;
  word-break: break-word;
  margin-top: 0.0625rem;
}

.chatcompose {
  border-top: 1px solid var(--border-soft);
  padding: 0.75rem 1.125rem;
  display: flex;
  gap: 0.5rem;
  align-items: flex-end;
}

.chatcompose textarea {
  flex: 1;
  min-height: 2.5rem;
  max-height: 8rem;
  resize: vertical;
}

.livedot {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--muted);
}

.livedot::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--faint);
}

.livedot--on::before {
  background: #10b981;
}

/* ===================== chat: threads, reactions, unread ===================== */

.msg {
  position: relative;
}

.msg:hover {
  background: var(--surface-2);
  border-radius: 8px;
}

.msg__actions {
  display: none;
  gap: 0.25rem;
  position: absolute;
  top: -0.375rem;
  right: 0.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.125rem 0.25rem;
  box-shadow: var(--shadow-sm);
}

.msg:hover .msg__actions {
  display: flex;
}

.msgact {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 0.875rem;
  line-height: 1;
  padding: 0.1875rem 0.25rem;
  border-radius: 6px;
  font-family: var(--sans);
}

.msgact:hover {
  background: var(--surface-2);
}

.msgact--text {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--muted);
}

.reacts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.3125rem;
}

.react {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 999px;
  padding: 0.0625rem 0.4375rem;
  font-size: 0.75rem;
  cursor: pointer;
  font-family: var(--sans);
}

.react--mine {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-dark);
}

.react__n {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.threadline {
  margin-top: 0.3125rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--sans);
}

.threadline:hover {
  text-decoration: underline;
}

.threadpane {
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  /* The same height as the conversation beside it (.chatpane). */
  height: max(32rem, calc(100vh - 12.5rem));
  height: max(32rem, calc(100dvh - 12.5rem));
  background: var(--surface);
}

.chatwrap--thread {
  grid-template-columns: 13rem minmax(0, 1fr) 20rem;
}

@media (max-width: 1200px) {
  .chatwrap--thread {
    grid-template-columns: 15rem minmax(0, 1fr);
  }
  .threadpane {
    display: none;
  }
}

/* A phone shows the list or the conversation, never both stacked
   (23 October 2026). The wide layout ignores both classes. */
.chathead__back {
  display: none;
}
@media (max-width: 900px) {
  .chatwrap--showlist > :nth-child(2),
  .chatwrap--showconvo > .chanlist {
    display: none;
  }
  .chathead__back {
    display: inline-flex;
    align-items: center;
    min-height: 2.25rem;
    margin: -0.25rem 0 0.25rem -0.375rem;
    padding: 0.25rem 0.375rem;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--accent);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
  }
  .chathead__left {
    min-width: 0;
  }
}

/* This comes after the rule above on purpose: both selectors weigh the same,
   so without it the threaded view kept a 15rem sidebar on a phone, leaving
   about 130px for the conversation itself. */
@media (max-width: 900px) {
  .chatwrap--thread {
    grid-template-columns: minmax(0, 1fr);
  }
}

.unreadpill {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--accent-solid);
  color: #fff;
  font-size: 0.625rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.newline {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.25rem 0;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--danger);
}

.newline::before,
.newline::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--danger-soft);
}

/* ===================== chat: refined message list ===================== */

.chatlog {
  gap: 0;
  padding: 0.75rem 0.5rem;
}

.msg {
  padding: 0.3125rem 0.625rem;
  gap: 0.625rem;
  border-radius: 8px;
}

/* Consecutive messages from the same person lose the repeated avatar and
   name, so a back-and-forth reads as a conversation rather than a form. */
.msg--grouped {
  margin-top: 0;
}

.msg--grouped .msg__head {
  display: none;
}

.msg__gutter {
  width: 28px;
  flex: 0 0 28px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.msg__stamp {
  font-size: 0.6875rem;
  color: transparent;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  user-select: none;
}

.msg:hover .msg__stamp {
  color: var(--faint);
}

.msg + .msg:not(.msg--grouped) {
  margin-top: 0.625rem;
}

.daysep {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin: 0.875rem 0.25rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--faint);
}

.daysep::before,
.daysep::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-soft);
}

.mentionchip {
  background: var(--accent-soft);
  color: var(--accent-dark);
  border-radius: 4px;
  padding: 0 0.1875rem;
  font-weight: 600;
}

.msg--tagged {
  background: var(--warn-softer);
  border-left: 3px solid var(--warn);
  border-radius: 0 8px 8px 0;
}

.msgfiles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 0.375rem;
}

/* Photos in chat (6 October 2026). A fixed frame from the start, so the
   log does not grow as each picture loads and push the newest message out
   of view; the picture is cropped to fill it and opens whole when tapped.
   The strip takes its own line above any file chips. */
.msgphotos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  flex-basis: 100%;
  min-width: 0;
}

.msgphoto {
  width: 13.75rem;
  max-width: 100%;
  aspect-ratio: 4 / 3;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-control);
  background: var(--track);
  cursor: zoom-in;
}

/* The photo viewer: over everything, chat windows included (200). */
.photoview {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(1rem, env(safe-area-inset-top, 0px)) 1rem max(1rem, env(safe-area-inset-bottom, 0px));
  background: rgba(10, 10, 20, 0.86);
}

.photoview__frame {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  max-width: min(100%, 72rem);
  max-height: 100%;
  min-width: 0;
}

.photoview__img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 6rem);
  max-height: calc(100dvh - 6rem);
  object-fit: contain;
  border-radius: var(--r-control);
  background: var(--surface);
}

.photoview__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  color: #ffffff;
  font-size: 0.875rem;
}

.photoview__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

.photoview__link {
  color: #ffffff;
  text-decoration: underline;
}

.photoview__close {
  min-height: 44px;
  padding: 0 1.125rem;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--r-control);
  background: transparent;
  color: #ffffff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.photoview__close:hover,
.photoview__close:focus-visible {
  background: rgba(255, 255, 255, 0.14);
}

/* Several photos sit two to a row where 220px each will not fit (a phone,
   a chat window), rather than one tall column. */
.msgphotos:has(> .msgphoto + .msgphoto) > .msgphoto {
  width: min(13.75rem, calc(50% - 0.1875rem));
}

.msgphoto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.msgphoto:hover {
  border-color: var(--accent);
}

/* ---- composer ---- */

.chatcompose {
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
}

.chatcompose__row {
  display: flex;
  gap: 0.5rem;
  align-items: flex-end;
}

.chatcompose__tools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  align-items: center;
}

.mentionpick {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.mentionbtn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 999px;
  padding: 0.125rem 0.5rem 0.125rem 0.125rem;
  font-size: 0.75rem;
  font-family: var(--sans);
  cursor: pointer;
}

.mentionbtn .avatar {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  font-size: 0.5rem;
}

.mentionbtn--on {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-weight: 600;
}

/* ===================== docked chat ===================== */

/* ===================== @ mention autocomplete ===================== */

.chatcompose__row {
  position: relative;
}

.atmenu {
  position: absolute;
  left: 0;
  bottom: calc(100% + 6px);
  z-index: 60;
  width: 16rem;
  max-height: 13rem;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-pop);
  padding: 0.25rem;
}

.atitem {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.375rem 0.5rem;
  border: none;
  background: transparent;
  border-radius: var(--r-control);
  font-family: var(--sans);
  font-size: 0.8125rem;
  text-align: left;
  cursor: pointer;
  color: var(--text);
}

.atitem--active,
.atitem:hover {
  background: var(--accent-soft);
  color: var(--accent-dark);
}

.atitem__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.atitem .avatar {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  font-size: 0.5625rem;
}

.atempty {
  padding: 0.5rem;
  font-size: 0.75rem;
  color: var(--muted);
}

/* ===================== message record links ===================== */

.msglinks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 0.4375rem;
}

.recchip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--r-control);
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  font-family: var(--sans);
  cursor: pointer;
  color: var(--text-2);
  max-width: 18rem;
}

.recchip:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.recchip__kind {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--faint);
}

.recchip:hover .recchip__kind {
  color: var(--accent);
}

.recchip__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* share-to-chat dialog */

.sharebox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(16, 24, 40, 0.4);
}

.sharecard {
  width: min(26rem, 100%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-pop);
  padding: 1.25rem;
}

.sharecard h3 {
  margin: 0 0 0.25rem;
  font-size: 1rem;
  font-weight: 700;
}

/* ===================== overview stat cards (refined) ===================== */

/* Icons no longer carry a per-card colour set from JS. One calm accent
   tint for every card, so amber genuinely means "look at this" rather
   than competing with three other hues. */
.statcard__icon {
  background: var(--accent-soft);
  color: var(--accent);
  margin-bottom: 0.875rem;
}

.statcard__icon svg {
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.statcard {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.statcard:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}

.statcard--warn {
  border-color: var(--warn-line);
  background: var(--warn-softer);
}

.statcard--warn .statcard__icon {
  background: var(--warn-soft);
  color: var(--warn);
}

.statcard__note {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
  margin-top: 0.375rem;
}

.statcard--warn .statcard__note {
  color: var(--warn);
}

/* Grid items already stretch to the tallest in the row, so cards with and
   without a note line up without extra work. */

/* The comment textarea needs a positioned parent so the @ menu can anchor
   to it, matching how the chat composer is arranged. */
.composer__boxwrap {
  position: relative;
}

.composer__boxwrap textarea {
  width: 100%;
}

/* ===================== reports ===================== */

.reportbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-end;
  padding: 1.125rem 1.25rem;
  border-bottom: 1px solid var(--border-soft);
}

.reportbar .field {
  margin-bottom: 0;
}

.reportbar__spacer {
  flex: 1;
}

.bigfigs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  border-bottom: 1px solid var(--border-soft);
}

.bigfig {
  padding: 1.125rem 1.25rem;
  border-right: 1px solid var(--border-soft);
}

.bigfig:last-child {
  border-right: none;
}

.bigfig__value {
  font-size: 1.625rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.bigfig__label {
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 0.375rem;
}

.bigfig--warn .bigfig__value {
  color: var(--warn);
}

.breakdown {
  padding: 0.5rem 1.25rem 1.25rem;
}

.breakrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 3.5rem 1fr;
  gap: 0.75rem;
  align-items: center;
  padding: 0.5rem 0;
}

.breakrow__label {
  font-size: 0.8125rem;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.breakrow__count {
  font-size: 0.8125rem;
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.breakrow__bar {
  height: 8px;
  border-radius: 999px;
  background: var(--border-soft);
  overflow: hidden;
}

.breakrow__fill {
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
}

/* ===================== dense record detail grid ===================== */

/* Two columns of label/value pairs, labels right-aligned against their
   values. Fits far more on screen than the tile layout, which is what a
   contact record needs: it is reference material, scanned not read. */
.detailgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 2.5rem;
  padding: 1.125rem 1.25rem;
}

.detailrow {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: baseline;
  padding: 0.4375rem 0;
  border-bottom: 1px solid var(--border-soft);
}

.detailrow__label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
  text-align: right;
}

.detailrow__value {
  font-size: 0.8125rem;
  color: var(--text);
  min-width: 0;
  overflow-wrap: anywhere;
}

.detailrow__value a,
.detailrow__value .linkbutton {
  color: var(--accent);
}

.detailrow__value--muted {
  color: var(--faint);
}

@media (max-width: 900px) {
  .detailgrid {
    grid-template-columns: 1fr;
    column-gap: 0;
  }
}

/* ---- related lists ---- */

.relhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.875rem 1.25rem;
  border-bottom: 1px solid var(--border-soft);
}

.relhead__title {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 700;
}

.relhead__count {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
}

.relrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.625rem 1.25rem;
  border-bottom: 1px solid var(--border-soft);
}

.relrow:last-child {
  border-bottom: none;
}

.relrow:hover {
  background: var(--surface-2);
}

/* A destructive action should not look like an ordinary one. */
.button--danger {
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 600;
  color: #ffffff;
  background: #b91c1c;
  border: none;
  border-radius: var(--r-pill);
  padding: 0.5rem 0.9375rem;
  cursor: pointer;
  margin-top: 0.75rem;
}

.button--danger:hover:not(:disabled) {
  background: #991b1b;
}

.button--danger:disabled {
  opacity: 0.6;
  cursor: default;
}

/* Member rows in the platform console need a name plus a secondary line
   for role and department. */
.teamrow__main {
  flex: 1;
  min-width: 0;
}

.teamrow__meta {
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 0.0625rem;
}

/* ===================== people by department ===================== */

.deptblock {
  margin-bottom: 1rem;
}

.deptblock__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.875rem 1.25rem;
  border-bottom: 1px solid var(--border-soft);
}

.deptblock__name {
  font-size: 0.9375rem;
  font-weight: 700;
  margin: 0;
}

/* Sign (23 October 2026): the lists' rows.
   Progress, who it waits on, reminders and actions (23 October 2026). */
.signprog {
  height: 0.375rem;
  max-width: 16rem;
  margin: 0.375rem 0 0.25rem;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
}
.signprog__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent-solid);
}
.signprog__fill--done {
  background: var(--ok);
}
.signqueue__detail {
  display: grid;
  gap: 0.125rem;
}
.signqueue__acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.signqueue__note {
  font-size: 0.8125rem;
  color: var(--muted);
}
/* A sent request's summary: "1 of 2" over its bar. */
.signsummary {
  display: grid;
  gap: 0.125rem;
  min-width: 7rem;
}
.signsummary .signprog {
  margin: 0.25rem 0 0;
}
/* The title, then the document it is linked to, which opens it. */
.signrow__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 0.625rem;
}
.signrow__doc {
  border: 0;
  border-radius: 0.375rem;
  padding: 0.125rem 0.5rem;
  background: var(--surface-2);
  color: var(--text-2);
  font: 500 0.75rem var(--sans);
  cursor: pointer;
}
.signrow__doc:hover {
  background: var(--accent-soft);
  color: var(--accent-dark);
}
.signhome__bar {
  display: flex;
  justify-content: flex-end;
  padding: 0.5rem 1.25rem 0;
}
.signvoided {
  margin: 0.5rem 1.25rem 1rem;
}
.signvoided > summary {
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-2);
}
/* A signing request's four steps: Document, People, Place fields, Review
   and send (the approved mock-up). */
.signsteps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin: 0 0 1rem;
}
.form > .signsteps {
  margin-bottom: 1.25rem;
}
.signstep {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.25rem;
  padding: 0.25rem 0.75rem 0.25rem 0.3125rem;
  border: 0;
  border-radius: var(--r-pill);
  background: none;
  color: var(--muted);
  font: 500 0.8125rem var(--sans);
}
button.signstep {
  cursor: pointer;
}
button.signstep:hover {
  background: var(--surface-2);
  color: var(--text);
}
.signstep--on,
button.signstep--on:hover {
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-weight: 600;
}
.signstep__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  background: var(--border);
  color: var(--text-2);
  font-size: 0.75rem;
  font-weight: 700;
}
.signstep--on .signstep__n {
  background: var(--accent-solid);
  color: #fff;
}
.signstep--done .signstep__n {
  background: var(--ok);
  color: var(--surface);
}

/* The Departments page as a directory (Codex review step 3). */
.deptbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.25rem;
}
.deptfind {
  flex: 1 1 16rem;
  min-width: 0;
}
.deptfind .filters__search {
  width: 100%;
}
.depttools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.deptform {
  margin: 0.75rem 1.25rem 0;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--r-control);
  background: var(--surface-2, var(--surface));
}
.deptform__title {
  margin: 0 0 0.5rem;
  font-size: 0.9375rem;
}
.deptcounts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  margin: 0.75rem 1.25rem 1rem;
  font-size: 0.8125rem;
  color: var(--muted);
}
.deptblock__title {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  min-width: 0;
  flex-wrap: wrap;
}
.deptblock__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.deptblock__edit {
  flex: 1 1 auto;
}
.deptblock--none {
  border-color: var(--warn);
}

.deptblock__count {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
}

.peoplegrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.75rem;
  padding: 1rem 1.25rem;
}

.personcard {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-control);
  cursor: pointer;
  font-family: var(--sans);
  text-align: left;
  min-width: 0;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.personcard:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
}

.personcard__body {
  flex: 1;
  min-width: 0;
}

.personcard__name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.personcard__meta {
  font-size: 0.75rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 0.0625rem;
}

/* Delete sits with the other message actions but should not read as an
   equal peer to Reply. */
.msgact--danger {
  color: var(--danger);
}

.msgact--danger:hover {
  background: var(--danger-soft);
}

/* ===================== group channel creation ===================== */

.groupdlg__people {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  max-height: 14rem;
  overflow-y: auto;
  padding: 0.125rem;
}

.grouppick {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 999px;
  padding: 0.1875rem 0.625rem 0.1875rem 0.1875rem;
  font-size: 0.8125rem;
  font-family: var(--sans);
  cursor: pointer;
  color: var(--text-2);
}

.grouppick .avatar {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  font-size: 0.5625rem;
}

.grouppick--on {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-weight: 600;
}

.grouppick__dept {
  font-size: 0.6875rem;
  color: var(--faint);
}

.grouppick--on .grouppick__dept {
  color: var(--accent);
}

/* ===================== chat launcher ===================== */

/* Sits where the panel opens, so the button and the thing it opens are
   obviously the same object. */
.chatfab {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 110;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  background: var(--accent-solid);
  color: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 28px rgba(79, 70, 229, 0.42);
  transition: transform 0.14s ease, box-shadow 0.14s ease, background 0.14s ease;
}

.chatfab:hover {
  background: var(--accent-solid-hover);
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(79, 70, 229, 0.5);
}

.chatfab:active {
  transform: translateY(0);
}

.chatfab svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chatfab__badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: #dc2626;
  color: #ffffff;
  font-size: 0.6875rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border: 2px solid var(--surface);
}

@media (max-width: 600px) {
  .chatfab {
    right: 0.75rem;
    bottom: 0.75rem;
  }
}

/* ===================== comment editing and history ===================== */

.comment__edited {
  border: none;
  background: none;
  padding: 0;
  font-family: var(--sans);
  font-size: 0.6875rem;
  color: var(--faint);
  cursor: pointer;
  text-decoration: underline dotted;
  text-underline-offset: 2px;
}

.comment__edited:hover {
  color: var(--accent);
}

.commentedit {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.375rem;
}

.commentedit__actions {
  display: flex;
  gap: 0.5rem;
}

.revisions {
  margin-top: 0.5rem;
  border-left: 2px solid var(--border);
  padding-left: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.revision__meta {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--faint);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.revision__body {
  font-size: 0.8125rem;
  color: var(--muted);
  white-space: pre-wrap;
  margin-top: 0.125rem;
}

/* Activity rows that lead to a record. Rows without a destination stay
   plain, so nothing looks clickable unless it is. */
/* Width less the card's side margins (1.25rem each): a button does not
   stretch to its container, and 100% plus the margins ran 40px past
   the panel's edge, cutting off "3h ago" (9 October 2026). */
.event--open {
  width: calc(100% - 2.5rem);
  text-align: left;
  font-family: var(--sans);
  border: none;
  cursor: pointer;
  transition: background 0.12s ease;
}

.event--open:hover {
  background: var(--surface-2);
}

/* ===================== assignment picker ===================== */

.assignpick {
  padding: 1.125rem;
}

.assignpick__current {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem;
  border-radius: var(--r-control);
  background: var(--accent-soft);
}

.assignpick__current--empty {
  background: var(--surface-2);
  border: 1px dashed var(--border);
}

.assignpick__body {
  flex: 1;
  min-width: 0;
}

.assignpick__label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}

.assignpick__current--empty .assignpick__label {
  color: var(--muted);
}

.assignpick__name {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.assignpick__quick {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 0.625rem;
}

.assignpick__search {
  margin-top: 0.625rem;
}

.assignpick__list {
  margin-top: 0.5rem;
  max-height: 15rem;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-control);
}

.assignoption {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 0.625rem;
  border: none;
  border-bottom: 1px solid var(--border-soft);
  background: var(--surface);
  font-family: var(--sans);
  text-align: left;
  cursor: pointer;
}

.assignoption:last-child {
  border-bottom: none;
}

.assignoption:hover {
  background: var(--accent-soft);
}

.assignoption--current {
  background: var(--accent-soft);
}

.assignoption__body {
  flex: 1;
  min-width: 0;
}

.assignoption__name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.assignoption__dept {
  font-size: 0.6875rem;
  color: var(--muted);
}

.assignoption__tick {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--accent);
}

/* "Add as a new client" in the contact picker: an action, not a result. */
.pickresult--create {
  color: var(--accent);
  font-weight: 600;
  border-top: 1px solid var(--border);
}

.pickresult--create:hover {
  background: var(--accent-soft);
}

/* ===================== module department scoping ===================== */

.modscope {
  padding: 1.125rem 1.25rem;
}

.modscope__row {
  display: grid;
  grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
  padding: 0.625rem 0;
  border-bottom: 1px solid var(--border-soft);
}

.modscope__row:last-child {
  border-bottom: none;
}

.modscope__name {
  font-size: 0.8125rem;
  font-weight: 600;
  padding-top: 0.25rem;
}

.modscope__depts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.deptchip {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 999px;
  padding: 0.25rem 0.625rem;
  font-family: var(--sans);
  font-size: 0.75rem;
  color: var(--text-2);
  cursor: pointer;
}

.deptchip--on {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-weight: 600;
}

.modscope__all {
  font-size: 0.75rem;
  color: var(--faint);
  padding-top: 0.3125rem;
}

/* A wider modal for forms, where 26rem is too cramped for paired fields. */
.sharecard--form {
  width: min(34rem, 100%);
  max-height: 88vh;
  overflow-y: auto;
  padding: 1.375rem;
}

.sharecard--form .field {
  margin-bottom: 0.75rem;
}

/* ===================== contacts list ===================== */

.listbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  align-items: center;
  padding: 0.875rem 1.25rem;
  border-bottom: 1px solid var(--border-soft);
}

.listbar__search {
  flex: 1;
  min-width: 12rem;
  max-width: 22rem;
}

.listbar__count {
  font-size: 0.75rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* Whole row is the target, not just the name. */
.contactrow {
  display: grid;
  grid-template-columns: auto minmax(0, 1.4fr) minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
  width: 100%;
  padding: 0.625rem 1.25rem;
  border: none;
  border-bottom: 1px solid var(--border-soft);
  background: transparent;
  font-family: var(--sans);
  text-align: left;
  cursor: pointer;
}

.contactrow:last-child {
  border-bottom: none;
}

.contactrow:hover {
  background: var(--surface-2);
}

.contactrow__main {
  min-width: 0;
}

.contactrow__name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contactrow__sub {
  font-size: 0.75rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 0.0625rem;
}

.contactrow__reach {
  min-width: 0;
  font-size: 0.75rem;
  color: var(--muted);
}

.contactrow__reach div {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contactrow__tail {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .contactrow {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
  .contactrow__reach {
    display: none;
  }
}

/* Address sits under the name, quieter than the job title above it. */
.contactrow__addr {
  font-size: 0.75rem;
  color: var(--faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 0.0625rem;
}

/* ===================== chat windows ===================== */

/* The rail sits to the left of the launcher and grows leftwards.
   row-reverse means the first child renders rightmost, so a window
   opens nearest the button that opened it. */
.dockrail {
  position: fixed;
  right: 5rem;
  bottom: 1rem;
  z-index: 105;
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-end;
  gap: 0.75rem;
  pointer-events: none;
}

.dockrail > * {
  pointer-events: auto;
}

.chatwin {
  width: 19rem;
  height: 26rem;
  max-height: calc(100vh - 6rem);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card) var(--r-card) 0 0;
  box-shadow: var(--shadow-pop);
  overflow: hidden;
}

/* Minimised collapses to the header bar alone, the way a chat window
   should: still visible, still one click from the conversation. */
.chatwin--min {
  height: auto;
}

.chatwin--min .chatwin__log,
.chatwin--min .chatwin__compose {
  display: none;
}

.chatwin__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.625rem;
  background: var(--accent-solid);
  color: #ffffff;
  cursor: pointer;
  flex: 0 0 auto;
}

.chatwin__titlewrap {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  min-width: 0;
  flex: 1;
}

.chatwin__titlewrap .avatar {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  font-size: 0.5625rem;
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.chatwin__title {
  font-size: 0.8125rem;
  font-weight: 700;
  color: #ffffff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chatwin__acts {
  display: flex;
  align-items: center;
  gap: 0.125rem;
  flex: 0 0 auto;
}

.chatwin__btn {
  border: none;
  background: none;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.75rem;
  line-height: 1;
  /* At least 28px square on a laptop: they were 17 to 21px wide, under the
     24px minimum for a target, five in a row. Phones get 36px below. */
  min-width: 28px;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.3125rem;
  border-radius: 4px;
  cursor: pointer;
  font-family: var(--sans);
}

.chatwin__btn:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

.chatwin__log {
  flex: 1;
  overflow-y: auto;
  padding: 0.625rem;
  background: var(--surface-2);
  min-height: 0;
}

.chatwin__log .msg {
  padding: 0.3125rem 0;
}

.chatwin__log .msg__text {
  font-size: 0.8125rem;
}

.chatwin__compose {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  gap: 0.375rem;
  padding: 0.5rem;
  border-top: 1px solid var(--border-soft);
  background: var(--surface);
}

.chatwin__compose textarea {
  flex: 1;
  min-height: 2.25rem;
  max-height: 6rem;
  font-size: 0.8125rem;
  padding: 0.4375rem 0.5rem;
}

/* ---- conversation list ---- */

.chatlist {
  position: fixed;
  right: 1rem;
  bottom: 4.75rem;
  z-index: 108;
  width: 17rem;
  max-height: min(26rem, calc(100vh - 7rem));
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
}

.chatlist__head {
  padding: 0.75rem 0.875rem;
  font-size: 0.875rem;
  font-weight: 700;
  border-bottom: 1px solid var(--border-soft);
  flex: 0 0 auto;
}

.chatlist__body {
  overflow-y: auto;
  min-height: 0;
}

.chatlist__row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 0.875rem;
  border: none;
  background: transparent;
  font-family: var(--sans);
  text-align: left;
  cursor: pointer;
}

.chatlist__row:hover {
  background: var(--accent-soft);
}

.chatlist__main {
  min-width: 0;
  flex: 1;
}

.chatlist__name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chatlist__kind {
  font-size: 0.6875rem;
  color: var(--muted);
}

.chatlist__sep {
  padding: 0.5rem 0.875rem 0.25rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
  border-top: 1px solid var(--border-soft);
  margin-top: 0.25rem;
}

/* On a phone one window fills the width rather than being a slab
   hanging off the right edge. */
@media (max-width: 600px) {
  /* On a wide screen the dock is held 5rem clear of the chat button. Here it
     spans the full width, so it runs underneath that button — and the button
     sat above it (110 against 105), covering the bottom-right corner of the
     window, which is exactly where Send is. The message could be typed and
     then not sent. With the window in front, the button it would have covered
     is behind it, and reappears the moment the window is minimised. */
  .dockrail {
    right: 0.5rem;
    left: 0.5rem;
    bottom: 0.5rem;
    z-index: 115;
  }

  .chatwin {
    width: 100%;
    /* 22rem left about six messages visible above the keyboard. */
    height: min(70vh, 32rem);
  }

  .chatlist {
    right: 0.5rem;
    left: 0.5rem;
    width: auto;
  }
}

/* A hook, not a style: the minimise arrow is found by this class so its
   glyph can be flipped without re-rendering the window header. */
.chatwin__min {
  /* intentionally no declarations */
}

/* ---- conversation list rows ---- */

.chatlist__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  min-width: 0;
}

.chatlist__when {
  font-size: 0.6875rem;
  color: var(--faint);
  flex: 0 0 auto;
}

.chatlist__preview {
  font-size: 0.6875rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 0.0625rem;
}

/* An unread conversation carries the weight, so the eye lands on it
   before it lands on the badge. */
.chatlist__row--unread .chatlist__name {
  font-weight: 700;
}

.chatlist__row--unread .chatlist__preview {
  color: var(--text-2);
  font-weight: 600;
}

.chatlist__badge {
  flex: 0 0 auto;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #dc2626;
  color: #ffffff;
  font-size: 0.625rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* ---- message editing ---------------------------------------------- */

.msg__edited {
  display: inline-block;
  margin-left: 0.4rem;
  font-size: 0.75rem;
  color: var(--muted);
  cursor: default;
}

.msgedit {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0.15rem 0 0.25rem;
}

.msgedit__box {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  padding: 0.45rem 0.55rem;
  font: inherit;
  line-height: 1.45;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
}

.msgedit__box:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.msgedit__acts {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.msgedit__note {
  font-size: 0.75rem;
  color: var(--muted);
}

/* Shown while a pane is loading its replacement content. The outgoing
   record stays visible and dims, rather than the pane going empty and
   flashing white for the length of a round trip. Pointer events are off
   so a button belonging to the outgoing record cannot be clicked. */
.is-loading {
  opacity: 0.45;
  pointer-events: none;
  transition: opacity 120ms ease-out;
}

/* ---- request categories and service standards ---------------------- */

/* Category, department, picked up by, first-reply target, resolve target,
   public form, actions. */
.row--cat {
  /* Shared out rather than fixed. Five fixed columns (42rem) left the
     category's own name 35px at 1280, inside Settings' narrower page, so
     "Roads and potholes" was cut to "Ro…". The name now has a floor and the
     largest share. The last column is fixed too: each row is its own
     grid, and "auto" made it 0px in the heading row (no buttons) and 107px
     in the others, so every heading sat over the wrong column. The two
     targets are 7rem: at 5rem "4 working hours" (100px) ran into the
     next column (seen 9 October 2026; working-time units are longer
     than "48 hours"). */
  grid-template-columns:
    minmax(9rem, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) 7rem 7rem 8rem 7.5rem;
}

/* The public form column: the default button, with a note under it when
   people can also pick the category on the form themselves. */
.catpub {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.125rem;
  min-width: 0;
}

.catpub__note {
  font-size: 0.75rem;
  color: var(--muted);
}

/* A retired category still labels the requests filed under it, so it stays
   listed but reads as out of use. */
.row--muted {
  opacity: 0.55;
}

.row__acts {
  display: flex;
  gap: 0.375rem;
  justify-content: flex-end;
}

/* A missed service standard. Uses the same token as an overdue pill so
   lateness looks the same wherever it appears. */
.fact__value--flag {
  color: var(--warn);
}

/* Repeat controls on the appointment form. Indented and ruled so it reads
   as settings belonging to the tick box above, not as more of the form. */
.repeatbox {
  margin: 0.25rem 0 0.75rem 1.75rem;
  padding-left: 0.875rem;
  border-left: 2px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

@media (max-width: 640px) {
  .repeatbox {
    margin-left: 0.75rem;
  }
}

/* ---- project schedule ---------------------------------------------- */

.pschedule {
  padding: 1.125rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* The window the markers are placed in: project start, deadline, and the
   last dated thing, which may fall past the deadline. */
/* Name, track, date. The schedule reuses the timeline's row, which has
   two columns, and adds the date as a third item, so every date wrapped
   onto a line of its own under the name (4 October 2026). */
.pschedule .tlrow {
  grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) auto;
}

@media (max-width: 620px) {
  .pschedule .tlrow {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .pschedule .tltrack {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

.pschedule__span {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.75rem;
  color: var(--muted);
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--border-soft);
}

.tlname--plain {
  cursor: default;
  font-weight: 600;
}

.tlname--plain:hover {
  color: inherit;
}

/* A dated checkpoint is a moment, so it is a marker rather than a bar of
   invented length. Centred on its own position. */
.pmark {
  position: absolute;
  top: 5px;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  border-radius: 50%;
  background: var(--accent);
}

.pmark--milestone {
  border-radius: 2px;
  transform: rotate(45deg);
}

.pmark--done { background: var(--ok); }
.pmark--late { background: var(--warn); }

.row__when--flag {
  color: var(--warn);
}

/* ---- project budget ------------------------------------------------ */

.budgethead {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2.5rem;
  padding: 1.125rem 1.125rem 0.75rem;
}

.budgetbar {
  height: 8px;
  margin: 0 1.125rem;
  background: var(--bg);
  border-radius: var(--r-pill);
  overflow: hidden;
}

.budgetbar__fill {
  height: 100%;
  background: var(--accent);
  border-radius: var(--r-pill);
  transition: width 200ms ease-out;
}

.budgetbar__fill--over {
  background: var(--warn);
}

/* What it was for (date, reference and milestone underneath), amount,
   and Edit and Remove. See fillProjectBudget for why not five columns. */
.row--spend {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.row__actions {
  display: flex;
  gap: 0.25rem;
}

/* An entry being corrected, in its place in the list. */
.inline-form.inline-form--row {
  margin: 0;
  padding: 0.75rem;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: var(--surface-2);
}

/* A milestone being renamed or re-dated, in its place. */
.milestonerow--editing {
  flex-wrap: wrap;
  gap: 0.5rem;
  background: var(--surface-2);
}

.milestonerow--editing .field__input {
  flex: 1 1 12rem;
  width: auto;
}

.milestonerow--editing input[type='date'] {
  flex: 0 1 11rem;
}

/* On a phone the name takes the line beside the tick box and the date and
   buttons go underneath: with Edit added, a row of five left the name 14px
   wide at 375 (measured 4 October 2026). 17px + 0.75rem is the tick box
   and the gap, so the second line starts under the name. */
@media (max-width: 620px) {
  .milestonerow:not(.milestonerow--editing) {
    flex-wrap: wrap;
    row-gap: 0.375rem;
  }
  .milestonerow:not(.milestonerow--editing) .milestonerow__name {
    flex: 1 1 calc(100% - 17px - 0.75rem);
  }
  .milestonerow:not(.milestonerow--editing) > :nth-child(3) {
    margin-left: calc(17px + 0.75rem);
    margin-right: auto;
  }
}

.row__amount {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* ---- threads inside a chat window ---------------------------------- */

/* Threads stay in the window rather than opening a pane or a second window:
   a chat window is a small surface, and sending the conversation elsewhere
   loses the room it came from. */
.winthread {
  margin-top: 0.25rem;
}

.winthread__toggle {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 0.75rem;
  color: var(--muted);
  cursor: pointer;
}

.winthread__toggle:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* A thread that has replies is worth noticing; an empty one is just an
   affordance to reply and stays quiet. */
.winthread__toggle--has {
  color: var(--accent);
  font-weight: 600;
}

/* A thread holding something unread. Opening the channel clears the badge,
   so without a mark here the one new thing in the window is invisible.
   Weight and a dot carry it as well as colour, so it does not depend on
   seeing the difference between two similar blues. */
.winthread__toggle--new {
  color: var(--accent);
  font-weight: 700;
}

.winthread__toggle--new::before {
  content: '';
  display: inline-block;
  width: 0.4375rem;
  height: 0.4375rem;
  margin-right: 0.375rem;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: 0.05em;
}

/* Ruled and indented so replies read as belonging to the message above
   rather than as more of the channel. */
.winthread__log {
  margin: 0.375rem 0 0.25rem;
  padding-left: 0.625rem;
  border-left: 2px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.msg--reply {
  font-size: 0.8125rem;
}

/* ---- reaching back through history ---------------------------------- */

.loadearlier {
  display: block;
  width: 100%;
  margin: 0 0 0.5rem;
  padding: 0.5rem;
  font: inherit;
  font-size: 0.8125rem;
  color: var(--accent);
  background: var(--surface-2);
  border: 1px dashed var(--border);
  border-radius: var(--r-control);
  cursor: pointer;
}

.loadearlier:hover:not(:disabled) {
  background: var(--accent-soft);
}

.loadearlier:disabled {
  color: var(--muted);
  cursor: default;
}

/* The beginning of a conversation is a statement, not a button. */
.loadearlier--done {
  color: var(--muted);
  background: none;
  border-style: solid;
  border-color: var(--border-soft);
  cursor: default;
  text-align: center;
}

/* ---- chat search ---------------------------------------------------- */

.chatsearch {
  display: flex;
  gap: 0.375rem;
  align-items: center;
  margin-left: auto;
  margin-right: 0.75rem;
}

.chatsearch__input {
  width: 13rem;
  min-width: 0;
  padding: 0.375rem 0.5rem;
  font: inherit;
  font-size: 0.8125rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-control);
}

.chatsearch__input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.chatsearch__scope {
  font-size: 0.75rem;
  padding: 0.375rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--r-control);
  background: var(--surface);
  color: var(--text-2);
}

/* The conversation header holds the name, a 13rem search box with a scope
   select, and the connection dot, all on one unwrapping row. That is about
   460px of content, so on a phone the Chat page was the one screen still
   scrolling sideways after everything else had been fixed.
   Raised to 1100px because the same header still ran 166px off the side of a
   1024px laptop screen, where the conversation list takes 15rem of the width
   before the header gets any. */
@media (max-width: 1100px) {
  .chathead {
    flex-wrap: wrap;
  }

  .chatsearch {
    order: 3;
    flex: 1 1 100%;
    margin-left: 0;
    margin-right: 0;
  }

  /* These two are declared after the general phone rule that lifts fields to
     16px, and carry the same specificity, so they were winning it back and
     still zooming the page on focus. */
  .chatsearch__input {
    flex: 1 1 auto;
    width: auto;
    font-size: 1rem;
  }

  .chatsearch__scope {
    font-size: 1rem;
  }

  /* Only the select: .chanitem is mostly buttons, which do not take focus the
     way a field does and so do not trigger the zoom. */
  select.chanitem {
    font-size: 1rem;
  }

  /* The message box in the chat popup was the one field the phone-wide 16px
     rule could not reach: ".chatwin__compose textarea" is a more specific
     selector than ".field__textarea", so it won wherever it sat in the file.
     At 13px, tapping it zoomed Safari in and left it there — and a zoomed
     page put the right end of the window's title bar, where the close button
     is, past the edge of the screen with no way to reach it. */
  .chatwin__compose textarea {
    font-size: 1rem;
  }

  /* Those title-bar buttons were 20px squares two pixels apart: five of them
     in about 106px. Even unzoomed, hitting close rather than minimise was
     luck. */
  .chatwin__btn {
    min-width: 36px;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }

  .chatwin__acts {
    gap: 0.125rem;
  }
}

@media (max-width: 760px) {
  /* On a phone the header has no room for both; the box matters more. */
  .chatsearch__scope { display: none; }
  .chatsearch__input { width: 8rem; }
}

.chatsearch__count {
  padding: 0.5rem 0.25rem 0.75rem;
  font-size: 0.75rem;
  color: var(--muted);
}

.searchhit {
  display: flex;
  gap: 0.625rem;
  width: 100%;
  text-align: left;
  padding: 0.625rem 0.5rem;
  background: none;
  border: none;
  border-radius: var(--r-control);
  cursor: pointer;
  font: inherit;
}

.searchhit:hover {
  background: var(--surface-2);
}

.searchhit__body {
  min-width: 0;
  flex: 1;
}

.searchhit__top {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: baseline;
  margin-bottom: 0.1875rem;
}

.searchhit__who {
  font-weight: 600;
  font-size: 0.8125rem;
}

.searchhit__where {
  font-size: 0.75rem;
  color: var(--accent);
}

.searchhit__when {
  font-size: 0.75rem;
  color: var(--muted);
}

/* Two lines of the message is enough to recognise it; the conversation is
   one click away for the rest. */
.searchhit__text {
  font-size: 0.8125rem;
  color: var(--text-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.searchhit__note {
  margin-top: 0.1875rem;
  font-size: 0.75rem;
  color: var(--muted);
}

/* Results sit where the log was, so the pane keeps its height and the page
   does not jump between searching and reading. */
.chatsearch__results {
  padding: 0.5rem 0.75rem;
}

/* A person the viewer may not add or remove: shown so the membership is
   still legible, but plainly not something they can change. */
.grouppick:disabled {
  cursor: default;
  opacity: 0.6;
}

.grouppick:disabled:hover {
  background: var(--surface);
}

/* ---- what the chat window's one composer is aimed at ---------------- */

/* A window has a single place to type, which answers either the channel or
   an open thread. This bar is how the writer knows which, and how they get
   back out. */
.chatwin__aim {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.3125rem 0.625rem;
  background: var(--accent-soft);
  border-top: 1px solid var(--border-soft);
  font-size: 0.75rem;
}

.chatwin__aimtext {
  color: var(--accent-dark);
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chatwin__aimcancel {
  flex: none;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 0.75rem;
  color: var(--muted);
  cursor: pointer;
  text-decoration: underline;
}

.chatwin__aimcancel:hover {
  color: var(--text);
}

/* A person shown for information rather than as something to click: the
   membership of a department, project, organisation or direct channel is a
   consequence of something else and is not edited here. */
.grouppick--static {
  cursor: default;
  background: var(--surface-2);
}

/* Search above a list of people. Sits tight to the list it filters, with the
   match count beside it so a short result does not look like an empty one. */
.peoplefilter {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.25rem 0 0.375rem;
}

.peoplefilter .field__input {
  flex: 1;
  min-width: 0;
  padding: 0.375rem 0.5rem;
  font-size: 0.8125rem;
}

.peoplefilter__count {
  flex: none;
  font-size: 0.75rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* The title of a window that is still loading. Dimmed so it reads as a
   placeholder rather than as a conversation called "Opening…". */
.chatwin__title--loading {
  color: var(--muted);
  font-weight: 500;
}

/* The skeleton inside a loading window needs room to read as content rather
   than sitting flush against the header. */
.chatwin__log > .skeleton {
  padding: 0.75rem 0.625rem;
}

/* ---- searching inside a chat window -------------------------------- */

.chatwin__find {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.5rem;
  border-bottom: 1px solid var(--border-soft);
  background: var(--surface-2);
}

.chatwin__findbox {
  flex: 1;
  min-width: 0;
  padding: 0.3125rem 0.5rem;
  font: inherit;
  font-size: 0.8125rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-control);
}

.chatwin__findbox:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.chatwin__findclose {
  flex: none;
  background: none;
  border: none;
  padding: 0.125rem 0.25rem;
  font-size: 0.8125rem;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
}

.chatwin__findclose:hover { color: var(--text); }

/* Results sit exactly where the messages were, so the window keeps its
   height and nothing below it moves. */
.chatwin__results {
  padding: 0.25rem;
}

.winhit {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.4375rem 0.5rem;
  margin-bottom: 0.125rem;
  background: none;
  border: none;
  border-radius: var(--r-control);
  cursor: pointer;
  font: inherit;
}

.winhit:hover { background: var(--surface-2); }

.winhit__top {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  align-items: baseline;
}

.winhit__who {
  font-weight: 600;
  font-size: 0.8125rem;
}

.winhit__when {
  flex: none;
  font-size: 0.75rem;
  color: var(--muted);
}

/* Two lines is enough to recognise the message; clicking opens it in the
   conversation around it. */
.winhit__text {
  font-size: 0.8125rem;
  color: var(--text-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.winhit__note {
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 0.125rem;
}

/* The message a search result led to, so the eye lands on it among its
   neighbours. */
.msg--found {
  background: var(--accent-soft);
  border-radius: var(--r-control);
  scroll-margin: 4rem;
}

/* A document the member of the public sent, as opposed to one a colleague
   uploaded. On a disputed claim that distinction is the whole point. */
.file__from {
  font-size: 0.75rem;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 0.0625rem 0.375rem;
  border-radius: var(--r-pill);
  white-space: nowrap;
}

/* ===================== tasks grouped by milestone ===================== */

/* A heading over each run of tasks, so a milestone has visible work under it
   rather than being a checkpoint on its own in a separate panel. */
.taskgroup {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.75rem;
  padding: 1rem 1.125rem 0.5rem;
}

.taskgroup__name {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--text);
}

.taskgroup__count {
  font-size: 0.75rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.taskgroup__when {
  font-size: 0.75rem;
  color: var(--faint);
  margin-left: auto;
}

/* The add row carries a title, an owner, a date and a milestone now, which is
   more than fits on one line. Title first, the rest underneath it. */
.taskadd {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.875rem 1.125rem;
  border-top: 1px solid var(--border-soft);
  background: var(--surface-2);
}

.taskadd__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.taskadd__row .field__select,
.taskadd__row .field__input {
  flex: 1 1 8rem;
  width: auto;
  min-width: 0;
}

.taskadd__row .button {
  flex: 0 0 auto;
  margin-left: auto;
}

/* ====================================================================
   Phone layout
   --------------------------------------------------------------------
   Everything above this point was drawn for a wide screen and then made
   to survive a narrow one. This block is the narrow screen on its own
   terms. It is last in the file on purpose: these selectors weigh the
   same as the ones they correct, so order is what decides.

   The audit that produced it, at 390px across every screen: no
   horizontal overflow left, but 384px of the 844px screen was spent
   before the first row of content, seventeen kinds of control were
   under the 44px a finger needs, and thirty-two kinds of text were
   under 13px — eleven of them at 10 or 11.
   ==================================================================== */

@media (max-width: 860px) {
  /* ---- 1. the page header ----
     The bell, the search box and the create button each took a line of
     their own: 116px of stacked controls that read as three unrelated
     things. One row, with search taking whatever is left over. */
  .topbar {
    padding: 0.75rem 1rem 0.875rem;
    gap: 0.625rem;
  }

  .topbar__left {
    flex: 1 1 100%;
  }

  .topbar__actions {
    flex: 1 1 100%;
    flex-wrap: nowrap;
    gap: 0.5rem;
    /* Without this the row cannot shrink below its contents and the create
       button's caret hangs 20px off the right of the screen. */
    min-width: 0;
  }

  /* The bell and the create button are fixed sizes; search takes whatever
     is left, however little that is. */
  .topbar__actions .searchtrigger {
    flex: 1 1 0;
    min-width: 0;
  }

  .topbar__actions .createsplit,
  .topbar__actions .bellwrap {
    flex: 0 0 auto;
  }

  /* Squeezed between the bell and the create button, "Search or jump to…"
     broke onto a second line and pushed the whole bar taller. */
  .searchtrigger,
  .searchtrigger * {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* A sentence you read once on your first visit, on every screen, for
     45px each time. */
  .pagelede {
    display: none;
  }

  /* There is no Ctrl key on a phone. */
  .searchtrigger__hint {
    display: none;
  }

  .searchtrigger__long {
    display: none;
  }

  .searchtrigger__short {
    display: inline;
  }

  .topbar__title {
    font-size: 1.375rem;
  }

  /* ---- 2. a floor under the type ----
     Eleven pixels is a size you squint at. Nothing on a phone goes below
     twelve, and the things that carry meaning — status pills, row
     titles — come up further than that. */
  .eyebrow,
  .panel__eyebrow,
  .fact__label,
  .scopelabel,
  .assignbox__label,
  .assignpick__label,
  .chanlist__group,
  .msg__when,
  .daysep,
  .reqrow__meta,
  .rechead__ref,
  .tile__label,
  .livedot,
  .statcard__note,
  .statcard__change,
  .agendaitem__sub,
  .agendaitem__time,
  .navitem__count,
  .personcard__meta,
  .taskpanelhead__sub,
  .bigfig__label,
  .chathead__sub,
  .deptblock__count,
  .deptchip,
  .modscope__all,
  .unreadpill,
  .bellbadge,
  .chatfab__badge,
  .healthcell__label,
  .projectcard__meta,
  .avatar,
  .crumbs {
    font-size: 0.75rem;
  }

  /* A task title cut off mid-word tells you nothing: 127px of "Draft
     memorandum for the Sangguniang Panlalawigan" was being hidden behind
     an ellipsis. Two lines on a phone rather than one. */
  .taskrow__title,
  .taskrow__title > span {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* A status is the second thing you read on any row. */
  .pill {
    font-size: 0.75rem;
    padding: 0.1875rem 0.625rem;
  }

  /* Row titles are what the whole list is for. */
  .reqrow__title,
  .row__link,
  .chanitem__name {
    font-size: 0.9375rem;
  }

  .reqrow__bottom {
    gap: 0.375rem 0.5rem;
  }

  /* ---- 3. targets a finger can hit ----
     Seventeen classes were under 44px; the row link — the way you open
     any record anywhere in the app — was 16. */
  .row__link,
  .crumbs__link {
    min-height: 44px;
    display: flex;
    align-items: center;
    text-align: left;
  }

  /* "Open in map" on a request's location was 17px tall. It is on a line
     of its own, so it can take the height without pushing anything. */
  .tile__maplink {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .button,
  .button--ghost,
  .linkbutton {
    min-height: 40px;
  }

  .button--small {
    min-height: 36px;
  }

  /* The controls you reach for constantly get the full 44px. The rest get
     40, which is the compromise between a target you can hit and a toolbar
     that does not become a wall. */
  .navitem,
  .searchtrigger,
  .filters__select,
  .createsplit__main,
  .createsplit__caret,
  .chanitem {
    min-height: 44px;
  }

  .taskpanelhead__open,
  .deptchip {
    min-height: 40px;
  }

  .bellbtn {
    min-width: 44px;
    min-height: 44px;
  }

  .field__input,
  .field__select,
  .field__textarea {
    min-height: 44px;
  }

  /* The box itself stays a box; what grows is the area around it, so the
     whole line is the target rather than a 20px square. */
  .checkbox,
  input[type='checkbox'] {
    width: 20px;
    height: 20px;
  }

  .checkline {
    min-height: 44px;
    align-items: center;
    padding: 0.25rem 0;
  }

  .checkline input {
    margin-top: 0;
  }

  /* A 12rem label column beside the chips leaves about 100px for chips that
     are 94px wide before their border: on a 320px screen they ran off the
     edge. The label goes above them instead. */
  .modscope__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.375rem;
  }

  .deptchip {
    max-width: 100%;
  }

  /* ---- 4. one rhythm per panel ----
     The panel's name and its view switcher were fighting over one line,
     and the filter chips wrapped into a ragged second row that read as
     an accident. Each gets its own full-width line, and a strip of
     chips scrolls rather than wrapping. */
  .panel__head {
    padding: 1rem 1rem 0.75rem;
    gap: 0.625rem;
  }

  .panel__head > * {
    flex: 1 1 100%;
    min-width: 0;
  }

  /* Three things — the scope chips, the department picker and the count —
     do not fit on one line, and squeezing them onto one collapsed the chips
     to nothing. Two lines, each with a job: the chips, then the picker with
     the count at the end of it. */
  .filters {
    padding: 0.625rem 1rem;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
  }

  .filters > .segmented {
    flex: 1 1 100%;
  }

  .segmented::-webkit-scrollbar {
    display: none;
  }

  .segmented {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    min-width: 0;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    /* Says there is more to the right without needing a scrollbar. */
    mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
  }

  .segmented > * {
    flex: 0 0 auto;
  }

  /* Two to a row (department and category, then sort beside the count),
     rather than one each: four full-width rows pushed the first request
     below the fold. */
  .filters__select {
    flex: 1 1 calc(50% - 0.375rem);
    min-width: 0;
    /* iOS Safari zooms into a select under 16px too, not only inputs. */
    font-size: 1rem;
  }

  /* The search box gets a row of its own on a phone. */
  .filters__search {
    flex-basis: 100%;
  }

  .filters__count {
    flex: 0 0 auto;
    margin-left: auto;
    font-size: 0.8125rem;
  }

  /* The priority pill sat in a flex row that stretched it to the height of
     a title wrapping onto three lines, turning a small label into a large
     oval blob. */
  .reqrow__top {
    align-items: flex-start;
  }

  .reqrow__top > .pill {
    flex: 0 0 auto;
    align-self: flex-start;
  }

  /* The view bar on Projects holds a .segmented of its own. A scroller can
     only scroll if its container lets it shrink; without this the strip
     pushed the bar out to 466px and the panel, which clips rather than
     scrolls, cut the end off it. */
  .viewbar,
  .viewbar__left,
  .viewbar__right {
    min-width: 0;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .viewbar__left,
  .viewbar__right {
    flex: 1 1 100%;
  }

  .viewbar__left > .segmented,
  .viewbar__right > .segmented {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* ---- 5. room to breathe ----
     Panels ran edge to edge with the content padding, so the page was a
     single grey seam from top to bottom. */
  /* 5.5rem at the foot: room for the bottom navigation bar (4rem), which
     now covers the last 4rem of the screen. It was for the chat button. */
  .content {
    padding: 1rem 0.875rem calc(5.5rem + env(safe-area-inset-bottom));
  }

  .panel + .panel,
  .panel + .split,
  .split + .panel {
    margin-top: 0.875rem;
  }

  .panel__body {
    padding-bottom: 0.25rem;
  }

  /* The chat button floats over the bottom-right corner of whatever is
     last on the page. The extra bottom padding above keeps the final row
     clear of it. */
}

@media (max-width: 620px) {
  /* Two figures side by side is the most that stays readable; four
     across turned every number into a column of single digits. */
  .statgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.625rem;
  }

  /* Compact figures: the four cards were about 170px tall each, two rows
     of them a full screen before My work appeared (4 October 2026). The
     icon goes and the padding tightens; number, label and note stay. */
  .statcard {
    padding: 0.75rem 0.875rem;
  }

  .statcard .statcard__icon {
    display: none;
  }

  .statcard .statcard__value {
    font-size: 1.5rem;
  }

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

  /* A two-up split is a stack. */
  .split,
  .split--dash {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Two columns of read-only tiles on a 358px screen meant a field's value
     decided the column width; "Farm-to-market road, Valencia" pushed the
     grid past the edge of the page. One column, and each track capped. */
  .tiles {
    grid-template-columns: minmax(0, 1fr);
  }

  /* These rows hold a date, a title and a status, in that order, and every
     row is its own grid — so each one sized its columns to its own content
     and no two agreed. On the meetings list that left one date squeezed to
     nothing and printed across the title next to it. One column: the three
     parts stack in reading order and every row in the list matches. */
  .row,
  .row--plain,
  .row--when {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
    gap: 0.25rem;
    padding: 0.75rem 0.875rem;
  }

  /* The text block fills the column, so a long line under the title ends
     in "…": with justify-items: start it took its own width instead, and a
     ready reply's preview ran to 732px inside a 305px row, chopped by the
     panel edge with no ellipsis (found 4 October 2026). */
  .row > .row__main {
    justify-self: stretch;
  }

  .row__when,
  .row__where {
    white-space: normal;
  }

  /* On its own line, so it should be the width of that line: a target the
     width of its own text is a target you have to aim at. */
  .row .row__link {
    min-height: 40px;
    width: 100%;
    padding: 0.25rem 0;
  }

  .row {
    min-height: 44px;
  }

  /* Stacked, the categories table's heading row was six labels in a
     column above the first category, matched to nothing. Each value
     carries its heading instead. */
  .row--cat.rowhead {
    display: none;
  }

  .row--cat [data-label]::before {
    content: attr(data-label) ': ';
    color: var(--muted);
    font-weight: 500;
  }

  .row--cat .catpub[data-label]::before {
    content: attr(data-label);
    font-size: 0.75rem;
  }
}

/* ---- replies the requester can see ----
   Marked in the conversation, because everything else there is internal,
   and the composer changes colour in reply mode so nobody sends a note to
   the public by mistake. */
.comment__public {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 0.0625rem 0.5rem;
}

/* Three classes, because `.thread .comment` (two) removes every side border
   and silently won over a plain `.comment--public`. The padding gives back
   the border's 3px so the text stays aligned with its neighbours. */
.thread .comment.comment--public {
  border-left: 3px solid var(--accent);
  padding-left: calc(1.125rem - 3px);
}

.composer__mode {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-bottom: 0.5rem;
  min-width: 0;
}

.composer--public .field__textarea {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* ===================== password box ===================== */

/* Show / Hide sits inside the box, on the right; the input keeps room for
   it so a long password never runs underneath the word. */
.pwbox {
  position: relative;
  display: block;
}

.pwbox__input {
  padding-right: 4.25rem;
}

.pwbox__toggle {
  /* Top and bottom rather than a fixed height: the box is 35px on a
     laptop and 44px on a phone, and a fixed 36px stuck out of the first. */
  position: absolute;
  top: 3px;
  bottom: 3px;
  right: 3px;
  min-width: 44px;
  padding: 0 0.625rem;
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--accent);
  background: none;
  border: none;
  border-radius: var(--r-control);
  cursor: pointer;
}

.pwbox__toggle:hover {
  background: var(--accent-soft, rgba(79, 70, 229, 0.08));
}

/* ===================== ready-made replies ===================== */

/* The menu opens upwards from the button under the reply box, like the
   @ menu, so it does not run off the foot of the panel. */
.replypick {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.replymenu {
  position: absolute;
  left: 0;
  bottom: calc(100% + 6px);
  z-index: 60;
  width: min(22rem, calc(100vw - 2rem));
  max-height: 18rem;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-pop);
  padding: 0.25rem;
}

.replymenu__item {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  width: 100%;
  min-height: 2.75rem;
  padding: 0.5rem 0.625rem;
  font-family: var(--sans);
  text-align: left;
  background: none;
  border: none;
  border-radius: var(--r-control);
  cursor: pointer;
}

.replymenu__item:hover,
.replymenu__item:focus-visible {
  background: var(--bg);
}

.replymenu__title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
}

.replymenu__preview {
  font-size: 0.8125rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.replymenu__empty {
  padding: 0.75rem;
  font-size: 0.8125rem;
  color: var(--muted);
}

.replymenu__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  padding: 0.5rem 0.625rem 0.375rem;
  margin-top: 0.25rem;
  border-top: 1px solid var(--border-soft);
}

/* Settings: a reply's name, then its text, then the buttons. */
.inline-form.inline-form--stack {
  flex-direction: column;
  align-items: stretch;
}

.inline-form--stack .field__textarea {
  min-height: 6rem;
}

/* In a column the shared 13rem flex basis is a height: the ready reply's
   name box was drawn 13rem (208px) tall. */
.inline-form--stack .field__input {
  flex: none;
}

.row__link--static {
  cursor: default;
}

.row__link--static:hover {
  color: var(--text);
}

.linkbutton:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  text-decoration: none;
}

/* On a phone the menu opened from wherever the button had wrapped to and
   ran 3px past the right edge at 375. It spans the screen instead, just
   above the bottom bar. */
@media (max-width: 620px) {
  .replymenu {
    position: fixed;
    left: 0.75rem;
    right: 0.75rem;
    bottom: calc(4.75rem + env(safe-area-inset-bottom));
    width: auto;
    max-height: 50vh;
  }
}

/* ===================== similar open requests ===================== */

/* Under the location on a new request: open requests that look like the
   same thing (similarRequests). Indigo-edged, not amber: it asks the
   person to check, it does not say anything is wrong. */
.similar {
  margin: 0 0 1rem;
  padding: 0.75rem 0.875rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-control);
}

.similar[hidden] {
  display: none;
}

.similar__head {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.375rem;
}

.similar__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.similar__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
  min-width: 0;
}

.similar__link {
  flex: 1 1 100%;
  min-width: 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.similar__link:hover {
  text-decoration: underline;
}

.similar__meta {
  font-size: 0.75rem;
  color: var(--muted);
  min-width: 0;
  overflow-wrap: anywhere;
}

.similar .field__hint {
  margin: 0.5rem 0 0;
}

/* ===================== working hours and holidays ===================== */

/* A target's amount beside its unit: "3 [working days]". The number is
   short, the unit takes the rest. */
.amountunit {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr);
  gap: 0.5rem;
}

.workhours__intro {
  margin: 0 0 1rem;
}

.workdays__set {
  border: none;
  margin: 0 0 1rem;
  padding: 0;
  min-width: 0;
}

/* Seven day toggles that wrap on a phone; each is a full label, so the
   word is part of the target. */
.workdays {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.375rem;
}

.workdays__day {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 2.25rem;
  padding: 0 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--r-control);
  background: var(--surface);
  font-size: 0.875rem;
  color: var(--text);
  cursor: pointer;
}

.workdays__day:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.holidays {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}

.holidays__list {
  margin: 0.5rem 0 1rem;
}

/* Date, name, Remove. .row.row--holiday so it outranks the general phone
   rule that stacks every .row into one column (CLAUDE.md). */
.row.row--holiday {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
}

.holiday__date {
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  font-size: 0.875rem;
}

.holiday__name {
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 620px) {
  .row.row--holiday {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .row.row--holiday .holiday__date {
    grid-column: 1 / -1;
  }
}

/* ====================== CRM log (calls, visits, notes) ====================== */

/* The log on a contact's or company's page (fillActivityLog, 8 October
   2026): a short form, then the entries newest first. */
.crmlog__form {
  display: grid;
  gap: 0.625rem;
  padding: 0.875rem 1.25rem;
  border-bottom: 1px solid var(--border-soft);
}

.crmlog__form .actions {
  margin-top: 0;
}

.crmlog__types {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.crmlog__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.crmlog__row > * {
  flex: 1 1 12rem;
  min-width: 0;
}

/* The outcome list shows for calls only; a class with display would
   otherwise beat the hidden attribute. */
.crmlog__row > [hidden] {
  display: none;
}

.crmlog__entry {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: start;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--border-soft);
}

.crmlog__entry:last-child {
  border-bottom: none;
}

.crmlog__line {
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--text-2);
}

.crmlog__subject {
  margin-top: 0.125rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
}

/* Words as typed: line breaks kept, and a long address or link wraps
   instead of widening the page. */
.crmlog__body {
  margin: 0.25rem 0 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.crmlog__actions {
  display: flex;
  gap: 0.875rem;
  margin-top: 0.375rem;
}

/* On a phone the time goes under the words rather than squeezing them;
   boxes at 16px so iOS does not zoom in on them. */
@media (max-width: 620px) {
  .crmlog__entry {
    grid-template-columns: 28px minmax(0, 1fr);
  }

  .crmlog__entry > .event__when {
    grid-column: 2;
  }

  .crmlog__form .field__textarea,
  .crmlog__form .field__input,
  .crmlog__form select {
    font-size: 1rem;
  }
}

/* ============ settings pages in groups (9 October 2026) ============
   Settings and Account: the groups in a list down the side, one group
   on the page at a time. Settings was one column of fifteen panels. The
   group's panels stop at 64rem: a form across a 1,900px page is hard to
   read. On a phone the list is a row of rounded choices above. */
.setlayout {
  display: grid;
  grid-template-columns: 13.5rem minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}

.setlayout__side {
  position: sticky;
  top: 0.75rem;
  display: grid;
  gap: 1rem;
  min-width: 0;
}

.setlayout__nav {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 0.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-sm);
}

.setlayout__link {
  min-height: 2.25rem;
  padding: 0.5rem 0.75rem;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-2);
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

.setlayout__link:hover {
  background: var(--neutral-soft);
  color: var(--text);
}

.setlayout__link--on,
.setlayout__link--on:hover {
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-weight: 600;
}

.setlayout__main {
  min-width: 0;
  max-width: 64rem;
}

/* The pointer panel under the list is narrow: its text wraps. */
.setlayout__side .panel {
  margin: 0;
}

/* Across the top below 1180px as well as on a phone: beside the list,
   at 1024 the request categories table had 0px for its department and
   "picked up by" columns. */
@media (max-width: 1180px) {
  .setlayout {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }

  .setlayout__side {
    position: static;
    display: contents;
  }

  .setlayout__nav {
    flex-direction: row;
    overflow-x: auto;
    padding: 0.25rem;
    border-radius: var(--r-pill);
    scrollbar-width: thin;
  }

  .setlayout__link {
    flex: none;
    white-space: nowrap;
    border-radius: var(--r-pill);
  }

  /* The pointer panel after the group's panels, not between the list
     and them. */
  .setlayout__side > .panel {
    order: 2;
  }
}

/* Account, Display, Sections: one row per section, its place, its name,
   and Up and Down. */
.navorder {
  list-style: none;
  margin: 0.75rem 0;
  padding: 0;
  max-width: 28rem;
}

.navorder__item {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr) auto auto;
  gap: 0.5rem;
  align-items: center;
  padding: 0.375rem 0;
  border-bottom: 1px solid var(--border-soft);
}

.navorder__item:last-child {
  border-bottom: none;
}

.navorder__num {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
  text-align: right;
}

.navorder__name {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text);
}

/* The bottom bar's four, set apart on the list by a firmer line. */
.navorder__item:nth-child(4) {
  border-bottom-color: var(--border-strong);
}

/* Account's side list: "You", then "Organisation" for those who look
   after its settings. */
.setlayout__heading {
  padding: 0.625rem 0.75rem 0.25rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.setlayout__heading:first-child {
  padding-top: 0.25rem;
}

@media (max-width: 1180px) {
  /* In the row across the top the headings would be orphan words: the
     choices read in order without them. */
  .setlayout__heading {
    display: none;
  }
}

/* The deals list: deal, status, contract value, monthly, renews. */
.row.row--deal {
  grid-template-columns: minmax(0, 1fr) 8.5rem 8rem 7.5rem 7rem;
}

/* The pill its own width, not its column's. */
.row.row--deal > .pill {
  justify-self: start;
}

/* On a phone: the name across the top, then status and value, then
   monthly and renewal. Two classes and a third to outrank the general
   phone rule that stacks every .row (see the landmine). */
@media (max-width: 620px) {
  .rows .row.row--deal {
    grid-template-columns: minmax(0, 1fr) auto;
    justify-items: stretch;
  }

  .rows .row.row--deal > .row__link {
    grid-column: 1 / -1;
  }

  .rows .row.row--deal.rowhead {
    display: none;
  }
}

/* Boards (9 October 2026): the whole card opens its record, and the
   title is a button for the keyboard. Pointer, not grab: a click is what
   most people do with a card, and it still drags. */
.card--opens,
.oppcard.card--opens {
  cursor: pointer;
}

button.card__title {
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  font-family: var(--sans);
  color: var(--text);
  text-align: left;
}

.card--opens:hover .card__title,
.card--opens:hover .oppcard__title {
  color: var(--accent);
}

/* Saving after a move: the card is already where it was dropped. */
.card--saving {
  opacity: 0.7;
}

/* Paused (waiting on the requester, on hold): reached, so the line into
   it is green, but grey with pause bars, not indigo, which means work
   is moving (the colour rules). */
.stagetrack__step--paused::before {
  background: var(--ok);
}

.stagetrack__step--paused .stagetrack__dot {
  border-color: var(--muted);
  background: var(--surface);
  color: var(--muted);
  box-shadow: 0 0 0 4px var(--neutral-soft);
}

.stagetrack__step--paused .stagetrack__name {
  color: var(--text);
}

/* List rows that open their record anywhere (rowOpens). */
.row--opens {
  cursor: pointer;
}

.row--opens:hover .row__link {
  color: var(--accent);
}

/* ============ start-up screen (index.html, 9 October 2026) ============
   The mark in the middle of the screen, "Loading…" under it. The full
   height of the screen on a phone too (dvh: the visible height, without
   the browser's own bars). A slow breath on the mark says it is working;
   not for anyone who has asked for less motion. */
.bootscreen {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1rem;
  background: var(--bg);
  box-sizing: border-box;
}

.bootscreen__mark {
  display: block;
  border-radius: 16px;
  box-shadow: var(--shadow-md);
  animation: bootscreen-breathe 1.6s ease-in-out infinite;
}

.bootscreen__text {
  margin: 0;
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--muted);
}

@keyframes bootscreen-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(0.94); }
}

@media (prefers-reduced-motion: reduce) {
  .bootscreen__mark {
    animation: none;
  }
}

/* ============ importing contacts (9 October 2026) ============ */
.importfile {
  display: block;
  margin: 0.75rem 0 0.5rem;
  font-family: var(--sans);
  font-size: 1rem;
  max-width: 100%;
}

.importmap {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: 0 1.25rem;
  padding: 1.125rem 1.125rem 0;
}

.importmap__note {
  padding: 0 1.125rem 1.125rem;
}

.importsum {
  margin: 0 0 1rem;
  padding-left: 1.125rem;
  font-size: 0.9375rem;
  color: var(--text-2);
  line-height: 1.6;
}

.importsum__add {
  font-weight: 600;
  color: var(--text);
}

.importprev {
  margin: 0.375rem 0 1rem;
}

.importdone {
  margin-top: 1rem;
  padding: 1rem 1.125rem;
  border: 1px solid var(--border);
  border-left: 3px solid var(--ok);
  border-radius: var(--r-control);
  background: var(--surface-2);
}

.importdone__title {
  margin: 0 0 0.75rem;
  font-weight: 600;
  color: var(--text);
}

/* "Times are Manila time." beside the calendar's views, when the viewer
   is in another zone. */
.viewbar__note {
  margin: 0 0 0 auto;
  align-self: center;
}

/* ============ tags (9 October 2026) ============
   A row under a contact's or company's summary: the tags as chips, each
   with a cross, and a box to add one. Neutral chips: a tag is a label,
   not a status, so it takes none of the status colours. */
.tagrow {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-soft);
}

.tagrow__label {
  font-size: 0.75rem;
  color: var(--muted);
  margin-right: 0.25rem;
}

.tagrow__none {
  font-size: 0.875rem;
  color: var(--muted);
}

.tagchip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  max-width: 100%;
  padding: 0.1875rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--neutral-soft);
  color: var(--text);
  font-size: 0.8125rem;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.tagchip--small {
  padding: 0.0625rem 0.4375rem;
  font-size: 0.75rem;
}

.tagchip__x {
  display: inline-flex;
  width: 1.125rem;
  height: 1.125rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.tagchip__x:hover {
  background: var(--surface);
  color: var(--text);
}

.tagchip__x svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
}

.tagrow__input {
  width: 9rem;
  min-width: 0;
  padding: 0.25rem 0.5rem;
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--text);
  font-family: var(--sans);
  font-size: 0.8125rem;
}

.tagrow__msg {
  flex-basis: 100%;
  font-size: 0.8125rem;
  color: var(--text-2);
}

.tagchips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.25rem;
}

.row.row--tagadmin {
  grid-template-columns: minmax(0, 1fr) auto auto;
}


/* 16px on a phone: smaller, iPhone Safari zooms in on the box. */
@media (max-width: 860px) {
  .tagrow__input {
    font-size: 1rem;
  }
}

/* Deal line items (9 October 2026): Edit and Remove side by side, the
   editor as a small form in the list. On a phone each item is its
   name over its figures. */
.lineitem__acts {
  display: flex;
  gap: 0.375rem;
  justify-content: flex-end;
}

.lineedit {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border-soft);
  background: var(--surface-2);
}


/* ============ attachments: thumbnails and the pop-up (9 October 2026) ====
   Each file row starts with a thumbnail: the photo itself, or a tile with
   the file's kind. The thumbnail and the name open the file over the page
   (showFile), as Open does. */
.file__thumb {
  flex: none;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-control);
  background: var(--surface-2);
  overflow: hidden;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.file__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.file__thumb:hover,
.file__thumb:focus-visible {
  border-color: var(--accent);
}

/* The name as a button: the plain .file__name rule (flex 1, ellipsis)
   still applies. */
.file__namebtn {
  padding: 0;
  border: none;
  background: none;
  color: var(--text);
  font: inherit;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

.file__namebtn:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* A file's kind in letters, for files that are not pictures. Neutral for
   every kind: each colour means one thing in Macsen (red is Urgent, green
   is done), and a file's kind is neither. */
.filebadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  padding: 0.125rem 0.25rem;
  border-radius: 4px;
  background: var(--neutral-soft);
  color: var(--text-2);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* A PDF in the pop-up: as large as the screen allows. */
.photoview__frame--doc {
  width: min(100%, 60rem);
  height: 100%;
}

.photoview__doc {
  flex: 1;
  width: 100%;
  min-height: 0;
  border: none;
  border-radius: var(--r-control);
  background: var(--surface);
}

/* Any other file: its tile, name and size, and why it is not shown. */
.photoview__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  width: min(100%, 24rem);
  padding: 2rem 1.5rem;
  border-radius: var(--r-card);
  background: var(--surface);
  color: var(--text);
  text-align: center;
}

.photoview__card .filebadge {
  min-width: 3.5rem;
  padding: 0.5rem;
  font-size: 0.9375rem;
}

.photoview__cardname {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.photoview__cardmeta,
.photoview__cardnote {
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-2);
}

/* A file row: thumbnail, the name over its size, then Open and Remove. */
.file:has(> .file__main) {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) auto;
  gap: 0.75rem;
  flex-wrap: nowrap;
}

.file__main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
}

.file__main .file__name {
  max-width: 100%;
  /* Wrapped rather than cut: "inspection-repo…" said too little. */
  white-space: normal;
  overflow-wrap: anywhere;
}

.file__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
}

.file__acts {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  align-items: stretch;
}

/* ============ chat: "Seen", typing and pins (9 October 2026) ============
   conversationExtras in app.js. "Seen" sits under the latest message when
   it is your own; the typing line above the message box; the pinned bar
   above the conversation. Grey text throughout: none of these is a
   status in the colour rules. */
.seen {
  padding: 0.125rem 0.75rem 0.375rem;
  text-align: right;
  font-size: 0.75rem;
  color: var(--muted);
}

.seen__btn {
  padding: 0;
  border: none;
  background: none;
  color: var(--muted);
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.seen__btn:hover {
  color: var(--accent);
}

.seen__list {
  margin-top: 0.25rem;
  overflow-wrap: anywhere;
}

.typing {
  min-height: 1.25rem;
  padding: 0 0.75rem;
  font-size: 0.75rem;
  font-style: italic;
  color: var(--muted);
}

.typing:empty {
  min-height: 0;
}

.pinbar {
  border-bottom: 1px solid var(--border-soft);
  background: var(--surface-2);
  font-size: 0.8125rem;
}

.pinbar__toggle {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: none;
  background: none;
  color: var(--text);
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.pinbar__toggle:hover {
  color: var(--accent);
}

.pinbar__list {
  max-height: 14rem;
  overflow-y: auto;
  padding: 0 0.5rem 0.5rem;
}

.pinbar__note {
  margin: 0;
  padding: 0 0.75rem 0.5rem;
  font-size: 0.75rem;
  color: var(--muted);
}

.pinitem {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem;
  align-items: start;
  padding: 0.375rem 0.25rem;
  border-top: 1px solid var(--border-soft);
}

.pinitem__show {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
  padding: 0;
  border: none;
  background: none;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.pinitem__who {
  font-size: 0.75rem;
  color: var(--muted);
}

.pinitem__text {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
}

.pinitem__show:hover .pinitem__text {
  color: var(--accent);
}

.pinitem__unpin {
  padding: 0.125rem 0.375rem;
  border: 1px solid var(--border);
  border-radius: var(--r-control);
  background: var(--surface);
  color: var(--text-2);
  font: inherit;
  font-size: 0.75rem;
  cursor: pointer;
}

/* A pinned message carries a mark beside its time; a window's grouped
   message has no head, so the mark goes above its text. */
.msg--pinned .msg__body > .msg__head::after,
.msg--pinned .msg__body:not(:has(> .msg__head))::before {
  content: '\1F4CC  Pinned';
  margin-left: 0.5rem;
  font-size: 0.6875rem;
  color: var(--muted);
}

.msg--pinned .msg__body:not(:has(> .msg__head))::before {
  display: block;
  margin-left: 0;
}

/* ============ saved list views (9 October 2026) ============
   savedViewsRow in app.js: a row of their own under the built-in views,
   shown once there are any; Save view is in the filter bar; under the
   rows, what can be done with the view in use. */
.listviews--saved {
  align-items: center;
  padding-top: 0.5rem;
}

.listviews__label {
  flex: none;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
}

.listview__shared {
  padding: 0.0625rem 0.375rem;
  border-radius: var(--r-pill);
  background: var(--neutral-soft);
  color: var(--text-2);
  font-size: 0.6875rem;
  font-weight: 600;
}

.savedbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1rem;
  padding: 0.5rem 1.25rem 0;
  font-size: 0.8125rem;
}

.savedbar__label {
  min-width: 0;
  color: var(--text-2);
  overflow-wrap: anywhere;
}

.savedbar .notice {
  flex-basis: 100%;
  margin: 0.25rem 0 0;
}

.savedform {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.5rem 1rem;
  width: 100%;
}

.savedform .field {
  flex: 1 1 16rem;
  min-width: 0;
  margin: 0;
}

.savedform__share {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 2.25rem;
  color: var(--text-2);
}

.savedform__actions {
  display: flex;
  gap: 0.5rem;
}

.savedform__note {
  flex-basis: 100%;
  margin: 0;
  color: var(--text-2);
  font-size: 0.8125rem;
}

.savedform__note:empty {
  display: none;
}

/* Project status updates (17 October 2026): the post form and the list.
   The choice buttons take the pills' colours when pressed, so the word
   chosen looks as it will on the post. */
.statusform {
  display: grid;
  gap: 0.5rem;
  padding: 1rem 1.25rem 0.5rem;
}

.statusform .actions {
  margin: 0;
}

.statusform__choices {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.statusform__choice {
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  min-height: 2.25rem;
  padding: 0.25rem 0.875rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-2);
  cursor: pointer;
}

.statusform__choice:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.statusform__choice--on_track[aria-pressed='true'] {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent-dark);
}

.statusform__choice--at_risk[aria-pressed='true'],
.statusform__choice--late[aria-pressed='true'] {
  background: var(--warn-soft);
  border-color: var(--warn-line);
  color: var(--warn);
}

.statusform__choices[aria-invalid='true'] .statusform__choice {
  border-color: var(--danger);
}

.statuslist {
  list-style: none;
  margin: 0;
  padding: 0.25rem 1.25rem 0.75rem;
}

.statusitem {
  padding: 0.75rem 0;
  border-top: 1px solid var(--border-soft);
  min-width: 0;
}

.statusitem:first-child {
  border-top: 0;
}

.statusitem__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.625rem;
  min-width: 0;
}

.statusitem__who {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
}

.statusitem__when {
  font-size: 0.8125rem;
  color: var(--muted);
}

.statusitem__head .button--small {
  margin-left: auto;
}

.statusitem__body {
  margin: 0.375rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.statuslist + .button--ghost {
  margin: 0 1.25rem 1rem;
}

/* "At risk" or "Late" before the department in the projects table. */
.row__flag {
  font-weight: 600;
  color: var(--warn);
}

/* Merged requests (migration merge_requests): the note under the header. */
.mergenote {
  margin: 0.75rem 0 0;
  padding: 0.625rem 0.875rem;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 0.875rem;
  color: var(--text);
}

/* Assignment rules (Settings, Requests). */
.rulelist {
  list-style: none;
  margin: 0;
  padding: 0;
}
.rule {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: flex-start;
  justify-content: space-between;
  padding: 0.875rem 1.125rem;
  border-top: 1px solid var(--border);
}
.rule--off .rule__text {
  color: var(--muted);
}
.rule__text {
  display: grid;
  gap: 0.125rem;
  min-width: 0;
  flex: 1 1 16rem;
  font-size: 0.875rem;
  overflow-wrap: anywhere;
}
.rule__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}
.ruleform {
  padding: 1rem 1.125rem;
  border-top: 1px solid var(--border);
}
.rulepeople {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: 0.375rem 1rem;
  margin: 0.25rem 0 0.75rem;
}
.rulepeople__item {
  font-size: 0.875rem;
}

/* ---------- Docs: the document register (18 October 2026) ---------- */
/* Approved Docs layout (20 October 2026): four views lead, the rest under
   More views; New document and Scan a slip together in the panel's
   header; search and filters grouped, Export after them; labelled
   columns Document, Location & holder, Deadline and Status. Layout only:
   the colours, type and controls are the app's own. */
.doctools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.doctools__big {
  display: none;
}

/* On a phone: only the big Scan a slip, the width of the panel. */
@media (max-width: 620px) {
  .doctools {
    width: 100%;
  }
  .doctools__wide {
    display: none;
  }
  .doctools .doctools__stack {
    width: 100%;
    min-height: 2.75rem;
  }
  .doctools .doctools__big {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    min-height: 3.25rem;
    font-size: 1.0625rem;
    font-weight: 600;
  }
  .doctools__big svg {
    width: 1.375rem;
    height: 1.375rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
}

/* The menu must not be clipped, so this row wraps rather than scrolls. */
.docviews {
  flex-wrap: wrap;
  overflow: visible;
}

.viewmore {
  position: relative;
}

.viewmore__caret {
  width: 0.875rem;
  height: 0.875rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.viewmore__menu {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  z-index: 20;
  min-width: 12rem;
  padding: 0.25rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: var(--surface);
  box-shadow: var(--shadow-md);
}

.viewmore__menu[hidden] {
  display: none;
}

.viewmore__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  width: 100%;
  min-height: 2.25rem;
  padding: 0 0.75rem;
  border: none;
  border-radius: 0.5rem;
  background: transparent;
  color: var(--text);
  font-family: var(--sans);
  font-size: 0.875rem;
  text-align: left;
  cursor: pointer;
}

.viewmore__item:hover,
.viewmore__item:focus-visible {
  background: var(--surface-2);
}

.viewmore__item--on {
  color: var(--accent-dark);
  font-weight: 600;
}

.docfilters {
  justify-content: space-between;
}

.docfilters__find {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  flex: 1 1 22rem;
  min-width: 0;
}

.docfilters__after {
  display: flex;
  align-items: center;
  gap: 0.875rem;
}

.docfilters__after .filters__count {
  margin-left: 0;
}

.doclist__head,
.docrow {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 11rem) minmax(0, 10.5rem);
  gap: 0.75rem;
  padding: 0 1.25rem;
}

.doclist__head {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-soft);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
}

.doclist__head span:last-child {
  justify-self: end;
}

.docrow {
  align-items: center;
  width: 100%;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  border: none;
  border-bottom: 1px solid var(--border-soft);
  background: transparent;
  font-family: var(--sans);
  text-align: left;
  color: var(--text);
  cursor: pointer;
}

.docrow:last-child {
  border-bottom: none;
}

.docrow:hover {
  background: var(--surface-2);
}

.doccell {
  min-width: 0;
}

/* Read by screen readers everywhere, shown only when the row stacks. */
.doccell__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.docrow__ref,
.docrow__sub {
  font-size: 0.75rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.docrow__subject {
  font-size: 0.875rem;
  font-weight: 600;
  margin: 0.0625rem 0;
  overflow-wrap: anywhere;
}

.docrow__holder,
.docdue {
  font-size: 0.8125rem;
  overflow-wrap: anywhere;
}

.docdue--late {
  color: var(--warn);
  font-weight: 600;
}

.docdue--none {
  color: var(--muted);
}

.docrow__tail {
  justify-self: end;
}

.docrow__pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.375rem;
}

@media (max-width: 900px) {
  .doclist__head,
  .docrow {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 9.5rem);
  }
  .doclist__head span:nth-child(4) {
    display: none;
  }
  .doclist__head span:nth-child(3) {
    justify-self: start;
  }
  .docrow__tail {
    grid-column: 1 / -1;
    justify-self: start;
  }
  .docrow__pills {
    justify-content: flex-start;
  }
}

@media (max-width: 620px) {
  /* Compact (6 November 2026, the lighter phone Docs): the document, then
     where it is, its deadline and its status flowing on one or two lines
     under it. Each fact on its own labelled line made every document about
     170px tall, four to a screen; the labels stay for screen readers. */
  .doclist__head {
    display: none;
  }
  .docrow {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 0.625rem;
    row-gap: 0.25rem;
  }
  .docrow__main {
    flex: 1 1 100%;
  }
  .doccell:not(.docrow__main) {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 0.375rem;
    font-size: 0.875rem;
  }
  .docrow__where > .docrow__sub::before {
    content: '· ';
  }
  /* "No deadline" says nothing worth a line on a phone. */
  .docrow__due:has(> .docdue--none) {
    display: none;
  }
  .docrow__tail {
    grid-column: auto;
  }
  .docrow__sub {
    white-space: normal;
  }
}

/* ---------- Docs: the document page (approved layout, 20 October 2026) ---------- */
/* The reference and status on one line under the subject. */
/* A grid outranks the hidden attribute: the Overview's two columns
   showed under the other tabs too. */
.doclayout[hidden] {
  display: none;
}

.docident {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 0.5rem;
  margin-bottom: 0.375rem;
}

.docident .rechead__ref {
  width: auto;
  margin-bottom: 0;
}

/* The quieter column: details, sender tracking, access. Each folds; on a
   laptop they start open beside the work, on a phone folded under it. */
.docside > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  padding: 1rem 1.25rem;
  list-style: none;
  cursor: pointer;
}

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

.docside > summary::after {
  content: '';
  margin-left: auto;
  align-self: center;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform 0.15s;
}

.docside[open] > summary::after {
  transform: rotate(-135deg);
}

.docside > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.docside .panel__title {
  font-size: 0.9375rem;
}

.docside__note {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.docside__body {
  padding-bottom: 0.75rem;
}

.docfacts {
  margin: 0;
  padding: 0 1.25rem 0.5rem;
  font-size: 0.875rem;
}

.docfacts dt {
  font-size: 0.75rem;
  color: var(--muted);
}

.docfacts dd {
  margin: 0.0625rem 0 0.625rem;
  overflow-wrap: anywhere;
  white-space: pre-line;
}

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

.signpdf {
  overflow-wrap: anywhere;
}

/* ---------- Docs: routing, the printed slip, the scanner (18 October 2026) ---------- */
.routing {
  padding: 0 1.25rem 1.25rem;
}

.routing__now {
  display: grid;
  gap: 0.25rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: var(--surface-2);
}

.routing__where {
  font-size: 1rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.routing__meta,
.routeslip__meta {
  font-size: 0.8125rem;
  color: var(--muted);
}

.routing__due {
  font-size: 0.8125rem;
}

.routing__due--late {
  color: var(--warn);
  font-weight: 600;
}

.routing__remarks,
.routeslip__remarks {
  margin: 0.25rem 0 0;
  font-size: 0.875rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.routing__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.routing__heading {
  margin: 1.25rem 0 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
}

.routing__form {
  padding: 0;
}

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

.routeslip {
  padding: 0.625rem 0;
  border-bottom: 1px solid var(--border-soft);
}

.routeslip:last-child {
  border-bottom: none;
}

.routeslip__top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25rem 0.75rem;
  font-size: 0.875rem;
}

.routeslip__to {
  font-weight: 600;
  min-width: 0;
  overflow-wrap: anywhere;
}

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

/* The slip on screen, over the page; on paper, only the slip. Black on
   white in both themes: it is a piece of paper. */
.printslip {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: start center;
  overflow: auto;
  padding: 1rem;
  background: rgba(15, 16, 32, 0.55);
}

.printslip__sheet {
  width: min(100%, 40rem);
  padding: 1.5rem;
  border-radius: 0.75rem;
  background: #fff;
  color: #111;
}

.printslip__bar {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-bottom: 1rem;
}

.printslip__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  border-bottom: 2px solid #111;
  padding-bottom: 0.75rem;
}

.printslip__head > div:first-child {
  min-width: 0;
}

.printslip__org {
  font-size: 0.875rem;
  color: #333;
}

.printslip__title {
  margin: 0.125rem 0;
  font-size: 1.375rem;
}

.printslip__ref {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.printslip__subject {
  margin-top: 0.375rem;
  font-size: 1rem;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

/* A document receipt (public tracking): when it came in, and the
   tracking code large enough to read out over the phone. */
.printslip__line {
  margin-top: 0.375rem;
  font-size: 0.875rem;
  color: #333;
}

.printslip__code {
  display: grid;
  gap: 0.125rem;
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  color: #333;
}

.printslip__code strong {
  font-size: 1.625rem;
  letter-spacing: 0.08em;
  color: #111;
}

/* The code on a document's page. */
.trackcode {
  display: grid;
  gap: 0.125rem;
  padding: 0.25rem 1.25rem 0.5rem;
}

.trackcode__label {
  font-size: 0.8125rem;
  color: var(--muted);
}

.trackcode__value {
  font-size: 1.5rem;
  letter-spacing: 0.08em;
  color: var(--text);
}

.printslip__qr {
  display: grid;
  justify-items: center;
  gap: 0.25rem;
  flex: 0 0 auto;
}

.printslip__qrnote {
  font-size: 0.75rem;
  color: #333;
  max-width: 9rem;
  text-align: center;
}

.printslip__who {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #111;
}

.printslip__screen {
  margin: 0.75rem 0 0;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  background: #f1f2f6;
  font-size: 0.8125rem;
  color: #333;
}

.printslip__how {
  margin: 0.75rem 0 0;
  font-size: 0.8125rem;
  color: #333;
}

@media (max-width: 480px) {
  .printslip__head {
    flex-direction: column;
  }
}

@media print {
  body.printing > *:not(.printslip) {
    display: none !important;
  }
  body.printing .printslip {
    position: static;
    padding: 0;
    background: none;
  }
  body.printing .printslip__sheet {
    width: 100%;
    padding: 0;
    border-radius: 0;
  }
  body.printing .printslip__bar,
  body.printing .printslip__screen {
    display: none;
  }
}

/* Several slips or receipts on a sheet (printDocSheet). On screen the
   pages are drawn at their real size, scrolling sideways on a phone; on
   paper the page itself is the @page size the dialog sets, less its
   0.25 in margins. Black on white: office printers are often grey only. */
.printsheet__sheet {
  width: min(100%, 60rem);
}

.printsheet__bar {
  flex-wrap: wrap;
  align-items: center;
}

.printsheet__paper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-right: auto;
  font-size: 0.875rem;
}

.printsheet__paper .filters__select {
  font-size: 1rem;
}

.printsheet__note {
  margin: 0 0 0.5rem;
  font-size: 0.8125rem;
  color: #333;
}

.printsheet__pages {
  overflow-x: auto;
}

.printsheet__page {
  box-sizing: border-box;
  width: var(--paper-w);
  height: var(--paper-h);
  margin: 0 auto 1rem;
  padding: 0.25in;
  border: 1px solid #bbb;
  background: #fff;
}

.printsheet__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(var(--rows), minmax(0, 1fr));
  height: 100%;
}

.printsheet__cell {
  display: flex;
  gap: 0.12in;
  min-width: 0;
  min-height: 0;
  padding: 0.15in 0.15in 0.12in 0.2in;
  overflow: hidden;
  color: #111;
  font-family: var(--sans);
}

.printsheet__cell--cutright {
  border-right: 1px dashed #888;
}

.printsheet__cell--cutbelow {
  border-bottom: 1px dashed #888;
}

.printsheet__text {
  display: flex;
  flex-direction: column;
  gap: 0.02in;
  flex: 1;
  min-width: 0;
}

.printsheet__org,
.printsheet__how,
.printsheet__qr span {
  font-size: 7.5pt;
  color: #333;
}

.printsheet__title {
  font-size: 10pt;
  font-weight: 700;
}

/* The two halves look different even in black and white: the office copy
   a solid black band, the sender's receipt an outline. */
.printsheet__title span {
  display: inline-block;
  padding: 0.03in 0.09in;
  border: 1.5px solid #111;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 9pt;
}

.printsheet__cell--slip .printsheet__title span {
  background: #111;
  color: #fff;
}

.printsheet__who {
  font-size: 7.5pt;
  font-weight: 600;
  color: #111;
}

.printsheet__cell--missing {
  color: #555;
}

.printsheet__cell--missing .printsheet__title span {
  background: none;
  color: #777;
  border-color: #aaa;
  border-style: dashed;
}

.printsheet__cell--cuttop {
  border-top: 1px dashed #888;
}

/* Rows already cut off a part-used sheet, and rows left for the next
   pair: drawn on screen to show where this one lands, never printed. */
.printsheet__gone,
.printsheet__free {
  grid-column: 1 / -1;
  display: grid;
  place-items: center;
  font-size: 9pt;
  color: #666;
}

.printsheet__gone {
  background: repeating-linear-gradient(135deg, #eee 0 8px, #f7f7f7 8px 16px);
}

.printsheet__free {
  outline: 1px dashed #ccc;
  outline-offset: -4px;
}

.printsheet__ref {
  font-size: 12pt;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.printsheet__subject {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 9pt;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.printsheet__line {
  font-size: 8.5pt;
}

.printsheet__how {
  margin-top: auto;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.printsheet__qr {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  gap: 0.03in;
}

/* 4.5 cm: a 3.5 cm code had phones coming very close before they read
   it (the single slip prints at 4.8 cm). */
.printsheet__qr svg {
  width: 4.5cm;
  height: 4.5cm;
}

.printsheet__qr span {
  max-width: 4.5cm;
  text-align: center;
}

/* Inside the first column's left padding: outside the grid it would sit
   in the printer's margin and be cut off. */
.printsheet__scissors {
  position: absolute;
  left: 0.01in;
  width: 0.16in;
  height: 0.16in;
  margin-top: -0.08in;
}

.printsheet__scissors svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: #666;
  stroke-width: 2;
}

@media print {
  body.printing .printsheet__notes,
  body.printing .printsheet__bar {
    display: none;
  }
  body.printing .printsheet__pages {
    overflow: visible;
  }
  /* The printer's page is the @page size less its margins, so the page
     box drops its own padding and border; a hair under the height so a
     rounding never spills a blank page. */
  body.printing .printsheet__page {
    width: auto;
    height: calc(var(--paper-h) - 0.5in - 0.02in);
    margin: 0;
    padding: 0;
    border: none;
    break-after: page;
  }
  body.printing .printsheet__page:last-child {
    break-after: auto;
  }
  body.printing .printsheet__gone,
  body.printing .printsheet__free {
    visibility: hidden;
  }
}

/* The scanner: the camera full screen, a square to aim with, the words
   and Close at the foot. */
.scanner {
  position: fixed;
  inset: 0;
  /* Above everything, the phone's bottom bar and pop-ups included. */
  z-index: 1000;
  height: 100dvh;
  overflow: hidden;
  background: #000;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
}

.scanner__video {
  /* Layers set explicitly: iPhone Safari draws a playing video in a layer
     of its own, over unpositioned neighbours in the same grid cell, so the
     square was hidden and the scanner looked like the plain camera
     (founder, 19 October 2026). */
  position: relative;
  z-index: 0;
  grid-row: 1;
  grid-column: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.scanner__frame {
  position: relative;
  z-index: 1;
  grid-row: 1;
  grid-column: 1;
  place-self: center;
  width: min(65vw, 18rem);
  aspect-ratio: 1;
  border: 3px solid #fff;
  border-radius: 1rem;
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

.scanner__foot {
  /* Over the square's dimming shadow, which reaches past its cell. */
  position: relative;
  z-index: 2;
  display: grid;
  gap: 0.75rem;
  justify-items: center;
  padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom));
  background: #000;
}

.scanner__status {
  margin: 0;
  max-width: 32rem;
  color: #fff;
  text-align: center;
  font-size: 0.9375rem;
}

.scanner__title {
  margin: 0;
  color: #fff;
  font-weight: 600;
  text-align: center;
}

/* Receive a stack (4 November 2026): what was scanned, newest first, in
   the scanner's black foot (always dark, as the rest of the scanner). */
.stacklist {
  margin: 0;
  padding: 0;
  list-style: none;
  width: min(32rem, 100%);
  max-height: 9.5rem;
  overflow-y: auto;
  display: grid;
  gap: 0.25rem;
}

.stacklist__item {
  display: grid;
  grid-template-columns: 1.25rem auto minmax(0, 1fr);
  gap: 0.5rem;
  align-items: baseline;
  padding: 0.375rem 0.625rem;
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 0.875rem;
}

.stacklist__mark {
  font-weight: 700;
}

.stacklist__item--ok .stacklist__mark {
  color: #86efac;
}

.stacklist__item--no .stacklist__mark,
.stacklist__item--no .stacklist__words {
  color: #fcd34d;
}

.stacklist__ref {
  font-weight: 600;
  white-space: nowrap;
}

.stacklist__words {
  min-width: 0;
  overflow-wrap: anywhere;
}

.scanner__buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}

/* A slip that is not this person's (team meeting, 5 November 2026): an
   amber-edged note on the black foot, with View it when they may. */
.scanner__notice {
  display: grid;
  gap: 0.5rem;
  justify-items: center;
  width: min(32rem, 100%);
  padding: 0.75rem 0.875rem;
  border: 2px solid #fbbf24;
  border-radius: 0.75rem;
  background: rgba(251, 191, 36, 0.12);
}

.scanner__notice[hidden] {
  display: none;
}

.scanner__noticetext {
  margin: 0;
  color: #fff;
  font-weight: 600;
  text-align: center;
}

/* On the black foot, the ghost button needs light text. */
.scanner .scanner__notice .button--ghost,
.scanner .scanner__fallback {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.6);
  background: transparent;
}

/* The scanner's × in the top corner, inside the iPhone's safe area. */
.scanner__x {
  position: fixed;
  top: calc(0.75rem + env(safe-area-inset-top));
  right: calc(0.75rem + env(safe-area-inset-right));
  z-index: 1001;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  cursor: pointer;
}

.scanner__x svg {
  width: 1.375rem;
  height: 1.375rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
}

.routing__quick {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.routing__chip {
  min-height: 2.5rem;
  padding: 0.375rem 0.875rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 0.875rem;
  cursor: pointer;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.routing__chip[aria-pressed='true'] {
  border-color: var(--accent);
  background: var(--accent-solid);
  color: #fff;
}

/* "Department" or "Person" ahead of the name (Docs review 5). */
.routing__chipkind {
  margin-right: 0.375rem;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 600;
}

.routing__chip[aria-pressed='true'] .routing__chipkind {
  color: inherit;
}

.routing__effect {
  margin: -0.25rem 0 0.5rem;
  color: var(--muted);
  font-size: 0.8125rem;
}

.routing__choice {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  margin: 0.25rem 0 0.75rem;
  font-size: 0.875rem;
  color: var(--muted);
}

.routing__earlier {
  margin-top: 1rem;
}

.routing__earlier > summary {
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.25rem 0;
}

/* ---------- E-signature: the signing editor (19 October 2026) ---------- */
/* Codex review step 2: placing fields, the PDF, then the rest. The PDF has
   the wide column on a laptop, beside both; on a phone the three stack in
   that order (DOM order, no reordering), the page right under the field
   buttons. */
.signedit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
  grid-template-areas: 'doc place' 'doc side';
  grid-template-rows: auto 1fr;
  column-gap: 1.25rem;
  align-items: start;
}
.signedit__place {
  grid-area: place;
  min-width: 0;
}
.signedit__doc {
  grid-area: doc;
  min-width: 0;
  margin-bottom: 1.25rem;
}
.signedit__side {
  grid-area: side;
  min-width: 0;
}
.signedit__pages {
  min-width: 0;
  display: grid;
  gap: 0.5rem;
  justify-items: center;
  overflow: auto;
  max-height: 85vh;
  padding: 0.5rem;
  border: 1px solid var(--border);
  border-top: 0;
  border-radius: 0 0 var(--r-card) var(--r-card);
  background: var(--bg);
}
.signviewer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--r-card) var(--r-card) 0 0;
  background: var(--surface);
}
.signviewer:empty {
  display: none;
}
.signviewer__group {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.signviewer__btn {
  min-width: 2.5rem;
  min-height: 2.5rem;
  justify-content: center;
}
.signviewer__count {
  font-size: 0.8125rem;
  color: var(--muted);
  min-width: 7.5em;
  text-align: center;
}
.signsave {
  margin-left: 0.75rem;
  font-size: 0.8125rem;
  color: var(--muted);
}
.signsave--bad {
  color: var(--danger);
  font-weight: 600;
}
.signperson__warn {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--warn);
}
.signperson__fix {
  font-size: 0.8125rem;
  margin: 0 0 0.25rem 2.25rem;
}
.signnudge {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 0.5rem;
}
.signedit__lead {
  margin: 0.75rem 0 1rem;
}
.signedit__notice:empty {
  display: none;
}
.sigpage__no {
  font-size: 0.8125rem;
  color: var(--muted);
  margin: 0.5rem 0 0;
  justify-self: start;
}
.sigpage {
  position: relative;
  width: 100%;
  max-width: 820px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(15, 16, 32, 0.08);
  overflow: hidden;
}
.sigpage__canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.sigpage__layer {
  position: absolute;
  inset: 0;
}
.signedit__pages--armed .sigpage__layer {
  cursor: crosshair;
}
.sigfield {
  position: absolute;
  box-sizing: border-box;
  border: 2px solid var(--c);
  background: color-mix(in srgb, var(--c) 14%, transparent);
  border-radius: 3px;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0 0.25rem;
  overflow: hidden;
  cursor: move;
  touch-action: none;
  user-select: none;
}
.sigfield:focus-visible,
.sigfield--on {
  outline: 2px solid var(--c);
  outline-offset: 2px;
}
.sigfield__label {
  flex: 1 1 auto;
  min-width: 0;
  /* The page is always white (it is the PDF), so the label is dark in
     both themes. */
  color: #1F2033;
  font-size: 0.6875rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sigfield__n {
  flex: none;
  min-width: 1.1rem;
  height: 1.1rem;
  border-radius: 999px;
  background: var(--c);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  display: grid;
  place-items: center;
}
.sigfield--tiny {
  padding: 0;
  justify-content: center;
}
.sigfield--tiny .sigfield__label {
  display: none;
}
.sigfield--tiny .sigfield__n {
  min-width: 0.9rem;
  height: 0.9rem;
  font-size: 0.625rem;
}
.sigfield--optional {
  border-style: dashed;
}
.sigfield__grip {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 0.75rem;
  height: 0.75rem;
  background: linear-gradient(135deg, transparent 50%, var(--c) 50%);
  cursor: nwse-resize;
}
.sigfield--other {
  opacity: 0.25;
}
.sigfield--other .sigfield__grip,
.sigfield--mine .sigfield__grip {
  display: none;
}
.sigfield--mine {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 35%, transparent);
}
.signpeople {
  list-style: none;
  margin: 0;
  padding: 0 1.25rem;
  display: grid;
  gap: 0.5rem;
}
.signperson {
  border: 1px solid var(--border);
  border-left: 4px solid var(--c);
  border-radius: 8px;
  padding: 0.5rem 0.625rem;
  display: grid;
  gap: 0.5rem;
  min-width: 0;
}
.signperson--on {
  background: color-mix(in srgb, var(--c) 8%, var(--surface));
}
.signperson__pick {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  cursor: pointer;
}
.signperson__swatch {
  flex: none;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 999px;
  background: var(--c);
  color: var(--surface);
  font-size: 0.75rem;
  font-weight: 700;
  display: grid;
  place-items: center;
}
.signperson__who {
  display: grid;
  min-width: 0;
}
.signperson__name {
  font-weight: 600;
  overflow-wrap: anywhere;
}
.signperson__email {
  font-size: 0.8125rem;
  color: var(--muted);
  overflow-wrap: anywhere;
}

/* A sent request: where each person has got to, and what happened. */
.signperson__progress {
  display: block;
  font-size: 12px;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.signhistory {
  list-style: none;
  margin: 0;
  padding: 0;
}
.signhistory li {
  display: grid;
  gap: 1px;
  padding: 7px 0;
  border-top: 1px solid var(--border);
  min-width: 0;
}
.signhistory li:first-child {
  border-top: 0;
}
.signhistory__what {
  font-size: 13px;
  font-weight: 500;
  overflow-wrap: anywhere;
}
.signhistory__when {
  font-size: 12px;
  color: var(--muted);
}
.signperson__controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  align-items: center;
}
.signperson__controls .field__input {
  width: auto;
  flex: 1 1 7rem;
  min-width: 0;
}
.signadd {
  padding: 0.75rem 1.25rem 0;
}
.signadd__row {
  display: flex;
  gap: 0.5rem;
  min-width: 0;
}
.signadd__row .field__input {
  flex: 1 1 auto;
  min-width: 0;
}
.signtag {
  color: var(--c);
}
.signkinds {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.375rem;
  padding: 0 1.25rem;
}
.signkind {
  font: inherit;
  font-size: 0.875rem;
  text-align: left;
  padding: 0.5rem 0.625rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}
.signkind:hover {
  border-color: var(--accent);
}
.signkind--on {
  border-color: var(--accent-solid);
  background: var(--accent-solid);
  color: #fff;
}
.signsel {
  margin: 0.75rem 1.25rem 0;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.signsel__what {
  margin: 0 0 0.5rem;
  font-weight: 600;
}
.signproblems {
  margin: 0.25rem 1.25rem 0.75rem;
  padding-left: 1.25rem;
}
.signpad {
  padding: 0.75rem 1.25rem 1rem;
}
.signadd__head {
  margin: 0.75rem 0 0.25rem;
  font-size: 0.875rem;
  font-weight: 600;
}
.signedit__how {
  margin: 0.5rem 0 0.75rem;
}
.signedit__how > summary {
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 600;
}
.signedit__how .signedit__lead {
  margin: 0.375rem 0 0;
}
@media (max-width: 860px) {
  .signkinds {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .signkind {
    font-size: 0.8125rem;
    padding: 0.5rem 0.375rem;
  }
  .signedit {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'place' 'doc' 'side';
    grid-template-rows: auto;
  }
  /* On a phone the field tools are a strip glued to the top of the PDF
     (Docs, 23 October 2026: the page started about 1,110 px down): no
     panel heading, the kinds in one row that scrolls sideways. */
  .signedit__place .panel {
    margin-bottom: 0;
    border-radius: var(--r-card) var(--r-card) 0 0;
    border-bottom: 0;
    box-shadow: none;
  }
  .signedit__place .panel__head {
    display: none;
  }
  .signedit__place .signviewer {
    border-radius: 0;
  }
  .signkinds {
    display: flex;
    overflow-x: auto;
    gap: 0.375rem;
    padding: 0 0.75rem 0.625rem;
    scrollbar-width: thin;
  }
  .signkind {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  .signfor {
    padding: 0.625rem 0.75rem 0.5rem;
  }
  .signsel {
    margin: 0 0.75rem 0.625rem;
  }
  .signedit__place .panelnote {
    padding: 0 0.75rem;
    margin: 0 0 0.5rem;
  }
  .signedit__doc .signviewer {
    border-radius: 0;
  }
  /* Send, Check and More in one row above the PDF. */
  .signhead--draft .rechead__actions {
    flex-wrap: nowrap;
    gap: 0.375rem;
  }
  .signhead .rechead__actions > .button,
  .signhead .rechead__actions > .button--ghost,
  .signhead .moremenu > summary {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    white-space: nowrap;
  }
}

/* A draft's facts in one line, and the header's More menu. */
.signfacts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;
  margin: 0.25rem 0 0.75rem;
  font-size: 0.875rem;
  color: var(--muted);
  min-width: 0;
  overflow-wrap: anywhere;
}
.moremenu {
  position: relative;
}
.moremenu > summary {
  list-style: none;
  cursor: pointer;
}
.moremenu > summary::-webkit-details-marker {
  display: none;
}
.moremenu__list {
  position: absolute;
  right: 0;
  top: calc(100% + 0.25rem);
  z-index: 20;
  display: grid;
  gap: 0.25rem;
  min-width: 12rem;
  padding: 0.375rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 8px 24px rgba(15, 16, 32, 0.14);
}
.moremenu__list > button {
  justify-content: flex-start;
  width: 100%;
}
.signfor {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 1.25rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  min-width: 0;
}
.signfor__swatch {
  flex: 0 0 auto;
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 50%;
  background: var(--c);
}
.signfor__select {
  flex: 1 1 auto;
  min-width: 0;
}
/* The page is the PDF, white in both themes, so fields on it keep the
   light colours: a dark theme's pale signer colour under the white
   number would fail contrast. */
.sigpage {
  --sig-0: #4F46E5;
  --sig-1: #0F766E;
  --sig-2: #9A3412;
  --sig-3: #7C3AED;
  --sig-4: #0369A1;
  --sig-5: #4D7C0F;
  --sig-6: #BE185D;
  --sig-7: #475569;
}

/* "Link it to…" on a document sat on the panel's edge: the picker had no
   rule of its own (19 October 2026). Inset like the rows above it. */
.linkpicker {
  padding: 0.25rem 1.25rem 1.125rem;
}

/* Which PDF to sign (choosePdfDialog). */
.pdfchoices {
  display: grid;
  gap: 0.5rem;
  margin: 0.75rem 0 1rem;
}
.pdfchoice {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  min-width: 0;
}
.pdfchoice:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.pdfchoice input {
  margin-top: 0.2rem;
}
.pdfchoice__words {
  display: grid;
  min-width: 0;
}
.pdfchoice__name {
  font-weight: 600;
  overflow-wrap: anywhere;
}
.pdfchoice__when {
  font-size: 0.8125rem;
  color: var(--muted);
}

/* Your saved signature (Account, Sign-in; migration esign_in_app). The
   picture sits on white whatever the theme, as it will on the PDF. */
.mysig { padding: 0.75rem 0; border-top: 1px solid var(--border); }
.mysig:first-of-type { border-top: none; }
.mysig__title { margin: 0 0 0.5rem; font-size: 0.95rem; }
.mysig__shown { min-height: 3rem; display: flex; align-items: center; }
.mysig__shown img, .mysig__check { max-height: 80px; max-width: min(100%, 320px); background: #fff; border: 1px dashed var(--border); border-radius: 8px; padding: 6px 10px; }
.mysig__typed { font-family: 'Brush Script MT', 'Segoe Script', cursive; font-size: 1.8rem; color: #1f2033; background: #fff; border: 1px dashed var(--border); border-radius: 8px; padding: 2px 12px; overflow-wrap: anywhere; }
.mysig__preview { display: block; margin: 0.25rem 0 0.5rem; min-height: 3rem; }
.mysig__pad { display: block; width: 100%; max-width: 480px; height: 150px; background: #fff; border: 1px dashed var(--border); border-radius: 10px; touch-action: none; cursor: crosshair; }
.mysig__editor:not(:empty) { margin-top: 0.75rem; }

/* Skip to content (Codex audit, section 4): out of sight until focused by
   the keyboard, then over the top bar. */
.skiplink {
  position: fixed;
  left: 0.75rem;
  top: -4rem;
  z-index: 1000;
  padding: 0.625rem 1rem;
  border: 2px solid var(--accent-solid);
  border-radius: var(--r-control);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.skiplink:focus {
  top: 0.75rem;
}
.content:focus {
  outline: none;
}

/* A side panel folded on a phone (foldOnPhone): its heading alone. */
.panel--fold .panel__head {
  align-items: center;
}
.panel--fold:has(> div[hidden]) .panel__head {
  margin-bottom: 0;
  padding-bottom: 1rem;
}
.panel__fold {
  font-size: 0.875rem;
}

/* ===================== report drill-down (Pro) ===================== */

/* A figure or breakdown row that opens the records behind it (reportDrill,
   30 October 2026). Buttons that look like the plain figures and rows,
   with a hover and the focus ring, so Growth's static ones and Pro's
   clickable ones line up exactly. */
.bigfig--link,
.breakrow--link {
  font: inherit;
  color: inherit;
  text-align: left;
  background: none;
  border-top: 0;
  border-bottom: 0;
  border-left: 0;
  cursor: pointer;
  width: 100%;
}
.breakrow--link {
  border-right: 0;
  border-radius: 6px;
}
.bigfig--link:hover,
.breakrow--link:hover {
  background: var(--accent-soft, var(--border-soft));
}
.bigfig--link:hover .bigfig__label,
.breakrow--link:hover .breakrow__label {
  color: var(--accent);
  text-decoration: underline;
}
.bigfig--link:focus-visible,
.breakrow--link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.sharecard--drill {
  width: min(40rem, 100%);
}
.drilllist {
  list-style: none;
  margin: 0.75rem 0;
  padding: 0;
  border-top: 1px solid var(--border-soft);
}
.drilllist__item {
  padding: 0.625rem 0;
  border-bottom: 1px solid var(--border-soft);
  min-width: 0;
}
.drilllist__link {
  color: var(--accent);
  font-weight: 600;
  font-size: 0.875rem;
  overflow-wrap: anywhere;
}
.drilllist__meta {
  margin-top: 0.125rem;
  font-size: 0.75rem;
  color: var(--muted);
}

/* A PDF drawn page by page with pdf.js on phones (pdfPages, 30 October
   2026), where a PDF in a frame shows nothing or one page. */
.photoview__pages {
  flex: 1;
  min-height: 0;
  width: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px;
  border-radius: var(--r-control);
  background: var(--surface);
}
.photoview__page {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 8px;
  background: #ffffff;
  box-shadow: 0 0 0 1px var(--border);
}
.photoview__page:last-child {
  margin-bottom: 0;
}
.photoview__pagesnote {
  margin: 1rem;
  color: var(--muted);
  font-size: 0.875rem;
}
.photoview__link--dark {
  color: var(--accent);
}

/* ---------- Docs: process routes (30 October 2026) ---------- */
/* The route on a document's page, like the paper slip: done steps quiet
   with a tick, the current one marked, later ones faint. Also the steps
   list in Settings, Docs (procsteps--edit). */
.procsteps {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
}

.procstep {
  position: relative;
  padding: 0.5rem 0 0.5rem 1.75rem;
  border-bottom: 1px solid var(--border-soft);
}

.procstep:last-child {
  border-bottom: none;
}

.procsteps--edit .procstep {
  padding-left: 0;
}

.procstep__top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  min-width: 0;
}

.procstep__name {
  font-weight: 600;
  min-width: 0;
  overflow-wrap: anywhere;
}

.procstep__office,
.procstep__meta {
  color: var(--muted);
  font-size: 0.875rem;
  overflow-wrap: anywhere;
}

.procstep__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.375rem;
}

/* The marker: a ring for every step on a document, ticked when done. */
.procsteps:not(.procsteps--edit) .procstep::before {
  content: '';
  position: absolute;
  left: 0.25rem;
  top: 0.75rem;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  border: 2px solid var(--border);
  box-sizing: border-box;
}

/* Green is done, indigo is in progress (the colour rules). */
.procstep--done::before {
  background: var(--ok);
  border-color: var(--ok) !important;
}

.procstep--done .procstep__name {
  font-weight: 500;
}

.procstep--now {
  background: var(--accent-soft);
  border-radius: 8px;
  padding-right: 0.75rem;
}

.procstep--now::before {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.procstep--later .procstep__name {
  font-weight: 500;
  color: var(--muted);
}

.procroute {
  padding: 0.75rem 0 1rem;
  border-bottom: 1px solid var(--border-soft);
}

/* Pilot readiness (4 November 2026): which offices on a route have
   nobody who can receive. Amber means stuck, as everywhere. */
.procready {
  margin: 0.5rem 0;
}

.procready__ok {
  margin: 0;
  color: var(--ok);
  font-size: 0.875rem;
}

.procready--gaps {
  padding: 0.625rem 0.875rem;
  border-radius: 0.625rem;
  background: var(--warn-soft);
  color: var(--warn);
}

.procready__title {
  margin: 0 0 0.25rem;
  font-weight: 600;
}

.procready__list {
  margin: 0 0 0.25rem;
  padding-left: 1.25rem;
}

.procready--gaps .panelnote {
  color: var(--warn);
  margin: 0;
}

.procroute--off .procroute__name {
  color: var(--muted);
}

.procroute__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
}

.procroute__name {
  margin: 0;
  font-size: 1rem;
}

.procroute__count {
  color: var(--muted);
  font-size: 0.875rem;
}

.routing__process {
  margin-top: 1rem;
}

.routing__process > summary {
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.25rem 0;
}

.routing__processrow {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.routing__processrow select {
  flex: 1 1 14rem;
  min-width: 0;
}

/* Batch 2: holds, late reasons, returns. Amber is late or stuck (the
   colour rules); a hold is stuck, a late reason is late. */
.routing__hold,
.procstep__held {
  color: var(--warn);
  font-size: 0.875rem;
  font-weight: 600;
  margin: 0.375rem 0 0;
  overflow-wrap: anywhere;
}

.procstep__late {
  color: var(--warn);
  font-size: 0.875rem;
  overflow-wrap: anywhere;
}

.routing__return {
  font-size: 0.875rem;
  font-weight: 600;
  margin: 0.375rem 0 0;
}

/* A route's End-User office and supplier, above its steps. */
.procfacts {
  display: grid;
  gap: 0.25rem;
  margin-top: 0.75rem;
}

.procfacts__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  min-width: 0;
}

.procfacts__label {
  color: var(--muted);
  font-size: 0.875rem;
  min-width: 5.5rem;
}

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

.procfacts__edit {
  margin: 0.25rem 0 0.5rem;
}

.supplierlink {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.375rem;
  font-size: 0.875rem;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.supplierfind {
  margin-top: 0.25rem;
}

/* The route slip (printProcessSlip): the paper Procurement and Payment
   slip, black on white, one sheet. Ink filled in by Macsen is dark blue on
   screen (prints grey on a black-only printer, still readable). */
.printslip__sheet--wide {
  width: min(100%, 52rem);
}

.procslip__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: start;
}

.procslip__org {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #555;
}

.procslip__title {
  margin: 0.125rem 0 0.375rem;
  font-size: 1.125rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.procslip__facts {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr);
  gap: 0.125rem 0.625rem;
  margin: 0;
  font-size: 0.75rem;
}

.procslip__facts dt {
  color: #555;
}

.procslip__facts dd {
  margin: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.procslip__qr {
  display: grid;
  justify-items: center;
  width: 7.5rem;
  text-align: center;
}

.procslip__table {
  width: 100%;
  margin-top: 0.875rem;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 0.6875rem;
}

.procslip__table th,
.procslip__table td {
  border: 1px solid #222;
  padding: 0.1875rem 0.25rem;
  vertical-align: top;
  overflow-wrap: anywhere;
}

.procslip__table th {
  background: #f2f2f2;
}

.procslip__table th:nth-child(1) { width: 1.75rem; }
.procslip__table th:nth-child(2) { width: 30%; }
.procslip__table th:nth-child(3) { width: 13%; }
.procslip__table th:nth-child(4) { width: 10%; }
.procslip__table th:nth-child(5),
.procslip__table th:nth-child(6) { width: 11%; }

.procslip__table tbody tr {
  height: 2.25rem;
}

/* On paper, 17 steps on one short bond sheet (8.5 × 11 in, which many
   offices use): at 2.25rem a row the slip ran onto a second page. */
@media print {
  .procslip__table tbody tr {
    height: 1.85rem;
  }
  .procslip__table {
    margin-top: 0.5rem;
  }
  .procslip__foot {
    margin-top: 0.5rem;
  }
}

.procslip__num {
  text-align: center;
  font-weight: 700;
  white-space: nowrap;
}

.procslip__now td {
  border-top-width: 2px;
  border-bottom-width: 2px;
}

.procslip__ink {
  color: #1d3a8a;
}

.procslip__scan {
  font-style: italic;
}

.procslip__foot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 1rem;
  font-size: 0.75rem;
}

.procslip__line {
  min-height: 1.125rem;
  border-bottom: 1px solid #111;
  padding-left: 0.25rem;
}

.procslip__how {
  margin: 0.75rem 0 0;
  padding-top: 0.5rem;
  border-top: 1px solid #bbb;
  font-size: 0.6875rem;
  color: #555;
}

@media (max-width: 620px) {
  .procslip__facts {
    grid-template-columns: max-content minmax(0, 1fr);
  }
  .procslip__table {
    font-size: 0.625rem;
  }
}

/* Process routes in Reports (31 October 2026): each step of a route
   with its counts. Scrolls sideways in its own box on a phone; the page
   does not. The step names stay readable (wrapping), the figures narrow. */
.steptable__wrap {
  overflow-x: auto;
  padding: 0 1.25rem 0.75rem;
}
.steptable {
  width: 100%;
  min-width: 40rem;
  border-collapse: collapse;
  font-size: 0.8125rem;
}
.steptable th,
.steptable td {
  padding: 0.5rem 0.5rem;
  border-bottom: 1px solid var(--border-soft);
  text-align: right;
  vertical-align: top;
  font-variant-numeric: tabular-nums;
}
.steptable thead th {
  font-weight: 600;
  color: var(--muted);
  font-size: 0.75rem;
  white-space: nowrap;
}
.steptable .steptable__step {
  text-align: left;
  width: 40%;
  min-width: 14rem;
}
.steptable__name {
  display: block;
  font-weight: 500;
}
.steptable__office {
  display: block;
  font-weight: 400;
  color: var(--muted);
  font-size: 0.75rem;
}
.steptable__warn {
  color: var(--warn);
  font-weight: 600;
}
.steptable__open {
  font: inherit;
  font-weight: 600;
  color: var(--accent);
  background: none;
  border: 0;
  padding: 0.125rem 0.375rem;
  border-radius: 4px;
  cursor: pointer;
  text-decoration: underline;
}
.steptable__open--warn {
  color: var(--warn);
}
.steptable__open:hover {
  background: var(--accent-soft, var(--border-soft));
}
.steptable__open:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* Process routes: a step's other offices (31 October 2026), tick boxes
   in a fieldset under "Done by". */
.procalso__set {
  border: 0;
  margin: 0 0 1rem;
  padding: 0;
  min-width: 0;
}
.procalso {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 1rem;
  margin-top: 0.25rem;
}
.procalso__item {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  min-width: 0;
}

/* Process routes: the papers a step needs (31 October 2026), ticked on
   the Routing panel. */
.procpapers {
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  margin: 0.75rem 0;
  padding: 0.5rem 0.875rem 0.75rem;
  min-width: 0;
}
.procpapers__head {
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0 0.25rem;
}
.procpapers__list {
  display: grid;
  gap: 0.375rem;
}
.procpapers__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
  font-size: 0.875rem;
  min-width: 0;
}
.procpapers__name {
  min-width: 0;
  overflow-wrap: anywhere;
}
.procpapers__who {
  color: var(--muted);
  font-size: 0.75rem;
}

/* Signing request once sent (Codex Sign proposal item 1, 31 October
   2026): the progress card, then the PDF and its history. */
.signedit.signedit--done {
  grid-template-areas: 'doc side';
  grid-template-rows: auto;
}
@media (max-width: 860px) {
  .signedit.signedit--done {
    grid-template-areas: 'doc' 'side';
  }
}
.signprogress {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem 1.25rem 1.125rem;
  margin: 0 0 1rem;
  min-width: 0;
}
.signprogress__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
}
.signprogress__head {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.35;
  min-width: 0;
  overflow-wrap: anywhere;
}
.signprogress__count {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.875rem;
  color: var(--muted);
  min-width: 12rem;
}
.signprogress__count .signprog {
  flex: 1 1 auto;
}
.signprogress__facts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: 0.5rem 1.25rem;
  margin: 0.875rem 0 0;
}
.signprogress__facts dt {
  font-size: 0.75rem;
  color: var(--muted);
}
.signprogress__facts dd {
  margin: 0.125rem 0 0;
  font-size: 0.875rem;
  min-width: 0;
  overflow-wrap: anywhere;
}
.signprogress__how {
  margin: 0.75rem 0 0;
  font-size: 0.8125rem;
  color: var(--muted);
}
.signprogress__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.875rem;
}
.signprogress__sub {
  margin: 1.125rem 0 0.375rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--muted);
}
.signprogress__copies {
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
  color: var(--muted);
}
.signtimeline {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border-soft);
}
.signtimeline__item {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr) auto;
  gap: 0.25rem 0.75rem;
  align-items: center;
  padding: 0.625rem 0;
  border-bottom: 1px solid var(--border-soft);
}
.signtimeline__order {
  display: inline-grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  border: 2px solid var(--c, var(--border));
  font-size: 0.75rem;
  font-weight: 600;
}
.signtimeline__who {
  display: grid;
  min-width: 0;
}
.signtimeline__name {
  font-weight: 500;
  overflow-wrap: anywhere;
}
.signtimeline__meta {
  font-size: 0.75rem;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.signtimeline__state {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.375rem;
  font-size: 0.8125rem;
  text-align: right;
}
.signtimeline__note {
  flex-basis: 100%;
  color: var(--muted);
  font-size: 0.75rem;
}
@media (max-width: 620px) {
  .signtimeline__item {
    grid-template-columns: 1.75rem minmax(0, 1fr);
  }
  .signtimeline__state {
    grid-column: 2;
    justify-content: flex-start;
    text-align: left;
  }
}

/* Skipped steps and papers on the route (31 October 2026). */
.procstep__skip {
  font-size: 0.75rem;
  color: var(--muted);
  font-style: italic;
  overflow-wrap: anywhere;
}
.procstep--skipped .procstep__name {
  text-decoration: line-through;
  text-decoration-color: var(--muted);
}
.procslip__papers {
  display: block;
  font-size: 0.55rem;
  font-weight: 400;
  line-height: 1.15;
}
.procslip__skipped td {
  color: #555;
}

/* ===================== Sign, Batch 2 (31 October 2026) ===================== */
/* Codex Sign proposal, items 2 and 3: the field sheet on a phone, More
   fields, a folded Add a person, the template's people under People,
   problems that link to what they are about, the fuller review, and the
   new request's one-line access and file facts. */
.signaccess {
  margin: 0.25rem 0 0.75rem;
  font-size: 0.875rem;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.signaccess__label {
  font-weight: 600;
  color: var(--text);
}
.signaccess__edit {
  margin-bottom: 0.5rem;
}
.signfile {
  margin: 0.375rem 0 0;
  font-size: 0.8125rem;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.signkind--more {
  color: var(--accent);
  border-style: dashed;
}
.signadd--closed {
  padding: 0.75rem 1.25rem 1rem;
}
.signtpl {
  margin: 0.75rem 1.25rem 0;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.signtpl__head {
  margin: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.signtpl .panelnote {
  padding: 0;
  margin: 0.25rem 0 0.75rem;
}
.signtpl__done {
  margin: 0 0 0.5rem;
  font-size: 0.875rem;
  overflow-wrap: anywhere;
}
.signtpl__problem {
  margin: 0.5rem 0;
}
.signtpl .actions {
  margin-top: 0.5rem;
}
.signproblems li {
  margin: 0.25rem 0;
  overflow-wrap: anywhere;
}
.signproblems__go {
  white-space: nowrap;
}
.signsheet[hidden] {
  display: none;
}
/* Only ever opened on a phone: over the foot of the screen, above the
   section bar, the selected field kept in view above it. */
.signsheet {
  position: fixed;
  left: 0.5rem;
  right: 0.5rem;
  bottom: calc(4.5rem + env(safe-area-inset-bottom));
  z-index: 110;
  max-height: 45vh;
  overflow-y: auto;
  padding: 0.5rem 0 0.75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-pop);
}
.signsheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0 0.75rem 0.25rem;
}
.signsheet__title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  min-width: 0;
  overflow-wrap: anywhere;
}
.signsheet .signsel {
  margin: 0;
  padding: 0.25rem 0.75rem 0;
  border: 0;
}
.signsheet .signnudge .button--small {
  min-height: 2.5rem;
  min-width: 2.75rem;
}
.sharecard--review {
  max-height: min(88vh, calc(100dvh - 2rem));
}
.signreview__facts {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.25rem 0.75rem;
  margin: 0.5rem 0 0.75rem;
  font-size: 0.875rem;
}
.signreview__facts dt {
  color: var(--muted);
}
.signreview__facts dd {
  margin: 0;
  overflow-wrap: anywhere;
}
.signreview__head {
  margin: 0 0 0.25rem;
  font-size: 0.875rem;
  font-weight: 600;
}
.signreview__people {
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0;
}
.signreview__person {
  display: flex;
  gap: 0.625rem;
  padding: 0.5rem 0;
  border-top: 1px solid var(--border);
  min-width: 0;
}
.signreview__n {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--c);
  color: var(--surface);
  font-size: 0.75rem;
  font-weight: 700;
}
.signreview__who {
  display: grid;
  gap: 1px;
  min-width: 0;
}
.signreview__name {
  font-size: 0.875rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.signreview__how,
.signreview__copies {
  font-size: 0.8125rem;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.signreview__copies {
  margin: 0 0 0.75rem;
}

/* Process routes: the paper baseline (31 October 2026). Before and now
   in Reports; the figures typed in under Settings. */
.routebase {
  margin: 0.5rem 0 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}
.routebase__title {
  margin: 0 1.25rem 0.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
}
.routebase .panelnote {
  margin-top: 0.5rem;
}
.procbase {
  margin: 0.25rem 0 0.5rem;
  padding: 0;
}
.basesteps {
  display: grid;
  gap: 0.375rem;
  margin: 0.25rem 0 0.75rem;
}
.basesteps__head {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
}
.basestep {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 6rem;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
}
.basestep__name {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* ===================== Docs workspace (31 October 2026) ===================== */
/* The approved v2 design: the current step's card leads Overview, the
   whole width; papers beside the next hand-off on a laptop, stacked
   (papers first) on a phone; the route folded under it; files and the
   record's context below. Existing tokens and controls only. */
.docoverview__work {
  min-width: 0;
}
.stepcard {
  /* Brought to the top after a scan: not under the pinned header. */
  scroll-margin-top: 5rem;
  padding: 0;
  overflow: hidden;
}
.stepcard__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.25rem 1rem;
  align-items: start;
  padding: 1.25rem 1.25rem 1rem;
}
.stepcard__n {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 1.25rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.stepcard__what {
  min-width: 0;
}
.stepcard__eyebrow {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.stepcard__name {
  margin: 0.125rem 0 0.375rem;
  font-size: 1.125rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.stepcard__where {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  border-radius: 6px;
  background: var(--surface-2, var(--bg));
  border: 1px solid var(--border);
  font-size: 0.8125rem;
  font-weight: 500;
  overflow-wrap: anywhere;
}
.stepcard__where--mine {
  border-color: var(--ok, var(--border));
  color: var(--ok, var(--text));
}
.stepcard__due {
  display: grid;
  justify-items: end;
  gap: 0.125rem;
  text-align: right;
}
.stepcard__duelabel,
.stepcard__duenote {
  font-size: 0.8125rem;
  color: var(--muted);
}
.stepcard__duedate {
  font-size: 1rem;
}
.stepcard__duedate--late {
  color: var(--warn);
}
.stepcard__notes {
  padding: 0 1.25rem 0.75rem;
}
.stepcard__notes > * {
  margin: 0 0 0.375rem;
}
.stepcard > .notice {
  margin: 0 1.25rem 0.75rem;
}
.stepcard__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  border-top: 1px solid var(--border);
}
.stepcard__check,
.stepcard__next {
  padding: 1.125rem 1.25rem 1.25rem;
  min-width: 0;
}
.stepcard__next {
  border-left: 1px solid var(--border);
  background: var(--bg);
}
.stepcard__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
}
.stepcard__sub {
  margin: 0.25rem 0 0.75rem;
  font-size: 0.875rem;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.stepcard__check .procpapers {
  margin: 0;
}
.stepcard__aside {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}
.stepcard__next .routing__form {
  padding: 0;
}
.stepcard__next .routing__heading {
  margin: 0.125rem 0 0.5rem;
  font-size: 1.0625rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.stepcard__foot {
  padding: 0.875rem 1.25rem 1rem;
  border-top: 1px solid var(--border);
}
.stepcard__footline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-top: 0.5rem;
}
.stepcard__footline .stepcard__sub {
  margin: 0;
  margin-right: auto;
}
.stepcard__route {
  margin-top: 0.75rem;
}
.stepcard__route > summary {
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--accent);
}
.stepcard__subhead {
  margin: 1rem 0 0.375rem;
  font-size: 0.875rem;
  font-weight: 600;
}
.docfiles {
  list-style: none;
  margin: 0;
  padding: 0 1.25rem;
}
.docfiles__file {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.5rem 0;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: none;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.docfiles li:last-child .docfiles__file {
  border-bottom: 0;
}
.docfiles__kind {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--accent);
}
.docfiles__name {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 0.875rem;
  font-weight: 500;
}
.docfiles__meta {
  font-size: 0.8125rem;
  color: var(--muted);
}
.procpapers__say .panelfail {
  margin-top: 0.5rem;
}
@media (max-width: 860px) {
  .stepcard__head {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .stepcard__due {
    grid-column: 1 / -1;
    justify-items: start;
    text-align: left;
    grid-template-columns: auto auto auto;
    gap: 0.5rem;
    align-items: baseline;
  }
  .stepcard__body {
    grid-template-columns: minmax(0, 1fr);
  }
  .stepcard__next {
    border-left: 0;
    border-top: 1px solid var(--border);
  }
}
.stepcard .procpapers {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}
.stepcard .procpapers__head {
  padding: 0;
  margin-bottom: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--muted);
}
.procpapers__who--missing {
  color: var(--warn);
}
.procpapers__left {
  margin: 0.5rem 0;
  font-size: 0.875rem;
  color: var(--warn);
  overflow-wrap: anywhere;
}
.procpapers__left:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
@media (max-width: 860px) {
  .stepcard__due {
    display: flex;
    flex-wrap: wrap;
    gap: 0.125rem 0.5rem;
  }
}

/* New document (31 October 2026): the approved v2 creation design. */
.docnew {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}
.docnew__details,
.docnew__after {
  min-width: 0;
}
.docnew__title,
.docnew__aftertitle {
  margin: 0 0 0.75rem;
  font-size: 1.0625rem;
  font-weight: 700;
}
.docnew__after {
  padding: 1.125rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface);
}
.docnew__choices {
  margin: 0 0 0.75rem;
  padding: 0;
  border: 0;
}
.docnew__choice {
  display: flex;
  gap: 0.625rem;
  align-items: flex-start;
  padding: 0.625rem 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.docnew__choice input {
  margin-top: 0.2rem;
}
.docnew__choicetext {
  display: grid;
  gap: 1px;
  min-width: 0;
}
.docnew__choicename {
  font-weight: 600;
  font-size: 0.9375rem;
}
.docnew__choice:has(input:checked) .docnew__choicename {
  color: var(--accent);
}
.docnew__choicehint {
  font-size: 0.8125rem;
  color: var(--muted);
}
.docnew__afternote {
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
  color: var(--muted);
}
.docnew__file {
  margin: 0.25rem 0 0.75rem;
  padding: 0.75rem 1rem;
  border: 1px dashed var(--border);
  border-radius: 10px;
}
.docnew__file .field {
  margin-bottom: 0;
}
.docnew__chosen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  align-items: center;
  margin-top: 0.5rem;
  font-size: 0.875rem;
}
.docnew__chosenname {
  min-width: 0;
  overflow-wrap: anywhere;
}
.docnew__handler {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.75rem;
  font-size: 0.875rem;
}
.docnew__handlerwords {
  min-width: 0;
  overflow-wrap: anywhere;
}
.docnew__actions {
  align-items: center;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.docnew__outcome {
  flex: 1 1 16rem;
  margin: 0;
  font-size: 0.875rem;
  color: var(--muted);
  min-width: 0;
}
@media (max-width: 860px) {
  .docnew {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* The two columns need more than the 44rem other new-record forms use. */
.newrecord > .form:has(> .docnew) {
  max-width: 72rem;
}
.docnew__route .panelnote {
  padding: 0;
  margin: 0 0 0.75rem;
}

/* From and To: add a name to the CRM in one tap (doc_party_links). */
.partyadd {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0;
  font-size: 0.875rem;
  color: var(--muted);
}
.partyadd__lead {
  margin-right: 0.25rem;
  overflow-wrap: anywhere;
}
/* A pair with one half hidden (From or To, by direction): the other takes
   the whole row, so its CRM matches and "Add … as" fit on one line. */
.fieldpair:has(> [hidden]) {
  grid-template-columns: minmax(0, 1fr);
}
.supplierfind .partyadd {
  padding: 0.5rem 0 0.25rem;
  border: 0;
}
/* Under a field, the matches line up with the box, not inset as a panel's
   rows are. */
.rows.supplierfind {
  padding: 0;
}
.rows.supplierfind:empty {
  display: none;
}

/* A scan for each paper on a route step (doc_paper_scans). */
.procpapers__tick {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  cursor: pointer;
}
.procpapers__scan {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  /* On the paper's own line, at the right (tidy up, 4 November 2026):
     on a line of its own under every paper it doubled the list. */
  margin-left: auto;
  font-size: 0.8125rem;
}
.procpapers__file {
  overflow-wrap: anywhere;
  text-align: left;
}
.procpapers__picker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 0.75rem;
  flex-basis: 100%;
  margin: 0.25rem 0 0.5rem 1.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px dashed var(--border);
  border-radius: 8px;
  font-size: 0.8125rem;
}
.procpapers__or {
  color: var(--muted);
}
.procpapers__pick {
  overflow-wrap: anywhere;
  text-align: left;
}
.paperscans {
  list-style: none;
  margin: 0;
  padding: 0 1.25rem 1rem;
}
.paperscans__step {
  padding: 0.625rem 0;
  border-top: 1px solid var(--border);
}
.paperscans__step:first-child {
  border-top: 0;
}
.paperscans__head {
  margin: 0 0 0.375rem;
  font-size: 0.875rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.paperscans__step--now .paperscans__head {
  color: var(--accent);
}
.paperscans__papers {
  list-style: none;
  margin: 0;
  padding: 0 0 0 1rem;
  display: grid;
  gap: 0.25rem;
}
.paperscans__paper {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  align-items: baseline;
  font-size: 0.875rem;
  min-width: 0;
}
.paperscans__name {
  overflow-wrap: anywhere;
}
.paperscans__meta {
  font-size: 0.8125rem;
  color: var(--muted);
}

/* The logo is a button home (Overview, or Clients on the control panel). */
.rail__home {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: -0.375rem 0;
  padding: 0 0.25rem;
  border: 0;
  border-radius: 8px;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.rail__home:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ===================== the Guests tab (2 November 2026) =====================
   The approved guest workspace: the meeting's facts, three figures, the
   guests in a table (cards on a phone), one guest's details, Add guest and
   Import as panels inside the list, and one follow-up band. */
.reclayout.reclayout--wide {
  grid-template-columns: minmax(0, 1fr);
}
.reclayout--wide > :nth-child(2) {
  display: none;
}
.guestws[hidden] {
  display: none;
}
.rectabs__count {
  display: inline-block;
  margin-left: 0.375rem;
  padding: 0 0.4375rem;
  border-radius: var(--r-pill);
  background: var(--neutral-soft);
  color: var(--text-2);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.25rem;
}
.rectabs__tab--on .rectabs__count {
  background: var(--accent-soft);
  color: var(--accent);
}
.guestmeta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0;
  margin: 0 0 1rem;
  font-size: 0.875rem;
  color: var(--text-2);
}
.guestmeta > span + span::before {
  content: '\00b7';
  margin: 0 0.5rem;
  color: var(--muted);
}
.guestmeta__on {
  color: var(--text);
  font-weight: 600;
}
.guestfigs {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 1.25rem;
}
/* Four with Arrived (check-in, 2 November 2026). */
.guestfigs--four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.guestfigs .figure__value {
  margin: 0.375rem 0 0.25rem;
}
.guestpanel {
  margin-bottom: 1.25rem;
}
.guestpanel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  padding: 1.125rem 1.25rem 0.75rem;
}
.guestpanel__head .panel__title {
  margin: 0;
}
.guestpanel__sub {
  margin: 0.25rem 0 0;
  font-size: 0.8125rem;
  color: var(--muted);
}
.guestpanel__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.guestpanel__slot:empty {
  display: none;
}
.guestpanel__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0 1.25rem 0.75rem;
}
.guestfilters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}
.guestfilter {
  min-height: 2rem;
  padding: 0 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--text-2);
  font-family: var(--sans);
  font-size: 0.8125rem;
  cursor: pointer;
}
.guestfilter[aria-pressed='true'] {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}
.guestsearch.field__input {
  width: 15rem;
  max-width: 100%;
}
.guesttable__wrap {
  border-top: 1px solid var(--border);
}
.guesttable {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.guesttable th {
  padding: 0.625rem 1.25rem;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
  background: var(--neutral-soft);
}
.guesttable td {
  padding: 0.75rem 1.25rem;
  border-top: 1px solid var(--border-soft);
  vertical-align: middle;
  color: var(--text);
}
.guesttable td.empty {
  text-align: center;
  color: var(--muted);
}
.guesttable__who {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}
.guesttable__id {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.guesttable__name {
  font-weight: 600;
  overflow-wrap: anywhere;
}
.guesttable__sub {
  font-size: 0.8125rem;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.guesttable__none {
  color: var(--muted);
}
.guesttable__act {
  text-align: right;
}
.guestpanel__count {
  margin: 0;
  padding: 0.75rem 1.25rem 0;
  border-top: 1px solid var(--border-soft);
  font-size: 0.8125rem;
  color: var(--muted);
}
.guestpanel__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.5rem 1.25rem 1rem;
}
.guestpanel > .guesttools__slot {
  padding: 0 1.25rem 1rem;
}
.guestpanel > .empty {
  padding: 0 1.25rem 1.25rem;
}
.guestform {
  margin: 0 1.25rem 1rem;
  padding: 1rem 1.125rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: var(--surface-2);
}
.guestform__title {
  margin: 0 0 0.75rem;
  font-size: 1rem;
}
.guestform .actions {
  margin-top: 0.5rem;
}
.guestform .guesttools__slot {
  margin-top: 0.75rem;
}
.guestdetails {
  margin: 0 1.25rem 1.25rem;
  padding: 1.125rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
}
.guestdetails__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
}
.guestdetails__eyebrow {
  display: block;
}
.guestdetails__name {
  margin: 0.125rem 0 0;
  font-size: 1.125rem;
  overflow-wrap: anywhere;
}
.guestdetails__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.5rem;
}
.guestdetails__fact {
  margin-bottom: 0.875rem;
}
.guestdetails__value {
  margin-top: 0.25rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.guestdetails__link {
  display: grid;
  gap: 0.375rem;
  justify-items: start;
}
.guestdetails__link .field__hint {
  margin: 0;
}
.guestdetails__acts {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1rem;
}
.guestdetails > .field__error:empty {
  display: none;
}
.guestfollow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin-bottom: 1rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--accent-soft);
}
.guestfollow__sub {
  margin-top: 0.125rem;
  font-size: 0.8125rem;
  color: var(--text-2);
}
.guestfollow__review,
.guestfollow__slot {
  flex: 1 1 100%;
}
.guestfollow__review {
  display: grid;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  background: var(--surface);
}
.guestfollow__review p,
.guestfollow__slot p {
  margin: 0;
}
.guestfollow__slot:empty {
  display: none;
}
.guesthint {
  margin: 0;
}
.guestcard {
  display: grid;
  gap: 0.75rem;
  justify-items: start;
  padding: 1rem 1.125rem;
}
.guestcard__line,
.guestcard .empty {
  margin: 0;
  padding: 0;
  font-size: 0.875rem;
}

/* A phone: the figures in one column, each guest a card with the labels
   of its numbers, the details in one column. */
@media (max-width: 720px) {
  .guestfigs {
    grid-template-columns: minmax(0, 1fr);
  }
  .guestsearch.field__input {
    width: 100%;
  }
  .guesttable thead {
    display: none;
  }
  .guesttable,
  .guesttable tbody,
  .guesttable tr {
    display: block;
  }
  .guesttable tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem 0.75rem;
    padding: 0.875rem 1.25rem;
    border-top: 1px solid var(--border-soft);
  }
  .guesttable td {
    padding: 0;
    border: none;
  }
  .guesttable td.guesttable__who {
    grid-column: 1 / -1;
  }
  .guesttable td[data-label]:not(.guesttable__who)::before {
    content: attr(data-label);
    display: block;
    font-size: 0.75rem;
    color: var(--muted);
  }
  .guesttable td.guesttable__act {
    grid-column: 1 / -1;
    text-align: left;
  }
  .guestdetails__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- checking guests in, the group link (2 November 2026) ---------- */
.checkin__line { color: var(--muted); margin: 0; }
.checkin__table { margin: 0.25rem 0 0; font-size: 1.375rem; font-weight: 800; color: var(--text); overflow-wrap: anywhere; }
.guesttables__note { margin: 0.5rem 0 0; }
.guestreplyby__note { margin: 0; padding: 0 1.25rem 0.75rem; }
.guestreplyby__form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem; padding: 0 1.25rem 1.125rem; }
.guestreplyby > .field__error:not(:empty) { padding: 0 1.25rem 1rem; margin: 0; }
.guestreplyby__field { margin: 0; min-width: 0; }
.guestreplyby__form .guestpanel__acts { margin: 0; }
.checkin__step { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0.75rem 0 0.25rem; }
.checkin__label { display: flex; flex-direction: column; gap: 0.125rem; }
.checkin__ctl { display: flex; align-items: center; gap: 0.25rem; }
.checkin__btn { width: 2.75rem; height: 2.75rem; padding: 0; justify-content: center; font-size: 1.25rem; }
.checkin__value { min-width: 2rem; text-align: center; font-size: 1.25rem; font-weight: 600; }
.grouplink__form { margin-top: 0.75rem; }
.grouplink__on { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.75rem; }
.grouplink__row { display: flex; gap: 0.5rem; align-items: center; }
.grouplink__url { flex: 1 1 auto; min-width: 0; }
.guesttable__act { white-space: nowrap; }
.guesttable__act .button--small + .button--small { margin-left: 0.375rem; }

/* ---- Invitation designer (stage 3, batch 1; approved 2 November 2026) ----
   In the meeting's Guests tab. The invitation itself is drawn by
   invite-styles.js (class .mxp), the same as the guest's page. */
.guestdesign__done { margin: 0 1.25rem 1rem; }
.guestdesign__error { margin: 0 1.25rem 0.75rem; }
.designer { margin-bottom: 1rem; }
.designer__head {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
  gap: 0.75rem 1rem; padding: 1.125rem 1.25rem 0;
}
.designer__head .panel__title { margin: 0; }
.designer__steps { display: flex; gap: 1.5rem; padding: 1rem 1.25rem 0; overflow-x: auto; }
.designer__step {
  display: flex; align-items: center; gap: 0.5rem; padding: 0 0 0.75rem; border: 0;
  border-bottom: 2px solid transparent; background: none; color: var(--muted);
  font: inherit; font-size: 0.875rem; font-weight: 500; cursor: pointer; white-space: nowrap;
}
.designer__step b {
  display: inline-flex; align-items: center; justify-content: center; width: 1.375rem; height: 1.375rem;
  border-radius: 50%; border: 1px solid var(--border); font-size: 0.75rem; font-weight: 600;
}
.designer__step[aria-current='step'] { color: var(--accent); border-bottom-color: var(--accent); }
.designer__step[aria-current='step'] b { background: var(--accent-solid); border-color: var(--accent-solid); color: #fff; }
.designer__h { margin: 0 0 0.25rem; font-size: 1.375rem; font-weight: 600; letter-spacing: -0.01em; }
.designer__gallery { padding: 1.25rem; }
.designer__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin-top: 1.25rem; }
.designer__style {
  display: flex; flex-direction: column; gap: 0.25rem; padding: 0; border: 0; background: none;
  color: var(--text); text-align: left; font: inherit; cursor: pointer; min-width: 0;
}
/* The gallery's cards: each style's own artwork (the approved fragment's
   colours), drawn on a light card in both themes, as the invitation is. */
.dgart {
  height: 15rem; padding: 1.5rem; display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center; border: 2px solid transparent; border-radius: 12px; position: relative; overflow: hidden; isolation: isolate;
  background: #f8f4e9; color: #355b4a; container-type: inline-size; pointer-events: none;
}
.dgart > * { position: relative; z-index: 1; }
.dgart::before, .dgart::after { content: ''; position: absolute; pointer-events: none; z-index: 0; }
.dgart small { display: block; font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.16em; margin-bottom: 1.25rem; }
.dgart b { font: 500 2.25rem/1.05 'Cormorant Garamond', Georgia, serif; letter-spacing: -0.02em; }
.dgart em { font-style: normal; font-size: 0.625rem; letter-spacing: 0.12em; margin-top: 1.25rem; }
.dgart--wedding { background-repeat: no-repeat; background-position: left bottom, right top; background-size: 44% auto, 32% auto; }
.dgart--formal { background: #23443a; color: #f0dfb8; }
.dgart--formal::before { inset: 12px; border: 1px solid rgba(208, 185, 135, .5); }
.dgart--formal::after { inset: 16px; border: 1px solid rgba(208, 185, 135, .25); }
.dgart--party { background: #efb09a; color: #52315c; }
.dgart--party::before { width: 100%; height: 140%; border-radius: 50%; background: #dfc0eb; left: 35%; top: -10%; transform: rotate(-30deg); }
.dgart--party b { font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-weight: 700; transform: rotate(-6deg); font-size: clamp(1.125rem, 13cqw, 2.25rem); }
.dgart--fiesta { background: #f4c568; color: #7e382c; }
.dgart--fiesta::before { height: 42px; top: 0; left: 0; right: 0;
  background: repeating-linear-gradient(90deg, #a54938 0 16%, #548472 16% 32%, #ac7099 32% 48%);
  clip-path: polygon(0 0, 100% 0, 100% 60%, 90% 100%, 80% 60%, 70% 100%, 60% 60%, 50% 100%, 40% 60%, 30% 100%, 20% 60%, 10% 100%, 0 60%); }
.dgart--fiesta b { font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-weight: 600; }
.dgart--seminar { background: #e7f0f1; color: #204d59; align-items: flex-start; text-align: left; }
.dgart--seminar::before { width: 70%; height: 100%; background: #c1dfe1; right: -40%; bottom: -20%; transform: rotate(35deg); }
.dgart--seminar b, .dgart--plain b { font-family: Inter, system-ui, sans-serif; font-weight: 600; font-size: 1.75rem; letter-spacing: -0.04em; }
.dgart--seminar small { border-top: 3px solid #387882; padding-top: 9px; }
.dgart--plain { background: #eeeae1; color: #30333b; align-items: flex-start; text-align: left; }
.dgart--plain::after { left: 25px; right: 25px; bottom: 22px; height: 1px; background: rgba(48, 51, 59, .33); }
.designer__style[aria-pressed='true'] .dgart { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.designer__style:focus-visible { outline: none; }
.designer__style:focus-visible .dgart { outline: 3px solid var(--accent); outline-offset: 2px; }
.designer__stylename { display: flex; justify-content: space-between; gap: 0.5rem; margin-top: 0.5rem; font-weight: 600; font-size: 0.9375rem; }
.designer__picked { font-size: 0.8125rem; font-weight: 500; color: var(--accent); }
.designer__styledesc { font-size: 0.8125rem; color: var(--muted); }
.designer__editor { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 1rem; align-items: start; }
.designer__phoneswitch { display: none; }
.designer__canvas { min-width: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.designer__canvas .mxp { width: 100%; max-width: 34rem; margin: 0 auto; }
.designer__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.designer__stylelabel { font-weight: 600; }
.designer__tools { display: flex; gap: 0.375rem; margin-left: auto; }
.designer__tools [aria-pressed='true'], .designer__tabs [aria-pressed='true'], .designer__phoneswitch [aria-pressed='true'] {
  background: var(--accent-soft); color: var(--accent); border-color: var(--accent);
}
.designer__inspector {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius, 12px);
  padding: 1rem; display: flex; flex-direction: column; gap: 0.75rem; min-width: 0;
}
.designer__tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.375rem; }
.designer__label { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.8125rem; font-weight: 600; margin-top: 0.25rem; }
.designer__colourname { font-weight: 500; color: var(--muted); }
.designer__swatches { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.designer__swatch {
  width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 2px solid var(--surface);
  box-shadow: 0 0 0 1px var(--border); font: inherit; font-weight: 700; cursor: pointer;
}
.designer__swatch[aria-pressed='true'] { box-shadow: 0 0 0 2px var(--accent); }
.designer__swatch:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.designer__own { display: flex; align-items: flex-end; gap: 0.625rem; }
.designer__picker { width: 2.75rem; height: 2.75rem; padding: 0; border: 1px solid var(--border); border-radius: 10px; background: none; cursor: pointer; flex: none; }
.designer__hexwrap { display: flex; flex-direction: column; gap: 0.25rem; flex: 1; min-width: 0; }
.designer__hexlabel { font-size: 0.75rem; font-weight: 600; color: var(--muted); }
.designer__hex { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; }
.designer__sample {
  border-radius: 999px; min-height: 2.75rem; display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 0.9375rem;
}
.designer__fonts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.375rem; }
.designer__fonts:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.designer__font { display: flex; flex-direction: column; align-items: center; gap: 0.125rem; min-height: 3.5rem; }
.designer__font[aria-pressed='true'] { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.designer__aa { font-size: 1.25rem; line-height: 1.1; }
.designer__next { display: flex; justify-content: flex-end; margin: 1rem 0; }
.designer__preview { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1rem; }
.designer__samplesel { width: auto; min-width: 14rem; }
.designer__guest { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(16rem, 1fr); gap: 1.25rem; align-items: start; max-width: 60rem; width: 100%; margin: 0 auto; }
.designer__guest--phone { grid-template-columns: minmax(0, 1fr); max-width: 24rem; }
.designer__resp { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 1.25rem; display: flex; flex-direction: column; gap: 0.875rem; min-width: 0; }
.designer__ask { margin: 0; font-size: 1.25rem; font-weight: 700; }
.designer__hostnote { margin: 0; padding: 0.125rem 0 0.125rem 0.75rem; border-left: 3px solid var(--d-accent, var(--accent)); font-size: 0.875rem; line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; }
.designer__replymsg { display: flex; align-items: center; gap: 0.5rem; margin: -0.25rem 0 1rem; font-size: 0.9375rem; cursor: pointer; }
.designer__replymsg input { width: 1.125rem; height: 1.125rem; margin: 0; accent-color: var(--accent-solid); }
.designer__replymsg:has(input:disabled) { color: var(--muted); cursor: default; }
.designer__seats { display: flex; flex-direction: column; padding: 0.75rem 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); font-size: 0.8125rem; color: var(--muted); }
.designer__seats strong { color: var(--text); font-size: 0.9375rem; }
.designer__answers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.designer__answer {
  min-height: 3rem; border-radius: 12px; border: 1px solid var(--border); background: var(--surface);
  color: var(--text); font: inherit; font-weight: 600; cursor: pointer;
}
.designer__answer[aria-pressed='true'], .designer__send { background: var(--d-accent); border-color: var(--d-accent); color: var(--d-on); }
.designer__send { min-height: 3rem; border-radius: 999px; border: 0; font: inherit; font-weight: 600; opacity: 0.75; }
.designer__apply { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; padding: 1rem 1.25rem; }
.designer__apply > [role] { flex-basis: 100%; }
.designer__apply > .field__hint:empty { display: none; }
.designer__applytitle { margin: 0; font-weight: 600; }
@media (max-width: 980px) {
  .designer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .designer__editor { grid-template-columns: minmax(0, 1fr); }
  .designer__phoneswitch { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
  .designer__editor[data-phone='controls'] .designer__canvas { display: none; }
  .designer__editor[data-phone='canvas'] .designer__inspector { display: none; }
  .designer__guest { grid-template-columns: minmax(0, 1fr); }
  .dgart { height: 12rem; padding: 1rem; }
  .dgart b { font-size: 1.75rem; }
}
@media (max-width: 480px) {
  .designer__grid { gap: 0.875rem; }
  .dgart { height: 11rem; }
  .dgart b { font-size: 1.5rem; }
  .dgart--seminar b, .dgart--plain b { font-size: 1.375rem; }
  .dgart small, .dgart em { font-size: 0.5625rem; letter-spacing: 0.08em; }
  .designer__samplesel { min-width: 0; flex: 1; }
}
.guestdesign__kept { margin: 0 1.25rem 0.75rem; }
.designer__stepper { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.designer__stepper strong { display: block; font-size: 0.875rem; }
.designer__stepper span { font-size: 0.8125rem; color: var(--muted); }
.designer__step-ctrls { display: flex; align-items: center; gap: 0.25rem; }
.designer__step-btn { width: 2.75rem; height: 2.75rem; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-size: 1.25rem; cursor: pointer; }
.designer__step-btn:disabled { opacity: 0.4; cursor: default; }
.designer__step-n { width: 1.75rem; text-align: center; font-weight: 600; }
.designer__party { margin: 0; font-size: 0.875rem; font-weight: 600; }
.designer__note summary { font-size: 0.875rem; color: var(--accent); cursor: pointer; }
/* Batch 2: the photo or card cover. */
.designer__covers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.375rem; }
.designer__covers--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.designer__covers .designer__font { min-height: 2.75rem; }
.designer__upload { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; cursor: pointer; }
.designer__upload:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.designer__warn { color: var(--warn); }
p.notice.designer__warn { color: var(--text); }
.designer__guide { font-size: 0.875rem; font-weight: 600; color: var(--accent); }
.designer__canvalinked { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 0.5rem; font-size: 0.875rem; overflow-wrap: anywhere; }
.designer__carddetails { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.75rem; font-size: 0.9375rem; font-weight: 600; cursor: pointer; }
.designer__carddetails input { width: 1.125rem; height: 1.125rem; margin: 0; accent-color: var(--accent-solid); }
.designer__crops { display: flex; gap: 0.75rem; align-items: flex-end; }
.designer__crop { margin: 0; display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.75rem; color: var(--muted); }
.designer__croppic { background: var(--surface-2) center / cover no-repeat; border: 1px solid var(--border); border-radius: 8px; }
.designer__crop--phone .designer__croppic { width: 5.5rem; height: 4.25rem; }
.designer__crop--computer .designer__croppic { width: 9rem; height: 4.25rem; }
/* The cover's file box is reached through its labelled button. */
.designer__inspector input[type='file'] {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; opacity: 0;
}

/* Simpler desk flow (4 November 2026): "All are in" beside the papers,
   the hand-off's extras folded, "Something's wrong?" in the step card's
   foot, and the one question asked when sending. */
.procpapers__all {
  justify-self: start;
  margin: 0 0 0.25rem 0.25rem;
  font-weight: 600;
}
.routing__more {
  margin-top: 0.5rem;
}
.routing__more > summary {
  cursor: pointer;
  color: var(--accent);
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.25rem 0;
}
.routing__more[open] > summary {
  margin-bottom: 0.5rem;
}
.stepcard__wrong > summary {
  list-style: none;
  cursor: pointer;
}
.stepcard__wrong > summary::-webkit-details-marker {
  display: none;
}
.stepcard__wrong[open] {
  flex-basis: 100%;
}
.stepcard__wrong[open] > summary {
  display: inline-block;
  margin-bottom: 0.5rem;
}
.stepcard__wrongbody {
  display: grid;
  gap: 0.25rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: var(--surface-2);
}
.stepcard__wrongbody > .routing__process:first-child {
  margin-top: 0;
}
.sendcheck__list {
  margin: 0.25rem 0 0;
  padding-left: 1.25rem;
}
.sendcheck__ask {
  margin: 0.75rem 0 0.25rem;
  font-weight: 600;
}
.sendcheck__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin: 0.25rem 0 0.5rem;
}
.sendcheck__chip {
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  border-radius: 999px;
  padding: 0.4rem 0.75rem;
  font-size: 0.875rem;
}
.sendcheck__chip[aria-pressed='true'] {
  background: var(--accent-solid);
  border-color: transparent;
  color: #fff;
}

/* New appointment's folded "More details" (4 November 2026). */
.apptmore {
  margin: 0.5rem 0 1.25rem;
  border-top: 1px solid var(--border);
  padding-top: 0.75rem;
}
.apptmore > summary {
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.375rem 0;
  color: var(--accent);
}
.apptmore__what {
  display: block;
  font-weight: 400;
  color: var(--muted);
  font-size: 0.8125rem;
  margin-top: 0.125rem;
}
.apptmore[open] > summary {
  margin-bottom: 0.75rem;
}
.apptcopy {
  margin: 0 0 1rem;
}

/* Register and add another (4 November 2026): what has been logged, at
   the top of New document, with one Print for every slip. */
.docbatch {
  margin: 0 0 1rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--accent-line);
  border-radius: 0.75rem;
  background: var(--accent-soft);
}
.docbatch__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
}
.docbatch__title {
  margin: 0;
  font-size: 1rem;
}
.docbatch__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.docbatch__list {
  margin: 0.625rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.25rem;
  max-height: 14rem;
  overflow-y: auto;
}
.docbatch__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.25rem 0.75rem;
  align-items: baseline;
  padding: 0.375rem 0;
  border-top: 1px solid var(--accent-line);
  font-size: 0.875rem;
}
.docbatch__item:first-child {
  border-top: 0;
}
.docbatch__ref {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.docbatch__ref:hover {
  text-decoration: underline;
}
.docbatch__subject {
  min-width: 0;
  overflow-wrap: anywhere;
}
.docbatch__where {
  color: var(--muted);
  white-space: nowrap;
}
.docbatch__note {
  grid-column: 1 / -1;
  color: var(--warn);
}
@media (max-width: 620px) {
  .docbatch__item {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .docbatch__where {
    grid-column: 2;
  }
}

/* Tidy up (4 November 2026): "All are in" at the end of the papers'
   heading line, not a line of its own above the list. */
.procpapers .procpapers__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  padding: 0;
}
.procpapers .procpapers__all {
  margin: 0;
  font-size: 0.8125rem;
}

/* On a phone the empty box already says it is not checked; without the
   note, Attach scan fits on the paper's line. */
@media (max-width: 620px) {
  .procpapers__who--todo {
    display: none;
  }
}

/* Tidy up (4 November 2026): the access sentence on New document as a
   plain line, like "Handled by", not a boxed note; the file a line too. */
.docnew .docaccess {
  margin: 0.25rem 0 0;
  padding: 0;
  border-left: 0;
  background: none;
  color: var(--muted);
}
.docnew .docaccess__more {
  margin: 0 0 0.75rem;
}
.docnew .docnew__file {
  margin: 0;
  padding: 0.75rem 0;
  justify-content: flex-start;
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
}
.docnew .docnew__filewords {
  min-width: 0;
  overflow-wrap: anywhere;
  margin-right: auto;
}

/* ============ Account and Settings tidied (4 November 2026) ============
   The founder: "check account and settings fix the layout it looks
   cluttered". Each page now has its own heading and a line saying what
   it is for; long pages were split; a few panels whose text sat against
   their edges got the same 1.25rem inset as the rest. */
.setlayout__head {
  margin: 0.125rem 0 1rem;
}

.setlayout__title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--text);
}

.setlayout__about {
  margin: 0.25rem 0 0;
  max-width: 44rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--muted);
}

/* Panels one after another on a settings page: one steady gap. */
.setlayout__main > .panel {
  margin: 0 0 1rem;
}

/* A panel body whose own content has no inset. */
.panelpad {
  padding: 0.25rem 1.25rem 1.25rem;
}

.procroute.procroute--pad {
  padding: 0.75rem 1.25rem 1rem;
}

.procroute--pad .panelactions {
  padding: 0.75rem 0 0;
}

.procroute--pad:last-child {
  border-bottom: none;
}

/* Document types: name and state on the left, the buttons on the right,
   on one line. */
.doctypes .procstep {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.375rem 1rem;
}

.doctypes .procstep__top {
  justify-content: flex-start;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
}

.doctypes .procstep__acts {
  margin-top: 0;
}

/* ============ Roles and permissions (5 November 2026) ============ */
.panelflash,
.panelnotice {
  margin: 0 1.25rem 0.75rem;
}

.rolelist {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border-soft);
}

.rolerow {
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--border-soft);
}

.rolerow__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
}

.rolerow__who {
  min-width: 0;
  flex: 1 1 16rem;
}

.rolerow__name {
  font-weight: 600;
  color: var(--text);
}

.rolerow__meta {
  font-size: 0.8125rem;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.rolerow__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.roleedit {
  margin-top: 0.75rem;
  padding: 0.75rem 1rem 1rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: var(--surface-2, var(--page));
}

.roleapp {
  display: grid;
  grid-template-columns: minmax(7rem, 10rem) minmax(0, 15rem) auto;
  align-items: center;
  gap: 0.375rem 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border-soft);
}

.roleapp:last-child {
  border-bottom: none;
}

.roleapp__name {
  font-weight: 500;
  color: var(--text);
}

.roleapp__more {
  justify-self: start;
  font-size: 0.8125rem;
}

.roleapp__ticks {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  padding: 0.25rem 0 0.25rem;
}

.roleapp__ticks[hidden] {
  display: none;
}

.roleapp__tick {
  margin: 0;
}

.roleform {
  width: 100%;
}

@media (max-width: 620px) {
  .roleapp {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .roleapp .field__select {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

/* Send it back (6 November 2026): opened by the buttons beside Send and
   under the papers, so its own heading is not shown; open, it is a box of
   its own under the Send button. */
.routing__sendback > summary {
  display: none;
}

.routing__sendback[open] {
  margin-top: 1rem;
  padding: 0.875rem 1rem 1rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: var(--surface-2, var(--bg));
}

.routing__sendbackhead {
  margin: 0 0 0.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
}

.stepcard__backhint {
  margin: 0.75rem 0 0;
  font-size: 0.875rem;
  color: var(--muted);
}

/* Hold waiting on another office (6 November 2026): the nudge to send it
   back instead, with its button. */
.holdbox__nudge {
  display: grid;
  gap: 0.5rem;
  justify-items: start;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--border);
  border-radius: 0.625rem;
  background: var(--surface-2);
}

.holdbox__nudge[hidden] {
  display: none;
}

.routing__sendbackhead + .panelnote {
  margin: 0 0 0.75rem;
}

/* A paper that is its own document (6 November 2026): its reference and
   subject, opening it in a new tab; long subjects wrap. */
.procpapers__doc {
  overflow-wrap: anywhere;
  text-align: left;
  font-weight: 600;
}

/* Editing a document (6 November 2026): a screen of its own, the form in
   two columns across the page: what is on the paper, and who handles it.
   Each column's heading sits at its top without the rule that separates
   groups further down. Save and Cancel live in the pinned header on a
   laptop; the copy at the foot is for a phone, where the header is not
   pinned. */
.form.form--flat:has(> .docedit) {
  max-width: none;
}

.docedit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 2.5rem;
}

.docedit__col {
  min-width: 0;
}

.docedit__col > .group:first-child {
  margin-top: 0.5rem;
  padding-top: 0;
  border-top: none;
}

.docedit .doctrack[hidden] {
  display: none;
}

@media (max-width: 900px) {
  .docedit {
    grid-template-columns: minmax(0, 1fr);
  }

  .docedit__col + .docedit__col > .group:first-child {
    margin-top: 1.5rem;
    padding-top: 1.125rem;
    border-top: 1px solid var(--border-soft);
  }
}

@media (min-width: 861px) {
  .docedit__foot {
    display: none;
  }
}

/* Route map on a document's History tab (team meeting, 5 November 2026):
   the offices the folder went through, oldest first, joined by a line;
   across on a laptop (scrolling in its own box when long), down on a
   phone. Where it is now in indigo; time at each office as bars under it. */
.routemapwrap {
  display: grid;
  gap: 1rem;
  padding: 0 1.25rem 1.25rem;
}

.routemap__lead {
  margin: 0;
  font-weight: 600;
  color: var(--text);
}

.routemap {
  display: flex;
  margin: 0;
  padding: 0.25rem 0 0.5rem;
  list-style: none;
  overflow-x: auto;
}

.routemap__stop {
  position: relative;
  flex: 0 0 11rem;
  display: grid;
  gap: 0.5rem;
  justify-items: start;
  padding-right: 1rem;
}

/* The line to the next stop, through the dots. */
.routemap__stop:not(:last-child)::before {
  content: '';
  position: absolute;
  top: 0.9375rem;
  left: 1.875rem;
  right: 0;
  height: 2px;
  background: var(--border-strong);
}

.routemap__dot {
  position: relative;
  display: grid;
  place-items: center;
  width: 1.875rem;
  height: 1.875rem;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-2);
  font-size: 0.8125rem;
  font-weight: 700;
}

.routemap__stop--here .routemap__dot,
.routemap__stop--end .routemap__dot {
  border-color: var(--accent);
  background: var(--accent-solid);
  color: #fff;
}

.routemap__stop--onway .routemap__dot {
  border-color: var(--accent);
  border-style: dashed;
  color: var(--accent);
}

.routemap__text {
  display: grid;
  gap: 0.125rem;
  min-width: 0;
}

.routemap__name {
  font-weight: 600;
  color: var(--text);
  overflow-wrap: anywhere;
}

.routemap__now {
  color: var(--accent);
  font-size: 0.8125rem;
  font-weight: 600;
}

.routemap__who,
.routemap__when,
.routemap__transit {
  color: var(--muted);
  font-size: 0.8125rem;
}

.routemap__stay {
  color: var(--text-2);
  font-size: 0.8125rem;
  font-weight: 600;
}

.routemap__flags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.25rem;
}

@media (max-width: 620px) {
  .routemap {
    flex-direction: column;
    overflow: visible;
  }

  .routemap__stop {
    flex: none;
    grid-template-columns: 1.875rem minmax(0, 1fr);
    gap: 0.75rem;
    padding: 0 0 1rem;
  }

  .routemap__stop:not(:last-child)::before {
    top: 1.875rem;
    bottom: 0;
    left: 0.875rem;
    right: auto;
    width: 2px;
    height: auto;
  }
}

.routebars {
  display: grid;
  gap: 0.5rem;
}

.routebars__title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-2);
}

.routebars__row {
  display: grid;
  grid-template-columns: minmax(0, 14rem) minmax(0, 1fr) 6rem;
  gap: 0.75rem;
  align-items: center;
  font-size: 0.875rem;
}

.routebars__name {
  color: var(--text);
  overflow-wrap: anywhere;
}

.routebars__track {
  height: 0.625rem;
  border-radius: var(--r-pill);
  background: var(--track);
  overflow: hidden;
}

.routebars__bar {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--border-strong);
}

.routebars__bar--here {
  background: var(--accent-solid);
}

.routebars__bar--transit {
  background: var(--track-2);
  border: 1px dashed var(--border-strong);
}

.routebars__value {
  color: var(--muted);
  text-align: right;
}

@media (max-width: 620px) {
  .routebars__row {
    grid-template-columns: minmax(0, 1fr) 5rem;
  }

  .routebars__track {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

/* Where everything is (team meeting, 5 November 2026): one card per
   office, the folders there and on their way, late ones first. */
.whereboard {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: 0.875rem;
  padding: 0.25rem 0 0.5rem;
}

.wherecard {
  display: grid;
  align-content: start;
  gap: 0.5rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface);
  min-width: 0;
}

.wherecard--late {
  border-color: var(--warn-line);
  box-shadow: inset 4px 0 0 var(--warn);
}

.wherecard__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.wherecard__name {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  overflow-wrap: anywhere;
}

.wherecard__count {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
}

.wherecard__facts {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  color: var(--muted);
  font-size: 0.875rem;
}

.wherecard__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.25rem;
}

.wherecard__doc {
  display: grid;
  gap: 0.0625rem;
  width: 100%;
  padding: 0.5rem 0.625rem;
  border: none;
  border-radius: var(--r-control);
  background: var(--surface-2);
  color: var(--text);
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.wherecard__doc:hover {
  background: var(--accent-soft);
}

.wherecard__ref {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 600;
}

.wherecard__subject {
  font-size: 0.875rem;
  font-weight: 500;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.wherecard__when {
  color: var(--muted);
  font-size: 0.75rem;
}

.wherecard__when--late {
  color: var(--warn);
  font-weight: 600;
}