/* Huddle's four looks. Soft Edge is the standard on every computer (shared front-desk ones
   too): cool greys, an indigo accent, small corners and Inter. Nova keeps the same colours and
   Inter with its earlier pills and circles. Flat Panels adds square panels and Plex. Classic
   keeps Missouri City Dentistry's navy and charcoal on warm off-white, Newsreader headings
   over Inter and pill buttons. js/theme.js sets data-look for Flat Panels, Nova or Classic;
   Soft Edge needs no attribute. Every colour is a hex token, so theme.js can keep a colour
   someone picks readable on top of any look. */

@font-face {
  font-family: "Rubik";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("/fonts/rubik-latin-wght-normal.woff2") format("woff2-variations"), url("/fonts/rubik-latin-wght-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 200 800;
  font-display: block;
  src: url("/fonts/newsreader-latin-opsz-normal.woff2") format("woff2-variations"), url("/fonts/newsreader-latin-opsz-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 200 800;
  font-display: block;
  src: url("/fonts/newsreader-vietnamese-opsz-normal.woff2") format("woff2-variations"), url("/fonts/newsreader-vietnamese-opsz-normal.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: block;
  src: url("/fonts/inter-latin-wght-normal.woff2") format("woff2-variations"), url("/fonts/inter-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: block;
  src: url("/fonts/inter-vietnamese-wght-normal.woff2") format("woff2-variations"), url("/fonts/inter-vietnamese-wght-normal.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 100 700;
  font-display: block;
  src: url("/fonts/ibm-plex-sans-latin-wght-normal.woff2") format("woff2-variations"), url("/fonts/ibm-plex-sans-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 100 700;
  font-display: block;
  src: url("/fonts/ibm-plex-sans-latin-ext-wght-normal.woff2") format("woff2-variations"), url("/fonts/ibm-plex-sans-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 100 700;
  font-display: block;
  src: url("/fonts/ibm-plex-sans-vietnamese-wght-normal.woff2") format("woff2-variations"), url("/fonts/ibm-plex-sans-vietnamese-wght-normal.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* Soft Edge. */
:root {
  --canvas-purple: #6942a1;
  --canvas-purple-soft: #eee6f8;
  --canvas-toolbar-bg: #16171b;
  --canvas-toolbar-text: #eceef2;
  --canvas-toolbar-active: #474950;
  --bg: #f7f7f9;
  --surface: #ffffff;
  --surface-2: #f2f2f5;
  --line: #eaeaee;
  --line-strong: #dcdee3;
  --text: #26282e;
  --muted: #5f646e;
  --heading: #16171b;
  /* Indigo for the main buttons, chosen filters and the logo; lighter under the pointer. */
  --accent: #405ec9;
  --accent-strong: #4d6eda;
  --accent-text: #ffffff;
  --brand: #405ec9;
  --brand-strong: #4d6eda;
  --accent-ink: #4f5bd5;
  --accent-soft: #e4eeff;
  --note-line: #d0dcf7;
  --chip-text: #4a4e57;
  /* A light sidebar with dark text. */
  --side-bg: #eeeef1;
  --side-text: #26282e;
  --side-muted: #5f646e;
  --side-hover: rgba(22, 23, 27, 0.05);
  --side-active-bg: #e2e3e9;
  --side-active-text: #16171b;
  --side-line: rgba(22, 23, 27, 0.08);
  /* The brand's colour, so a chosen accent reaches the sidebar's logo too. */
  --side-logo: var(--brand);
  --side-width: 236px;
  --tab-bg: #ffffff;
  /* The phone's chosen tab: the brand indigo is too dark to read on Nova's dark tab bar. */
  --tab-active: #405ec9;
  --warn: #d19a36;
  --warn-soft: #faefd8;
  --warn-ink: #7c5410;
  /* A shade deeper than Classic's red and green, to read on their tints. */
  --danger: #b23c26;
  --danger-soft: #fbe4df;
  /* Counts on the red: their own ink, as the buttons' --accent-text follows the accent. */
  --danger-text: #ffffff;
  --ok: #2a7047;
  --ok-soft: #e2f2e7;
  /* Behind dialogs, and selected text. */
  --scrim: rgba(17, 18, 22, 0.45);
  --selection: rgba(64, 94, 201, 0.18);
  /* Behind the count on a chosen filter: a shade darker than the indigo, so white reads on it. */
  --on-brand-chip: rgba(0, 0, 0, 0.18);
  --radius: 6px;
  --radius-sm: 4px;
  /* Messages' corners. */
  --radius-bubble: 4px;
  --radius-control: 4px;
  --radius-round: 4px;
  --radius-avatar: 6px;
  --radius-nav: 4px;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Headings' font. Named for Classic's serif; Soft Edge and Nova headings follow the text's font. */
  --serif: var(--sans);
  /* Text size from You › Appearance (js/theme.js): 1 is the standard 15px. */
  --font-scale: 1;
  --body-size: 15px;
  --body-lh: 1.4667;
  --message-size: 15px;
  --message-lh: 1.4667;
  --lh: var(--body-lh);
  color-scheme: light dark;
}

/* Flat Panels keeps Nova's colours, with Plex and square panels. */
:root[data-look="flat-panels"] {
  --radius: 0px;
  --radius-sm: 2px;
  --radius-bubble: 2px;
  --radius-control: 2px;
  --radius-round: 2px;
  --radius-avatar: 2px;
  --radius-nav: 0px;
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --body-lh: 1.4667;
  --message-size: 15px;
  --message-lh: 1.4667;
}

/* Nova keeps the original corners in both colour schemes. */
:root[data-look="nova"] {
  --body-lh: 1.5;
  --message-size: 14px;
  --message-lh: 1.4;
  --radius: 16px;
  --radius-sm: 9px;
  --radius-bubble: 20px;
  --radius-control: 999px;
  --radius-round: 50%;
  --radius-avatar: 50%;
  --radius-nav: 999px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --canvas-purple: #c7a7ef;
    --canvas-purple-soft: #30203f;
    --bg: #0b0c0f;
    --surface: #15161a;
    --surface-2: #1d1f25;
    --line: #1d1f25;
    --line-strong: #2f323a;
    --text: #dcdee3;
    --muted: #9096a1;
    --heading: #eceef2;
    --accent: #405ec9;
    --accent-strong: #4d6eda;
    --accent-text: #ffffff;
    --brand: #405ec9;
    --brand-strong: #4d6eda;
    --accent-ink: #aebbff;
    --accent-soft: #182448;
    --note-line: #24335f;
    --chip-text: #c3c7cf;
    --side-bg: #111216;
    --side-text: #dcdee3;
    --side-muted: #9096a1;
    --side-hover: rgba(255, 255, 255, 0.05);
    --side-active-bg: #1d1f25;
    --side-active-text: #eceef2;
    --side-line: rgba(255, 255, 255, 0.08);
    --side-logo: #eceef2;
    --tab-bg: #111216;
    --tab-active: #aebbff;
    --warn: #e2b35a;
    --warn-soft: #3a2e14;
    --warn-ink: #f0c877;
    --danger: #ef8b77;
    --danger-soft: #3d201b;
    /* The red is light in dark mode, so its counts are dark. */
    --danger-text: #1a0d0a;
    --ok: #7fcf99;
    --ok-soft: #173424;
    --scrim: rgba(0, 0, 0, 0.6);
    --selection: rgba(174, 187, 255, 0.3);
  }
}

/* Classic: the tokens Huddle had before Nova, unchanged. It sets everything Nova sets, so
   nothing of Nova's shows through in light or dark mode. */
:root[data-look="classic"] {
  --body-lh: 1.5;
  --message-size: 14px;
  --message-lh: 1.4;
  --bg: #f8f7f3;
  --surface: #fdfdfc;
  --surface-2: #f1f1ee;
  --line: #e7e8e7;
  --line-strong: #dcdcd9;
  --text: #1f2a30;
  --muted: #5e6970;
  --heading: #1f2a30;
  /* Charcoal for the main buttons, like the site's "Book a Visit". */
  --accent: #1f2a30;
  --accent-strong: #11191d;
  --accent-text: #ffffff;
  /* Navy, the logo's colour: links, chosen filters, the sidebar. */
  --brand: #1f3a5f;
  --brand-strong: #172d4a;
  --accent-ink: #1f3a5f;
  --accent-soft: #eaeef1;
  --note-line: #e2e5dd;
  --chip-text: #3f4a4e;
  --side-bg: #1f3a5f;
  --side-text: #eef2f7;
  --side-muted: #a9b8cc;
  --side-hover: rgba(255, 255, 255, 0.08);
  --side-active-bg: #eaeef1;
  --side-active-text: #1f3a5f;
  --side-line: rgba(255, 255, 255, 0.18);
  --side-logo: #ffffff;
  --side-width: 236px;
  --tab-bg: #f9f8f4;
  --warn: #d19a36;
  --warn-soft: #f7ebd2;
  --warn-ink: #7c5410;
  --danger: #b8432d;
  --danger-soft: #f7ddd5;
  --ok: #2f7a4e;
  --ok-soft: #e2efe6;
  /* Behind dialogs, and selected text. */
  --scrim: rgba(17, 27, 38, 0.45);
  --selection: rgba(31, 58, 95, 0.18);
  /* Nova's two for counts, as Classic had them: --accent-text on the red, a white tint on navy. */
  --danger-text: #ffffff;
  --on-brand-chip: rgba(255, 255, 255, 0.2);
  --radius: 16px;
  --radius-sm: 10px;
  /* Nova’s own two: no chosen-tab colour of its own, and messages with the small corners. */
  --tab-active: initial;
  --radius-bubble: 10px;
  --radius-control: 999px;
  --radius-round: 50%;
  --radius-avatar: 50%;
  --radius-nav: 999px;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Text size from You › Appearance (js/theme.js): 1 is the standard 15px. */
  --font-scale: 1;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root[data-look="classic"] {
    --bg: #0f1418;
    --surface: #161d22;
    --surface-2: #1d262c;
    --line: #27323a;
    --line-strong: #34424c;
    --text: #e7ecef;
    --muted: #9ba8b0;
    --heading: #f2f5f7;
    --accent: #e7ecef;
    --accent-strong: #ffffff;
    --accent-text: #11191d;
    --brand: #3d6394;
    --brand-strong: #4a73a8;
    --accent-ink: #9dbbe6;
    --accent-soft: #1e2a36;
    --note-line: #2a3845;
    --chip-text: #c9d2d8;
    --side-bg: #0f1f33;
    --side-text: #e3eaf3;
    --side-muted: #8699b3;
    --side-hover: rgba(255, 255, 255, 0.06);
    --side-active-bg: #233a57;
    --side-active-text: #e3eaf3;
    --side-line: rgba(255, 255, 255, 0.14);
    --tab-bg: #11181d;
    --warn: #e2b35a;
    --warn-soft: #3a2e14;
    --warn-ink: #f0c877;
    --danger: #ef8b77;
    --danger-soft: #3d201b;
    --danger-text: #11191d;
    --ok: #7fcf99;
    --ok-soft: #173424;
    --scrim: rgba(0, 0, 0, 0.6);
    --selection: rgba(157, 187, 230, 0.3);
  }
}

/* Ratios inherit; each element rounds its own line, including smaller text inside it. */
* {
  box-sizing: border-box;
  line-height: round(nearest, calc(1em * var(--lh)), 1px);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html,
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: round(nearest, calc(var(--body-size) * var(--font-scale)), 1px);
  font-weight: normal;
  font-style: normal;
  font-variant: normal;
  font-stretch: normal;
  --lh: var(--body-lh);
}

html {
  accent-color: var(--accent);
}

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

a {
  color: var(--accent-ink);
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  font-style: inherit;
  font-variant: inherit;
  font-stretch: inherit;
  color: inherit;
}

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

h1 {
  margin: 0;
  font-family: var(--serif);
  font-size: round(nearest, calc(32px * var(--font-scale)), 1px);
  font-weight: 400;
  font-style: normal;
  font-variant: normal;
  font-stretch: normal;
  --lh: 1.15;
  letter-spacing: -0.01em;
  color: var(--heading);
}

h2 {
  margin: 24px 0 10px;
  font-size: round(nearest, calc(17px * var(--font-scale)), 1px);
  font-weight: 650;
  color: var(--heading);
}

.boot {
  padding: 48px 16px;
  text-align: center;
  color: var(--muted);
}

html[data-staging="true"] .boot {
  margin-top: var(--staging-bar-height);
}

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

.staging-bar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 16px;
  border-bottom: 1px solid #e7d7b4;
  background: #fff4dc;
  color: #704b12;
  font-size: 13px;
  --lh: 1.2;
}

.staging-bar strong {
  font-weight: 650;
}

.staging-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border: 1px solid #eadbbb;
  border-radius: 5px;
  background: #fff;
  color: #805514;
  font-weight: 700;
  white-space: nowrap;
}

.staging-bar a {
  color: inherit;
  font-weight: 700;
  white-space: nowrap;
}

html {
  --staging-bar-height: 0px;
}

html[data-staging="true"] {
  --staging-bar-height: 40px;
}

.small {
  font-size: round(nearest, calc(13px * var(--font-scale)), 1px);
}

/* ---- Layout: the navy sidebar on computers, a tab bar on phones ---- */

/* The sidebar is fixed to the window's full height and stays put while the page scrolls. */
.shell {
  min-height: calc(100vh - var(--staging-bar-height));
  margin-top: var(--staging-bar-height);
  padding-left: var(--side-width);
}

.sidebar {
  position: fixed;
  inset: var(--staging-bar-height) auto 0 0;
  z-index: 5;
  width: var(--side-width);
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 24px 14px 16px;
  background: var(--side-bg);
  color: var(--side-text);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--side-line) transparent;
}

/* The page's navy focus ring would vanish on the navy sidebar. */
.sidebar :focus-visible {
  outline-color: var(--side-text);
}

.sidebar-toggle {
  display: grid;
  place-items: center;
  align-self: flex-end;
  width: 44px;
  min-width: 44px;
  height: 44px;
  margin: 0 0 8px auto;
  padding: 0;
  border: 1px solid var(--side-line);
  border-radius: var(--radius-nav);
  background: transparent;
  color: var(--side-text);
  cursor: pointer;
}

.sidebar-toggle:hover {
  background: var(--side-hover);
}

.sidebar-toggle .icon {
  width: 18px;
  height: 18px;
  transform: rotate(180deg);
}

.shell.sidebar-collapsed {
  --side-width: 72px;
}

.shell.sidebar-collapsed .sidebar {
  align-items: center;
  padding-inline: 14px;
  overflow-x: hidden;
}

.shell.sidebar-collapsed .sidebar > :not(.sidebar-toggle) {
  display: none;
}

.shell.sidebar-collapsed .sidebar-toggle {
  align-self: center;
  margin: 0;
}

.shell.sidebar-collapsed .sidebar-toggle .icon {
  transform: none;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 8px 18px;
  font-family: var(--serif);
  font-size: round(nearest, calc(24px * var(--font-scale)), 1px);
  font-weight: 600;
  font-style: normal;
  font-variant: normal;
  font-stretch: normal;
  --lh: 1;
  color: var(--heading);
}

.sidebar .brand {
  color: var(--side-text);
}

.brand .logo-mark {
  width: 34px;
  height: 34px;
}

/* Under the logo: whose offices this is, small, as Practice Hub names its team. */
.brand-sub {
  margin: -10px 0 14px;
  padding: 0 10px;
  font-size: round(nearest, calc(11px * var(--font-scale)), 1px);
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--side-muted);
}

/* The nav's groups (Work, Office), as Practice Hub groups its sidebar. */
.nav-label {
  margin: 14px 0 4px;
  padding: 0 12px;
  font-size: round(nearest, calc(11px * var(--font-scale)), 1px);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--side-muted);
}

.nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav a,
.nav-more > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 40px;
  padding: 0 12px;
  border-radius: var(--radius-nav);
  color: var(--side-text);
  text-decoration: none;
  font-weight: 500;
  font-size: round(nearest, calc(14.5px * var(--font-scale)), 1px);
}

.nav a:hover,
.nav-more > summary:hover {
  background: var(--side-hover);
}

.nav a.active {
  background: var(--side-active-bg);
  color: var(--side-active-text);
  font-weight: 650;
}

.nav .label,
.nav-more .label {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.nav .icon,
.nav-more .icon {
  flex: none;
  width: 18px;
  height: 18px;
  opacity: 0.85;
}

.nav a.active .icon {
  opacity: 1;
}

/* What isn't used every day, folded under More; open while you're on one of its pages. */
.nav-more {
  margin-top: 12px;
}

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

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

.nav-more > summary::after {
  content: "";
  width: 6px;
  height: 6px;
  margin-right: 4px;
  border-right: 1.8px solid currentColor;
  border-bottom: 1.8px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  opacity: 0.7;
}

.nav-more[open] > summary::after {
  transform: translateY(2px) rotate(225deg);
}

.nav-more[open] > .nav {
  margin: 2px 0 0 14px;
}

.sidebar .spacer {
  flex: 1;
  min-height: 12px;
}

/* At the foot: you (your name and role under it) and Sign out. */
.who {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 10px;
  border-top: 1px solid var(--side-line);
}

.who-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  --lh: 1.25;
}

.who-text small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: round(nearest, calc(12px * var(--font-scale)), 1px);
  font-weight: 400;
  color: var(--side-muted);
}

.nav a.active .who-text small {
  color: inherit;
  opacity: 0.75;
}

.who .nav a {
  min-height: 48px;
}

.who-out {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-height: 40px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--radius-nav);
  background: transparent;
  color: var(--side-muted);
  cursor: pointer;
  font-size: round(nearest, calc(13.5px * var(--font-scale)), 1px);
  font-weight: 500;
}

.who-out:hover {
  background: var(--side-hover);
  color: var(--side-text);
}

.who-out .icon {
  width: 18px;
  height: 18px;
}

.main {
  min-width: 0;
  width: 100%;
  max-width: 1240px;
  padding: 36px 40px 56px;
}

html[data-staging="true"] .main {
  padding-top: 20px;
}

@media (min-width: 861px) {
  html[data-staging="true"] .conversation-open .main {
    padding-top: 0;
  }
}

.tabbar {
  display: none;
}

@media (max-width: 860px) {
  html[data-staging="true"] {
    --staging-bar-height: 52px;
  }

  html[data-staging="true"] .main {
    padding-top: 22px;
  }

  .staging-bar {
    height: 52px;
  }

  .shell {
    /* The island, its 12px gap below, and the home indicator's room. */
    --phone-island-height: calc(74px + env(safe-area-inset-bottom));
    padding-left: 0;
  }
  .sidebar {
    display: none;
  }
  .main {
    padding: 22px 16px calc(var(--phone-island-height) + 22px);
  }
  .tabbar {
    position: fixed;
    inset: auto 16px 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    max-width: 480px;
    height: var(--phone-island-height);
    margin-inline: auto;
    padding: 7px 7px calc(19px + env(safe-area-inset-bottom));
    isolation: isolate;
    z-index: 10;
  }
  .tabbar::before {
    content: '';
    position: absolute;
    inset: 0 0 calc(12px + env(safe-area-inset-bottom));
    z-index: -1;
    background: var(--tab-bg);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-nav);
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.2);
  }
  .tabbar a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 2px;
    border-radius: var(--radius-nav);
    color: var(--tab-text, var(--muted));
    text-decoration: none;
    /* Navigation labels stay on one line at the smallest phone width. */
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
  }
  .tabbar .label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
  }
  .tabbar a.active {
    color: var(--tab-active, var(--brand));
    background: color-mix(in srgb, var(--tab-active) 14%, var(--tab-bg));
  }
  .tabbar .count {
    position: absolute;
    top: 0;
    left: calc(50% + 7px);
  }
  h1 {
    font-size: round(nearest, calc(28px * var(--font-scale)), 1px);
  }
}

/* Remote desktop picker (t1): compact device cards that keep their status and Open action
   visible at phone width, with the owner controls kept on the same page. */
.remote-page { min-width: 0; padding-bottom: 36px; }
.remote-section { margin-top: 24px; min-width: 0; }
.remote-section h2 { margin: 0 0 4px; color: var(--heading); font-size: calc(20px * var(--font-scale)); line-height: 1.3; }
.remote-section-note { margin: 0 0 12px; color: var(--muted); }
.remote-account-note { display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 12px 0; padding: 8px 12px; border: 1px solid var(--note-line); border-radius: var(--radius); background: var(--accent-soft); color: var(--text); }
.remote-account-note .icon { flex: 0 0 20px; width: 20px; height: 20px; color: var(--accent-ink); }
.remote-account-note a { display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0; padding: 0 2px; }
.remote-session-grid, .remote-computer-grid, .remote-settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px; min-width: 0; }
/* One or two cards keep the width they have in a full row; only the settings forms stretch. */
.remote-session-grid, .remote-computer-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.remote-empty { margin: 24px 0 0; color: var(--muted); }
.remote-status-notice { margin: 12px 0 0; }
.remote-session-card, .remote-computer-card, .remote-office-settings { min-width: 0; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); padding: 12px 14px; }
.remote-session-card p, .remote-computer-card p { min-height: 22px; margin: 4px 0 10px; color: var(--muted); overflow-wrap: anywhere; }
.remote-tile-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; min-width: 0; color: var(--heading); }
.remote-tile-title strong { min-width: 0; overflow-wrap: anywhere; }
.remote-tile-title .icon { flex: 0 0 22px; width: 22px; height: 22px; color: var(--accent-ink); }
.remote-tile-foot { display: flex; align-items: center; gap: 8px; min-height: 36px; min-width: 0; }
.remote-private, .remote-status { display: inline-flex; align-items: center; min-height: 24px; border-radius: var(--radius-sm); padding: 2px 8px; font-size: calc(12px * var(--font-scale)); font-weight: 650; line-height: 1.2; }
.remote-private { background: var(--accent-soft); color: var(--accent-ink); }
.remote-status { background: var(--surface-2); color: var(--muted); }
.remote-status-online { background: var(--ok-soft); color: var(--ok); }
.remote-status-using { background: var(--warn-soft); color: var(--warn-ink); }
.remote-status-offline { background: var(--surface-2); color: var(--muted); }
.remote-open { min-width: 52px; min-height: 44px; margin-left: auto; border: 0; border-radius: var(--radius-control); padding: 8px 10px; background: transparent; color: var(--accent-ink); font: inherit; font-weight: 700; }
.remote-open:hover { background: var(--accent-soft); }
.remote-computer-card.is-code-prompt, .remote-session-card.is-code-prompt { border-color: var(--accent-ink); box-shadow: 0 0 0 1px var(--accent-ink); }
.remote-computer-card.is-code-prompt .remote-tile-title { align-items: center; }
.remote-code-prompt { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin-top: 10px; }
.remote-code-prompt > p { min-height: 0; margin: 0; color: var(--text); }
.remote-code-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; color: var(--heading); font-weight: 650; }
.remote-code-field .input { min-height: 48px; font-size: 1.15em; letter-spacing: .12em; }
.remote-code-prompt small { color: var(--muted); }
.remote-code-message { min-height: 0 !important; margin: 0 !important; }
.remote-code-message:not(.has-message) { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.remote-code-message.has-message { padding: 10px 12px; border-radius: var(--radius-sm); background: var(--danger-soft); color: var(--danger) !important; font-weight: 650; }
.remote-code-field .input[aria-invalid="true"] { border-color: var(--danger); }
.remote-code-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.remote-code-actions .btn { min-width: 96px; min-height: 44px; }
.remote-handoff { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; margin-left: auto; color: var(--accent-ink); text-align: right; }
.remote-handoff span { max-width: 320px; color: var(--muted); font-size: calc(12px * var(--font-scale)); }
@media (max-width: 860px) {
  .remote-session-card, .remote-computer-card {
    scroll-margin-block: calc(22px + env(safe-area-inset-top)) calc(var(--phone-island-height) + 22px);
  }
}
.remote-computer-card.is-offline { background: var(--surface-2); }
.remote-computer-card.is-offline .remote-tile-title { color: var(--muted); }
.remote-group-head { display: flex; align-items: center; gap: 8px; margin: 16px 0 8px; color: var(--heading); font-size: calc(16px * var(--font-scale)); }
.remote-group-head span { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; min-height: 22px; border-radius: var(--radius-sm); padding: 0 5px; background: var(--surface-2); color: var(--muted); font-size: calc(12px * var(--font-scale)); }
.remote-office-group + .remote-office-group { margin-top: 8px; }
.remote-owner-settings { border-bottom: 1px solid var(--line-strong); padding-bottom: 20px; }
.remote-grant-card { min-width: 0; margin: 14px 0; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); padding: 14px; }
.remote-grant-card h3 { margin: 0 0 4px; color: var(--heading); font-size: calc(17px * var(--font-scale)); }
.remote-grant-intro { margin: 0 0 4px; }
.remote-grant-hint { margin: 0 0 10px; color: var(--muted); font-size: calc(13px * var(--font-scale)); font-style: italic; }
.remote-grant-scroll { --remote-grant-person-width: 124px; width: 100%; max-width: 100%; min-width: 0; max-height: min(70vh, 560px); overflow: auto; overscroll-behavior-x: contain; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); }
.remote-grant-table { width: max-content; border-collapse: separate; border-spacing: 0; color: var(--text); }
.remote-grant-table th, .remote-grant-table td { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.remote-grant-table thead th { position: sticky; z-index: 2; top: 0; background: var(--surface-2); color: var(--muted); font-size: calc(12px * var(--font-scale)); font-weight: 700; text-align: left; }
.remote-grant-table thead tr:first-child th { height: 32px; padding: 6px 8px; }
.remote-grant-table thead tr:nth-child(2) th { top: var(--remote-grant-group-row-height, 32px); height: 124px; padding: 8px 5px; vertical-align: bottom; }
.remote-grant-table .remote-grant-person-heading, .remote-grant-table .remote-grant-person { position: sticky; left: 0; min-width: var(--remote-grant-person-width); max-width: var(--remote-grant-person-width); background: var(--surface); }
.remote-grant-table .remote-grant-person-heading { z-index: 5; vertical-align: bottom; }
.remote-grant-table .remote-grant-person-heading span { display: block; padding: 0 0 4px; }
.remote-grant-table .remote-grant-view-group { display: block; padding: 0 0 4px; color: var(--heading); font-size: calc(11px * var(--font-scale)); font-weight: 700; overflow-wrap: anywhere; }
.remote-grant-group-name { position: sticky; left: calc(var(--remote-grant-person-width) + 8px); display: inline-block; max-width: 100%; }
.remote-grant-table .remote-grant-person { z-index: 1; padding: 7px 8px; text-align: left; }
.remote-grant-table .remote-grant-person strong, .remote-grant-table .remote-grant-person small { display: block; overflow-wrap: anywhere; }
.remote-grant-table .remote-grant-person strong { color: var(--heading); font-size: calc(13px * var(--font-scale)); }
.remote-grant-table .remote-grant-person small { margin-top: 2px; color: var(--muted); font-size: calc(11px * var(--font-scale)); font-weight: 400; }
.remote-grant-table .remote-grant-computer-heading { width: 44px; min-width: 44px; max-width: 44px; text-align: center; }
.remote-grant-computer-heading span { display: block; max-height: 102px; margin: 0 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; writing-mode: vertical-rl; transform: rotate(180deg); color: var(--heading); }
.remote-grant-table tbody td { width: 44px; min-width: 44px; height: 48px; padding: 0; background: var(--surface); text-align: center; }
.remote-grant-table tbody td.is-granted { background: var(--accent-soft); }
.remote-grant-table tbody input { width: 20px; height: 20px; margin: 0; accent-color: var(--accent-ink); cursor: pointer; }
.remote-grant-table tbody input[aria-busy="true"] { cursor: progress; }
.remote-grant-table tbody input[aria-disabled="true"] { cursor: not-allowed; opacity: .45; }
.remote-grant-copy-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line-strong); }
.remote-grant-copy-row p { margin: 0; color: var(--muted); font-size: calc(13px * var(--font-scale)); }
.remote-grant-copy-row .btn { flex: 0 0 auto; min-height: 44px; }
.remote-grant-copy-results { margin-top: 8px; color: var(--muted); font-size: calc(13px * var(--font-scale)); overflow-wrap: anywhere; }
.remote-grant-copy-results p { margin: 0 0 4px; }
.remote-grant-copy-results ul { margin: 0; padding-left: 20px; }
.remote-grant-copy-results li { margin-top: 2px; }
.remote-grant-feedback { position: fixed; z-index: 50; top: calc(env(safe-area-inset-top) + 12px); inset-inline: 12px; display: flex; flex-direction: column; width: max-content; max-width: min(560px, calc(100vw - 24px)); max-height: min(33vh, 240px); box-sizing: border-box; margin: 0 auto; overflow: hidden; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 8px 12px; background: var(--surface); box-shadow: 0 5px 18px rgba(0, 0, 0, .18); pointer-events: none; }
.remote-grant-feedback.has-errors { pointer-events: auto; }
.remote-grant-feedback.is-shared-station { top: calc(env(safe-area-inset-top) + 60px); }
.remote-grant-status { display: block; flex: 0 0 auto; height: 1.2em; min-height: 1.2em; margin: 0; color: var(--text); font-size: calc(12px * var(--font-scale)); line-height: 1.2; visibility: hidden; }
.remote-grant-status.is-visible { visibility: visible; }
.remote-grant-errors { display: flex; flex-direction: column; gap: 4px; min-width: 0; min-height: 0; max-height: min(25vh, 184px); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
.remote-grant-error { display: flex; align-items: flex-start; flex: 0 0 auto; gap: 8px; min-width: 0; padding: 2px 0; border-bottom: 1px solid var(--line); color: var(--danger); font-size: calc(12px * var(--font-scale)); }
.remote-grant-error:last-child { border-bottom: 0; }
.remote-grant-error p { flex: 1 1 auto; min-width: 0; margin: 0; overflow-wrap: anywhere; }
.remote-grant-dismiss { flex: 0 0 auto; min-width: 48px; min-height: 36px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 4px 6px; background: var(--surface-2); color: var(--text); font: inherit; }
.remote-office-settings { display: flex; flex-direction: column; gap: 12px; }
.remote-settings-name { display: flex; justify-content: space-between; gap: 8px; color: var(--heading); }
.remote-settings-name span { color: var(--muted); }
.remote-switch { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 8px; border-radius: var(--radius-sm); }
.remote-switch input { width: 20px; height: 20px; margin: 0; accent-color: var(--accent-ink); }
.remote-node-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; font-size: calc(13px * var(--font-scale)); font-weight: 600; }
.remote-node-field input { min-width: 0; min-height: 44px; }
.remote-pc-groups { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.remote-node-field-title { color: var(--heading); font-size: calc(13px * var(--font-scale)); font-weight: 650; }
.remote-pc-group-chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 0; }
.remote-pc-group-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; border-radius: var(--radius-sm); padding: 4px 8px; background: var(--accent-soft); color: var(--accent-ink); font-size: calc(12px * var(--font-scale)); overflow-wrap: anywhere; }
.remote-pc-group-chip button { min-width: 28px; min-height: 28px; border: 0; border-radius: var(--radius-sm); background: transparent; color: inherit; font: inherit; font-weight: 700; }
.remote-pc-groups select { min-width: 0; min-height: 44px; }
.remote-pc-groups small { color: var(--muted); }
.remote-settings-actions { display: flex; align-items: center; gap: 10px; }
.remote-settings-actions .btn { min-height: 44px; }
.remote-office-settings .error { margin: 0; }
.remote-office-settings .remote-node-field .error, .remote-office-settings .remote-pc-groups .error { margin: 6px 0 0; }

/* Live PC screen viewer (MeshCentral clients, Huddle's own-origin relay). */
.shell.remote-viewer-open .main { max-width: none; padding: 16px 24px 24px; }
.shell.remote-viewer-open .main > div:has(.remote-viewer) { min-height: calc(100dvh - 40px); }
.remote-viewer {
  --viewer-control-height: 44px;
  position: relative;
  display: flex;
  flex-direction: column;
  height: calc(100dvh - 151px);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
}
/* The approved desktop PC terminal screens use shorter cards than the live viewer. */
@media (min-width: 861px) {
  .remote-viewer:not(.remote-session-viewer):has(.remote-viewer-screen-dropped) { height: max(320px, calc(100dvh - 201px)); }
  .remote-viewer:not(.remote-session-viewer):has(.remote-viewer-screen-ended) { height: max(320px, calc(100dvh - 402px)); }
}
.remote-viewer-toolbar {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  grid-template-areas: "back identity actions" "disconnect disconnect disconnect";
  align-items: center;
  column-gap: 8px;
  row-gap: 8px;
  min-width: 0;
  padding: 6px 10px;
  border-bottom: 1px solid var(--line-strong);
  background: var(--surface);
}
.remote-viewer-toolbar:not(:has(.remote-viewer-disconnect)) {
  grid-template-columns: max-content minmax(0, 1fr);
  grid-template-areas: "back identity";
}
.remote-viewer-back, .remote-viewer-control, .remote-viewer-disconnect {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--viewer-control-height);
  min-width: 44px; border: 1px solid var(--line-strong); border-radius: var(--radius-control); padding: 8px 12px;
  background: var(--surface); color: var(--heading); font: inherit; font-weight: 650; white-space: nowrap;
}
.remote-viewer-back { grid-area: back; }
.remote-viewer-back .icon { width: 18px; height: 18px; transform: rotate(180deg); }
.remote-viewer-identity { display: flex; grid-area: identity; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; color: var(--heading); }
.remote-viewer-identity strong { min-width: 0; overflow-wrap: anywhere; }
.remote-viewer-status { display: inline-flex; flex: 0 0 auto; align-items: center; min-height: 28px; border-radius: var(--radius-sm); padding: 3px 9px; background: var(--surface-2); color: var(--muted); font-weight: 700; white-space: nowrap; }
.remote-viewer-status-connected { background: var(--ok-soft); color: var(--ok); }
.remote-viewer-status-dropped { background: var(--danger-soft); color: var(--danger); }
.remote-viewer-office { overflow-wrap: anywhere; color: var(--muted); font-size: calc(13px * var(--font-scale)); }
/* A short line about something that just went wrong, such as a copy too large to paste. Shown at every width. */
.remote-viewer-notice { overflow-wrap: anywhere; color: var(--danger); font-size: calc(13px * var(--font-scale)); font-weight: 600; line-height: 1.35; }
.remote-viewer-actions { display: flex; grid-area: actions; justify-self: end; flex-wrap: nowrap; gap: 6px; }
.remote-viewer-control svg, .remote-viewer-disconnect svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.remote-viewer-control .icon { width: 20px; height: 20px; }
.remote-viewer-control.is-pressed { border-color: var(--accent-ink); background: var(--accent-soft); color: var(--accent-ink); }
.remote-viewer-disconnect { grid-area: disconnect; justify-self: start; color: var(--danger); }
.remote-viewer-screen { position: relative; display: flex; flex: 1 1 auto; align-items: center; justify-content: center; width: 100%; min-width: 0; min-height: 240px; overflow: hidden; background: #111318; }
.remote-viewer-screen canvas { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; transform-origin: 0 0; touch-action: none; }
.remote-viewer-backdrop { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; transform-origin: 0 0; pointer-events: none; }
.remote-viewer-screen-dropped canvas, .remote-viewer-screen-ended canvas { visibility: hidden; }
.remote-viewer-help { display: none; }
.remote-viewer-scrim { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; background: rgb(0 0 0 / 56%); }
.remote-viewer-dialog { width: min(100%, 420px); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 22px; background: var(--surface); color: var(--text); box-shadow: 0 18px 60px rgb(0 0 0 / 24%); }
.remote-viewer-dialog h2 { margin: 0 0 10px; font-size: calc(22px * var(--font-scale)); }
.remote-viewer-dialog p { margin: 0 0 18px; overflow-wrap: anywhere; font-size: calc(16px * var(--font-scale)); line-height: 1.45; }
.remote-viewer-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }
.remote-viewer-dialog-actions .btn { flex: 0 0 auto; min-height: 44px; padding: 8px 14px; font-size: calc(15px * var(--font-scale)); }
.remote-viewer-dialog-actions .btn:first-child { min-width: 74px; }
.remote-viewer-dialog-actions .btn:last-child { min-width: 120px; }
.remote-viewer-keyboard-help { display: none; margin: 8px 12px; color: var(--muted); font-size: calc(12px * var(--font-scale)); }
.remote-viewer:has(.remote-viewer-screen canvas:focus-visible) .remote-viewer-keyboard-help,
.remote-viewer:has(.remote-viewer-screen canvas[data-keyboard-focus]:focus) .remote-viewer-keyboard-help,
.remote-viewer:has(.remote-viewer-toolbar :focus-visible) .remote-viewer-keyboard-help,
.remote-viewer:has(.remote-viewer-toolbar[data-keyboard-focus]:focus-within) .remote-viewer-keyboard-help { display: block; }
.remote-viewer-screen canvas:focus-visible, .remote-viewer-screen canvas[data-keyboard-focus]:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
.remote-session-viewer .remote-viewer-toolbar:has(.remote-viewer-cancel) {
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  grid-template-areas: "back identity cancel";
}
.remote-viewer-cancel { grid-area: cancel; display: inline-flex; align-items: center; gap: 6px; min-height: var(--viewer-control-height); border: 1px solid var(--danger); border-radius: var(--radius-control); padding: 8px 12px; background: var(--surface); color: var(--danger); font: inherit; font-weight: 650; }
.remote-viewer-cancel svg { width: 20px; height: 20px; fill: none; stroke: var(--danger); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.remote-session-screen { background: #17191d; }
.remote-session-viewer .remote-session-screen canvas { position: absolute; inset: 0; width: auto; height: auto; max-width: 100%; max-height: 100%; margin: auto; object-fit: contain; }
.remote-viewer-keyboard-input { position: absolute; z-index: 1; left: 0; bottom: 0; display: block; box-sizing: border-box; width: 1px; height: 1px; min-width: 0; border: 0; padding: 0; opacity: 0; font-size: 16px; line-height: 16px; pointer-events: none; }
.remote-viewer-keyboard-control span { display: none; }
.remote-session-screen-signin canvas { visibility: hidden; }
.remote-session-signin-card {
  z-index: 1;
  width: min(100% - 32px, 440px);
  max-height: calc(100% - 32px);
  overflow: auto;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 24px;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 18px 60px rgb(0 0 0 / 24%);
}
.remote-session-signin-card h1 { margin: 0 0 8px; color: var(--heading); font-size: calc(24px * var(--font-scale)); }
.remote-session-signin-card .remote-session-server-name { margin: 0 0 12px; color: var(--muted); font-weight: 400; line-height: 1.45; overflow-wrap: anywhere; }
/* The domain line always keeps its one line of room, so the card doesn't move while a username is typed. */
.remote-session-signin-card .remote-session-domain { min-height: 1.45em; margin-top: -4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.remote-session-signin-card .remote-account-note { margin: 0 0 14px; font-size: calc(14px * var(--font-scale)); line-height: 1.4; }
.remote-session-signin-card label { display: grid; gap: 6px; margin-top: 12px; color: var(--heading); font-size: calc(14px * var(--font-scale)); font-weight: 650; }
.remote-session-signin-card label .input { min-height: 44px; font-size: calc(16px * var(--font-scale)); }
.remote-session-signin-card .input[aria-invalid="true"] { border-color: var(--danger) !important; }
.remote-session-signin-card small { color: var(--muted); font-weight: 400; }
.remote-session-signin-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 20px; }
.remote-session-signin-actions .btn { width: 100%; min-width: 0; min-height: 44px; }
.remote-session-message { margin: 12px 0 0 !important; border: 1px solid color-mix(in srgb, var(--danger) 25%, transparent); border-radius: var(--radius-sm); padding: 10px 12px; background: var(--danger-soft); color: var(--danger) !important; font-weight: 650; line-height: 1.4; }
.remote-session-viewer .remote-viewer-screen-connecting::after {
  position: absolute;
  z-index: 1;
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  background: var(--surface);
  color: var(--heading);
  content: "Connecting to Windows…";
  box-shadow: 0 8px 28px rgb(0 0 0 / 24%);
}
.remote-session-viewer .remote-viewer-keyboard-help { display: none; }
.remote-session-viewer:has(.remote-viewer-screen canvas[data-keyboard-focus]:focus) .remote-viewer-keyboard-help,
.remote-session-viewer:has(.remote-viewer-toolbar :focus-visible) .remote-viewer-keyboard-help,
.remote-session-viewer:has(.remote-viewer-toolbar[data-keyboard-focus]:focus-within) .remote-viewer-keyboard-help { display: block; }

@media (max-width: 860px) {
  .shell.remote-viewer-open { --phone-island-height: 0px; }
  .shell.remote-viewer-open .main { min-height: 100dvh; padding: 0; }
  .shell.remote-viewer-open .main > div:has(.remote-viewer) { min-height: 100dvh; }
  .shell.remote-viewer-open .tabbar { display: none; }
  .remote-viewer { height: 100dvh; min-height: 100dvh; border: 0; border-radius: 0; }
  .remote-viewer-toolbar { column-gap: 6px; row-gap: 8px; }
  .remote-viewer-toolbar:not(:has(.remote-viewer-disconnect)) {
    grid-template-columns: max-content minmax(0, 1fr);
    grid-template-areas: "back identity";
  }
  .remote-session-viewer .remote-viewer-toolbar:has(.remote-viewer-cancel) {
    grid-template-columns: 44px minmax(0, 1fr) max-content;
    grid-template-areas: "back identity cancel";
  }
  .remote-viewer-back { min-height: 44px; padding: 8px; }
  .remote-viewer-back .icon { width: 26px; height: 26px; transform: rotate(180deg); }
  .remote-viewer-back span { display: none; }
  .remote-viewer-identity { align-items: center; flex-direction: row; gap: 6px; font-size: calc(16px * var(--font-scale)); }
  .remote-viewer-identity strong { max-width: none; }
  .remote-viewer-status { min-height: 28px; padding: 3px 6px; font-size: calc(12px * var(--font-scale)); }
  .remote-viewer-actions { gap: 6px; }
  .remote-viewer-control { min-height: 44px; padding: 8px; }
  .remote-viewer-control span { white-space: nowrap; }
  .remote-viewer-control[aria-label="Ctrl+Alt+Del"] span { display: none; }
  .remote-viewer-fullscreen span { display: none; }
  .remote-viewer-disconnect { min-height: 44px; padding: 8px 10px; font-size: calc(14px * var(--font-scale)); }
  .remote-viewer-screen { min-height: 180px; }
  .remote-viewer-dialog-actions .btn:first-child,
  .remote-viewer-dialog-actions .btn:last-child { flex: 1 1 0; min-width: 0; }
  .remote-viewer-help { display: block; margin: 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--surface); color: var(--muted); font-size: calc(14px * var(--font-scale)); line-height: 1.5; }
  .remote-session-viewer .remote-viewer-identity { align-items: flex-start; flex-direction: column; gap: 4px; }
  .remote-session-viewer .remote-viewer-scrim { padding: 16px; }
  .remote-viewer-dialog { padding: 22px; }
}

/* Between a tablet and a wide window the controls and the name can't share a row: the name keeps the first row
   (one line, ending in an ellipsis) and the controls and Disconnect take the second. */
@media (min-width: 861px) and (max-width: 1100px) {
  .remote-viewer-toolbar:has(.remote-viewer-disconnect) {
    grid-template-columns: max-content minmax(0, 1fr) max-content;
    grid-template-areas: "back identity identity" "actions actions disconnect";
  }
  .remote-viewer-toolbar:has(.remote-viewer-disconnect) .remote-viewer-actions { justify-self: start; flex-wrap: wrap; min-width: 0; }
  .remote-viewer-toolbar:has(.remote-viewer-disconnect) .remote-viewer-disconnect { justify-self: end; }
  .remote-viewer-identity { flex-wrap: nowrap; }
  .remote-viewer-identity strong { flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .remote-viewer-identity .remote-viewer-office { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* A phone on its side has no room for the office name; a tablet's screen does. */
@media (max-width: 600px), (max-width: 860px) and (max-height: 500px) {
  .remote-viewer-office { display: none; }
}

@media (min-width: 601px) and (max-width: 860px) and (max-height: 500px) {
  .remote-viewer-toolbar,
  .remote-viewer-toolbar:not(:has(.remote-viewer-disconnect)) {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
  }
  .remote-viewer-back, .remote-viewer-identity, .remote-viewer-actions, .remote-viewer-disconnect { grid-area: auto; }
  .remote-viewer-identity { flex: 1 1 auto; }
  .remote-viewer-actions { flex: 0 0 auto; }
  .remote-viewer-disconnect { margin-left: 0; }
}

/* A phone on its side has little height: the sign-in card puts its fields beside the explanation so Connect stays in view. */
@media (min-width: 601px) and (max-height: 500px) {
  .remote-session-signin-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; width: min(100% - 32px, 720px); padding: 16px 20px; }
  .remote-session-signin-card .remote-account-note { margin-bottom: 0; }
  .remote-session-signin-card .remote-session-signin-fields label:first-child { margin-top: 0; }
}

@media (max-width: 600px) {
  .remote-viewer-toolbar { grid-template-columns: 44px minmax(0, 1fr) max-content; grid-template-areas: "back identity disconnect" "actions actions actions"; gap: 6px; padding: calc(8px + env(safe-area-inset-top)) 10px 8px; }
  .remote-viewer-toolbar:not(:has(.remote-viewer-disconnect)) { grid-template-columns: 44px minmax(0, 1fr); grid-template-areas: "back identity"; }
  .remote-session-viewer .remote-viewer-toolbar:has(.remote-viewer-cancel) { grid-template-columns: 44px minmax(0, 1fr) max-content; grid-template-areas: "back identity cancel"; }
  .remote-session-viewer .remote-viewer-toolbar { padding: calc(8px + env(safe-area-inset-top)) 10px 6px; }
  .remote-viewer-back { grid-column: 1; grid-row: 1; }
  .remote-viewer-identity { grid-column: 2; grid-row: 1; }
  .remote-session-viewer .remote-viewer-identity { gap: 0; }
  .remote-session-viewer .remote-viewer-status { min-height: 22px; padding: 1px 6px; }
  .remote-viewer-identity:has(.remote-viewer-status-connected),
  .remote-viewer-identity:has(.remote-viewer-status-connecting) { align-items: flex-start; flex-direction: column; }
  .remote-viewer-identity strong { max-width: none; }
  .remote-viewer-actions { display: grid; grid-column: 1 / -1; grid-row: 2; grid-template-columns: 52px minmax(0, 1fr) 52px; width: 100%; }
  .remote-viewer-actions:has(.remote-viewer-keyboard-control) { grid-template-columns: 52px minmax(0, 1fr) 52px 52px; }
  .remote-session-viewer .remote-viewer-actions { display: flex; grid-column: 1 / -1; grid-row: 2; justify-self: start; width: auto; }
  .remote-viewer-control { min-width: 44px; gap: 4px; padding: 6px; font-size: calc(13px * var(--font-scale)); }
  .remote-session-viewer .remote-viewer-control { width: 44px; min-width: 44px; height: 44px; justify-content: center; }
  .remote-viewer-control svg, .remote-viewer-control .icon { width: 18px; height: 18px; }
  .remote-viewer-disconnect { grid-column: 3; grid-row: 1; gap: 4px; padding: 6px; }
  .remote-viewer-disconnect svg { width: 18px; height: 18px; }
  .remote-session-signin-card { padding: 20px; }
  .remote-session-viewer .remote-session-signin-card h1 { margin-bottom: 6px; }
  .remote-session-viewer .remote-session-signin-card .remote-session-server-name { margin-bottom: 8px; }
  .remote-session-viewer .remote-session-signin-card .remote-account-note { margin-bottom: 10px; }
  .remote-session-viewer .remote-session-signin-card label { margin-top: 10px; }
  .remote-session-viewer .remote-session-signin-actions { margin-top: 16px; }
  .remote-session-viewer .remote-session-message { margin-top: 10px !important; }
  .remote-session-viewer .remote-viewer-dialog { padding-bottom: 14px; }
  .remote-session-viewer .remote-viewer-dialog h2 { margin-bottom: 8px; }
  .remote-session-viewer .remote-viewer-dialog p { margin-bottom: 8px; }
}

@media (max-width: 360px) {
  .remote-viewer-identity { gap: 4px; font-size: calc(14px * var(--font-scale)); }
  .remote-viewer-status { font-size: calc(10px * var(--font-scale)); padding: 2px 4px; }
  .remote-viewer-actions { grid-template-columns: 52px minmax(0, 1fr) 52px; gap: 4px; }
  .remote-viewer-actions:has(.remote-viewer-keyboard-control) { grid-template-columns: 52px minmax(0, 1fr) 52px 52px; }
  .remote-viewer-control { gap: 3px; padding: 5px 4px; font-size: calc(12px * var(--font-scale)); }
}

@media (max-width: 600px) {
  .remote-section { margin-top: 20px; }
  .remote-session-grid, .remote-computer-grid, .remote-settings-grid { grid-template-columns: minmax(0, 1fr); }
  .remote-tile-foot { flex-wrap: wrap; }
  .remote-grant-card { padding: 10px; }
  .remote-grant-copy-row { align-items: stretch; flex-direction: column; }
  .remote-grant-copy-row .btn { align-self: flex-start; }
  .remote-grant-dismiss { min-height: 44px; }
}

.conversation-back,
.conversation .conversation-head-pending {
  display: none;
}

@media (max-width: 860px) {
  .conversation-open {
    --phone-island-height: 0px;
  }
  .conversation-open .tabbar,
  .you-places {
    display: none;
  }
  .conversation-open .main {
    padding-bottom: 0;
  }
  .conversation .conversation-head-pending {
    display: flex;
  }
  .conversation .conversation-head,
  .conversation .thread-head {
    position: sticky;
    top: var(--staging-bar-height);
    z-index: 8;
    /* Take back the shell's padding so the bar reaches both edges and the top. */
    margin: -22px -16px 12px;
    padding: 8px 16px 8px 6px;
    border-bottom: 1px solid var(--line);
    background: var(--bg);
  }
  .conversation .conversation-head {
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 2px;
  }
  .conversation-head .grow {
    flex: 1;
  }
  .conversation-head h1 {
    font-size: round(nearest, calc(20px * var(--font-scale)), 1px);
    --lh: 1.2;
  }
  .conversation-head .channel-name {
    margin-top: 0;
    margin-bottom: 0;
    padding-block: 2px;
  }
  .conversation-back {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-left: 0;
    border-radius: var(--radius-round);
    color: var(--text);
    text-decoration: none;
  }
  .conversation-back:active {
    background: var(--surface-2);
  }
  .conversation-back .icon {
    width: 24px;
    height: 24px;
    transform: rotate(180deg);
  }
  .conversation .thread-back {
    margin: 0;
  }
  .conversation .message,
  .conversation .new-divider {
    /* Clear the channel bar and the thread bar's extra title line when jumping to a message. */
    scroll-margin-top: max(100px, calc(100px * var(--font-scale)));
  }
  .conversation .channel-pane,
  .conversation .thread-pane {
    display: flex;
    flex-direction: column;
    min-height: calc(100dvh - 22px);
  }
  .conversation.has-thread .channel-pane {
    display: none;
  }
  .conversation .messages {
    flex: 1;
  }
  .conversation .composer-area {
    padding-bottom: calc(4px + env(safe-area-inset-bottom));
  }
  /* iOS keyboard: the shell tracks visualViewport (conversation-keyboard.js). */
  .shell.conversation-keyboard {
    position: fixed;
    top: var(--msg-viewport-top, 0px);
    left: 0;
    right: 0;
    width: 100%;
    height: var(--msg-viewport-height, 100dvh);
    min-height: var(--msg-viewport-height, 100dvh);
    margin-top: 0;
    overflow: hidden;
  }
  .shell.conversation-keyboard .main {
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
    height: 100%;
    overflow: hidden;
    box-sizing: border-box;
  }
  .shell.conversation-keyboard .main > :last-child {
    flex: 1;
    min-height: 0;
  }
  .shell.conversation-keyboard .main > :last-child > .conversation {
    height: 100%;
    min-height: 0;
  }
  .shell.conversation-keyboard .conversation .channel-pane,
  .shell.conversation-keyboard .conversation .thread-pane {
    min-height: 0;
    height: 100%;
    max-height: 100%;
    flex: 1;
  }
  .shell.conversation-keyboard .conversation .composer-area {
    padding-bottom: 4px;
  }
  .shell.conversation-keyboard .conversation .messages {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-anchor: none;
    padding-bottom: calc(16px + var(--msg-close-spacer, 0px));
  }
  /* The 44px row floor replaces the content minimum, so this height-capped
     column would crush every row to 44px and paint the leftover on the next
     row. Keep the floor for a short row; let the list scroll. */
  .conversation .messages > .message {
    flex-shrink: 0;
  }
}

/* ---- The logo: a tooth that is also a chat bubble (js/logo.js) ---- */

.logo {
  --logo-fill: var(--brand);
  --logo-dots: #ffffff;
  --logo-spark: var(--warn);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.sidebar .logo {
  --logo-fill: var(--side-logo);
  --logo-dots: var(--side-bg);
  --logo-spark: #f2c25b;
}

.logo-mark {
  width: 32px;
  height: 32px;
  overflow: visible;
}

.logo-fill {
  fill: var(--logo-fill);
}

.logo-line {
  fill: none;
  stroke: var(--logo-fill);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100;
}

.logo-dots circle {
  fill: var(--logo-dots);
}

.logo-spark {
  fill: var(--logo-spark);
  opacity: 0;
}

.logo-mark *,
.logo-name {
  transform-box: fill-box;
  transform-origin: center;
}

/* As it appears, in about a second: both sides draw down from the top, the tooth fills, the
   dots pop in one after another, a sparkle flashes and the name slides in. */
.logo-line {
  animation: logo-draw 0.45s cubic-bezier(0.65, 0, 0.35, 1) both;
}

.logo-fill {
  animation: logo-fill 0.2s 0.35s ease-out both;
}

.logo-dots circle {
  animation: logo-pop 0.34s cubic-bezier(0.3, 1.7, 0.5, 1) both;
}

.logo-dots g:nth-child(1) circle {
  animation-delay: 0.42s;
}

.logo-dots g:nth-child(2) circle {
  animation-delay: 0.49s;
}

.logo-dots g:nth-child(3) circle {
  animation-delay: 0.56s;
}

.logo-spark {
  animation: logo-twinkle 0.55s 0.72s ease-out both, logo-twinkle 0.55s 7.72s ease-out infinite;
}

.logo-name {
  animation: logo-name 0.35s 0.25s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

/* Then the dots type every seven seconds; on hover, and when something new arrives, at once. */
.logo-dots g {
  animation: logo-wave 7s 2.2s ease-in-out infinite;
}

.logo-dots g:nth-child(2) {
  animation-delay: 2.29s;
}

.logo-dots g:nth-child(3) {
  animation-delay: 2.38s;
}

.logo.bump .logo-dots g,
.logo:hover .logo-dots g {
  animation: logo-type 0.62s ease-in-out infinite;
}

.logo.bump .logo-dots g:nth-child(2),
.logo:hover .logo-dots g:nth-child(2) {
  animation-delay: 0.09s;
}

.logo.bump .logo-dots g:nth-child(3),
.logo:hover .logo-dots g:nth-child(3) {
  animation-delay: 0.18s;
}

@keyframes logo-draw {
  from { stroke-dashoffset: 100; }
  to { stroke-dashoffset: 0; }
}

@keyframes logo-fill {
  from { fill-opacity: 0; }
  to { fill-opacity: 1; }
}

@keyframes logo-pop {
  from { transform: scale(0); }
  to { transform: scale(1); }
}

@keyframes logo-twinkle {
  0% { opacity: 0; transform: scale(0) rotate(-60deg); }
  45% { opacity: 1; transform: scale(1.2) rotate(0deg); }
  100% { opacity: 0; transform: scale(0.6) rotate(25deg); }
}

@keyframes logo-name {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: none; }
}

@keyframes logo-wave {
  0%, 12%, 100% { transform: translateY(0); }
  4% { transform: translateY(-4px); }
  8% { transform: translateY(0.8px); }
}

@keyframes logo-type {
  0%, 60%, 100% { transform: translateY(0); }
  25% { transform: translateY(-4px); }
}

@media (prefers-reduced-motion: reduce) {
  .logo-mark *,
  .logo-name {
    animation: none !important;
  }
}

/* ---- Page parts ---- */

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 20px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

/* Practice Hub's page head (PageHead in js/ui.js): the title, a one-line summary under it,
   and the page's actions on the right. */
.page-title {
  min-width: 0;
}

.page-sum {
  margin: 6px 0 0;
  font-size: round(nearest, calc(15px * var(--font-scale)), 1px);
  color: var(--muted);
}

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

/* The bar under it (PageBar): the scope on the left, search and actions on the right. */
.page-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-bottom: 18px;
}

.bar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

/* Search in the bar: a pill with its magnifier inside. */
.bar-search {
  position: relative;
}

.bar-search .icon {
  position: absolute;
  top: 50%;
  left: 13px;
  width: 17px;
  height: 17px;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}

.bar-search .input {
  width: 15rem;
  padding-left: 38px;
  border-radius: var(--radius-control);
}

@media (max-width: 860px) {
  .page-bar > .segmented {
    width: 100%;
  }
  .bar-actions {
    width: 100%;
    justify-content: flex-end;
    margin-left: 0;
  }
  .bar-search {
    flex: 1 1 100%;
  }
  .bar-search .input {
    width: 100%;
  }
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.card.pad {
  padding: 20px 22px;
}

/* The card's padding is the space at its edges: no extra margin inside it. */
.card.pad > :first-child {
  margin-top: 0;
}

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

.card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 22px 6px;
}

.card-head h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: round(nearest, calc(22px * var(--font-scale)), 1px);
  font-weight: 600;
  font-style: normal;
  font-variant: normal;
  font-stretch: normal;
  --lh: 1.2;
}

.group-label {
  padding: 14px 22px 4px;
}

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

.list > li + li {
  border-top: 1px solid var(--line);
}

.row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 22px;
  color: var(--text);
  text-decoration: none;
}

a.row:hover,
.row-button:hover {
  background: var(--surface-2);
}

.list > li:last-child > .row {
  border-radius: 0 0 var(--radius) var(--radius);
}

.row .grow {
  flex: 1;
  min-width: 0;
}

.row .title {
  font-weight: 650;
  font-size: round(nearest, calc(16px * var(--font-scale)), 1px);
  color: var(--accent-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.row .meta {
  font-size: round(nearest, calc(14px * var(--font-scale)), 1px);
  color: var(--muted);
}

.row .when,
.activity .when {
  flex: none;
  font-size: round(nearest, calc(12px * var(--font-scale)), 1px);
  color: var(--muted);
}

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

/* The library keeps one link per document, with its kind and conversation beside it. */
.library-assigned {
  margin-bottom: 24px;
}
.library-assigned h2 {
  flex-wrap: wrap;
}
.assigned-row {
  min-height: 52px;
  padding: 7px 18px;
  gap: 8px;
}
.assigned-row .title,
.assigned-row .meta {
  display: block;
  overflow-wrap: anywhere;
}
.assigned-row .title {
  color: var(--accent-ink);
  font-size: calc(14px * var(--font-scale));
  white-space: normal;
}
.assigned-row .meta {
  font-size: calc(12px * var(--font-scale));
}
.assigned-dot {
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  align-self: flex-start;
  margin-top: 7px;
  border-radius: var(--radius-round);
  background: var(--line-strong);
}
.assigned-dot.late {
  background: var(--danger);
}
.assigned-due {
  flex: 0 0 auto;
  max-width: 42%;
  text-align: right;
  color: var(--muted);
  font-size: calc(12px * var(--font-scale));
  font-weight: 650;
}
.assigned-due.late {
  color: var(--danger);
}
.assigned-due.soon {
  color: var(--warn-ink);
}
.list-task-fields {
  border: 0;
  padding: 0;
  margin: 20px 0;
  min-width: 0;
}
.list-task-fields legend {
  font-weight: 650;
  margin-bottom: 10px;
}
@media (max-width: 860px), (pointer: coarse) {
  .assigned-row {
    padding: 8px 12px;
    min-height: 52px;
  }
  .assigned-row .title,
  .assigned-due {
    font-size: calc(14px * var(--font-scale));
  }
  .assigned-row .meta {
    font-size: calc(13px * var(--font-scale));
  }
  .list-task-fields .select {
    min-height: 44px;
    font-size: max(16px, calc(15px * var(--font-scale)));
  }
}
.library-section h2 {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.library-section .card {
  overflow: hidden;
}
.library-row {
  gap: 8px;
  min-height: 54px;
  padding: 8px 18px;
}
.library-row .title,
.library-row .meta {
  display: block;
  overflow-wrap: anywhere;
}
.library-row .title {
  white-space: normal;
  color: var(--heading);
  font-size: calc(14px * var(--font-scale));
}
.library-row .meta {
  font-size: calc(12px * var(--font-scale));
}
.library-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent-ink);
}
.library-icon.list {
  background: var(--ok-soft);
  color: var(--ok);
}
.library-icon .icon,
.library-row > .icon {
  width: 18px;
  height: 18px;
}
.library-row > .icon,
.library-kind {
  flex: none;
  color: var(--muted);
}
.library-kind {
  font-size: calc(13px * var(--font-scale));
}
.library-deleted .library-row {
  gap: 12px;
  padding: 12px 18px;
}
.library-deleted .library-icon {
  opacity: .6;
}
.library-deleted .title {
  color: var(--muted);
}
.library-deleted .btn {
  flex: none;
}
.library-deleted h2 {
  flex-wrap: wrap;
}
.library-places {
  max-height: 42dvh;
  overflow-y: auto;
}
.library-places .conversation-add-choice,
.library-new .conversation-add-choice > span:last-child {
  min-width: 0;
  overflow-wrap: anywhere;
}
.library-new .input,
.library-page .bar-search .input {
  min-height: 44px;
}
.library-new .conversation-add-summary {
  display: block;
  overflow-wrap: anywhere;
}
@media (max-width: 860px) {
  .library-page .page-title,
  .library-page .page-actions {
    width: 100%;
  }
  .library-page .page-head {
    margin-bottom: 24px;
  }
  .library-row {
    padding: 10px 12px;
  }
  .library-deleted .library-row {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    padding: 16px 18px;
  }
  .library-deleted .btn {
    grid-column: 1 / -1;
    justify-self: start;
  }
  .library-row .title {
    font-size: calc(16px * var(--font-scale));
  }
  .library-row .meta,
  .library-kind {
    font-size: calc(13px * var(--font-scale));
  }
}
@media (max-width: 860px), (pointer: coarse) {
  .library-new .input,
  .library-page .bar-search .input {
    font-size: max(16px, calc(15px * var(--font-scale)));
  }
}

/* Compact conversation, notification and message-search lists; admin lists keep their spacing. */
.list.dense .row {
  min-height: 48px;
  gap: 8px;
  padding: 8px 18px;
  --lh: 1.35;
}

.list.dense .title {
  font-size: round(nearest, calc(14px * var(--font-scale)), 1px);
}

.list.dense .meta {
  font-size: round(nearest, calc(12px * var(--font-scale)), 1px);
}

.list.dense .found {
  font-size: round(nearest, calc(14px * var(--font-scale)), 1px);
}

@media (max-width: 860px) {
  .list.dense .row {
    padding: 8px 12px;
  }
  .messages-head {
    gap: 10px;
    margin-bottom: 12px;
  }
}

.row-button {
  width: 100%;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
}

.empty {
  margin: 0;
  padding: 18px 22px 22px;
  color: var(--muted);
}

/* Coloured dots in front of rows, as in a to-do list. */
.dot {
  flex: none;
  align-self: flex-start;
  width: 10px;
  height: 10px;
  margin-top: 7px;
  border-radius: 50%; /* true circle */
  background: var(--line-strong);
}

.dot.warn {
  background: var(--warn);
}

.dot.danger {
  background: var(--danger);
}

.dot.ok {
  background: var(--ok);
}

.dot.accent {
  background: var(--accent-ink);
}

.count {
  display: inline-block;
  min-width: 20px;
  padding: 0 6px;
  border-radius: min(10px, var(--radius-control));
  background: var(--warn);
  color: #2b1d05;
  font-size: round(nearest, calc(12px * var(--font-scale)), 1px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 20px;
  text-align: center;
}

.badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--radius-control);
  font-size: round(nearest, calc(12px * var(--font-scale)), 1px);
  font-weight: 650;
  white-space: nowrap;
  background: var(--surface-2);
  color: var(--muted);
}

.badge.open {
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.badge.in_progress {
  background: var(--warn-soft);
  color: var(--warn-ink);
}

.badge.waiting {
  background: var(--surface-2);
  color: var(--muted);
}

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

.badge.urgent {
  background: var(--danger-soft);
  color: var(--danger);
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.page-head .toolbar {
  margin-bottom: 0;
}

/* Filters and scopes: one track with the choices in it, the chosen one filled, each with
   its count (Practice Hub's "Mine 0 · Team 3"). A choice with nothing in it is quieter. */
.segmented {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--surface-2);
}

.segmented button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 15px;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--chip-text);
  cursor: pointer;
  font-weight: 550;
  white-space: nowrap;
}

/* Only where there's a pointer to hover with: on a touch screen the tapped choice would keep it. */
@media (hover: hover) {
  .segmented button:hover {
    background: var(--surface);
  }
}

.segmented button[aria-pressed="true"] {
  background: var(--brand);
  color: #ffffff;
  font-weight: 650;
}

.segmented .seg-n,
.segmented .pill-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  margin: 0;
  padding: 0 6px;
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--text);
  font-size: round(nearest, calc(12px * var(--font-scale)), 1px);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.segmented button[aria-pressed="true"] .seg-n,
.segmented button[aria-pressed="true"] .pill-count {
  background: var(--on-brand-chip);
  color: #ffffff;
}

.segmented .seg-n.danger,
.segmented button[aria-pressed="true"] .seg-n.danger {
  background: var(--danger);
  color: var(--danger-text);
}

.segmented button.zero:not([aria-pressed="true"]) {
  color: var(--muted);
}

.segmented button.zero:not([aria-pressed="true"]) .seg-n {
  background: transparent;
  color: var(--muted);
  font-weight: 500;
}

/* Phones: two choices a row, as Practice Hub lays its scopes out, so a third never sits alone
   off-centre. */
@media (max-width: 860px) {
  .segmented {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-radius: min(18px, var(--radius-control));
  }
  .segmented button {
    padding: 0 12px;
    border-radius: min(15px, var(--radius-control));
    font-size: round(nearest, calc(14px * var(--font-scale)), 1px);
  }
}

/* Where anything stands (Word in js/ui.js): the same few words, the same colours, on every
   screen. Your move, Waiting, On track, Needs a look, Done. */
.word {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--radius-control);
  font-size: round(nearest, calc(12px * var(--font-scale)), 1px);
  font-weight: 650;
  --lh: 1;
  white-space: nowrap;
}

.w-move {
  background: var(--danger-soft);
  color: var(--danger);
}

.w-wait {
  background: var(--surface-2);
  color: var(--muted);
}

.w-track {
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.w-look {
  background: var(--warn-soft);
  color: var(--warn-ink);
}

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

/* Beside a word: when, in short ("Overdue 2 h", "Due tomorrow"); late in the warning red. */
.when {
  font-size: round(nearest, calc(12.5px * var(--font-scale)), 1px);
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}

.when.late {
  color: var(--danger);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px 6px 14px;
  border-radius: var(--radius-control);
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-weight: 600;
  font-size: round(nearest, calc(14px * var(--font-scale)), 1px);
}

.chip a {
  display: inline-flex;
  padding: 0 6px;
  color: inherit;
  text-decoration: none;
  font-size: round(nearest, calc(16px * var(--font-scale)), 1px);
}

/* ---- Home ---- */

/* For you, Assigned to you, You asked for, each with its count (the base styles the track):
   Assigned to you's count turns red when any of it is urgent or overdue. */
.segmented .pill-count.danger,
.segmented button[aria-pressed="true"] .pill-count.danger {
  background: var(--danger);
  color: var(--danger-text);
}

/* "2 messages", "1 update": the groups in For you, in line with the rows' dots. */
.home-work .group-label {
  padding: 14px 18px 4px;
  font-size: round(nearest, calc(13px * var(--font-scale)), 1px);
  font-weight: 650;
  color: var(--muted);
}

/* Grouped message notices keep the conversation recognizable and the newest line glanceable. */
.home-message-notice {
  min-height: 68px;
  align-items: flex-start;
  padding: 12px 18px;
}

.home-notice-avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
}

.home-notice-avatar .person-avatar,
.home-notice-avatar .channel-avatar,
.home-notice-avatar .group-avatar,
.home-notice-item-avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
}

.home-notice-avatar .person-avatar {
  border-radius: var(--radius-avatar);
  background: var(--person-colour);
  color: #ffffff;
  font-size: round(nearest, calc(14px * var(--font-scale)), 1px);
  font-weight: 700;
}

.home-notice-avatar .channel-avatar,
.home-notice-avatar .group-avatar,
.home-notice-item-avatar {
  border-radius: var(--radius-avatar);
  background: var(--surface-2);
  color: var(--accent-ink);
}

.home-notice-avatar .channel-avatar {
  border-radius: 13px;
  font-size: 21px;
  font-weight: 650;
}

.home-notice-avatar .group-avatar .icon,
.home-notice-item-avatar .icon {
  width: 22px;
  height: 22px;
}

.home-notice-title,
.home-notice-meta,
.home-notice-preview {
  display: block;
}

.home-notice-title {
  overflow: hidden;
  color: var(--accent-ink);
  font-size: round(nearest, calc(16px * var(--font-scale)), 1px);
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-notice-meta,
.home-notice-preview {
  color: var(--muted);
  font-size: round(nearest, calc(13px * var(--font-scale)), 1px);
}

.home-notice-meta {
  margin-top: 2px;
}

.home-notice-preview {
  overflow: hidden;
  margin-top: 2px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 860px) {
  .home-work .group-label {
    padding: 12px 12px 4px;
  }

  .home-message-notice {
    padding: 12px;
  }
}

/* A piece of your work, as Practice Hub's rows: what it is, a line about it, then whose move
   it is, when it's due and who has it. */
.home-row {
  align-items: flex-start;
}

.home-row-name {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.home-row-name .title {
  min-width: 0;
}

.home-row-name .badge {
  flex: none;
}

.home-row-state {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-top: 8px;
}

/* Concerns can run long, so the description wraps on a phone instead of being cut short. */
.concern-row .title {
  white-space: normal;
}

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

.home-grid > .side {
  display: grid;
  gap: 22px;
}

/* minmax(0, …) so long one-line titles shorten instead of widening the page. */
.home-grid > *,
.detail-grid > * {
  min-width: 0;
}

.home-bot-pins {
  display: grid;
  gap: 12px;
  margin-bottom: 16px;
  padding: 16px 20px;
  background: var(--note-soft, var(--surface-2));
}

.home-bot-pins h2 { margin: 0; font-size: 16px; }
.home-bot-pin-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; max-width: 640px; }
.home-bot-pin {
  display: flex;
  min-width: 0;
  min-height: 76px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-1);
  color: var(--text);
  cursor: pointer;
  font: inherit;
}
.home-bot-pin:hover { background: var(--surface-2); }
.home-bot-pin span { max-width: 100%; text-align: center; font-size: 12px; line-height: 1.25; font-weight: 600; }
.home-bot-pins-footer { margin: 10px 0 0; font-size: 13px; }
.home-bot-pins-footer a { font-weight: 600; }

@media (max-width: 600px) {
  .home-bot-pin-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 380px; }
}

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

.attention a {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 22px;
  color: var(--text);
  text-decoration: none;
}

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

.attention .num {
  flex: none;
  display: grid;
  place-items: center;
  min-width: 46px;
  height: 46px;
  padding: 0 8px;
  border-radius: min(12px, var(--radius-control));
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: round(nearest, calc(20px * var(--font-scale)), 1px);
  font-weight: 600;
}

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

.attention .grow {
  flex: 1;
  min-width: 0;
}

.attention .what {
  font-weight: 650;
  font-size: round(nearest, calc(16px * var(--font-scale)), 1px);
  color: var(--heading);
}

.attention .sub {
  font-size: round(nearest, calc(14px * var(--font-scale)), 1px);
  color: var(--muted);
}

.attention .icon {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--muted);
}

/* ---- Buttons and forms ---- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 18px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control);
  background: var(--surface);
  cursor: pointer;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  color: var(--heading);
}

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

.btn.primary {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-text);
  letter-spacing: 0.03em;
}

.btn.primary:hover {
  background: var(--accent-strong);
}

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

.btn:disabled {
  opacity: 0.55;
  cursor: default;
}

.btn.block {
  width: 100%;
}

.btn.small-btn,
.small-btn {
  padding: 4px 12px;
  font-size: round(nearest, calc(13px * var(--font-scale)), 1px);
}

.btn.link {
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--accent-ink);
  font-weight: 600;
}

.btn.link:hover {
  background: none;
  text-decoration: underline;
}

/* Touch targets: 44px tall on phones and touch screens. Small buttons keep their size in
   dense rows (messages, timesheets) and get a 44px tap area around them instead. */
@media (max-width: 860px), (pointer: coarse) {
  .btn:not(.small-btn):not(.small),
  .segmented button,
  .select.narrow {
    min-height: 44px;
  }
  .check:not(.inline) {
    min-height: 44px;
    margin-bottom: 4px;
    padding-block: 11.5px;
  }
  .btn.small-btn,
  .btn.link.small {
    position: relative;
  }
  .btn.small-btn::after,
  .btn.link.small::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    height: 44px;
    transform: translateY(-50%);
  }
}

/* Hover, chosen and pressed states change colour in 150 ms; at once for reduced motion. */
.btn,
.nav a,
.tabbar a,
.segmented button,
a.row,
.row-button,
.person,
.search-fab {
  transition: background-color 150ms ease-out, border-color 150ms ease-out, color 150ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .nav a,
  .tabbar a,
  .segmented button,
  a.row,
  .row-button,
  .person,
  .search-fab {
    transition: none;
  }
}

.field {
  display: block;
  margin-bottom: 16px;
}

.field > span {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  font-size: round(nearest, calc(14px * var(--font-scale)), 1px);
  color: var(--heading);
}

.field .hint {
  display: block;
  margin-top: 4px;
  font-size: round(nearest, calc(13px * var(--font-scale)), 1px);
  font-weight: 400;
  color: var(--muted);
}

.input,
.select,
.textarea {
  width: 100%;
  padding: 10px 13px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.input:focus,
.select:focus,
.textarea:focus {
  border-color: var(--accent-ink);
}

.textarea {
  min-height: 84px;
  resize: vertical;
}

.select.narrow {
  width: auto;
  border-radius: var(--radius-control);
  padding: 8px 14px;
}

/* Already large, so not scaled with the text size: the 12em-wide PIN box still fits a phone. */
.code-input {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 22px;
  font-weight: 600;
  font-style: normal;
  font-variant: normal;
  font-stretch: normal;
  --lh: 1.2;
  letter-spacing: 6px;
}

.check {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-bottom: 14px;
  font-size: round(nearest, calc(14px * var(--font-scale)), 1px);
}

.check input {
  flex: none;
  width: 16px;
  height: 16px;
  margin: 3px 0 0;
  accent-color: var(--accent);
}

/* What a checkbox means, under its label, lined up with the label's text. */
.check-hint {
  margin: -8px 0 16px 24px;
  font-size: round(nearest, calc(13px * var(--font-scale)), 1px);
  color: var(--muted);
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 14px;
}

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

fieldset.plain {
  margin: 0 0 14px;
  padding: 0;
  border: 0;
}

fieldset.plain legend {
  margin-bottom: 6px;
  padding: 0;
  font-weight: 600;
  font-size: round(nearest, calc(14px * var(--font-scale)), 1px);
  color: var(--heading);
}

.error {
  margin: 0 0 14px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: var(--danger-soft);
  color: var(--danger);
  font-weight: 600;
}

.note {
  margin: 0 0 14px;
  padding: 10px 14px;
  border: 1px solid var(--note-line);
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--text);
}

.note.compact {
  margin-bottom: 6px;
  padding: 5px 12px;
  font-size: round(nearest, calc(13px * var(--font-scale)), 1px);
}

.banner {
  margin: 0 0 16px;
  padding: 11px 16px;
  border-radius: var(--radius-sm);
  background: var(--warn-soft);
  color: var(--warn-ink);
  font-weight: 600;
}

.actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}

.actions.start {
  justify-content: flex-start;
  margin-top: 16px;
}

.bot-setup-form .actions {
  flex-wrap: wrap;
}

/* ---- Sign-in ---- */

.center {
  min-height: calc(100vh - var(--staging-bar-height));
  margin-top: var(--staging-bar-height);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 56px 16px;
}

.center .card {
  width: 100%;
  max-width: 440px;
  padding: 30px 28px;
}

.center h1 {
  margin-bottom: 8px;
}

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

/* A channel's name at the top opens its details (members, Leave channel), as in Slack. */
.conversation-head .grow {
  min-width: 0;
}

/* Inline-block, so a long name wraps and the chevron follows its last word. */
.channel-name {
  display: inline-block;
  max-width: calc(100% + 8px);
  margin: -4px 0 -4px -8px;
  padding: 4px 8px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  text-align: left;
  overflow-wrap: anywhere;
  cursor: pointer;
  transition: background-color 150ms ease-out;
}

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

.channel-name .icon {
  width: 20px;
  height: 20px;
  margin-left: 6px;
  vertical-align: -1px;
  color: var(--muted);
  transform: rotate(90deg);
}

.channel-members h3,
.channel-hooks h3 {
  margin: 20px 0 2px;
  font-size: round(nearest, calc(15px * var(--font-scale)), 1px);
  font-weight: 650;
  color: var(--heading);
}

.channel-members .card,
.channel-hooks .card {
  margin-top: 10px;
}

.add-member {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.add-member .input {
  flex: 1 1 14em;
  width: auto;
}

.channel-hooks .note .input {
  margin: 6px 0;
  font-family: ui-monospace, monospace;
  font-size: round(nearest, 0.85em, 1px);
}

.leave-ask {
  margin: 20px 0 0;
}

.join-prompt p {
  margin: 0 0 14px;
}

/* A dialog's other action (Leave channel, New channel, Delete …) sits apart, on the left. */
.actions > .first {
  margin-right: auto;
}

.conversation {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 150px);
}

.channel-pane {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.messages {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 0 16px;
}

.message {
  padding: 8px 12px;
  border-radius: var(--radius-bubble);
}

.message .who {
  border-top-width: 0;
  padding-top: 0;
  font-weight: 700;
  font-size: round(nearest, calc(14px * var(--font-scale)), 1px);
  color: var(--heading);
}

.message .when {
  margin-left: 8px;
  font-size: round(nearest, calc(12px * var(--font-scale)), 1px);
  color: var(--muted);
}

.message .text {
  font-size: round(nearest, calc(var(--message-size) * var(--font-scale)), 1px);
  --lh: var(--message-lh);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.conversation .messages {
  gap: 0;
}

.conversation .message {
  padding: 6px 10px;
  font-size: round(nearest, calc(var(--message-size) * var(--font-scale)), 1px);
  --lh: var(--message-lh);
  transition: background-color 150ms ease-out;
}

/* With a mouse, the message under it lights up with its Reply, Edit and Delete. */
@media (hover: hover) {
  .conversation .message:not(.bot):hover,
  .conversation .message:not(.bot):focus-within {
    background: var(--surface-2);
  }
}

/* "No messages yet", in line with the messages' own text. */
.messages > p.muted {
  margin: 6px 10px;
}

.message.bot {
  border: 1px solid var(--note-line);
  background: var(--accent-soft);
}

/* A bot's message: its colour (from the bots table, always #rrggbb) down the side and beside
   its name; the name itself keeps the heading colour so it reads in either theme. */
.message.from-bot {
  border-left: 4px solid var(--bot-colour, var(--note-line));
}

.message .bot-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: 50%; /* true circle */
  background: var(--bot-colour, var(--accent));
  align-self: center;
}

.message .mention {
  color: var(--accent-ink);
  font-weight: 650;
}

/* A bot's card under its message (web/js/cards.js): a dashboard, a prompt or an action. Only
   the theme's tokens, so it follows light and dark mode and Classic; charts are SVG that scale
   to the width they're given, up to a size where their labels still read. */
.bot-card {
  max-width: 640px;
  margin: 8px 0 4px;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  overflow-wrap: anywhere;
}

.bot-card + .bot-card {
  margin-top: 6px;
}

.bot-card-title {
  margin: 0 0 10px;
  font-size: round(nearest, calc(15px * var(--font-scale)), 1px);
  color: var(--heading);
}

.bot-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.bot-tile {
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border-left: 3px solid var(--line-strong);
}

.bot-tile.tone-ok { border-left-color: var(--ok); }
.bot-tile.tone-warn { border-left-color: var(--warn); }
.bot-tile.tone-danger { border-left-color: var(--danger); }

.bot-tile-label,
.bot-tile-note {
  font-size: round(nearest, calc(12px * var(--font-scale)), 1px);
  color: var(--muted);
}

.bot-tile-value {
  font-size: round(nearest, calc(20px * var(--font-scale)), 1px);
  font-weight: 700;
  color: var(--heading);
  font-variant-numeric: tabular-nums;
}

.bot-tile-unit {
  font-size: round(nearest, calc(13px * var(--font-scale)), 1px);
  font-weight: 500;
  color: var(--muted);
}

.bot-chart {
  margin: 0 0 12px;
}

.bot-chart:last-child {
  margin-bottom: 0;
}

.bot-block-title {
  margin-bottom: 6px;
  font-size: round(nearest, calc(13px * var(--font-scale)), 1px);
  font-weight: 600;
  color: var(--heading);
}

.bot-svg {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  overflow: visible;
  font-family: var(--sans);
}

.bot-svg text {
  font-size: 12px;
  fill: var(--text);
}

.bot-svg .tick,
.bot-svg .value {
  fill: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* A chart's labels and values in full, under it. */
.bot-numbers {
  margin-top: 4px;
  font-size: round(nearest, calc(13px * var(--font-scale)), 1px);
}
.bot-numbers summary {
  display: inline-flex;
  align-items: center;
  color: var(--accent-ink);
  font-weight: 600;
  cursor: pointer;
}
.bot-numbers ul {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}
.bot-numbers li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2px 12px;
  padding: 2px 0;
}
.bot-numbers strong {
  font-variant-numeric: tabular-nums;
}
@media (max-width: 860px), (pointer: coarse) {
  .bot-numbers summary {
    min-height: 44px;
  }
  .bot-numbers {
    font-size: max(16px, round(nearest, calc(14px * var(--font-scale)), 1px));
  }
}

.bot-svg .track { fill: var(--surface-2); }
.bot-svg .bar { fill: var(--accent-ink); }
.bot-svg .grid { stroke: var(--line-strong); stroke-dasharray: 3 3; }
.bot-svg .axis { stroke: var(--muted); }

.bot-svg .stroke {
  fill: none;
  stroke: var(--accent-ink);
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.bot-svg .dot {
  fill: var(--surface);
  stroke: var(--accent-ink);
  stroke-width: 2;
}

/* A wide table scrolls inside the card, never the page. It is also what a changes table asks
   how wide its card is (@container, below). */
.bot-table-scroll {
  max-width: 100%;
  overflow-x: auto;
  container-type: inline-size;
}

.table.bot-table th,
.table.bot-table td {
  padding: 6px 10px;
  white-space: nowrap;
}

.table.bot-table th {
  letter-spacing: 0.04em;
}

#dropbox-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

#dropbox-line [role="status"] {
  min-width: 0;
  overflow-wrap: anywhere;
}

#dropbox-line [role="status"] .badge {
  white-space: normal;
}

/* On a phone the owner's remaining Bots tables are too wide for the card, so each row becomes a
   stack of cells, each under its column's name (data-label in bots.js). Computers keep the tables. */
@media (max-width: 860px) {
  :is(#bot-keys, #bot-versions, #bot-runs),
  :is(#bot-keys, #bot-versions, #bot-runs) :is(tbody, tr, td) {
    display: block;
  }
  :is(#bot-keys, #bot-versions, #bot-runs) thead {
    display: none;
  }
  :is(#bot-keys, #bot-versions, #bot-runs) tr {
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
  }
  :is(#bot-keys, #bot-versions, #bot-runs) tr:last-child {
    border-bottom: 0;
  }
  :is(#bot-keys, #bot-versions, #bot-runs) td {
    padding: 4px 0;
    border-bottom: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  :is(#bot-keys, #bot-versions, #bot-runs) td:empty {
    display: none;
  }
  :is(#bot-keys, #bot-versions, #bot-runs) td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    font-size: round(nearest, calc(12px * var(--font-scale)), 1px);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
  }
  /* A version's buttons wrap with room between them. */
  #bot-versions td[data-label="Actions"] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  #bot-versions td[data-label="Actions"]::before {
    flex-basis: 100%;
    margin-bottom: 0;
  }
  /* A new key gets the full width, with Save and Clear under it, and 16px text so iOS
     doesn't zoom in. */
  #bot-keys .key-form {
    flex-wrap: wrap;
  }
  #bot-keys .key-form .input {
    flex: 1 1 100%;
    margin-bottom: 2px;
    font-size: max(16px, round(nearest, calc(14px * var(--font-scale)), 1px));
  }
  /* In these stacked rows the small buttons aren't dense: each is a full 44px target, and each
     switch (On, Writes) too, with room between them. */
  #bot-versions td[data-label="Actions"] .btn,
  #bot-keys .key-form .btn,
  #dropbox-line .btn {
    min-width: 44px;
    min-height: 44px;
  }
  /* Setup's fields at 16px, so iOS doesn't zoom in on one, and its pickers 44px tall. */
  :is(.bot-setup-form, #version-editor) :is(.input, .select, .textarea) {
    font-size: max(16px, round(nearest, calc(14px * var(--font-scale)), 1px));
  }
  .bot-setup-form .select {
    min-height: 44px;
  }
  /* The Bots page's bot picker (a drop-down from five bots up, above Versions and a bot's own
     settings) is a full 44px target too. Its text keeps the size it has, as the owner prefers. */
  .select.bot-picker {
    min-height: 44px;
  }
  /* A version's Done stays in view at the bottom of the dialog, which fills the screen here. */
  .dialog-done {
    position: sticky;
    bottom: -20px;
    margin: 16px -20px -20px;
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
    background: var(--surface);
    border-top: 1px solid var(--line);
  }
  .dialog-done .btn {
    width: 100%;
  }
}

/* A list of links, one to a row (the Bots page's Setup screens, Setup's own list, an export's
   files): each a whole row to tap, with its standing beside it. */
.list-rows {
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}
.list-rows li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  padding: 2px 0;
}
.list-rows li + li {
  border-top: 1px solid var(--line);
}
.list-rows a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
}
@media (max-width: 860px), (pointer: coarse) {
  .list-rows li {
    padding: 4px 0;
  }
  .list-rows a {
    min-height: 44px;
  }
}

.bot-changes .before {
  color: var(--muted);
  text-decoration: line-through;
}

.bot-changes .after {
  font-weight: 600;
  color: var(--heading);
}

/* What a bot is about to change wraps inside its card, so there is nothing to swipe before
   pressing Confirm. It comes after `.table.bot-table td` (the same weight), which keeps every
   other bot table on one line; the heading cells keep one line too. */
.table.bot-changes td {
  white-space: normal;
  overflow-wrap: break-word;
}

/* A long value with no spaces, a pasted link say, may break anywhere. `break-word` isn't enough
   in a table: its column still won't get narrower than the value's longest word, so the card
   would swipe again. `anywhere` lets the column shrink; the floor keeps it from shrinking past a
   word of a dozen letters, which the other columns' long values would otherwise squeeze it to. The
   names in the first column keep `break-word`, so a squeezed table never cuts "Reminder" in two. */
.table.bot-changes td.before,
.table.bot-changes td.after {
  overflow-wrap: anywhere;
  min-width: 9em;
}

/* In a card this narrow (a phone, or a thread beside its channel) three columns can't each hold a
   whole word, so the browser would cut ordinary words in two to share the width out. Each change
   stacks instead: the field, then what it is now and what it will be, each under its own name, with
   the card's width less the name for its value. A word breaks only when it can't fit by itself. A
   wider card keeps its table. The names are drawn out of the text's flow, so the old value's
   strike-through doesn't run through its name. The point is 30em of the card's own text (420px at
   the default 14px): the value columns' floor above is in em, so with the larger text You ›
   Appearance offers it has to move up with them, or a card just wider than 420px would have to
   be swiped again. */
@container (max-width: 30em) {
  .table.bot-changes,
  .table.bot-changes :is(tbody, tr, td) {
    display: block;
  }
  .table.bot-changes thead {
    display: none;
  }
  .table.bot-changes tr {
    padding: 6px 0;
    border-bottom: 1px solid var(--line);
  }
  .table.bot-changes tr:last-child {
    border-bottom: 0;
  }
  .table.bot-changes td {
    padding: 2px 10px;
    border-bottom: 0;
  }
  .table.bot-changes td:first-child {
    font-weight: 600;
    color: var(--heading);
  }
  .table.bot-changes td.before,
  .table.bot-changes td.after {
    position: relative;
    min-width: 0;
    padding-left: calc(10px + 4.5em);
  }
  .table.bot-changes td.before::before,
  .table.bot-changes td.after::before {
    position: absolute;
    left: 10px;
    font-weight: 400;
    color: var(--muted);
  }
  .table.bot-changes td.before::before { content: "Now"; }
  .table.bot-changes td.after::before { content: "After"; }
}

.bot-prompt-text,
.bot-action-summary {
  margin: 0 0 10px;
  font-weight: 600;
  color: var(--heading);
}

.bot-card-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.bot-card .muted.small,
.bot-card .error {
  margin: 8px 0 0;
}

.bot-action-status {
  margin: 10px 0 0;
  font-weight: 600;
  color: var(--muted);
}

.bot-action-status.status-confirmed { color: var(--ok); }
.bot-action-status.status-failed { color: var(--danger); }
.bot-action-status.status-unconfirmed { color: var(--warn-ink); }

@media (max-width: 860px) {
  .bot-card {
    padding: 10px 12px;
  }
  /* Two to a row, or one alone at full width: a label that fits in half a row stays two to a
     row; a longer one (a bot's name in "See …'s answer") takes its row, centred like a button's,
     and breaks only a word that can't fit by itself. */
  .bot-card-buttons .btn {
    flex: 1 1 auto;
    min-width: calc(50% - 4px);
    text-align: center;
    overflow-wrap: break-word;
  }
}

.message-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
}

.message .edited {
  margin-left: 6px;
  font-size: round(nearest, calc(12px * var(--font-scale)), 1px);
  color: var(--muted);
}

/* Computers keep their hover links. Phones open the same actions from one button. */
.message-actions {
  display: inline-flex;
  gap: 14px;
  margin-left: auto;
  opacity: 0;
}

.message:hover .message-actions,
.message:focus-within .message-actions {
  opacity: 1;
}

.message-actions .btn.link {
  padding: 0;
}

/* Forwarded messages and their target picker keep the source inside Huddle's message surface. */
.forwarded-card {
  max-width: min(620px, 100%);
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.forwarded-card-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 4px;
  color: var(--muted);
  font-size: round(nearest, calc(13px * var(--font-scale)), 1px);
}

.forwarded-card-heading strong {
  color: var(--heading);
}

.forwarded-card-place {
  color: var(--accent-ink);
  font-weight: 600;
  text-decoration: none;
}

.forwarded-card-place:hover { text-decoration: underline; }

.forwarded-card-body {
  margin-top: 8px;
  padding-left: 12px;
  border-left: 2px solid var(--accent);
}

.forwarded-card-body .text { white-space: pre-wrap; }
.forwarded-card .attachments { margin-top: 10px; }

.forward-dialog .forward-preview {
  margin: 0 0 16px;
  padding: 10px 12px;
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--surface-2);
}

.forward-preview-text { max-height: 76px; overflow: hidden; }
.forward-preview-text .text { margin: 0; }
.forward-dialog .forward-preview > p { margin: 0; }
.forward-dialog .forward-preview .muted.small { display: block; margin-top: 6px; }
.forward-dialog .field { margin-top: 14px; }

.forward-target-list {
  max-height: min(34vh, 280px);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.forward-target-group + .forward-target-group { border-top: 1px solid var(--line); }
.forward-target-group h3 {
  margin: 0;
  padding: 8px 12px 4px;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .06em;
}

.forward-target-group .list { margin: 0; }
.forward-target.row,
.forward-dialog .forward-target {
  min-height: 52px;
  padding: 7px 12px;
  border-radius: 0;
  text-align: left;
}

.forward-dialog .forward-target .grow,
.forward-dialog .forward-target .title,
.forward-dialog .forward-target .meta { display: block; }
.forward-dialog .forward-target.selected { background: var(--accent-soft); }
.forward-target-check { flex: 0 0 20px; color: var(--accent-ink); font-weight: 700; text-align: center; }
.forward-target-list .empty { margin: 0; padding: 12px; }
.forward-note textarea { min-height: 72px; }
.forward-dialog-actions { margin-top: 14px; }
.forwarded-card-time { color: var(--muted); }
.forward-toast { max-width: calc(100vw - 32px); text-align: center; }

@media (max-width: 860px) {
  .forward-dialog .input,
  .forward-dialog .textarea { font-size: 16px; }
  .forward-dialog .forward-target { min-height: 56px; }
  .forwarded-card { padding: 11px 12px; }
}

/* On touch screens each one is a 44px target, without making the line taller. */
@media (pointer: coarse) {
  .message-actions .btn.link {
    padding: 13px 6px;
    margin: -13px -6px;
  }
}

.message-more {
  display: none;
}

@media (max-width: 860px), (hover: none) {
  .message-actions {
    display: none;
  }
  .message {
    position: relative;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }
  .message:has(> .message-more),
  .conversation .message:has(> .message-more) {
    min-height: 44px;
    padding-right: 54px;
  }
  .message .btn.message-more {
    position: absolute;
    top: 0;
    right: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    margin: 0;
    border-radius: var(--radius-sm);
    color: var(--muted);
  }
  .message-head .who {
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  .message .message-edit,
  .message input,
  .message textarea,
  .message select,
  .message [contenteditable] {
    -webkit-touch-callout: default;
    -webkit-user-select: text;
    user-select: text;
  }
  .overlay.message-sheet-overlay {
    align-items: flex-end;
    padding: 44px 0 0;
  }
  .dialog.message-sheet {
    max-width: none;
    max-height: 100%;
    border-bottom: 0;
    border-radius: var(--radius) var(--radius) 0 0;
    padding: 20px 20px calc(20px + env(safe-area-inset-bottom));
    background: var(--surface);
  }
}

/* Message action sheet: six easy thumb targets, then quiet iOS-style action rows. */
.message-sheet-quick-reactions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  margin: 0 0 10px;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--line);
}

.message-sheet-quick-reactions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-control);
  background: var(--surface-2);
  font-size: 21px;
  cursor: pointer;
}

.message-sheet-quick-reactions button:hover,
.message-sheet-quick-reactions button:focus-visible {
  background: var(--accent-soft);
}

.message-sheet-actions {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.message-sheet-actions > .message-sheet-action {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 52px;
  padding: 0 6px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.message-sheet-actions > .message-sheet-action:hover,
.message-sheet-actions > .message-sheet-action:focus-visible {
  background: var(--surface-2);
}

.message-sheet-action > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 24px;
  width: 24px;
  color: var(--muted);
  font-size: 20px;
}

.message-sheet-actions > .message-sheet-action.danger,
.message-sheet-actions > .message-sheet-action.danger > span {
  color: var(--danger);
}

.message-sheet-actions > .message-sheet-action.cancel {
  margin-top: 8px;
  border-top: 1px solid var(--line);
  border-bottom: 0;
}

.message-copy-status {
  position: fixed;
  top: calc(var(--staging-bar-height) + 16px + env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  z-index: 21;
  padding: 8px 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  pointer-events: none;
}

.message-copy-field {
  position: fixed;
  top: 0;
  left: -9999px;
}

.message.deleted .text {
  font-style: italic;
}

/* Reactions under a message (lib/reactions.js): yours stand out; the picker opens from React. */
.reactions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}

.reaction {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 28px;
  padding: 2px 9px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  font-style: inherit;
  font-variant: inherit;
  font-stretch: inherit;
  font-size: round(nearest, 0.9em, 1px);
  cursor: pointer;
}

.reaction.mine {
  border-color: var(--brand);
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.reaction .count {
  display: inline-block;
  min-width: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  font-variant-numeric: tabular-nums;
}

.reaction-pick {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line-strong);
  border-radius: min(10px, var(--radius-control));
  background: var(--surface);
}

.reaction-pick button {
  min-width: 36px;
  min-height: 36px;
  border: 0;
  border-radius: min(8px, var(--radius-control));
  background: none;
  font-size: round(nearest, 1.15em, 1px);
  cursor: pointer;
}

.reaction-pick button[aria-pressed="true"],
.reaction-pick button:hover {
  background: var(--accent-soft);
}

@media (max-width: 860px), (pointer: coarse) {
  .reaction,
  .reaction-pick button {
    min-height: 44px;
    min-width: 44px;
  }
}

/* Under an office's alert about a lead: who has it, then a checkmark once it's done. */
.message .linked {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 3px 10px 3px 8px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control);
  background: var(--surface);
  font-size: round(nearest, calc(13px * var(--font-scale)), 1px);
  color: var(--muted);
  text-decoration: none;
}

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

.message .linked.done {
  border-color: transparent;
  background: var(--ok-soft);
  color: var(--ok);
  font-weight: 650;
}

.message .linked .icon {
  width: 16px;
  height: 16px;
  stroke-width: 2.6;
}

/* Message-to-task links stay quiet beneath the message and task details. */
.message-task-link {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  margin-top: 5px;
  padding: 2px 9px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--accent-ink);
  font-size: round(nearest, calc(13px * var(--font-scale)), 1px);
  font-weight: 650;
  text-decoration: none;
}

.message-task-link:hover {
  background: var(--accent-soft);
}

@media (max-width: 860px), (pointer: coarse) {
  .message-task-link,
  .item-source-link a {
    min-width: 44px;
    min-height: 44px;
  }

  .item-source-link a {
    display: inline-flex;
    align-items: center;
  }
}

.item-source-link {
  margin: 8px 0 16px;
  font-size: round(nearest, calc(13px * var(--font-scale)), 1px);
}

.message-edit .textarea {
  min-height: 64px;
  margin-top: 6px;
  font-size: max(16px, round(nearest, calc(14px * var(--font-scale)), 1px));
}

.message-edit .actions {
  margin-top: 8px;
}

/* A private channel's lock, after its name. */
.private {
  display: inline-flex;
  margin-left: 6px;
  vertical-align: -2px;
  color: var(--muted);
}

.private .icon {
  width: 15px;
  height: 15px;
}

.new-divider {
  margin: 8px 0;
  border-top: 1px solid var(--warn);
  color: var(--warn-ink);
  font-size: round(nearest, calc(12px * var(--font-scale)), 1px);
  font-weight: 600;
  text-align: right;
}

/* The composer: one box, as in Slack: what you attach, what you type, then its tools and Send. */
.composer-area {
  position: sticky;
  bottom: 0;
  padding: 12px 0 4px;
  background: var(--bg);
}

@media (max-width: 860px) {
  .composer-area {
    bottom: var(--phone-island-height);
  }
}

.composer-starter { margin: 0 0 6px; font-size: 13px; }

.composer {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}

/* The box shows where you're typing, so the box itself carries the focus ring. */
.composer:focus-within {
  border-color: var(--accent-ink);
  box-shadow: 0 0 0 1px var(--accent-ink);
}

.composer .textarea {
  display: block;
  min-height: 0;
  max-height: 200px;
  padding: 12px 16px 6px;
  border: 0;
  border-radius: var(--radius) var(--radius) 0 0;
  background: transparent;
  overflow-y: auto;
  resize: none;
  /* At least 16px, so iPhones don't zoom in on it. */
  font-size: max(16px, round(nearest, calc(15px * var(--font-scale)), 1px));
}

.composer .textarea:focus-visible {
  outline: none;
}

.composer .textarea::placeholder {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.composer-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 2px 8px 8px;
}

.composer-tool {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 6px 10px;
  border: 0;
  border-radius: var(--radius-control);
  background: none;
  color: var(--muted);
  font-size: round(nearest, calc(14px * var(--font-scale)), 1px);
  font-weight: 600;
  cursor: pointer;
  transition: background-color 150ms ease-out, color 150ms ease-out;
}

.composer-tool:hover {
  background: var(--surface-2);
  color: var(--text);
}

.composer-tool .icon {
  width: 18px;
  height: 18px;
}

.composer-tool.push,
.composer-bar > .push {
  margin-left: auto;
}

/* Computers keep the checkbox and full names; phones use labelled chips. */
.composer-tool.people-only .icon,
.composer-tool .later-short {
  display: none;
}

.composer-area .note .btn.link {
  padding: 0;
}

.composer-bar .btn.primary {
  margin-left: 4px;
  padding: 7px 20px;
}

@media (max-width: 860px) {
  .composer-tool.people-only .icon,
  .composer-tool .later-short {
    display: inline-block;
  }
  .composer-tool .later-long {
    display: none;
  }
  .composer-tool.people-only,
  .composer-tool.composer-later {
    flex: none;
    gap: 4px;
    min-height: 44px;
    margin-left: 0;
    padding: 6px;
    border: 1px solid var(--line-strong);
    background: var(--surface-2);
    color: var(--text);
    white-space: nowrap;
  }
  .composer-tool.people-only {
    gap: 3px;
    padding-inline: 4px;
    font-size: round(nearest, calc(12px * var(--font-scale)), 1px);
  }
  .composer-tool.people-only.is-on {
    border-color: var(--accent-ink);
    background: var(--accent-soft);
    color: var(--accent-ink);
  }
  .composer-tool.people-only:focus-within {
    outline: 2px solid var(--accent-ink);
    outline-offset: 2px;
  }
  /* Keep the native switch focusable, with the same hiding as .sr-only. */
  .people-only input,
  .composer-attach span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .composer-tool.composer-attach {
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
  }
  /* A slimmer Send leaves room for Attach and both chips on one row at 375px. */
  .composer-bar .btn.composer-send {
    flex: none;
    margin-left: auto;
    padding-inline: 16px;
  }
}

@media (pointer: coarse) {
  .composer-tool,
  .composer-bar .btn {
    min-height: 44px;
  }
}

.suggest {
  margin: 0 0 6px;
  max-height: 180px;
  overflow: auto;
}

.suggest button {
  display: block;
  width: 100%;
  padding: 9px 14px;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}

.suggest button[aria-selected="true"],
.suggest button:hover {
  background: var(--accent-soft);
}

/* ---- Item page ---- */

/* Number, kind and office, under the title. */
.item-meta {
  margin: 6px 0 0;
}

/* Leads' and cases' rows on a phone: the deadline or state goes under the facts. */
@media (max-width: 600px) {
  .work-row {
    flex-wrap: wrap;
    row-gap: 6px;
  }
  .work-row > .grow {
    flex-basis: calc(100% - 22px);
  }
  .work-row > .badge {
    margin-left: 22px;
  }
}

/* The facts beside the thread; under it on narrower screens, as label and value side by side. */
@media (max-width: 1000px) {
  .facts.item-facts {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    align-items: center;
    gap: 12px 20px;
    margin: 0;
  }
  .facts.item-facts dd {
    margin: 0;
  }
}

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

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

.details {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.facts dt {
  font-size: round(nearest, calc(12px * var(--font-scale)), 1px);
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.facts dd {
  margin: 3px 0 14px;
}

.facts dd .select {
  padding: 7px 10px;
}

.activity {
  font-size: round(nearest, calc(13px * var(--font-scale)), 1px);
  color: var(--muted);
}

.activity li {
  padding: 5px 0;
}

/* ---- Dialogs and tables ---- */

.overlay {
  position: fixed;
  inset: var(--staging-bar-height) 0 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 8vh 16px 16px;
  background: var(--scrim);
  overscroll-behavior: contain;
  z-index: 20;
}

.dialog {
  width: 100%;
  max-width: 540px;
  max-height: 84vh;
  max-height: 84dvh;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 24px;
}

/* Focus starts on the dialog itself when nothing inside asks for it; that needs no ring. */
.dialog:focus-visible {
  outline: none;
}

/* Phones: the dialog may use the whole screen, so its buttons are in view more often. */
@media (max-width: 860px) {
  .overlay {
    padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
  }
  .dialog {
    max-height: 100%;
    padding: 20px;
  }
}

.dialog h2 {
  margin-top: 0;
  font-family: var(--serif);
  font-size: round(nearest, calc(24px * var(--font-scale)), 1px);
  font-weight: 600;
  font-style: normal;
  font-variant: normal;
  font-stretch: normal;
  --lh: 1.2;
}

.section {
  margin-top: 18px;
}

.nudge h2 {
  margin-top: 0;
}

.nudge .btn.link {
  margin-left: 12px;
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: round(nearest, calc(14px * var(--font-scale)), 1px);
  font-variant-numeric: tabular-nums;
}

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

.table tr:last-child td {
  border-bottom: 0;
}

.table th {
  font-size: round(nearest, calc(12px * var(--font-scale)), 1px);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.table tr.off td {
  color: var(--muted);
}

/* A table running to a card's edges lines up with the card's own 22px padding. */
.card:not(.pad) > .scroll-x > .table :is(th, td):first-child,
.card.scroll-x:not(.pad) > .table :is(th, td):first-child {
  padding-left: 22px;
}

.card:not(.pad) > .scroll-x > .table :is(th, td):last-child,
.card.scroll-x:not(.pad) > .table :is(th, td):last-child {
  padding-right: 22px;
}

@media (max-width: 860px) {
  .table th,
  .table td {
    padding-inline: 8px;
  }
}

/* Number columns: the heading lines up with its numbers. */
.table td.right,
.table th.right {
  text-align: right;
}

.scroll-x {
  overflow-x: auto;
}

.nowrap {
  white-space: nowrap;
}

.icon {
  flex: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---- Leads ---- */

/* Edit stays beside the name on a phone, so the Call button comes right after it. */
.lead-head {
  flex-wrap: nowrap;
  align-items: flex-start;
}

.lead-head > .btn {
  flex: none;
}

.lead-summary {
  margin: 6px 0 0;
  font-size: round(nearest, calc(16px * var(--font-scale)), 1px);
  color: var(--muted);
}

.lead-call .call {
  font-size: round(nearest, calc(17px * var(--font-scale)), 1px);
  padding: 12px 22px;
}

.lead-call .call .icon {
  width: 20px;
  height: 20px;
}

.lead-call .deadline {
  margin: 12px 0 0;
  font-weight: 650;
  color: var(--heading);
}

.lead-call .deadline.late {
  color: var(--danger);
}

.lead-call .deadline.done {
  color: var(--ok);
}

.lead-call h2 {
  margin-top: 18px;
}

.outcomes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

/* Tapped mid-call on a phone: full-size targets. */
@media (pointer: coarse) {
  .lead-call .btn {
    min-height: 44px;
  }
}

/* ---- Settings ---- */

h2.flush {
  margin-top: 0;
}

.input.narrow-input {
  width: 12em;
}

.select.narrow-input {
  width: auto;
  min-width: 12em;
  max-width: 100%;
}

.input.time {
  width: 8.5em;
  padding: 6px 8px;
}

.hours legend {
  font-family: var(--serif);
  font-size: round(nearest, calc(18px * var(--font-scale)), 1px);
  font-weight: 600;
  font-style: normal;
  font-variant: normal;
  font-stretch: normal;
  --lh: 1.3;
  color: var(--heading);
}

.check.inline {
  margin: 0;
}

/* ---- Appearance (You) ---- */

.appearance .setting {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.appearance .setting:first-child {
  padding-top: 0;
}

.appearance .setting > label {
  flex: 1;
  min-width: 7em;
  font-weight: 600;
  color: var(--heading);
}

.appearance .hint {
  display: block;
  font-size: round(nearest, calc(13px * var(--font-scale)), 1px);
  font-weight: 400;
  color: var(--muted);
}

.appearance .hint.adjusted {
  color: var(--warn-ink);
}

.appearance input[type="color"] {
  width: 52px;
  height: 36px;
  padding: 3px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
}

/* The swatch stays at the right edge; Default appears beside it. */
.appearance .pick,
.appearance .select.narrow {
  margin-left: auto;
}

.appearance .pick {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.appearance .select.narrow {
  min-width: 11em;
}

/* Touch-sized on phones: the swatch and its Reset. */
@media (max-width: 860px) {
  .appearance input[type="color"] {
    height: 44px;
  }
  .appearance .pick .btn.link {
    min-height: 44px;
    padding: 0 6px;
  }
}

/* The You page's cards: no gap above their first line or below their last. */
.you-card > :first-child {
  margin-top: 0;
}

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

/* How you sign in, under the head's name, role and offices. */
.you-account {
  margin: -6px 0 0;
}

/* Places the phone's tab bar doesn't reach: an icon, the name and what it's for, a chevron. */
.places .icon {
  width: 22px;
  height: 22px;
  color: var(--accent-ink);
}

.places .icon:last-child {
  width: 18px;
  height: 18px;
  color: var(--muted);
}

.more-page h2 {
  margin: 24px 2px 6px;
  color: var(--muted);
  font-family: var(--sans);
  font-size: round(nearest, calc(12px * var(--font-scale)), 1px);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.more-page .row {
  gap: 14px;
  min-height: 65px;
  padding: 11px 2px;
}

.more-page .places .icon:first-child {
  box-sizing: content-box;
  flex: none;
  padding: 10px;
  border-radius: min(14px, var(--radius));
  background: var(--surface-2);
}

.more-page .row .title,
.more-page .row .meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.more-page .row .title {
  color: var(--text);
}

.place-avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-avatar);
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-weight: 700;
}

.sign-out {
  margin-top: 28px;
}

/* ---- Front-desk computers ---- */

.station-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: -12px 0 18px;
  padding: 8px 8px 8px 16px;
  border: 1px solid var(--note-line);
  border-radius: var(--radius-control);
  background: var(--accent-soft);
  color: var(--text);
  font-size: round(nearest, calc(14px * var(--font-scale)), 1px);
}

.lock .card {
  max-width: 560px;
}

.people-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  margin: 14px 0 6px;
}

.person {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
  font-weight: 600;
  text-align: left;
  color: var(--heading);
}

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

.avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-avatar);
  background: var(--brand);
  color: #ffffff;
  font-size: round(nearest, calc(13px * var(--font-scale)), 1px);
  font-weight: 700;
}

.lock-foot {
  margin: 18px 0 0;
}

.btn.link.small {
  font-size: round(nearest, calc(13px * var(--font-scale)), 1px);
}

/* ---- Screen cover (js/cover.js): everyone else's screens, when nobody is using them ---- */

/* Opaque, and the page under it is hidden as well, so nothing shows through or around it. */
.screen-cover {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px 16px calc(24px + env(safe-area-inset-bottom));
  background: var(--bg);
  color: var(--text);
  text-align: center;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

/* Focus sits on the cover itself, the whole screen: no ring around the window's edge. */
.screen-cover:focus {
  outline: none;
}

.screen-cover .brand {
  padding: 0;
  font-size: round(nearest, calc(34px * var(--font-scale)), 1px);
}

.screen-cover .brand .logo-mark {
  width: 56px;
  height: 56px;
}

.screen-cover p {
  max-width: 30ch;
  margin: 0;
  color: var(--muted);
}

.shell[inert] {
  visibility: hidden;
}

/* ---- Offices ---- */

.office-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr));
  gap: 22px;
  align-items: start;
}

/* A manager's one office uses the width. */
.office-grid.single {
  grid-template-columns: minmax(0, 1fr);
}

/* An office: what's late, then its numbers, Billing and Floor, each a quiet table. */
.card.office {
  container-type: inline-size;
}

.office .problems .row .icon {
  width: 18px;
  height: 18px;
  color: var(--muted);
}

.office .problems li.row .title {
  color: var(--heading);
}

/* A note right under a page's summary (Floor settings, Floor channel, Office tools). */
.head-note {
  margin: -8px 0 16px;
}

/* A late thing (and Office health on Offices): what it is, then its word and since when,
   on the right; under it when the line is narrow. Rows without a chevron keep its space. */
.late-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
}

.late-line > .title,
.late-line > .health-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: visible;
  white-space: normal;
}

.late-words {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 8px;
}

.chev-space {
  flex: none;
  width: 18px;
}

.office-part {
  padding: 2px 22px 16px;
  border-top: 1px solid var(--line);
}

.office-part > p {
  margin: 0 0 10px;
}

.office-part > .office-stats + p {
  margin-top: 14px;
}

.part-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 10px;
  margin: 12px 0 8px;
}

.part-head h3 {
  margin: 0;
  font-size: round(nearest, calc(15px * var(--font-scale)), 1px);
  font-weight: 650;
  color: var(--heading);
}

.part-head .head-links {
  margin-left: auto;
}

@media (max-width: 860px) {
  .part-head .head-links .btn {
    min-height: 44px;
  }
}

.head-links {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0 16px;
}

/* Label, number, what's behind it: one row each, the numbers in a column. */
.office-stats {
  display: grid;
  grid-template-columns: minmax(0, 12.5em) minmax(4.5em, auto) minmax(0, 1fr);
  align-items: baseline;
  gap: 7px 16px;
  margin: 12px 0 2px;
  font-size: round(nearest, calc(14px * var(--font-scale)), 1px);
}

.office-stats > div {
  display: contents;
}

.office-stats dt {
  grid-column: 1;
  color: var(--text);
}

.office-stats dd {
  margin: 0;
}

.office-stats .value {
  grid-column: 2;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
  color: var(--heading);
}

.office-stats .sub {
  grid-column: 3;
  font-size: round(nearest, calc(13px * var(--font-scale)), 1px);
  color: var(--muted);
}

.office-stats .sub.attn {
  font-weight: 650;
  color: var(--warn-ink);
}

/* A narrow office (a phone, or 200% text): what's behind each number goes under its label. */
@container (max-width: 420px) {
  .office-stats {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 2px;
  }
  .office-stats > div + div > dt,
  .office-stats > div + div > .value {
    margin-top: 8px;
  }
  .office-stats .sub {
    grid-column: 1 / -1;
  }
}

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

.setup-standing {
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

.badge.danger {
  background: var(--danger-soft);
  color: var(--danger);
}

/* A note under a table heading: what the column counts, or how fresh it is. */
.table .th-note {
  display: block;
  margin-top: 2px;
  font-size: round(nearest, calc(12px * var(--font-scale)), 1px);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}

.table .th-note.stale {
  font-weight: 600;
  color: var(--warn-ink);
}

/* Team speed, under the offices. */
.card.team {
  margin-top: 22px;
}

.card .pad-x {
  padding-left: 22px;
  padding-right: 22px;
}

/* KPIs' and Team speed's period, and Team speed's office, beside the heading; on a phone
   under it, the period across the card. */
.card.team .card-head,
.card.kpis .card-head {
  padding-bottom: 10px;
}

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

@media (max-width: 860px) {
  .head-tools,
  .head-tools > .segmented,
  .card.kpis .card-head > .segmented {
    width: 100%;
  }
}

.card.team > p.small {
  margin: 12px 0 18px;
}

.card.team .table :is(th, td):first-child,
.card.kpis .table :is(th, td):first-child {
  padding-left: 22px;
}

.card.team .table :is(th, td):last-child,
.card.kpis .table :is(th, td):last-child {
  padding-right: 22px;
}

.late-now {
  color: var(--danger);
  font-weight: 650;
}

@media (max-width: 860px) {
  .card.team .table :is(th, td),
  .card.kpis .table :is(th, td) {
    padding: 10px 8px;
  }
  .card.team .table :is(th, td):first-child,
  .card.kpis .table :is(th, td):first-child {
    padding-left: 16px;
  }
  .card.team .table :is(th, td):last-child,
  .card.kpis .table :is(th, td):last-child {
    padding-right: 16px;
  }
}

.card.health {
  margin-bottom: 16px;
}

.floor-settings .minutes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr));
  align-items: end;
  gap: 0 18px;
}

.floor-settings .minutes-grid .field {
  margin-bottom: 12px;
}

.floor-settings .minutes-grid .input {
  width: 100%;
  max-width: 12em;
}

.floor-settings .checks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}

.floor-settings h2:not(.flush) {
  margin-top: 28px;
}

.floor-settings .copy-from {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-bottom: 22px;
}

.floor-settings .copy-from > span {
  margin: 0;
}

.floor-settings .actions {
  align-items: center;
  gap: 14px;
}

.floor-settings .field > .with-unit {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-weight: 400;
}

.floor-channel .row {
  align-items: flex-start;
}

.floor-channel time {
  min-width: 64px;
  padding-top: 2px;
}

.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: round(nearest, calc(13px * var(--font-scale)), 1px);
  overflow-wrap: anywhere;
}

/* ---- Search ---- */

/* Computers search from the sidebar; phones put Search in each page's header. */
.search-fab,
.search-in-header {
  display: none;
}

.conversation-filter {
  position: relative;
  margin-bottom: 12px;
}

.conversation-filter .icon {
  position: absolute;
  top: 50%;
  left: 14px;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}

.conversation-filter .input {
  padding-left: 40px;
  font-size: max(16px, round(nearest, calc(16px * var(--font-scale)), 1px));
}

/* Personal sections keep the existing conversation rows, with a separate action button. */
.folders-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: round(nearest, calc(12px * var(--font-scale)), 1px);
}

.folders-toolbar .btn {
  flex: none;
  min-height: 44px;
  font-size: round(nearest, calc(14px * var(--font-scale)), 1px);
}

.folders-toolbar .icon {
  width: 20px;
  height: 20px;
}

.conversation-row {
  display: flex;
  align-items: center;
}

.conversation-row > .row {
  flex: 1;
  min-width: 0;
  align-self: stretch;
}

/* Messages gets a two-line, glanceable conversation row; the desktop sidebar keeps its own rows. */
.conversation-row-link {
  min-height: 68px;
  gap: 10px;
  padding: 10px 16px;
}

.messages-list .person-avatar,
.channel-avatar,
.group-avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-avatar);
}

.messages-list .person-avatar {
  background: var(--person-colour);
  color: #ffffff;
  font-family: var(--sans);
  font-size: round(nearest, calc(14px * var(--font-scale)), 1px);
  font-weight: 700;
  --lh: 1;
}

.channel-avatar,
.group-avatar {
  background: var(--surface-2);
  color: var(--accent-ink);
}

.channel-avatar {
  border-radius: 12px;
  font-size: 20px;
  font-weight: 650;
}

.group-avatar .icon {
  width: 21px;
  height: 21px;
}

.conversation-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-width: 0;
}

.conversation-title-line,
.conversation-preview-line,
.conversation-title {
  display: flex;
  align-items: center;
  min-width: 0;
}

.conversation-title-line,
.conversation-preview-line {
  justify-content: space-between;
  gap: 8px;
}

.conversation-title {
  overflow: hidden;
  color: var(--heading);
  font-size: round(nearest, calc(15px * var(--font-scale)), 1px);
  font-weight: 600;
  white-space: nowrap;
}

.conversation-title-text {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.messages-list .conversation-row-link .conversation-title-text {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conversation-title .private {
  flex: none;
  margin-left: 4px;
}

.conversation-time {
  flex: none;
  color: var(--muted);
  font-size: round(nearest, calc(12px * var(--font-scale)), 1px);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.conversation-preview {
  display: flex;
  flex: 1;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: round(nearest, calc(13px * var(--font-scale)), 1px);
  white-space: nowrap;
}

.conversation-preview .icon {
  flex: none;
  width: 16px;
  height: 16px;
  margin-right: 5px;
}

.conversation-preview-text {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conversation-preview-line .count {
  flex: none;
}

.conversation-row-link.unread .conversation-title-text,
.conversation-row-link.unread .conversation-preview-text {
  color: var(--text);
  font-weight: 700;
}

.mobile-folders-button {
  display: none;
}

@media (max-width: 860px) {
  /* Keep the phone's Folders action beside search instead of adding a row above Messages. */
  .conversation-filter {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .conversation-filter .input {
    flex: 1;
    width: 0;
    min-width: 0;
  }

  .conversation-filter .mobile-folders-button {
    display: flex;
    flex: none;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    font-size: round(nearest, calc(13px * var(--font-scale)), 1px);
  }

  .conversation-filter .mobile-folders-button .icon {
    position: static;
    width: 18px;
    height: 18px;
    transform: none;
    color: currentColor;
  }

  .folders-toolbar {
    display: none;
  }

  .conversation-row-link {
    gap: 8px;
    padding: 10px 12px;
  }

  .folders-help,
  .desktop-folders-button {
    display: none;
  }
}

.conversation-actions {
  position: relative;
  flex: none;
  margin-right: 6px;
}

.conversation-more {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-round);
  background: none;
  color: var(--muted);
  cursor: pointer;
}

.conversation-more:hover,
.conversation-more[aria-expanded="true"] {
  color: var(--text);
  background: var(--surface-2);
}

.conversation-more .icon {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.conversation-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 5;
  width: max-content;
  min-width: 240px;
  max-width: calc(100vw - 40px);
  padding: 6px;
  border-color: var(--line-strong);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
}

.conversation-menu.above {
  top: auto;
  bottom: calc(100% + 4px);
}

.conversation-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text);
  font-size: round(nearest, calc(14px * var(--font-scale)), 1px);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  overflow-wrap: anywhere;
}

.conversation-menu button:hover {
  background: var(--surface-2);
}

.conversation-menu .icon {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--muted);
}

.message-folder + .message-folder,
.other-conversations {
  border-top: 1px solid var(--line);
}

.folder-title {
  margin: 0;
  background: var(--surface-2);
  color: var(--heading);
  font-family: var(--sans);
  font-size: round(nearest, calc(14px * var(--font-scale)), 1px);
  font-weight: 600;
  font-style: normal;
  font-variant: normal;
  font-stretch: normal;
  --lh: 1.35;
}

.message-folder:first-child > .folder-title,
.message-folder:first-child .folder-heading {
  border-radius: var(--radius) var(--radius) 0 0;
}

.folder-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.folder-heading .grow {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.folder-chevron {
  display: flex;
  flex: none;
  color: var(--muted);
}

.folder-chevron .icon {
  width: 18px;
  height: 18px;
}

.folder-chevron.expanded {
  transform: rotate(90deg);
}

.folder-conversations {
  position: relative;
  border-top: 1px solid var(--line);
}

.folder-conversations::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 20px;
  width: 2px;
  border-radius: 1px;
  background: var(--line-strong);
  pointer-events: none;
}

.folder-conversations .conversation-row > .row {
  padding-left: 40px;
}

.folder-conversations .folder-empty {
  padding: 16px 18px 16px 40px;
  text-align: left;
}

.other-heading {
  min-height: 48px;
  padding: 14px 18px;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}

.folder-sections.dragging .folder-heading,
.folder-sections.dragging .other-heading {
  outline: 1px dashed var(--accent-ink);
  outline-offset: -3px;
}

.folder-sections .folder-heading.drop-target,
.folder-sections .other-heading.drop-target {
  background: var(--accent-soft);
  outline: 2px dashed var(--accent-ink);
  outline-offset: -3px;
}

.folder-dialog h2 {
  margin-bottom: 6px;
}

.folder-dialog .folder-help {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: round(nearest, calc(14px * var(--font-scale)), 1px);
  --lh: 1.5;
}

.folder-choices {
  overflow: hidden;
}

.folder-choice.row {
  min-height: 52px;
  padding: 12px 18px;
  font-weight: 600;
}

.folder-choice > .icon {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--muted);
}

.folder-choice .grow {
  overflow-wrap: anywhere;
}

.folder-choice.selected {
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.folder-choice.selected > .icon:last-child {
  color: var(--accent-ink);
}

.folder-dialog .btn {
  min-height: 44px;
}

.folder-heading[aria-disabled="true"],
.folder-choice[aria-disabled="true"],
.folder-dialog .btn[aria-disabled="true"],
.folder-edit .input[aria-disabled="true"],
.folder-new .input[aria-disabled="true"] {
  opacity: 0.55;
  cursor: default;
}

.folder-dialog .actions {
  margin-top: 14px;
}

.folder-edit-list ~ .actions {
  margin-top: 8px;
}

.folder-edit-list {
  display: grid;
  gap: 10px;
  margin-bottom: 16px;
}

.folder-edit {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: min(12px, var(--radius));
  background: var(--surface-2);
}

.folder-edit-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.folder-edit-actions .btn {
  flex: 1;
  min-width: 0;
  padding-inline: 8px;
}

.folder-new-label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  font-size: round(nearest, calc(14px * var(--font-scale)), 1px);
}

.folder-new {
  display: flex;
  align-items: center;
  gap: 8px;
}

.folder-new .input {
  flex: 1;
  min-width: 0;
}

.folder-new .btn {
  flex: none;
}

.side-search {
  position: relative;
  margin: 0 0 14px;
}

.side-search .icon {
  position: absolute;
  top: 50%;
  left: 13px;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  color: var(--side-muted);
  pointer-events: none;
}

.side-search input {
  width: 100%;
  padding: 10px 14px 10px 39px;
  border: 1px solid var(--side-line);
  border-radius: var(--radius-control);
  background: var(--side-hover);
  color: var(--side-text);
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  font-style: inherit;
  font-variant: inherit;
  font-stretch: inherit;
  font-size: round(nearest, calc(15px * var(--font-scale)), 1px);
}

.side-search input::placeholder {
  color: var(--side-muted);
}

.side-search input:focus {
  border-color: var(--side-text);
  outline: none;
}

/* The Search page's field fills its bar, up to a comfortable width; 16px or more, so phones
   don't zoom in on it. */
.search-form {
  flex: 1 1 20rem;
  max-width: 640px;
}

.search-form .bar-search {
  display: block;
}

.search-form .bar-search .input {
  width: 100%;
  padding-block: 12px;
  font-size: max(16px, round(nearest, calc(16px * var(--font-scale)), 1px));
}

.search-messages .found {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow-wrap: anywhere;
}

mark {
  border-radius: min(3px, var(--radius-control));
  background: var(--warn-soft);
  color: inherit;
}

/* A thread: beside the conversation on wide screens, in its place on narrow ones. */
.thread-pane {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.thread-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  padding: 4px 0 8px;
  border-bottom: 1px solid var(--line);
}

/* Back to the channel, where the thread takes its place. */
.thread-back {
  display: inline-flex;
  flex-basis: 100%;
  align-items: center;
  gap: 2px;
  min-height: 44px;
  margin: -8px 0 0 -6px;
  font-weight: 600;
  text-decoration: none;
}

.thread-back .icon {
  width: 18px;
  height: 18px;
  transform: rotate(180deg);
}

.thread-head h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: round(nearest, calc(22px * var(--font-scale)), 1px);
  font-weight: 600;
  font-style: normal;
  font-variant: normal;
  font-stretch: normal;
  --lh: 1.2;
}

.thread-head .grow {
  flex: 1;
}

.thread-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0;
  font-size: round(nearest, calc(12px * var(--font-scale)), 1px);
  font-weight: 650;
  color: var(--muted);
}

.thread-divider::after {
  content: '';
  flex: 1;
  border-top: 1px solid var(--line);
}

.message .replies {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  margin-top: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-size: round(nearest, calc(13px * var(--font-scale)), 1px);
  text-decoration: none;
}

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

.message .replies .count-text {
  color: var(--accent-ink);
  font-weight: 700;
}

.wide-only {
  display: none;
}

@media (min-width: 1180px) {
  .conversation.has-thread {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
    gap: 24px;
    align-items: start;
  }

  .conversation.has-thread .channel-pane {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 150px);
  }

  .thread-pane {
    position: sticky;
    top: calc(var(--staging-bar-height) + 16px);
    max-height: calc(100vh - var(--staging-bar-height) - 32px);
    overflow-y: auto;
    padding: 12px 16px 0;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
  }

  .thread-pane .composer-area {
    background: var(--surface);
  }

  .thread-pane .thread-divider {
    margin-inline: 16px;
  }

  .thread-pane .composer-bar {
    flex-wrap: nowrap;
    gap: 2px;
    padding-inline: 4px;
  }

  .thread-pane .composer-tool {
    gap: 4px;
    padding-inline: 6px;
    font-size: round(nearest, calc(12px * var(--font-scale)), 1px);
  }

  .thread-pane .composer-tool.people-only .tool-label {
    font-size: round(nearest, calc(12px * var(--font-scale)), 1px);
  }

  .thread-pane .composer-bar .btn.primary {
    padding-inline: 12px;
  }

  /* A thread's fixed dialogs must cover the sidebar above its sticky pane. */
  .thread-pane:has(.overlay) {
    z-index: 6;
  }

  .wide-only {
    display: inline;
  }

  .thread-head .btn.wide-only {
    display: inline-flex;
  }

  .narrow-only {
    display: none;
  }
}

@media (max-width: 1179px) {
  .conversation.has-thread .channel-pane {
    display: none;
  }
}

/* Time clock (js/views/timeclock.js) */
.clock-card {
  display: grid;
  gap: 14px;
  justify-items: start;
  margin-bottom: 18px;
}
.clock-state {
  display: flex;
  gap: 14px;
  align-items: center;
}
.clock-state h2 {
  margin: 0;
}
.clock-state p {
  margin: 2px 0 0;
}
.clock-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%; /* true circle */
  background: var(--line-strong);
}
.clock-dot.on {
  background: var(--ok);
  box-shadow: 0 0 0 6px var(--ok-soft);
}
.clock-card .note {
  margin: 0;
}
.btn.clock-button {
  min-width: 12em;
  padding: 14px 28px;
  font-size: round(nearest, calc(18px * var(--font-scale)), 1px);
}
/* Figures with their names in a row: your hours, a payroll's totals, a week's bonus. */
.tally {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5em, 1fr));
  gap: 14px 24px;
  margin: 0;
}
.tally dt {
  font-size: round(nearest, calc(13px * var(--font-scale)), 1px);
  color: var(--muted);
}
.tally dd {
  margin: 2px 0 0;
  font-size: round(nearest, calc(20px * var(--font-scale)), 1px);
  font-weight: 650;
  --lh: 1.25;
  font-variant-numeric: tabular-nums;
  color: var(--heading);
}
.tally-sub {
  display: block;
  font-size: round(nearest, calc(13px * var(--font-scale)), 1px);
  font-weight: 400;
  color: var(--muted);
}
/* Your three figures stay side by side on a phone and close together on a computer. */
.clock-card .tally {
  justify-self: stretch;
  grid-template-columns: repeat(auto-fit, minmax(5.5em, 12em));
  column-gap: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
@media (max-width: 600px) {
  .clock-card .tally {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* A phone's three Home choices share one row. Keep the target tall while allowing the labels to
   wrap inside their own choice, and keep every text-entry field at iOS's no-zoom size. */
@media (max-width: 860px) {
  .page-bar > .segmented.home-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .home-tabs button {
    min-width: 0;
    gap: 3px;
    padding-inline: 3px;
    font-size: round(nearest, calc(12px * var(--font-scale)), 1px);
    white-space: normal;
  }

  .home-tabs .pill-count {
    min-width: 18px;
    height: 18px;
    padding-inline: 3px;
    font-size: round(nearest, calc(11px * var(--font-scale)), 1px);
  }

  .search-in-header {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
  }

  .search-in-header .icon {
    width: 20px;
    height: 20px;
  }

  input:not([type="hidden"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]),
  textarea,
  select {
    font-size: max(16px, round(nearest, calc(16px * var(--font-scale)), 1px)) !important;
  }
}
.timesheet caption {
  padding: 14px 16px 0;
  text-align: left;
  font-size: round(nearest, calc(13px * var(--font-scale)), 1px);
  color: var(--muted);
}
.timesheet tr.total td {
  font-weight: 650;
}
.shift-line {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: baseline;
}
.warn-text {
  color: var(--warn-ink);
}
.pin {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: 0.15em;
  user-select: all;
}
.split {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 2fr;
  gap: 18px;
  align-items: start;
}
@media (max-width: 860px) {
  .split {
    grid-template-columns: 1fr;
  }
}
/* minmax(0, …) for grid items: a wide timesheet scrolls inside its card, not the page. */
.split > * {
  min-width: 0;
}
.row-button.selected {
  background: var(--accent-soft);
}
.inline-form {
  margin: 4px 0 14px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
/* A person: clocking them in or out first, the kiosk PIN as quieter links beside. */
.person-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin: 8px 0 14px;
}
.person-actions > .btn {
  white-space: nowrap;
}
.pin-links {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px 16px;
}
.btn.link.danger {
  color: var(--danger);
}
.shift-side .field {
  margin-bottom: 4px;
}
.shift-side {
  margin-bottom: 14px;
}
/* Payroll: the week's production and its button on one line while there's room. */
.bonus-ask {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0 12px;
}
.bonus-ask .btn {
  margin-bottom: 16px;
}
.bonus-result {
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.bonus-result p {
  margin: 14px 0 0;
}
/* A request as a row that says whose move it is: who (or what) in bold, what was asked for,
   then where it stands (Your move, Waiting, Done) and how soon it starts. */
.request-row .row-words {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin-top: 6px;
}
/* Team time clock's "Show people who left", beside Find someone in the bar. */
.check.bar-check {
  align-items: center;
  margin: 0;
}
.check.bar-check input {
  margin: 0;
}
/* A request's decisions sit in its row, centred with the text, wrapping as a group. */
.actions.decide {
  flex-wrap: wrap;
  margin-top: 0;
}
/* Phones: the clock button spans the card; every control is at least 44px tall
   (row-action: a button in a list row, here and in Forms › Access). */
@media (max-width: 600px) {
  .btn.clock-button {
    justify-self: stretch;
    min-height: 56px;
  }
}
@media (max-width: 860px) {
  .request-row {
    flex-wrap: wrap;
  }
  .request-row .actions.decide {
    width: 100%;
  }
  .actions.decide .btn,
  .btn.row-action {
    min-height: 44px;
    padding: 8px 16px;
    font-size: round(nearest, calc(14px * var(--font-scale)), 1px);
  }
  .person-actions .btn,
  .person-head .btn.link,
  .shift-line .btn.link,
  .shift-side .btn.link {
    min-height: 44px;
  }
}
/* A section heading with its controls: the controls move under it when there's no room. */
.card-head.wrap {
  flex-wrap: wrap;
  align-items: center;
}
/* A row of several actions: they wrap as a whole, each keeping its label on one line. */
.actions.button-row {
  flex-wrap: wrap;
}
.actions.button-row .btn {
  white-space: nowrap;
}
/* Offices › KPIs (js/views/kpis.js); its column notes are .th-note, with Team speed's. */
.card.kpis {
  margin-top: 22px;
}

/* Answers as typed, line breaks kept (js/views/forms.js) */
.pre-wrap {
  white-space: pre-wrap;
}
/* A form to fill in: Your move while today's isn't sent, Done once it is. */
.form-row .row-words {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin-top: 6px;
}
/* A form's "All forms" link: a full-size target on phones. */
@media (max-width: 860px) {
  .form-head .btn.link {
    min-height: 44px;
  }
}

/* A heading row directly inside a padded card: the card already pads it. */
.card.pad > .card-head {
  padding: 0 0 8px;
}

/* Attachments and send later (js/views/messages.js) */
.attachments {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px;
  margin-top: 6px;
}
.att-image {
  padding: 0;
  border: 1px solid var(--line);
  border-radius: min(10px, var(--radius-control));
  overflow: hidden;
  background: var(--surface-2);
  cursor: zoom-in;
}
.att-image img {
  display: block;
  max-width: min(260px, 70vw);
  max-height: 200px;
  object-fit: cover;
}

/* Message media viewer: a dark, edge-to-edge surface with persistent file controls. */
.overlay:has(.media-viewer-dialog) {
  align-items: stretch;
  padding: 0;
  background: rgba(0, 0, 0, .94);
}

.dialog.media-viewer-dialog {
  display: flex;
  width: 100%;
  max-width: none;
  height: calc(100vh - var(--staging-bar-height));
  height: calc(100dvh - var(--staging-bar-height));
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #08090c;
  color: #f7f7f9;
  box-shadow: none;
  color-scheme: dark;
}

.media-viewer-dialog > h2 {
  display: none;
}

.media-viewer {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.media-viewer-bar {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 12px;
  min-height: calc(60px + env(safe-area-inset-top));
  padding: calc(8px + env(safe-area-inset-top)) 12px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.media-viewer-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: #f7f7f9;
  font-size: 15px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.media-viewer-download,
.media-viewer-close {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--radius-control);
  color: #fff;
  text-decoration: none;
}

.media-viewer-download {
  padding: 0 14px;
  font-size: 14px;
  font-weight: 600;
}

.media-viewer-close {
  width: 44px;
  border-radius: var(--radius-round);
  padding: 0;
  background: rgba(255, 255, 255, .1);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.media-viewer-download:hover,
.media-viewer-close:hover {
  background: rgba(255, 255, 255, .2);
}

.media-viewer-surface {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: 12px;
  background: #08090c;
  touch-action: auto;
}

.media-viewer-surface:has(.viewer-image) { touch-action: none; }

.viewer-image {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transform-origin: center;
  user-select: none;
  -webkit-user-drag: none;
}

.viewer-image.zoomed {
  cursor: zoom-out;
}

.viewer-pdf {
  display: block;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  border: 0;
  background: #303238;
}

.media-viewer-arrow {
  position: absolute;
  top: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  transform: translateY(-50%);
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: var(--radius-round);
  background: rgba(20, 21, 25, .72);
  color: #fff;
  font-size: 34px;
  line-height: 1;
  cursor: pointer;
}

.media-viewer-arrow.previous { left: 14px; }
.media-viewer-arrow.next { right: 14px; }

.media-viewer-position {
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 5px 10px;
  border-radius: var(--radius-control);
  background: rgba(20, 21, 25, .72);
  color: rgba(255, 255, 255, .85);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.att-file,
.att-chips li {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  max-width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: min(10px, var(--radius-control));
  background: var(--surface);
}
.att-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.att-pdf {
  color: var(--accent-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
/* On a phone, a file chip and its Remove are whole 44px targets. */
@media (max-width: 860px), (pointer: coarse) {
  .att-chips li,
  .att-sealed {
    min-height: 44px;
  }
  .att-chips li .btn.link.small {
    min-width: 44px;
    min-height: 44px;
    padding: 0 8px;
  }
}
/* A sensitive DM's file chip (messages.js FileKind): only its kind's icon, the kind and size. */
.att-sealed {
  cursor: default;
}
.att-sealed .icon {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--muted);
}
.att-full {
  display: block;
  max-width: 100%;
  max-height: 70vh;
  margin: 0 auto 12px;
  border-radius: min(8px, var(--radius-control));
}
/* Inside the composer, above what you type. */
.att-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 10px 12px 0;
  list-style: none;
}
/* Send later's time, inside the composer above its tools. */
.later-at {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 6px 16px 2px;
  font-size: round(nearest, calc(14px * var(--font-scale)), 1px);
  font-weight: 600;
  color: var(--heading);
}
.later-at .input {
  width: auto;
  max-width: 100%;
  padding: 7px 10px;
  font-size: max(16px, round(nearest, calc(14px * var(--font-scale)), 1px));
  font-weight: 400;
}
.error.small {
  margin: 6px 0 0;
  padding: 6px 10px;
  font-size: round(nearest, calc(13px * var(--font-scale)), 1px);
}
.scheduled-list .title a {
  color: inherit;
}
/* Small buttons in these lists and editors are still 44px targets on touch screens. */
@media (pointer: coarse) {
  .scheduled-list .small-btn,
  .workflow-editor .small-btn,
  table.grid .small-btn {
    min-height: 44px;
  }
}

/* Office tools (js/views/modules.js); its note under the head is .head-note, in Offices. */
.tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  gap: 14px;
}
.card.tool {
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 18px 20px;
  text-align: left;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  font-style: inherit;
  font-variant: inherit;
  font-stretch: inherit;
  color: inherit;
  cursor: pointer;
  transition: border-color 150ms ease-out, background-color 150ms ease-out;
}
.card.tool:hover {
  border-color: var(--line-strong);
}
.card.tool:active {
  background: var(--surface-2);
}
.card.tool[aria-busy="true"] {
  cursor: progress;
}
.tool-title {
  font-weight: 600;
  color: var(--heading);
}
@media (max-width: 860px) {
  .tool-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
    gap: 10px;
  }
  .card.tool {
    padding: 14px 16px;
  }
}

/* A channel's canvas, tables and workflows (js/views/canvas.js, tables.js, workflows.js) */
.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
/* Each conversation's pages share one scrolling tab bar. */
.channel-tabs {
  margin: 4px 0 16px;
  min-width: 0;
}
.conversation-tabs {
  position: relative;
  display: flex;
  align-items: center;
  overflow-x: auto;
  scroll-padding-inline-end: 56px;
  border-bottom: 1px solid var(--line-strong);
  max-width: 100%;
}
.conversation-tabs button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: none;
  min-height: 40px;
  min-width: 40px;
  max-width: 240px;
  padding: 0 14px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
/* Keep the focus ring inside the scrolling bar so it isn't clipped. */
.conversation-tabs button:focus-visible {
  outline-offset: -2px;
}
.conversation-tabs button span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.conversation-tabs .icon {
  width: 16px;
  height: 16px;
  flex: none;
}
.conversation-tabs button.active {
  color: var(--heading);
  border-bottom-color: var(--accent-ink);
}
.conversation-tabs button.active .icon {
  color: var(--accent-ink);
}
.conversation-tabs .conversation-tabs-add {
  position: sticky;
  right: 0;
  z-index: 1;
  border-radius: var(--radius-round);
  padding: 0;
  margin: 0 6px 2px;
  background: var(--surface-2);
  color: var(--heading);
}
.conversation-tabs-add .icon {
  width: 22px;
  height: 22px;
}
.overlay:has(.conversation-add) {
  background: transparent;
}
.dialog.conversation-add {
  position: fixed;
  top: var(--tab-menu-top);
  left: var(--tab-menu-left);
  width: 360px;
  max-height: calc(100dvh - var(--tab-menu-top) - 12px);
  padding: 12px;
  border: 1px solid var(--line-strong);
  box-shadow: 0 12px 24px color-mix(in srgb, var(--scrim) 40%, transparent);
}
.conversation-add > h2,
.conversation-add-summary,
.conversation-add > .actions {
  display: none;
}
.conversation-add-group {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 0 6px;
  color: var(--muted);
  font-size: calc(13px * var(--font-scale));
  font-weight: 600;
}
.conversation-add-group .icon {
  width: 16px;
  height: 16px;
}
.conversation-add-choice {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 50px;
  text-align: left;
  padding: 4px 6px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--heading);
  font: inherit;
  cursor: pointer;
}
.conversation-add-choice:hover {
  background: var(--surface-2);
}
.conversation-add-choice:disabled {
  opacity: .55;
  cursor: default;
}
.conversation-add-choice strong,
.conversation-add-choice small {
  display: block;
}
.conversation-add-choice small {
  color: var(--muted);
  font-size: calc(13px * var(--font-scale));
}
.conversation-add-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--accent-ink);
}
@media (max-width: 860px), (pointer: coarse) {
  .conversation-tabs button {
    min-height: 44px;
    min-width: 44px;
    /* Keep a chip narrow enough to fit before the sticky + and its side margins. */
    max-width: min(240px, calc(100% - 56px));
  }
  .conversation-add-choice {
    min-height: 54px;
  }
}
@media (max-width: 860px) {
  .overlay:has(.conversation-add) {
    background: var(--scrim);
  }
  .dialog.conversation-add {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    max-height: calc(100dvh - 44px);
    padding: 20px 20px calc(16px + env(safe-area-inset-bottom));
    box-shadow: none;
  }
  .conversation-add > h2,
  .conversation-add-summary {
    display: block;
  }
  .conversation-add > .actions {
    display: flex;
  }
  .conversation-add-group {
    font-size: calc(14px * var(--font-scale));
    margin-top: 14px;
  }
  .conversation-add-choice {
    min-height: 64px;
    padding: 8px 10px;
  }
}
/* A canvas's empty state starts at the card's padding, like its title does. */
.canvas > p:first-child {
  margin-top: 0;
}
.fieldset > .btn {
  justify-self: start;
}
.canvas h2 {
  margin: 0;
}
/* New table, opened in place under the list. */
.add-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.add-form .input {
  flex: 1 1 220px;
}
.add-form .error {
  flex-basis: 100%;
  margin: 0;
}
.table-head {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: flex-end;
  justify-content: space-between;
}
.table-head .grow {
  min-width: 0;
}
.table-head h2 {
  margin: 0;
  overflow-wrap: anywhere;
}
/* Back to a channel's list of tables. */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-height: 32px;
  margin-left: -4px;
  font-size: round(nearest, calc(13px * var(--font-scale)), 1px);
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
}
.back-link:hover {
  color: var(--text);
}
.back-link .icon {
  width: 16px;
  height: 16px;
  transform: rotate(180deg);
}
@media (pointer: coarse) {
  .back-link {
    min-height: 44px;
  }
}
.table-scroll {
  /* Keep absolutely positioned screen-reader labels inside the scroller. */
  position: relative;
  overflow-x: auto;
  margin: 12px 0;
  padding: 0;
}
table.grid {
  border-collapse: collapse;
  min-width: 100%;
}
table.grid th,
table.grid td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}
table.grid th {
  font-weight: 600;
  color: var(--heading);
}
table.grid td.empty {
  color: var(--muted);
  padding: 14px 8px;
}
table.grid .input.cell,
table.grid .select.cell {
  min-width: 130px;
  padding: 6px 8px;
}
table.grid .row-actions {
  width: 1%;
}
.column-name {
  border: 0;
  background: none;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  font-style: inherit;
  font-variant: inherit;
  font-stretch: inherit;
  font-weight: 600;
  color: inherit;
  padding: 0;
  cursor: pointer;
  text-decoration: underline dotted;
}
/* A workflow in the list: what it does and its last runs, then Run or Fill in, and Edit. */
.row.workflow {
  flex-wrap: wrap;
  align-items: flex-start;
}
.row.workflow .grow {
  flex: 1 1 260px;
}
.workflow h3 {
  margin: 0;
}
/* In the editor: on or off, changed at once. */
.workflow-state {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin: 0 0 16px;
  padding: 8px 8px 8px 14px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.runs {
  margin: 10px 0 0;
  padding-left: 18px;
  font-size: round(nearest, calc(13px * var(--font-scale)), 1px);
  color: var(--muted);
}
.runs .failed {
  color: var(--danger);
}
.fieldset {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px;
  margin: 12px 0;
  display: grid;
  gap: 10px;
}
.fieldset legend {
  font-weight: 600;
  padding: 0 4px;
}
.field-line {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.field-line .input,
.field-line .select {
  flex: 1 1 200px;
}
.action-edit {
  display: grid;
  gap: 6px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.workflow-editor .hint {
  margin: 0;
}
p.hint {
  color: var(--muted);
  font-size: round(nearest, calc(13px * var(--font-scale)), 1px);
}

/* App updates (js/views/appupdates.js) */
.release-card {
  margin-bottom: 16px;
}
.release-card > h2 {
  margin: 0 0 12px;
}
.release-summary {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: round(nearest, calc(13px * var(--font-scale)), 1px);
}
.release-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
}
.release-attempt-notices {
  margin: 12px 0;
}
.release-attempt-notice {
  margin: 4px 0;
  overflow-wrap: anywhere;
}
.release-attempt-progress {
  margin: 8px 0;
  color: var(--accent);
}
.release-step {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px 10px;
  position: relative;
  padding-bottom: 17px;
}
.release-step:last-child {
  padding-bottom: 0;
}
.release-step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 13px;
  bottom: -2px;
  width: 2px;
  background: var(--line-strong);
}
.release-marker {
  width: 12px;
  height: 12px;
  margin-top: 4px;
  border: 2px solid var(--line-strong);
  border-radius: 4px;
  background: var(--surface);
  z-index: 1;
}
.release-step.done .release-marker {
  border-color: var(--ok);
  background: var(--ok);
}
.release-step.move .release-marker {
  border-color: var(--accent);
  background: var(--surface);
}
.release-step.track .release-marker {
  border-color: var(--accent);
  background: var(--accent);
}
.release-step-content {
  min-width: 0;
}
.release-step-content strong {
  display: block;
  color: var(--heading);
}
.release-step-line {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: round(nearest, calc(14px * var(--font-scale)), 1px);
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.release-state {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  margin-top: 1px;
  padding: 2px 10px;
  border-radius: var(--radius-control);
  background: var(--surface-2);
  color: var(--muted);
  font-size: round(nearest, calc(12px * var(--font-scale)), 1px);
  font-weight: 650;
  white-space: nowrap;
}
.release-state.done {
  background: var(--ok-soft);
  color: var(--ok);
}
.release-state.move {
  background: var(--danger-soft);
  color: var(--danger);
}
.release-state.track {
  background: var(--accent-soft);
  color: var(--accent);
}
.release-state.look {
  background: var(--danger-soft);
  color: var(--danger);
}
.release-merges,
.release-history {
  margin-top: 16px;
  color: var(--muted);
  font-size: round(nearest, calc(13px * var(--font-scale)), 1px);
}
.release-merges summary,
.release-history summary {
  cursor: pointer;
  color: var(--accent);
  font-weight: 600;
}
.release-merges ul,
.release-history ol {
  margin: 8px 0 0;
  padding-left: 20px;
}
.release-merges li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  padding: 4px 0;
  color: var(--text);
  overflow-wrap: anywhere;
}
.release-merges .release-merges-earlier {
  color: var(--muted);
}
.release-merges time,
.release-history li > span {
  color: var(--muted);
  white-space: nowrap;
}
.release-actions {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin-top: 20px;
}
.release-actions .put-live,
.release-actions .try-again {
  flex: 0 0 auto;
  white-space: nowrap;
}
.release-actions .go-back {
  flex: 0 1 auto;
  min-width: 0;
  white-space: normal;
}
.release-history li {
  padding: 8px 0;
  color: var(--text);
}
.release-history li code {
  display: block;
  margin-top: 3px;
  color: var(--muted);
}
.release-history details {
  margin-top: 4px;
}
.release-history pre {
  max-width: 100%;
  overflow: auto;
  white-space: pre-wrap;
}
.error-text {
  color: var(--danger);
}
pre.diff,
pre.evidence {
  margin: 10px 0;
  padding: 12px;
  max-height: 60vh;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: round(nearest, calc(12.5px * var(--font-scale)), 1px);
  font-weight: normal;
  font-style: normal;
  font-variant: normal;
  font-stretch: normal;
  --lh: 1.5;
  white-space: pre;
}
.card.approval {
  border-color: var(--warn);
  margin-bottom: 16px;
}
.card.approval h2 {
  margin-top: 0;
}
.answer h2 {
  margin-top: 0;
}
.stages {
  margin: 0;
  padding: 0;
}
.stages details {
  margin-top: 6px;
}
.run-summary {
  margin-bottom: 16px;
}
/* A run's status word, then when it started (in the list) or what it's doing (on its page). */
.run-words {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin-top: 6px;
}
.run-summary .run-words {
  margin-top: 10px;
}
/* A request's own words: up to two lines in the list, all of them on its page. */
.list.requests .title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: normal;
}
.machines-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.machines-head h2 {
  margin-bottom: 0;
}
.list.machines > li.off .title,
.list.machines > li.off .meta {
  color: var(--muted);
}

/* People, its settings and the audit log (js/views/people.js) */
/* Staging access (js/views/staging-access.js): managers are always in; the owner chooses others. */
.staging-access-page > .page-head {
  margin-bottom: 6px;
}
.staging-access-intro {
  max-width: 920px;
  margin: 0 0 18px;
  color: var(--muted);
}
.staging-access-card {
  margin-bottom: 18px;
  overflow: hidden;
}
.staging-access-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px 10px;
}
.staging-access-card-head h2 {
  margin: 0;
  font-size: round(nearest, calc(19px * var(--font-scale)), 1px);
}
.staging-access-card-head > span {
  color: var(--muted);
  font-size: round(nearest, calc(13px * var(--font-scale)), 1px);
  text-align: right;
}
.staging-access-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.staging-access-list > li {
  display: block;
  min-width: 0;
  padding: 14px 22px;
  border-top: 1px solid var(--line);
}
.staging-added-list > li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.staging-access-list strong,
.staging-access-list li span {
  display: block;
}
.staging-access-list strong {
  overflow-wrap: anywhere;
}
.staging-access-list li span {
  margin-top: 2px;
  color: var(--muted);
  font-size: round(nearest, calc(14px * var(--font-scale)), 1px);
}
.staging-access-person {
  min-width: 0;
}
.staging-access-list .btn {
  flex: 0 0 auto;
  min-width: 96px;
  min-height: 44px;
}
.staging-access-empty {
  margin: 0;
  padding: 8px 22px 14px;
  color: var(--muted);
}
.staging-access-add {
  display: grid;
  gap: 10px;
  padding: 14px 22px 16px;
  border-top: 1px solid var(--line);
}
.staging-access-add label {
  font-weight: 600;
}
.staging-access-add .input {
  min-height: 44px;
}
.staging-access-add .btn {
  justify-self: start;
  min-height: 44px;
}
.staging-reset {
  display: grid;
  justify-items: start;
  gap: 10px;
  padding: 14px 22px 18px;
  border-top: 1px solid var(--line);
}
.staging-reset p {
  max-width: 720px;
  margin: 0;
  color: var(--muted);
}
.staging-reset .btn {
  min-height: 44px;
}
.staging-access-refusal {
  max-width: 440px;
  padding: 24px;
}
.staging-access-refusal h1 {
  font-size: round(nearest, calc(21px * var(--font-scale)), 1px);
}
@media (max-width: 640px), (pointer: coarse) {
  .staging-access-card-head {
    padding: 16px 18px 8px;
  }
  .staging-access-list > li {
    padding: 14px 18px;
  }
  .staging-access-add {
    padding: 14px 18px 16px;
  }
  .staging-reset {
    padding: 14px 18px 18px;
  }
}
/* Practice Hub's "Find people": Person | Role | Offices | Status | the button, in a card. */
.people-table td {
  vertical-align: middle;
}
.people-table th:first-child,
.people-table td:first-child {
  padding-left: 22px;
}
.people-table th:last-child,
.people-table td:last-child {
  padding-right: 22px;
}
.people-table .person-cell {
  min-width: 0;
  overflow-wrap: anywhere;
}
.people-table .meta {
  font-size: round(nearest, calc(13px * var(--font-scale)), 1px);
  color: var(--muted);
}
/* The name opens their access, as the button at the end of the row does. */
.person-open {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent-ink);
  cursor: pointer;
  font-size: round(nearest, calc(15px * var(--font-scale)), 1px);
  font-weight: 650;
  text-align: left;
}
.person-open:hover {
  text-decoration: underline;
}
/* The word, then when they last signed in; under it when the column is narrow. */
.people-table .status-cell .word {
  margin: 2px 8px 2px 0;
}
.people-table .status-cell .when {
  font-weight: 500;
}
.people-table .action-cell {
  width: 1%;
  text-align: right;
  white-space: nowrap;
}
.people-table tr.off .person-open,
.people-table tr.off td {
  color: var(--muted);
}
.people-foot {
  margin: 12px 0 0;
}
/* Where five columns would squeeze (phones, tablets, 200% zoom): the same rows as a list. The
   column headings stay for screen readers. The name and the button are 44px targets. */
@media (max-width: 1100px) {
  .people-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .people-table,
  .people-table tbody {
    display: block;
  }
  .people-table tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 12px;
    padding: 4px 16px 12px;
    border-bottom: 1px solid var(--line);
  }
  .people-table tr:last-child {
    border-bottom: 0;
  }
  .people-table td,
  .people-table th:first-child,
  .people-table td:first-child,
  .people-table td:last-child {
    display: block;
    grid-column: 1;
    padding: 0;
    border: 0;
  }
  .people-table .person-open {
    min-height: 44px;
  }
  .people-table .person-cell .meta {
    margin-top: -8px;
  }
  .people-table .role-cell,
  .people-table .offices-cell {
    color: var(--muted);
  }
  .people-table .status-cell {
    margin-top: 4px;
  }
  .people-table td.action-cell {
    grid-column: 2;
    grid-row: 1 / span 4;
    align-self: center;
    width: auto;
  }
}
/* A number box with its unit beside it, inside a field's label. */
.field > span.with-unit {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-weight: 400;
  color: var(--muted);
}
/* Saved. beside its button. */
.actions.saved-row {
  align-items: center;
}
.saved-row .saved {
  font-weight: 600;
  color: var(--ok);
}
/* An office's week: the day ticked when open, its hours beside it. */
.week {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}
.week li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 16px;
  min-height: 48px;
  padding: 4px 0;
  border-top: 1px solid var(--line);
}
.week .check {
  flex: 0 0 9em;
  align-items: center;
  min-height: 44px;
}
.week .check input {
  margin-top: 0;
}
.week .times {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
}
.audit .row {
  align-items: flex-start;
}
.audit .title {
  white-space: normal;
  color: var(--heading);
}
.audit .details {
  font-size: round(nearest, calc(14px * var(--font-scale)), 1px);
  overflow-wrap: anywhere;
}
.audit .meta {
  overflow-wrap: anywhere;
}
.audit .when {
  padding-top: 3px;
  text-align: right;
}
@media (max-width: 600px) {
  .week .times {
    margin-left: 24px;
  }
  .audit .row {
    flex-wrap: wrap;
    row-gap: 2px;
  }
  .audit .when {
    flex-basis: 100%;
    padding-top: 0;
    text-align: left;
  }
}

/* ---- Health (js/views/health.js): the verdict with its ring, what needs a look, then what's
   working, small and in its groups ---- */

.health-verdict {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.health-ring {
  flex: none;
}

.health-ring .ring-rest {
  stroke: var(--line-strong);
}

.health-ring .ring-rest.short {
  stroke: var(--warn);
}

.health-ring .ring-ok {
  stroke: var(--ok);
}

.health-at {
  font-size: round(nearest, calc(13px * var(--font-scale)), 1px);
  color: var(--muted);
}

.health-page .check-text {
  display: flex;
  flex: 1 1 16rem;
  flex-direction: column;
  min-width: 0;
}

.health-page .check-name {
  font-weight: 650;
  color: var(--heading);
}

.health-page .check-what {
  font-size: round(nearest, calc(14px * var(--font-scale)), 1px);
  color: var(--muted);
  overflow-wrap: anywhere;
}

.health-problems .check-what {
  color: var(--text);
}

.health-working {
  padding: 2px 22px 18px;
}

.health-group + .health-group {
  margin-top: 4px;
  border-top: 1px solid var(--line);
}

.health-group h3 {
  margin: 14px 0 10px;
  font-size: round(nearest, calc(14px * var(--font-scale)), 1px);
  font-weight: 650;
  color: var(--muted);
}

.health-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: 12px 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.health-tiles li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px 8px;
}

.health-tiles .check-name {
  font-size: round(nearest, calc(14px * var(--font-scale)), 1px);
}

.health-tiles .check-what {
  grid-column: 1 / -1;
  font-size: round(nearest, calc(13px * var(--font-scale)), 1px);
}

.health-tiles .word {
  height: 20px;
  padding: 0 8px;
  font-size: round(nearest, calc(11.5px * var(--font-scale)), 1px);
}

/* What this Huddle doesn't use: one quiet line per group. */
.health-off {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: round(nearest, calc(14px * var(--font-scale)), 1px);
  color: var(--muted);
}

.health-off li + li {
  margin-top: 4px;
}

.health-off .check-name {
  margin-right: 6px;
  font-weight: 600;
  color: var(--text);
}

@media (max-width: 860px) {
  .health-working {
    padding: 2px 16px 16px;
  }
}

/* ---- Bot avatars (js/bot-avatar.js) ---- */

/* The outer box holds the avatar's place; the body inside is what's round and what moves, so a
   bob never shifts the text around it. */
.bot-avatar {
  --avatar-size: 40px;
  flex: none;
  position: relative;
  display: inline-block;
  width: var(--avatar-size);
  height: var(--avatar-size);
  vertical-align: middle;
}

.bot-avatar__body {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: var(--radius-avatar);
  background: var(--avatar-bg, var(--brand));
  color: var(--avatar-ink, #ffffff);
  font-family: var(--sans);
  font-size: round(nearest, calc(var(--avatar-size) * 0.42), 1px);
  font-weight: 600;
  font-style: normal;
  font-variant: normal;
  font-stretch: normal;
  --lh: 1;
  user-select: none;
}

.bot-avatar__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Each eye's lid waits just above its eye, out of sight, and slides down over it to blink. Its
   lower edge, a darker line, is what a closed eye shows. */
.bot-avatar__eye {
  position: absolute;
  overflow: hidden;
  border-radius: 50%; /* true circle */
  pointer-events: none;
}

.bot-avatar__lid {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  border-radius: 50%; /* true circle */
  border-bottom: max(1px, calc(var(--avatar-size) * 0.012)) solid var(--lash, #26282e);
  background: var(--lid, #ffffff);
  transform: translateY(-110%);
}

/* The bob and breathe: a 4–5 second cycle (set per avatar), up 1.2% and 1.6% bigger, so even its
   top edge rises no more than 2%. Only on screen, on a showing page (bot-avatar.js sets data-live). */
.bot-avatar[data-live] .bot-avatar__body {
  animation: bot-avatar-bob var(--bob-duration, 4.5s) ease-in-out var(--bob-delay, 0s) infinite;
  will-change: transform;
}

@keyframes bot-avatar-bob {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-1.2%) scale(1.016); }
}

/* A blink: closed by 75 ms, open again by 150. */
.bot-avatar[data-blink] .bot-avatar__lid {
  animation: bot-avatar-blink 150ms ease-in-out;
}

@keyframes bot-avatar-blink {
  0%, 100% { transform: translateY(-110%); }
  50% { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .bot-avatar__body,
  .bot-avatar__lid {
    animation: none !important;
  }
}

/* The picker: the ten in a grid of labelled tiles, as wide as its place even in a flex row. */
.avatar-picker {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 8px;
}

.avatar-choice {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 10px 6px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-size: round(nearest, calc(12.5px * var(--font-scale)), 1px);
  --lh: 1.25;
  text-align: center;
  cursor: pointer;
}

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

.avatar-choice:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 1px var(--accent);
}

.avatar-choice:has(input:focus-visible) {
  outline: 2px solid var(--accent-ink);
  outline-offset: 2px;
}

/* ---- Phone tap targets: every button and link is 44px each way ---- */

/* Four were smaller: a message's Edit (38px wide), a file chip (38px tall), a channel's name
   (40px) and Offices' case link (15px). They look the same; what grows is the area you
   can tap. The name and the link do it with padding they give back as negative margin, so the
   lines they sit in keep their height. Phones only: 861px and wider is as it was, and no text
   size, font or colour changes anywhere. */
@media (max-width: 860px) {
  /* Edit: as wide as Remove on the composer's file chips (.att-chips li, above). Its height
     is already 44px from the touch rules for message actions. */
  .btn.link.small {
    min-width: 44px;
  }

  /* A file in a message: as tall as the chips in the composer. */
  .att-file {
    min-height: 44px;
  }

  /* A channel's name: 32px of name with 6px above and below it, and the same taken back as
     margin. min-height keeps it 44px at a smaller text size. */
  .channel-name {
    min-height: 44px;
    padding-block: 6px;
    margin-block: -6px;
  }

  /* "See the cases" in an office's stat line: 16px above and below the text (47px with the 13px
     text, and still over 44px at the smallest text size). Padding on a line of text takes no
     room, so the rows stay where they were. position: relative, so this padding and not the
     next row's text takes the taps that land on it. */
  dd.sub a {
    position: relative;
    padding-block: 16px;
  }
}

/* ---- Phone dialogs: bottom sheets ---- */

/* Every dialog (js/ui.js: .overlay > .dialog) rises from the bottom of the screen: as wide as it,
   rounded on top only, with the home bar's room added under its buttons. A tall one scrolls
   inside itself (the max-height of 100% it already has, of the screen less the 44px above it),
   so its top always leaves a finger-sized strip of dimmed screen above it. A tap on that strip
   it, and its own Cancel or Close, close it as before. Phones only: 861px and wider keeps the
   centred box, and no text size, font or colour changes anywhere. */
@media (max-width: 860px) {
  .overlay {
    align-items: flex-end;
    padding: 44px 0 0;
  }
  .dialog {
    max-width: none;
    border-bottom: 0;
    border-radius: var(--radius) var(--radius) 0 0;
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
  }
  .dialog .select {
    min-height: 44px;
  }
  .dialog a[href]:not(.btn) {
    display: inline-flex;
    align-items: center;
    min-width: 44px;
    min-height: 44px;
    max-width: 100%;
  }

  /* A version's Done bar (js/views/bots.js, above) sticks to the bottom of the dialog and ends on
     its edge, with the dialog's 20px of padding behind it. The home bar's room is in that padding
     now too, so the bar takes back the same, and still ends on the edge; its own padding keeps
     the button clear of the home bar. */
  .dialog-done {
    bottom: calc(-20px - env(safe-area-inset-bottom));
    margin-bottom: calc(-20px - env(safe-area-inset-bottom));
  }
}

/* ---- Phone: nothing cut off ---- */

/* A row's title and a search hit's matching text stopped short on a phone: the title after one
   line, with "…", and the hit after two. Now each wraps onto as many lines as it needs, and a word
   too long for the screen (a reference number, a link) breaks where it must, so all of it can be
   read. The text keeps its size, font and colour; the row just grows taller. Phones only: this
   doesn't reach 861px and wider, and no text size, font or colour changes anywhere. */
@media (max-width: 860px) {
  .row .title {
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .search-messages .found {
    display: block;
    overflow: visible;
    -webkit-line-clamp: none;
  }
}

/* ---- Computer: long search titles wrap ---- */

/* On a computer, a work item's title in Search's Work list stopped short after one line, with "…",
   so the words that matched could be hidden (a 150-character title lost its ending). Now it wraps
   onto as many lines as it needs, and a word too long for the row (a reference number) breaks where
   it must, as it does on a phone. Only this list: Home and Queues keep their one-line rows, and the
   message hits below it (.list.dense) are as they were. The text keeps its size, font and colour;
   the row just grows taller. All widths, including fractional widths at the phone breakpoint. */
.search-work .row .title {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* The canvas page. Block tools live in its margin; on touch the bottom bar takes over. */
.canvas-page {
  width: 100%;
  max-width: 840px;
  margin: 16px auto 32px;
  padding: 32px 56px 64px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow-wrap: anywhere;
  min-width: 0;
  container-type: inline-size;
}
.canvas-page-head { border-bottom: 1px solid var(--line); margin-bottom: 24px; padding-bottom: 16px; }
.canvas-title { font: 700 calc(32px * var(--font-scale))/1.25 var(--serif); margin: 0 0 12px; white-space: pre-wrap; min-width: 0; }
.canvas-title-text { display: block; min-height: 1.25em; }
.canvas-title-text:empty::before { content: attr(data-placeholder); color: var(--muted); }
.canvas-byline { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.canvas-save-status { display: inline-flex; align-items: center; gap: 4px; }
.canvas-save-status.saved { color: var(--ok); font-weight: 600; }
.canvas-save-status .icon { width: 16px; height: 16px; }
.canvas-page-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.canvas-page-actions .btn { min-height: 40px; }
.canvas-history-button { gap: 6px; }
.canvas-history-button .icon { width: 16px; height: 16px; }
.canvas-history-dialog .row { min-width: 0; }
.canvas-history-dialog .row .title { white-space: normal; overflow-wrap: anywhere; }
.canvas-history-dialog .actions { flex-wrap: wrap; }
.canvas-history-dialog .btn { min-height: 40px; }
.canvas-note-link { min-height: 40px; width: fit-content; }
.canvas-row { position: relative; margin: 12px 0; min-width: 0; }
.canvas-editable { min-height: 1.5em; white-space: pre-wrap; overflow-wrap: anywhere; outline-offset: 4px; line-height: 1.6; }
.canvas-editable:empty::before { content: attr(data-placeholder); color: var(--muted); pointer-events: none; }
.canvas-editable:not([contenteditable]):empty::before { content: none; }
.canvas-row h1, .canvas-row h2, .canvas-row h3 { font-family: var(--serif); font-weight: 700; line-height: 1.3; margin: 24px 0 8px; }
.canvas-row h1 { font-size: calc(28px * var(--font-scale)); }
.canvas-row h2 { font-size: calc(23px * var(--font-scale)); }
.canvas-row h3 { font-size: calc(19px * var(--font-scale)); }
.canvas-block-tools { position: absolute; right: 100%; top: 0; display: flex; opacity: .3; }
.canvas-block-tools button { border: 0; border-radius: var(--radius-sm); width: 36px; height: 36px; padding: 6px; background: transparent; color: var(--muted); }
.canvas-row:hover > .canvas-block-tools, .canvas-row:focus-within > .canvas-block-tools { opacity: 1; }
.canvas-block-tools button:hover { background: var(--surface-2); }
.canvas-grip { cursor: grab; touch-action: none; }
.canvas-list { padding-left: 24px; margin: 0; }
.canvas-list li { padding-left: 2px; }
.canvas-checklist { list-style: none; padding: 0; margin: 0; }
.canvas-checklist li { display: flex; align-items: flex-start; gap: 6px; }
.canvas-checklist .canvas-editable { flex: 1; min-width: 0; padding-top: 5px; }
.canvas-check-target { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex-shrink: 0; cursor: pointer; }
.canvas-check-target input { width: 18px; height: 18px; accent-color: var(--ok); margin: 0; }
.canvas-checklist .done { color: var(--muted); text-decoration: line-through; }
.canvas-callout { position: relative; display: flex; gap: 12px; padding: 14px 16px; border-radius: var(--radius-sm); background: var(--callout-bg); color: var(--text); }
.canvas-callout > .icon { flex-shrink: 0; width: 18px; height: 24px; color: var(--callout-ink); }
.canvas-callout > .canvas-editable { min-width: 0; flex: 1; }
.canvas-callout:has(.canvas-colors) { padding-right: 70px; }
.canvas-callout-blue { --callout-bg: var(--accent-soft); --callout-ink: var(--accent-ink); }
.canvas-callout-green { --callout-bg: var(--ok-soft); --callout-ink: var(--ok); }
.canvas-callout-yellow { --callout-bg: var(--warn-soft); --callout-ink: var(--warn-ink); }
.canvas-callout-red { --callout-bg: var(--danger-soft); --callout-ink: var(--danger); }
.canvas-callout-purple { --callout-bg: var(--canvas-purple-soft); --callout-ink: var(--canvas-purple); }
.canvas-callout-gray { --callout-bg: var(--surface-2); --callout-ink: var(--muted); }
.canvas-colors { position: absolute; top: 4px; right: 4px; z-index: 2; font-size: calc(12px * var(--font-scale)); }
.canvas-colors summary { min-height: 36px; display: flex; align-items: center; cursor: pointer; }
.canvas-colors > div { background: var(--surface); padding: 6px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); display: grid; grid-template-columns: repeat(3, 36px); gap: 4px; }
.canvas-swatch { background: var(--callout-bg); color: var(--callout-ink); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); height: 36px; width: 36px; }
.canvas-swatch[aria-pressed="true"] { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
.canvas-quote { display: flex; gap: 10px; padding: 4px 0; margin: 0; font-weight: 600; font-size: calc(19px * var(--font-scale)); }
.canvas-quote > span { font: 700 56px/.9 var(--serif); color: var(--accent-ink); }
.canvas-row hr { border: 0; border-top: 1px solid var(--line-strong); margin: 28px 0; min-height: 1px; }
.canvas-block-menu { position: absolute; top: 100%; left: 0; z-index: 20; width: min(360px, calc(100vw - 24px)); padding: 8px; background: var(--surface); color: var(--text); border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: 0 12px 24px rgba(0,0,0,.18); max-height: min(590px, 65dvh); overflow: auto; }
.canvas-block-menu > .muted { padding: 6px 8px; }
.canvas-block-menu button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 6px 8px; text-align: left; border: 0; border-radius: var(--radius-sm); background: var(--surface); color: var(--text); }
.canvas-block-menu button[aria-selected="true"], .canvas-block-menu button:hover { background: var(--accent-soft); }
.canvas-block-menu button strong { display: block; font-size: calc(15px * var(--font-scale)); }
.canvas-block-menu button small { display: block; color: var(--muted); font-size: calc(13px * var(--font-scale)); }
.canvas-choice-tile { display: flex; justify-content: center; align-items: center; flex-shrink: 0; width: 34px; height: 34px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--heading); font-weight: 700; font-size: calc(13px * var(--font-scale)); }
.canvas-choice-tile .icon { width: 18px; height: 18px; }
.canvas-format-bar { position: fixed; z-index: 30; display: flex; flex-wrap: wrap; width: max-content; max-width: calc(100vw - 16px); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--canvas-toolbar-bg); color: var(--canvas-toolbar-text); padding: 4px; box-shadow: 0 12px 24px rgba(0,0,0,.18); }
.canvas-format-bar button { width: 40px; height: 36px; padding: 4px; border: 0; border-radius: var(--radius-sm); background: transparent; color: inherit; }
.canvas-format-bar button[aria-pressed="true"] { background: var(--canvas-toolbar-active); }
.canvas-format-bar .canvas-format-heading { border-left: 1px solid var(--muted); border-radius: 0; margin-left: 4px; }
.canvas-link-field { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px; max-width: 290px; padding: 4px; }
.canvas-link-field .input { width: 100%; min-width: 0; font-size: calc(16px * var(--font-scale)); color: var(--text); background: var(--surface); }
.canvas-link-field button { width: auto; padding: 4px 8px; }
.canvas-conflict { padding: 12px; margin-top: 8px; border: 1px solid var(--warn); border-radius: var(--radius-sm); }
.canvas-conflict > p { font-size: calc(14px * var(--font-scale)); }
.canvas-conflict .button-row { margin-top: 12px; }
.canvas-phone-bar { display: none; }
/* Takes no room, so showing it never moves the rows the pointer is measured against. */
.canvas-drop-line { position: relative; height: 0; z-index: 1; }
.canvas-drop-line::after { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 3px; background: var(--accent-ink); border-radius: var(--radius-sm); }
.canvas-drag-source { opacity: .3; }
.canvas-drag-preview { position: fixed; pointer-events: none; z-index: 25; background: var(--surface); border: 1px solid var(--accent-ink); border-radius: var(--radius-sm); padding: 8px; opacity: .9; }
@media (max-width: 640px), (pointer: coarse) {
  .canvas-page { padding: 20px 16px 48px; border: 0; border-radius: 0; margin: 0; }
  .canvas-title { font-size: calc(28px * var(--font-scale)); }
  .canvas-page-actions { margin-left: 0; flex-basis: 100%; }
  .canvas-block-tools { display: none; }
  .canvas-with-bar { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
  .canvas-phone-bar { display: flex; gap: 6px; padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); position: fixed; bottom: var(--canvas-keyboard-gap, 0px); left: 0; right: 0; z-index: 24; background: var(--surface); border-top: 1px solid var(--line); }
  .canvas-phone-bar button { display: flex; align-items: center; justify-content: center; gap: 6px; flex: 1; min-height: 44px; min-width: 0; padding: 4px; border: 1px solid var(--line-strong); border-radius: var(--radius-control); color: var(--heading); background: var(--surface); font-weight: 600; }
  .canvas-phone-bar button:disabled { opacity: .55; }
  .canvas-check-target { width: 44px; height: 44px; }
  .canvas-checklist .canvas-editable { padding-top: 9px; }
  .canvas-colors summary { min-height: 44px; min-width: 44px; }
  .canvas-colors > div { grid-template-columns: repeat(3, 44px); }
  .canvas-swatch { width: 44px; height: 44px; }
  .canvas-conflict .btn, .canvas-format-bar button { min-height: 44px; min-width: 44px; }
  .canvas-editable { scroll-margin-bottom: 100px; }
  .canvas-block-menu { left: -8px; }
}

/* ---- Computer: full-width pages and compact conversations ---- */

/* The window still scrolls the conversation. The messages grow to fill a short page, while
   the composer sticks to the window's foot on a long one. Phones keep their existing rules. */
@media (min-width: 861px) {
  .main {
    max-width: none;
    padding: 16px 24px 40px;
  }

  .page-head {
    align-items: center;
    margin-bottom: 14px;
  }

  .page-head h1 {
    font-size: round(nearest, calc(22px * var(--font-scale)), 1px);
    --lh: 1.2;
  }

  .page-sum {
    margin-top: 4px;
    font-size: round(nearest, calc(13px * var(--font-scale)), 1px);
  }

  .conversation-open .main {
    padding: 0;
    background: var(--surface);
  }

  .conversation,
  .conversation.has-thread .channel-pane,
  .conversation > .channel-pane {
    min-height: calc(100vh - var(--staging-bar-height));
  }

  .conversation > .thread-pane {
    flex: 1;
    min-height: calc(100vh - var(--staging-bar-height));
  }

  .conversation-bar {
    position: sticky;
    top: var(--staging-bar-height);
    z-index: 8;
    flex: none;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 14px;
    height: 52px;
    margin: 0;
    padding: 0 20px;
    border-bottom: 1px solid var(--line);
    background: var(--surface);
  }

  .conversation-title {
    display: flex;
    flex: 0 1 auto;
    flex-wrap: wrap;
    align-items: center;
    align-content: flex-start;
    gap: 1px 9px;
    min-width: 96px;
    height: 100%;
    overflow: hidden;
  }

  .conversation-bar h1 {
    display: flex;
    flex: none;
    align-items: center;
    min-width: 0;
    max-width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: var(--sans);
    font-size: round(nearest, calc(16px * var(--font-scale)), 1px);
    font-weight: 700;
    font-style: normal;
    font-variant: normal;
    font-stretch: normal;
    --lh: 1.2;
    letter-spacing: 0;
    white-space: nowrap;
  }

  .conversation-title.has-avatar > .bot-avatar {
    flex: none;
  }

  /* Keep the name beside the 28px avatar and its 9px gap, even when it must shorten. */
  .conversation-title.has-avatar h1 {
    max-width: calc(100% - 37px);
  }

  .conversation-bar .channel-name {
    display: flex;
    align-items: center;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    padding: 3px 0;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    font-style: inherit;
    font-variant: inherit;
    font-stretch: inherit;
    color: inherit;
    white-space: nowrap;
  }

  /* Only the name can shorten; the details chevron always keeps its room. */
  .conversation-bar .channel-name-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .conversation-bar .channel-name .icon {
    flex: none;
    width: 12px;
    height: 12px;
    margin-left: 4px;
  }

  /* A subtitle that cannot fit wraps whole below the bar, out of the visible title row. */
  .conversation-subtitle {
    display: flex;
    flex: none;
    align-items: center;
    height: 100%;
    color: var(--muted);
    font-size: round(nearest, calc(12.5px * var(--font-scale)), 1px);
    white-space: nowrap;
  }

  /* The tabs take the room they need, up to the header minus the name's 96px floor and 14px
     gap. The office line and then the name give way first; beyond that the tabs scroll. */
  .conversation-bar .channel-tabs {
    flex: none;
    align-self: stretch;
    align-items: stretch;
    gap: 18px;
    max-width: calc(100% - 110px);
    margin: 0;
    border-bottom: 0;
  }

  .conversation-bar .channel-tabs button {
    min-height: 0;
    padding: 0 2px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--muted);
    font-size: round(nearest, calc(14px * var(--font-scale)), 1px);
    font-weight: 600;
    cursor: pointer;
  }

  .conversation-bar .channel-tabs button:hover {
    color: var(--heading);
  }

  .conversation-bar .channel-tabs button.active {
    color: var(--heading);
    border-bottom-color: var(--accent-ink);
  }

  .conversation-bar .channel-tabs button.active .icon {
    color: var(--accent-ink);
  }

  .conversation-bar .channel-tabs .conversation-tabs-add {
    align-self: center;
    width: 32px;
    height: 32px;
    min-width: 32px;
    margin: 0 2px;
  }

  .conversation-bar .conversation-tabs-add .icon {
    width: 18px;
    height: 18px;
  }

  .messages:has(> .message-row) {
    gap: 0;
  }

  .conversation .messages {
    padding: 8px 0 6px;
  }

  .message.message-row {
    position: relative;
    padding: 8px 24px 1px 70px;
    border: 0;
    border-radius: 0;
    background: none;
  }

  .message.message-row.grouped {
    padding-top: 1px;
  }

  .message.message-row:hover,
  .message.message-row:focus-within {
    background: var(--surface-2);
  }

  .message-gutter {
    position: absolute;
    top: 9px;
    left: 24px;
    width: 36px;
  }

  .message-row .message-avatar {
    display: flex;
  }

  .person-avatar {
    display: grid;
    flex: none;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-avatar);
    background: var(--person-colour);
    color: #ffffff;
    font-family: var(--sans);
    font-size: round(nearest, calc(14px * var(--font-scale)), 1px);
    font-weight: 700;
    font-style: normal;
    font-variant: normal;
    font-stretch: normal;
    --lh: 1;
  }

  .grouped .message-gutter {
    top: 2px;
  }

  .message-row .message-gutter .when {
    display: block;
    visibility: hidden;
    margin-left: -20px;
    font-size: round(nearest, calc(10px * var(--font-scale)), 1px);
    --lh: 1.8;
    text-align: right;
    white-space: nowrap;
  }

  .message-row:hover .message-gutter .when,
  .message-row:focus-within .message-gutter .when {
    visibility: visible;
  }

  .message-row .message-head {
    flex-wrap: nowrap;
    gap: 8px;
  }

  /* The sidebar's .who is a footer block; a message's name is plain text. */
  .message-row .who {
    display: inline;
    min-width: 0;
    overflow: hidden;
    padding: 0;
    border: 0;
    font-size: round(nearest, calc(15px * var(--font-scale)), 1px);
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .message-row .when {
    flex: none;
    margin-left: 0;
    font-size: round(nearest, calc(11.5px * var(--font-scale)), 1px);
    white-space: nowrap;
  }

  .message-row .edited {
    margin-left: 0;
  }

  .message-row .att-file {
    font-size: round(nearest, calc(14px * var(--font-scale)), 1px);
    --lh: 1.4;
  }

  .bot-tag {
    flex: none;
    align-self: center;
    padding: 0 5px;
    border: 1px solid var(--line-strong);
    border-radius: min(4px, var(--radius-control));
    background: var(--surface-2);
    color: var(--muted);
    font-size: round(nearest, calc(10px * var(--font-scale)), 1px);
    font-weight: 700;
    letter-spacing: 0.06em;
    --lh: 1.55;
  }

  /* Huddle's own notes keep a muted band and a small mark in the avatar gutter. */
  .message.message-row.bot:not(.from-bot) {
    margin: 6px 0;
    padding-top: 6px;
    padding-bottom: 6px;
    background: var(--surface-2);
    color: var(--muted);
    font-size: round(nearest, calc(13.5px * var(--font-scale)), 1px);
  }

  .message-row.bot:not(.from-bot) .who {
    color: var(--muted);
    font-size: round(nearest, calc(13.5px * var(--font-scale)), 1px);
  }

  .message-row.bot:not(.from-bot) .message-gutter {
    top: 6px;
  }

  .message-note-mark {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    margin-left: 6px;
    border-radius: 50%; /* true circle */
    background: var(--line-strong);
    color: var(--muted);
  }

  .message-note-mark .icon {
    width: 13px;
    height: 13px;
  }

  /* The toolbar only takes pointers while it is shown. */
  .message-row .message-actions {
    position: absolute;
    top: 2px;
    right: 24px;
    z-index: 2;
    flex-wrap: wrap;
    max-width: calc(100% - 48px);
    gap: 2px;
    margin: 0;
    padding: 2px 4px;
    border: 1px solid var(--line-strong);
    border-radius: min(8px, var(--radius-control));
    background: var(--surface);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    pointer-events: none;
  }

  .message-row:hover .message-actions,
  .message-row:focus-within .message-actions {
    pointer-events: auto;
  }

  @media (hover: hover) {
    /* Meet the row's top edge above the sticky bar; drop only enough to clear the scroll edge. */
    .message-row:hover .message-actions,
    .message-row:focus-within .message-actions {
      top: auto;
      bottom: 100%;
      transform: translateY(var(--actions-drop, 0px));
      z-index: 9;
    }
  }

  .message-row .message-actions .btn.link {
    margin: 0;
    padding: 2px 8px;
    font-size: round(nearest, calc(12.5px * var(--font-scale)), 1px);
    --lh: 1.4;
  }

  .conversation .messages > p.muted,
  .conversation .new-divider {
    margin: 8px 24px;
  }

  .conversation .composer-area {
    flex: none;
    z-index: 4;
    padding: 6px 20px 14px;
    background: var(--surface);
  }

  .conversation .composer-area .note.compact {
    margin-bottom: 4px;
    padding: 3px 10px;
    font-size: round(nearest, calc(12px * var(--font-scale)), 1px);
  }

  .conversation .composer {
    border-radius: min(10px, var(--radius));
  }

  .conversation .composer .textarea {
    padding: 9px 14px 4px;
    font-size: round(nearest, calc(15px * var(--font-scale)), 1px);
  }

  .conversation .composer-bar {
    padding: 0 6px 6px;
  }

  .conversation .composer-tool {
    min-height: 28px;
    padding: 2px 9px;
    font-size: round(nearest, calc(13px * var(--font-scale)), 1px);
  }

  .conversation .composer-bar .btn.primary {
    min-height: 28px;
    padding: 3px 16px;
    font-size: round(nearest, calc(13.5px * var(--font-scale)), 1px);
  }
  @media (min-width: 1180px) {
    .conversation.has-thread {
      gap: 0;
    }

    /* Let a thread dialog's scrim cover the channel bar, composer and shown toolbars. */
    .conversation > .thread-pane {
      z-index: 10;
    }

    .conversation .thread-pane {
      top: var(--staging-bar-height);
      max-height: calc(100vh - var(--staging-bar-height));
      padding: 0;
      border-width: 0 0 0 1px;
      border-radius: 0;
    }

    .conversation .thread-head {
      margin: 0;
      padding: 10px 16px;
    }
  }
}

/* Desktop navigation and conversations each scroll; your account stays in view. */
@media (min-width: 861px) {
  .sidebar {
    gap: 0;
    overflow: hidden;
    padding: 14px 10px 12px;
  }
  .sidebar:has(.overlay) { z-index: 30; }
  .sidebar .overlay { color: var(--text); }
  .sidebar .brand {
    flex: none;
    padding: 0 8px 8px;
    font-size: round(nearest, calc(20px * var(--font-scale)), 1px);
  }
  .sidebar .brand .logo-mark { width: 26px; height: 26px; }
  .sidebar .brand-sub,
  .sidebar .spacer { display: none; }
  .sidebar .side-search { flex: none; margin-bottom: 8px; }
  .sidebar .side-search input {
    padding: 6px 10px 6px 31px;
    border-radius: min(8px, var(--radius-control));
    font-size: round(nearest, calc(13.5px * var(--font-scale)), 1px);
  }
  .sidebar .side-search .icon { left: 10px; width: 15px; height: 15px; }
  .side-nav {
    flex: 0 1 auto;
    min-height: 0;
    max-height: 44vh;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--side-line) transparent;
  }
  .sidebar .nav { gap: 0; }
  .sidebar .nav a,
  .sidebar .nav-more > summary {
    min-height: 30px;
    padding: 0 10px;
    border-radius: min(6px, var(--radius-nav));
    font-size: round(nearest, calc(14px * var(--font-scale)), 1px);
  }
  .sidebar .label { flex: 1; gap: 9px; overflow: hidden; }
  .sidebar .nav-text,
  .sidebar .who-text,
  .side-conv-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .sidebar .nav .icon,
  .sidebar .nav-more .icon { width: 16px; height: 16px; }
  .sidebar .nav-more { margin-top: 4px; }
  .sidebar .nav-more[open] > .nav { margin: 0 0 0 10px; }
  .sidebar .nav-more > summary::after { flex: none; }
  .sidebar .count {
    flex: none;
    min-width: 18px;
    padding: 0 5px;
    font-size: round(nearest, calc(11px * var(--font-scale)), 1px);
    line-height: 18px;
  }
  .sidebar .count.assigned-danger { background: var(--danger); color: var(--danger-text); }
  .sidebar > .who { flex: none; padding-top: 6px; }
  .sidebar .who .nav a { min-height: 38px; }
  .sidebar .who-out {
    min-height: 28px;
    border-radius: min(6px, var(--radius-nav));
    font-size: round(nearest, calc(13px * var(--font-scale)), 1px);
  }
  .side-convs {
    flex: 1 1 0;
    min-height: 0;
    margin-top: 8px;
    padding: 8px 0 6px;
    overflow-x: hidden;
    overflow-y: auto;
    border-top: 1px solid var(--side-line);
    scrollbar-width: thin;
    scrollbar-color: var(--side-line) transparent;
  }
  .side-conv-section + .side-conv-section { margin-top: 6px; }
  .side-conv-heading,
  .side-conv-add,
  .side-conv {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 28px;
    padding: 0 8px 0 14px;
    border: 0;
    border-radius: min(6px, var(--radius-nav));
    background: none;
    color: var(--side-muted);
    font-size: round(nearest, calc(14px * var(--font-scale)), 1px);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
  }
  .side-conv-heading {
    gap: 6px;
    min-height: 26px;
    padding-left: 8px;
    font-size: round(nearest, calc(13px * var(--font-scale)), 1px);
    font-weight: 650;
  }
  .side-conv-name { flex: 1; }
  .side-conv-heading:hover,
  .side-conv-add:hover,
  .side-conv:hover { background: var(--side-hover); color: var(--side-text); }
  .side-conv.active { background: var(--side-active-bg); color: var(--side-active-text); font-weight: 650; }
  .side-conv.unread { color: var(--side-text); font-weight: 750; }
  .side-conv.active.unread { color: var(--side-active-text); }
  .side-conv-heading > .icon,
  .side-conv-add > .icon { flex: none; width: 14px; height: 14px; }
  .side-conv-chevron { display: flex; flex: none; }
  .side-conv-chevron .icon { width: 11px; height: 11px; }
  .side-conv-chevron.open .icon { transform: rotate(90deg); }
  .side-conv-glyph { display: grid; flex: none; place-items: center; width: 20px; height: 20px; }
  .side-conv-glyph .icon { width: 14px; height: 14px; }
  .side-conv .person-avatar { width: 20px; height: 20px; font-size: 8px; }
  .side-conv .bot-avatar { flex: none; }
  .side-conv-add { font-size: round(nearest, calc(13.5px * var(--font-scale)), 1px); }
  .side-conv-add > .icon { margin: 0 3px; }
  .side-conv-note { margin: 6px 8px; color: var(--side-muted); font-size: round(nearest, calc(13px * var(--font-scale)), 1px); }
}

@media (min-width: 1100px) {
  :root,
  :root[data-look="flat-panels"],
  :root[data-look="nova"],
  :root[data-look="classic"] { --side-width: 268px; }
}

/* Insurance Bot morning-post cards render in channels without bots/insurance.css. */
.insurance-check-day {
  margin-top: 16px;
}
.insurance-check-day-label {
  margin: 0 0 10px;
  font-size: calc(18px * var(--font-scale));
}
.insurance-check-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.insurance-check-link {
  display: grid;
  gap: 4px 12px;
  grid-template-columns: minmax(0, 1fr);
  padding: 12px 14px;
  border-radius: clamp(8px, var(--radius), 24px);
  border: 1px solid var(--line);
  background: var(--surface);
  text-decoration: none;
  color: inherit;
  min-height: 44px;
}
@media (min-width: 600px) {
  .insurance-check-link {
    grid-template-columns: 5rem minmax(0, 1.2fr) minmax(0, 1fr) auto;
    align-items: center;
  }
  .insurance-check-reason {
    grid-column: 1 / -1;
  }
}
.insurance-check-link .kind-full,
.insurance-check-link .kind-quick {
  justify-self: start;
  font-size: calc(12px * var(--font-scale));
  font-weight: 650;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.insurance-check-link .kind-full {
  color: var(--danger, #b42318);
}
.insurance-check-link .kind-quick {
  color: var(--warn, #b54708);
}
.insurance-check-meta,
.insurance-check-draft {
  color: var(--muted);
  font-size: calc(14px * var(--font-scale));
}
/* Media stays within the canvas, including when the page is in a narrow panel. */
.canvas-page { --canvas-page-x: 56px; --canvas-page-top: 32px; }
.canvas-cover-drawing { --canvas-cover-tooth: var(--surface); }
.canvas-cover { position: relative; margin-bottom: 16px; }
.canvas-cover.has-cover { margin: calc(-1 * var(--canvas-page-top)) calc(-1 * var(--canvas-page-x)) 24px; }
.canvas-cover-visual { height: 140px; overflow: hidden; border-radius: var(--radius) var(--radius) 0 0; background: var(--accent-soft); }
.canvas-cover-visual > svg, .canvas-cover-visual > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.has-cover .canvas-cover-trigger { position: absolute; right: 12px; bottom: 12px; opacity: 0; }
.has-cover:hover .canvas-cover-trigger, .has-cover:focus-within .canvas-cover-trigger { opacity: 1; }
.canvas-cover:not(.has-cover):not(:has(button)) { display: none; }
.canvas-cover-panel { position: absolute; top: 100%; left: 0; z-index: 22; width: min(400px, 100%); padding: 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); box-shadow: 0 12px 24px var(--scrim); display: flex; flex-wrap: wrap; gap: 8px; }
.has-cover .canvas-cover-panel { left: 12px; width: min(400px, calc(100% - 24px)); }
.canvas-cover-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; }
.canvas-cover-tiles button { padding: 0 0 6px; min-height: 60px; min-width: 0; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface); color: var(--text); font-size: calc(13px * var(--font-scale)); }
.canvas-cover-tiles button[aria-pressed="true"] { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
.canvas-cover-tiles svg { width: 100%; height: 44px; display: block; margin-bottom: 4px; }
.canvas-cover button { min-height: 36px; }
.canvas-picture { margin: 0; }
.canvas-picture img { display: block; max-width: 100%; max-height: 480px; height: auto; border-radius: var(--radius-sm); }
.canvas-picture figcaption { font-size: calc(13px * var(--font-scale)); color: var(--muted); margin-top: 8px; }
.canvas-picture figcaption .canvas-editable { min-height: 36px; }
.canvas-file { display: flex; align-items: center; gap: 12px; padding: 10px 14px; min-width: 0; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); }
.canvas-file-icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex-shrink: 0; border-radius: var(--radius-sm); color: var(--danger); background: var(--danger-soft); }
.canvas-file-icon .icon { width: 18px; height: 18px; }
.canvas-file-name { flex: 1; min-width: 0; }
.canvas-file strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: calc(14px * var(--font-scale)); color: var(--heading); }
.canvas-file small { display: block; color: var(--muted); font-size: calc(12px * var(--font-scale)); }
.canvas-file a { display: flex; align-items: center; justify-content: center; min-width: 36px; min-height: 36px; font-weight: 650; font-size: calc(14px * var(--font-scale)); }
.canvas-media-missing { padding: 16px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); color: var(--muted); }
.canvas-small-table { min-width: 0; max-width: 100%; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); overflow: hidden; }
.canvas-table-scroll { max-width: 100%; overflow-x: auto; }
.canvas-small-table table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: calc(14px * var(--font-scale)); }
.canvas-small-table table:has(textarea) { min-width: calc(var(--canvas-table-columns, 3) * 80px); }
.canvas-small-table th { background: var(--surface-2); color: var(--heading); font-weight: 650; }
.canvas-small-table th, .canvas-small-table td { border-bottom: 1px solid var(--line-strong); border-right: 1px solid var(--line-strong); padding: 8px 12px; text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.canvas-small-table tr:last-child td { border-bottom: 0; }
.canvas-small-table tr > :last-child { border-right: 0; }
.canvas-small-table :is(th, td):has(textarea) { padding: 0; }
.canvas-small-table textarea { width: 100%; min-width: 80px; min-height: 36px; border: 0; border-radius: 0; padding: 6px 10px; background: transparent; color: inherit; font: inherit; line-height: 1.5; display: block; resize: none; overflow: hidden; field-sizing: content; overflow-wrap: anywhere; white-space: pre-wrap; }
.canvas-small-table textarea:focus-visible { outline-offset: -2px; }
.canvas-table-toolbar { display: none; gap: 4px; flex-wrap: wrap; padding: 6px; border-top: 1px solid var(--line); }
.canvas-small-table:focus-within .canvas-table-toolbar, .canvas-small-table[data-toolbar-held] .canvas-table-toolbar { display: flex; }
.canvas-table-toolbar button { min-height: 36px; padding: 4px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); }
.canvas-table-note:not(:empty) { padding: 6px 12px; color: var(--muted); }
.canvas-columns { display: grid; grid-template-columns: repeat(var(--canvas-column-count), minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 16px 0; }
.canvas-column { min-width: 0; padding: 0 16px; }
.canvas-column + .canvas-column { border-left: 1px solid var(--line); }
.canvas-column > .canvas-blocks > .canvas-row:first-child { margin-top: 0; }
.canvas-column > .canvas-blocks > .canvas-row:last-child { margin-bottom: 0; }
.canvas-column .canvas-row h1, .canvas-column .canvas-row h2, .canvas-column .canvas-row h3 { margin-top: 0; }
/* Leave the previous row's Remove on the right clear, including while these tools are hidden. */
.canvas-column .canvas-block-tools { left: 0; right: auto; top: -32px; z-index: 3; background: var(--surface); border-radius: var(--radius-sm); opacity: 0; pointer-events: none; transition: opacity .15s ease .35s, pointer-events 0s linear .5s allow-discrete; }
.canvas-column .canvas-row:hover > .canvas-block-tools, .canvas-column .canvas-row:focus-within > .canvas-block-tools { opacity: 1; pointer-events: auto; transition-delay: 0s; }
.canvas-column .canvas-block-menu { left: auto; right: 0; max-width: min(360px, calc(100cqw - 32px)); }
@container (max-width: 559px) {
  .canvas-columns { grid-template-columns: minmax(0, 1fr); }
  .canvas-column + .canvas-column { border-left: 0; border-top: 1px solid var(--line); margin-top: 16px; padding-top: 16px; }
}
@media (max-width: 640px), (pointer: coarse) {
  .canvas-page { --canvas-page-x: 16px; --canvas-page-top: 20px; }
  .canvas-cover-visual { height: 100px; border-radius: 0; }
  .has-cover .canvas-cover-trigger { opacity: 1; }
  .canvas-cover button, .canvas-file a, .canvas-picture figcaption .canvas-editable, .canvas-small-table textarea, .canvas-table-toolbar button { min-height: 44px; }
  .canvas-file a { min-width: 44px; }
  .canvas-table-toolbar { display: flex; }
  .canvas-small-table textarea { font-size: calc(16px * var(--font-scale)); }
}

@media (max-width: 860px), (pointer: coarse) {
  .canvas-cover button, .canvas-file a, .canvas-picture figcaption .canvas-editable, .canvas-small-table textarea, .canvas-table-toolbar button { min-height: 44px; }
  .canvas-file a { min-width: 44px; }
  .canvas-table-toolbar { display: flex; }
}

@media (prefers-color-scheme: dark) {
  .canvas-cover-drawing { --canvas-cover-tooth: var(--heading); }
}

.canvas-row > .canvas-remove { display: flex; margin: 6px 0 0 auto; min-height: 36px; }
@media (max-width: 860px), (pointer: coarse) {
  .canvas-row > .canvas-remove { min-height: 44px; min-width: 44px; }
}


.canvas-mention { color: var(--accent-ink); background: var(--accent-soft); font-weight: 700; border-radius: 4px; padding: 0 2px; white-space: normal; overflow-wrap: anywhere; }
.canvas-people-menu { position: fixed; z-index: 110; box-sizing: border-box; overscroll-behavior: contain; }
.canvas-people-menu button { min-height: 38px; padding: 6px 8px; overflow-wrap: anywhere; }
.canvas-people-menu button > span { width: 16px; flex: 0 0 16px; color: var(--accent-ink); }
@media (max-width: 640px), (pointer: coarse) {
  .canvas-people-menu { right: auto; }
  .canvas-people-menu button { min-height: 44px; }
}

@media (max-width: 860px), (pointer: coarse) {
  .canvas-page-actions .btn, .canvas-history-dialog .btn, .canvas-note-link { min-height: 44px; min-width: 44px; }
}

/* List fields use the conversation shell, with their own content padding and scroller. */
.list-view { flex: 1; min-width: 0; padding: 16px 40px 40px; background: var(--bg); }
.list-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.list-head .grow { min-width: 0; }
.list-head h2 { margin: 0 0 2px; color: var(--heading); font: 650 calc(22px * var(--font-scale))/1.2 var(--sans); overflow-wrap: anywhere; }
.list-mark { display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px; background: var(--ok-soft); color: var(--ok); }
.list-meta, .list-footer { color: var(--muted); font-size: calc(13px * var(--font-scale)); }
.list-settings { padding: 8px; flex-shrink: 0; }
.list-toolbar { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.list-toolbar .btn { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; }
.list-toolbar .icon { width: 18px; height: 18px; }
.list-table { --done-width: 48px; --name-width: 220px; container-type: inline-size; width: 100%; max-width: 100%; scroll-padding-left: 0; margin: 0 0 8px; border-radius: var(--radius-sm); }
/* Reserve a 44px target plus cell padding and borders beside the pins. */
.list-table:has(th.list-done) { scroll-padding-left: var(--done-width); }
.list-table:has(th.list-name) { scroll-padding-left: min(calc(var(--done-width) + var(--name-width)), calc(100% - 72px)); }
.list-table:has(th.list-name.without-done) { scroll-padding-left: min(var(--name-width), calc(100% - 72px)); }
.list-table table.grid { --pinned-done-width: var(--done-width); --pinned-name-width: min(var(--name-width), calc(100cqi - var(--pinned-done-width) - 72px)); border-collapse: separate; border-spacing: 0; font-size: calc(14px * var(--font-scale)); }
.list-table table.grid:has(th.list-name.without-done) { --pinned-done-width: 0px; }
.list-table table.grid th, .list-table table.grid td { height: 46px; padding: 0 12px; background: var(--surface); }
.list-table table.grid th { height: 44px; background: var(--surface-2); color: var(--muted); font-size: calc(12px * var(--font-scale)); }
.list-column-heading { display: inline-flex; align-items: center; gap: 8px; }
.list-column-heading .icon, .list-done .icon { width: 18px; height: 18px; flex-shrink: 0; }
.list-table table.grid td { min-width: 108px; }
.list-table table.grid .list-type-number { min-width: 60px; text-align: right; }
.list-table table.grid .list-done { position: sticky; left: 0; z-index: 2; width: var(--done-width); min-width: var(--done-width); max-width: var(--done-width); padding: 0; text-align: center; }
.list-table table.grid .list-name { position: sticky; left: var(--done-width); z-index: 2; width: var(--pinned-name-width); min-width: var(--pinned-name-width); max-width: var(--pinned-name-width); border-right: 1px solid var(--line); }
.list-table table.grid .list-name.without-done { left: 0; }
/* Retyped Name fields and long headings must obey the same pinned-cell budget. */
.list-table table.grid .list-name > * { width: calc(var(--pinned-name-width) - 25px); min-width: 0; max-width: calc(var(--pinned-name-width) - 25px); }
/* Bound the content, leaving nested actions and disclosures in the layout. */
.list-table .list-name > span:not(.list-column-heading):not(.list-formatted), .list-table .list-name > time { display: block; white-space: normal; overflow-wrap: anywhere; }
.list-table .list-name .list-column-heading > span:not(.sr-only) { overflow: hidden; text-overflow: ellipsis; }
.list-table .list-name .list-cell-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-table .list-name .list-person, .list-table .list-name .list-choice { min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.list-table .list-name .list-avatar, .list-table .list-name .list-choice::before { flex-shrink: 0; }
.list-table .list-name .list-multi details { min-width: 0; max-width: 100%; }
.list-table .list-name .list-multi .check { white-space: normal; overflow-wrap: anywhere; }
.list-table .list-name .list-multi .check input { flex-shrink: 0; }
.list-table .list-name .list-formatted { flex-wrap: wrap; }
.list-table .list-name .list-formatted a { display: inline-flex; align-items: center; flex: 1 1 44px; min-height: 44px; }
.list-table .list-name .list-cell-edit { flex-basis: auto; }
.list-table .list-name .list-upload { max-width: 100%; white-space: normal; }
.list-table table.grid .row-actions { width: 64px; min-width: 64px; padding: 0 10px; }
.list-table .list-row-delete { width: 44px; height: 44px; padding: 8px; border: 0; background: var(--surface); }
.list-table .list-name .input.cell { width: 100%; font-weight: 650; color: var(--heading); }
.list-table table.grid .input.cell { min-width: 0; border: 1px solid transparent; background: transparent; padding: 6px 0; border-radius: 0; font-size: inherit; }
.list-table table.grid .input.cell:focus { outline: 2px solid var(--accent-ink); outline-offset: -2px; background: var(--surface); }
.list-table table.grid .is-done .list-name .input.cell { text-decoration: line-through; color: var(--muted); }
.list-check { position: relative; display: grid; place-items: center; min-width: 44px; min-height: 44px; cursor: pointer; }
.list-check input { position: absolute; inset: 0; margin: 0; width: 100%; height: 100%; opacity: 0; cursor: inherit; }
.list-check span { display: grid; place-items: center; width: 20px; height: 20px; border: 2px solid var(--line-strong); border-radius: 6px; color: var(--accent-text); font-weight: 650; }
.list-check span .icon { width: 16px; height: 16px; pointer-events: none; }
.list-check input:checked + span { background: var(--ok); border-color: var(--ok); color: var(--surface); }
.list-check:focus-within { outline: 2px solid var(--accent-ink); outline-offset: -3px; }
.list-picker { position: relative; display: flex; align-items: center; min-width: 100px; min-height: 44px; }
.list-picker-caret { display: none; }
.list-picker select { position: absolute; inset: 0; margin: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.list-picker:focus-within { outline: 2px solid var(--accent-ink); outline-offset: -2px; }
.list-choice { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: var(--radius-control); font-size: calc(12px * var(--font-scale)); font-weight: 650; }
.list-choice::before { content: ''; width: 7px; height: 7px; background: currentColor; border-radius: var(--radius-round); }
.colour-indigo { color: var(--accent-ink); background: var(--accent-soft); }
.colour-green { color: var(--ok); background: var(--ok-soft); }
.colour-amber { color: var(--warn-ink); background: var(--warn-soft); }
.colour-brick { color: var(--danger); background: var(--danger-soft); }
.colour-grey { color: var(--muted); background: var(--surface-2); }
.list-cell-value { width: 100%; min-width: 36px; min-height: 36px; padding: 0; border: 0; background: transparent; color: inherit; text-align: inherit; font: inherit; cursor: pointer; }
.list-cell-value:focus-visible { outline: 2px solid var(--accent-ink); }
.list-person { display: inline-flex; align-items: center; gap: 8px; }
.list-avatar { display: grid; place-items: center; width: 22px; height: 22px; border-radius: var(--radius-avatar); background: var(--accent-soft); color: var(--accent-ink); font-size: calc(10px * var(--font-scale)); font-weight: 650; }
.list-avatar.colour-green { background: var(--ok-soft); color: var(--ok); }
.list-avatar.colour-amber { background: var(--warn-soft); color: var(--warn-ink); }
.list-date { font-size: calc(12px * var(--font-scale)); font-weight: 650; color: var(--muted); }
.list-date.late { color: var(--danger); }
.list-date.soon { color: var(--warn-ink); }
.list-formatted { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.list-formatted a { flex: 1; min-width: 0; max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.list-cell-edit { flex: 0 0 36px; background: transparent; border: 0; color: var(--muted); font: inherit; cursor: pointer; min-width: 36px; min-height: 36px; }

.list-stars { display: inline-flex; color: var(--warn-ink); }
.list-stars .icon { width: 14px; height: 14px; }
.list-stars .is-filled .icon { fill: currentColor; }
.list-multi { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 180px; }
.list-multi summary { cursor: pointer; padding: 10px; min-height: 44px; }
.list-multi details > div { display: grid; gap: 6px; padding: 8px; }
.list-multi .check { min-height: 44px; }
.list-files { display: flex; flex-wrap: wrap; gap: 6px; min-width: 210px; padding: 4px 0; }
.list-file { display: inline-flex; align-items: center; min-width: 0; max-width: 100%; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); }
.list-file a { display: inline-flex; align-items: center; flex: 1; min-width: 0; padding: 10px; min-height: 44px; }
.list-file a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-file .btn { flex-shrink: 0; min-width: 36px; min-height: 36px; border: 0; padding: 4px 10px; }
/* Bordered wrappers need native overlays to include both 1px borders. */
.list-upload { position: relative; scroll-margin-block: 20px; }
.list-upload input { position: absolute; inset: -1px; margin: 0; width: calc(100% + 2px); height: calc(100% + 2px); opacity: 0; cursor: pointer; scroll-margin-block: 20px; }
.list-upload:focus-within { outline: 2px solid var(--accent-ink); }
.list-fields { padding: 0; list-style: none; }
.list-fields li { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.list-fields li > .icon { color: var(--muted); flex-shrink: 0; }
.list-fields .grow { min-width: 0; text-align: left; overflow-wrap: anywhere; }
.list-fields small { display: block; color: var(--muted); font-weight: 400; }
.field-move { min-width: 40px; min-height: 40px; padding: 6px; }
.choice-fields { border: 0; padding: 0; margin: 16px 0; }
.choice-field { display: flex; gap: 6px; margin: 8px 0; }
.choice-field .input { min-width: 0; flex: 1; }
.choice-field .select { max-width: 110px; }
@media (max-width: 860px), (pointer: coarse) {
  .list-view { padding: 16px 16px 32px; }
  .list-table { --done-width: 56px; --name-width: 216px; }
  .list-head h2 { font-size: calc(22px * var(--font-scale)); }
  .list-view .btn, .list-cell-edit, .list-cell-value, .field-move { min-height: 44px; min-width: 44px; }
  .list-view .input, .list-view select, .choice-field .input, .choice-field select { font-size: max(16px, calc(15px * var(--font-scale))); }
  .list-table table.grid .input.cell { min-height: 44px; }
  .list-formatted a { display: inline-flex; align-items: center; min-height: 44px; }
  .choice-fields .input, .choice-fields .select { min-height: 44px; }
  .list-fields .btn { min-height: 44px; min-width: 44px; }
  .list-table table.grid th, .list-table table.grid td { height: 46px; }
}

@media (min-width: 861px) and (hover: hover) and (pointer: fine) {
  .list-table tr:not(:hover):not(:focus-within) .list-row-delete { opacity: 0; }
  .list-formatted:not(:hover):not(:focus-within) .list-cell-edit:not([data-empty]) { opacity: 0; }
}

/* The approved core fields fit a desktop; additional fields retain natural local overflow. */
@media (min-width: 861px) and (pointer: fine) {
  .list-table-core { --name-width: calc(210px * var(--font-scale)); }
  .list-table-core table.grid { table-layout: fixed; width: 100%; min-width: calc(900px * var(--font-scale)); }
  .list-table-core table.grid th, .list-table-core table.grid td { min-width: 0; }
  .list-table-core col.list-done { width: 48px; }
  .list-table-core col.list-name { width: var(--pinned-name-width); }
  .list-table-core col.list-type-person { width: calc(100px * var(--font-scale)); }
  .list-table-core col.list-type-date { width: calc(116px * var(--font-scale)); }
  .list-table-core col.list-type-status { width: calc(106px * var(--font-scale)); }
  .list-table-core col.list-type-number { width: calc(60px * var(--font-scale)); }
  .list-table-core col.list-dollars { width: calc(82px * var(--font-scale)); }
  .list-table-core table.grid .row-actions { width: 48px; min-width: 48px; padding: 0 2px; }
  .list-table-core table.grid th.list-type-person, .list-table-core table.grid th.list-type-number:not(.list-dollars) { padding-inline: 6px; }
  .list-table-core th.list-type-person .list-column-heading, .list-table-core th.list-type-number:not(.list-dollars) .list-column-heading { gap: 4px; }
  .list-table-core .list-column-heading { display: flex; min-width: 0; }
  .list-table-core .list-column-heading > span:not(.sr-only) { overflow: hidden; text-overflow: ellipsis; }
  .list-table-core td > span { display: block; overflow: hidden; text-overflow: ellipsis; }
  .list-table-core .list-picker { min-width: 0; overflow: hidden; }
  .list-table-core .list-person { max-width: 100%; overflow: hidden; }
  .list-table-core .list-avatar { flex-shrink: 0; }
  .list-table-core .list-cell-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* Shared list views keep tools compact and chips inside their own phone scroller. */
.list-controls { position: relative; }
.list-toolbar { justify-content: flex-start; align-items: center; gap: 8px; flex-wrap: wrap; }
.list-view-kind { display: inline-flex; align-items: center; }
.list-view-kind button { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; }
.list-view .is-active { background: var(--accent-soft); color: var(--accent-ink); border-color: var(--note-line); }
.list-view-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; min-width: 0; }
.list-view-chips { display: flex; align-items: center; gap: 8px; overflow-x: auto; min-width: 0; flex: 1; padding: 2px; }
.list-view-chips .btn { white-space: nowrap; flex-shrink: 0; min-height: 36px; display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; }
.list-save-view { border-style: dashed; color: var(--muted); background: transparent; }
.list-view-dot { width: 8px; height: 8px; border-radius: var(--radius-round); background: var(--warn); }
.list-view-actions { display: flex; gap: 8px; flex-shrink: 0; }
.list-view-actions .btn { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 12px; }
.list-view-actions .list-export { width: 36px; min-width: 36px; padding: 6px; justify-content: center; border-radius: var(--radius-control); }
.list-view-actions .icon { width: 18px; height: 18px; }
.list-view-summaries { display: flex; flex-wrap: wrap; gap: 8px; }
.list-view-summaries:not(:empty) { margin-bottom: 12px; }
.list-summary.btn { display: inline-flex; align-items: center; gap: 12px; background: var(--surface-2); border-color: var(--surface-2); padding: 5px 12px; min-height: 32px; font-size: calc(12px * var(--font-scale)); }
.list-summary .icon { width: 16px; height: 16px; color: var(--muted); }
.list-sort-arrow { color: var(--accent-ink); }
.list-table table.grid .list-group th { position: static; padding: 0; background: var(--surface-2); text-align: left; }
.list-group .btn { display: flex; align-items: center; justify-content: flex-start; gap: 10px; border: 0; width: 100%; border-radius: 0; background: transparent; text-align: left; min-height: 44px; }
.list-view-form fieldset { min-width: 0; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 12px; margin: 0 0 16px; }
.list-view-form legend { font-weight: 650; }
.list-filter-values { display: grid; gap: 6px; }
.list-filter-values .check { min-height: 36px; }
.list-view-rename { display: flex; gap: 8px; flex-wrap: wrap; }
.list-view-rename .input { min-width: 0; flex: 1; }
.list-manage-view { padding: 12px 0; border-bottom: 1px solid var(--line); }
.list-manage-views { border: 0; padding: 0; min-width: 0; }
.list-field-visible { min-height: 44px; min-width: 44px; justify-content: center; }
@media (max-width: 860px), (pointer: coarse) {
  .list-view .btn, .list-view-kind button, .list-view-form .btn, .list-manage-view .btn, .list-filter-values .check { min-height: 44px; min-width: 44px; }
  .list-view-form .input, .list-view-form .select, .list-view-rename .input { font-size: max(16px, calc(15px * var(--font-scale))); }
}
@media (max-width: 600px) {
  .list-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) 44px 44px 44px; gap: 8px; }
  .list-view-kind { grid-column: 1 / -1; justify-self: start; }
  .list-chart-control { grid-column: 1 / -1; width: 100%; min-width: 0; }
  .list-chart-control .select { min-width: 0; width: 100%; }
  .list-chart-type { grid-column: 1 / -1; justify-self: start; flex-wrap: wrap; }
  .list-tool.btn { padding: 10px; justify-content: center; font-size: 0; gap: 0; }
  .list-tool > span { display: none; }
  .list-sort.btn { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; justify-content: center; padding: 8px; }
  .list-view-bar { flex-wrap: wrap; }
  .list-view-chips { flex-basis: 100%; }
  .list-view-actions { position: absolute; top: 3px; right: 0; }
  .list-view-actions .btn { width: 44px; padding: 10px; justify-content: center; }
  .list-new-item > span { display: none; }
  .list-view-rename { flex-direction: column; }
}

/* Cards keep their horizontal overflow in the board, including on narrow phones. */
.list-board-wrap { min-width: 0; max-width: 100%; }
.list-board-hint { margin: 0 2px 12px; color: var(--muted); font-size: calc(13px * var(--font-scale)); }
.list-board { display: flex; gap: 12px; width: 100%; max-width: 100%; overflow-x: auto; align-items: stretch; padding: 0 2px 8px; }
.list-board-column { flex: 1 0 calc((100% - 24px) / 3); min-width: 262px; border-radius: 12px; background: var(--surface-2); padding: 12px; min-height: 520px; }
.list-board-column-head { margin-bottom: 10px; }
.list-board-column-head h3 { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--heading); font: 650 calc(14px * var(--font-scale))/1.5 var(--sans); overflow-wrap: anywhere; }
.list-board-dot { width: 9px; height: 9px; flex-shrink: 0; border-radius: var(--radius-round); background: currentColor; }
.list-board-count { padding: 0 7px; border-radius: var(--radius-control); background: var(--surface); color: var(--heading); font-size: calc(12px * var(--font-scale)); }
.list-board-totals, .list-board-values { color: var(--muted); font-size: calc(13px * var(--font-scale)); }
.list-board-card { position: relative; padding: 8px 12px 10px; margin-bottom: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); min-width: 0; }
.list-board-card[draggable="true"] { cursor: grab; }
.list-board-card:last-child { margin-bottom: 0; }
.list-board-title { display: flex; align-items: center; gap: 6px; min-width: 0; }
.list-board-title .list-check { flex-shrink: 0; min-width: 22px; width: 22px; }
.list-board-name { flex: 1; min-width: 0; padding: 4px 0; min-height: 36px; border: 0; text-align: left; background: transparent; color: var(--heading); font: 650 calc(14px * var(--font-scale))/1.4 var(--sans); overflow-wrap: anywhere; cursor: pointer; }
.list-board-card.is-done .list-board-name { color: var(--muted); text-decoration: line-through; }
.list-board-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 4px 0; font-size: calc(14px * var(--font-scale)); }
.list-board-meta .list-person { min-width: 0; overflow-wrap: anywhere; }
.list-board-meta .list-avatar { flex-shrink: 0; }
.list-board-meta .list-date { flex-shrink: 0; }
.list-board-move { position: relative; display: inline-flex; align-items: center; min-width: 80px; min-height: 36px; margin-top: 4px; padding: 4px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-control); color: var(--muted); font-size: calc(12px * var(--font-scale)); cursor: pointer; }
.list-board-move select { position: absolute; inset: -1px; margin: 0; width: calc(100% + 2px); height: calc(100% + 2px); opacity: 0; cursor: pointer; }
.list-board-move:focus-within, .list-board-name:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
@media (max-width: 860px), (pointer: coarse) {
  .list-board-name, .list-board-move { min-height: 44px; min-width: 44px; }
  .list-board-title .list-check { width: 44px; min-width: 44px; }
  .list-board-move select { font-size: max(16px, calc(15px * var(--font-scale))); }
}
@media (max-width: 600px) {
  .list-board-column { flex: 0 0 262px; min-height: 520px; }
  .list-board-card { padding: 8px 12px 10px; }
  .list-board-title { gap: 0; margin-left: -6px; }
  .list-view-kind .icon { display: none; }
}

.list-chart-card { padding: 16px 18px 20px; min-width: 0; }
.list-chart-head h3 { margin: 0 0 4px; color: var(--heading); font: 650 calc(18px * var(--font-scale))/1.35 var(--sans); }
.list-chart-sub { margin: 0 0 16px; color: var(--muted); font-size: calc(13px * var(--font-scale)); }
.list-chart-control { display: inline-flex; align-items: center; min-height: 44px; }
.list-chart-control .select { min-width: 9rem; }
.list-chart-type button { min-width: 44px; min-height: 44px; }

.canvas-embed { margin: 12px 0; min-width: 0; }
.canvas-embed-head h3 { margin: 0 0 8px; color: var(--heading); font: 650 calc(17px * var(--font-scale))/1.35 var(--sans); }
.canvas-embed-table-wrap { overflow-x: auto; max-width: 100%; }
.canvas-embed-table { width: 100%; border-collapse: collapse; font-size: calc(14px * var(--font-scale)); }
.canvas-embed-table th, .canvas-embed-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.canvas-embed-table th { color: var(--muted); font-weight: 600; }
.canvas-embed-summary { margin: 10px 0 0; }
.canvas-embed-foot { margin-top: 12px; }
.canvas-embed-foot .button-row { display: flex; flex-wrap: wrap; gap: 8px; }
.canvas-embed-foot .btn, .canvas-embed-picker button { min-height: 44px; }
.canvas-embed-pick-list button.row { width: 100%; min-height: 44px; text-align: left; }
.list-chart-swatch { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 2px; vertical-align: middle; }
.list-chart-swatch.colour-indigo { background: var(--accent-ink); }
.list-chart-swatch.colour-green { background: var(--ok); }
.list-chart-swatch.colour-amber { background: var(--warn-ink); }
.list-chart-swatch.colour-brick { background: var(--danger); }
.list-chart-swatch.colour-grey { background: var(--muted); }
.list-chart .bot-svg .bar.colour-indigo { fill: var(--accent-ink); stroke: var(--accent-ink); }
.list-chart .bot-svg .bar.colour-green { fill: var(--ok); stroke: var(--ok); }
.list-chart .bot-svg .bar.colour-amber { fill: var(--warn-ink); stroke: var(--warn-ink); }
.list-chart .bot-svg .bar.colour-brick { fill: var(--danger); stroke: var(--danger); }
.list-chart .bot-svg .bar.colour-grey { fill: var(--muted); stroke: var(--muted); }
.list-donut-slice.colour-indigo { fill: none; stroke: var(--accent-ink); }
.list-donut-slice.colour-green { fill: none; stroke: var(--ok); }
.list-donut-slice.colour-amber { fill: none; stroke: var(--warn-ink); }
.list-donut-slice.colour-brick { fill: none; stroke: var(--danger); }
.list-donut-slice.colour-grey { fill: none; stroke: var(--muted); }
.list-chart .bot-svg .track { fill: var(--surface-2); }
.list-chart-donut .list-chart-svg { max-width: 220px; margin: 0 auto; display: block; }

/* The item keeps its list tab; fields and the thread stack on a phone. */
.list-item-page { flex: 1; min-width: 0; padding: 12px 40px 40px; background: var(--bg); }
.list-item-back { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; color: var(--muted); font-size: calc(14px * var(--font-scale)); font-weight: 600; text-decoration: none; }
.list-item-back .icon { width: 16px; height: 16px; transform: rotate(180deg); }
.list-item-head { padding: 8px 0 14px; border-bottom: 1px solid var(--line); }
.list-item-title { display: flex; align-items: center; gap: 0; }
.list-item-title > .list-check { flex: 0 0 44px; }
.list-item-title h2 { flex: 1; min-width: 0; margin: 0; color: var(--heading); font: 650 calc(26px * var(--font-scale))/1.2 var(--sans); }
.list-item-title h2 .input { min-height: 40px; min-width: 0; width: 100%; border-color: transparent; padding: 0; background: transparent; font: inherit; color: inherit; }
.list-item-title h2 .input:focus { border-color: var(--accent-ink); }
.list-item-chips { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding-left: 44px; font-size: calc(13px * var(--font-scale)); }
.list-item-chips > * { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.list-item-columns { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 36px; }
.list-item-columns > *, .list-item-main > * { min-width: 0; }
.list-item-page h3 { margin: 22px 0 8px; color: var(--heading); font: 650 calc(16px * var(--font-scale))/1.4 var(--sans); }
.list-item-page h3 small { margin-left: 8px; color: var(--muted); font: 600 calc(12px * var(--font-scale))/1.4 var(--sans); }
.list-item-field { display: grid; grid-template-columns: minmax(100px, .36fr) minmax(0, 1fr); align-items: center; gap: 12px; padding: 5px 0; box-shadow: inset 0 -1px 0 var(--line); }
.list-item-label { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--muted); font-size: calc(14px * var(--font-scale)); overflow-wrap: anywhere; }
.list-item-label .icon { flex: 0 0 18px; width: 18px; height: 18px; }
.list-item-control { min-width: 0; overflow-wrap: anywhere; }
.list-item-control > .input.cell, .list-item-control > .list-cell-value, .list-item-control > .list-picker, .list-item-control > .list-formatted { width: 100%; min-width: 0; min-height: 44px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); padding: 8px 13px; font: inherit; text-align: left; }
.list-item-control .list-picker select { inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); }
.list-item-control .list-picker { padding-right: 28px; }
.list-item-control .list-picker-caret { display: flex; position: absolute; right: 10px; pointer-events: none; }
.list-item-control .list-picker-caret .icon { width: 16px; height: 16px; transform: rotate(90deg); }
.list-item-control .list-picker > .list-choice { padding: 0; background: transparent; color: var(--text); font: inherit; }
.list-item-control .list-picker > .list-choice::before { display: none; }
.list-item-control .list-picker .list-person .list-avatar { display: none; }
.list-item-control .list-formatted a { max-width: none; min-height: 36px; display: inline-flex; align-items: center; }
.list-item-control .list-formatted { padding: 0 8px 0 13px; }
.list-item-control .list-cell-value .list-date { color: var(--text); font: inherit; }
.list-item-control .list-files, .list-item-control .list-multi { min-width: 0; max-width: 100%; }
.list-item-open { display: flex; align-items: center; gap: 4px; min-height: 36px; color: var(--accent-ink); font-size: calc(12px * var(--font-scale)); overflow-wrap: anywhere; text-decoration: none; }
.list-item-open > .icon { width: 14px; height: 14px; flex-shrink: 0; }
.list-item-open:focus-visible, .list-item-back:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: -2px; }
.list-subtasks ul, .list-comment-thread { list-style: none; padding: 0; margin: 0; }
.list-subtasks li { position: relative; display: flex; align-items: center; gap: 4px; min-width: 0; padding: 4px 0; border-bottom: 1px solid var(--line); }
.list-subtasks li > .list-check { flex: 0 0 36px; min-width: 36px; min-height: 36px; }
.list-subtask-content { flex: 1; min-width: 0; }
.list-subtask-title { display: block; width: 100%; min-height: 36px; padding: 4px 0; border: 0; background: transparent; color: var(--heading); font: 600 calc(14px * var(--font-scale))/1.5 var(--sans); text-align: left; overflow-wrap: anywhere; cursor: pointer; }
.list-subtasks .is-done .list-subtask-title { text-decoration: line-through; color: var(--muted); }
.list-subtask-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; font-size: calc(13px * var(--font-scale)); }
.list-subtask-actions { position: relative; flex-shrink: 0; }
.list-subtask-actions summary { display: grid; place-items: center; width: 36px; min-height: 36px; cursor: pointer; list-style: none; color: var(--muted); }
.list-subtask-actions summary::-webkit-details-marker { display: none; }
.list-subtask-actions > div { position: absolute; z-index: 4; right: 0; width: 180px; padding: 8px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); }
.list-subtask-actions > div .btn { display: block; width: 100%; margin: 4px 0; }
.list-subtasks > .btn { margin-top: 10px; }
.list-comment-thread li { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.list-comment-avatar { flex: 0 0 32px; width: 32px; height: 32px; }
.list-comment-content { flex: 1; min-width: 0; }
.list-comment-meta { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; }
.list-comment-meta strong { overflow-wrap: anywhere; color: var(--heading); font-size: calc(14px * var(--font-scale)); }
.list-comment-meta time { color: var(--muted); font-size: calc(12px * var(--font-scale)); }
.list-comment-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.list-comment-actions { display: flex; gap: 8px; }
.list-comment-actions .btn { min-width: 36px; min-height: 36px; padding: 2px 0; color: var(--muted); font-size: calc(12px * var(--font-scale)); }
.list-comment-form { position: relative; margin-top: 12px; min-width: 0; }
.list-comment-editor { min-height: 88px; width: 100%; padding: 10px 13px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.list-comment-editor:empty::before { content: attr(data-placeholder); color: var(--muted); pointer-events: none; }
.list-comment-editor:focus { outline: 2px solid var(--accent-ink); outline-offset: -1px; }
.list-comment-people { position: absolute; z-index: 5; width: min(100%, 320px); max-height: 270px; overflow-y: auto; padding: 8px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); }
.list-comment-people button { display: block; width: 100%; min-height: 40px; padding: 8px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text); text-align: left; font: inherit; }
.list-comment-people button[aria-selected="true"] { color: var(--accent-ink); background: var(--accent-soft); }
@media (min-width: 1100px) {
  .list-subtask-content { display: flex; align-items: center; gap: 8px; }
  .list-subtask-title { flex: 1; min-width: 0; }
  .list-subtask-meta { flex: 0 1 auto; min-width: 0; max-width: 50%; gap: 8px; }
}
@media (max-width: 1000px) {
  .list-item-columns { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}
@media (max-width: 860px), (pointer: coarse) {
  .list-item-page { padding: 12px 16px 24px; }
  .list-item-back, .list-item-open, .list-item-page button, .list-item-page summary, .list-subtasks li > .list-check, .list-item-page .list-comment-actions .btn, .list-item-page .list-cell-edit { min-width: 44px; min-height: 44px; }
  .list-subtasks li > .list-check { flex-basis: 44px; }
  .list-item-title h2 { font-size: calc(26px * var(--font-scale)); }
  .list-item-title h2 .input { min-height: 44px; }
  .list-subtask-dialog .input, .list-subtask-dialog .select, .list-subtask-dialog .btn { min-height: 44px; font-size: max(16px, calc(15px * var(--font-scale))); }
  .list-item-page input, .list-item-page select, .list-item-page .list-comment-editor { font-size: max(16px, calc(15px * var(--font-scale))); }
  .list-item-control .list-formatted a { min-height: 44px; min-width: 44px; }
  .list-item-field { grid-template-columns: minmax(90px, .6fr) minmax(0, 1fr); gap: 10px; }
  .list-item-page h3 { margin-top: 24px; }
  .list-comment-editor { min-height: 88px; }
}
/* Flat Panels. */

:root[data-look="flat-panels"] h1,
:root[data-look="flat-panels"] h2,
:root[data-look="flat-panels"] h3 {
  letter-spacing: 0;
}

/* Cards stop floating: a flat panel with a hairline, a ruled header, no shadow. */
:root[data-look="flat-panels"] .card {
  border-color: var(--line-strong);
  box-shadow: none;
}

:root[data-look="flat-panels"] .card-head {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

:root[data-look="flat-panels"] .card-head + .list,
:root[data-look="flat-panels"] .card-head + .segmented {
  margin-top: 0;
}

/* Filter tabs lose the pill track: plain tabs on a ruled line, the chosen one underlined. */
:root[data-look="flat-panels"] .segmented {
  gap: 0;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  background: transparent;
}

:root[data-look="flat-panels"] .segmented button {
  min-height: 40px;
  margin-bottom: -1px;
  padding: 0 14px;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--muted);
  /* Text and hover fills follow the page's palette immediately, including mode changes. */
  transition-property: border-color;
}

@media (hover: hover) {
  :root[data-look="flat-panels"] .segmented button:hover {
    background: var(--surface-2);
    color: var(--heading);
  }
}

:root[data-look="flat-panels"] .segmented button[aria-pressed="true"] {
  border-bottom-color: var(--accent-ink);
  background: transparent;
  color: var(--heading);
}

:root[data-look="flat-panels"] .segmented .seg-n,
:root[data-look="flat-panels"] .segmented .pill-count {
  background: var(--surface-2);
  color: var(--text);
}

:root[data-look="flat-panels"] .segmented button[aria-pressed="true"] .seg-n,
:root[data-look="flat-panels"] .segmented button[aria-pressed="true"] .pill-count {
  background: var(--accent-soft);
  color: var(--accent-ink);
}

:root[data-look="flat-panels"] .segmented .seg-n.danger,
:root[data-look="flat-panels"] .segmented button[aria-pressed="true"] .seg-n.danger {
  background: var(--danger);
  color: var(--danger-text);
}

/* Phones: two tabs a row, as the pill version lays them out, each with its own rule under it. */
@media (max-width: 860px) {
  :root[data-look="flat-panels"] .segmented:not(.channel-tabs .segmented) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-bottom: 0;
  }

  :root[data-look="flat-panels"] .segmented:not(.channel-tabs .segmented) button {
    margin-bottom: 0;
    padding: 0 12px;
    border-bottom: 1px solid var(--line-strong);
  }

  :root[data-look="flat-panels"] .segmented:not(.channel-tabs .segmented) button[aria-pressed="true"] {
    border-bottom: 2px solid var(--accent-ink);
  }
}

/* The page you are on, marked with a bar on its edge as well as the tint. */
@media (min-width: 861px) {
  :root[data-look="flat-panels"] .sidebar .nav a.active {
    box-shadow: inset 2px 0 0 var(--accent-ink);
  }
}
/* Short treatment plan answers. Their full plain answer stays in the stored message. */
.bot-answer-heading {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  color: var(--heading);
}
.bot-answer-signal {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 6px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control);
  font-weight: 700;
  line-height: 1.25;
  color: var(--muted);
  background: var(--surface-2);
}
.bot-answer-signal .icon { flex: 0 0 16px; width: 16px; height: 16px; }
.bot-answer-signal.signal-check { border-color: var(--warn); background: var(--warn-soft); color: var(--warn-ink); }
.bot-answer-signal.signal-ready { border-color: var(--ok); background: var(--ok-soft); color: var(--ok); }
.bot-answer-line { margin: 10px 0; font-weight: 600; color: var(--heading); }
.bot-answer-verified { margin: 4px 0; color: var(--muted); font-size: .9em; }
.answer-error .bot-answer-line { font-weight: 400; }
.bot-answer-detail { margin: 0 0 10px; }
.bot-answer-counts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 12px 0 8px; }
.bot-answer-counts > div { padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--muted); }
.bot-answer-counts strong { display: block; font-size: 28px; line-height: 1.2; color: var(--heading); }
.bot-answer-counts .bot-answer-change { border-color: var(--warn); background: var(--warn-soft); color: var(--warn-ink); }
.bot-answer-change strong { color: inherit; }
.bot-answer-alert { color: var(--danger); font-weight: 700; margin: 10px 0; }
.bot-answer-note { display: flex; align-items: center; gap: 10px; margin: 10px 0; color: var(--muted); }
.bot-answer-note .icon { flex-shrink: 0; color: var(--ok); }
.bot-answer-open { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 44px; margin-top: 10px; text-align: left; }
.prompt-list .bot-card-buttons { display: grid; grid-template-columns: minmax(0, 1fr); }
.prompt-list .bot-pick-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 44px; min-height: 56px; text-align: left; white-space: normal; }
.bot-pick-row .icon { flex-shrink: 0; color: var(--muted); }
.bot-answer-outcome { margin: 10px 0; }
.bot-answer-outcome.outcome-danger { color: var(--danger); font-weight: 600; }
.bot-answer-outcome.outcome-warn { color: var(--warn-ink); }

.bot-handoff-heading { margin-bottom: 12px; }
.bot-handoff-patient { display: block; margin: 0; color: var(--heading); }
.bot-handoff-room { margin: -2px 0 8px; color: var(--muted); overflow-wrap: anywhere; }
.bot-handoff-chart { margin: 0 0 12px; color: var(--muted); }
.bot-handoff-count,
.bot-handoff-status { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; color: var(--heading); }
.bot-handoff-reassigned { margin: 0; color: var(--text); }
.bot-handoff-count .icon,
.bot-handoff-status .icon { flex: 0 0 22px; width: 22px; height: 22px; color: var(--accent); }
.bot-handoff-status .icon { color: var(--ok); }
.bot-handoff-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.bot-handoff-actions .handoff-open { width: auto; min-width: 148px; min-height: 44px; margin: 0; justify-content: center; }
.bot-handoff-actions .handoff-done { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 104px; min-height: 44px; }
.bot-handoff-actions .handoff-done .icon { width: 18px; height: 18px; }
.bot-handoff-hint { margin: 8px 0 0; }
.bot-handoff-status.is-done { margin: 0; color: var(--ok); }
.bot-handoff .handoff-take { min-height: 44px; }
.bot-handoff .handoff-see { min-height: 44px; margin: 0; padding-left: 0; justify-content: flex-start; text-align: left; }
.bot-handoff-note-failure {
  padding: 12px 14px;
  border: 1px solid var(--danger);
  border-inline-start-width: 5px;
  font-weight: 400;
}
.bot-handoff-note-failure p { margin: 0 0 12px; }
.bot-handoff-note-failure p:first-child { font-weight: 600; }
.bot-handoff-note-failure .handoff-take {
  width: auto;
  min-width: 120px;
  border-color: var(--danger);
  color: var(--danger);
}

@media (max-width: 860px) {
  .bot-handoff-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  .bot-handoff-actions .handoff-open,
  .bot-handoff-actions .handoff-done,
  .bot-handoff .handoff-take { width: 100%; }
}
@media (max-width: 430px) {
  .bot-handoff-heading .bot-handoff-patient { flex-basis: 100%; }
}
.bot-handoff-note-failure .handoff-take { width: auto; }

/* Open Dental Submit for Huddle landing and guard (#/od/tx). */
.od-landing { max-width: 560px; display: grid; justify-items: start; gap: 8px; }
.od-landing h2 { margin: 6px 0 0; font-size: 20px; }
.od-landing p { margin: 0; }
.od-landing .btn { margin-top: 10px; min-width: 44px; min-height: 44px; }
.od-landing-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-round);
  background: var(--accent-soft);
  color: var(--accent-ink);
}
.od-landing-icon.is-warn { background: var(--warn-soft); color: var(--warn-ink); }
.od-landing-icon .icon { width: 24px; height: 24px; }
.od-spinner {
  display: block;
  width: 24px;
  height: 24px;
  border: 3px solid var(--note-line);
  border-top-color: var(--accent-ink);
  border-radius: 50%; /* true circle */
  animation: od-spin 0.9s linear infinite;
}
@keyframes od-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .od-spinner { animation: none; }
}

/* Patient questions sheet (Submit for Huddle, t3). */
.od-sheet .btn,
.od-reopen {
  min-width: 44px;
  min-height: 44px;
}
.od-intro { margin: 6px 0 14px; color: var(--text); }
.od-where { margin: 10px 0 0; }
.od-who { margin: -6px 0 12px; }
.od-q .field { margin-bottom: 14px; }
.od-q .textarea { min-height: 68px; }
.od-recap {
  margin: 18px 0 0;
  padding: 16px;
  border: 1px solid var(--note-line);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent-soft) 55%, var(--surface));
}
.od-recap h3 { margin: 0; font-size: 1.0625rem; font-weight: 650; color: var(--heading); }
.od-recap p { margin: 4px 0 0; }
.od-recap-note { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 8px; font-size: .8125rem; line-height: 1.4; color: var(--accent-ink); }
.od-recap-note .icon { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.od-recap-field { display: block; margin: 10px 0 0; }
.od-recap-label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.od-recap .od-recap-text { display: block; width: 100%; min-height: 120px; max-height: 50vh; font-size: 16px; line-height: 1.5; resize: vertical; field-sizing: content; }
.od-recap-count { margin-top: 6px; }
.od-recap-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.od-recap-actions .icon { width: 18px; height: 18px; flex: none; }
.od-recap-words { margin: 8px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
/* The recap box's voice recorder (plan recap, t9): Record first, Stop, play back, Record again, Delete. */
.od-recap :where(.rs-bigrec, .rs-recorded, .rs-actions) .icon { width: 18px; height: 18px; flex: none; }
.rs-bigrec { display: grid; justify-items: center; gap: 6px; padding: 14px 0 6px; text-align: center; }
.rs-bigrec p { margin: 0; }
.rs-rec-big { position: relative; display: grid; place-items: center; width: 96px; height: 96px; margin-bottom: 6px; padding: 0; border: 0; border-radius: 50%; /* true circle */ background: var(--accent); color: var(--accent-text); box-shadow: 0 6px 18px rgba(0, 0, 0, .22); cursor: pointer; }
.od-recap .rs-rec-big .icon { width: 40px; height: 40px; }
.rs-rec-big:disabled { opacity: .5; cursor: default; }
.rs-rec-big.stop { background: var(--danger); color: var(--danger-text); }
.rs-ring { position: absolute; inset: -9px; border: 3px solid var(--danger); border-radius: 50%; /* true circle */ opacity: .45; animation: rs-ring 1.4s ease-out infinite; }
.rs-bigrec-title { font-size: 17px; font-weight: 650; color: var(--heading); }
.rs-bigtime { font-size: 34px; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--heading); }
.rs-bigrec .rs-wave { width: 100%; margin-top: 8px; }
.rs-wave { display: flex; align-items: center; gap: 2px; height: 44px; min-width: 0; }
.rs-wave span { flex: 1; min-width: 2px; border-radius: 2px; background: var(--line-strong); }
.rs-wave span.on { background: var(--accent-ink); }
.rs-wave.live span { background: var(--danger); transform-origin: center; animation: rs-bars 900ms ease-in-out infinite alternate; }
.rs-recorded { display: grid; gap: 12px; margin-top: 12px; }
.rs-recorded > * { margin: 0; }
.rs-got { display: flex; align-items: center; gap: 6px; font-weight: 650; color: var(--ok); }
.rs-player { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 8px 12px 8px 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.rs-player .rs-wave { flex: 1; height: 36px; }
.od-sheet .rs-play { width: 44px; padding: 0; border-radius: 50%; /* true circle */ }
.rs-player-time { flex: none; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }
.rs-words { display: block; }
.rs-words .rs-hint { display: block; font-size: 13px; font-weight: 400; }
.rs-recorded .od-recap-text { margin-top: 6px; }
.rs-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rs-problem { display: grid; justify-items: start; gap: 8px; margin-top: 8px; }
.rs-problem p { margin: 0; }
@keyframes rs-ring { from { transform: scale(.92); opacity: .55; } to { transform: scale(1.18); opacity: 0; } }
@keyframes rs-bars { from { transform: scaleY(.45); } to { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .rs-wave.live span, .rs-ring { animation: none; } }
.plan-recap-hint { margin-top: 0; }
.patient-forms-card .patient-forms-rows { margin: 12px 0 16px; }
.patient-forms-card .switch-row { min-width: 0; }
.patient-forms-card .switch-word { min-width: 2.2em; color: var(--heading); font-weight: 650; }
.patient-forms-address { display: grid; gap: 8px; margin: 0 0 16px; }
.patient-forms-address .field { margin: 0; }
.patient-forms-address .btn { justify-self: start; min-height: 44px; }
.patient-forms-address p { margin: 0; }
.patient-forms-lock { display: flex; align-items: flex-start; gap: 8px; overflow-wrap: anywhere; }
.patient-forms-lock .icon { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.forms-library-card h3 { margin: 0 0 4px; }
.forms-library-office + .forms-library-office { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); }
.forms-library-name { margin: 0 0 4px; color: var(--heading); }
.forms-library-count { margin: 0 0 12px; }
.forms-library-group { margin: 0 0 16px; }
.forms-library-group h4 { margin: 0 0 6px; font-size: .9375rem; font-weight: 650; color: var(--heading); }
.forms-library-number { margin-left: 4px; font-weight: 500; color: var(--muted); }
.forms-library-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 28px; }
.forms-tick { display: flex; align-items: flex-start; gap: 12px; min-width: 0; min-height: 44px; padding: 10px 0; overflow-wrap: anywhere; cursor: pointer; font-size: round(nearest, calc(14px * var(--font-scale)), 1px); line-height: 1.35; }
.forms-tick input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--accent); }
.forms-library-office[aria-busy=true] .forms-tick { cursor: progress; }
@media (min-width: 760px) {
  .forms-library-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .forms-tick { min-height: 36px; padding: 6px 0; }
}
/* Patient forms: Send forms, the words to copy, and the request rows (a chip per form: icon and words, no side stripes). */
.forms-rows { margin: 0; padding: 0; display: grid; gap: 0; }
.forms-row { padding: 14px 0; border-top: 1px solid var(--line); min-width: 0; }
.forms-row:first-child { border-top: 0; padding-top: 4px; }
.forms-row-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.forms-row-name { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.forms-row-state { margin: 4px 0 8px; }
.forms-items { margin: 0; padding: 0; display: grid; gap: 6px; }
.forms-items li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; }
.forms-item-name { min-width: 0; overflow-wrap: anywhere; }
.forms-item-times { font-size: .8125rem; }
.forms-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 8px; border-radius: var(--radius-control); font-size: .8125rem; font-weight: 650; background: var(--accent-soft); color: var(--accent-ink); }
.forms-chip .icon { width: 14px; height: 14px; }
.forms-chip.done, .forms-chip.filing-filed { background: var(--ok-soft); color: var(--ok); }
.forms-chip.filing-attention { background: var(--warn-soft); color: var(--warn-ink); }
.forms-filing-why { flex-basis: 100%; margin: 0; font-size: .8125rem; color: var(--warn-ink); }
.forms-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.forms-actions .btn { min-height: 44px; }
.forms-words { width: 100%; font-size: 16px; line-height: 1.5; resize: vertical; }
/* Send forms, how it goes (t11): three cards, the picked one marked with a check and words (never colour alone); the square code sheet. */
.forms-how { margin: 12px 0 0; padding: 0; border: 0; min-width: 0; }
.forms-how-cards { display: grid; gap: 8px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.forms-how-card { position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-control); cursor: pointer; background: var(--surface, transparent); }
.forms-how-card.picked { border-color: var(--accent); background: var(--accent-soft); }
.forms-how-card input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.forms-how-card:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.forms-how-title { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; color: var(--heading); }
.forms-how-title .icon { width: 18px; height: 18px; flex: none; }
.forms-how-words { font-size: .8125rem; color: var(--muted); overflow-wrap: anywhere; }
.forms-how-picked { display: inline-flex; align-items: center; gap: 4px; font-size: .8125rem; font-weight: 650; color: var(--accent-ink); }
.forms-how-picked .icon { width: 14px; height: 14px; }
.forms-texting-note { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 12px; padding: 8px 12px; border-radius: var(--radius-control); background: var(--accent-soft); color: var(--accent-ink); font-size: .875rem; }
.forms-texting-note .icon { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.forms-texting-note.error { background: var(--warn-soft); color: var(--warn-ink); }
.forms-code-body { display: grid; gap: 16px; grid-template-columns: minmax(0, auto) minmax(0, 1fr); align-items: start; }
.forms-code-frame { padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-control); background: #fff; width: max-content; max-width: 100%; }
.forms-code { display: block; width: 260px; height: 260px; max-width: 100%; image-rendering: pixelated; image-rendering: crisp-edges; background: #fff; }
.forms-link-text { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .875rem; overflow-wrap: anywhere; resize: none; }
@media (max-width: 640px) {
  .forms-how-cards { grid-template-columns: minmax(0, 1fr); }
  .forms-code-body { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .forms-code-side { width: 100%; }
  .forms-code { width: 100%; height: auto; aspect-ratio: 1; }
  .forms-code-frame { width: 100%; max-width: 300px; }
}
.forms-fine { display: flex; align-items: flex-start; gap: 8px; margin: 8px 0 0; font-size: .875rem; }
.forms-fine .icon { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.forms-search { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; }
.forms-search .field { margin: 0; }
.forms-search .btn { min-height: 44px; }
.forms-found { margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.forms-found-row { width: 100%; min-height: 44px; padding: 8px 12px; text-align: left; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface, transparent); color: inherit; font: inherit; cursor: pointer; overflow-wrap: anywhere; }
.forms-who { margin: 0 0 8px; overflow-wrap: anywhere; }
.forms-h { margin: 12px 0 4px; font-size: 1rem; }
.forms-group { margin: 0 0 8px; padding: 0; border: 0; min-width: 0; }
.forms-group legend { padding: 0; margin: 8px 0 2px; font-size: .9375rem; font-weight: 650; color: var(--heading); }
.od-room-field { margin-bottom: 14px; }
.od-room-select { min-height: 44px; font-size: 16px; line-height: 1.25; }
.od-room-readonly { margin: -4px 0 12px; color: var(--muted); }
.od-readonly { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.dialog.od-sheet {
  display: flex;
  flex-direction: column;
  max-width: 560px;
  max-height: 84vh;
  max-height: 84dvh;
  overflow: hidden;
}
.od-sheet-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.od-question-text { margin: 0 0 4px; color: var(--muted); font-size: .875rem; }
.od-answer-group { margin: 0 0 16px; padding-left: 12px; border-left: 2px solid var(--line-strong); }
.od-answer-group:last-child { margin-bottom: 0; }
.od-sheet-actions {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin: 8px -20px -20px;
  padding: 12px 20px;
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.od-reopen { margin-top: 10px; }
@media (min-width: 861px) {
  .od-sheet-actions { margin: 8px -24px -24px; padding: 12px 24px; }
}
@media (max-width: 860px) {
  .dialog.od-sheet { max-height: 100%; }
  .od-sheet-actions .btn { flex: 1 1 0; }
  .od-sheet-actions.has-error { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .od-sheet-actions.has-error .btn { width: 100%; flex: none; }
  .od-sheet-actions.has-error .od-discard { grid-column: 1 / -1; grid-row: 2; }
  .od-sheet-actions.has-error .btn.primary { grid-column: 2; grid-row: 1; }
}
.txplanner-settings .od-q-editor {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.txplanner-settings .od-q-editor h4 { margin: 0 0 8px; }
.txplanner-settings .od-q-editor > p { margin: 0 0 12px; }
.txplanner-settings .od-q-row {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: start;
  margin-bottom: 8px;
}
.txplanner-settings .od-q-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  min-height: 26px;
  margin-top: 9px;
  border-radius: 4px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-weight: 700;
}
.txplanner-settings .od-question-text {
  box-sizing: border-box;
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 9px 12px;
  line-height: 1.5;
  resize: none;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.txplanner-settings .od-q-actions { display: flex; gap: 8px; }
.txplanner-settings .od-q-actions .btn,
.txplanner-settings .od-q-editor-actions .btn { min-height: 44px; flex: 0 0 auto; }
.txplanner-settings .od-q-editor-actions { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 860px) {
  .txplanner-settings .od-q-row { grid-template-columns: 26px minmax(0, 1fr); }
  .txplanner-settings .od-q-actions { grid-column: 2; display: grid; grid-template-columns: minmax(0, 1fr); }
  .txplanner-settings .od-q-actions .btn { width: 100%; }
}

/* Bot switches: shared keyboard control and the approved grouped rows. */
.switch-control {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  min-width: 44px;
  min-height: 44px;
  padding: 8px 12px;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--text);
  font: inherit;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}
.switch-control:focus-visible {
  position: relative;
  z-index: 1;
  outline: 3px solid var(--accent);
  outline-offset: -3px;
  border-radius: 0;
}
.switch-control.is-disabled { cursor: not-allowed; }
.switch-control.is-busy { cursor: progress; }
.switch-control.is-busy .switch-thumb { opacity: 0.6; }
.switch-track {
  --switch-track-off: color-mix(in srgb, var(--muted) 78%, var(--surface));
  position: relative;
  display: block;
  flex: 0 0 50px;
  width: 50px;
  height: 30px;
  border: 1px solid var(--switch-track-off);
  border-radius: var(--radius-control);
  background: var(--switch-track-off);
  transition: background-color 140ms ease, border-color 140ms ease;
}
.switch-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-round);
  background: var(--accent-text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  transition: transform 140ms ease;
}
.switch-control.is-on .switch-track {
  border-color: var(--accent);
  background: var(--accent);
}
.switch-control.is-on .switch-thumb { transform: translateX(20px); }
.switch-control.is-disabled .switch-track { opacity: 0.55; }
.switch-copy { display: block; flex: 1 1 12em; min-width: 0; }
.switch-text { display: grid; gap: 2px; min-width: 0; }
.switch-label { color: var(--heading); font-weight: 600; }
.switch-hint { color: var(--muted); font-size: round(nearest, calc(13px * var(--font-scale)), 1px); line-height: 1.4; }
.switch-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.switch-row { min-height: 56px; padding: 8px 16px; border-radius: 0; }
.switch-card > .switch-row + .switch-row,
.switch-list-item + .switch-list-item,
.setup-office + .setup-office,
.setup-office > .switch-row + .switch-row,
.bot-office-switch-row + .bot-office-switch-row {
  border-top: 1px solid var(--line);
}
.switch-list { margin: 0 0 14px; padding: 0; list-style: none; }
.switch-list-item { min-width: 0; }
.switch-list-item .switch-control { min-height: 56px; border-radius: 0; }
.switch-list-item .switch-copy { padding-block: 2px; }
.switch-master-card { margin: 0 0 20px; }
.switch-master-control { min-height: 72px; padding: 12px 16px; }
.switch-master-control .switch-label { font-size: round(nearest, calc(17px * var(--font-scale)), 1px); font-weight: 650; }
.switch-master-card.is-off { border-color: var(--danger); background: var(--danger-soft); }
.switch-master-card.is-off .switch-track {
  --switch-track-off: color-mix(in srgb, var(--muted) 80%, var(--danger-soft));
}
.switch-master-card.is-off .switch-label,
.switch-master-card.is-off .switch-hint { color: var(--danger); }
@media (hover: hover) {
  .switch-master-card.is-off .switch-control:hover { background: var(--danger-soft); }
}
.setup-list-card { margin-bottom: 16px; }
.setup-office-controls { margin: 0 0 16px; }
.setup-section-title { margin: 18px 0 4px; color: var(--heading); font-size: round(nearest, calc(17px * var(--font-scale)), 1px); }
.setup-section-note { margin: 0 0 10px; }
.setup-office + .setup-office { border-top: 1px solid var(--line); }
.setup-office > .switch-row + .switch-row { border-top-color: var(--line); }
.setup-office .switch-subrow {
  position: relative;
  padding-left: 44px;
  background: color-mix(in srgb, var(--surface-2) 55%, var(--surface));
}
.setup-office .switch-subrow::before {
  position: absolute;
  top: 0;
  left: 22px;
  width: 14px;
  height: 50%;
  border-bottom: 2px solid var(--line-strong);
  border-bottom-left-radius: min(4px, var(--radius-control));
  border-left: 2px solid var(--line-strong);
  content: '';
}
.setup-office:not(.is-on) .switch-subrow .switch-text { opacity: 0.75; }
.bot-switch-group { margin: 14px 0 18px; }
.bot-switch-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin: 0 0 6px; font-size: round(nearest, calc(15px * var(--font-scale)), 1px); }
.bot-office-switch-row { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 0 16px; min-height: 56px; padding: 4px 12px 4px 16px; }
.bot-office-copy { flex: 1 1 12em; min-width: 0; }
.bot-office-name { display: block; min-width: 0; padding-block: 6px; color: var(--heading); }
.bot-office-switches { display: flex; align-items: center; gap: 8px; }
.bot-grid-switch { justify-content: flex-start; gap: 8px; width: auto; min-width: 86px; padding: 2px 4px; font-size: round(nearest, calc(13px * var(--font-scale)), 1px); font-weight: 600; }
.bot-grid-switch .switch-copy { flex: 0 0 auto; }
.bot-grid-switch .switch-track { flex-basis: 42px; width: 42px; height: 24px; }
.bot-grid-switch .switch-thumb { top: 2px; left: 2px; width: 18px; height: 18px; }
.bot-grid-switch.is-on .switch-thumb { transform: translateX(18px); }
.bot-switch-reason { display: block; padding: 0 0 6px; }
.bot-switch-section { margin-bottom: 20px; }
.job-switch-row { margin: 0 0 12px; }
.job-switch-row > .switch-control { min-height: 56px; border: 1px solid var(--line); background: var(--surface); }
@media (hover: hover) {
  .switch-control:not(.is-disabled):not(.is-busy):hover { background: var(--surface-2); }
}
@media (prefers-reduced-motion: reduce) {
  .switch-track,
  .switch-thumb { transition: none; }
}
@media (max-width: 600px) {
  .bot-office-switch-row { align-items: flex-start; gap: 0; padding-right: 8px; }
  .bot-office-copy { flex-basis: 100%; }
  .bot-office-switches { width: 100%; justify-content: flex-start; }
}
@media (forced-colors: active) {
  .switch-control:not(.is-on) .switch-track {
    border-color: ButtonText;
    background: Canvas;
  }
  .switch-control.is-on .switch-track {
    border-color: Highlight;
    background: Highlight;
  }
  .switch-control:not(.is-on) .switch-thumb {
    background: ButtonText;
    box-shadow: none;
  }
  .switch-control.is-on .switch-thumb {
    background: HighlightText;
    box-shadow: none;
  }
  .switch-control.is-disabled:not(.is-on) .switch-track {
    border-color: GrayText;
    opacity: 1;
  }
  .switch-control.is-disabled.is-on .switch-track {
    border-color: GrayText;
    background: GrayText;
    opacity: 1;
  }
  .switch-control.is-disabled:not(.is-on) .switch-thumb { background: GrayText; }
  .switch-control.is-disabled.is-on .switch-thumb { background: Canvas; }
  .switch-control:focus-visible { outline-color: Highlight; }
}

/* New message: one recipient search, with the directory's compact bot rows. */
.direct-dialog > .field { margin-bottom: 12px; }
.direct-results { padding: 4px 0; }
.direct-result-group + .direct-result-group { border-top: 1px solid var(--line); }
.direct-result-group h3 {
  margin: 0;
  padding: 10px 16px 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
}
.direct-result-group .list { margin: 0; }
.direct-bot-row,
.direct-person-row { min-width: 0; padding: 8px 16px; }
.direct-bot-row { gap: 10px; }
.direct-bot-copy .title,
.direct-bot-copy .meta {
  display: block;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: break-word;
  word-break: normal;
}
.direct-bot-copy .title { color: var(--heading); }
.direct-bot-copy .meta { margin-top: 2px; color: var(--muted); font-size: 12px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.direct-bot-pinned { flex: none; color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; }

/* Staff group conversations: recipient chips, group headers and the members sheet. */
.direct-to-control {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 4px 8px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.direct-to-control:focus-within { border-color: var(--accent); }
.direct-to-control > .input {
  flex: 1 1 120px;
  width: auto;
  min-width: 100px;
  padding: 7px 4px;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.direct-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 36px;
  padding: 2px 4px 2px 10px;
  border-radius: var(--radius-control);
  background: var(--surface-2);
  color: var(--heading);
  font-size: round(nearest, calc(13px * var(--font-scale)), 1px);
  font-weight: 600;
}
.direct-chip button {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: var(--radius-round);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 19px;
  cursor: pointer;
}
.direct-chip button:hover { background: var(--line); color: var(--heading); }
.group-list-avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-avatar);
  background: var(--accent-soft);
  color: var(--accent-ink);
}
.group-list-avatar .icon { width: 20px; height: 20px; }
.group-avatar-stack { display: inline-flex; flex: none; align-items: center; padding-left: 7px; }
.group-avatar-stack .person-avatar {
  width: 28px;
  height: 28px;
  margin-left: -7px;
  border: 2px solid var(--surface);
  font-size: 9px;
}
.group-members-title { display: flex; align-items: center; gap: 10px; margin: 4px 0 12px; }
.group-members-list { margin: 0; }
.group-members-list .row { gap: 10px; }
.group-members-list .person-avatar { width: 36px; height: 36px; font-size: 12px; }
.group-members-list .title,
.group-members-list .meta { display: block; }
.group-members-dialog .actions { gap: 8px; }
.group-members-actions { display: grid; gap: 12px; margin-top: 14px; }
.group-members-actions .field { margin-bottom: 10px; }
.group-members-actions .add-member { margin-top: 0; }
.group-leave-confirm { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); }
.group-leave-confirm p { margin: 0 0 8px; }
.group-system-line {
  align-self: center;
  max-width: min(90%, 34em);
  margin: 10px 0;
  padding: 5px 12px;
  border-radius: var(--radius-control);
  background: var(--surface-2);
  color: var(--muted);
  font-size: round(nearest, calc(13px * var(--font-scale)), 1px);
  text-align: center;
}
.conversation .conversation-head .grow:has(> .group-avatar-stack) {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 8px;
}
.conversation .conversation-head .grow > .group-avatar-stack { grid-row: 1 / span 2; }

@media (max-width: 860px), (pointer: coarse) {
  .direct-to-control { min-height: 48px; }
  .direct-to-control > .input { min-height: 40px; font-size: max(16px, calc(15px * var(--font-scale))); }
  .direct-chip { min-height: 44px; }
  .direct-chip button { width: 44px; height: 44px; }
  .direct-person-row,
  .direct-bot-row,
  .group-members-list .row,
  .group-members-dialog .btn,
  .group-members-dialog .select { min-height: 44px; }
  .group-members-dialog .input,
  .group-members-dialog .select { font-size: max(16px, calc(15px * var(--font-scale))); }
  .group-members-dialog .btn { padding-block: 8px; }
  .group-list-avatar { width: 32px; height: 32px; }
}

.suggest[aria-label="People and bots"] button { display: flex; align-items: center; gap: 8px; }
.suggest[aria-label="People and bots"] button .bot-avatar { flex: none; }

/* Staff bot directory (#/bots/directory, variant B) */
.bot-discover-page { display: grid; gap: 12px; max-width: 640px; }
.bot-discover-search { position: sticky; top: var(--staging-bar-height); z-index: 2; display: grid; gap: 10px; }
.bot-discover-search .field { width: 100%; min-width: 0; margin-bottom: 0; }
.bot-discover-search input.grow { display: block; width: 100%; min-width: 0; box-sizing: border-box; }
.bot-discover-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bot-discover-chip {
  min-height: 36px;
  padding: 6px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control);
  background: var(--surface-2);
  color: var(--heading);
  font-size: 13px;
  font-weight: 600;
}
.bot-discover-suggestion {
  width: 100%;
  min-height: 64px;
  justify-content: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.bot-discover-list { margin: 0; padding: 0; }
.bot-discover-list > li { list-style: none; }
.bot-discover-list > li + li { border-top: 1px solid var(--line); }
.bot-discover-item { display: flex; min-width: 0; align-items: center; gap: 8px; padding: 4px 8px; }
.bot-discover-row {
  width: auto;
  min-width: 0;
  flex: 1;
  min-height: 56px;
  padding: 12px 8px;
  align-items: center;
  gap: 12px;
  text-align: left;
  border: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
.bot-discover-row .grow { min-width: 0; }
.bot-discover-row.bot-discover-suggestion { min-height: 64px; border-radius: var(--radius-sm); background: var(--note-soft, var(--surface-2)); }
.bot-discover-row.bot-discover-suggestion:hover { background: var(--surface-2); }
.bot-discover-row .title { display: block; font-weight: 650; color: var(--heading); overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: break-word; word-break: normal; }
.bot-discover-row .meta { display: block; color: var(--muted); font-size: 13px; line-height: 1.35; white-space: normal; overflow-wrap: break-word; word-break: normal; }
.bot-discover-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; min-width: 0; }
.bot-discover-tag {
  display: inline-block; max-width: 100%; padding: 2px 8px; border-radius: var(--radius-control);
  background: var(--surface-2); color: var(--muted); font-size: 11px; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bot-discover-section { list-style: none; }
.bot-discover-heading { margin: 12px 8px 4px; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.bot-discover-pin-toggle { flex: none; min-width: 72px; }
.bot-discover-limit { flex: none; width: 82px; text-align: center; }

@media (max-width: 600px) {
  .bot-discover-search.card.pad { padding-inline: 14px; }
  .bot-discover-item { flex-wrap: wrap; }
  .bot-discover-row { flex: 1 1 calc(100% - 100px); }
  .bot-discover-pin-toggle { white-space: nowrap; }
  .bot-discover-limit { flex: 0 0 100%; width: auto; padding: 0 8px 4px; text-align: right; }
}

/* Home's three phone filters stay together, including when the flat-panel theme restyles tabs. */
@media (max-width: 860px) {
  :root .page-bar > .segmented.home-tabs,
  :root[data-look="flat-panels"] .page-bar > .segmented.home-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-bar > .segmented.home-tabs button,
  :root[data-look="flat-panels"] .page-bar > .segmented.home-tabs button {
    min-height: 44px;
    min-width: 0;
    gap: 3px;
    padding-inline: 3px;
    font-size: round(nearest, calc(12px * var(--font-scale)), 1px);
    white-space: normal;
  }
}
.forms-notice-card h3 { margin: 0 0 4px; }
.forms-notice-office + .forms-notice-office { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); }
.forms-notice-text { width: 100%; min-height: 240px; font-size: 16px; line-height: 1.5; resize: vertical; }
.forms-spanish { display: flex; align-items: flex-start; gap: 8px; margin: 8px 0 0; }
.forms-spanish .icon { width: 16px; height: 16px; flex: none; margin-top: 3px; }
.forms-bundle { display: block; margin: 0 0 12px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 14px; }
.forms-bundle .forms-tick { padding: 0; min-height: 44px; font-weight: 650; }
.forms-bundle small { display: block; margin: 0 0 0 32px; color: var(--muted); line-height: 1.4; }
.forms-bundle .forms-bundle-note { margin: 8px 0 0 32px; }

/* Patient forms, Review (ticket t6): changed details with old and new values, typed insurance, "Waiting to file". */
.forms-row-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.forms-row-buttons .btn { min-height: 44px; }
.forms-details-state { display: flex; align-items: flex-start; gap: 8px; flex-basis: 100%; margin: 6px 0 0; font-size: .8125rem; }
.forms-details-state .icon { width: 14px; height: 14px; flex: none; margin-top: 2px; }
.forms-review-who { margin: 0 0 8px; overflow-wrap: anywhere; }
.forms-review-intro { margin: 0 0 10px; font-size: .875rem; }
.forms-review-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.forms-review-card { margin: 0 0 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; min-width: 0; }
.forms-review-list .forms-review-card { margin: 0; }
.forms-review-card h4 { margin: 0 0 6px; font-size: 1rem; color: var(--heading); }
.forms-review-values { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px 20px; margin: 0 0 10px; }
.forms-review-values > div, .forms-review-lines > div { min-width: 0; }
.forms-review-values dt { font-size: .6875rem; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.forms-review-values dd { margin: 2px 0 0; overflow-wrap: anywhere; }
.forms-review-new { font-weight: 650; color: var(--heading); }
.forms-review-lines { margin: 0 0 8px; display: grid; gap: 0; }
.forms-review-lines > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 16px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.forms-review-lines > div:last-child { border-bottom: 0; }
.forms-review-lines dt { color: var(--muted); }
.forms-review-lines dd { margin: 0; font-weight: 650; text-align: right; overflow-wrap: anywhere; white-space: pre-line; min-width: 0; }
.forms-review-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
.forms-review-actions .btn { min-height: 44px; }
.forms-review-left { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; }
.forms-review-left .icon { width: 16px; height: 16px; flex: none; }
.forms-review .forms-actions { justify-content: flex-end; border-top: 1px solid var(--line); padding-top: 14px; }
/* Patient forms, health entries (ticket t7): Review's information rows and Setup's health-list matching. */
.forms-review-info .forms-fine { display: flex; align-items: flex-start; gap: 8px; margin: 4px 0 0; }
.forms-review-info .forms-fine .icon { width: 14px; height: 14px; flex: none; margin-top: 3px; }
.forms-health-card h3 { margin: 0 0 4px; }
.forms-health-office + .forms-health-office { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); }
.forms-health-count { margin: 0 0 12px; font-weight: 650; color: var(--heading); }
.forms-health-office > .check-hint { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 12px; }
.forms-health-office > .check-hint .icon { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.forms-health-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; }
.forms-health-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.forms-health-row:last-child { border-bottom: 0; }
.forms-health-main { grid-column: 1 / -1; min-width: 0; }
.forms-health-box { margin: 0; font-weight: 650; color: var(--heading); overflow-wrap: anywhere; }
.forms-health-value { margin: 2px 0 0; font-size: .875rem; overflow-wrap: anywhere; }
.forms-health-value [data-value] { color: var(--heading); }
.forms-health-row .btn { min-height: 44px; }
.forms-chip.health-needs { background: var(--warn-soft); color: var(--warn-ink); }
.forms-chip.health-picked, .forms-chip.health-exact { background: var(--ok-soft); color: var(--ok); }
.forms-health-picker { grid-column: 1 / -1; display: grid; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; min-width: 0; }
.forms-health-picker .input { width: 100%; min-height: 44px; font-size: 16px; }
.forms-health-options { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.forms-health-options .btn { width: 100%; min-height: 44px; justify-content: flex-start; text-align: left; overflow-wrap: anywhere; }
.forms-health-picker .forms-actions { margin-top: 0; }
@media (min-width: 720px) {
  .forms-health-row { grid-template-columns: minmax(0, 1fr) auto auto; }
  .forms-health-main { grid-column: auto; }
}
/* The tags on a request's row (ticket t8): an icon and words, never colour alone; they wrap, so many of them never scroll a phone sideways. */
.forms-tags { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px 8px; min-width: 0; }
.forms-chip.forms-tag { background: var(--danger-soft); color: var(--danger); max-width: 100%; overflow-wrap: anywhere; }
/* A "Check" chip: a typed answer that may be a serious one but says "no" or "stopped"; the same shape as a tag, in the warning colours. */
.forms-chip.forms-check { background: var(--warn-soft); color: var(--warn-ink); max-width: 100%; overflow-wrap: anywhere; }
.forms-serious-card h3 { margin: 0 0 4px; }
.forms-serious-office + .forms-serious-office { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); }
.forms-serious-chips { margin: 12px 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.forms-serious-chip, .forms-serious-back { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 4px; max-width: 100%; padding: 4px 4px 4px 14px; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface-2, var(--accent-soft)); min-width: 0; }
.forms-serious-name { font-weight: 650; color: var(--heading); overflow-wrap: anywhere; }
.forms-serious-remove { min-height: 44px; min-width: 44px; padding: 0; justify-content: center; border-radius: var(--radius-control); }
.forms-serious-ask { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.forms-serious-chip .btn, .forms-serious-back .btn { min-height: 44px; }
.forms-serious-tie-words { grid-column: 1 / -1; padding: 0 10px 6px 0; overflow-wrap: anywhere; }
.forms-serious-add { display: grid; gap: 10px; min-width: 0; }
.forms-serious-field { display: grid; gap: 4px; min-width: 0; }
.forms-serious-field .input { width: 100%; min-height: 44px; font-size: 16px; }
.forms-serious-tie summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 650; }
.forms-serious-tie fieldset { border: 0; padding: 0; margin: 8px 0; min-width: 0; }
.insurance-typed .insurance-typed-rows { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.insurance-typed-row { padding: 10px 0; border-top: 1px solid var(--line); }
.insurance-typed-row:first-child { border-top: 0; }
@media (min-width: 560px) {
  .forms-review-values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.forms-exit-card h3 { margin: 0 0 4px; }
.forms-exit-office + .forms-exit-office { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); }
.forms-exit-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.forms-exit-dots { margin: 0; font-size: 1.5rem; letter-spacing: .2em; color: var(--heading); }
.forms-fine-one { margin: 0; font-size: .875rem; }
.forms-exit-row .btn, .forms-exit-form .btn { min-height: 44px; }
.forms-exit-form { margin-top: 12px; }
.forms-exit-input { width: 8em; font-size: 16px; letter-spacing: .3em; }
[data-patient-view], [data-send-forms] { min-height: 44px; }
/* The Patient forms list (ticket t10, look A): five slim counts, the toolbar, then a card per group with its rows. State is a chip with an icon and words, never a side stripe or colour alone. */
.forms-counts { margin: 0 0 16px; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--radius-card, 12px); overflow: hidden; background: var(--surface, transparent); }
.forms-count { min-width: 0; border: 0 solid var(--line); border-width: 0 1px 1px 0; }
.forms-count:nth-child(2n) { border-right-width: 0; }
.forms-count:nth-last-child(-n + 1) { border-bottom-width: 0; }
.forms-count button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; min-height: 44px; padding: 10px 12px; text-align: left; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.forms-count-title { font-size: .8125rem; font-weight: 650; color: var(--heading); overflow-wrap: anywhere; }
.forms-count strong { font-size: 1.375rem; line-height: 1.2; color: var(--heading); }
.forms-count.warn strong { color: var(--warn-ink); }
.forms-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.forms-toolbar-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.forms-filters { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 260px; justify-content: flex-end; min-width: 0; }
.forms-filters .field { margin: 0; min-width: 0; }
.forms-filters select, .forms-filters input { min-height: 44px; }
.forms-office-filter { flex: 0 1 auto; }
.forms-list-search { flex: 1 1 220px; max-width: 360px; }
.forms-snapshot { margin: 0 0 12px; }
.forms-snapshot p { margin: 0 0 4px; }
.forms-snapshot-down { color: var(--warn-ink); }
.forms-group-card { margin: 0 0 16px; scroll-margin-top: 12px; }
.forms-group-card h2 { display: flex; align-items: baseline; gap: 8px; margin: 0 0 4px; font-size: 1.0625rem; }
.forms-group-count { font-weight: 500; color: var(--muted); }
.forms-empty { margin: 0 0 16px; }
.forms-row-why { margin: 2px 0 6px; font-size: .875rem; overflow-wrap: anywhere; }
.forms-row-status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 8px 0 0; min-width: 0; }
.forms-row-status .forms-row-state { margin: 0; overflow-wrap: anywhere; min-width: 0; }
.forms-items { display: flex; flex-wrap: wrap; gap: 6px 8px; }
.forms-items li { max-width: 100%; }
.forms-items .forms-chip { max-width: 100%; overflow-wrap: anywhere; }
.forms-chip.todo { background: var(--surface-2, var(--line)); color: var(--muted-ink, var(--heading)); }
.forms-chip.status-new { background: var(--accent-soft); color: var(--accent-ink); }
.forms-chip.status-due, .forms-chip.status-bad { background: var(--warn-soft); color: var(--warn-ink); }
.forms-chip.status-bad { background: var(--danger-soft); color: var(--danger); }
.forms-chip.status-ok { background: var(--ok-soft); color: var(--ok); }
.forms-chip.status-sent, .forms-chip.status-wait { background: var(--surface-2, var(--line)); color: var(--heading); }
.forms-row-buttons .btn.link { min-height: 44px; }
.forms-who .btn.link { margin-left: 8px; }
@media (max-width: 719px) {
  .forms-row-buttons { width: 100%; }
  .forms-row-buttons .btn { flex: 1 1 calc(50% - 8px); justify-content: center; }
  .forms-row-buttons .btn.primary:only-child { flex-basis: 100%; }
  .forms-toolbar-buttons, .forms-filters { width: 100%; }
  .forms-filters { justify-content: stretch; }
  .forms-list-search, .forms-office-filter { flex: 1 1 100%; max-width: none; }
}
@media (min-width: 720px) {
  .forms-counts { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .forms-count, .forms-count:nth-child(2n) { border-width: 0 1px 0 0; }
  .forms-count:last-child { border-right-width: 0; }
  .forms-row-head { flex-wrap: nowrap; align-items: flex-start; }
  .forms-row-buttons { justify-content: flex-end; flex: none; }
}
.forms-row-status .forms-tags { display: contents; }
.forms-rows, .forms-rows .forms-row, .forms-items, .forms-items li { list-style: none; }

/* Patient forms, ticket t12: Setup's Automatic sends card. A row is What, When, Then and an On switch side by side from 720px; on a phone it stacks. */
.forms-auto-card h3 { margin: 0 0 4px; }
.forms-auto-office + .forms-auto-office { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); }
.forms-auto-head, .forms-auto-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; min-width: 0; }
.forms-auto-head { display: none; padding: 8px 12px; background: var(--surface-2, var(--accent-soft)); border: 1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0; color: var(--muted); font-size: .75rem; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; }
.forms-auto-rows { margin: 12px 0 0; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.forms-auto-row { padding: 8px 12px; }
.forms-auto-row + .forms-auto-row { border-top: 1px solid var(--line); }
.forms-auto-what { grid-column: 1; font-weight: 650; color: var(--heading); overflow-wrap: anywhere; }
.forms-auto-when { grid-column: 1; overflow-wrap: anywhere; }
.forms-auto-then { grid-column: 1; overflow-wrap: anywhere; }
.forms-auto-switch { grid-column: 2; grid-row: 1 / span 3; width: auto; padding: 4px; gap: 8px; }
.forms-auto-fixed { grid-column: 1 / -1; }
.forms-auto-months { margin-top: 16px; display: grid; gap: 6px; min-width: 0; }
.forms-auto-months-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.forms-auto-months .input { width: 6em; min-height: 44px; font-size: 16px; }
.forms-auto-months .btn { min-height: 44px; }
@media (min-width: 720px) {
  .forms-auto-head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.3fr) minmax(0, 1.5fr) 96px; }
  .forms-auto-rows { margin-top: 0; border-top: 0; border-radius: 0 0 var(--radius) var(--radius); }
  .forms-auto-row { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.3fr) minmax(0, 1.5fr) 96px; }
  .forms-auto-what, .forms-auto-when, .forms-auto-then { grid-column: auto; }
  .forms-auto-switch { grid-column: auto; grid-row: auto; }
  .forms-auto-fixed { grid-column: 1 / -1; }
}

/* ---- Form wording (patient forms, wording editor) ---- */
.wording-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.wording-editor .input, .wording-editor select { width: 100%; max-width: 100%; box-sizing: border-box; }
.wording-editor .field { display: block; margin: 16px 0 6px; font-weight: 650; color: var(--heading); }
.wording-editor > .field:first-child { margin-top: 0; }
.wording-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.wording-chip, .wording-current, .wording-lacks { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--radius-control); font-size: .8125rem; font-weight: 650; }
.wording-chip { background: var(--accent-soft); color: var(--accent-ink); }
.wording-chip .icon, .wording-current .icon, .wording-print .icon, .wording-info .icon, .wording-fixed .icon, .wording-needs .icon { width: 16px; height: 16px; flex: none; }
.wording-text { min-height: 120px; resize: vertical; line-height: 1.5; font-family: inherit; white-space: pre-wrap; overflow-wrap: anywhere; }
.wording-es { color: var(--muted); }
.wording-print, .wording-info, .wording-fixed { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 0; overflow-wrap: anywhere; font-size: .875rem; color: var(--muted); }
.wording-print code { overflow-wrap: anywhere; }
.wording-info { padding: 10px 12px; border-radius: var(--radius-control); background: var(--accent-soft); color: var(--text); }
.wording-needs { display: grid; gap: 8px; margin: 0 0 10px; padding: 10px 12px; border: 1px solid var(--note-line, var(--line)); border-radius: var(--radius-control); background: var(--accent-soft); }
.wording-needs p { display: flex; align-items: flex-start; gap: 8px; margin: 0; }
.wording-needs .btn { justify-self: start; min-height: 44px; }
.wording-choice { margin: 12px 0 0; }
.wording-choice p { margin: 4px 0 0; display: flex; gap: 6px; align-items: flex-start; overflow-wrap: anywhere; }
.wording-choice .icon { width: 14px; height: 14px; flex: none; margin-top: 3px; }
.wording-scope { margin: 8px 0 0; }
.wording-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 0; }
.wording-actions .btn { min-height: 44px; }
.wording-panel { display: grid; gap: 4px; margin: 16px 0 0; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); }
.wording-panel .btn { justify-self: start; min-height: 44px; margin-top: 8px; }
.wording-done { margin: 14px 0 0; padding: 10px 12px; border-radius: var(--radius-control); background: var(--accent-soft); color: var(--text); overflow-wrap: anywhere; }
.wording-history h2 { margin: 0 0 8px; font-size: 1.125rem; }
.wording-versions { margin: 0; padding: 0; list-style: none; }
.wording-version { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.wording-version-text { min-width: 0; overflow-wrap: anywhere; }
.wording-version-text p { margin: 0 0 2px; }
.wording-version-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.wording-current { background: #e1f3e6; color: #17592b; }
.wording-lacks { background: var(--accent-soft); color: var(--accent-ink); }
.wording-version .btn { flex: none; min-height: 44px; }
.wording-count { margin: 8px 0 0; }
@media (min-width: 900px) {
  .wording-grid { grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr); }
}
@media (prefers-color-scheme: dark) {
  .wording-current { background: #163a22; color: #bfe8c9; }
}