/* Sign-in, staff dashboard and client portal. Builds on site.css tokens.
   These pages use plain white and neutral greys; the warm paper colour is for the website. */

body.staff {
  --paper: #ffffff;
  --paper-2: #f4f4f4;
  --card: #ffffff;
  --ink: #141414;
  --ink-2: #474747;
  --ink-3: #6b6b6b;
  --rule: #e2e2e2;
  --flame-wash: #fff2ea;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.staff {
    --paper: #121212; --paper-2: #1a1a1a; --card: #161616; --ink: #ececec;
    --ink-2: #b8b8b8; --ink-3: #8c8c8c; --rule: #2c2c2c; --flame-wash: #2b1b13;
  }
}
:root[data-theme="dark"] body.staff {
  --paper: #121212; --paper-2: #1a1a1a; --card: #161616; --ink: #ececec;
  --ink-2: #b8b8b8; --ink-3: #8c8c8c; --rule: #2c2c2c; --flame-wash: #2b1b13;
}

.framed body { display: none !important; }

.muted { color: var(--ink-3); }
.fine-print { font-size: 0.86rem; color: var(--ink-3); margin-top: 18px; max-width: 60ch; }
.link-btn {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--ink-2); text-decoration: underline; text-underline-offset: 0.2em; font-size: 0.95rem;
  justify-self: start;
}
.link-btn:hover { color: var(--flame-ink); }
.btn-block { width: 100%; }
.btn.danger { color: var(--bad); }
.btn.danger:hover { border-color: var(--bad); color: var(--bad); }

.boot { min-height: 100vh; display: grid; place-items: center; color: var(--ink-3); font-size: 0.95rem; }

/* ---------- sign-in ---------- */
.signin { min-height: 100vh; display: grid; grid-template-rows: auto 1fr; }
.signin-top { display: flex; align-items: center; justify-content: space-between; min-height: 72px; }
.signin-top .brand { margin: 0; }
.signin-main { display: grid; place-items: start center; padding: clamp(24px, 8vh, 96px) 16px 64px; }
.signin-card { width: min(420px, 100%); }
.signin-card h1 { font-size: clamp(2.2rem, 5vw, 2.8rem); margin-bottom: 10px; }
.signin-card .muted a { color: inherit; }
.signin-card form + .notice, .signin-card .notice { margin-top: 18px; }

.pw { position: relative; }
.pw input { padding-right: 72px; }
.pw-toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; padding: 6px 10px; border-radius: 4px;
  font-size: 0.88rem; color: var(--ink-2); cursor: pointer;
}
.pw-toggle:hover { color: var(--ink); background: var(--paper-2); }
.code-input { font-size: 1.5rem !important; letter-spacing: 0.3em; font-variant-numeric: tabular-nums; text-align: center; }

/* ---------- dashboard shell ---------- */
.staff .dash { min-height: 100vh; display: grid; grid-template-columns: 236px 1fr; }
.dash-side {
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; gap: 26px;
  padding: 22px 16px; border-right: 1px solid var(--rule); background: var(--paper-2);
}
.dash-side .brand { margin: 0 0 0 8px; font-size: 1.25rem; }
.dash-nav { display: grid; gap: 2px; }
.dash-nav button {
  display: flex; align-items: center; justify-content: space-between;
  background: none; border: 0; border-radius: var(--radius);
  padding: 9px 10px; text-align: left; cursor: pointer; color: var(--ink-2); font-size: 0.98rem;
}
.dash-nav button:hover { background: var(--paper); color: var(--ink); }
.dash-nav button[aria-current="page"] { background: var(--card); color: var(--ink); box-shadow: inset 2px 0 0 var(--flame); }
.pill { font-size: 0.78rem; background: var(--flame); color: #fff; border-radius: 999px; padding: 1px 8px; min-width: 22px; text-align: center; }

.dash-me { margin-top: auto; display: grid; gap: 4px; padding: 14px 8px 0; border-top: 1px solid var(--rule); }
.me-name { font-weight: 500; }
.me-email { font-size: 0.85rem; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 10px; }

.dash-main { padding: 28px clamp(16px, 3vw, 40px) 64px; min-width: 0; }
.tab-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.tab-head h1 { font-size: clamp(2rem, 3.4vw, 2.6rem); }
.tab-head .link-btn { margin-bottom: 6px; display: inline-block; }

.banner {
  display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center;
  background: var(--flame-wash); border: 1px solid color-mix(in srgb, var(--flame) 35%, transparent);
  border-radius: var(--radius); padding: 11px 14px; margin-bottom: 22px; font-size: 0.95rem;
}

@media (max-width: 860px) {
  .staff .dash { grid-template-columns: 1fr; }
  .dash-side { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 16px; border-right: 0; border-bottom: 1px solid var(--rule); }
  .dash-nav { display: flex; overflow-x: auto; gap: 4px; order: 3; width: 100%; }
  .dash-nav button { white-space: nowrap; gap: 8px; }
  .dash-me { margin: 0 0 0 auto; border: 0; padding: 0; display: flex; align-items: center; gap: 10px; }
  .me-name, .me-email { display: none; }
}

/* ---------- panels, stats, tables ---------- */
.panel { background: var(--card); border: 1px solid var(--rule); border-radius: 10px; padding: 20px; }
.panel + .panel, .stats + .panel { margin-top: 18px; }
.panel.flush { padding: 0; overflow: hidden; }
.panel h2 { font-size: 1.4rem; margin-bottom: 12px; }
.panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.panel.narrow { max-width: 620px; }
.panel p + p, .panel p + div, .panel .muted + div { margin-top: 12px; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.stat { background: var(--card); border: 1px solid var(--rule); border-radius: 10px; padding: 16px 18px; }
.stat strong { display: block; font-family: var(--display); font-weight: 500; letter-spacing: -0.03em; font-size: 2.6rem; line-height: 1.05; margin-top: 4px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font-size: 0.85rem; border: 1px solid var(--rule); border-radius: 999px; padding: 3px 11px; background: var(--paper); }

.table-scroll { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.table th { text-align: left; font-weight: 500; font-size: 0.82rem; color: var(--ink-3); padding: 12px 16px; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.table td { padding: 12px 16px; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tr.clickable { cursor: pointer; }
.table tr.clickable:hover td { background: var(--paper); }
.table .subject { font-weight: 500; max-width: 380px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table .when { color: var(--ink-3); white-space: nowrap; }
.table .row-actions { justify-content: end; }
.row-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.empty { padding: 28px 20px; text-align: center; color: var(--ink-3); }

.badge { display: inline-block; font-size: 0.78rem; font-weight: 500; border-radius: 999px; padding: 2px 9px; border: 1px solid; white-space: nowrap; }
.badge.open { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.badge.active { color: var(--ink-2); border-color: var(--rule); background: var(--paper); }
.badge.escalated { color: #fff; background: var(--bad); border-color: var(--bad); }
.badge.closed { color: var(--ink-3); border-color: var(--rule); }

.ticket-list { list-style: none; padding: 0; }
.ticket-list li + li { border-top: 1px solid var(--rule); }
.ticket-list button {
  width: 100%; display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center;
  background: none; border: 0; padding: 11px 0; text-align: left; cursor: pointer;
}
.ticket-list button:hover .s { color: var(--flame-ink); }
.ticket-list .s { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ticket-list .when { color: var(--ink-3); font-size: 0.88rem; white-space: nowrap; }

/* ---------- conversations ---------- */
.ticket-grid { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
.chat-grid { display: grid; gap: 18px; grid-template-columns: 230px minmax(0, 1fr); align-items: start; }
@media (max-width: 1000px) { .ticket-grid, .chat-grid { grid-template-columns: 1fr; } }
.side-stack { display: grid; gap: 18px; }
.side-stack .panel + .panel { margin-top: 0; }
.action-stack { display: grid; gap: 8px; }
.action-stack .btn { width: 100%; }

.convo { display: flex; flex-direction: column; height: min(68vh, 680px); }
.convo-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--rule); }
.convo-head h2 { font-size: 1.3rem; margin: 0; }
.thread { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 10px; background: var(--paper); }
.thread .msg { max-width: 78%; }
.thread .msg.them { background: var(--card); }
.thread .msg .time { display: block; font-size: 0.74rem; opacity: 0.65; margin-top: 4px; white-space: normal; }
.composer { border-top: 1px solid var(--rule); padding: 12px; display: grid; gap: 8px; background: var(--card); }
.composer textarea {
  width: 100%; resize: vertical; min-height: 56px; max-height: 240px;
  background: var(--paper); border: 1px solid var(--rule); border-radius: 8px; padding: 10px 12px;
}
.composer textarea:focus { outline: none; border-color: var(--ink); }
.composer-actions { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.file-btn { cursor: pointer; }
.upload-note { font-size: 0.85rem; color: var(--ink-3); }

.channel-list { list-style: none; padding: 8px; }
.channel-list button {
  width: 100%; display: flex; justify-content: space-between; gap: 8px; align-items: baseline;
  background: none; border: 0; border-radius: 6px; padding: 8px 10px; cursor: pointer; text-align: left;
}
.channel-list button:hover { background: var(--paper); }
.channel-list button[aria-current="true"] { background: var(--paper-2); font-weight: 500; }
.channel-list .t { font-size: 0.78rem; color: var(--ink-3); font-weight: 400; }

/* ---------- forms in the dashboard ---------- */
.inline-select select {
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 8px 12px; font-size: 0.95rem;
}
fieldset.field { border: 0; padding: 0; }

.mfa-steps { padding-left: 20px; display: grid; gap: 18px; }
.mfa-steps li { display: grid; gap: 8px; }
.mfa-steps img { background: #fff; padding: 8px; border-radius: 8px; border: 1px solid var(--rule); width: 180px; height: 180px; image-rendering: pixelated; }
.key { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.95rem; background: var(--paper); border: 1px solid var(--rule); border-radius: 6px; padding: 8px 10px; word-break: break-all; user-select: all; }
.mfa-steps .code-input { max-width: 220px; width: 100%; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); padding: 8px; }

.toast {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 90;
  background: var(--ink); color: var(--paper); border-radius: 999px; padding: 10px 18px; font-size: 0.95rem;
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.2); max-width: calc(100vw - 32px);
}

.row-link { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.row-link:hover { text-decoration: underline; }
.notice.info { color: var(--ink-2); }

/* ---------- projects (dashboard + client portal) ---------- */
.project-grid { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
.col-main, .col-side { display: grid; gap: 18px; min-width: 0; }
.col-main > .panel + .panel, .col-side > .panel + .panel, .col-side > form + .panel, .col-main > form + .panel { margin-top: 0; }
@media (max-width: 1000px) { .project-grid { grid-template-columns: 1fr; } }

.stage-track { display: grid; gap: 12px; }
.stages { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; counter-reset: st; }
.stages li {
  counter-increment: st; font-size: 0.86rem; color: var(--ink-3);
  padding-top: 10px; border-top: 3px solid var(--rule);
}
.stages li.done { color: var(--ink-2); border-top-color: var(--ink-3); }
.stages li.current { color: var(--ink); font-weight: 600; border-top-color: var(--flame); }
@media (max-width: 560px) {
  .stages { grid-template-columns: repeat(3, 1fr); row-gap: 10px; }
}
.bar { height: 10px; border-radius: 999px; background: var(--paper-2); border: 1px solid var(--rule); overflow: hidden; }
.bar span { display: block; height: 100%; background: var(--flame); border-radius: 999px; transition: width 0.4s ease; }
.mini-bar { display: inline-block; vertical-align: middle; width: 60px; height: 6px; border-radius: 999px; background: var(--paper-2); overflow: hidden; }
.mini-bar span { display: block; height: 100%; background: var(--flame); }
.progress-form { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--rule); }
input[type="range"] { width: 100%; accent-color: var(--flame); }

.feed { list-style: none; padding: 0; display: grid; }
.feed > li + li { border-top: 1px solid var(--rule); }
.feed-item { padding: 14px 0; display: grid; gap: 6px; }
.feed-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 0.9rem; }
.feed-who { font-weight: 600; }
.feed-when { color: var(--ink-3); margin-left: auto; font-size: 0.85rem; }
.feed-text { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); }
.feed-foot { font-size: 0.85rem; color: var(--bad); }
.feed-item.kind-notice { border-left: 3px solid var(--flame); padding-left: 14px; }
.feed-item.kind-member, .feed-item.kind-amendment, .feed-item.kind-progress { color: var(--ink-2); }
.tag { font-size: 0.75rem; border: 1px solid var(--rule); border-radius: 999px; padding: 1px 8px; color: var(--ink-2); background: var(--paper); }
.tag.kind-notice { border-color: var(--flame); color: var(--flame-ink); }
.tag.kind-update { border-color: var(--ink-3); }

.milestones { list-style: none; padding: 0; display: grid; }
.milestones li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: 0.95rem; }
.milestones li:last-child { border-bottom: 0; }
.ms-main { display: grid; gap: 2px; min-width: 0; }
.ms-actions { display: flex; gap: 12px; align-items: center; flex: none; }
.milestones .due { font-size: 0.82rem; color: var(--ink-3); white-space: nowrap; }
.milestones li.done .t { color: var(--ink-3); }
.milestones li.done .due { color: var(--ok); font-weight: 600; }
.milestones.readonly li .t { min-width: 0; }
#milestone-form { margin-top: 12px; }

.people-list { list-style: none; padding: 0; display: grid; }
.people-list li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--rule); font-size: 0.95rem; }
.people-list li:last-child { border-bottom: 0; }
.people-list .row-actions { flex-direction: column; align-items: end; gap: 2px; }
.link-btn.danger { color: var(--bad); }
#invite-form { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rule); }

.details-list { display: grid; gap: 2px; font-size: 0.95rem; }
.details-list dt { color: var(--ink-3); font-size: 0.82rem; }
.details-list dd { white-space: pre-wrap; overflow-wrap: anywhere; padding-bottom: 10px; border-bottom: 1px solid var(--rule); margin-bottom: 8px; }
.details-list dd:last-of-type { border-bottom: 0; margin-bottom: 0; }

.form-grid.tight { gap: 10px; }
.inline-row { display: flex; gap: 8px; }
.inline-row input { flex: 1; min-width: 0; }
.col-side input:not([type="checkbox"]):not([type="radio"]), .col-side textarea, .col-main textarea, .col-main select,
.col-side select, #post-text, #ask-text {
  width: 100%; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); padding: 9px 11px; font-size: 0.97rem;
}
.col-side input:focus, .col-side textarea:focus, .col-main textarea:focus, .col-main select:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--flame-wash); }

.segmented { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--rule); border-radius: 999px; padding: 3px; gap: 2px; justify-self: start; }
.segmented label { position: relative; cursor: pointer; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented label { padding: 6px 13px; border-radius: 999px; font-size: 0.9rem; color: var(--ink-2); }
.segmented label:has(input:checked) { background: var(--ink); color: var(--paper); }
.segmented label:has(input:focus-visible) { outline: 2px solid var(--flame); outline-offset: 2px; }

.table tr.archived td { color: var(--ink-3); }
.table .tag { margin-left: 8px; }

/* ---------- client portal shell ---------- */
.portal .boot { min-height: 60vh; }
.portal-top { border-bottom: 1px solid var(--rule); background: var(--paper); position: sticky; top: 0; z-index: 20; }
.portal-top-inner { display: flex; align-items: center; gap: 16px; min-height: 64px; }
.portal-top .brand { margin: 0; }
.project-switch { margin-left: 8px; }
.project-switch select { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: 7px 10px; max-width: 46vw; }
.portal-me { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.portal-me .me-name { font-weight: 500; }
@media (max-width: 600px) { .portal-me .me-name { display: none; } }
.portal-main { padding-top: 28px; padding-bottom: 64px; }
.portal-head { margin-bottom: 22px; }
.portal-head h1 { font-size: clamp(2.2rem, 4.6vw, 3.4rem); margin-top: 4px; }
.portal-head .lede { margin-top: 10px; color: var(--ink-2); max-width: 60ch; font-size: 1.1rem; }
.notice-banner { display: block; }

.hint { font-size: 0.85rem; color: var(--ink-3); line-height: 1.45; }
.panel > .hint { margin-top: 10px; }

/* ---------- buttons instead of checkboxes ---------- */
.button-row { display: flex; flex-wrap: wrap; gap: 8px; }
.perm-list { display: grid; gap: 8px; margin-top: 8px; }
.perm-toggle {
  display: grid; grid-template-columns: 46px 1fr; gap: 12px; align-items: start; width: 100%;
  text-align: left; background: var(--card); border: 1px solid var(--rule); border-radius: 8px;
  padding: 10px 12px; cursor: pointer; color: var(--ink);
}
.perm-toggle:hover { border-color: var(--ink-3); }
.perm-toggle[aria-pressed="true"] { border-color: var(--ink); }
.perm-state {
  font-size: 0.75rem; font-weight: 600; text-align: center; border-radius: 999px; padding: 3px 0;
  border: 1px solid var(--rule); color: var(--ink-3); margin-top: 1px;
}
.perm-toggle[aria-pressed="true"] .perm-state { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.perm-toggle:disabled { opacity: 0.5; cursor: not-allowed; }
.perm-label { display: block; font-weight: 500; }
.perm-text .hint { display: block; margin-top: 2px; }

/* ---------- picking files to attach ---------- */
.file-list { list-style: none; padding: 0; display: grid; gap: 6px; font-size: 0.92rem; }
.file-list li { display: flex; gap: 10px; align-items: baseline; padding: 6px 10px; border: 1px solid var(--rule); border-radius: 6px; }
.file-list li span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.file-list .link-btn { margin-left: auto; font-size: 0.85rem; }

/* ---------- client portal: the website's editorial style, on white ---------- */
.portal .project-grid { gap: 28px 48px; grid-template-columns: minmax(0, 1fr) 320px; }
.portal .col-main, .portal .col-side { gap: 28px; }
.portal .panel.form-grid { gap: 14px; }
.portal .panel.form-grid > h2 { margin-bottom: 0; }
.portal .panel { background: none; border: 0; border-top: 1px solid var(--ink); border-radius: 0; padding: 16px 0 0; }
.portal .panel h2 { font-size: 1.35rem; margin-bottom: 14px; }
.portal .panel-head h2 { margin-bottom: 14px; }
.portal .notice-banner { background: none; border: 0; border-left: 3px solid var(--flame); border-radius: 0; padding: 6px 0 6px 14px; margin-bottom: 18px; }
.portal .portal-head { margin-bottom: 24px; padding-top: 4px; }
.portal .stage-track { gap: 14px; }
.portal .col-side input, .portal .col-side textarea, .portal #ask-text { background: var(--card); border-color: #d6d6d6; }
.portal .feed-item { padding: 12px 0; }
@media (max-width: 1000px) { .portal .project-grid { grid-template-columns: 1fr; } }
.portal .feed-item.kind-notice { padding-left: 14px; }
body.staff .banner { background: none; border: 0; border-left: 3px solid var(--flame); border-radius: 0; padding: 6px 0 6px 14px; }

/* ---------- Website tab: client quotes and team photos ---------- */
.dash-side .brand-name { display: grid; line-height: 1.05; }
.dash-side .brand-name span { font-size: 0.72em; letter-spacing: 0.01em; color: var(--ink-2); margin-top: 2px; }
.site-check-panel { margin-bottom: 18px; }
.site-check-panel .muted { margin: 6px 0 14px; max-width: 70ch; }
.check-list { list-style: none; padding: 0; display: grid; border-top: 1px solid var(--rule); }
.check-list li { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--rule); }
.check-list li.muted { display: block; }
.check-list .mark { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em; text-align: center; border-radius: 4px; padding: 2px 0; }
.check-list .good .mark { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); }
.check-list .bad .mark { color: var(--bad); background: color-mix(in srgb, var(--bad) 12%, transparent); }
.check-list strong { display: block; font-weight: 600; }
.check-list .detail { display: block; color: var(--ink-2); font-size: 0.93rem; overflow-wrap: anywhere; }
.site-grid { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); align-items: start; }
.site-grid > .panel + .panel { margin-top: 0; }
@media (max-width: 1100px) { .site-grid { grid-template-columns: 1fr; } }
.site-grid .muted { margin: 6px 0 16px; max-width: 60ch; }
.quote-admin { list-style: none; padding: 0; display: grid; border-top: 1px solid var(--rule); margin-bottom: 22px; }
.quote-admin:empty { display: none; }
.quote-item { display: grid; gap: 8px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.quote-item.editing { box-shadow: inset 3px 0 0 var(--flame); padding-left: 14px; }
.quote-item blockquote { margin: 0; }
.quote-item blockquote p { font-size: 1.02rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.quote-item blockquote p::before { content: "\201C"; }
.quote-item blockquote p::after { content: "\201D"; }
.quote-item .who { font-size: 0.9rem; color: var(--ink-3); display: flex; flex-wrap: wrap; gap: 0 8px; }
.quote-item .who strong { color: var(--ink); font-weight: 600; }
#quote-empty { padding: 18px 0 26px; text-align: left; }
.photo-admin { list-style: none; padding: 0; display: grid; gap: 16px; margin-bottom: 16px; }
.photo-card { display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: center; }
.photo-card .photo { border: 1px solid var(--rule); }
.photo-card .initial { font-size: 2rem; }
.photo-card-body { display: grid; gap: 6px; justify-items: start; }
.photo-card-body .hint { margin: 0; }

/* portal: the "mark as urgent" switch */
.urgent-toggle[aria-pressed="true"] { background: var(--bad); border-color: var(--bad); color: #fff; }
.urgent-toggle[aria-pressed="true"]:hover { background: var(--bad); color: #fff; }

/* ---------- training ---------- */
.tr-intro { margin: -4px 0 14px; max-width: 64ch; }
.tr-cards { list-style: none; padding: 0; display: grid; gap: 12px; }
@media (min-width: 900px) { .tr-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tr-card { border: 1px solid var(--rule); border-radius: 10px; padding: 16px 18px; display: grid; gap: 8px; align-content: start; background: var(--paper); }
.tr-card h3 { font-size: 1.15rem; margin: 0; }
.tr-card-who { font-size: 0.92rem; line-height: 1.45; }
.tr-card-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tr-card .row-actions { margin-top: 4px; }
.tr-admin-list { list-style: none; padding: 0; display: grid; }
.tr-admin-item { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 16px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.tr-admin-item:last-child { border-bottom: 0; }
.tr-admin-main { display: grid; gap: 2px; min-width: 0; }
.tr-admin-main .muted { font-size: 0.88rem; }
.tr-score-chip { font-variant-numeric: tabular-nums; font-weight: 600; }
.tr-score-chip.open { font-weight: 400; color: var(--ink-3); }

.tr-session-head { display: grid; gap: 4px; margin-bottom: 14px; }
.tr-session-head .link-btn { justify-self: start; margin-bottom: 6px; }
.tr-session-head h2 { font-size: 1.6rem; margin: 0; }
.tr-brief { border: 1px solid var(--rule); border-radius: 10px; background: var(--card); padding: 12px 16px; margin-bottom: 14px; }
.tr-brief summary { cursor: pointer; font-weight: 500; }
.tr-brief dl { display: grid; gap: 4px; margin-top: 10px; }
.tr-brief dt { font-size: 0.82rem; color: var(--ink-3); margin-top: 6px; }
.tr-brief dd { margin: 0; white-space: pre-wrap; line-height: 1.5; }
.tr-convo { padding: 0; overflow: hidden; height: min(62vh, 620px); }
.tr-convo .thread .msg { max-width: 82%; }
.tr-convo.done { height: auto; }
.tr-convo.done .thread { max-height: min(70vh, 700px); }
.tr-replay { display: block; font-size: 0.8rem; margin-top: 6px; white-space: normal; }
.tr-speak { gap: 10px; }
.tr-call-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.tr-call-btn { min-width: 150px; justify-content: center; }
.tr-call-btn.hang-up { background: var(--bad); border-color: var(--bad); color: #fff; }
.tr-call-btn.hang-up:hover { background: var(--bad); color: #fff; filter: brightness(0.92); }
.tr-call-status { font-size: 0.92rem; }
.tr-call-hint { margin: 0; }
/* how loud the microphone is, so people can see they're being heard */
.tr-level { width: 72px; height: 6px; border-radius: 999px; background: var(--rule); overflow: hidden; display: none; }
.tr-speak:not([data-call="off"]) .tr-level { display: inline-block; }
.tr-level span { display: block; height: 100%; background: var(--good, #2f8f5b); transform: scaleX(0); transform-origin: left; transition: transform 80ms linear; }
.tr-speak[data-call="replying"] .tr-call-status, .tr-speak[data-call="thinking"] .tr-call-status { color: var(--ink-2); }
.tr-speak[data-call="hearing"] .tr-call-status::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--bad); margin-right: 7px; animation: tr-pulse 1s ease-in-out infinite; }
@keyframes tr-pulse { 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .tr-speak[data-call="hearing"] .tr-call-status::before { animation: none; } .tr-level span { transition: none; } }
.tr-voice-row { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.tr-voice-row select { flex: 1; min-width: 200px; }
.tr-type { display: flex; gap: 8px; }
.tr-type input { flex: 1; min-width: 0; }
.tr-email input, .tr-email textarea, .tr-type input {
  font: inherit; color: var(--ink); background: var(--paper); border: 1px solid var(--rule); border-radius: 8px; padding: 9px 11px;
}
.tr-email textarea { resize: vertical; min-height: 120px; }
.tr-email input:focus, .tr-email textarea:focus, .tr-type input:focus { outline: none; border-color: var(--ink); }
.tr-mail { border: 1px solid var(--rule); border-radius: 10px; background: var(--card); max-width: 88%; overflow: hidden; }
.tr-mail.me { align-self: flex-end; }
.tr-mail.them { align-self: flex-start; }
.tr-mail header { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; padding: 9px 14px; border-bottom: 1px solid var(--rule); background: var(--paper-2); font-size: 0.88rem; }
.tr-mail-subject { color: var(--ink-2); }
.tr-mail-body { padding: 12px 14px; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; font-size: 0.95rem; }
.tr-finish { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 16px; }
.tr-finish .muted { font-size: 0.88rem; }
#tr-status { margin-top: 12px; }

.tr-result { margin-top: 18px; display: grid; gap: 20px; }
.tr-result-head { display: grid; gap: 14px; align-items: center; }
@media (min-width: 700px) { .tr-result-head { grid-template-columns: auto 1fr; gap: 24px; } }
.tr-score { display: grid; justify-items: start; }
.tr-score strong { font-family: var(--display); font-weight: 500; letter-spacing: -0.04em; font-size: 4rem; line-height: 0.95; }
.tr-score span { font-size: 0.85rem; color: var(--ink-3); }
.tr-summary { font-size: 1.05rem; line-height: 1.5; max-width: 60ch; }
.tr-skills { list-style: none; padding: 0; display: grid; gap: 8px; max-width: 560px; }
.tr-skills li { display: grid; grid-template-columns: minmax(0, 1fr) auto 32px; gap: 12px; align-items: center; font-size: 0.95rem; }
.tr-meter { display: inline-flex; gap: 4px; }
.tr-meter span { width: 22px; height: 8px; border-radius: 999px; background: var(--rule); }
.tr-meter span.on { background: var(--ink); }
.tr-skill-n { color: var(--ink-3); font-size: 0.85rem; text-align: right; font-variant-numeric: tabular-nums; }
.tr-cols { display: grid; gap: 18px; }
@media (min-width: 760px) { .tr-cols { grid-template-columns: 1fr 1fr; gap: 28px; } }
.tr-cols h3 { font-size: 1.05rem; margin: 0 0 8px; }
.tr-cols ul { padding-left: 1.1em; display: grid; gap: 8px; line-height: 1.5; }
.tr-focus strong { display: block; }
.tr-focus span { color: var(--ink-2); }
.tr-better { margin: 0; border-left: 3px solid var(--flame); padding: 4px 0 4px 16px; }
.tr-better p { font-size: 1.05rem; margin-top: 4px; }

.tr-people-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 4px; }
.tr-people { max-height: 260px; overflow-y: auto; padding-right: 2px; }
.tr-people .perm-toggle { padding: 8px 12px; }

/* ---------- sign-ups (sales pipeline) ---------- */
[data-stage="research"] { --st: #8a8a8a; }
[data-stage="contacted"] { --st: #3b7dd8; }
[data-stage="talking"] { --st: #17917f; }
[data-stage="demo"] { --st: #8a5cd0; }
[data-stage="trial"] { --st: #c98316; }
[data-stage="signed"] { --st: #2f8f5b; }
[data-stage="lost"] { --st: #a3a3a3; }
[data-stage="all"] { --st: var(--ink); }

.su-products { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 14px; }
.su-product-list { display: flex; flex-wrap: wrap; gap: 6px; }
.su-product {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  border: 1px solid var(--rule); background: var(--card); color: var(--ink-2);
  border-radius: 999px; padding: 6px 8px 6px 14px; font-size: 0.95rem;
}
.su-product[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.su-count { font-size: 0.78rem; border-radius: 999px; padding: 1px 8px; background: var(--paper-2); color: var(--ink-2); }
.su-product[aria-pressed="true"] .su-count { background: color-mix(in srgb, var(--paper) 20%, transparent); color: var(--paper); }
.su-product-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.su-product-form input, .su-search input {
  font: inherit; color: var(--ink); background: var(--card); border: 1px solid var(--rule); border-radius: 8px; padding: 7px 11px;
}
.su-product-form input:focus, .su-search input:focus { outline: none; border-color: var(--ink); }

.su-pipeline { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(112px, 1fr); gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 14px; }
.su-stage-tile {
  display: grid; gap: 2px; justify-items: start; text-align: left; cursor: pointer;
  background: var(--card); color: var(--ink); border: 1px solid var(--rule); border-top: 3px solid var(--st);
  border-radius: 8px; padding: 10px 12px;
}
.su-stage-tile:hover { border-color: color-mix(in srgb, var(--st) 60%, var(--rule)); border-top-color: var(--st); }
.su-stage-tile[aria-pressed="true"] { background: color-mix(in srgb, var(--st) 10%, var(--card)); border-color: var(--st); }
.su-tile-label { font-size: 0.82rem; color: var(--ink-2); }
.su-stage-tile strong { font-family: var(--display); font-weight: 500; font-size: 1.7rem; line-height: 1.1; letter-spacing: -0.02em; }
.su-tile-value { font-size: 0.78rem; color: var(--ink-3); min-height: 1.1em; }

.su-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 14px; }
.su-search { flex: 1 1 260px; display: flex; }
.su-search input { width: 100%; }
.chip-toggle { border: 1px solid var(--rule); background: var(--card); color: var(--ink-2); border-radius: 999px; padding: 6px 13px; font-size: 0.9rem; cursor: pointer; }
.chip-toggle[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.su-table-panel { padding: 0; overflow: hidden; }
.su-table th { white-space: nowrap; }
.su-sort { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.su-sort:hover { color: var(--ink); text-decoration: underline; }
.su-table th[aria-sort="ascending"] .su-sort::after { content: " ↑"; }
.su-table th[aria-sort="descending"] .su-sort::after { content: " ↓"; }
.su-table td { vertical-align: top; }
.su-org strong { display: block; font-weight: 500; }
.su-sub { display: block; font-size: 0.85rem; color: var(--ink-3); margin-top: 2px; }
a.su-sub:hover { color: var(--ink); text-decoration: underline; }
.su-table td > span:first-child:not(.su-sub) { display: block; }
.su-stage-select {
  font: inherit; font-size: 0.88rem; color: var(--ink); cursor: pointer;
  background: color-mix(in srgb, var(--st) 12%, var(--card)); border: 1px solid color-mix(in srgb, var(--st) 55%, var(--rule));
  border-radius: 999px; padding: 4px 10px;
}
.su-next { display: grid; gap: 3px; max-width: 34ch; }
.su-due { font-size: 0.82rem; color: var(--ink-3); }
.su-due.today { color: var(--flame-ink); font-weight: 500; }
.su-due.overdue { color: var(--bad); font-weight: 500; }
.su-table tr.su-closed td { color: var(--ink-3); }

dialog.su-sheet { width: min(940px, calc(100vw - 32px)); }
.su-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
@media (min-width: 760px) { .su-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 28px; } .su-wide { grid-column: 1 / -1; } }
/* fieldsets won't shrink below their contents unless told to */
.su-group { border: 0; padding: 0; margin: 0; display: grid; gap: 12px; align-content: start; min-inline-size: 0; }
.su-group legend { font-weight: 500; font-size: 1.05rem; padding: 0; margin-bottom: 4px; }
.su-form select { font: inherit; }
.su-owner { display: flex; gap: 12px; align-items: baseline; padding: 6px 0; }
.su-delete { margin-left: auto; }
.su-activity { border-top: 1px solid var(--rule); padding-top: 18px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.su-activity h3 { font-size: 1.1rem; margin: 0; }
.su-note { display: flex; gap: 8px; }
.su-note input { flex: 1 1 0; width: 0; min-width: 0; font: inherit; color: var(--ink); background: var(--card); border: 1px solid var(--rule); border-radius: 8px; padding: 8px 11px; }
.su-note input:focus { outline: none; border-color: var(--ink); }
.su-log { list-style: none; padding: 0; display: grid; gap: 0; }
.su-log-item { border-left: 2px solid var(--rule); padding: 4px 0 12px 14px; position: relative; }
.su-log-item::before { content: ""; position: absolute; left: -5px; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--card); border: 2px solid var(--ink-3); }
.su-log-item.kind-stage::before { border-color: var(--flame); }
.su-log-item.kind-created::before { background: var(--ink); border-color: var(--ink); }
.su-log-text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.45; }
.su-log-meta { font-size: 0.8rem; color: var(--ink-3); }