/* AIstap Workspace: styles.css
   Calm light theme (dark follows the system setting). Accent #2a78d6.
   Status colours always come with an icon and a text label (never colour alone). */

:root {
  color-scheme: light dark;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --bg: #f4f6f9;
  --surface: #ffffff;
  --surface-2: #f1f4f8;
  --border: #dde3ea;
  --border-strong: #c3ccd7;
  --text: #16202b;
  --text-2: #465261;
  --muted: #5a6574;
  --accent: #2a78d6;
  --accent-ink: #1c5fae;
  --accent-soft: #e9f1fc;
  --btn-primary: #1f69c2;
  --btn-primary-hover: #1a5aa8;
  --focus: #2a78d6;
  --call: #157a3c;
  --call-hover: #11652f;
  --danger: #b42318;
  --danger-ink: #8f1c13;
  --danger-soft: #fdeceb;
  --ok-ink: #17602f;
  --ok-soft: #e6f5ea;
  --ok-border: #b5dfc1;
  --warn-ink: #7a4a00;
  --warn-soft: #fff5de;
  --warn-border: #f0d49a;
  --free-bg: #e5f5e9;
  --free-border: #93cfa5;
  --free-fg: #165f35;
  --booked-bg: #e6effb;
  --booked-border: #9dc0ee;
  --booked-fg: #154c8e;
  --nl-bg: #f7f9fc;
  --weekend-bg: #fafbfd;
  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .07);
  --shadow-lg: 0 20px 50px rgba(15, 23, 42, .22);
  --topbar-h: 56px;
  /* the copilot's own colour: used only for its frame, so it is clear what is the copilot and what is not */
  --cp-ink: #4a2fb3;
  --cp-bar: #efeafd;
  --cp-border: #b7a6f3;
  --cp-mark: #5b3fd6;

  /* status: background / text / border */
  --st-new-bg: #eef2f7;        --st-new-fg: #334155;        --st-new-bd: #cfd8e3;
  --st-no_answer-bg: #fff4e0;  --st-no_answer-fg: #7a4800;  --st-no_answer-bd: #efd29b;
  --st-callback-bg: #f1ecfd;   --st-callback-fg: #5635bd;   --st-callback-bd: #d8ccf8;
  --st-interested-bg: #e1f5ef; --st-interested-fg: #0d6252; --st-interested-bd: #aee0d2;
  --st-booked-bg: #e6effb;     --st-booked-fg: #1c5fae;     --st-booked-bd: #b9d2f3;
  --st-not_interested-bg: #f1f2f4; --st-not_interested-fg: #4b5563; --st-not_interested-bd: #d7dbe1;
  --st-wrong_number-bg: #fff0e5;   --st-wrong_number-fg: #973a00;   --st-wrong_number-bd: #f3cba9;
  --st-client-bg: #e4f5e8;     --st-client-fg: #196b31;     --st-client-bd: #b3dfbf;
  --st-analysis_done-bg: #e2f3fa; --st-analysis_done-fg: #0b5872; --st-analysis_done-bd: #a8d9ec;
  --st-proposal-bg: #fbe9f3;   --st-proposal-fg: #8a1d58;   --st-proposal-bd: #efc0da;
  --st-lost-bg: #f5ecea;       --st-lost-fg: #7a2e24;       --st-lost-bd: #e3c5bf;
  /* charts (validated categorical slots 1-3, light surface) */
  --series-1: #2a78d6; --series-2: #eb6834; --series-3: #1baf7a;
  --viz-grid: #e3e8ee;
}

@media (prefers-color-scheme: dark) {
  :root {
    --cp-ink: #cfc3ff;
    --cp-bar: #261f45;
    --cp-border: #5b4bb0;
    --cp-mark: #6d55e0;
    --bg: #0e1319;
    --surface: #151c24;
    --surface-2: #1b242e;
    --border: #28333f;
    --border-strong: #3a4756;
    --text: #e6ebf1;
    --text-2: #b8c2ce;
    --muted: #9ba7b5;
    --accent-ink: #86b9f6;
    --accent-soft: rgba(42, 120, 214, .16);
    --btn-primary: #2468bc;
    --btn-primary-hover: #2f78d0;
    --call: #1c8445;
    --call-hover: #22964f;
    --danger: #c9302c;
    --danger-ink: #ffb4ab;
    --danger-soft: rgba(201, 48, 44, .16);
    --ok-ink: #8fe0a8;
    --ok-soft: rgba(34, 160, 80, .14);
    --ok-border: rgba(80, 200, 120, .35);
    --warn-ink: #f7cd7d;
    --warn-soft: rgba(245, 170, 30, .12);
    --warn-border: rgba(245, 170, 30, .35);
    --free-bg: rgba(40, 170, 90, .16);
    --free-border: rgba(90, 200, 130, .45);
    --free-fg: #9be3b3;
    --booked-bg: rgba(42, 120, 214, .22);
    --booked-border: rgba(110, 165, 235, .5);
    --booked-fg: #b9d5fb;
    --nl-bg: #18212a;
    --weekend-bg: #121820;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-lg: 0 20px 50px rgba(0, 0, 0, .55);
    --st-new-bg: rgba(148, 163, 184, .14);       --st-new-fg: #cfd8e3;       --st-new-bd: rgba(148, 163, 184, .35);
    --st-no_answer-bg: rgba(245, 158, 11, .14);  --st-no_answer-fg: #f6c877; --st-no_answer-bd: rgba(245, 158, 11, .4);
    --st-callback-bg: rgba(139, 92, 246, .18);   --st-callback-fg: #cbbdfd;  --st-callback-bd: rgba(139, 92, 246, .45);
    --st-interested-bg: rgba(20, 184, 166, .15); --st-interested-fg: #86e3d3; --st-interested-bd: rgba(20, 184, 166, .4);
    --st-booked-bg: rgba(42, 120, 214, .2);      --st-booked-fg: #a9cbf8;    --st-booked-bd: rgba(90, 150, 230, .45);
    --st-not_interested-bg: rgba(148, 163, 184, .1); --st-not_interested-fg: #b3bdc9; --st-not_interested-bd: rgba(148, 163, 184, .3);
    --st-wrong_number-bg: rgba(249, 115, 22, .15);   --st-wrong_number-fg: #fdbb85;   --st-wrong_number-bd: rgba(249, 115, 22, .4);
    --st-client-bg: rgba(34, 197, 94, .15);      --st-client-fg: #8feaae;    --st-client-bd: rgba(34, 197, 94, .4);
    --st-analysis_done-bg: rgba(14, 165, 233, .15); --st-analysis_done-fg: #8fd3f1; --st-analysis_done-bd: rgba(14, 165, 233, .4);
    --st-proposal-bg: rgba(219, 39, 119, .15);   --st-proposal-fg: #f5a6cf;  --st-proposal-bd: rgba(219, 39, 119, .4);
    --st-lost-bg: rgba(180, 83, 70, .16);        --st-lost-fg: #efb2a8;      --st-lost-bd: rgba(180, 83, 70, .42);
    --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70;
    --viz-grid: #2a3541;
  }
}

/* ---------------- base ---------------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 16px/1.5 var(--font);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { line-height: 1.25; color: var(--text); }
p { margin: 0 0 .6em; }
a { color: var(--accent-ink); text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.page-title:focus, main:focus { outline: none; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.offscreen { position: fixed; left: -9999px; top: 0; opacity: 0; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.mono { font-family: var(--mono); font-size: 13px; }
.icon {
  width: 1.15em; height: 1.15em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  vertical-align: -0.2em;
}
.icon-xs { width: .95em; height: .95em; }

/* ---------------- forms ---------------- */
input, select, textarea, button { font: inherit; }
input[type=text], input[type=email], input[type=password], input[type=search], input[type=tel], input[type=url],
input[type=datetime-local], input[type=date], select, textarea {
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 8px 11px;
  min-height: 42px;
  width: 100%;
  max-width: 100%;
}
select { width: auto; min-width: 150px; }
textarea { resize: vertical; line-height: 1.5; }
input[readonly], textarea[readonly] { background: var(--surface-2); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.field { display: grid; gap: 5px; margin-bottom: 14px; min-width: 0; }
.field > label, .label-like, fieldset.field > legend { font-weight: 650; font-size: 15px; }
.optional { font-weight: 400; color: var(--muted); }
.btn-inline { justify-self: start; text-align: left; padding-left: 4px; }
.hint { font-size: 14px; color: var(--muted); margin: 0; }
.form-error { color: var(--danger); font-weight: 600; margin: 4px 0 0; min-height: 0; }
.form-error:empty { display: none; }
.form-ok { color: var(--ok-ink); font-weight: 600; margin: 8px 0 0; }
.form-ok:empty { display: none; }
.form-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 8px; }
.form-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 16px; }
.inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
fieldset { min-width: 0; }
.radio-row { display: flex; gap: 20px; flex-wrap: wrap; }
.radio { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; min-height: 40px; }
.radio input { width: 20px; height: 20px; accent-color: var(--btn-primary); }
input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--btn-primary); }
.warn { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: var(--radius-sm);
  background: var(--warn-soft); border: 1px solid var(--warn-border); color: var(--warn-ink); font-weight: 600; margin: 0 0 12px; }
.hint-box { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius-sm);
  background: var(--accent-soft); color: var(--text); margin-bottom: 16px; }
.hint-box p { margin: 0; }
.hint-box .icon { color: var(--accent-ink); margin-top: 2px; }

/* ---------------- buttons ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 42px; padding: 8px 16px;
  border-radius: 10px; border: 1px solid transparent;
  font-weight: 650; line-height: 1.2; text-decoration: none; cursor: pointer;
  transition: background-color .12s, border-color .12s, box-shadow .12s;
}
.btn-primary { background: var(--btn-primary); color: #fff; }
.btn-primary:hover { background: var(--btn-primary-hover); }
.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.btn-secondary:hover { border-color: var(--accent); }
.btn-ghost { background: transparent; color: var(--accent-ink); border-color: transparent; }
.btn-ghost:hover { background: var(--accent-soft); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { filter: brightness(1.08); }
.btn-call { background: var(--call); color: #fff; }
.btn-call:hover { background: var(--call-hover); }
.btn-lg { min-height: 52px; padding: 12px 22px; font-size: 18px; border-radius: 12px; }
.btn-sm { min-height: 34px; padding: 5px 11px; font-size: 14px; border-radius: 8px; }
.btn-block { width: 100%; }
.btn:disabled, .btn[aria-disabled=true] { opacity: .55; cursor: not-allowed; }
.icon-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; border: 1px solid transparent;
  background: transparent; color: var(--text-2); cursor: pointer; }
.icon-btn:hover { background: var(--surface-2); color: var(--text); }

/* ---------------- badges, tags, pills ---------------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px; border: 1px solid;
  font-size: 14px; font-weight: 650; white-space: nowrap; line-height: 1.35;
}
.badge-lg { font-size: 15px; padding: 5px 13px; }
.status-new { background: var(--st-new-bg); color: var(--st-new-fg); border-color: var(--st-new-bd); }
.status-no_answer { background: var(--st-no_answer-bg); color: var(--st-no_answer-fg); border-color: var(--st-no_answer-bd); }
.status-callback { background: var(--st-callback-bg); color: var(--st-callback-fg); border-color: var(--st-callback-bd); }
.status-interested { background: var(--st-interested-bg); color: var(--st-interested-fg); border-color: var(--st-interested-bd); }
.status-booked { background: var(--st-booked-bg); color: var(--st-booked-fg); border-color: var(--st-booked-bd); }
.status-not_interested { background: var(--st-not_interested-bg); color: var(--st-not_interested-fg); border-color: var(--st-not_interested-bd); }
.status-wrong_number { background: var(--st-wrong_number-bg); color: var(--st-wrong_number-fg); border-color: var(--st-wrong_number-bd); }
.status-client { background: var(--st-client-bg); color: var(--st-client-fg); border-color: var(--st-client-bd); }
.status-analysis_done { background: var(--st-analysis_done-bg); color: var(--st-analysis_done-fg); border-color: var(--st-analysis_done-bd); }
.status-proposal { background: var(--st-proposal-bg); color: var(--st-proposal-fg); border-color: var(--st-proposal-bd); }
.status-lost { background: var(--st-lost-bg); color: var(--st-lost-fg); border-color: var(--st-lost-bd); }
.status-unknown { background: var(--surface-2); color: var(--text-2); border-color: var(--border); }
/* Do not contact: solid red, everywhere. */
.status-do_not_contact { background: var(--danger); color: #fff; border-color: var(--danger); }
.tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 6px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text-2);
  font-size: 13px; font-weight: 650; white-space: nowrap; line-height: 1.4;
}
.tag-muted { background: var(--surface-2); color: var(--text-2); }
.tag-gap { margin-left: 8px; }
.import-note { margin-top: 12px; }
.tag-nl { background: var(--st-wrong_number-bg); color: var(--st-wrong_number-fg); border-color: var(--st-wrong_number-bd); }
.tag-owner { background: var(--st-callback-bg); color: var(--st-callback-fg); border-color: var(--st-callback-bd); }
.tag-new { background: var(--st-client-bg); color: var(--st-client-fg); border-color: var(--st-client-bd); }
.bstat-booked { background: var(--st-booked-bg); color: var(--st-booked-fg); border-color: var(--st-booked-bd); }
.bstat-done { background: var(--st-client-bg); color: var(--st-client-fg); border-color: var(--st-client-bd); }
.bstat-no_show { background: var(--st-no_answer-bg); color: var(--st-no_answer-fg); border-color: var(--st-no_answer-bd); }
.bstat-cancelled { background: var(--st-not_interested-bg); color: var(--st-not_interested-fg); border-color: var(--st-not_interested-bd); text-decoration: line-through; }
.fit { font-size: 14px; color: var(--text-2); white-space: nowrap; }
.fit strong { font-size: 16px; color: var(--text); }
.fit-high strong { color: var(--ok-ink); }
.fit-low strong { color: var(--muted); }
.due { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 600; color: var(--text-2); white-space: nowrap; }
.due-over { color: var(--danger); }
.dnc-text { color: var(--danger); font-weight: 700; white-space: nowrap; display: inline-flex; gap: 5px; align-items: center; }
.dnc-banner {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 16px; margin: 12px 0; border-radius: var(--radius-sm);
  background: var(--danger-soft); border: 2px solid var(--danger); color: var(--danger-ink);
}
.dnc-banner .icon { width: 1.4em; height: 1.4em; color: var(--danger); margin-top: 1px; }
.unsafe-url { color: var(--text-2); overflow-wrap: anywhere; }
.ext { overflow-wrap: anywhere; }
.ext .icon { margin-left: 3px; }

/* ---------------- shell ---------------- */
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 14px; border-radius: 8px;
  background: var(--btn-primary); color: #fff; border: 0; font-weight: 700; }
.skip:focus { top: 10px; }
.mock-banner {
  background: #fff0b3; color: #4d3900; border-bottom: 1px solid #e3c65a;
  text-align: center; padding: 6px 14px; font-size: 14px; font-weight: 650;
}
@media (prefers-color-scheme: dark) { .mock-banner { background: #3a2f07; color: #f7dd84; border-color: #6b561b; } }
.boot { min-height: 60vh; display: grid; place-items: center; color: var(--muted); }
.topbar {
  position: sticky; top: 0; z-index: 30; height: var(--topbar-h);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 20px; background: var(--surface); border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 750; font-size: 17px; color: var(--text); letter-spacing: -.01em; }
.brand-mark { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--accent); color: #fff; font-weight: 800; font-size: 15px; }
.brand-sub { font-weight: 500; color: var(--muted); }
.me { display: flex; align-items: center; gap: 12px; }
.me-name { font-weight: 650; }
/* The first column is painted full height, so the sidebar colour never stops on long pages. */
.layout { display: grid; grid-template-columns: 224px minmax(0, 1fr); min-height: calc(100vh - var(--topbar-h));
  background: linear-gradient(90deg, var(--surface) 0 223px, var(--border) 223px 224px, transparent 224px); }
.sidebar {
  position: sticky; top: var(--topbar-h); align-self: start;
  height: calc(100vh - var(--topbar-h)); overflow-y: auto;
  padding: 18px 12px; background: var(--surface); border-right: 1px solid var(--border);
}
.nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.nav a {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; border-radius: 9px;
  color: var(--text-2); text-decoration: none; font-weight: 600;
}
.nav a:hover { background: var(--surface-2); color: var(--text); }
.nav a[aria-current=page] { background: var(--accent-soft); color: var(--accent-ink); box-shadow: inset 3px 0 0 var(--accent); }
.nav-sep { margin: 12px 12px 6px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
main { padding: 26px 34px 80px; min-width: 0; max-width: 1360px; width: 100%; }

/* ---------------- page pieces ---------------- */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.page-title { font-size: 28px; margin: 0; letter-spacing: -.015em; }
.page-sub { color: var(--text-2); margin: 4px 0 0; }
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 20px 22px; margin-bottom: 18px; min-width: 0;
}
.card-title { font-size: 18px; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.loading { display: flex; align-items: center; gap: 12px; padding: 40px 0; color: var(--muted); }
.spinner { width: 20px; height: 20px; border-radius: 50%; border: 3px solid var(--border); border-top-color: var(--accent); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 3s; } * { scroll-behavior: auto !important; } }
.empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 26px 12px; color: var(--muted); text-align: center; }
.empty .icon { width: 26px; height: 26px; }
.empty p { margin: 0; max-width: 46ch; }
.error-box { display: flex; gap: 12px; padding: 16px 18px; border-radius: var(--radius); border: 1px solid var(--danger); background: var(--danger-soft); color: var(--text); }
.error-box .icon { color: var(--danger); width: 22px; height: 22px; }
.error-title { font-weight: 700; }
.flash {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; margin-bottom: 18px; border-radius: var(--radius);
  background: var(--ok-soft); border: 1px solid var(--ok-border); color: var(--ok-ink);
}
.flash > .icon { width: 22px; height: 22px; }
.flash p { margin: 0; flex: 1 1 240px; font-weight: 650; }
.label-sm { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; }

/* ---------------- Today ---------------- */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.stat {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center;
  padding: 16px 18px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--shadow); color: var(--text); text-decoration: none;
}
.stat-link:hover { border-color: var(--accent); }
.stat-icon { grid-row: 1 / span 2; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-ink); }
.stat-icon .icon { width: 22px; height: 22px; }
.stat-num { font-size: 28px; font-weight: 750; line-height: 1.1; }
.stat-label { font-size: 14px; color: var(--text-2); font-weight: 600; }
.today-grid { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(290px, 1fr); gap: 20px; align-items: start; }
.next-call { border: 2px solid var(--accent); padding: 24px 26px; }
.eyebrow { display: inline-flex; align-items: center; gap: 7px; margin: 0; font-size: 14px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--accent-ink); }
.eyebrow-due { color: var(--danger); }
.nc-name { font-size: 30px; margin: 6px 0 10px; letter-spacing: -.02em; }
.nc-name a { color: var(--text); text-decoration: none; }
.nc-name a:hover { text-decoration: underline; }
.nc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; color: var(--text-2); margin-bottom: 12px; }
.nc-next, .nc-dm, .nc-hook { margin: 0 0 8px; }
.nc-dm { display: flex; gap: 8px; align-items: center; color: var(--text-2); font-weight: 600; }
.nc-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.opener {
  margin: 12px 0; padding: 14px 18px; border-left: 4px solid var(--accent);
  background: var(--accent-soft); border-radius: 0 10px 10px 0;
  font-size: 18px; line-height: 1.55; color: var(--text); overflow-wrap: anywhere;
}
.opener-lg { font-size: 19px; }
.queue { list-style: none; margin: 0; padding: 0; }
.queue li + li { border-top: 1px solid var(--border); }
.q-row {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) auto auto auto; gap: 12px; align-items: center;
  padding: 10px 8px; border-radius: 8px; color: inherit; text-decoration: none;
}
.q-row:hover { background: var(--surface-2); }
.q-num { color: var(--muted); font-weight: 700; text-align: right; }
.q-main { display: grid; min-width: 0; }
.q-name { font-weight: 650; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-sub { font-size: 14px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.blist { list-style: none; margin: 0; padding: 0; }
.blist li + li { border-top: 1px solid var(--border); }
.b-row {
  display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 2px 12px; align-items: start;
  width: 100%; padding: 10px 6px; border: 0; border-radius: 8px; background: none; color: inherit; text-align: left; cursor: pointer;
}
.b-row:hover { background: var(--surface-2); }
.b-when { grid-row: 1 / span 2; font-weight: 700; font-size: 14px; padding-top: 2px; }
.b-row > .tag { grid-column: 2; justify-self: start; }
.b-main { display: grid; min-width: 0; }
.b-company { font-weight: 650; overflow-wrap: anywhere; }
.b-sub { font-size: 14px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.later { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.later a { display: flex; gap: 12px; padding: 8px 6px; border-radius: 8px; color: var(--text); text-decoration: none; }
.later a:hover { background: var(--surface-2); }
.later-time { font-weight: 700; color: var(--st-callback-fg); min-width: 48px; }

/* ---------------- Companies ---------------- */
.filters { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; padding: 14px 18px; }
.filter { display: grid; gap: 4px; }
.filter > label { font-size: 13px; font-weight: 700; color: var(--text-2); }
.filter-search { flex: 1 1 260px; }
.search-wrap { position: relative; }
.search-wrap .icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.search-wrap input { padding-left: 38px; }
.filter-check { display: flex; align-items: center; gap: 8px; min-height: 42px; }
.filter-check label { font-weight: 600; font-size: 15px; color: var(--text); }
.table-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 8px; }
.table-top .count { margin: 0; }
.filter-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--st-callback-bd);
  background: var(--st-callback-bg); color: var(--st-callback-fg); font-weight: 650; font-size: 14px; cursor: pointer; }
.table-wrap { padding: 0; overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: 11px 12px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table thead th { font-size: 13px; font-weight: 700; color: var(--text-2); background: var(--surface-2); white-space: nowrap; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: var(--surface-2); }
.table-compact th, .table-compact td { padding: 7px 10px; font-size: 14px; }
.table-caption { caption-side: top; text-align: left; font-size: 14px; color: var(--muted); padding: 8px 0; }
.sort-btn { background: none; border: 0; padding: 0; color: inherit; font-weight: 700; cursor: pointer; }
.sort-btn:hover { color: var(--accent-ink); }
.col-name { min-width: 230px; width: 25%; }
.co-link { font-weight: 650; color: var(--text); text-decoration: none; }
.co-link:hover { color: var(--accent-ink); text-decoration: underline; }
.row-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.row-tags:empty { display: none; }
.col-next { min-width: 190px; }
.next-cell { display: grid; gap: 2px; }
.next-text { font-size: 14px; color: var(--text-2); }
.col-phone { white-space: nowrap; }
.tel { font-weight: 600; text-decoration: none; }
.tel:hover { text-decoration: underline; }
.row-dnc td { background: var(--danger-soft); }
.row-archived td { color: var(--muted); }

/* ---------------- Company page ---------------- */
.co-head { margin-bottom: 18px; }
.back { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; text-decoration: none; margin-bottom: 10px; }
.co-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.co-title-row .page-title { font-size: 30px; }
.co-sub { margin: 4px 0 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; color: var(--text-2); }
.co-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.co-next { margin: 14px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
/* Full company page, placed like the Call tab of the 360 panel. In the page: call card, then .co-col
   (company facts, research, bookings), then the timeline (it grows with every call); that is also the
   order in one column. */
.co-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px 20px; align-items: start; margin-bottom: 18px; }
.co-col { min-width: 0; }
.co-grid > .card, .co-col > .card:last-child { margin-bottom: 0; }
/* Laptop: the research next to the call card; facts, bookings and timeline follow under the call card
   (.co-col dissolves, its cards join the grid; the last row takes what is left of the research). */
@media (min-width: 1240px) and (max-width: 1639px) {
  .co-grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); grid-template-rows: auto auto auto 1fr; row-gap: 0; }
  .co-col { display: contents; }
  .co-grid > .card, .co-grid .co-col > .card { grid-column: 1; margin-bottom: 18px; }
  .co-grid > .card:last-child { margin-bottom: 0; }
  .co-grid .co-col > .research { grid-column: 2; grid-row: 1 / -1; margin-bottom: 0; }
  .co-col > .cf { container-type: normal; }   /* under the call card: the calm list, not two columns */
}
/* Big screen: call card with the timeline under it | facts + research + bookings. */
@media (min-width: 1640px) {
  .co-grid { grid-template-columns: minmax(0, 9fr) minmax(0, 11fr); grid-template-rows: auto 1fr; }
  .co-col { grid-column: 2; grid-row: 1 / span 2; }
  .co-grid > .card { grid-column: 1; }
}
.info { margin: 0; display: grid; gap: 12px; }
.info-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; }
.info-row dt { color: var(--text-2); font-weight: 650; font-size: 14px; padding-top: 2px; }
.info-row dd { margin: 0; overflow-wrap: anywhere; }

/* Company parts (full page + 360 panel): everywhere the same rhythm, a small label with its value (above
   it where there is room for cells or columns, in front of it in a narrow list).
   The Company card and the Research card arrange themselves by their OWN width (container queries),
   so the same part fits a panel column, the whole panel and the full page. */
.cf-row > dt, .ask-cell > dt, .rs-h {
  margin: 0 0 2px; font-size: 12px; line-height: 1.35; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted);
}
/* Company facts. Narrow card: what they do, then the facts as a list (label | value, both columns aligned),
   then the systems. */
.cf { container: facts / inline-size; padding: 0; }
.cf-in { padding: 20px 22px 16px; }   /* same top as every card: titles side by side stand on one line */
.cf .card-title { margin-bottom: 8px; }
.cf-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px 28px; align-items: start; }
.cf-text { min-width: 0; }
.cf-text p { margin: 0; max-width: 70ch; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.cf-list { margin: 0; min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 5px 14px; align-items: baseline; }
.cf-row { display: contents; }
.cf-row > dt { margin: 0; white-space: nowrap; }
.cf-row > dd { margin: 0; font-size: 14.5px; line-height: 1.4; overflow-wrap: anywhere; }
.cf-extra { display: inline-block; color: var(--text-2); }
/* Wide card: the texts on the left, the facts on the right: the same two columns as the research card
   (which switches at the same card width: its 660px is measured inside its padding). */
@container facts (min-width: 704px) {
  .cf-body { grid-template-columns: minmax(0, 5fr) minmax(0, 4fr); }
  .cf-text { grid-column: 1; }
  .cf-list { grid-column: 2; grid-row: 1; margin-top: -3px; }   /* first label on the line of the label next to it */
  .cf-2t { grid-template-rows: auto 1fr; }
  .cf-2t > .cf-list { grid-row: 1 / span 2; }
  .cf-body > :only-child { grid-column: 1 / -1; }
}
/* Who to ask for + e-mail, next to the Call / Book buttons: two short rows (label | value), no taller
   than the buttons for names and roles of a usual length; on a big screen two cells side by side
   ("responsive (new screens)"). The buttons keep their place when a long note makes the block taller;
   so does the "no phone number" note that stands in for the Call button (as high as the buttons). */
.co-actions > .btn, .co-actions > .no-phone { align-self: flex-start; }
.co-actions > .no-phone { display: inline-flex; align-items: center; gap: 5px; }
@media (min-width: 761px) {
  .co-actions > .no-phone { min-height: 52px; }
  .pn-actions > .no-phone { min-height: 46px; }
}
.ask { flex: 1 1 320px; min-width: 0; margin: 0 0 0 12px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 12px; align-items: baseline; }
.ask-cell { display: contents; }
.ask-cell > dt { margin: 0; white-space: nowrap; }
.ask dd { margin: 0; max-width: 640px; font-size: 14.5px; line-height: 1.4; overflow-wrap: anywhere; }
.ask strong { font-weight: 650; }
.ask-role { color: var(--text-2); }
.ask a { font-weight: 650; text-decoration: none; }
.ask a:hover { text-decoration: underline; }
/* Research. One column by default; on a wide card the story sits next to the signals, with why-this-score
   and the sources as a footer on the same two columns. Prose never runs wider than a comfortable line. */
.research { container: research / inline-size; }
.rs-main, .rs-foot { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px 28px; }
.rs-main + .rs-foot { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.rs-col { display: grid; gap: 14px; align-content: start; min-width: 0; }
.rs-block { min-width: 0; }
.rs-block p { margin: 0; max-width: 70ch; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.rs-fit p { font-size: 14.5px; color: var(--text-2); }
.rs-signals, .rs-sources { list-style: none; margin: 0; padding: 0; display: grid; }
.rs-signals { gap: 5px; max-width: 70ch; font-size: 14.5px; line-height: 1.45; }
.rs-signals li { position: relative; padding-left: 15px; overflow-wrap: anywhere; }
.rs-signals li::before { content: ""; position: absolute; left: 1px; top: .58em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.rs-sources { gap: 3px; font-size: 13.5px; line-height: 1.4; }
/* One line per source: a web address is cut with "…" where the column ends (its link icon stays, the
   whole address is in the tooltip). A source that is not a link is text to read: it wraps in full. */
.rs-sources li { min-width: 0; }
.rs-sources li > * { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; vertical-align: top; text-decoration: none; }
.rs-src { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rs-sources .unsafe-url .rs-src { white-space: normal; overflow: visible; overflow-wrap: anywhere; }
.rs-sources .icon { margin-left: 0; }
.rs-sources a:hover .rs-src { text-decoration: underline; }
@container research (min-width: 660px) {
  .rs-main, .rs-foot { grid-template-columns: minmax(0, 5fr) minmax(0, 4fr); }
  .rs-main > :only-child, .rs-foot > :only-child { grid-column: 1 / -1; }
}
/* Touch screens and phones: the links of these parts get a taller target (padding on the link itself,
   so the text around it does not move). */
@media (pointer: coarse), (max-width: 760px) {
  .ask a, .cf-row a { padding-block: 6px; }
  .rs-sources { gap: 0; }
  .rs-sources li > * { padding-block: 5px; }
}
.when-box { display: grid; gap: 8px; margin: 0 0 14px; padding: 12px 14px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); }
.when-box > label { font-weight: 700; }
.when-box input { max-width: 280px; }
.quick-picks { display: flex; flex-wrap: wrap; gap: 6px; }
.quick-picks .btn { border: 1px solid var(--border-strong); background: var(--surface); }
.counter { font-size: 13px; color: var(--muted); justify-self: end; }
.timeline { list-style: none; margin: 0; padding: 0; }
.tl-item { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; padding: 11px 0; }
.tl-item + .tl-item { border-top: 1px solid var(--border); }
.tl-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--surface-2); color: var(--text-2); }
.tl-booking .tl-icon { background: var(--st-booked-bg); color: var(--st-booked-fg); }
.tl-head { margin: 0; }
.tl-meta { color: var(--muted); font-weight: 400; font-size: 14px; }
.tl-notes { white-space: pre-wrap; margin: 4px 0 0; overflow-wrap: anywhere; color: var(--text); }
.manage-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 22px; align-items: start; }
.manage-grid .field { margin: 0; }
.manage-grid select { max-width: 360px; }   /* the full page can be 1700px wide: a select need not be */
.manage .btn-ghost { justify-self: start; }

/* ---------------- dialogs ---------------- */
.dlg {
  border: 0; padding: 0; border-radius: 16px;
  width: min(560px, calc(100vw - 28px)); max-height: calc(100vh - 40px); overflow: auto;
  background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg);
}
.dlg-wide { width: min(1120px, calc(100vw - 28px)); }
.dlg::backdrop { background: rgba(15, 23, 42, .5); }
.dlg-head {
  position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px 14px 22px; background: var(--surface); border-bottom: 1px solid var(--border);
}
.dlg-title { margin: 0; font-size: 20px; }
.dlg-body { padding: 18px 22px 22px; }
.dlg-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.dlg-actions.wrap { justify-content: flex-start; }
.confirm-msg { font-size: 17px; }
.bk-company { font-size: 17px; margin-bottom: 12px; }
.bk-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; }
.bk-grid h3 { font-size: 17px; margin: 0 0 10px; }
.bk-slots { max-height: min(60vh, 560px); overflow-y: auto; padding-right: 6px; }
.slot-day { border: 0; padding: 0; margin: 0 0 14px; }
.slot-day legend { font-weight: 700; padding: 0; margin-bottom: 6px; }
.slot-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.slot-chip { position: relative; }
.slot-chip span {
  display: inline-block; min-width: 72px; text-align: center; padding: 9px 14px; border-radius: 9px;
  border: 1px solid var(--free-border); background: var(--free-bg); color: var(--free-fg); font-weight: 700; cursor: pointer;
}
.slot-chip:hover span { border-color: var(--free-fg); }
.slot-chip input:checked + span { background: var(--btn-primary); border-color: var(--btn-primary); color: #fff; box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--btn-primary); }
.slot-chip input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.lang-fs { border: 0; padding: 0; margin: 0 0 14px; }
.lang-fs legend { padding: 0; margin-bottom: 4px; }
.tamara-note { display: flex; gap: 8px; align-items: center; margin: 6px 0 0; padding: 9px 12px; border-radius: 9px;
  background: var(--st-wrong_number-bg); color: var(--st-wrong_number-fg); border: 1px solid var(--st-wrong_number-bd); }
.confirm-summary { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border-radius: 12px; margin-bottom: 14px;
  background: var(--ok-soft); border: 1px solid var(--ok-border); }
.confirm-summary > .icon { width: 26px; height: 26px; color: var(--ok-ink); }
.cs-main { font-size: 18px; font-weight: 700; margin: 0 0 2px; }
.cs-sub { margin: 0; color: var(--text-2); overflow-wrap: anywhere; }
.mail-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; }
.mail-col h3 { margin: 0 0 10px; font-size: 17px; }
.mail-body { font-size: 14.5px; line-height: 1.5; min-height: 340px; }
.mail-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.details .info-row { grid-template-columns: 120px minmax(0, 1fr); }
.pick-list { list-style: none; margin: 8px 0 0; padding: 0; max-height: 50vh; overflow-y: auto; display: grid; gap: 4px; }
.pick-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 12px; width: 100%;
  padding: 10px 12px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface); color: inherit; text-align: left; cursor: pointer; }
.pick-item:hover { border-color: var(--accent); background: var(--accent-soft); }
.pick-name { font-weight: 650; }
.pick-sub { grid-row: 2; font-size: 14px; color: var(--muted); }
.pick-item .badge { grid-row: 1 / span 2; grid-column: 2; align-self: center; }

/* ---------------- toasts ---------------- */
/* Bottom-left and click-through, so a toast never hides or blocks a button (dialog actions sit bottom-right). */
.toasts { position: fixed; left: 20px; bottom: 20px; z-index: 1000; display: grid; gap: 8px; max-width: min(440px, calc(100vw - 40px)); pointer-events: none; }
.toast {
  display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; border-radius: 12px;
  background: var(--text); color: var(--surface); box-shadow: var(--shadow-lg); font-weight: 600;
  transition: opacity .3s, transform .3s;
}
.toast .icon { margin-top: 2px; }
.toast-error { background: var(--danger); color: #fff; }
.toast-out { opacity: 0; transform: translateY(6px); }

/* ---------------- Calendar ---------------- */
.cal-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.cal-nav { display: flex; gap: 8px; flex-wrap: wrap; }
.seg { display: inline-flex; border: 1px solid var(--border-strong); border-radius: 11px; padding: 3px; margin: 0; background: var(--surface); gap: 3px; }
.seg label span { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 8px; font-weight: 650; cursor: pointer; color: var(--text-2); }
.seg input:checked + span { background: var(--btn-primary); color: #fff; }
.seg input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 1px; }
.cal-help { color: var(--text-2); margin: 0 0 8px; }
.legend { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; color: var(--text-2); }
.legend li { display: inline-flex; align-items: center; gap: 7px; }
.sw { display: inline-grid; place-items: center; width: 22px; height: 18px; border-radius: 5px; border: 1px solid var(--border); }
.sw-free { background: var(--free-bg); border-color: var(--free-border); color: var(--free-fg); }
.sw-booked { background: var(--booked-bg); border-color: var(--booked-border); color: var(--booked-fg); }
.sw-empty { background: var(--surface); }
.sw-past { background: repeating-linear-gradient(135deg, var(--surface-2) 0 4px, var(--border) 4px 5px); }
.sw-sel-add { background: var(--free-bg); border: 2px dashed var(--free-fg); }
.sw-sel-remove { background: var(--danger-soft); border: 2px dashed var(--danger); }
/* Fixed height, always: the grid must never move while you drag over it. */
.sel-info { height: 1.6em; margin: 0 0 6px; font-weight: 650; color: var(--text-2); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* The grid scrolls inside its card (both ways): day headers stick to the top, times stick to the left. */
.cal-wrap { padding: 0; overflow: hidden; }
.cal-scroll { overflow: auto; max-height: min(74vh, 980px); overscroll-behavior: contain; scroll-margin-top: calc(var(--topbar-h) + 10px); }
/* Keyboard focus never parks a cell under the sticky day headers or the sticky times column. */
.cal .cell { scroll-margin: 64px 6px 6px 66px; }
.cal-scroll[aria-busy="true"] { cursor: progress; }
.cal { width: 100%; min-width: 760px; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.cal th, .cal td { padding: 2px 3px; border-bottom: 1px solid var(--border); }
.cal td + td, .cal th + th { border-left: 1px solid var(--border); }
.cal tbody tr:last-child td, .cal tbody tr:last-child th { border-bottom: 0; }
.cal thead th { position: sticky; top: 0; z-index: 3; background: var(--surface); box-shadow: inset 0 -1px 0 var(--border-strong); }
.cal thead th.cal-corner { left: 0; z-index: 4; }
.cal-corner { width: 58px; }
.cal-day { text-align: left; padding: 7px 8px !important; }
.cal-dow { display: block; font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.cal-weekend .cal-dow { color: var(--accent-ink); }
.cal-date { display: block; font-size: 15px; font-weight: 700; }
.cal-today .cal-date { color: var(--accent-ink); }
.cal-today-tag { display: inline-block; margin-top: 2px; font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 5px; background: var(--accent); color: #fff; }
.col-today { background: var(--accent-soft); }
.col-weekend { background: var(--weekend-bg); }
.cal-time { position: sticky; left: 0; z-index: 2; background: var(--surface); font-size: 13px; font-weight: 600; color: var(--muted);
  text-align: right; padding-right: 8px !important; vertical-align: middle; white-space: nowrap; }
.half-row .cal-time { font-weight: 400; color: var(--text-2); opacity: .8; }
.hour-row td, .hour-row th { border-top: 1px solid var(--border-strong); }
.cell {
  display: flex; align-items: center; gap: 5px; width: 100%; height: 26px; padding: 0 7px;
  border-radius: 6px; border: 1px solid transparent; background: none; color: inherit;
  font-size: 13px; line-height: 1; text-align: left; overflow: hidden;
}
button.cell { cursor: pointer; }
button.cell[aria-disabled="true"] { cursor: default; }
/* Painting availability: no page scroll and no text selection while dragging over the cells
   (on touch screens you scroll by dragging the times column or the day headers). */
.cal.mode-availability .cell { touch-action: none; -webkit-user-select: none; user-select: none; }
.cell-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.cell-free { background: var(--free-bg); border-color: var(--free-border); color: var(--free-fg); font-weight: 700; }
.cell-free:hover { border-color: var(--free-fg); }
.cell-cta { margin-left: auto; font-size: 12px; text-decoration: underline; }
.cell-booked { background: var(--booked-bg); border-color: var(--booked-border); color: var(--booked-fg); font-weight: 700; }
.cell-booked:hover { border-color: var(--booked-fg); }
.cell-line { display: flex; align-items: center; gap: 5px; min-width: 0; }
.cell-tag { margin-left: auto; flex: none; font-size: 11px; font-weight: 700; padding: 2px 5px; border-radius: 4px;
  background: var(--st-wrong_number-bg); color: var(--st-wrong_number-fg); }
.cell-past-booked { opacity: .7; }
.cell-past { background: repeating-linear-gradient(135deg, transparent 0 5px, var(--surface-2) 5px 7px); }
.cell-addable { color: var(--muted); }
.cell-addable .cell-plus { opacity: 0; }
.cell-addable:hover, .cell-addable:focus-visible { border: 1px dashed var(--border-strong); background: var(--surface-2); }
.cell-addable:hover .cell-plus, .cell-addable:focus-visible .cell-plus { opacity: 1; }
.cell-other { font-size: 11px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell.sel-add { background: var(--free-bg); border: 2px dashed var(--free-fg); color: var(--free-fg); }
.cell.sel-remove { background: var(--danger-soft); border: 2px dashed var(--danger); color: var(--danger); }

/* Bulk availability panel */
.bulk { padding: 16px 20px; }
.bulk-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bulk-head .card-title { margin: 0; }
.bulk-body { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px 28px; margin-top: 14px; }
.bulk-fs { border: 0; padding: 0; margin: 0; min-width: 0; }
.bulk-fs legend { font-weight: 700; padding: 0; margin-bottom: 7px; }
.bulk-fs-wide, .bulk-actions { grid-column: 1 / -1; }
.bulk .quick-picks { margin-top: 8px; }
.day-chips, .period-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.day-chip span { display: inline-block; min-width: 50px; text-align: center; padding: 8px 9px; border-radius: 9px; border: 1px solid var(--border-strong);
  background: var(--surface); font-weight: 700; cursor: pointer; }
.day-chip input:checked + span { background: var(--btn-primary); border-color: var(--btn-primary); color: #fff; }
.period-chip span { display: grid; gap: 2px; padding: 7px 12px; border-radius: 9px; border: 1px solid var(--border-strong); background: var(--surface); cursor: pointer; line-height: 1.25; }
.period-chip small { color: var(--muted); font-size: 12px; }
.period-chip input:checked + span { border-color: var(--btn-primary); box-shadow: inset 0 0 0 1px var(--btn-primary); background: var(--accent-soft); }
.day-chip input:focus-visible + span, .period-chip input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.bulk-times, .bulk-custom { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bulk-times select { min-width: 100px; }
.bulk-custom { margin-top: 10px; }
.bulk-custom input { width: auto; }
.bulk-actions { border-top: 1px solid var(--border); padding-top: 12px; }
.bulk-preview { font-size: 17px; margin: 0 0 4px; }
.bulk-result { margin: 8px 0 0; }
.bulk-result:empty { display: none; }
.bulk-result.ok { color: var(--ok-ink); font-weight: 700; }
.bulk-result.error { color: var(--danger); font-weight: 700; }
.btn-danger-outline { color: var(--danger); border-color: var(--danger); }
.btn-danger-outline:hover { background: var(--danger-soft); border-color: var(--danger); }

/* ---------------- Admin ---------------- */
.form-card { max-width: 980px; }
.kvs { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.kv { display: grid; padding: 12px 16px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); min-width: 120px; }
.kv-num { font-size: 26px; font-weight: 750; }
.kv-label { font-size: 14px; color: var(--text-2); font-weight: 600; }
.kv-groups { display: flex; flex-wrap: wrap; gap: 12px 48px; margin-bottom: 12px; }
.kv-groups h3 { font-size: 15px; margin: 0 0 4px; }
.plain { list-style: none; margin: 0; padding: 0; }
.issues { margin: 8px 0; }
.issues summary { cursor: pointer; font-weight: 650; }
.issues ul { margin: 6px 0 0; }

/* ---------------- Login ---------------- */
.login { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.is-mock .login { min-height: calc(100vh - 36px); }
.login-card { width: min(430px, 100%); background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 30px; box-shadow: var(--shadow-lg); }
.login-card .brand { margin-bottom: 18px; }
.login-card h1 { font-size: 24px; margin: 0 0 6px; }
.login-lead { color: var(--text-2); margin: 0 0 18px; }
.notice { padding: 11px 14px; border-radius: 10px; background: var(--warn-soft); border: 1px solid var(--warn-border); color: var(--warn-ink); font-weight: 650; margin: 0 0 16px; }
.login-or { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--muted); font-size: 14px; }
.login-or::before, .login-or::after { content: ""; flex: 1; height: 1px; background: var(--border); }

/* ---------------- responsive ---------------- */
@media (max-width: 1180px) {
  .today-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1000px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bulk-body { grid-template-columns: minmax(0, 1fr); }
  .manage-grid, .form-row { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); background: none; }
  .sidebar {
    position: sticky; top: var(--topbar-h); z-index: 20; height: auto; overflow-x: auto;
    padding: 6px 10px; border-right: 0; border-bottom: 1px solid var(--border);
  }
  .nav ul { display: flex; gap: 4px; }
  .nav a { padding: 8px 9px; gap: 7px; white-space: nowrap; }
  .nav-sep { display: none; }
  .cal-scroll { scroll-margin-top: calc(var(--topbar-h) + 62px); }
  main { padding: 18px 16px 64px; }
  .bk-grid, .mail-cols { grid-template-columns: minmax(0, 1fr); }
  .bk-slots { max-height: none; }
  .q-row { grid-template-columns: 22px minmax(0, 1fr) auto; }
  .q-row .fit, .q-row .badge { display: none; }
}
@media (max-width: 640px) {
  .brand-sub, .me-role, #pwBtn { display: none; }
  .info-row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .stats { grid-template-columns: minmax(0, 1fr); }
}


/* ---------------- language toggle ---------------- */
.lang-toggle { display: inline-flex; border: 1px solid var(--border-strong); border-radius: 9px; padding: 2px; gap: 2px; background: var(--surface); }
.lang-btn { min-width: 38px; min-height: 30px; padding: 3px 8px; border: 0; border-radius: 7px; background: transparent; color: var(--text-2);
  font-weight: 750; font-size: 13px; letter-spacing: .04em; cursor: pointer; }
.lang-btn:hover { color: var(--text); background: var(--surface-2); }
.lang-btn[aria-pressed=true] { background: var(--btn-primary); color: #fff; }
.login-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }

/* ---------------- shared small pieces ---------------- */
.btn-danger-text { color: var(--danger); }
.btn-danger-text:hover { background: var(--danger-soft); }
.warn-text { color: var(--warn-ink); font-weight: 650; }
.num, .table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table tbody tr:last-child th { border-bottom: 0; }
.chip-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 4px 12px; border-radius: 999px;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-2); font-weight: 650; font-size: 14px; cursor: pointer; }
.chip-btn:hover { border-color: var(--accent); color: var(--text); }
.chip-btn[aria-pressed=true] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }
.chip-btn .pn-count { background: var(--surface-2); }
.tl-deal .tl-icon { background: var(--st-proposal-bg); color: var(--st-proposal-fg); }
.tl-payment .tl-icon { background: var(--st-client-bg); color: var(--st-client-fg); }
.tl-contact .tl-icon { background: var(--st-callback-bg); color: var(--st-callback-fg); }
.tl-status .tl-icon { background: var(--st-analysis_done-bg); color: var(--st-analysis_done-fg); }

/* ---------------- Client 360 panel (slide-over from the right) ---------------- */
dialog.panel {
  position: fixed; inset: 0 0 0 auto; margin: 0; padding: 0; border: 0;
  /* Everything right of the 224px sidebar, up to 1495px; never under 720px or over the screen. */
  width: max(720px, min(calc(100vw - 224px), 1495px)); max-width: 100vw; height: 100vh; height: 100dvh; max-height: none;
  background: var(--bg); color: var(--text); box-shadow: -24px 0 60px rgba(15, 23, 42, .28);
  transform: translateX(104%); transition: transform .34s cubic-bezier(.22, .8, .24, 1); overflow: hidden; z-index: 60;
}
dialog.panel.is-open { transform: translateX(0); }
dialog.panel::backdrop { background: rgba(15, 23, 42, .42); animation: pn-fade .3s ease-out; }
@keyframes pn-fade { from { background: rgba(15, 23, 42, 0); } }
dialog.panel.is-loading .pn-body, dialog.panel.is-loading .pn-head { opacity: .55; transition: opacity .15s; }
@media (prefers-reduced-motion: reduce) {
  dialog.panel { transition: none; }
  dialog.panel::backdrop { animation: none; }
}
.pn-shell { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.pn-pad { padding: 18px 22px; }
.pn-top {
  flex: none; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px 14px; align-items: center;
  padding: 12px 18px; background: var(--surface); border-bottom: 1px solid var(--border);
}
.pn-nav { display: flex; align-items: center; gap: 2px; }
.pn-nav .icon-btn:disabled { opacity: .35; cursor: default; }
.pn-pos { font-size: 13px; color: var(--muted); font-weight: 650; margin-left: 4px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pn-titles { min-width: 0; }
.pn-title { font-size: 24px; margin: 0; letter-spacing: -.015em; overflow-wrap: anywhere; }
.pn-title:focus { outline: none; }
.pn-sub { margin: 2px 0 0; color: var(--text-2); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 14px; }
.pn-tools { display: flex; align-items: center; gap: 4px; }
.pn-head { flex: none; padding: 12px 18px 12px; background: var(--surface); border-bottom: 1px solid var(--border); }
.pn-head .dnc-banner { margin: 10px 0; }
.pn-head .flash { margin: 12px 0 0; }
.pn-field { margin-bottom: 8px; }
.pn-field > label, .pn-field > .label-like { font-size: 13px; font-weight: 700; color: var(--text-2); }
.pn-stage { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pn-stage select { min-width: 0; flex: 1 1 150px; }
.pn-field select { width: 100%; min-width: 0; }
.pn-next-view { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-height: 42px; }
/* What on the first row, then when + Save + Cancel (never a button alone on a row); one row on a big
   screen and three on a phone, see "responsive (new screens)". */
.pn-next-form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; max-width: 980px; }
.pn-next-form input[type=text] { flex: 1 1 100%; }
.pn-next-form input[type=datetime-local] { flex: 1 1 200px; max-width: 260px; }
.pn-next-form .btn { min-height: 38px; }
.pn-next-form .form-error { flex: 1 1 100%; }
.pn-actions { gap: 8px; margin-top: 4px; }
.pn-actions .btn-lg { min-height: 46px; font-size: 17px; }
.pn-tabs { flex: none; display: flex; gap: 2px; padding: 0 12px; background: var(--surface); border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: thin; }
.pn-tab { display: inline-flex; align-items: center; gap: 7px; padding: 12px 12px 11px; border: 0; border-bottom: 3px solid transparent;
  background: none; color: var(--text-2); font-weight: 650; cursor: pointer; white-space: nowrap; }
.pn-tab:hover { color: var(--text); }
.pn-tab[aria-selected=true] { color: var(--accent-ink); border-bottom-color: var(--accent); }
.pn-count { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--surface-2); color: var(--text-2); font-size: 12px; font-weight: 750; font-variant-numeric: tabular-nums; }
.pn-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 16px 20px 60px; overscroll-behavior: contain; }
.pn-body:focus { outline: none; }
/* Call tab: call card, company facts, research, manage (in that order in the page). One column by default,
   the call card first; wider panels place the cards in "responsive (new screens)" below. */
.pn-overview { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.pn-overview > .card { margin: 0; }
/* The other tabs keep a readable width in the wide panel. */
.pn-contacts, .pn-timeline, .pn-bookings, .pn-offers { max-width: 900px; }
.pn-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.pn-bar .card-title { margin: 0; }
.pn-sub-h { margin-top: 22px; }
.pn-form { border-color: var(--accent); }
.tl-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.pn-timeline .note-form { margin: 0; }
.pn-timeline .timeline { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 4px 16px; }
/* contacts */
.ct-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ct-card { display: flex; justify-content: space-between; gap: 12px; margin: 0; padding: 14px 16px; }
.ct-main { min-width: 0; }
.ct-main p { margin: 0 0 4px; }
.ct-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.ct-links { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 15px; }
.ct-links a { display: inline-flex; align-items: center; gap: 5px; overflow-wrap: anywhere; }
.ct-source { font-size: 14px; color: var(--text-2); }
.ct-source .label-sm { display: inline; margin: 0; }
.ct-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none; }
/* offers & payments */
.pn-totals .kv { min-width: 130px; flex: 1 1 130px; }
.pn-totals .kv-num { font-size: 22px; font-variant-numeric: tabular-nums; }
.deal-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.deal { margin: 0; }
.deal-head { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; }
.deal-title { margin: 0 0 2px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 17px; }
.deal-amount { display: grid; justify-items: end; text-align: right; }
.deal-net { font-size: 22px; font-weight: 750; font-variant-numeric: tabular-nums; white-space: nowrap; }
.deal-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.dstat-draft { background: var(--st-new-bg); color: var(--st-new-fg); border-color: var(--st-new-bd); }
.dstat-sent { background: var(--st-proposal-bg); color: var(--st-proposal-fg); border-color: var(--st-proposal-bd); }
.dstat-won { background: var(--st-client-bg); color: var(--st-client-fg); border-color: var(--st-client-bd); }
.dstat-lost { background: var(--st-lost-bg); color: var(--st-lost-fg); border-color: var(--st-lost-bd); }
.of-net { font-weight: 700; margin: 0 0 6px; }
.pay-block { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border-strong); }
.pay-h { margin: 0; font-size: 15px; }
.pay-table td { vertical-align: middle; }
.pay-actions { display: flex; gap: 4px; justify-content: flex-end; flex-wrap: wrap; }
.pay-paid td { color: var(--text-2); }
.pay-overdue td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
.pay-late { background: var(--danger-soft); color: var(--danger-ink); border-color: var(--danger); }
.pay-form { margin-top: 10px; padding: 12px 14px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); }
.dlg-move .move-group { margin-bottom: 12px; }
.move-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; }
.move-btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 8px 10px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--surface); color: inherit; cursor: pointer; text-align: left; }
.move-btn:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-soft); }
.move-btn:disabled { cursor: default; opacity: .7; border-style: dashed; }

/* ---------------- Pipeline board ---------------- */
.pipe-filters .pipe-hint { flex: 1 1 280px; align-self: center; display: flex; gap: 6px; align-items: center; }
main[data-view="pipeline"] { max-width: none; }
/* The full company page is about as wide as the 360 panel it is opened from (its grid: .co-grid). */
main[data-view="company"] { max-width: 1720px; }
.pipe-board { display: flex; gap: 12px; align-items: flex-start; overflow-x: auto; padding: 2px 2px 14px; scroll-snap-type: x proximity; }
.pipe-col { flex: 0 0 236px; scroll-snap-align: start; display: flex; flex-direction: column; min-height: 140px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); transition: box-shadow .12s, border-color .12s, background-color .12s; }
.pipe-col-head { padding: 10px 12px 8px; border-bottom: 1px solid var(--border); position: relative; }
.pipe-col-title { margin: 0; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.pipe-dot { width: 10px; height: 10px; border-radius: 50%; background: currentColor; flex: none; }
.pipe-col-title .pipe-count { margin-left: auto; }
.pipe-count { display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 7px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border); font-size: 12.5px; font-weight: 750; font-variant-numeric: tabular-nums; color: var(--text); }
.pipe-sum { margin: 4px 0 0; font-size: 13px; font-weight: 650; color: var(--text-2); font-variant-numeric: tabular-nums; }
.pipe-sum-zero { color: var(--muted); font-weight: 500; }
.pipe-cards { list-style: none; margin: 0; padding: 8px; display: grid; gap: 8px; }
.pipe-empty { margin: 0; padding: 14px 12px; font-size: 14px; color: var(--muted); }
.status-col-new .pipe-dot { color: var(--st-new-fg); }
.status-col-no_answer .pipe-dot { color: var(--st-no_answer-fg); }
.status-col-callback .pipe-dot { color: var(--st-callback-fg); }
.status-col-interested .pipe-dot { color: var(--st-interested-fg); }
.status-col-booked .pipe-dot { color: var(--st-booked-fg); }
.status-col-analysis_done .pipe-dot { color: var(--st-analysis_done-fg); }
.status-col-proposal .pipe-dot { color: var(--st-proposal-fg); }
.status-col-client .pipe-dot { color: var(--st-client-fg); }
.status-col-lost .pipe-dot { color: var(--st-lost-fg); }
.status-col-not_interested .pipe-dot { color: var(--st-not_interested-fg); }
.status-col-do_not_contact .pipe-dot { color: var(--danger); }
.status-col-wrong_number .pipe-dot { color: var(--st-wrong_number-fg); }
.pcard { background: var(--surface); border: 1px solid var(--border); border-radius: 11px; padding: 9px 10px 10px; box-shadow: var(--shadow);
  cursor: grab; transition: box-shadow .12s, border-color .12s, opacity .12s; }
.pcard:hover { border-color: var(--border-strong); box-shadow: 0 2px 8px rgba(16, 24, 40, .08); }
.pcard p { margin: 4px 0 0; }
.pcard-top { display: flex; align-items: flex-start; gap: 6px; }
.pcard-name { flex: 1 1 auto; min-width: 0; font-weight: 700; color: var(--text); text-decoration: none; line-height: 1.3; overflow-wrap: anywhere; }
.pcard-name:hover { color: var(--accent-ink); text-decoration: underline; }
.pcard-grip { flex: none; display: grid; place-items: center; width: 30px; height: 30px; margin: -4px -4px 0 0; border: 0; border-radius: 7px;
  background: transparent; color: var(--muted); cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.pcard-grip:hover { background: var(--surface-2); color: var(--text); }
.pcard-lock { flex: none; color: var(--danger); display: grid; place-items: center; width: 26px; height: 26px; }
.pcard-meta { font-size: 13.5px; color: var(--muted); }
.pcard-next { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: center; font-size: 13.5px; }
.pcard-next .due { font-size: 13px; }
.pcard-next-text { color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pcard-offer { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; color: var(--st-proposal-fg);
  background: var(--st-proposal-bg); border: 1px solid var(--st-proposal-bd); border-radius: 6px; padding: 1px 7px; }
.pcard-dnc { border-color: var(--danger); }
.pcard-locked { cursor: default; }
.pcard.is-dragging { opacity: .35; }
.pcard.is-armed { border-color: var(--accent); box-shadow: 0 6px 18px rgba(16, 24, 40, .18); transform: scale(1.02); }
.pcard.is-moving { opacity: .55; }
.pcard-ghost { position: fixed; left: 0; top: 0; z-index: 2000; pointer-events: none; margin: 0; list-style: none;
  box-shadow: 0 16px 38px rgba(15, 23, 42, .28); border-color: var(--accent); cursor: grabbing; }
.pipe-board.is-dragging, .pipe-board.is-dragging * { cursor: grabbing; }
.pipe-board.is-dragging { scroll-snap-type: none; } /* auto-scroll while dragging must not snap back */
.pipe-col.drop-over { border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); background: var(--accent-soft); }
.pipe-out { flex: none; display: flex; align-items: flex-start; gap: 8px; }
.pipe-out-toggle { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 44px; min-height: 140px; padding: 10px 4px;
  border: 1px dashed var(--border-strong); border-radius: var(--radius); background: var(--surface); color: var(--text-2); font-weight: 700; cursor: pointer; }
.pipe-out-toggle span:first-of-type { writing-mode: vertical-rl; transform: rotate(180deg); letter-spacing: .04em; }
.pipe-out-toggle:hover { border-color: var(--accent); color: var(--text); }
.pipe-out-cols { display: flex; gap: 12px; align-items: flex-start; }
.pipe-out:not(.is-open) .pipe-out-cols { flex-direction: column; gap: 8px; }
.pipe-col-compact { flex: none; width: 200px; min-height: 0; }
.pipe-col-compact .pipe-col-head { border-bottom: 0; }

/* ---------------- Stats ---------------- */
.viz-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.viz-card .viz-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.viz-card .card-title { margin-bottom: 2px; }
.viz-sub { margin: 0; }
.viz-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.viz-toggle[aria-pressed=true] { background: var(--accent-soft); color: var(--accent-ink); }
.viz { position: relative; }
.viz-s1 { background: var(--series-1); }
.viz-s2 { background: var(--series-2); }
.viz-s3 { background: var(--series-3); }
.viz-legend { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; color: var(--text-2); }
.viz-legend li { display: inline-flex; align-items: center; gap: 7px; }
.viz-swatch { width: 12px; height: 12px; border-radius: 3px; }
.fn-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.fn-row, .cl-row { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 10px; align-items: center; min-height: 28px; border-radius: 6px; padding: 1px 4px; }
.cl-row { grid-template-columns: minmax(0, 1fr); padding: 1px 0; min-height: 20px; }
.fn-row:hover, .fn-row:focus, .cl-row:hover, .cl-row:focus { background: var(--surface-2); outline-offset: 1px; }
.fn-label { font-size: 14px; color: var(--text-2); font-weight: 600; }
.fn-track { display: flex; align-items: center; gap: 8px; min-width: 0; border-left: 1px solid var(--viz-grid); padding-left: 0; }
.fn-bar { display: block; height: 18px; border-radius: 0 4px 4px 0; flex: none; }
.cl-row .fn-bar { height: 14px; }
.fn-val { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fn-val strong { font-size: 15px; color: var(--text); }
.fn-rate { font-size: 13px; color: var(--muted); }
.fn-out { margin: 10px 0 0; }
.fn-multiples { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px 22px; }
.fn-multiple { min-width: 0; }
.fn-mult-title { font-size: 16px; margin: 0 0 8px; }
.fn-multiple .fn-row { grid-template-columns: 7.5rem minmax(0, 1fr); }
.cl-groups { display: grid; gap: 10px; }
.cl-group { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 10px; align-items: center; }
.cl-label { margin: 0; font-size: 14px; color: var(--text-2); font-weight: 600; }
.cl-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.dy-frame { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px; }
.dy-axis { display: flex; flex-direction: column; justify-content: space-between; height: 160px; font-size: 12px; color: var(--muted);
  text-align: right; font-variant-numeric: tabular-nums; padding-bottom: 0; }
.dy-cols { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 2px; }
.dy-col { display: grid; grid-template-rows: 160px auto; justify-items: center; border-radius: 6px; padding: 0 1px; }
.dy-col:hover, .dy-col:focus { background: var(--surface-2); outline-offset: 1px; }
.dy-plot { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; width: 100%; height: 160px;
  border-bottom: 1px solid var(--viz-grid); background: linear-gradient(var(--viz-grid), var(--viz-grid)) top / 100% 1px no-repeat; }
.dy-stack { display: flex; flex-direction: column-reverse; gap: 2px; width: min(24px, 80%); min-height: 0; }
.dy-seg { display: block; flex-basis: 0; min-height: 2px; }
.dy-seg:last-child { border-radius: 4px 4px 0 0; }
.dy-cap { font-size: 12.5px; font-weight: 750; color: var(--text); font-variant-numeric: tabular-nums; margin-bottom: 2px; }
.dy-x { display: grid; justify-items: center; font-size: 11.5px; color: var(--muted); line-height: 1.2; padding-top: 4px; font-variant-numeric: tabular-nums; }
.dy-col.is-today .dy-x { color: var(--text); font-weight: 750; }
.viz-tip { position: absolute; z-index: 5; min-width: 150px; max-width: 280px; padding: 8px 11px; border-radius: 10px; pointer-events: none;
  background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); box-shadow: 0 10px 28px rgba(15, 23, 42, .18); font-size: 13.5px; }
.viz-tip p { margin: 0; display: flex; align-items: center; gap: 6px; }
.viz-tip-head { color: var(--text-2); font-weight: 650; margin-bottom: 3px !important; }
.viz-tip strong { font-size: 15px; font-variant-numeric: tabular-nums; }
.viz-key { display: inline-block; width: 12px; height: 3px; border-radius: 2px; }
.viz-table th[scope=row] { font-weight: 650; }
@media (forced-colors: active) {
  .fn-bar, .dy-seg, .viz-swatch, .viz-key { forced-color-adjust: none; }
  .fn-bar, .dy-seg { border: 1px solid CanvasText; }
}

/* ---------------- responsive (new screens) ---------------- */
/* Call tab on a laptop (panel from about 1000px): the call card starts right under the tabs with the
   research next to it, so the talking points (what we saw, probable problem, signals) are on the first
   screen beside the script. The company facts follow under the call card. The first row is as high as
   the call card, the second takes what is left of the research. */
@media (min-width: 1240px) {
  .pn-overview { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); grid-template-rows: auto 1fr; }
  .pn-overview > .kc { grid-column: 1; grid-row: 1; }
  .pn-overview > .cf { grid-column: 1; grid-row: 2; }
  .pn-overview > .research { grid-column: 2; grid-row: 1 / span 2; }
  .pn-overview > .pn-manage { grid-column: 1 / -1; grid-row: 3; }
}
/* Under the call card the facts stay the calm label | value list, however wide that column gets (their
   two-column form is for the big screen, where the card stands next to the call card). */
@media (min-width: 1240px) and (max-width: 1639px) {
  .pn-overview > .cf { container-type: normal; }
}
/* Call tab on a big screen (panel from about 1400px): everything fits next to the call card. The right
   column gets more than half: the company facts on top, the research under them, each in its own two
   columns. The first row is as high as the facts, the second takes what is left of the call card. */
@media (min-width: 1640px) {
  .pn-overview { grid-template-columns: minmax(0, 9fr) minmax(0, 11fr); }
  .pn-overview > .kc { grid-row: 1 / span 2; }
  .pn-overview > .cf { grid-column: 2; grid-row: 1; }
  .pn-overview > .research { grid-row: 2; }
  /* No company facts at all: the research starts level with the call card. */
  .pn-overview > .kc + .research { grid-row: 1 / span 2; }
}
/* "Ask for" + e-mail: a row of its own once it no longer fits next to the buttons (the full page has
   one button more); on a big screen two cells side by side, label above value like everywhere else. */
@media (max-width: 1180px) {
  .ask { flex-basis: 100%; margin-left: 0; }
}
@media (max-width: 1500px) {
  .co-head .ask { flex-basis: 100%; margin-left: 0; }
}
@media (min-width: 1400px) {
  .ask { display: flex; flex-wrap: wrap; gap: 6px 28px; }
  .ask-cell { display: block; min-width: 0; }
  .ask-cell > dt { margin-bottom: 2px; }
  /* A long "ask for" note wraps inside its own cell, so the e-mail stays next to it instead of under it. */
  .pn-actions .ask-cell:first-child { flex: 1 1 420px; max-width: max-content; }
  .pn-next-form input[type=text] { flex: 1 1 260px; }
}
/* Full page: next to three buttons the block keeps its two label | value rows at every width (two
   cells side by side would stack again as soon as a name or note is long). */
@media (min-width: 1501px) {
  .co-head .ask { display: grid; gap: 3px 12px; }
  .co-head .ask-cell { display: contents; }
  .co-head .ask-cell > dt { margin: 0; }
}
@media (max-width: 1100px) {
  .viz-grid { grid-template-columns: minmax(0, 1fr); }
}
/* Short screens (e.g. a 1366 x 768 laptop): the whole panel scrolls, like on a phone. Only the top bar
   and the tabs stay; stage, next step and the action buttons scroll away, so the call card and the
   research get the full height. A little less padding, so the call card's answers fit the first screen
   (not on the top bar: the tabs stick at its height, which is only measured when the panel renders). */
@media (min-width: 761px) and (max-height: 820px) {
  .pn-shell { display: block; overflow-y: auto; overscroll-behavior: contain; }
  .pn-top { position: sticky; top: 0; z-index: 3; }
  .pn-head { padding-block: 6px 8px; }
  .pn-tabs { position: sticky; top: var(--pn-top-h, 64px); z-index: 2; }
  .pn-body { overflow: visible; padding-top: 8px; }
}
/* Phones: the panel is full screen; the whole panel scrolls, the top bar and the tabs stick. */
@media (max-width: 760px) {
  dialog.panel { width: 100vw; box-shadow: none; }
  .pn-shell { display: block; overflow-y: auto; overscroll-behavior: contain; }
  .pn-top { position: sticky; top: 0; z-index: 3; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "titles tools" "titles nav";
    gap: 0 8px; padding: 8px 8px 8px 14px; align-items: start; }
  .pn-titles { grid-area: titles; align-self: center; }
  .pn-tools { grid-area: tools; justify-content: flex-end; }
  .pn-nav { grid-area: nav; justify-content: flex-end; }
  .pn-pos { display: none; }
  .pn-full span { display: none; }
  .pn-full { min-height: 40px; padding: 5px 9px; }
  .pn-title { font-size: 20px; }
  .pn-sub { font-size: 13px; }
  .pn-head { padding: 10px 12px; }
  .pn-next-form input[type=datetime-local] { flex-basis: 100%; max-width: none; }
  .pn-actions { gap: 6px; }
  .pn-actions .btn-lg { width: 100%; }
  .pn-actions .ask { margin-top: 4px; }
  .pn-tabs { position: sticky; top: var(--pn-top-h, 92px); z-index: 2; padding: 0 6px; }
  .pn-body { overflow: visible; padding: 14px 12px 60px; }
  .pn-overview { gap: 12px; }
  .ct-card { flex-direction: column; }
  .ct-actions { flex-direction: row; align-items: center; flex-wrap: wrap; }
  .deal-head { flex-direction: column; gap: 4px; }
  .deal-amount { justify-items: start; text-align: left; }
  .pipe-col { flex-basis: 78vw; }
  .pipe-filters { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 12px; }
  .pipe-filters select { width: 100%; min-width: 0; }
  .pipe-filters .pipe-hint { display: none; }
  .fn-multiples { grid-template-columns: minmax(0, 1fr); }
  .fn-row, .fn-multiple .fn-row, .cl-group { grid-template-columns: 6.6rem minmax(0, 1fr); gap: 8px; }
  .dy-x .dy-dow { display: none; }
  .lang-btn { min-width: 34px; padding: 3px 6px; }
}

/* ===================== Simpler screens (2026-10-03) ===================== */
/* Company panel: stage + next step, then Call + Book; everything else under "More". */
.pn-status { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 10px; }
.pn-status .pn-next { margin: 0; flex: 1 1 320px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
.pn-status .pn-next > .label-like { font-size: 13px; font-weight: 700; color: var(--text-2); }
.pn-status .pn-next-view { min-height: 0; }
.pn-status .pn-next-form { flex: 1 1 100%; }
.pn-actions .pn-book { min-height: 46px; font-size: 17px; }
/* Manage, at the end of the Call tab: the two selects keep a normal width however wide the panel is,
   and their own height when the field next to them grows (the Apply button, the do-not-contact hint). */
.pn-controls { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 20px; }
.pn-controls .pn-field { width: 210px; max-width: 100%; margin: 0; }
.pn-manage .form-actions { margin-top: 12px; }
.pn-manage .pn-stage .badge { display: none; }
/* From the two-column panel on it is one compact bar: title, selects, Archive at the far end. Aligned
   at the top; the title and Archive are pushed down to the line of the selects (label 20px + 5px gap
   above a 42px select). */
@media (min-width: 1240px) {
  .pn-manage { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 20px; padding-block: 14px 16px; }
  .pn-manage .card-title { margin: 34px 0 0; }
  .pn-manage .form-actions { margin: 24px 0 0 auto; }
}
.required-mark { font-weight: 700; color: var(--danger); }
@media (max-width: 760px) {
  .pn-controls .pn-field { width: 100%; }
  .pn-actions .pn-book { width: 100%; }
}

/* Pipeline: stage chips + arrows + a scrollbar above the board, sticky while scrolling down. */
.pipe-sticky { position: sticky; top: 0; z-index: 4; background: var(--bg); padding: 6px 0 4px; margin-bottom: 6px; }
.pipe-nav { display: flex; align-items: center; gap: 8px; }
.pipe-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; flex: 1 1 auto; padding: 2px; }
.pipe-chips::-webkit-scrollbar { display: none; }
.pipe-chip { display: inline-flex; align-items: center; gap: 7px; flex: none; padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--text-2); font-weight: 650; font-size: 14px; cursor: pointer; white-space: nowrap; }
.pipe-chip:hover { border-color: var(--border-strong); color: var(--text); }
.pipe-chip.is-visible { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }
.pipe-chip.is-empty { opacity: .6; }
.pipe-chip-n { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--surface-2); color: var(--text); font-size: 12px; font-weight: 750; font-variant-numeric: tabular-nums; }
.status-col-out .pipe-dot { color: var(--muted); }
.pipe-arrow { flex: none; border: 1px solid var(--border); background: var(--surface); }
.pipe-arrow:disabled { opacity: .4; cursor: default; }
.pipe-topscroll { overflow-x: auto; overflow-y: hidden; height: 16px; margin-top: 6px; }
.pipe-topscroll-inner { height: 1px; }
/* No snapping on computers: it made the board jump column by column while dragging the top bar.
   Phones keep it (one swipe = one column; the top bar is hidden there). */
.pipe-board { position: relative; scrollbar-width: auto; scroll-snap-type: none; }
.pipe-topscroll, .pipe-board { scrollbar-color: var(--border-strong) var(--surface-2); }
.pipe-topscroll::-webkit-scrollbar, .pipe-board::-webkit-scrollbar { height: 12px; }
.pipe-topscroll::-webkit-scrollbar-track, .pipe-board::-webkit-scrollbar-track { background: var(--surface-2); border-radius: 999px; }
.pipe-topscroll::-webkit-scrollbar-thumb, .pipe-board::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; }
@media (max-width: 760px) { .pipe-arrow { display: none; } .pipe-topscroll { display: none; } .pipe-board { scroll-snap-type: x proximity; } }

/* Calendar: the owner's free times as day cards, above the week grid. */
.free-card { margin-bottom: 18px; }
.free-card-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 12px; }
.free-card-head .card-title { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.free-card-head p { margin: 0; }
.free-days { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.free-day { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px 12px; background: var(--surface); }
.free-day.is-today { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.free-day-head { display: flex; align-items: baseline; gap: 8px; margin: 0 0 10px; font-size: 15px; }
.free-dow { font-weight: 800; text-transform: capitalize; }
.free-date { color: var(--text-2); font-weight: 600; }
.free-n { margin-left: auto; display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--free-bg); color: var(--free-fg); font-size: 12px; font-weight: 750; }
.free-times { display: flex; flex-wrap: wrap; gap: 6px; }
.free-time { display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border: 1px solid var(--free-border); border-radius: 8px;
  background: var(--free-bg); color: var(--free-fg); font-weight: 700; font-variant-numeric: tabular-nums; cursor: pointer; min-height: 36px; }
.free-time:hover { filter: brightness(.96); border-color: var(--free-fg); }
.free-time:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.free-more { min-height: 36px; }
.free-none { margin: 0; }
.cal-week-title { font-size: 17px; margin: 4px 0 10px; }

/* ===================== Call card (belkaart.js) ===================== */
.kc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.kc-head .card-title { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.kc-say { position: relative; margin: 0 0 12px; padding: 12px 14px 12px 16px; border-left: 4px solid var(--accent); background: var(--nl-bg);
  border-radius: 0 10px 10px 0; }
.kc-say p { margin: 0; font-size: 18px; line-height: 1.5; color: var(--text); }
.kc-say-main p { font-size: 20px; line-height: 1.55; }
.kc-say-tag { display: inline-block; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 2px; }
.kc-say-soft { border-left-color: var(--border-strong); background: var(--surface-2); }
.kc-say-soft p { font-size: 16px; }
.kc-say-q { border-left-color: var(--warn-border); }
.kc-fill { background: var(--free-bg); color: var(--free-fg); padding: 0 4px; border-radius: 5px; font-weight: 750;
  box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.kc-bigs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 4px 0 12px; }
.kc-big { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 64px; padding: 10px 14px; border-radius: 14px;
  border: 2px solid; font: inherit; font-size: 21px; font-weight: 800; cursor: pointer; background: var(--surface); }
.kc-big .icon { width: 24px; height: 24px; }
.kc-ja { border-color: var(--ok-border); color: var(--ok-ink); background: var(--ok-soft); }
.kc-nietnu { border-color: var(--warn-border); color: var(--warn-ink); background: var(--warn-soft); }
.kc-nee { border-color: var(--border-strong); color: var(--text-2); }
.kc-big:hover { filter: brightness(.97); }
.kc-big.is-on { box-shadow: 0 0 0 3px var(--accent); }
.kc-big:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.kc-branch { margin: 0 0 14px; padding: 14px; border: 1.5px solid var(--border); border-radius: 14px; background: var(--surface-2); }
.kc-branch .kc-say { background: var(--surface); }
.kc-branch .field { margin-bottom: 10px; }
.kc-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.kc-times { margin: 4px 0 10px; padding: 12px; border: 1.5px solid var(--free-border); border-radius: 12px; background: var(--surface); }
.kc-times-h { margin: 0 0 2px; font-weight: 800; display: flex; align-items: center; gap: 6px; }
.kc-times > .muted { margin: 0 0 8px; }
.kc-times .free-days { max-height: 360px; overflow-y: auto; }
.free-days.is-compact { grid-template-columns: minmax(0, 1fr); gap: 6px; }
.free-days.is-compact .free-day { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; }
.free-days.is-compact .free-day-head { flex: 0 0 116px; margin: 7px 0 0; font-size: 14px; }
.free-days.is-compact .free-n { display: none; }
.kc-smalls { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.kc-small { background: var(--surface); border: 1px solid var(--border-strong); color: var(--text-2); }
.kc-small:hover { color: var(--text); border-color: var(--text-2); }
.kc-s-dnc { color: var(--danger); border-color: var(--danger); margin-left: auto; }
.kc-qs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; }
.kc-qs-h { font-weight: 700; color: var(--text-2); font-size: 14px; }
.kc-q { border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 999px; padding: 5px 12px; font: inherit; font-size: 14px; cursor: pointer; }
.kc-q[aria-pressed=true] { border-color: var(--warn-border); background: var(--warn-soft); color: var(--warn-ink); font-weight: 700; }
.kc-extra label { font-weight: 700; font-size: 14px; }
.kc-extra textarea { width: 100%; }
.kc.is-busy { opacity: .6; pointer-events: none; }
.kc-practice { max-width: 860px; }
/* The words of the card can be changed: a pencil next to each text, cues in grey, texts of several lines. */
.kc-say p { white-space: pre-line; }
.kc-line { display: flex; align-items: flex-start; gap: 8px; }
.kc-line + .kc-line { margin-top: 6px; }
.kc-line > p { flex: 1 1 auto; min-width: 0; }
.kc-edit { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin-top: 1px; border: 1px solid transparent;
  border-radius: 8px; background: transparent; color: var(--text-2); opacity: .55; cursor: pointer; }
.kc-edit:hover, .kc-edit:focus-visible { opacity: 1; border-color: var(--border-strong); background: var(--surface); color: var(--accent-ink); }
.kc-cue { color: var(--text-2); font-style: italic; font-size: .9em; }
.kc-lead { font-weight: 700; color: var(--text-2); }
.kc-q-add { display: inline-flex; align-items: center; gap: 4px; border-style: dashed; color: var(--text-2); }
.kc-q-add:hover { color: var(--accent-ink); border-color: var(--accent); }

/* A proposal that carries a text (a script text, a standard mail, a mail it wrote): the text is shown to read. */
.cp-prop-texts { display: grid; gap: 6px; margin: 6px 0 4px; }
.cp-prop-label { display: block; font-size: 12px; font-weight: 700; color: var(--text-2); }
.cp-prop-text pre { margin: 2px 0 0; padding: 8px 10px; max-height: 220px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: 14px; line-height: 1.5;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); }

/* ---- Script page: practise on the left, every text on the right ---- */
.sc-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.sc-col { display: grid; gap: 22px; min-width: 0; }
.sc-col > section { display: grid; gap: 10px; min-width: 0; }
.sc-col > section > .muted { margin: -4px 0 0; }
.sc-h { margin: 0; font-size: 19px; }
.sc-grid .kc-practice { max-width: none; }
.sc-list, .sc-answers { display: grid; gap: 12px; }
.sc-part .pn-bar { align-items: flex-start; }
.sc-n { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 999px; background: var(--surface-2);
  color: var(--text-2); font-size: 13px; font-weight: 800; }
.sc-say { margin: 10px 0 0; }
.sc-say p { font-size: 16px; }
.sc-alist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sc-answer { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; }
.sc-answer-text { flex: 1 1 auto; min-width: 0; }
.sc-move { display: grid; gap: 2px; flex: none; }
.sc-q { margin: 0 0 4px; font-weight: 750; }
.sc-a { margin: 0; color: var(--text); white-space: pre-line; }
.sc-note { color: var(--warn-ink); }
.dlg-script .sc-say { margin: 0 0 10px; }
.btn-danger-ghost { background: transparent; border: 1px solid var(--border-strong); color: var(--danger); }
.btn-danger-ghost:hover { border-color: var(--danger); }
@media (max-width: 1100px) { .sc-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .kc-bigs { grid-template-columns: minmax(0, 1fr); }
  .kc-say-main p { font-size: 18px; }
  .kc-s-dnc { margin-left: 0; }
  .free-days.is-compact .free-day { flex-direction: column; gap: 4px; }
  .free-days.is-compact .free-day-head { flex: none; margin: 0; }
}

/* ================= E-mail from the workspace (mail.js, 2026-10-08) ================= */
.dlg-mail .mc-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 26px; align-items: start; }
.mc-two { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 0 16px; }
.mc-form fieldset.field { border: 0; padding: 0; margin: 0 0 14px; min-width: 0; }
.mc-form .radio-row { gap: 6px 18px; }
.mc-form .filter-check { min-height: 34px; }
.mc-new[hidden] { display: none; }
.mc-preview { position: sticky; top: 0; min-width: 0; }
.mc-preview h3 { margin: 0 0 6px; font-size: 17px; }
.mc-from { margin: 0 0 10px; overflow-wrap: anywhere; }
.mc-subject { margin: 0; padding: 10px 14px; font-weight: 700; background: var(--surface-2); border: 1px solid var(--border); border-bottom: 0;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0; overflow-wrap: anywhere; }
.mc-subject:empty { display: none; }
.mc-body { margin: 0 0 8px; padding: 14px; font: inherit; font-size: 15px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere;
  background: var(--surface); border: 1px solid var(--border); border-radius: 0 0 var(--radius-sm) var(--radius-sm); max-height: min(56vh, 620px); overflow: auto; }
.mc-body.is-empty { min-height: 120px; background: var(--surface-2); }
.mc-block { margin: 16px 0 0; }
.mc-block[hidden] { display: none; }
.dlg-mailview .mc-body { max-height: 60vh; }
.mail-card { margin-bottom: 16px; }
.mail-card-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.mail-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mail-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 8px 0; border-top: 1px solid var(--border); }
.mail-row:first-child { border-top: 0; padding-top: 0; }
.mail-what { flex: 1 1 240px; min-width: 0; overflow-wrap: anywhere; }
.mstat-sent { background: var(--st-client-bg); color: var(--st-client-fg); border-color: var(--st-client-bd); }
.mstat-sending { background: var(--st-callback-bg); color: var(--st-callback-fg); border-color: var(--st-callback-bd); }
.mstat-failed { background: var(--st-lost-bg); color: var(--st-lost-fg); border-color: var(--st-lost-bd); }
@media (max-width: 900px) {
  .dlg-mail .mc-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .mc-preview { position: static; }
  .mc-body { max-height: none; }
}
@media (max-width: 520px) { .mc-two { grid-template-columns: minmax(0, 1fr); } }

/* ================= Copilot (copilot.js, 2026-10-08) ================= */
.nav-badge { margin-left: auto; min-width: 22px; padding: 1px 7px; border-radius: 99px; background: var(--btn-primary); color: #fff; font-size: 12.5px; font-weight: 700; text-align: center; }
.nav-badge[hidden] { display: none; }
/* The copilot's frame on the Today page: a bar with its name in its own colour, and under it three calm
   parts with hairlines between them: the update as a short list, what waits for a decision as plain
   rows, and one line to ask. Few words, one size of text, no boxes inside the box. */
.today-grid.has-copilot { grid-template-columns: minmax(0, 1.45fr) minmax(340px, 1fr); }
@media (max-width: 1180px) { .today-grid.has-copilot { grid-template-columns: minmax(0, 1fr); } }
.cp-frame { border: 2px solid var(--cp-border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); overflow: hidden;
  min-width: 0; margin-bottom: 18px; scroll-margin-top: calc(var(--topbar-h) + 14px); }
.cp-frame-head { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 14px; background: var(--cp-bar); border-bottom: 1px solid var(--cp-border); }
.cp-frame-mark { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--cp-mark); color: #fff; }
.cp-frame-title { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 17px; font-weight: 800; letter-spacing: .01em; color: var(--cp-ink); }
.cp-head-time { flex: none; font-size: 13px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.cp-demo { flex: none; }
.cp-demo[hidden] { display: none; }
.cp-head-btn { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 9px; background: transparent; color: var(--cp-ink); cursor: pointer; }
.cp-head-btn:hover:not(:disabled), .cp-head-btn:focus-visible { background: var(--surface); }
.cp-head-btn:disabled { opacity: .45; cursor: default; }
.cp-frame-body { padding: 0 16px 12px; }
.cp-part { padding: 14px 0; border-bottom: 1px solid var(--border); min-width: 0; }
.cp-part[hidden] { display: none; }
.cp-part > .muted, .cp-part > .form-error { margin: 0; }
.cp-brief .loading { padding: 4px 0; justify-content: flex-start; }
/* 1. the update: a short list, the company names stand out by themselves */
.cp-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.cp-lines li { position: relative; padding-left: 16px; font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; }
.cp-lines li::before { content: ""; position: absolute; left: 2px; top: .58em; width: 6px; height: 6px; border-radius: 50%; background: var(--cp-mark); }
/* 2. what waits: plain rows, no box around each */
.cp-label { margin: 0 0 4px; font-size: 13px; font-weight: 700; color: var(--cp-ink); }
.cp-frame .cp-prop-list { margin: 0; gap: 0; }
.cp-frame .cp-prop { border: 0; border-radius: 0; box-shadow: none; background: transparent; padding: 10px 0; }
.cp-frame .cp-prop + .cp-prop { border-top: 1px solid var(--border); }
.cp-frame .cp-prop:last-child { padding-bottom: 0; }
.cp-frame .cp-prop-head > .icon { color: var(--cp-ink); }
.cp-frame .cp-prop-title { font-size: 15px; line-height: 1.4; }
.cp-frame .cp-prop-title a { color: inherit; }
.cp-frame .cp-prop-detail { font-size: 14.5px; line-height: 1.45; }
.cp-frame .cp-prop p.small { font-size: 13.5px; }
.cp-frame .cp-prop-actions { margin-top: 8px; padding-left: 30px; }
.cp-prop-more { margin-top: 6px; }
.cp-prop-more > summary { cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--accent-ink); }
.cp-frame .cp-done { margin-top: 10px; }
.cp-frame .cp-more > summary { color: var(--cp-ink); }
.cp-frame .cp-done > summary { font-size: 13.5px; font-weight: 600; }
.cp-frame .cp-done .cp-prop-list { margin-top: 4px; }
/* 3. the conversation (only once there is one) and the line to ask */
.cp-frame .cp-chat { display: block; border-bottom: 0; padding-bottom: 4px; }
.cp-link { display: block; margin: 0; padding: 0; border: 0; background: none; color: var(--accent-ink); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.cp-link[hidden] { display: none; }
.cp-link:hover { text-decoration: underline; }
.cp-starters { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.cp-starters[hidden] { display: none; }
.cp-starters .chip-btn { min-height: 30px; padding: 3px 9px; font-size: 13px; }
/* the way into the chat panel from the frame: looks like the line you type in, opens the panel */
.cp-ask-open { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 46px; padding: 8px 12px 8px 14px; border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); background: var(--surface); color: var(--muted); font: inherit; font-size: 15.5px; text-align: left; cursor: pointer; }
.cp-ask-open:hover, .cp-ask-open:focus-visible { border-color: var(--cp-mark); color: var(--text); }
.cp-ask-open .icon { flex: none; color: var(--cp-ink); }
.cp-ask-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-top: 10px; }
.cp-ask-row .cp-starters { margin-top: 0; }
.cp-ask-row .cp-link { flex: none; margin: 4px 0 0; white-space: nowrap; }

/* waiting for the model: three pulsing dots, the seconds, and after a while one calm line */
.cp-wait-line { display: flex; align-items: center; gap: 10px; color: var(--text-2); }
.cp-dots { display: inline-flex; gap: 5px; }
.cp-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--cp-mark); animation: cp-pulse 1.2s ease-in-out infinite; }
.cp-dots i:nth-child(2) { animation-delay: .2s; }
.cp-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes cp-pulse { 0%, 80%, 100% { opacity: .25; transform: scale(.8); } 40% { opacity: 1; transform: scale(1.15); } }
@media (prefers-reduced-motion: reduce) { .cp-dots i { animation-name: cp-fade; animation-duration: 2s; } }
@keyframes cp-fade { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
.cp-wait-secs { font-variant-numeric: tabular-nums; font-size: 13px; color: var(--muted); }
.cp-wait-hint { margin: 6px 0 0; font-size: 13px; color: var(--muted); }
.cp-wait-hint[hidden] { display: none; }
.cp-brief .cp-wait { padding: 2px 0; }
.spinner-sm { width: 16px; height: 16px; border-width: 2px; border-color: rgba(255, 255, 255, .45); border-top-color: #fff; }
.cp-send-icon { display: inline-flex; align-items: center; }
.cp-send-btn.is-waiting { opacity: 1; }

/* the panel: the bar with "conversations" and "new", and the list of kept conversations */
.cp-sheet-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cp-sheet-bar .btn[hidden] { display: none; }
.cp-sheet-chat { display: flex; flex-direction: column; gap: 12px; flex: 1 1 auto; min-height: 0; }
.cp-sheet-chat[hidden], .cp-sheet-list[hidden] { display: none; }
.cp-sheet-list { flex: 1 1 auto; min-height: 0; overflow: auto; }
.cp-sheet-list > .label-like { margin: 0; }
.cp-sheet-list > .muted { margin: 2px 0 10px; }
.cp-sessions { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cp-sessions li { display: flex; align-items: stretch; gap: 4px; }
.cp-session { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface);
  color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.cp-session:hover, .cp-session:focus-visible { border-color: var(--cp-mark); }
.cp-session.is-current { border-color: var(--cp-border); background: var(--cp-bar); }
.cp-session-title { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-session-meta { font-size: 13px; color: var(--muted); }
.cp-session-del { flex: none; width: 36px; height: auto; color: var(--muted); }
.cp-session-del:hover { color: var(--danger); }
.cp-sheet-rules { margin: 0; }

/* what it may see: a few words in view, the whole sentence one click away */
.cp-fine { margin-top: 10px; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.cp-fine > summary { display: flex; align-items: flex-start; gap: 4px; cursor: pointer; list-style: none; }
.cp-fine > summary > .icon { flex: none; margin-top: 2px; }
.cp-fine > summary::-webkit-details-marker { display: none; }
.cp-fine > summary:hover { color: var(--text-2); }
.cp-fine > p { margin: 6px 0 0; }
.cp-chat { display: flex; flex-direction: column; min-width: 0; }
.cp-log { display: flex; flex-direction: column; gap: 12px; min-height: 280px; max-height: min(58vh, 640px); overflow: auto; padding: 4px 2px 10px; }
.cp-msg { max-width: 92%; padding: 10px 14px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface-2); overflow-wrap: anywhere; }
.cp-user { align-self: flex-end; background: var(--accent-soft); border-color: transparent; }
.cp-msg.is-error { background: var(--danger-soft); border-color: transparent; color: var(--danger-ink); }
.cp-msg.is-busy .loading { padding: 0; justify-content: flex-start; }
.cp-who { display: block; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.cp-text p { margin: 0 0 8px; white-space: pre-wrap; }
.cp-text p:last-child { margin-bottom: 0; }
.cp-list { margin: 0 0 8px; padding-left: 20px; }
.cp-list li { margin: 2px 0; }
.cp-proposed { margin: 8px 0 0; color: var(--accent-ink); font-weight: 600; }
.cp-empty { margin: auto 0; padding: 12px 4px; }
.cp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.cp-form { display: flex; gap: 10px; align-items: flex-end; margin-top: 12px; }
.cp-form textarea { flex: 1 1 auto; min-width: 0; resize: vertical; }
.cp-prop-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
.cp-prop { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px; background: var(--surface); }
.cp-prop-pending { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.cp-prop-head { display: flex; gap: 10px; align-items: flex-start; }
.cp-prop-head > .icon { margin-top: 3px; color: var(--accent-ink); flex: none; }
.cp-prop-title { margin: 0; font-weight: 650; }
.cp-prop-detail { margin: 2px 0 0; overflow-wrap: anywhere; }
.cp-prop p.small { margin: 4px 0 0; }
.cp-prop-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.cp-done { margin-top: 14px; }
.cp-done summary { cursor: pointer; color: var(--accent-ink); font-weight: 600; }
.pstat-approved { background: var(--st-client-bg); color: var(--st-client-fg); border-color: var(--st-client-bd); }
.pstat-rejected, .pstat-expired { background: var(--surface-2); color: var(--text-2); }
.pstat-failed { background: var(--st-lost-bg); color: var(--st-lost-fg); border-color: var(--st-lost-bd); }
.mc-draft[hidden] { display: none; }
.mc-draft-msg:empty { display: none; }
@media (max-width: 1000px) { .cp-log { max-height: 52vh; } }

/* ================= Copilot from everywhere + page "E-mails" (2026-10-08) ================= */
.top-copilot { display: inline-flex; align-items: center; gap: 8px; }
.top-copilot[hidden] { display: none; }
.top-copilot .nav-badge { margin-left: 0; }
.dlg-copilot { margin: 0 0 0 auto; width: min(470px, 100vw); max-width: 100vw; height: 100vh; height: 100dvh; max-height: 100dvh; border-radius: 0; }
/* The page behind stays readable (it is the company you are asking about), only slightly dimmed. */
.dlg-copilot::backdrop { background: rgba(15, 23, 42, .18); }
.dlg-copilot .dlg-body { display: flex; flex-direction: column; gap: 12px; min-height: calc(100dvh - 62px); }
.dlg-copilot .cp-log { flex: 1 1 auto; min-height: 180px; max-height: none; }
.dlg-copilot .cp-form { margin-top: 0; }
.cp-focus { margin: 0; font-weight: 650; display: flex; gap: 6px; align-items: center; overflow-wrap: anywhere; }
.cp-sheet-props:empty { display: none; }
.cp-sheet-props .cp-prop-list { margin-top: 6px; }
.cp-sheet-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.pn-copilot span { white-space: nowrap; }
.mt-bar { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0 16px; margin-bottom: 18px; padding-bottom: 4px; }
.mt-list { display: grid; gap: 18px; }
.mt-card .pn-bar { align-items: flex-start; }
.mt-meta { margin: 2px 0 0; }
.mt-card .mc-body { max-height: 460px; }
.dlg-mailtext #mtBody { font-size: 15px; line-height: 1.5; min-height: 340px; }
.mt-fields { display: grid; gap: 6px; margin-top: 8px; }
.mt-field { display: flex; gap: 10px; align-items: baseline; text-align: left; border: 1px solid var(--border); background: var(--surface); color: var(--text);
  border-radius: var(--radius-sm); padding: 6px 10px; cursor: pointer; font: inherit; }
.mt-field:hover { border-color: var(--accent); }
.mt-field code { font-family: var(--mono); font-size: 13px; color: var(--accent-ink); white-space: nowrap; }
.mt-field span { color: var(--text-2); font-size: 14px; }
.mt-field em { margin-left: auto; font-style: normal; font-size: 12px; font-weight: 700; color: var(--warn-ink); white-space: nowrap; }
.mt-problems { list-style: none; margin: 8px 0 0; padding: 0; color: var(--danger); font-weight: 600; display: grid; gap: 4px; }
.mt-problems:empty { display: none; }
.mc-body.is-stale { opacity: .5; }
/* Phones: the top bar keeps the language switch, the Copilot button and Sign out; the name gives way. */
@media (max-width: 640px) {
  .topbar { padding: 0 12px; gap: 8px; }
  .me { gap: 8px; min-width: 0; }
  .me .me-name { display: none; }
  .me .top-copilot { order: -1; }
  .topbar .brand > span:not(.brand-mark) { display: none; }
}

/* ---- the composer's right side is an editor now (2026-10-08) ---- */
.mc-preview .field { margin-bottom: 10px; }
.mc-edit { font-size: 15px; line-height: 1.55; min-height: 300px; resize: vertical; }
.mc-manual { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 6px; }
.mc-manual[hidden] { display: none; }
.mc-closing-h { margin: 6px 0 4px; font-size: 13px; color: var(--muted); font-weight: 600; }
.mc-closing { margin: 0 0 12px; padding: 10px 14px; font: inherit; font-size: 14px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text-2);
  background: var(--surface-2); border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); }
.mc-ask { margin-top: 4px; }
.mc-ask[hidden] { display: none; }
.mc-ask-row { display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.mc-ask-row input { flex: 1 1 auto; min-width: 0; }
@media (max-width: 520px) { .mc-ask-row { flex-wrap: wrap; } }

/* ================= Chat & notes (room.js, 2026-10-12) =================
   One room for the team: the chat on the left, a board of notes on the right. Calm on purpose: the frames
   look like the cards of the Today page, one accent colour, small actions kept quiet until they are needed. */
:root {
  --nt-yellow: #fff5cf; --nt-yellow-bd: #ecd98e;
  --nt-green: #e3f4e7;  --nt-green-bd: #aedbb8;
  --nt-blue: #e2eefc;   --nt-blue-bd: #a9cbf1;
  --nt-pink: #fce6f0;   --nt-pink-bd: #efb7d1;
  --nt-gray: #eaedf2;   --nt-gray-bd: #c5ccd6;
}
@media (prefers-color-scheme: dark) {
  :root {
    --nt-yellow: rgba(236, 190, 50, .15); --nt-yellow-bd: rgba(236, 190, 50, .38);
    --nt-green: rgba(60, 190, 110, .15);  --nt-green-bd: rgba(70, 200, 120, .36);
    --nt-blue: rgba(60, 130, 230, .18);   --nt-blue-bd: rgba(90, 150, 235, .42);
    --nt-pink: rgba(230, 80, 150, .15);   --nt-pink-bd: rgba(235, 110, 170, .38);
    --nt-gray: rgba(150, 165, 185, .14);  --nt-gray-bd: rgba(150, 165, 185, .34);
  }
}
main[data-view="room"] { max-width: 1520px; padding-bottom: 28px; }
.rm { display: grid; gap: 14px; min-width: 0; }
/* The pill switch at the top centre: Chat or Notes, one view at a time, at every width (like the EN/NL switch, a bit larger) */
.rm-tabs { justify-self: center; display: inline-flex; gap: 3px; padding: 3px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface); }
.rm-tab { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; min-width: 104px; padding: 4px 20px; border: 0; border-radius: 999px; background: transparent; color: var(--text-2);
  font: inherit; font-weight: 700; cursor: pointer; transition: background-color .12s, color .12s; }
.rm-tab:hover { color: var(--text); background: var(--surface-2); }
.rm-tab[aria-pressed=true], .rm-tab[aria-pressed=true]:hover { background: var(--btn-primary); color: #fff; }
.rm-tab:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 999px; }
/* the unread count on the Chat option (only while the notes are on screen) */
.rm-tab-n { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--btn-primary); color: #fff; font-size: 12.5px; line-height: 20px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.rm-tab-n[hidden] { display: none; }
.rm-tab[aria-pressed=false] .rm-tab-n { box-shadow: 0 0 0 2px var(--surface); }
.rm-grid { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.rm-grid[data-tab="chat"] .rm-notes, .rm-grid[data-tab="notes"] .rm-chat { display: none; }
.rm-frame {
  display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden;
  height: calc(100vh - var(--topbar-h) - 210px); height: calc(100dvh - var(--topbar-h) - 210px); min-height: 440px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
}
.is-mock .rm-frame { height: calc(100vh - var(--topbar-h) - 246px); height: calc(100dvh - var(--topbar-h) - 246px); min-height: 440px; }
/* the chat is one calm column in the middle; the board uses the whole width */
.rm-chat { width: 100%; max-width: 900px; justify-self: center; }
.rm-frame-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 58px; padding: 10px 22px; }
.rm-frame-title { margin: 0; font-size: 18px; letter-spacing: -.01em; }
/* the page title and the switch already say which view this is: the frame's own title would be the third time (it stays in the page for a screen reader) */
.rm-chat .rm-frame-head { display: none; }
.rm-notes .rm-frame-title { display: none; }
.rm-notes .rm-frame-head { min-height: 0; padding: 14px 22px 10px; }
.rm-notes .rm-frame-head { order: -1; }
.rm-notes input.rm-search { flex: 1 1 auto; }
.rm-label { margin: 16px 0 8px; font-size: 12.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.rm-label:first-child { margin-top: 4px; }

/* ---- the chat ---- */
.rm-log-wrap { position: relative; flex: 1 1 auto; min-height: 0; display: flex; }
.rm-log { flex: 1 1 auto; min-width: 0; overflow-y: auto; padding: 10px 22px 14px; scroll-behavior: auto;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14px); mask-image: linear-gradient(to bottom, transparent 0, #000 14px); }
.rm-log:focus-visible { outline-offset: -3px; }
.rm-day { display: flex; align-items: center; gap: 14px; margin: 16px 0 6px; color: var(--muted); font-size: 12.5px; font-weight: 650; }
.rm-day::before, .rm-day::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.rm-older-row { display: flex; justify-content: center; padding: 6px 0 2px; }
.rm-msg { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 0 12px; padding: 7px 0; }
.rm-av { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--surface-2); color: var(--text-2); font-weight: 700; font-size: 14px; }
.rm-av.is-me { background: var(--accent-soft); color: var(--accent-ink); }
.rm-av-dex { background: var(--cp-mark); color: #fff; }
.rm-av-dex .icon { width: 17px; height: 17px; }
.rm-av-ghost { background: transparent; }
.rm-main { min-width: 0; }
.rm-meta { display: flex; align-items: center; gap: 8px; min-height: 22px; }
.rm-name { font-weight: 700; font-size: 15px; }
.rm-time { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.rm-text { font-size: 15.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.rm-link { color: var(--accent-ink); }
.rm-mention { color: var(--accent-ink); font-weight: 650; }
.rm-deleted { margin: 0; align-self: center; color: var(--muted); font-style: italic; font-size: 14.5px; }
.rm-deleted .icon { vertical-align: -2px; }
.rm-msg.is-deleted { padding: 5px 0; }
/* a quiet delete: only there when the line is hovered or has the keyboard */
.rm-del { width: 28px; height: 28px; margin-left: auto; color: var(--muted); opacity: 0; transition: opacity .12s; }
.rm-del .icon { width: 16px; height: 16px; }
.rm-msg:hover .rm-del, .rm-del:focus-visible { opacity: 1; }
@media (hover: none) { .rm-del { opacity: .55; } }
.rm-del:hover { color: var(--danger); }
.rm-confirm { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin-left: auto; font-size: 13.5px; color: var(--text-2); }
.rm-confirm .btn { min-height: 28px; padding: 2px 10px; font-size: 13px; }
/* Copilot DEX speaks in its own colour, like its frame on Today */
.rm-dex .rm-main { padding: 8px 14px 10px; border-radius: var(--radius-sm); background: var(--cp-bar); border: 1px solid var(--cp-border); }
.rm-dex .rm-name { color: var(--cp-ink); }
.rm-ask .rm-main { padding-bottom: 8px; }
.rm-ask-err p { margin: 2px 0 8px; color: var(--danger-ink); }
.rm-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 54px 18px; color: var(--muted); text-align: center; }
.rm-empty .icon { width: 28px; height: 28px; }
.rm-empty p { margin: 0; max-width: 40ch; }
.rm-empty-h { font-weight: 700; color: var(--text-2); }
.rm-newpill { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 0; border-radius: 999px;
  background: var(--btn-primary); color: #fff; font-weight: 650; font-size: 14px; box-shadow: var(--shadow); cursor: pointer; }
.rm-newpill:hover { background: var(--btn-primary-hover); }
.rm-composer { flex: none; padding: 12px 22px 14px; border-top: 1px solid var(--border); }
.rm-input { display: block; resize: none; overflow-y: hidden; min-height: 44px; line-height: 1.5; padding: 9px 13px; }
.rm-comp-row { display: flex; align-items: flex-end; gap: 8px; }
.rm-comp-row .rm-input { flex: 1 1 auto; min-width: 0; width: auto; }
.rm-comp-row .btn { flex: none; min-height: 44px; }
.rm-mention-btn { font-weight: 700; color: var(--accent-ink); }
.rm-send.is-waiting { opacity: 1; }
.rm-send-err { margin: 6px 0 0; }
.rm-hint { margin: 6px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--muted); }

/* ---- the notes ---- */
.rm-quick { flex: none; display: flex; align-items: center; gap: 8px; padding: 0 22px; }
.rm-quick-input { flex: 1 1 auto; min-width: 0; }
.rm-quick-full { flex: none; }
.rm-filters { flex: none; display: flex; align-items: center; gap: 10px; padding: 10px 22px 0; }
.rm-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.rm-chip { min-height: 32px; }
input.rm-search { flex: 0 1 200px; width: auto; min-width: 0; min-height: 36px; border-radius: 999px; padding: 4px 14px; }
/* the cards fade in under the controls instead of being cut flat */
.rm-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 14px 22px 22px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14px); mask-image: linear-gradient(to bottom, transparent 0, #000 14px); }
.rm-grid-notes { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; align-items: start; }
.rm-note { position: relative; padding: 14px 16px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); min-width: 0; overflow-wrap: anywhere;
  transition: box-shadow .12s, border-color .12s; }
.rm-note:hover { box-shadow: var(--shadow); border-color: var(--border-strong); }
.rm-c-yellow { background: var(--nt-yellow); border-color: var(--nt-yellow-bd); }
.rm-c-green { background: var(--nt-green); border-color: var(--nt-green-bd); }
.rm-c-blue { background: var(--nt-blue); border-color: var(--nt-blue-bd); }
.rm-c-pink { background: var(--nt-pink); border-color: var(--nt-pink-bd); }
.rm-c-gray { background: var(--nt-gray); border-color: var(--nt-gray-bd); }
.rm-note-open { position: absolute; inset: 0; width: 100%; border: 0; border-radius: inherit; background: transparent; cursor: pointer; padding: 0; }
.rm-note-open:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.rm-note-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.rm-note-title { margin: 0 0 4px; font-size: 15.5px; line-height: 1.35; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.rm-marks { display: inline-flex; gap: 4px; margin-left: auto; color: var(--muted); }
.rm-mark { display: inline-flex; }
.rm-note-body { margin: 0 0 6px; font-size: 14.5px; line-height: 1.45; color: var(--text); white-space: pre-wrap; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 8; line-clamp: 8; overflow: hidden; }
.rm-items { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 3px; }
.rm-items li { display: flex; align-items: flex-start; gap: 8px; font-size: 14.5px; line-height: 1.4; }
/* A card is for reading: a small tick for what is done, a small ring for what is open. Not a box: nothing here can be ticked. */
.rm-tick { flex: none; display: inline-grid; place-items: center; width: 14px; height: 1.4em; color: var(--muted); }
.rm-tick .icon { width: 13px; height: 13px; stroke-width: 2.6; }
.rm-tick-open::before { content: ""; width: 6px; height: 6px; border-radius: 50%; border: 1.5px solid currentColor; }
.rm-item-text { min-width: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.rm-items li.is-done .rm-item-text { color: var(--muted); text-decoration: line-through; }
.rm-more { margin: 0 0 6px; font-size: 13px; color: var(--muted); }
.rm-note-foot { margin: 8px 0 0; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-empty-notes { padding: 40px 12px; }

/* ---- "not available yet" ---- */
.rm-off { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 520px; margin: 40px auto; padding: 36px 28px; text-align: center; color: var(--text-2);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.rm-off .icon { width: 30px; height: 30px; color: var(--muted); }
.rm-off-h { margin: 0; font-size: 19px; color: var(--text); }
.rm-off p { margin: 0 0 6px; }

/* ---- the note editor: a sheet from the right, like the copilot ---- */
.dlg-note { margin: 0 0 0 auto; width: min(520px, 100vw); max-width: 100vw; height: 100vh; height: 100dvh; max-height: 100dvh; border-radius: 0; }
.dlg-note::backdrop { background: rgba(15, 23, 42, .28); }
.dlg-note .dlg-body { display: flex; flex-direction: column; gap: 14px; min-height: calc(100dvh - 62px); }
.rn-fields { display: grid; gap: 6px; }
input.rn-title { border: 0; border-bottom: 1px solid var(--border); border-radius: 0; padding: 6px 2px; font-size: 20px; font-weight: 700; background: transparent; min-height: 46px; text-overflow: ellipsis; }
input.rn-title:focus-visible { outline: none; border-bottom-color: var(--accent); box-shadow: 0 2px 0 var(--accent); }
textarea.rn-body { border-color: var(--border); min-height: 150px; line-height: 1.5; resize: vertical; }
.rn-h { margin: 0 0 6px; font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.rn-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.rn-item { display: flex; align-items: center; gap: 8px; }
/* the tick and the remove button keep their size: the text field is the one that gives way on a narrow sheet */
.rn-item input[type=checkbox], .rn-item-rm { flex: none; }
.rn-item input[type=text] { flex: 1 1 auto; min-width: 0; border-color: transparent; background: transparent; padding: 4px 6px; min-height: 36px; text-overflow: ellipsis; }
.rn-item input[type=text]:hover, .rn-item input[type=text]:focus { border-color: var(--border-strong); background: var(--surface); }
.rn-item input.is-done { color: var(--muted); text-decoration: line-through; }
.rn-item-rm { width: 32px; height: 32px; color: var(--muted); }
.rn-add { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.rn-add-input { border-style: dashed; }
.rn-look { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.rn-colors { display: flex; align-items: center; gap: 10px; }
.rm-dot { width: 26px; height: 26px; padding: 0; border-radius: 50%; border: 1.5px solid var(--border-strong); background: var(--surface); cursor: pointer; }
/* filled with the stronger tone of each colour: the quiet tints are five near-identical blobs in the dark */
.rm-dot.rm-c-yellow { background: var(--nt-yellow-bd); border-color: var(--nt-yellow-bd); }
.rm-dot.rm-c-green { background: var(--nt-green-bd); border-color: var(--nt-green-bd); }
.rm-dot.rm-c-blue { background: var(--nt-blue-bd); border-color: var(--nt-blue-bd); }
.rm-dot.rm-c-pink { background: var(--nt-pink-bd); border-color: var(--nt-pink-bd); }
.rm-dot.rm-c-gray { background: var(--nt-gray-bd); border-color: var(--nt-gray-bd); }
.rm-dot[aria-checked=true] { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }
.rm-dot.rm-c-none { background: linear-gradient(135deg, transparent 46%, var(--border-strong) 46% 54%, transparent 54%), var(--surface); }
.rn-private { display: grid; gap: 4px; }
.rn-switch { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 650; width: fit-content; }
.rn-switch-input { position: absolute; z-index: 1; left: 0; top: 0; opacity: 0; width: 44px; height: 26px; margin: 0; cursor: pointer; }
.rn-switch-ui { position: relative; flex: none; width: 44px; height: 26px; border-radius: 999px; background: var(--border-strong); transition: background .15s; }
.rn-switch-ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
.rn-switch-input:checked + .rn-switch-ui { background: var(--btn-primary); }
.rn-switch-input:checked + .rn-switch-ui::after { transform: translateX(18px); }
.rn-switch-input:focus-visible + .rn-switch-ui { outline: 3px solid var(--focus); outline-offset: 2px; }
.rn-switch-input:disabled + .rn-switch-ui { opacity: .5; }
.rn-switch-label { display: inline-flex; align-items: center; gap: 4px; }
.rn-meta { margin: 0; }
.rn-err { margin: 0; }
.rn-bar { padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--warn-border); background: var(--warn-soft); color: var(--text); }
.rn-bar-danger { border-color: var(--danger); background: var(--danger-soft); }
.rn-bar p { margin: 0 0 8px; font-weight: 600; }
.rn-bar-actions { display: flex; flex-wrap: wrap; gap: 8px; }
/* Save stays in reach however long the checklist is: the foot sticks to the bottom of the sheet */
.rn-foot { position: sticky; bottom: 0; z-index: 2; margin: auto -22px -22px; padding: 12px 22px 14px; background: var(--surface);
  display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid var(--border); }
.rn-foot-main { display: flex; align-items: center; gap: 10px; }
.rm-menu-wrap { position: relative; }
.rm-menu { position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 5; min-width: 220px; padding: 6px; display: grid; gap: 2px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 10px; box-shadow: var(--shadow-lg); }
.rm-menu-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 0; border-radius: 7px; background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.rm-menu-item:hover, .rm-menu-item:focus-visible { background: var(--surface-2); }
.rm-menu-item.is-danger { color: var(--danger); }

/* ---- the notes view on a wide screen: the quick-add field and the search share a row, the filters under them ---- */
@media (min-width: 1000px) {
  .rm-notes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 300px); grid-template-rows: auto auto minmax(0, 1fr); align-content: start; }
  .rm-notes .rm-frame-head { grid-column: 2; grid-row: 1; padding: 14px 22px 0 0; align-self: center; }
  .rm-notes .rm-quick { grid-column: 1; grid-row: 1; padding: 14px 0 0 22px; max-width: 760px; }
  .rm-notes .rm-filters { grid-column: 1 / -1; grid-row: 2; }
  .rm-notes .rm-scroll { grid-column: 1 / -1; grid-row: 3; }
}
/* ---- below 1000 px ---- */
@media (max-width: 999px) {
  .rm-frame { height: calc(100vh - 300px); height: calc(100dvh - 300px); min-height: 420px; }
  .is-mock .rm-frame { height: calc(100vh - 336px); height: calc(100dvh - 336px); }
  .rm-grid-notes { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}
/* narrow frames: the two buttons with a word become squares with their icon (each keeps its name for a screen reader) */
@media (max-width: 1180px) {
  .rm-quick-add span, .rm-send span { display: none; }
  .rm-quick-add { min-width: 40px; min-height: 40px; padding: 0; justify-content: center; }
  .rm-comp-row .rm-send { min-width: 44px; padding: 0; justify-content: center; }
}
/* fingers: larger targets for the small actions */
@media (pointer: coarse) {
  .rm-del { width: 40px; height: 40px; margin: -9px -6px -9px auto; }
  .rm-dot { width: 34px; height: 34px; }
  .rn-item input[type=checkbox] { width: 24px; height: 24px; }
  .rn-item-rm { width: 40px; height: 40px; }
  .rm-chip { min-height: 38px; }
}
@media (max-width: 640px) {
  .rm-frame { height: calc(100vh - 272px); height: calc(100dvh - 272px); }
  .is-mock .rm-frame { height: calc(100vh - 336px); height: calc(100dvh - 336px); } /* the mock banner has two lines on a phone */
  main[data-view="room"] .page-sub { display: none; }
  main[data-view="room"] .page-head { margin-bottom: 10px; }
  main[data-view="room"] .page-title { font-size: 24px; }
  .rm-notes .rm-frame-head { padding: 12px 16px 10px; }
  .rm-log { padding: 10px 16px 12px; }
  .rm-composer { padding: 10px 16px 12px; }
  .rm-quick { padding: 0 16px; }
  .rm-filters { padding: 10px 16px 0; }
  .rm-scroll { padding: 14px 16px 18px; }
  .rm-grid-notes { grid-template-columns: minmax(0, 1fr); }
  /* the delete question on a line of its own under the name, with buttons a finger can hit */
  .rm-msg.is-asking .rm-meta { flex-wrap: wrap; }
  .rm-confirm { flex: 1 1 100%; margin: 4px 0 6px; }
  .rm-confirm > span { flex: 1 1 100%; }
  .rm-confirm .btn { min-height: 36px; padding: 4px 14px; font-size: 14px; }
  .rn-foot { flex-wrap: wrap; }
  .rn-keyhint { display: none; }
}
@media (prefers-reduced-motion: reduce) { .rm-del, .rn-switch-ui, .rn-switch-ui::after, .rm-note { transition: none; } }