/* dimond design system: the UI kit (C2 on Intercom tokens) as CSS. ADR 0006. */

:root {
  /* Surfaces */
  --canvas: #f5f1ec;
  --surface: #ffffff;
  --surface-2: #ebe7e1;
  --surface-side: #fbfaf8;
  --panel: #111111;
  --panel-raised: #313130;

  /* Text and lines */
  --ink: #111111;
  --ink-soft: #313130;
  --muted: #626260;
  --muted-on-panel: #9c9fa5;
  /* The attachment viewer is always dark, whatever the page around it. */
  --viewer-bg: #0f0f0f;
  --viewer-line: #262626;
  --viewer-muted: #a3a19c;
  --viewer-control: #1c1c1c;
  --viewer-control-hover: #2a2a2a;
  --viewer-track: #3a3a3a;
  --hairline: #d3cec6;
  --hairline-strong: #c4beb4;
  --hairline-soft: #ebe7e1;

  /* Signals. Text on the accent is always ink. */
  --accent: #ff5600;
  --accent-hover: #ff7433;
  --accent-pressed: #e04c00;
  --accent-soft: #fff1e8;
  --accent-text: #b33a00;
  --info: #03b2cb;
  --info-soft: #eefafc;
  --info-line: #b7e6ee;
  --success-soft: #e3f7ea;
  --success-text: #0a6b2c;
  --error: #c41c1c;
  --error-soft: #fdecec;

  /* Client statuses: solid fills for the live ones */
  --status-planned: #5b4fe0;
  --status-in-progress: #0f6cbd;
  --status-ready: #ffc53d;
  --status-done: #157a3e;

  /* Shape and rhythm: 8 px grid */
  --radius-s: 8px;
  --radius-m: 12px;
  --radius-l: 16px;
  --radius-pill: 9999px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;

  --font: "Figtree", system-ui, -apple-system, sans-serif;
  --tap: 44px;
}

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

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

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

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

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

h1,
h2,
h3 {
  margin: 0;
  font-weight: 500;
  /* A title is typed by a client: a long word or a file name must wrap, not push out of its card. */
  overflow-wrap: anywhere;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

h1 {
  font-size: 34px;
}

h2 {
  font-size: 20px;
  font-weight: 600;
}

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

/* App shell: dark sidebar on wide screens, bottom tab bar on phones. */

/* The macOS bounce at the top and bottom of the page drags the sticky sidebar with it.
   Phones keep it: there is no sidebar there, and pulling down reloads the page. */
@media (min-width: 900px) {
  html {
    overscroll-behavior-y: none;
  }
}

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

.sidebar {
  flex: 0 0 256px;
  /* Stays on screen while a long page scrolls, so navigation and sign-out are always in reach. */
  position: sticky;
  top: 0;
  align-self: flex-start;
  box-sizing: border-box;
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  background: var(--panel);
  color: #ffffff;
  padding: var(--space-6) 18px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #ffffff;
  text-decoration: none;
  font-size: 19px;
  font-weight: 500;
}

.brand-mark {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-s);
  background: var(--accent);
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  display: grid;
  place-items: center;
}

.nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.nav a {
  color: var(--muted-on-panel);
  text-decoration: none;
  padding: var(--space-3) 14px;
  border-radius: var(--radius-s);
}

.nav a:hover {
  color: #ffffff;
}

.nav a[aria-current="page"] {
  color: #ffffff;
  background: var(--panel-raised);
}

.sidebar-footer {
  margin-top: auto;
  font-size: 12px;
  color: var(--muted-on-panel);
}

.main {
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--space-7);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.topbar,
.menu-close,
.nav .nav-phone-only {
  display: none;
}

.sidebar-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.sidebar-head .brand {
  flex-grow: 1;
}

@media (max-width: 899px) {
  .app {
    flex-direction: column;
  }

  /* On phones the sidebar is the menu behind the ☰ (mockups PM · phone, Client · phone). */
  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 50;
    width: min(300px, 85vw);
    max-width: none;
    padding: 18px var(--space-4) calc(var(--space-5) + env(safe-area-inset-bottom));
    gap: 22px;
    overflow-y: auto;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 200ms ease, visibility 0s 200ms;
  }

  .app[data-menu-open] .sidebar {
    transform: none;
    visibility: visible;
    transition: transform 200ms ease;
  }

  .menu-scrim {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgb(17 17 17 / 55%);
  }

  .menu-close {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid #3a3a39;
    background: transparent;
    color: #ffffff;
    cursor: pointer;
  }

  .nav a {
    padding: 13px 14px;
    font-size: 16px;
  }

  .nav .nav-phone-only {
    display: flex;
  }

  .nav-new-mark {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--ink);
    display: grid;
    place-items: center;
  }

  .sidebar-footer {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    font-size: 13px;
  }

  .topbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px var(--space-4);
    border-bottom: 1px solid var(--hairline);
  }

  .menu-button {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    border: 1px solid var(--hairline);
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
  }

  .topbar .brand {
    flex-grow: 1;
    color: var(--ink);
    font-size: 18px;
  }

  .topbar .brand-mark {
    width: 30px;
    height: 30px;
    font-size: 13px;
  }

  .topbar-meta {
    font-size: 14px;
    color: var(--muted);
  }

  .topbar-new {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--ink);
    box-shadow: 0 4px 12px rgb(255 86 0 / 35%);
  }

  .main {
    padding: var(--space-5) var(--space-4) var(--space-7);
  }

  h1 {
    font-size: 30px;
  }
}

@media (max-width: 899px) and (prefers-reduced-motion: reduce) {
  .sidebar,
  .app[data-menu-open] .sidebar {
    transition: none;
  }
}

/* Signed-out pages: brand panel and form. The panel moves on top on phones. */

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

.auth-hero {
  flex: 0 0 440px;
  background: var(--panel);
  color: #ffffff;
  padding: 48px 44px;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.auth-pitch {
  margin-top: auto;
}

.auth-tagline {
  margin: 0 0 14px;
  font-size: 44px;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.08;
}

.auth-lede {
  margin: 0;
  max-width: 360px;
  color: var(--muted-on-panel);
}

.auth-footnote {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

.auth-main {
  flex: 1 1 480px;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px var(--space-5);
}

.auth-panel {
  width: 100%;
  max-width: 420px;
  gap: 22px;
}

.auth-header {
  gap: var(--space-2);
}

.auth-header p {
  margin: 0;
}

@media (max-width: 899px) {
  .auth {
    flex-direction: column;
  }

  .auth-hero {
    flex: 0 0 auto;
    padding: var(--space-5) var(--space-4);
    gap: var(--space-5);
  }

  .auth-pitch {
    margin-top: 0;
  }

  .auth-tagline {
    margin: 0;
    font-size: 32px;
  }

  .auth-lede,
  .auth-footnote {
    display: none;
  }

  .auth-main {
    flex: 1 1 auto;
    align-items: flex-start;
    padding: var(--space-6) var(--space-4);
  }
}

/* Components */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--tap);
  padding: 0 18px;
  border-radius: var(--radius-s);
  border: 1px solid var(--hairline);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 120ms, border-color 120ms;
}

.btn:hover {
  color: var(--ink);
  background: var(--canvas);
  border-color: var(--hairline-strong);
}

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

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  font-weight: 600;
}

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

.btn-primary:active {
  background: var(--accent-pressed);
  border-color: var(--accent-pressed);
}

.btn-dark {
  background: var(--ink);
  border-color: var(--ink);
  color: #ffffff;
  font-weight: 600;
}

.btn-dark:hover {
  color: #ffffff;
  background: #333333;
  border-color: #333333;
}

.btn-dark:active {
  background: #000000;
}

.btn-block {
  width: 100%;
  min-height: 52px;
  font-size: 17px;
}

.btn:disabled {
  opacity: 0.45;
  pointer-events: none;
}

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

.field label {
  font-size: 15px;
  font-weight: 500;
}

.input {
  font: inherit;
  font-size: 16px;
  min-height: 52px;
  padding: 0 14px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-s);
  background: var(--surface);
  color: var(--ink);
}

textarea.input {
  padding: var(--space-3) 14px;
  resize: vertical;
}

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

.input[aria-invalid="true"] {
  border-color: var(--error);
}

.choices {
  margin: 0;
  padding: 0;
  border: 0;
}

.choices legend {
  padding: 0;
  margin-bottom: 6px;
  font-size: 15px;
  font-weight: 500;
}

.choice {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 52px;
  padding: var(--space-3) 14px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-m);
  background: var(--surface);
  cursor: pointer;
}

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

.choice:has(input:checked) {
  border: 1.5px solid var(--ink);
}

.choice input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--ink);
}

.hint {
  font-size: 13px;
  color: var(--muted);
}

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

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

/* A button that reads as a link: actions such as sign out must be POST, never a plain link. */
.link-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.link-button:hover {
  color: var(--muted);
}

.error-text {
  font-size: 13px;
  color: var(--error);
}

.card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-l);
  padding: var(--space-5);
}

.chip {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--hairline);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 120ms;
}

.chip:hover {
  border-color: var(--ink);
  background: var(--canvas);
}

.chip[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: #ffffff;
}

.chip[aria-pressed="true"]:hover {
  background: var(--panel-raised);
  border-color: var(--panel-raised);
}

.chip:disabled {
  border-color: var(--hairline-soft);
  background: var(--surface);
  color: var(--muted-on-panel);
  pointer-events: none;
}

/* Client statuses (decided 19 Oct 2026, take B5): live statuses get a solid colour, closed
   ones stay quiet, orange means "your move". Each status also has its own icon, so it reads
   without colour. White text sits only on dark fills; every pair passes WCAG AA. */
.status {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  white-space: nowrap;
}

:is(.status-received, .status-needs_input, .status-planned, .status-in_progress,
  .status-ready_to_check, .status-later, .status-done, .status-declined, .status-withdrawn)::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 5px;
  vertical-align: -2px;
  background: currentColor;
  -webkit-mask: var(--status-icon) center / contain no-repeat;
  mask: var(--status-icon) center / contain no-repeat;
}

.status-received::before { --status-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.status-needs_input::before { --status-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4.2 4.4a1.9 1.9 0 1 1 2.6 1.8c-.5.2-.8.6-.8 1.1v.3' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='6' cy='9.6' r='.85'/%3E%3C/svg%3E"); }
.status-planned::before { --status-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Crect x='1.8' y='2.6' width='8.4' height='7.6' rx='1.4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M1.8 5.2h8.4M4.2 1.4v2M7.8 1.4v2' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.status-in_progress::before { --status-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4 2.6v6.8L9.4 6z'/%3E%3C/svg%3E"); }
.status-ready_to_check::before { --status-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Ccircle cx='5.2' cy='5.2' r='3.2' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7.6 7.6 10.2 10.2' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.status-later::before { --status-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4.4 3v6M7.6 3v6' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.status-done::before { --status-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m2.6 6.3 2.3 2.3 4.6-5' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.status-declined::before { --status-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m3.4 3.4 5.2 5.2M8.6 3.4 3.4 8.6' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.status-withdrawn::before { --status-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6h6' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

.status-received { background: var(--surface); box-shadow: inset 0 0 0 1px var(--hairline); }
.status-needs_input { background: var(--accent); color: var(--ink); }
.status-planned { background: var(--status-planned); color: #fff; }
.status-in_progress { background: var(--status-in-progress); color: #fff; }
.status-ready_to_check { background: var(--status-ready); color: var(--ink); }
.status-later { border: 1px dashed #a39783; padding: 2px 9px; color: #5f5648; }
.status-done { background: var(--status-done); color: #fff; }
.status-declined { background: #f6dedd; color: #8a2a27; }
.status-withdrawn {
  background: #ebe9e6;
  color: #66655f;
  text-decoration: line-through;
  text-decoration-color: rgb(102 101 95 / 60%);
}

/* A Jira workflow status ("Code review") is not one of ours: plain, no icon. */
.status-jira { background: var(--surface-2); }

.banner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) 18px;
  border-radius: var(--radius-l);
  background: var(--accent-soft);
  border: 1.5px solid var(--accent);
}

/* Layout helpers */

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

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

/* New request form (#7) */

.page-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.page-header p {
  margin: 0;
}

.new-request {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-5);
}

.request-form {
  flex: 999 1 520px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.aside-note {
  flex: 1 1 240px;
  max-width: 300px;
  padding: 22px;
  border-radius: var(--radius-l);
  background: var(--surface-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.aside-note h2 {
  font-size: 16px;
}

.aside-note p {
  margin: 0;
  font-size: 14px;
  color: var(--ink-soft);
}

.optional {
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
}

/* Attachments: the drop zone in forms (shown once attach-files.js runs; without it the plain
   file input stays) and the file chips on a request. */
.dropzone {
  display: none;
}

.attach.is-enhanced .dropzone {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  min-height: 72px;
  padding: var(--space-3) var(--space-4);
  border: 1.5px dashed var(--hairline-strong);
  border-radius: var(--radius-m);
  background: var(--canvas);
  color: var(--muted);
  font-size: 14px;
  font-weight: 400;
  text-align: center;
  cursor: pointer;
}

.attach.is-enhanced .dropzone:hover,
.attach.is-dragging .dropzone {
  border-color: var(--ink);
  color: var(--ink);
}

.attach:has(input:focus-visible) .dropzone {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
}

.dropzone-pick {
  color: var(--ink);
  text-decoration: underline;
}

kbd {
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 1px 6px;
  border: 1px solid var(--hairline);
  border-bottom-width: 2px;
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
}

.error-text p {
  margin: 0;
}

/* A chip that is a radio button: the type picker. */
.chip-choice {
  position: relative;
  min-height: var(--tap);
  padding: 0 var(--space-4);
}

.chip-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.chip-choice:has(input:checked) {
  background: var(--ink);
  border-color: var(--ink);
  color: #ffffff;
}

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

/* Fields that belong to one type are shown by the checked type, so it works without JS. */
.request-form:not(:has(input[name="type"][value="bug"]:checked)) .for-bug,
.request-form:has(input[name="type"][value="bug"]:checked) .not-for-bug {
  display: none;
}

.request-form summary {
  min-height: var(--tap);
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.request-form details textarea {
  width: 100%;
}

.when-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.when-option {
  flex: 1 1 124px;
  align-items: flex-start;
}

.when-option input {
  margin-top: 2px;
}

.when-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 14px;
}

.when-text .hint {
  font-size: 12px;
}

.when-hotfix:has(input:checked) {
  border: 2px solid var(--accent);
}

.when-note {
  margin-top: var(--space-2);
}

.request-form:has(input[value="hotfix"]:checked) .when-note {
  color: var(--accent-text);
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--hairline-soft);
}

.btn-ghost {
  border-color: transparent;
  background: transparent;
}

@media (max-width: 899px) {
  .request-form {
    padding: var(--space-4);
  }

  .when-options {
    flex-direction: column;
  }

  .when-option {
    flex: 0 0 auto;
  }

  .form-actions .btn {
    width: 100%;
    min-height: 52px;
    font-size: 17px;
  }

  /* A full-width text link would float; an outline keeps it reading as a button. */
  .form-actions .btn-ghost {
    border-color: var(--hairline);
    background: var(--surface);
  }

  .aside-note {
    max-width: none;
  }
}

/* Sending spinner: PM jokes while the request is on its way. */

.spinner-overlay {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  padding: var(--space-4);
  background: rgb(245 241 236 / 92%);
}

.spinner-overlay[hidden] {
  display: none;
}

.spinner-card {
  width: 100%;
  max-width: 460px;
  padding: 36px var(--space-6);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-l);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  text-align: center;
}

.spinner-mark {
  position: relative;
  width: 88px;
  height: 88px;
}

.spinner-orbit {
  position: absolute;
  inset: 0;
  border: 1.5px dashed var(--hairline);
  border-radius: 50%;
  animation: dmn-orbit 1.2s linear infinite;
}

.spinner-orbit span {
  position: absolute;
  top: -6px;
  left: 38px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
}

.spinner-logo {
  position: absolute;
  inset: 20px;
  border-radius: 14px;
  background: var(--ink);
  color: #ffffff;
  font-size: 18px;
  font-weight: 600;
  display: grid;
  place-items: center;
  animation: dmn-breathe 1.6s ease-in-out infinite;
}

.spinner-done {
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--ink);
  display: none;
  place-items: center;
  animation: dmn-pop 0.35s ease-out both;
}

.spinner-card.is-done .spinner-orbit,
.spinner-card.is-done .spinner-logo {
  display: none;
}

.spinner-card.is-done .spinner-done {
  display: grid;
}

.spinner-line {
  min-height: 54px;
  margin: 0;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.35;
  animation: dmn-in 0.25s ease-out both;
}

.spinner-dots {
  display: flex;
  gap: 6px;
}

.spinner-dots span {
  width: 24px;
  height: 4px;
  border-radius: 2px;
  background: var(--surface-2);
}

.spinner-dots .is-passed {
  background: var(--ink);
}

.spinner-card.is-done .spinner-dots span {
  background: var(--accent);
}

@keyframes dmn-orbit {
  to {
    transform: rotate(360deg);
  }
}

@keyframes dmn-breathe {
  50% {
    transform: scale(0.92);
  }
}

@keyframes dmn-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

@keyframes dmn-pop {
  0% {
    transform: scale(0.6);
  }

  70% {
    transform: scale(1.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  .spinner-orbit,
  .spinner-logo,
  .spinner-done,
  .spinner-line {
    animation: none;
  }
}

/* My requests (#8) */

.sidebar-footer {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.sidebar-footer .link-button {
  color: inherit;
}

.topbar-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.requests-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
}

/* Links that act like a segmented control: the current one is filled. */
.segmented {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: var(--space-1);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
}

.segmented a {
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  color: var(--ink-soft);
  font-size: 14px;
  text-decoration: none;
}

.segmented a:hover {
  color: var(--ink);
}

.segmented a[aria-current="true"] {
  background: var(--ink);
  color: var(--surface);
}

.summary {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 20px;
}

.summary-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.summary-head h2 {
  font-size: 16px;
}

.summary-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 10px;
  margin: 0;
}

.summary-stats div {
  display: flex;
  flex-direction: column-reverse;
  gap: 2px;
  padding: var(--space-3) 14px;
  border-radius: var(--radius-m);
  background: var(--canvas);
}

.summary-stats dt {
  font-size: 13px;
  color: var(--muted);
}

.summary-stats dd {
  margin: 0;
  font-size: 26px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.type-filter {
  display: flex;
  gap: 6px;
}

.type-filter .chip {
  text-decoration: none;
  white-space: nowrap;
}

.type-filter .chip[aria-current="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--surface);
}

.type-filter .chip[aria-current="true"]:hover {
  background: var(--panel-raised);
  border-color: var(--panel-raised);
}

.view-switch {
  display: inline-flex;
  margin-left: auto;
  padding: 3px;
  gap: 2px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-s);
  background: var(--surface);
}

.view-switch a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 34px;
  border-radius: 6px;
  color: var(--muted);
}

.view-switch a:hover {
  color: var(--ink);
}

.view-switch a[aria-current="true"] {
  background: var(--ink);
  color: var(--surface);
}

.filter-button,
.request-list-mobile {
  display: none;
}

/* The phone filter sheet: a native popover pinned to the bottom of the screen. */
.sheet {
  inset: auto 0 0;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 10px var(--space-5) calc(var(--space-6) + env(safe-area-inset-bottom));
  border: 0;
  border-radius: 20px 20px 0 0;
  background: var(--surface);
  color: var(--ink);
}

.sheet::before {
  content: "";
  display: block;
  width: 40px;
  height: 5px;
  margin: 0 auto var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--hairline);
}

.sheet::backdrop {
  background: rgb(17 17 17 / 45%);
}

.sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sheet-head h2 {
  font-size: 20px;
}

.sheet .segmented {
  display: flex;
  flex-wrap: nowrap;
}

.sheet .segmented label {
  padding: 8px 4px;
  font-size: 13px;
  white-space: nowrap;
}

.sheet-group {
  margin: 0;
  padding: 0;
  border: 0;
}

.sheet-group legend {
  margin-bottom: 10px;
  padding: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
}

/* A checkbox that looks like a chip: several can be on at once. */
.chip-check {
  min-height: var(--tap);
  font-size: 15px;
}

.chip-check input,
.segmented label input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.chip-check:has(input:checked) {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--surface);
}

.chip-check:has(input:focus-visible),
.segmented label:has(input:focus-visible) {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.segmented label {
  position: relative;
  flex: 1 1 0;
  padding: 7px 8px;
  border-radius: var(--radius-pill);
  color: var(--muted);
  font-size: 14px;
  text-align: center;
  cursor: pointer;
}

.segmented label:has(input:checked) {
  background: var(--surface);
  color: var(--ink);
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: var(--space-7);
  border: 1px dashed var(--hairline-strong);
  border-radius: var(--radius-l);
  background: var(--surface);
  text-align: center;
}

.empty-state p {
  margin: 0;
}

.board {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  align-items: start;
}

.board-column {
  /* A grid column would otherwise grow to its widest word. */
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-l);
  background: var(--surface-2);
}

.board-column h2 {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) 6px;
  font-size: 15px;
  font-weight: 500;
}

.board-column h2 .muted {
  margin-left: auto;
  font-size: 13px;
}

.board-column .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--column-color, var(--muted));
}

.board-column[data-column="needs-you"] { --column-color: var(--accent); }
.board-column[data-column="in-progress"] { --column-color: var(--status-in-progress); }
.board-column[data-column="ready-to-check"] { --column-color: var(--status-ready); }
.board-column[data-column="later"] { --column-color: var(--hairline-strong); }
.board-column[data-column="done"] { --column-color: var(--status-done); }

/* Relative so the title link can cover the whole card: it opens on a tap anywhere. */
.request-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-m);
  background: var(--surface);
}

.request-card.needs-you {
  border: 1.5px solid var(--accent);
}

.request-card:hover {
  border-color: var(--ink);
}

.card-link {
  color: inherit;
  text-decoration: none;
}

.card-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.request-card h3 {
  font-size: 15px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

/* On the board a long title stops after four lines; the card shows it whole. */
.board .request-card h3 {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
}

/* Head and foot never wrap: the key and the date keep their places, the text beside them
   is cut. A pill that wrapped onto its own line used to make the card look broken. */
.request-card-head,
.request-card-meta {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  min-width: 0;
  font-size: 12px;
  color: var(--muted);
}

.request-card-context,
.request-card-want {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.request-card-context {
  font-weight: 500;
  color: var(--ink);
}

.request-card-key,
.request-card-meta time {
  flex: 0 0 auto;
  white-space: nowrap;
}

.request-card-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.request-card-meta .hotfix {
  font-weight: 600;
  color: var(--accent-text);
}

.request-card.has-new h3,
.request-table .request-title.has-new a {
  font-weight: 600;
}

/* "2 new": messages from others since the person last opened the request. */
.unread-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
}

.unread-dot {
  display: inline-block;
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}

.request-title-extra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

/* Why a request waits for the PM. Text, not a frame: a dark frame already means hover and focus. */
.reason-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.reason-withdraw { background: var(--ink); color: #ffffff; }
.reason-replied { background: #ffd9c4; }
.reason-new { background: var(--surface); border: 1px solid var(--hairline-strong); }
.reason-task_lost { background: var(--error-soft); color: var(--error); }
.reason-not_sent { background: var(--error-soft); color: var(--error); }

.needs-you-row-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: 2px;
  font-size: 13px;
}

.chip-count {
  margin-left: 4px;
  padding: 0 7px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
}

.client-filter {
  flex-wrap: wrap;
}

.search-count {
  margin: 0 0 var(--space-3);
  font-size: 14px;
}

/* Search and the board / list switch stay together on the right, and wrap together. */
.filter-tools {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}

.filter-tools .view-switch {
  margin-left: 0;
}

.search .input {
  width: 160px;
  min-height: 40px;
  padding: 8px 12px;
  font-size: 14px;
}

/* Keys, wishes and dates stay on one line; the table scrolls sideways on narrow screens.
   A long client name wraps instead of pushing the dates off the table. */
.request-table td:not(.request-title, .request-client) {
  white-space: nowrap;
}

.request-table .request-client {
  max-width: 140px;
}

/* Above the first message the person has not seen yet. */
.new-line {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-text);
}

.new-line::before,
.new-line::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--accent);
}

/* The list view is a table: one row per request, grouped by month. */
.request-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-l);
  background: var(--surface);
}

.request-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  font-size: 14px;
  text-align: left;
}

.request-table th,
.request-table td {
  padding: 14px 20px;
  border-bottom: 1px solid var(--hairline-soft);
  vertical-align: middle;
}

.request-table thead th {
  padding-block: var(--space-3);
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}

.request-table .month-row th {
  padding-block: var(--space-3) var(--space-2);
  background: var(--canvas);
  font-weight: 600;
}

.request-table .month-row .muted {
  margin-left: var(--space-2);
  font-size: 12px;
  font-weight: 400;
}

.request-table .request-title {
  font-size: 15px;
  font-weight: 500;
}

.request-table .request-title a {
  text-decoration: none;
}

.request-table .request-title a:hover {
  text-decoration: underline;
}

.request-table tr.needs-you {
  background: #fff8f3;
}

.request-table .hotfix {
  font-weight: 600;
  color: var(--accent-text);
}

.request-table tbody:last-child tr:last-child > * {
  border-bottom: 0;
}

@media (max-width: 899px) {
  .requests-header .btn {
    display: none;
  }

  /* Phones follow the mobile mockup: one list of cards; type and period live in the sheet. */
  .summary,
  .type-filter,
  .view-switch,
  .board,
  .request-table-wrap {
    display: none;
  }

  .filter-bar {
    flex-wrap: wrap;
  }

  /* On a phone the search takes its own line under Open / Closed / All and Filter. */
  .filter-bar .filter-tools {
    order: 1;
    flex: 1 1 100%;
    margin-left: 0;
  }

  .filter-tools .search,
  .filter-tools .search .input {
    flex: 1 1 auto;
    width: 100%;
  }

  /* iOS zooms the page into any field under 16px when it gets focus. */
  .filter-tools .search .input {
    font-size: 16px;
  }

  .filter-bar .segmented {
    flex: 1 1 auto;
  }

  .filter-button {
    display: inline-flex;
    flex: 0 0 auto;
    border-radius: var(--radius-pill);
  }

  .request-list-mobile {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .segmented a {
    flex: 1 1 auto;
    padding: 7px 8px;
    font-size: 13px;
    text-align: center;
    white-space: nowrap;
  }

}

/* Request card (#9): header, thread on the left, progress and facts on the right. */

.request-header {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.crumbs {
  font-size: 14px;
  color: var(--muted);
}

.crumbs a {
  color: var(--muted);
  text-decoration: none;
}

.crumbs a:hover {
  color: var(--ink);
}

.type-pill {
  padding: 3px 10px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-size: 12px;
  font-weight: 500;
}

.voice-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.request-header .meta {
  font-size: 13px;
}

.needs-you-banner {
  flex-wrap: wrap;
  gap: var(--space-3) 20px;
}

.banner-mark {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

.needs-you-text {
  flex: 1 1 320px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.needs-you-text p {
  margin: 0;
  font-size: 14px;
  color: var(--ink-soft);
}

.request-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--space-5);
  align-items: start;
}

.thread {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.message {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 20px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-l);
  background: var(--surface);
  scroll-margin-top: var(--space-5);
}

.message-pm {
  border-color: var(--surface-2);
  background: var(--surface-2);
}

.message-team {
  border-color: var(--info-line);
  background: var(--info-soft);
}

.message-team .avatar {
  background: var(--info);
  color: var(--ink);
}

.team-answer {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  border-top: 1px solid var(--info-line);
  padding-top: var(--space-3);
}

.team-answer label {
  font-size: 14px;
  font-weight: 500;
}

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

.team-answer-row .hint {
  flex: 1 1 220px;
  font-size: 12px;
}

.jira-note {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
}

.jira-failed {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--error-soft);
}

.jira-failed span {
  flex: 1 1 260px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--error);
}

.jira-failed form {
  margin: 0;
}

/* Send to Jira shows on hover or focus; a phone has no hover, so it is always there. */
.to-jira {
  margin: 0;
  opacity: 0;
}

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

@media (hover: none) {
  .to-jira {
    opacity: 1;
  }
}

.to-jira-button {
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 5px 10px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}

.message-files-not-shown {
  margin: 0;
  font-size: 13px;
  color: var(--ink-soft);
}

.message:target {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.message-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  font-size: 15px;
}

.message-head .muted {
  font-size: 13px;
}

.message-head time {
  margin-left: auto;
}

.avatar {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
}

.message-pm .avatar {
  background: var(--ink);
  color: #ffffff;
}

.message-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.message-why {
  font-size: 14px;
  color: var(--ink-soft);
}

.thread-event {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 4px;
  font-size: 13px;
  color: var(--muted);
}

.thread-event .dot {
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted-on-panel);
}

.thread-event time {
  margin-left: auto;
}

.event-needs_input .dot { background: var(--accent); }
.event-planned .dot { background: var(--status-planned); }
.event-in_progress .dot { background: var(--status-in-progress); }
.event-ready_to_check .dot { background: var(--status-ready); }
.event-done .dot { background: var(--status-done); }

.composer {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-l);
  background: var(--surface);
  scroll-margin-top: var(--space-5);
}

.composer > label:first-of-type {
  font-size: 14px;
  font-weight: 500;
}

.composer .check {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap);
  font-size: 14px;
}

.composer .check input {
  width: 18px;
  height: 18px;
  accent-color: var(--ink);
}

.composer-actions {
  display: flex;
  justify-content: flex-end;
}

/* The reply box's files: a small button instead of the drop zone. */
.attach-compact {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.attach-button {
  display: none;
}

.attach.is-enhanced .attach-button {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 6px;
  min-height: var(--tap);
  padding: 0 14px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.attach.is-enhanced .attach-button:hover,
.attach-compact.is-dragging .attach-button {
  border-color: var(--ink);
}

.attach-compact:has(input:focus-visible) .attach-button {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
}

/* Record buttons under the drop zone (mockup: New request), icon-only beside "Attach or paste"
   in the reply box. Each appears only where the browser can record (record-media.js). */
.attach-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.attach-actions[hidden],
.record-button[hidden],
.recording[hidden] {
  display: none;
}

.record-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--tap);
  min-width: var(--tap);
  padding: 0 14px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.attach-compact .record-button {
  padding: 0;
}

.record-button:hover {
  border-color: var(--ink);
}

.recording {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  border-radius: var(--radius-m);
  background: var(--accent-soft);
  font-size: 14px;
  font-weight: 500;
}

.recording-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--error);
  animation: recording-pulse 1.2s ease-in-out infinite;
}

@keyframes recording-pulse {
  50% {
    opacity: 0.3;
  }
}

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

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

.recording-stop {
  margin-left: auto;
}

/* Every file of the request, from the request and the thread, in the aside. */
.files-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
}

.files-card h2 {
  margin: 0;
  font-size: 15px;
}

.files-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.files-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.files-card:has(.files-more:not([open])) .files-row-more {
  display: none;
}

.files-more summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--tap);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

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

.files-more summary:hover .files-more-closed,
.files-more summary:hover .files-more-open {
  text-decoration: underline;
}

.files-more[open] .files-more-closed,
.files-more:not([open]) .files-more-open {
  display: none;
}

.files-more[open] svg {
  transform: rotate(180deg);
}

.files-row-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.file-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
}

/* The edit form's files: ticking Remove strikes the name out until the form is saved. */
.attached-files {
  /* A fieldset is never narrower than its content unless told so. */
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.attached-files legend {
  padding: 0;
  margin-bottom: 6px;
  font-size: 15px;
  font-weight: 500;
}

/* The request itself: who edited it and how, and the way to edit it until it's planned. */

.request-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-2) var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--hairline-soft);
}

.edit-history {
  flex: 1 1 240px;
  font-size: 13px;
  color: var(--muted);
}

.edit-history summary {
  min-height: var(--tap);
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.edit-history ol {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.edit-history strong {
  color: var(--ink);
  font-weight: 500;
}

.edit-history dl {
  margin: 6px 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.edit-history dt {
  font-weight: 500;
  color: var(--ink-soft);
}

.edit-history dd {
  margin: 2px 0 0;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.edit-history del {
  color: var(--muted);
}

.edit-history ins {
  display: block;
  text-decoration: none;
  color: var(--ink);
}

/* Actions on the request card: everything a person can do with the request, in one place. */

.actions-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
}

.actions-card h2 {
  margin: 0 0 var(--space-1);
  font-size: 15px;
}

.btn-action {
  width: 100%;
  justify-content: flex-start;
  gap: 10px;
}

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

.btn-action-danger:hover {
  color: var(--error);
  border-color: var(--error);
}

.withdraw summary {
  list-style: none;
}

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

.withdraw[open] summary {
  border-color: var(--error);
}

.withdraw form,
.withdrawal-ask {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: 14px;
}

.withdraw form {
  margin-top: var(--space-3);
}

.withdraw .hint,
.withdrawal-ask p {
  margin: 0;
}

.withdraw label {
  font-weight: 500;
}

.withdrawal-ask blockquote {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-s);
  background: var(--canvas);
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.withdrawal-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.withdrawal-banner {
  background: var(--surface);
  border-color: var(--ink);
}

.withdrawal-text {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.withdrawal-text p {
  margin: 0;
}

/* Edit request page (#9b): a note above the form, stacked rather than in one row. */

.edit-notice {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.edit-notice-stop {
  background: var(--surface);
  border-color: var(--ink);
}

.thread-closed {
  margin: 0;
  padding: var(--space-4);
  border: 1px dashed var(--hairline-strong);
  border-radius: var(--radius-l);
  font-size: 14px;
  color: var(--muted);
}

.request-aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.progress-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
}

.progress-card h2 {
  font-size: 15px;
}

.progress-card p {
  margin: 0;
  font-size: 14px;
}

/* Phones get the one-line summary and the bar; wide screens the list of steps. */
.progress-summary,
.progress-bar {
  display: none;
}

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

.progress-steps li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 0 14px 28px;
  font-size: 14px;
  color: var(--muted-on-panel);
}

/* The circle and the line down to the next step. */
.progress-steps li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 14px;
  height: 14px;
  border: 2px solid var(--hairline);
  border-radius: 50%;
  background: var(--surface);
}

.progress-steps li::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 20px;
  bottom: 2px;
  width: 2px;
  background: var(--hairline-soft);
}

.progress-steps li:last-child::after {
  display: none;
}

.progress-steps .is-done,
.progress-steps .is-current,
.progress-steps .is-waiting {
  color: var(--ink);
}

.progress-steps .is-done::before,
.progress-steps .is-current::before {
  border-color: var(--ink);
  background: var(--ink);
}

.progress-steps .is-done::after {
  background: var(--ink);
}

.progress-steps .is-current,
.progress-steps .is-waiting {
  font-weight: 600;
}

.progress-steps .is-waiting::before {
  border-color: var(--accent);
  background: var(--accent);
}

.progress-steps .muted {
  font-size: 12px;
  font-weight: 400;
}

.facts {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: 20px;
  border-radius: var(--radius-l);
  background: var(--surface-2);
  font-size: 14px;
}

.facts div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
}

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

.facts dd {
  margin: 0;
  min-width: 0;
  font-weight: 500;
  text-align: right;
  overflow-wrap: anywhere;
}

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

  /* On a phone the status comes first, then the conversation. */
  .request-aside {
    order: -1;
  }

  .progress-card {
    gap: var(--space-2);
    padding: var(--space-3) 14px;
    border: 0;
    border-radius: 14px;
    background: var(--surface-2);
  }

  .progress-card h2,
  .progress-steps {
    display: none;
  }

  .progress-summary {
    display: block;
    font-weight: 600;
  }

  .progress-bar {
    display: flex;
    gap: var(--space-1);
  }

  .progress-bar span {
    flex: 1;
    height: 4px;
    border-radius: var(--radius-pill);
    background: var(--hairline);
  }

  .progress-bar .is-done,
  .progress-bar .is-current {
    background: var(--ink);
  }

  .progress-bar .is-waiting {
    background: var(--accent);
  }

  .facts {
    padding: var(--space-3) 14px;
    background: transparent;
  }

  .message {
    padding: 14px;
  }

  .composer-actions .btn {
    width: 100%;
    min-height: 48px;
  }
}

/* "Dimon needs your input" on My requests: one banner, a row per waiting request. */

.needs-you-list {
  align-items: flex-start;
  padding: var(--space-4) 18px;
}

.needs-you-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.needs-you-body h2 {
  font-size: 16px;
  line-height: 36px;
}

.needs-you-body ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.needs-you-body li + li {
  border-top: 1px solid rgb(255 86 0 / 25%);
}

.needs-you-row {
  display: flex;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  min-height: 52px;
  padding: var(--space-2) 0;
  text-decoration: none;
  color: var(--ink);
}

.needs-you-row:hover {
  color: var(--ink);
}

.needs-you-row:hover .btn-primary {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

/* One line, cut with "…": the Reply button keeps its place on the right however long the
   title or question is. The card shows the whole text. */
.needs-you-row-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 15px;
}

.needs-you-question {
  color: var(--ink-soft);
}

.needs-you-question::before {
  content: " — ";
}

.needs-you-row .btn {
  flex: 0 0 auto;
  font-size: 14px;
}

.needs-you-more {
  align-self: flex-start;
  min-height: var(--tap);
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
}

@media (max-width: 899px) {
  .needs-you-list {
    padding: var(--space-3) 14px;
    border-radius: 14px;
  }

  .needs-you-list .banner-mark {
    display: none;
  }

  .needs-you-row-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    white-space: normal;
    font-size: 14px;
  }

  .needs-you-row-text strong {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  /* Two lines are enough to recognise the question; the card shows it in full. */
  .needs-you-question {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
  }

  .needs-you-question::before {
    content: none;
  }

  /* The whole row is the button on a phone; an arrow replaces the Reply pill. */
  .needs-you-row .btn {
    display: none;
  }

  .needs-you-row::after {
    content: "›";
    flex: 0 0 auto;
    font-size: 24px;
    line-height: 1;
  }
}

/* The attachment viewer over the request card: a dark full-screen dialog (mockup: MediaViewer). */
.viewer {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--viewer-bg);
  color: var(--surface);
  /* The browser's own player and speed list come in their dark version, to match. */
  color-scheme: dark;
}

.viewer[open] {
  display: flex;
  flex-direction: column;
}

.viewer::backdrop {
  background: var(--viewer-bg);
}

.viewer-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding: var(--space-4) 20px;
  border-bottom: 1px solid var(--viewer-line);
}

.viewer-title {
  flex: 1 1 240px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#viewer-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 600;
}

.viewer-meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  color: var(--viewer-muted);
}

.viewer-zoom {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1);
  border-radius: var(--radius-pill);
  background: var(--viewer-control);
}

.viewer-zoom[hidden] {
  display: none;
}

.viewer-zoom button {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--surface);
  font: inherit;
  font-size: 18px;
  cursor: pointer;
}

.viewer-zoom span {
  min-width: 44px;
  font-size: 13px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.viewer-zoom .viewer-fit {
  width: auto;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  color: var(--viewer-muted);
  font-size: 13px;
}

.viewer-zoom button:hover {
  background: var(--viewer-control-hover);
}

.viewer-round {
  flex: 0 0 var(--tap);
  width: var(--tap);
  height: var(--tap);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: var(--viewer-control);
  color: var(--surface);
  cursor: pointer;
}

.viewer-round:hover {
  background: var(--viewer-control-hover);
}

.viewer-close,
.viewer-close:hover {
  background: var(--surface);
  color: var(--ink);
}

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

/* The image is centred by its auto margins, not by the flex box, so a zoomed image can still
   be scrolled to its top and left edges. */
.viewer-stage {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  display: flex;
  padding: var(--space-5) 88px;
  overflow: hidden;
}

.viewer-stage.is-zoomed {
  overflow: auto;
}

.viewer-image {
  margin: auto;
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--radius-s);
  background: var(--surface);
  box-shadow: 0 20px 60px rgb(0 0 0 / 50%);
}

.viewer-stage.is-zoomed .viewer-image {
  max-width: none;
  max-height: none;
}

.viewer-pdf {
  flex: 1 1 auto;
  border: 0;
  border-radius: var(--radius-s);
  background: var(--surface);
}

/* Our own players for video and voice notes (mockup: MediaViewer, Video and Audio). */
.player[hidden],
.player svg [hidden],
.speed-menu[hidden],
.player-icon[hidden] {
  display: none;
}

.player {
  margin: auto;
  border-radius: var(--radius-m);
  background: var(--viewer-control);
}

.player-video {
  display: flex;
  flex-direction: column;
  max-width: 100%;
}

.player-screen {
  position: relative;
}

/* The header, thumbnails, stage padding and the control bar take this much of the window's
   height; the video gets the rest. */
.player-screen video {
  display: block;
  max-width: 100%;
  max-height: calc(100dvh - 290px);
  min-width: min(480px, 100%);
  border-radius: var(--radius-m) var(--radius-m) 0 0;
  background: #000000;
  cursor: pointer;
}

.player-video:fullscreen {
  justify-content: center;
  border-radius: 0;
  background: #000000;
}

.player-video:fullscreen video {
  width: 100%;
  max-height: calc(100dvh - 64px);
  border-radius: 0;
}

.player-big-play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 72px;
  height: 72px;
  margin: -36px 0 0 -36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
  color: var(--surface);
  cursor: pointer;
}

.player.is-playing .player-big-play {
  display: none;
}

.player-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: 13px;
  color: var(--viewer-muted);
}

.player-icon {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--surface);
  cursor: pointer;
}

.player-icon:hover {
  background: var(--viewer-control-hover);
}

.player-time {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}

/* The slider: orange up to where the media is, a white knob on top. */
.player-seek {
  flex: 1 1 60px;
  min-width: 0;
  height: 20px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  appearance: none;
}

.player-seek::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(to right, var(--accent) var(--progress, 0%), var(--viewer-track) var(--progress, 0%));
}

.player-seek::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(to right, var(--accent) var(--progress, 0%), var(--viewer-track) var(--progress, 0%));
}

.player-seek::-webkit-slider-thumb {
  width: 14px;
  height: 14px;
  margin-top: -5px;
  border: 0;
  border-radius: 50%;
  background: var(--surface);
  appearance: none;
}

.player-seek::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 0;
  border-radius: 50%;
  background: var(--surface);
}

.speed {
  position: relative;
}

.speed-button {
  height: 32px;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0 10px 0 12px;
  border: 1px solid var(--viewer-track);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--surface);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.speed-button[aria-expanded="true"] {
  background: var(--viewer-track);
}

.speed-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  z-index: 5;
  width: 168px;
  display: flex;
  flex-direction: column;
  padding: 6px;
  border: 1px solid var(--viewer-track);
  border-radius: var(--radius-m);
  background: var(--viewer-line);
  box-shadow: 0 12px 32px rgb(0 0 0 / 50%);
}

.speed-menu-title {
  padding: 6px 10px;
  font-size: 12px;
  color: var(--viewer-muted);
}

.speed-menu button {
  display: flex;
  justify-content: space-between;
  padding: 9px 10px;
  border: 0;
  border-radius: var(--radius-s);
  background: transparent;
  color: var(--surface);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}

.speed-menu button:hover,
.speed-menu button[aria-checked="true"] {
  background: var(--viewer-control-hover);
}

.speed-check {
  color: var(--accent);
  visibility: hidden;
}

[aria-checked="true"] > .speed-check {
  visibility: visible;
}

/* A voice note as a card: who sent it, a big play button and its sound as bars. */
.player-audio {
  width: min(640px, 100%);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: 28px;
  box-sizing: border-box;
  border-radius: var(--radius-l);
}

.player-who {
  display: flex;
  align-items: center;
  gap: 14px;
}

.player-audio .avatar {
  flex-basis: 40px;
  width: 40px;
  height: 40px;
  color: var(--ink);
}

.player-by {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
  color: var(--viewer-muted);
}

.player-by strong {
  font-size: 15px;
  font-weight: 600;
  color: var(--surface);
}

.player-wave-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.player-play-big {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  color: var(--ink);
  cursor: pointer;
}

.player-play-big:hover {
  background: var(--accent-hover);
}

.player-wave {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: 56px;
  border-radius: var(--radius-s);
}

.player-bars {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 3px;
}

.player-bars span {
  flex: 1 1 0;
  border-radius: 2px;
  background: var(--viewer-track);
}

.player-bars span.is-played {
  background: var(--accent);
}

/* The slider lies over the bars unseen: a click on the bars seeks, and so do the arrow keys. */
.player-wave .player-seek {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.player-wave:has(.player-seek:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.player-audio-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: 13px;
  color: var(--viewer-muted);
}

/* Here the speed list opens downwards, as in the mockup: the card sits mid-screen. */
.player-audio .speed-menu {
  top: calc(100% + 8px);
  bottom: auto;
}

.player-audio .speed-button svg {
  transform: rotate(180deg);
}

/* On a phone the card gives the bars as much width as it can, so each stays visible. */
@media (max-width: 640px) {
  .player-audio {
    padding: 20px;
  }

  .player-wave-row {
    gap: var(--space-3);
  }

  .player-play-big {
    flex-basis: 48px;
    width: 48px;
    height: 48px;
  }

  .player-bars {
    gap: 2px;
  }
}

.viewer-image[hidden],
.viewer-pdf[hidden] {
  display: none;
}

.viewer-prev,
.viewer-next {
  position: fixed;
  top: 50%;
  z-index: 2;
  width: 48px;
  height: 48px;
}

.viewer-prev {
  left: var(--space-5);
}

.viewer-next {
  right: var(--space-5);
}

.viewer-foot {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 20px;
  border-top: 1px solid var(--viewer-line);
}

.viewer-thumbs {
  flex: 1 1 auto;
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
}

.viewer-thumb {
  flex: 0 0 64px;
  width: 64px;
  height: 48px;
  padding: 0;
  overflow: hidden;
  border: 2px solid var(--viewer-line);
  border-radius: var(--radius-s);
  background: var(--viewer-control);
  color: var(--viewer-muted);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.viewer-thumb svg {
  vertical-align: middle;
}

.viewer-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.viewer-thumb[aria-current="true"] {
  border-color: var(--accent);
}

.viewer-count {
  font-size: 13px;
  color: var(--viewer-muted);
  font-variant-numeric: tabular-nums;
}

.viewer.is-single .viewer-prev,
.viewer.is-single .viewer-next,
.viewer.is-single .viewer-foot {
  display: none;
}

@media (max-width: 640px) {
  /* On a phone people zoom with two fingers; the buttons would push Close off the first row. */
  .viewer-zoom {
    display: none;
  }

  .viewer-title {
    flex-basis: 0;
  }

  .viewer-stage {
    padding: var(--space-3);
  }

  .viewer-prev,
  .viewer-next {
    top: auto;
    bottom: 76px;
  }
}

/* "Just say it": a request said out loud (mockups: Just say it, Mobile just say it). */
.voice-open svg {
  flex: 0 0 auto;
}

.requests-actions,
.new-request-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.new-request-title {
  justify-content: space-between;
}

.voice {
  width: min(640px, calc(100vw - 32px));
  padding: var(--space-6);
  box-sizing: border-box;
  border: 0;
  border-radius: 20px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 24px 64px rgb(0 0 0 / 30%);
}

.voice[open] {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.voice::backdrop {
  background: rgb(17 17 17 / 55%);
}

.voice [hidden] {
  display: none;
}

.voice-head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}

.voice-heading {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.voice-heading h2 {
  margin: 0;
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.5px;
}

.voice-heading p {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
}

.voice-close {
  flex: 0 0 var(--tap);
  width: var(--tap);
  height: var(--tap);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.voice-ready {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: var(--space-3) 0 var(--space-1);
}

.voice-mic {
  width: 112px;
  height: 112px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  color: var(--ink);
  cursor: pointer;
}

.voice-mic:hover {
  background: var(--accent-hover);
}

.voice-hint {
  font-size: 14px;
  color: var(--muted);
  text-align: center;
}

.voice-tips {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4) 18px;
  box-sizing: border-box;
  border-radius: var(--radius-m);
  background: var(--canvas);
  font-size: 14px;
  line-height: 1.6;
}

.voice-recording,
.voice-review {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.voice-live {
  display: flex;
  align-items: center;
  gap: 20px;
}

.voice-stop-wrap {
  position: relative;
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
}

.voice-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--accent);
  animation: voice-ring 1.4s ease-out infinite;
}

@keyframes voice-ring {
  from {
    transform: scale(1);
    opacity: 0.55;
  }

  to {
    transform: scale(1.55);
    opacity: 0;
  }
}

.voice-stop {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
}

.voice-stop span {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  background: var(--ink);
}

.voice-level {
  flex: 1 1 auto;
  min-width: 0;
  height: 56px;
  display: flex;
  align-items: center;
  gap: 3px;
}

.voice-level span {
  flex: 1 1 0;
  height: 10%;
  border-radius: 2px;
  background: var(--accent);
}

.voice-clock {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  font-variant-numeric: tabular-nums;
}

.voice-clock > span:first-child {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 20px;
  font-weight: 600;
}

.voice-clock .muted {
  font-size: 12px;
}

.voice-blink {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--error);
  animation: recording-pulse 1.1s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .voice-ring,
  .voice-blink,
  .voice-caret {
    animation: none;
  }
}

.voice-language {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  border: 0;
}

.voice-language legend {
  float: left;
  margin-right: var(--space-1);
  font-size: 14px;
  color: var(--muted);
}

/* The draft while the client talks: words the browser may still change are grey. */
.voice-transcript {
  min-height: 110px;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4) 18px;
  box-sizing: border-box;
  border-radius: var(--radius-m);
  background: var(--canvas);
}

.voice-transcript-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.voice-transcript p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
}

.voice-transcript-guess {
  color: var(--muted);
}

.voice-caret {
  display: inline-block;
  width: 2px;
  height: 18px;
  margin-left: 2px;
  vertical-align: -3px;
  background: currentColor;
  animation: recording-pulse 1.1s ease-in-out infinite;
}

.voice-heard-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: 14px;
}

.voice-heard-head label {
  font-weight: 500;
}

.voice-badge {
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
}

.voice-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.voice-aside {
  margin-left: auto;
  font-size: 13px;
}

/* The recording to listen back to: a dark strip with the sound drawn as bars. */
.voice-player {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: var(--space-3) 14px;
  border-radius: var(--radius-m);
  background: var(--ink);
  color: var(--viewer-muted);
}

.voice-player .player-play-big {
  flex-basis: var(--tap);
  width: var(--tap);
  height: var(--tap);
}

.voice-player .player-wave {
  height: 36px;
}

.voice-player .player-bars {
  gap: 2px;
}

.voice-player .player-time {
  font-size: 13px;
}

.voice-types {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  border: 0;
}

.voice-types legend {
  float: left;
  margin-right: var(--space-1);
  padding: 0;
  font-size: 14px;
  font-weight: 500;
}

.voice-send {
  padding-top: var(--space-3);
  border-top: 1px solid var(--hairline-soft);
}

.voice-switch {
  margin-left: auto;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 14px;
  text-decoration: underline;
  cursor: pointer;
}

/* On a phone the window takes the whole screen, dark while listening, as in the mockup. */
@media (max-width: 640px) {
  .voice {
    width: 100vw;
    max-width: none;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: var(--space-5);
    border-radius: 0;
  }

  .voice[data-stage="ready"],
  .voice[data-stage="recording"] {
    background: var(--ink);
    color: var(--surface);
  }

  .voice[data-stage="ready"] .voice-heading p,
  .voice[data-stage="recording"] .voice-heading p,
  .voice[data-stage="ready"] .voice-hint,
  .voice[data-stage="ready"] .voice-language legend,
  .voice[data-stage="recording"] .muted {
    color: var(--muted-on-panel);
  }

  .voice[data-stage="ready"] .voice-close,
  .voice[data-stage="recording"] .voice-close {
    border-color: var(--panel-raised);
  }

  /* On the dark screen the picked language is the light chip. */
  .voice-language .chip-choice {
    border-color: var(--panel-raised);
    background: transparent;
    color: var(--surface);
  }

  .voice-language .chip-choice:has(input:checked) {
    border-color: var(--surface);
    background: var(--surface);
    color: var(--ink);
  }

  .voice[data-stage="ready"] .voice-tips,
  .voice[data-stage="recording"] .voice-transcript {
    background: var(--panel-raised);
  }

  .voice[data-stage="recording"] .voice-transcript {
    flex: 1 1 auto;
  }

  .voice-ready {
    flex: 1 1 auto;
    justify-content: center;
  }

  .voice-mic {
    width: 128px;
    height: 128px;
    box-shadow: 0 0 0 12px rgb(255 86 0 / 18%);
  }

  .voice-live {
    flex-wrap: wrap;
    justify-content: center;
  }

  .voice-level {
    flex-basis: 100%;
    order: 3;
  }

  .voice[data-stage="recording"] .btn-ghost {
    color: var(--surface);
  }

  .voice[data-stage="recording"] .btn-dark {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--ink);
  }

  .voice-aside,
  .voice-switch {
    margin-left: 0;
  }
}

/* Files as tiles with a preview (mockup: Attachment previews): 120 × 90 in the request, 72 × 54
   in a reply, 56 × 42 beside a name in "All attachments", 96 × 72 without names on a phone. */
.tiles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.tile {
  --tile-w: 120px;
  --tile-h: 90px;
  width: var(--tile-w);
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--ink);
  text-decoration: none;
}

.tiles-small .tile {
  --tile-w: 72px;
  --tile-h: 54px;
}

.files-row-picture .tile {
  --tile-w: 56px;
  --tile-h: 42px;
  flex: 0 0 auto;
}

.tile-picture {
  position: relative;
  height: var(--tile-h);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  overflow: hidden;
  box-sizing: border-box;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-s);
  background: var(--canvas);
  color: var(--muted);
}

.tile:hover .tile-picture,
.tile:focus-visible .tile-picture {
  border-color: var(--ink);
}

.tile:focus-visible {
  outline: none;
}

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

.tile-picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  background: var(--surface);
}

/* A file whose preview is still being made, or that has none: its extension on a dashed card. */
.tile-picture:not(.has-preview, .tile-video, .tile-audio, .tile-text) {
  border-style: dashed;
  border-color: var(--hairline-strong);
}

.tile-ext {
  font-size: 11px;
  font-weight: 600;
}

.tile-badge {
  position: absolute;
  left: 6px;
  bottom: 6px;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--surface-2);
  color: var(--ink);
  font-size: 10px;
  font-weight: 700;
}

.tile-badge-pdf {
  background: var(--error);
  color: var(--surface);
}

.tile-text {
  align-items: stretch;
  justify-content: flex-start;
  background: var(--surface);
}

.tile-excerpt {
  padding: 8px 9px;
  overflow: hidden;
  white-space: pre;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 8px;
  line-height: 1.35;
  color: var(--muted);
}

.tile-play {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgb(17 17 17 / 85%);
  color: var(--surface);
}

.tile-audio {
  flex-direction: row;
  gap: 3px;
  border-color: var(--ink);
  background: var(--ink);
}

.tile-bars {
  height: 50%;
  display: flex;
  align-items: center;
  gap: 3px;
}

.tile-bars span {
  width: 3px;
  border-radius: 2px;
  background: var(--accent);
}

.tile-name,
.tile-meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tile-name {
  font-size: 13px;
  font-weight: 500;
}

.tile-meta {
  margin-top: -4px;
  font-size: 12px;
  color: var(--muted);
}

/* Small tiles show only the picture; the name is in the tooltip and in the viewer. */
.tiles-small .tile-name,
.tiles-small .tile-meta,
.files-row-picture .tile-name,
.files-row-picture .tile-meta {
  display: none;
}

/* The first words of the first lines: enough to tell a text file from an empty one. */
.tiles-small .tile-excerpt,
.files-row-picture .tile-excerpt {
  padding: 4px 5px;
}

.tiles-small .tile-badge,
.files-row-picture .tile-badge {
  left: 3px;
  bottom: 3px;
  padding: 0 3px;
  border-radius: 3px;
  font-size: 8px;
}

.tiles-small .tile-play,
.files-row-picture .tile-play {
  width: 20px;
  height: 20px;
}

.tiles-small .tile-bars,
.files-row-picture .tile-bars {
  gap: 2px;
}

.tiles-small .tile-bars span,
.files-row-picture .tile-bars span {
  width: 2px;
}

@media (max-width: 640px) {
  .tiles:not(.tiles-small, .tiles-form) {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-right: calc(-1 * var(--space-4));
    padding-right: var(--space-4);
  }

  .tiles:not(.tiles-small, .tiles-form) .tile {
    --tile-w: 96px;
    --tile-h: 72px;
    flex: 0 0 auto;
  }

  .tiles:not(.tiles-form) .tile-name,
  .tiles:not(.tiles-form) .tile-meta {
    display: none;
  }
}

/* Tiles in a form: files chosen to send, with × to take one out, and files already on the
   request in the edit form, with Remove and Undo. 96 × 72 everywhere, names kept on a phone:
   "Compressing…" and "Will be removed" are read there too. */
.tiles-form {
  gap: 18px;
  padding-top: 10px;
}

.tiles-form:empty {
  display: none;
}

.tiles-form .tile {
  --tile-w: 96px;
  --tile-h: 72px;
  position: relative;
}

.tile-remove {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 2px solid var(--surface);
  border-radius: 50%;
  background: var(--ink);
  color: var(--surface);
  cursor: pointer;
}

/* The circle is small so it does not hide the picture; the finger gets 44 px all the same. */
.tile-remove::before {
  content: "";
  position: absolute;
  inset: -8px;
}

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

/* A video's frame with the play button over its middle. */
.has-preview .tile-play {
  position: absolute;
  inset: 0;
  margin: auto;
}

.tile-picture:has(.tile-progress)::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(245 241 236 / 70%);
}

.tile-progress {
  position: absolute;
  z-index: 1;
  left: 8px;
  right: 8px;
  bottom: 10px;
  height: 4px;
  border-radius: 2px;
  background: var(--hairline);
}

.tile-progress-bar {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}

.tile-percent {
  position: absolute;
  z-index: 1;
  left: 8px;
  top: 8px;
  color: var(--ink);
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.tile-removable {
  width: 96px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tile-toggle {
  align-self: flex-start;
  font-size: 12px;
  cursor: pointer;
}

.tile-toggle-off {
  display: inline-block;
  padding: 3px 10px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-weight: 500;
}

.tile-toggle-on {
  display: none;
  color: var(--error);
}

.tile-undo {
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
}

.tile-toggle:has(input:focus-visible) {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-radius: 4px;
}

.tile-removable:has(input:checked) .tile-toggle-off {
  display: none;
}

.tile-removable:has(input:checked) .tile-toggle-on {
  display: inline;
}

.tile-removable:has(input:checked) .tile-picture {
  opacity: 0.45;
}

.tile-removable:has(input:checked) .tile-name {
  color: var(--muted);
  text-decoration: line-through;
}

/* The PM's "No reply needed" under the client's reply: takes it out of Needs you. */
.handled-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  font-size: 14px;
}

.triage-action {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* The PM's internal notes: yellow, so a note never passes for a reply. */
.message-note {
  background: #fffbea;
  border: 1px solid #e9d58a;
}

.note-privacy {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 12px;
  color: #6b5800;
}

.composer-kind {
  align-self: flex-start;
  margin: 0;
  border: 0;
}

.composer-kind input {
  position: absolute;
  opacity: 0;
}

.composer-kind label {
  white-space: nowrap;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  cursor: pointer;
}

.composer-kind label:has(input:checked) {
  background: var(--ink);
  color: var(--surface);
}

.composer-kind label:has(input[value="note"]:checked) {
  background: #fff1b8;
  color: var(--ink);
}

.composer-kind label:has(input:focus-visible) {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
}

/* Writing a note: the box turns yellow, and what only makes sense for a reply hides. */
.composer .note-only {
  display: none;
}

.composer:has(input[name="kind"][value="note"]:checked) {
  background: #fffbea;
  border-color: #e9d58a;
}

.composer:has(input[name="kind"][value="note"]:checked) .note-only {
  display: inline;
}

.composer:has(input[name="kind"][value="note"]:checked) p.note-only {
  display: flex;
}

.composer:has(input[name="kind"][value="note"]:checked) .reply-only {
  display: none;
}

/* PM · Clients: companies on the left, the chosen one on the right (mockup 5.0 · Clients).
   Phones show one at a time: the list on /clients/, a company on /clients/<id>/. */
.clients {
  display: grid;
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
  grid-template-areas:
    "header header"
    "list detail";
  gap: var(--space-5) 20px;
  align-items: start;
}

.clients-header {
  grid-area: header;
}

.clients > .empty-state {
  grid-column: 1 / -1;
}

.company-list {
  grid-area: list;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.company-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 14px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-m);
  text-decoration: none;
}

.company-item:hover {
  color: var(--ink);
  border-color: var(--ink);
}

.company-item[aria-current="page"] {
  background: var(--surface);
  border: 1.5px solid var(--ink);
}

.company-mark {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 700;
}

.company-mark-large {
  flex-basis: 48px;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-m);
  font-size: 20px;
}

.company-item-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.company-item-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.company-item-name {
  min-width: 0;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.company-item-meta {
  font-size: 13px;
  color: var(--muted);
}

.pending-badge {
  flex: 0 0 auto;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.company-item-chevron,
.back-link {
  display: none;
}

.company-detail {
  grid-area: detail;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.company-detail > .hint {
  margin: 0;
}

.company-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
}

.company-head-text {
  flex: 1 1 220px;
  min-width: 0;
}

.company-head-text p {
  margin: 2px 0 0;
  font-size: 14px;
}

.people {
  padding: 0;
  overflow: hidden;
}

.people-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
  padding: 14px 18px;
  border-bottom: 1px solid var(--hairline-soft);
}

.people-head h3 {
  flex: 1 1 auto;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
}

.people-head h3 .muted {
  font-weight: 400;
}

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

.people-table {
  width: 100%;
  /* Fixed columns: a long email is cut with an ellipsis instead of squeezing the others. */
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 14px;
  text-align: left;
}

.people-table th,
.people-table td {
  padding: var(--space-3) 14px;
  border-top: 1px solid var(--hairline-soft);
  vertical-align: middle;
}

.people-table thead th {
  padding-block: 10px;
  border-top: 0;
  background: #faf8f5;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.people-table th:first-child {
  width: 32%;
}

.people-table th:nth-child(2) {
  width: 18%;
}

.people-table th:nth-child(3) {
  width: 22%;
}

.person-access-head {
  text-align: right;
}

.person-access {
  text-align: right;
  white-space: nowrap;
}

.person-access form {
  display: inline;
}

.person-when {
  white-space: nowrap;
}

.person {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.person-avatar {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--surface-2);
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 600;
}

.person-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.person-name {
  font-weight: 500;
}

.person-email {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.person-notify {
  font-size: 13px;
  color: var(--ink-soft);
}

.person-status {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

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

/* Not signed in yet: a dashed avatar and a muted name, like an empty seat. */
.person-invited .person-avatar,
.person-link_expired .person-avatar,
.person-not_invited .person-avatar {
  background: var(--surface);
  border: 1px dashed #9c9fa5;
}

.person-invited .person-name,
.person-link_expired .person-name,
.person-not_invited .person-name {
  color: var(--muted);
}

.person-no_access td:not(.person-access) {
  opacity: 0.6;
}

.status-person-active { background: var(--success-soft); color: var(--success-text); }
.status-person-invited { background: var(--surface-2); }
.status-person-link_expired { background: var(--accent-soft); color: #8a3200; }
.status-person-not_invited { background: var(--surface); border: 1px dashed var(--hairline-strong); }
.status-person-no_access { background: var(--canvas); color: var(--muted); }

.people-empty {
  padding: var(--space-5) 18px var(--space-6);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

.people-empty p {
  margin: 0;
}

.btn-small {
  min-height: 36px;
  padding: 0 var(--space-3);
  font-size: 13px;
}

.btn-danger {
  background: var(--error);
  border-color: var(--error);
  color: #ffffff;
  font-weight: 600;
}

.btn-danger:hover {
  background: #a51717;
  color: #ffffff;
}

.text-danger {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 var(--space-1);
  color: var(--error);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
}

.text-danger:hover {
  color: #a51717;
  text-decoration: underline;
}

.banner-error {
  background: var(--error-soft);
  border-color: var(--error);
}

.note-warning {
  padding: 10px var(--space-3);
  border: 1px solid #ffd9c4;
  border-radius: 10px;
  background: var(--accent-soft);
  font-size: 13px;
  line-height: 1.45;
}

.confirm-row td {
  padding-top: 0;
  border-top: 0;
}

.confirm {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 14px;
  border: 1px solid #f1b8b8;
  border-radius: var(--radius-m);
  background: var(--error-soft);
  text-align: left;
}

.confirm p {
  flex: 1 1 300px;
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
}

.invite-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  border: 1.5px solid var(--ink);
  padding: 18px 20px;
}

.invite-form-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.invite-form-head h3 {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
}

.icon-link {
  width: var(--tap);
  height: var(--tap);
  display: grid;
  place-items: center;
  margin: -10px -10px -10px 0;
  color: var(--muted);
  font-size: 22px;
  text-decoration: none;
}

.invite-notify {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) 18px;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 14px;
}

.invite-notify legend {
  padding: 0 0 6px;
  font-size: 13px;
  font-weight: 500;
}

.choice-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
}

.invite-form-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding-top: var(--space-3);
  border-top: 1px solid var(--hairline-soft);
}

.invite-form-foot .hint {
  flex: 1 1 260px;
}

.clients-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

/* A window over the page, drawn by the server: no scripts, the address opens and closes it. */
.dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  /* A <dialog> covering the whole screen and dimming it itself: the browser's own box,
     margins and ::backdrop are switched off. */
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  border: 0;
  color: inherit;
  display: grid;
  place-items: center;
  padding: var(--space-5);
  background: rgba(17, 17, 17, 0.55);
  overflow-y: auto;
}

.dialog-backdrop::backdrop {
  background: transparent;
}

.dialog {
  width: min(720px, 100%);
  max-height: calc(100dvh - 2 * var(--space-5));
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: 20px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.dialog-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px var(--space-5);
  border-bottom: 1px solid var(--hairline-soft);
}

.dialog-title {
  flex: 1 1 auto;
}

.dialog-title p {
  margin: 2px 0 0;
  font-size: 14px;
}

.dialog-body {
  padding: 20px var(--space-5);
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow-y: auto;
}

.dialog-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.dialog-section + .dialog-section {
  padding-top: 18px;
  border-top: 1px solid var(--hairline-soft);
}

.dialog-section h3 {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
}

.dialog-section > .hint {
  margin: 0;
}

.dialog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-3);
}

.swatches {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 6px;
  margin: 0;
  padding: 0;
  border: 0;
}

.swatches legend {
  padding: 0;
  font-size: 14px;
  font-weight: 500;
}

.swatches .hint {
  flex-basis: 100%;
}

.swatch {
  width: var(--tap);
  height: var(--tap);
  display: grid;
  place-items: center;
  cursor: pointer;
}

.swatch input {
  appearance: none;
  margin: 0;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-s);
  background: var(--swatch);
  cursor: pointer;
}

.swatch input:checked {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink);
}

.swatch input:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}

.dialog-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--hairline-soft);
  background: #faf8f5;
}

.dialog-foot .hint {
  flex: 1 1 260px;
}

@media (max-width: 899px) {
  .clients {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "header" "list" "detail";
  }

  /* One screen at a time: the list, or the company the PM opened. */
  .clients:not(.clients-picked) .company-detail,
  .clients-picked .company-list,
  .clients-picked .clients-header,
  .person-no_access .person-notify {
    display: none;
  }

  .clients-picked {
    grid-template-areas: "detail";
  }

  .dialog-backdrop {
    padding: 0;
    place-items: stretch;
  }

  .dialog {
    width: 100%;
    max-height: none;
    min-height: 100dvh;
    border-radius: 0;
  }

  .dialog-body {
    flex: 1 1 auto;
  }

  .company-item {
    background: var(--surface);
    padding: 14px;
  }

  .company-item[aria-current="page"] {
    border: 1px solid var(--hairline);
  }

  .company-item-chevron {
    display: block;
    flex: 0 0 16px;
  }

  .back-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    align-self: flex-start;
    min-height: var(--tap);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
  }

  .company-head .btn {
    flex: 1 1 100%;
  }

  /* People become cards: name and email on top, notifications and status under them. */
  .people-table thead {
    display: none;
  }

  .people-table,
  .people-table tbody,
  .people-table tr,
  .people-table td {
    display: block;
  }

  .people-table tr {
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--hairline-soft);
  }

  .people-table td {
    padding: 0;
    border: 0;
  }

  .people-table td + td {
    margin-top: var(--space-2);
    padding-left: 42px;
  }

  .person-access {
    text-align: left;
  }

  .person-access:empty,
  .confirm-row td + td {
    display: none;
  }

  .confirm-row td {
    padding-left: 0;
  }
}

/* A part of the page swapped in place by swap-page.js; it adds no box of its own. */
.region {
  display: contents;
}

[data-region="results"][aria-busy="true"] {
  opacity: 0.6;
  transition: opacity 120ms 150ms;
}

/* Person page (mockup 5.0 · Person) */

.person-page {
  max-width: 1120px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
}

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

.breadcrumb [aria-current] {
  color: var(--ink);
}

.person-page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.person-avatar-large {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  font-size: 20px;
}

.person-page-title {
  flex: 1 1 280px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.person-page-title h1 {
  margin: 0;
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.5px;
  overflow-wrap: anywhere;
}

.person-page-title p {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.person-page-columns {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-4);
}

.person-page-columns h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
}

.person-profile {
  flex: 999 1 420px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 20px;
}

.person-profile-fields {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.person-profile-fields .field {
  flex: 1 1 220px;
  min-width: 0;
}

.field-label {
  font-size: 15px;
  font-weight: 500;
}

.read-only-value {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 0 14px;
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius-s);
  background: #faf8f5;
  overflow-wrap: anywhere;
}

.person-profile .choices {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.choice-with-hint {
  align-items: flex-start;
}

.choice-with-hint input {
  flex: 0 0 18px;
  margin-top: 2px;
}

.choice-with-hint > span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.choice-title {
  font-size: 15px;
  font-weight: 500;
}

/* Your account (mockup 3.6): two forms stacked where the person page has one. */
.account-main {
  flex: 999 1 420px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.account-main .person-profile {
  flex: none;
}

.account-section-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.account-section-head p {
  margin: 0;
}

.device-here {
  color: var(--success-text);
}

.person-profile-actions {
  display: flex;
  justify-content: flex-end;
}

.person-side {
  flex: 1 1 300px;
  max-width: 400px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.person-side .card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 20px;
}

.person-side p {
  margin: 0;
}

.person-numbers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.person-numbers p {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.person-numbers strong {
  font-size: 24px;
  font-weight: 500;
}

.person-recent {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
}

.person-access-danger {
  border-color: #f1b8b8;
}

.person-access-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.person-access-buttons > * {
  flex: 1 1 auto;
}

.person-access-buttons .btn {
  white-space: nowrap;
}

.person-access-buttons .btn,
.person-access-card > .btn,
.person-side form > .btn {
  width: 100%;
}

@media (max-width: 899px) {
  .person-side {
    max-width: none;
  }
}

@media (max-width: 640px) {
  .person-page-title h1 {
    font-size: 22px;
  }
}

a.person-name {
  color: var(--ink);
  text-decoration: none;
}

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

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

.device-list li,
.device-none {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--space-2) 0;
  border-top: 1px solid var(--hairline-soft);
}

.device-none {
  padding-top: 10px;
  font-size: 14px;
}

.device-mark {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-s);
  background: var(--canvas);
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
}

.device-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.device-name {
  font-size: 14px;
  font-weight: 500;
}

/* Create Jira task (mockup 5.1): type next to summary, the description in Jira's markup. */
.jira-task-project {
  margin: 0;
  font-size: 14px;
}

.jira-task-grid {
  grid-template-columns: minmax(160px, 200px) minmax(0, 1fr);
}

.jira-markup {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.55;
}

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

/* A button at work (busy-button.js): the sending spinner's orbit, small, before the words. */
.btn.is-busy {
  gap: var(--space-2);
  cursor: progress;
}

.btn.is-busy::before {
  content: "";
  width: 14px;
  height: 14px;
  flex: none;
  border: 1.5px dashed currentColor;
  border-top: 1.5px solid currentColor;
  border-radius: 50%;
  animation: dmn-orbit 1.2s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .btn.is-busy::before {
    animation: none;
  }
}

/* Existing task (mockup 5.1): the search above the list of open tasks. */
.jira-find {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.jira-find label {
  font-size: 14px;
  font-weight: 500;
}

.jira-find-row {
  display: flex;
  gap: var(--space-2);
}

.jira-find-row .input {
  flex: 1 1 auto;
  min-width: 0;
}

.task-choices {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  border: 0;
}

.task-choices legend {
  margin-bottom: 6px;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 500;
}

.task-choice {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--tap);
  padding: 10px 12px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-s);
  background: var(--surface);
  cursor: pointer;
}

.task-choice:has(input:checked) {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}

.task-choice.is-taken {
  background: var(--canvas);
  color: var(--ink-soft);
  cursor: not-allowed;
}

.task-choice-key {
  flex: none;
  min-width: 72px;
  font-weight: 600;
}

.task-choice-text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

@media (max-width: 640px) {
  .task-choice {
    flex-wrap: wrap;
  }
}

@media (max-width: 640px) {
  /* On a phone the New task / Existing task tabs take their own row under the title. */
  .jira-task .dialog-head {
    flex-wrap: wrap;
  }

  .jira-task .dialog-head .dialog-title {
    flex: 1 1 0;
    min-width: 0;
  }

  .jira-task .dialog-head .segmented {
    order: 3;
    flex: 1 1 100%;
    flex-wrap: nowrap;
  }

  .jira-task .dialog-head .segmented a {
    flex: 1;
    text-align: center;
  }
}

/* Attachments to Jira in the Create Jira task window: a tile, the name, the way it goes. */
.jira-files {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.jira-file {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.jira-file-text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}

.segmented-choice {
  flex: none;
}

.segmented-choice label {
  flex: none;
  padding: 7px 12px;
  font-size: 13px;
  white-space: nowrap;
}

.public-link .inline-form {
  display: inline;
}

@media (max-width: 640px) {
  .jira-file {
    flex-wrap: wrap;
  }
}


/* Create Jira task as in mockup 5.1: a wide window, the task on the left, attachments and the
   reply on a light panel on the right. On a phone the columns stack. */
.dialog-wide {
  width: min(1040px, 100%);
}

.jira-columns {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 0;
  padding: 0;
}

.jira-main,
.jira-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: 22px 28px;
}

.jira-side {
  border-left: 1px solid var(--hairline-soft);
  background: var(--surface-side);
}

.jira-side h3,
.jira-reply-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}

.jira-attachments,
.jira-reply,
.jira-picked {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.jira-reply {
  padding-top: var(--space-4);
  border-top: 1px solid var(--hairline-soft);
}

.jira-attachments + .jira-reply,
.jira-picked + .jira-reply {
  margin-top: 0;
}

.jira-file {
  padding: 10px 12px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--surface);
}

.jira-labels {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: 13px;
}

.jira-labels > span:first-child {
  font-weight: 500;
}

.chip-label {
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
}

.jira-sees {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: 8px 10px;
  border: 1px dashed var(--hairline-strong);
  border-radius: var(--radius-s);
  background: var(--surface);
  color: var(--ink-soft);
  font-size: 13px;
}

.jira-sees strong {
  color: var(--ink);
}

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

  .jira-side {
    border-top: 1px solid var(--hairline-soft);
    border-left: 0;
  }

  .jira-main,
  .jira-side {
    padding: 20px var(--space-5);
  }
}

/* A long file name ends in "…" rather than breaking mid-word; the full name is its title. */
.jira-file-text > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The chosen way of a file is filled black, as in mockup 5.1. */
.segmented-choice label:has(input:checked) {
  background: var(--ink);
  color: var(--surface);
}

/* PM · Logs (#16c, mockup 4.x · PM logs): runs on the left, attention and mapping on the right. */
.nav a {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.nav-badge {
  min-width: 18px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--error);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

.sync-line {
  color: var(--muted-on-panel);
  text-decoration: none;
  font-size: 12px;
}

.sync-line:hover {
  color: #ffffff;
}

.sync-line-bad {
  color: #ff8a8a;
}

.logs {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.logs-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) 20px;
}

.logs-heading {
  flex: 1 1 320px;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.logs-heading h1 {
  font-size: 28px;
}

.logs-heading p {
  margin: 0;
  font-size: 14px;
}

.sync-box {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-m);
  padding: 10px 10px 10px var(--space-4);
}

.sync-box-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
}

.sync-box-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
}

.sync-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #0bdf50;
}

.sync-dot-bad {
  background: var(--error);
}

/* Runs on the left, the side cards on the right. On a phone the cards stack around the runs:
   what needs attention comes first, the mapping, a reference, last. */
.logs-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "runs attention"
    "runs mapping";
  gap: 18px;
  align-items: start;
}

.logs-runs {
  grid-area: runs;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.logs-side {
  display: contents;
}

.attention-card {
  grid-area: attention;
}

.mapping-card {
  grid-area: mapping;
}

.logs-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.logs-filters .chip {
  min-height: 36px;
  font-size: 13px;
  text-decoration: none;
}

.logs-filters .chip[aria-current="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: #ffffff;
}

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

.run-day {
  padding: 10px 18px;
  background: var(--surface-side);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.run + .run,
.run-day + .run,
.run + .run-day {
  border-top: 1px solid var(--hairline-soft);
}

.run-summary {
  list-style: none;
  display: grid;
  grid-template-columns: 48px 22px minmax(0, 1fr) auto 14px;
  gap: var(--space-3);
  align-items: center;
  padding: 14px 18px;
  cursor: pointer;
}

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

details[open] > .run-summary {
  background: var(--surface-side);
}

details[open] .run-chevron {
  transform: rotate(180deg);
}

.run-time {
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.run-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
}

.run-icon-ok {
  background: var(--success-soft);
  color: var(--success-text);
}

.run-icon-warn {
  background: var(--accent-soft);
  color: var(--accent-text);
}

.run-icon-fail {
  background: var(--error-soft);
  color: var(--error);
}

.run-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.run-title {
  font-size: 14px;
  font-weight: 500;
}

.run-sub,
.run-meta {
  font-size: 12px;
  overflow-wrap: anywhere;
}

.run-meta {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

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

.run-events {
  list-style: none;
  margin: 0;
  padding: 0 18px var(--space-4) 100px;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.run-event {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--space-3) 14px;
  border-radius: var(--radius-m);
  border: 1px solid var(--hairline-soft);
  font-size: 13px;
}

.run-event-problem {
  background: var(--error-soft);
  border-color: #f1b8b8;
}

.run-event-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.run-event-request {
  margin-left: auto;
  font-size: 12px;
  color: var(--muted);
}

.run-event-effect {
  line-height: 1.45;
  color: var(--ink-soft);
}

/* Logs tabs: Jira sync, Emails (mockup 4.x · PM logs). */
.log-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--hairline);
  overflow-x: auto;
}

.log-tabs a {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.log-tabs a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

/* Logs · Emails: today's count against the plan's daily limit, and the pause banner. */
.email-count {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding: 12px 16px;
}

.email-count-number {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
}

.email-count-number strong {
  font-size: 22px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.email-count-number strong .muted {
  font-size: 14px;
  font-weight: 400;
}

.email-count-bar {
  flex: 1 1 200px;
  height: 8px;
  border-radius: 9999px;
  background: var(--hairline-soft);
  overflow: hidden;
}

.email-count-bar span {
  display: block;
  height: 100%;
  border-radius: 9999px;
  background: var(--ink);
}

.email-count-over .email-count-bar span {
  background: #c41c1c;
}

.email-count-note {
  flex: 1 1 100%;
  font-size: 13px;
}

.email-pause {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}

.email-pause > span {
  flex: 1 1 360px;
}

/* Logs · Emails: one row per email, five columns; stacked on a phone. */
.email-log {
  padding: 0;
  overflow: hidden;
}

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

.email-log-row {
  display: grid;
  grid-template-columns: 64px 120px minmax(0, 1.2fr) minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 12px 18px;
  border-top: 1px solid var(--hairline-soft);
  font-size: 13px;
}

.email-log-head {
  border-top: 0;
  padding: 10px 18px;
  background: #faf8f5;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.email-log-problem {
  background: #fffafa;
}

.email-log-time {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.email-log-who {
  overflow-wrap: anywhere;
}

.email-log-details {
  color: var(--ink-soft);
  line-height: 1.4;
}

.email-log-tech {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.email-status {
  font-size: 12px;
  font-weight: 600;
  border-radius: 9999px;
  padding: 2px 8px;
  white-space: nowrap;
}

.email-status-failed,
.email-status-bounced { background: #fdecec; color: #c41c1c; }
.email-status-delivered { background: var(--success-soft); color: var(--success-text); }
.email-status-sent { background: var(--surface-2); color: var(--ink); }
.email-status-spam { background: var(--accent-soft); color: #b33a00; }

.notify-auto-off {
  font-size: 13px;
  line-height: 1.45;
  color: #8a2c00;
  background: var(--accent-soft);
  border: 1px solid #ffc9a8;
  border-radius: var(--radius-m);
  padding: 10px 12px;
}

@media (max-width: 720px) {
  .email-log-head {
    display: none;
  }

  .email-log-row {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "time status"
      "who who"
      "details details"
      "tech tech";
    gap: 4px 10px;
  }

  .email-log-time { grid-area: time; }
  .email-log-row > :nth-child(2) { grid-area: status; }
  .email-log-who { grid-area: who; }
  .email-log-details { grid-area: details; }
  .email-log-tech { grid-area: tech; }
}

.logs-note {
  margin: 0;
  font-size: 13px;
}

.logs-side .card {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.logs-side h2 {
  font-size: 16px;
}

.attention-card {
  border: 1.5px solid var(--error);
}

.attention-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: 13px;
  line-height: 1.45;
}

.attention-item + .attention-item {
  border-top: 1px solid var(--hairline-soft);
  padding-top: 10px;
}

.attention-title {
  font-weight: 600;
  text-decoration: none;
}

.attention-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--space-1);
}

.mapping {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.mapping th {
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  padding: 6px 0;
}

.mapping td {
  padding: 6px 0;
  border-top: 1px solid var(--hairline-soft);
}

.mapping-arrow {
  width: 24px;
  color: var(--muted-on-panel);
}

.mapping-note {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
}

@media (max-width: 899px) {
  .sync-box {
    flex: 1 1 100%;
    justify-content: space-between;
  }

  .logs-body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas:
      "attention"
      "runs"
      "mapping";
  }

  .run-summary {
    grid-template-columns: 44px 22px minmax(0, 1fr) 14px;
  }

  .run-meta {
    display: none;
  }

  .run-events {
    padding-left: 18px;
  }
}