@import url("tokens.css");

/* =========================================================================
   Toran app · paper, ink and a signal flag. Phone first (390), RTL.
   ========================================================================= */

/* ---------- extra tokens ---------- */
:root {
  --side-w: 248px;
  --top-h: 56px;
  --ledger-margin: color-mix(in srgb, var(--brand) 38%, transparent);
  --rule: color-mix(in srgb, var(--line) 75%, transparent);
  --ink-soft: color-mix(in srgb, var(--text) 8%, transparent);
  --safe-b: env(safe-area-inset-bottom, 0px);
}
/* The flag is down: colour drains to paper. Higher specificity than the dark-theme block on purpose. */
:root[data-duty="paused"][data-duty] {
  --brand: var(--state-off);
  --brand-text: var(--text-2);
  --brand-soft: var(--state-off-soft);
  --on-brand: var(--bg);
  --state-auto: var(--state-off);
  --state-auto-soft: var(--state-off-soft);
  --ledger-margin: var(--line);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; min-height: 100%; }
body { font-size: var(--fs-15); overflow-x: hidden; transition: background-color var(--dur-slow) var(--ease-standard); }
@media (min-width: 900px) { body { font-size: var(--fs-16); } }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--staff); text-decoration-thickness: 1px; text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
kbd { font-family: var(--font-mono); font-size: var(--fs-12); border: var(--border); border-bottom-width: 2px; border-radius: 5px; padding: 0 6px; background: var(--surface); color: var(--text-2); }
time { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: .86em; color: var(--text-2); white-space: nowrap; }
::selection { background: var(--brand-soft); color: var(--text); }
:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; box-shadow: none; border-radius: var(--r-field); }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; inset-inline-start: 12px; top: -60px; z-index: 100; background: var(--text); color: var(--bg); padding: 10px 14px; border-radius: var(--r-field); }
.skip:focus { top: 12px; }
.muted { color: var(--text-2); }
.small { font-size: var(--fs-13); }
.center { text-align: center; }
.tr-editorial { font-family: var(--font-editorial); font-weight: var(--fw-medium); line-height: var(--lh-tight); letter-spacing: -0.005em; }

.boot { min-height: 100dvh; display: grid; place-content: center; gap: 14px; justify-items: center; color: var(--text-2); }
.boot-flag { width: 22px; height: 30px; border-inline-start: 4px solid var(--text); position: relative; }
.boot-flag::after { content: ""; position: absolute; inset-inline-start: 0; top: 2px; width: 16px; height: 11px; background: var(--brand); border-radius: 6px 0 0 6px; }

/* ---------- icons, avatars ---------- */
.ico { flex: none; }
.avatar { flex: none; width: 34px; height: 34px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 13px; font-weight: var(--fw-semibold); color: var(--text); background: var(--surface-2); border: 1px solid var(--line); letter-spacing: 0; }
.avatar-1 { background: var(--staff-soft); }
.avatar-2 { background: var(--state-approval-soft); }
.avatar-3 { background: var(--state-auto-soft); }
.avatar-4 { background: var(--brand-soft); }
.avatar-toran { background: var(--text); border-color: var(--text); }
.mini-mark { width: 16px; height: 26px; }
.mini-mark .mk-pole { fill: var(--bg); }
.mini-mark .mk-flag { fill: var(--brand); }
.empty .mini-mark .mk-pole { fill: var(--text); }

/* ---------- logo with flag ---------- */
.flag-logo .mk-pole, .flag-logo .mk-word { fill: var(--text); transition: fill var(--dur-hoist) var(--ease-standard); }
.flag-logo .mk-flag { fill: var(--brand); transform-box: fill-box; transition: transform var(--dur-hoist) var(--ease-hoist), fill var(--dur-hoist) var(--ease-standard); }
:root[data-duty="paused"] .flag-logo .mk-flag { transform: translateY(14px); }
.side-logo { width: 92px; height: auto; }
.top-mark { width: 22px; height: 36px; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--tap-min); padding: 0 16px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font-weight: var(--fw-medium); text-decoration: none; white-space: nowrap; transition: background-color var(--dur-instant) var(--ease-standard), border-color var(--dur-instant), transform var(--dur-instant) var(--ease-standard); }
.btn:hover { border-color: color-mix(in srgb, var(--text) 30%, var(--line)); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; }
.btn-primary { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.btn-primary:hover { background: var(--brand-text); border-color: var(--brand-text); }
.btn-sea { background: var(--staff); border-color: var(--staff); color: var(--bg); }
.btn-quiet { background: transparent; }
.btn-small { min-height: 36px; padding: 0 12px; font-size: var(--fs-13); border-radius: 8px; }
.btn-block { width: 100%; }
.btn.is-busy { opacity: .7; }
.btn-link { background: none; border: 0; padding: 4px 2px; color: var(--staff); font-weight: var(--fw-medium); display: inline-flex; align-items: center; gap: 4px; text-decoration: none; min-height: 32px; }
.btn-link:hover { text-decoration: underline; }
.icon-btn { position: relative; width: var(--tap-min); height: var(--tap-min); display: inline-grid; place-items: center; border: 0; background: transparent; border-radius: 10px; color: var(--text); flex: none; }
.icon-btn:hover { background: var(--ink-soft); }
.icon-btn .dot, .dot { position: absolute; top: 9px; inset-inline-start: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 2px var(--bg); }

/* ---------- chips ---------- */
.chip { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px; border-radius: var(--r-pill); font-size: var(--fs-12); font-weight: var(--fw-medium); background: var(--surface-2); color: var(--text-2); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.chip .ico { width: 13px; height: 13px; }
.chip-live { background: var(--state-auto-soft); color: var(--state-auto); }
.chip-hold { background: var(--state-approval-soft); color: var(--state-approval); }
.chip-signal { background: var(--brand-soft); color: var(--brand-text); }
.chip-sea { background: var(--staff-soft); color: var(--staff); }
.chip-off { background: var(--state-off-soft); color: var(--text-2); }
.chip-stage-new { background: var(--surface-2); color: var(--text); }
.chip-stage-lead { background: var(--state-approval-soft); color: var(--state-approval); }
.chip-stage-customer { background: var(--state-auto-soft); color: var(--state-auto); }
.chip-stage-inactive { background: var(--state-off-soft); color: var(--text-2); }

/* ---------- forms ---------- */
.field { display: grid; gap: 6px; margin-block-end: 16px; }
.field > label, .label { font-size: var(--fs-13); font-weight: var(--fw-semibold); color: var(--text); }
.hint { font-size: var(--fs-13); color: var(--text-2); }
input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="tel"], input[type="number"], input[type="time"], select, textarea {
  width: 100%; min-height: var(--tap-min); padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-field); background: var(--surface); color: var(--text); line-height: 1.4;
  transition: border-color var(--dur-instant);
}
input::placeholder, textarea::placeholder { color: color-mix(in srgb, var(--text-2) 80%, transparent); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--text); outline-offset: 0; border-color: var(--text); }
textarea { resize: vertical; min-height: 64px; }
input[type="time"], input[type="number"] { font-family: var(--font-mono); }
.check { display: inline-flex; align-items: center; gap: 10px; min-height: var(--tap-min); cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: var(--text); }
.form-msg { min-height: 1.4em; color: var(--brand-text); font-size: var(--fs-13); margin-block: 4px 10px; }
.form-msg.ok { color: var(--state-auto); }
.notice { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); color: var(--text); font-size: var(--fs-13); margin-block: 10px; }
.notice .ico { margin-top: 2px; }
.notice-hold { background: var(--state-approval-soft); color: var(--state-approval); }
.search-box { position: relative; display: flex; align-items: center; min-width: 0; flex: 1; }
.search-box .ico { position: absolute; inset-inline-start: 12px; color: var(--text-2); pointer-events: none; }
.search-box input { padding-inline-start: 38px; }
.two-col { display: grid; gap: 0 16px; }
@media (min-width: 700px) { .two-col { grid-template-columns: 1fr 1fr; } }
.form-stack { display: grid; gap: 4px; }

/* segmented control */
.seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; background: var(--surface-2); border-radius: 12px; border: 1px solid var(--line); max-width: 100%; }
.seg-opt { min-height: 38px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent; color: var(--text-2); font-weight: var(--fw-medium); display: inline-flex; align-items: center; gap: 5px; transition: background-color var(--dur-quick), color var(--dur-quick); }
.seg-opt[aria-checked="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-1); }
.seg-opt:disabled { opacity: .5; }
.seg-wide { display: flex; width: 100%; }
.seg-wide .seg-opt { flex: 1; padding: 0 8px; }

/* ---------- cards ---------- */
.card { background: var(--surface); border: var(--border); border-radius: var(--r-card); padding: 16px; box-shadow: var(--shadow-1); }
.section-title { font-size: var(--fs-15); font-weight: var(--fw-semibold); display: flex; align-items: center; gap: 8px; margin-block-end: 12px; }
.qcount { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--text-2); background: var(--surface-2); border-radius: var(--r-pill); padding: 0 7px; min-width: 22px; text-align: center; line-height: 20px; }
.screen-head { display: grid; gap: 8px; margin-block-end: 20px; }
.screen-title { font-size: var(--fs-22); font-weight: var(--fw-bold); letter-spacing: -0.01em; }
.screen-title:focus { outline: none; }
.lead { font-size: clamp(var(--fs-22), 5.6vw, var(--fs-36)); color: var(--text); max-width: 30ch; }
.plain-list { display: grid; }
.pl-row { display: flex; align-items: center; gap: 10px; padding: 10px 4px; border-bottom: 1px solid var(--rule); color: var(--text); text-decoration: none; min-height: var(--tap-min); }
.pl-row:hover, .pl-row.on { background: var(--ink-soft); }
.pl-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.back-link { margin-block-end: 8px; }
.empty { display: grid; justify-items: center; text-align: center; gap: 8px; padding: 40px 16px; color: var(--text-2); }
.empty-mark { width: 44px; height: 64px; display: grid; place-items: center; }
.empty-mark .mini-mark { width: 30px; height: 52px; }
.empty-mark .mk-flag { transform-origin: 66% 30%; transform-box: fill-box; animation: wave 3.2s var(--ease-standard) infinite; }
.empty-title { font-size: var(--fs-28); color: var(--text); }
@keyframes wave { 0%, 100% { transform: skewY(0) scaleX(1); } 50% { transform: skewY(-4deg) scaleX(.94); } }

/* ---------- toasts ---------- */
.toasts { position: fixed; z-index: var(--z-toast); inset-inline: 16px; bottom: calc(var(--bar-height) + 16px + var(--safe-b)); display: grid; gap: 8px; justify-items: center; pointer-events: none; }
@media (min-width: 900px) { .toasts { inset-inline: auto 24px; inset-inline-start: auto; left: 24px; right: auto; bottom: 24px; justify-items: start; } }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 14px; background: var(--text); color: var(--bg); padding: 12px 16px; border-radius: 12px; box-shadow: var(--shadow-3); max-width: 420px; font-size: var(--fs-15); animation: toast-in var(--dur-base) var(--ease-standard); }
.toast .btn-link { color: var(--bg); text-decoration: underline; padding: 0; min-height: 0; }
.toast-error { background: var(--brand-text); color: #fff; }
.toast.out { opacity: 0; transform: translateY(8px); transition: opacity var(--dur-base), transform var(--dur-base); }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } }

/* ---------- sheets & popovers ---------- */
.sheet-wrap { position: fixed; inset: 0; z-index: var(--z-sheet); display: flex; align-items: flex-end; justify-content: center; }
.sheet-scrim { position: absolute; inset: 0; background: rgba(19, 18, 16, .42); animation: fade var(--dur-base) var(--ease-standard); }
.sheet { position: relative; width: 100%; max-width: 560px; max-height: 88dvh; display: flex; flex-direction: column; background: var(--surface); border-radius: var(--r-sheet) var(--r-sheet) 0 0; box-shadow: var(--shadow-3); padding-bottom: var(--safe-b); animation: sheet-up var(--dur-slow) var(--ease-standard); }
.sheet-grip { width: 40px; height: 4px; border-radius: 4px; background: var(--line); margin: 8px auto 0; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px 8px 20px; padding-inline-start: 20px; padding-inline-end: 8px; }
.sheet-head h2 { font-size: var(--fs-18); font-weight: var(--fw-semibold); }
.sheet-body { overflow: auto; padding: 4px 20px 20px; }
.sheet-wrap.closing .sheet { transform: translateY(100%); transition: transform 200ms var(--ease-exit); }
.sheet-wrap.closing .sheet-scrim { opacity: 0; transition: opacity 200ms; }
.sheet-full { max-width: none; height: 100dvh; max-height: none; border-radius: 0; }
.sheet-full .sheet-grip { display: none; }
@media (min-width: 900px) {
  .sheet-wrap { align-items: center; }
  .sheet { border-radius: var(--r-sheet); max-height: 80dvh; }
  .sheet-narrow { max-width: 440px; }
  .sheet-side { justify-content: flex-start; align-items: stretch; }
  .sheet-side .sheet { height: 100dvh; max-height: none; border-radius: 0; max-width: 460px; animation: sheet-side var(--dur-slow) var(--ease-standard); }
  .sheet-side.closing .sheet { transform: translateX(-100%); }
  .sheet-side .sheet-grip { display: none; }
}
@keyframes sheet-up { from { transform: translateY(40px); opacity: 0; } }
@keyframes sheet-side { from { transform: translateX(-40px); opacity: 0; } }
@keyframes fade { from { opacity: 0; } }
.pop { position: fixed; z-index: var(--z-sheet); min-width: 220px; max-width: 320px; background: var(--surface); border: var(--border); border-radius: 12px; box-shadow: var(--shadow-3); padding: 6px; animation: fade var(--dur-quick); }
.menu-list { display: grid; gap: 2px; }
.menu-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: var(--tap-min); padding: 8px 12px; border: 0; background: transparent; border-radius: 8px; text-align: start; color: var(--text); }
.menu-item:hover, .menu-item:focus-visible { background: var(--ink-soft); }
.menu-item span { flex: 1; }
.menu-item small { color: var(--text-2); font-family: var(--font-mono); font-size: var(--fs-12); }
.menu-item.tone-signal { color: var(--brand-text); }

/* =========================================================================
   SHELL
   ========================================================================= */
.shell { min-height: 100dvh; }
.side { display: none; }
.topbar { position: sticky; top: 0; z-index: var(--z-bar); height: var(--top-h); display: flex; align-items: center; gap: 8px; padding: 0 8px 0 4px; padding-inline: 12px 4px; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--rule); }
.top-brand { display: grid; place-items: center; width: 36px; height: 44px; flex: none; }
.top-actions { display: flex; margin-inline-start: auto; }
.org-btn { display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap-min); min-width: 0; padding: 0 10px; border: 0; background: transparent; border-radius: 10px; font-weight: var(--fw-semibold); color: var(--text); text-align: start; }
.org-btn:hover { background: var(--ink-soft); }
.org-btn .org-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.org-btn small { color: var(--text-2); font-weight: var(--fw-regular); font-size: var(--fs-12); }
.app-main { display: block; min-height: calc(100dvh - var(--top-h)); padding-bottom: calc(var(--bar-height) + 20px + var(--safe-b)); transition: filter var(--dur-hoist) var(--ease-standard); outline: none; }
:root[data-duty="paused"] .app-main { filter: saturate(.18); }
#view { padding: 16px; max-width: 1180px; margin-inline: auto; }
.view-enter { animation: view-in var(--dur-slow) var(--ease-standard); }
@keyframes view-in { from { opacity: 0; transform: translateY(6px); } }

/* tab bar (phone) */
.tabbar { position: fixed; z-index: var(--z-bar); inset-inline: 0; bottom: 0; height: calc(var(--bar-height) + var(--safe-b)); padding-bottom: var(--safe-b); display: grid; grid-template-columns: repeat(5, 1fr); align-items: stretch; background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -4px 20px rgba(26, 24, 20, .05); }
.tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--text-2); text-decoration: none; font-size: 11px; font-weight: var(--fw-medium); min-width: 0; }
.tab-ico { position: relative; display: grid; }
.tab-count { position: absolute; top: -6px; inset-inline-end: -12px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--text); color: var(--bg); font-family: var(--font-mono); font-size: 11px; line-height: 18px; text-align: center; }
.tab.active { color: var(--text); }
.tab.active .tab-label { font-weight: var(--fw-bold); }
.tab.active .tab-ico::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--brand); }
.tab-flag { align-self: center; justify-self: center; width: 56px; height: 56px; margin-top: -18px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-2); display: grid; place-items: center; }
.tab-mark { width: 24px; height: 40px; }

@media (min-width: 900px) {
  .shell { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); }
  .topbar, .tabbar { display: none; }
  .side { display: flex; flex-direction: column; gap: 6px; position: sticky; top: 0; height: 100dvh; overflow-y: auto; padding: 18px 12px 12px; background: var(--surface); border-inline-end: 1px solid var(--line); }
  .app-main { min-height: 100dvh; padding-bottom: 0; }
  #view { padding: 28px 32px 48px; }
}
.side-head { display: flex; align-items: center; justify-content: space-between; padding: 0 8px 8px; }
.brand-link { display: block; padding: 4px; border-radius: 8px; }
.side .org-btn { width: 100%; justify-content: space-between; padding: 8px 10px; border: 1px solid var(--line); background: var(--bg); margin-block-end: 8px; }
.side .org-btn .ico { margin-inline-start: auto; }
.nav-list { display: grid; gap: 1px; }
.nav-item { position: relative; display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 0 12px; border-radius: 9px; color: var(--text-2); text-decoration: none; font-weight: var(--fw-medium); }
.nav-item:hover { background: var(--ink-soft); color: var(--text); }
.nav-item.active { background: var(--bg); color: var(--text); font-weight: var(--fw-semibold); }
.nav-item.active::before { content: ""; position: absolute; inset-inline-start: -12px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--brand); }
.nav-item span:first-of-type { flex: 1; }
.nav-count { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--text-2); }
.nav-count-signal { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--brand); color: var(--on-brand); display: grid; place-items: center; }
.side-tools { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--rule); display: grid; gap: 1px; }
.side-tool { display: flex; align-items: center; gap: 12px; min-height: 38px; padding: 0 12px; border: 0; border-radius: 9px; background: transparent; color: var(--text-2); text-align: start; font-size: var(--fs-13); }
.side-tool:hover { background: var(--ink-soft); color: var(--text); }
.side-tool span { flex: 1; }
.side-foot { margin-top: auto; padding-top: 12px; display: grid; gap: 10px; }
.me { display: flex; align-items: center; gap: 10px; padding: 0 4px; }
.me .avatar { width: 30px; height: 30px; font-size: 12px; }
.me-name { flex: 1; font-size: var(--fs-13); font-weight: var(--fw-medium); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* paused banner */
.paused-banner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; background: var(--surface-2); border-bottom: 1px solid var(--line); animation: fade var(--dur-hoist); }
.paused-banner p { flex: 1; min-width: 180px; }
.pb-flag { width: 14px; height: 26px; border-inline-start: 3px solid var(--text-2); position: relative; flex: none; }
.pb-flag::after { content: ""; position: absolute; inset-inline-start: 0; bottom: 0; width: 11px; height: 8px; border-radius: 4px 0 0 4px; background: var(--text-2); }

/* =========================================================================
   SIGNATURE MOMENTS
   ========================================================================= */

/* 1 · shift handover */
.home-head { display: grid; gap: 18px; padding-block: 6px 26px; }
.eyebrow { display: flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; color: var(--text-2); font-size: var(--fs-13); }
.eyebrow-title { font-size: var(--fs-13); font-weight: var(--fw-semibold); color: var(--text); letter-spacing: .02em; }
.eyebrow-title:focus { outline: none; }
.eyebrow-reset { margin-inline-start: auto; font-size: var(--fs-13); min-height: 28px; }
.handover { font-size: clamp(30px, 8.2vw, 54px); color: var(--text); max-width: 21ch; text-wrap: balance; }
.hn-time { font-family: var(--font-editorial); }
.hn-num { font: inherit; color: inherit; background: none; border: 0; padding: 0 .04em; border-radius: 6px; text-decoration: underline; text-decoration-thickness: .08em; text-underline-offset: .14em; text-decoration-color: color-mix(in srgb, var(--text) 35%, transparent); font-variant-numeric: lining-nums; transition: background-color var(--dur-instant), text-decoration-color var(--dur-quick); }
.hn-num:hover { background: var(--ink-soft); text-decoration-color: var(--text); }
.hn-wait .hn-num { color: var(--brand-text); text-decoration-color: var(--brand); }
.rv { display: inline-block; animation: rv var(--dur-slow) var(--ease-standard) both; }
@keyframes rv { from { opacity: 0; transform: translateY(.25em); filter: blur(2px); } }
.home-cta { display: flex; flex-wrap: wrap; gap: 10px; }

/* live "now" strip */
.now-strip { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; padding: 10px 14px; border-radius: 12px; background: var(--state-auto-soft); color: var(--text); font-size: var(--fs-15); }
.now-strip .btn-link { color: var(--text); font-weight: var(--fw-semibold); min-height: 28px; padding: 0; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--text) 30%, transparent); }
.now-idle { background: transparent; border: 1px dashed var(--line); color: var(--text-2); }
.pulse { position: relative; width: 9px; height: 9px; border-radius: 50%; background: var(--state-auto); flex: none; }
.pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--state-auto); animation: pulse var(--pulse-period) var(--ease-standard) infinite; }
@keyframes pulse { 0% { transform: scale(1); opacity: .55; } 70%, 100% { transform: scale(2.8); opacity: 0; } }
:root[data-duty="paused"] .pulse::after { animation: none; }

/* home layout + ledger */
.home-grid { display: grid; gap: 20px; }
@media (min-width: 1100px) { .home-grid { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; } .home-aside { position: sticky; top: 24px; } }
.home-aside { display: grid; gap: 16px; }
.ledger { background: var(--surface); border: var(--border); border-radius: var(--r-card); box-shadow: var(--shadow-1); overflow: hidden; }
.ledger-head { display: grid; gap: 10px; padding: 16px 16px 12px; border-bottom: 1px solid var(--line); }
.ledger-head .section-title { margin: 0; }
.filters { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.filters::-webkit-scrollbar { display: none; }
.filter { flex: none; min-height: 34px; padding: 0 12px; border-radius: var(--r-pill); border: 1px solid var(--line); background: transparent; color: var(--text-2); font-size: var(--fs-13); font-weight: var(--fw-medium); }
.filter.on { background: var(--text); border-color: var(--text); color: var(--bg); }
.log { position: relative; }
.log::before { content: ""; position: absolute; top: 0; bottom: 0; inset-inline-start: 62px; width: 1px; background: var(--ledger-margin); }
.log-row { display: grid; grid-template-columns: 50px 26px minmax(0, 1fr); align-items: start; gap: 0 8px; padding: 0 12px 0 16px; padding-inline: 12px 16px; border-bottom: 1px solid var(--rule); }
.log-row > time { padding-top: 14px; font-size: var(--fs-13); }
.log-glyph { margin-top: 12px; width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; background: var(--surface-2); color: var(--text-2); position: relative; z-index: 1; }
.log-action .log-glyph { background: var(--state-auto-soft); color: var(--state-auto); }
.log-approval .log-glyph { background: var(--state-approval-soft); color: var(--state-approval); }
.log-handoff .log-glyph { background: var(--staff-soft); color: var(--staff); }
.log-text { display: grid; gap: 2px; padding: 11px 0 12px; border: 0; background: none; text-align: start; color: var(--text); line-height: 1.45; min-width: 0; border-radius: 6px; }
.log-text:hover strong { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.log-steps { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--state-auto); overflow-wrap: anywhere; }
.log-status { font-size: var(--fs-12); color: var(--text-2); }
.log-urgent strong { color: var(--brand-text); }
.wait-card .ticket { box-shadow: none; }
.more-link { margin-top: 8px; }
.gap-lead { font-family: var(--font-editorial); font-size: var(--fs-18); line-height: 1.35; margin-block-end: 10px; }
.gap-list { display: grid; gap: 6px; margin-block-end: 12px; }
.gap-list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: var(--fs-13); color: var(--text-2); }
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stat-row dt { font-size: var(--fs-12); color: var(--text-2); }
.stat-row dd { font-family: var(--font-mono); font-size: var(--fs-22); }

/* 2 · action receipt */
.run-wrap { filter: drop-shadow(0 1px 1px rgba(26, 24, 20, .10)) drop-shadow(0 4px 10px rgba(26, 24, 20, .05)); max-width: 360px; width: 100%; margin-inline: auto; padding-block: 2px; }
:root[data-theme="dark"] .run-wrap { filter: none; }
.receipt { --z: 6px; position: relative; background: var(--surface); padding: 12px 14px calc(14px + var(--z)); font-family: var(--font-mono); font-size: var(--fs-13); color: var(--text); border-top: 3px solid var(--text);
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(2 * var(--z)) 100%;
  mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(2 * var(--z)) 100%; }
.rc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-family: var(--font-ui); font-weight: var(--fw-semibold); font-size: var(--fs-13); padding-bottom: 8px; border-bottom: 1px dashed var(--line); margin-bottom: 6px; }
.rc-title { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.rc-lines { display: grid; gap: 2px; }
.rc-lines li { display: flex; align-items: baseline; gap: 6px; line-height: 1.6; }
.rc-step { flex: none; max-width: 80%; overflow-wrap: anywhere; }
.rc-dots { flex: 1; border-bottom: 1px dotted color-mix(in srgb, var(--text-2) 60%, transparent); transform: translateY(-4px); min-width: 12px; }
.rc-ok { color: var(--state-auto); flex: none; }
.rc-ok .ico { stroke-width: 2.4; }
.rc-lines li.print { animation: print 300ms var(--ease-standard) both; }
@keyframes print { from { opacity: 0; clip-path: inset(0 0 0 100%); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
.rc-pending { color: var(--text-2); }
.rc-spin { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--text); animation: spin .8s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.rc-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; min-height: 28px; }
.rc-record { display: inline-flex; align-items: center; gap: 4px; color: var(--staff); font-family: var(--font-ui); font-size: var(--fs-12); min-width: 0; }
.rc-record small { color: var(--text-2); }
.rc-stamp { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border: 2px solid currentColor; border-radius: 5px; color: var(--state-auto); font-weight: var(--fw-medium); letter-spacing: .04em; transform: rotate(-5deg); flex: none; }
.rc-stamp time { color: inherit; font-size: inherit; }
.rc-stamp.stamp-in { animation: stamp 420ms var(--ease-hoist) both; }
@keyframes stamp { 0% { opacity: 0; transform: scale(1.9) rotate(-14deg); } 60% { opacity: 1; } 100% { opacity: 1; transform: scale(1) rotate(-5deg); } }
.rc-failed .rc-stamp { color: var(--danger); }
.rc-rejected .rc-stamp, .rc-undone .rc-stamp { color: var(--text-2); }
.rc-error { color: var(--danger); font-family: var(--font-ui); margin-top: 6px; }
.rc-undo { font-size: var(--fs-12); font-family: var(--font-ui); margin-top: 4px; }
.rc-compact { padding: 10px 12px calc(10px + var(--z)); font-size: var(--fs-12); }
.rc-compact .rc-foot { margin-top: 6px; }
.receipts, .decided-list { display: grid; gap: 12px; }
.receipts .receipt, .ccard .receipt, .decided-item .receipt { max-width: 380px; }

/* 3 · approval ticket */
.ticket { --stub: 54px; position: relative; display: grid; grid-template-columns: var(--stub) minmax(0, 1fr); background: var(--surface); border: var(--border); border-radius: var(--r-card); box-shadow: var(--shadow-2); overflow: hidden; transition: transform var(--dur-base) var(--ease-standard), opacity var(--dur-base); }
.tk-stub { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px 0; background: var(--state-approval-soft); color: var(--state-approval); border-inline-end: 2px dashed color-mix(in srgb, var(--state-approval) 35%, transparent); }
.risk-money .tk-stub { background: var(--brand-soft); color: var(--brand-text); border-inline-end-color: color-mix(in srgb, var(--brand) 40%, transparent); }
.ticket::before, .ticket::after { content: ""; position: absolute; inset-inline-start: calc(var(--stub) - 9px); width: 16px; height: 16px; border-radius: 50%; background: var(--bg); border: 1px solid var(--line); z-index: 1; }
.ticket::before { top: -9px; }
.ticket::after { bottom: -9px; }
.card .ticket::before, .card .ticket::after { background: var(--surface); }
.tk-risk { writing-mode: vertical-rl; font-size: var(--fs-12); font-weight: var(--fw-semibold); letter-spacing: .06em; }
.tk-main { padding: 14px 16px 16px; display: grid; gap: 8px; min-width: 0; }
.tk-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: var(--fs-13); color: var(--text-2); }
.tk-meta .avatar { width: 24px; height: 24px; font-size: 10px; }
.tk-dot { opacity: .6; }
.tk-sentence { font-family: var(--font-editorial); font-size: var(--fs-22); font-weight: var(--fw-medium); line-height: 1.25; color: var(--text); }
.tk-why { font-size: var(--fs-13); color: var(--text-2); }
.tk-why b { color: var(--text); font-weight: var(--fw-semibold); }
.tk-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.tk-secondary { display: flex; align-items: center; gap: 4px; }
.ticket-compact .tk-sentence { font-size: var(--fs-18); }
.ticket-compact .tk-main { padding: 12px 14px 14px; }
.tk-stamp { position: absolute; z-index: 2; inset-inline-end: 22px; top: 22px; display: grid; justify-items: center; padding: 6px 14px; border: 3px solid var(--state-auto); color: var(--state-auto); border-radius: 8px; font-family: var(--font-mono); font-size: var(--fs-22); font-weight: var(--fw-medium); letter-spacing: .08em; transform: rotate(-8deg); background: color-mix(in srgb, var(--surface) 80%, transparent); animation: stamp 420ms var(--ease-hoist) both; }
.tk-stamp time { font-size: var(--fs-12); color: inherit; }
.tk-rejected .tk-stamp { color: var(--text-2); border-color: var(--text-2); }
.tk-approved .tk-main, .tk-rejected .tk-main { opacity: .55; }
.tk-leaving { opacity: 0; transform: translateY(-10px) scale(.98); }

/* press-and-hold */
.hold { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 4px 18px 4px 6px; padding-inline: 6px 18px; border: 1px solid var(--text); border-radius: var(--r-pill); background: linear-gradient(to left, var(--state-auto-soft) calc(var(--p, 0) * 100%), var(--surface) 0); color: var(--text); font-weight: var(--fw-semibold); user-select: none; -webkit-user-select: none; touch-action: manipulation; -webkit-touch-callout: none; }
.hold-ring { width: 40px; height: 40px; transform: rotate(-90deg); flex: none; }
.hold-ring circle { fill: none; stroke-width: 4; }
.hr-track { stroke: var(--line); }
.hr-fill { stroke: var(--state-auto); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p, 0) * 100); }
.hr-check { fill: none; stroke: var(--state-auto); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 100; transform: rotate(90deg); transform-origin: 32px 32px; transition: stroke-dashoffset 260ms var(--ease-standard); }
.hold.holding { border-color: var(--state-auto); }
.hold.held { border-color: var(--state-auto); color: var(--state-auto); }
.hold.held .hr-check { stroke-dashoffset: 0; }
.hold.released { animation: nudge 240ms var(--ease-standard); }
@keyframes nudge { 30% { transform: translateX(-3px); } 70% { transform: translateX(2px); } }
.hold-bar { width: 100%; justify-content: center; overflow: hidden; background: var(--text); color: var(--bg); border-color: var(--text); min-height: 52px; padding: 0 20px; }
.hold-bar .hold-fill { position: absolute; inset: 0; background: var(--state-auto); transform-origin: right; transform: scaleX(var(--p, 0)); }
.hold-bar .hold-label { position: relative; }
.hold-bar.held { background: var(--state-auto); color: var(--bg); }

/* 4 · "אני על זה" duty pole */
.duty { display: inline-flex; align-items: center; gap: 0; flex: none; }
.duty .avatar { width: 30px; height: 30px; font-size: 11px; transition: box-shadow var(--dur-base), opacity var(--dur-base); opacity: .45; }
.duty-toran .duty-toran .avatar, .duty-human .duty-human .avatar { opacity: 1; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--brand); }
.duty-track { position: relative; width: 40px; height: 30px; }
.duty-track::before { content: ""; position: absolute; inset-inline: 2px; top: 50%; height: 2px; margin-top: -1px; background: var(--line); border-radius: 2px; }
.duty-flag { position: absolute; top: 3px; inset-inline-start: 0; width: 14px; height: 10px; background: var(--brand); border-radius: 5px 0 0 5px; transition: transform var(--dur-hoist) var(--ease-hoist); }
.duty-human .duty-flag { transform: translateX(-26px) scaleX(-1); }
.duty-passing .duty-flag { animation: flag-hop var(--dur-hoist) var(--ease-hoist); }
@keyframes flag-hop { 40% { top: -6px; } }

/* 5 · pause lever */
.lever { display: flex; align-items: center; gap: 26px; width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); color: var(--text); text-align: start; }
.lever:hover { border-color: color-mix(in srgb, var(--text) 30%, var(--line)); }
.lever-pole { position: relative; flex: none; width: 4px; height: 36px; border-radius: 2px; background: var(--text); margin-inline-start: 14px; }
.lever-flag { position: absolute; top: 2px; inset-inline-start: 4px; width: 18px; height: 13px; border-radius: 7px 0 0 7px; background: var(--state-auto); transition: transform var(--dur-hoist) var(--ease-hoist), background-color var(--dur-hoist); }
:root:not([data-duty="paused"]) .lever-flag { background: var(--brand); }
.lever.is-down .lever-flag { transform: translateY(19px); background: var(--state-off); }
.lever-text { display: grid; line-height: 1.3; }
.lever-text strong { font-size: var(--fs-13); }
.lever-text small { color: var(--text-2); font-size: var(--fs-12); }
.lever-big { padding: 18px; gap: 60px; border-radius: var(--r-sheet); box-shadow: var(--shadow-1); }
.lever-big .lever-pole { width: 8px; height: 104px; border-radius: 4px; margin-inline-start: 20px; }
.lever-big .lever-flag { top: 4px; inset-inline-start: 8px; width: 46px; height: 32px; border-radius: 16px 0 0 16px; }
.lever-big.is-down .lever-flag { transform: translateY(64px); }
.lever-big .lever-text strong { font-size: var(--fs-22); font-family: var(--font-editorial); font-weight: var(--fw-medium); }
.lever-big .lever-text small { font-size: var(--fs-15); }
.duty-sheet { display: grid; gap: 14px; padding-bottom: 8px; }
.duty-sheet-title { font-size: var(--fs-28); }
.duty-big { max-width: 440px; margin-top: 12px; }
.tab-flag.is-down { background: var(--surface-2); }

/* =========================================================================
   SCREENS
   ========================================================================= */

/* ---------- login ---------- */
.login { min-height: 100dvh; display: grid; grid-template-rows: 132px 1fr; }
.login-art { position: relative; overflow: hidden; background: var(--surface-2); }
.signal-pattern { width: 100%; height: 100%; }
.sp-red { fill: var(--brand); }
.sp-ink { fill: var(--text); }
.sp-paper { fill: var(--surface-2); }
.sp-line { fill: none; stroke: var(--line); stroke-width: 1.5; }
.login-art-card { display: none; }
.login-panel { display: grid; align-content: start; justify-items: center; gap: 18px; padding: 28px 16px 32px; }
.login-logo { margin-top: -66px; background: var(--bg); padding: 14px 18px; border-radius: 18px; box-shadow: var(--shadow-2); position: relative; }
.login-mark { width: 120px; height: auto; }
.login-form { width: 100%; max-width: 380px; display: grid; }
.login-title { font-size: var(--fs-36); margin-block: 4px 4px; }
.login-sub { margin-block-end: 20px; }
.login-alt { display: flex; justify-content: center; margin-top: 10px; }
.demo-box { margin-top: 18px; padding: 14px; border-radius: 12px; border: 1px dashed var(--line); display: grid; gap: 10px; font-size: var(--fs-13); color: var(--text-2); }
.login-foot { color: var(--text-2); font-size: var(--fs-12); }
@media (min-width: 900px) {
  .login { grid-template-rows: none; grid-template-columns: minmax(0, 1fr) 520px; }
  .login-art-card { display: grid; gap: 6px; position: absolute; inset-inline-start: 48px; bottom: 48px; max-width: 420px; padding: 24px 28px; background: var(--bg); border-radius: var(--r-sheet); box-shadow: var(--shadow-3); font-size: var(--fs-28); }
  .login-art-strong { color: var(--brand-text); }
  .login-panel { align-content: center; padding: 48px; }
  .login-logo { margin-top: 0; box-shadow: none; background: none; padding: 0; }
}

/* ---------- inbox ---------- */
.inbox { display: grid; gap: 0; }
.inbox-list-head { display: grid; gap: 12px; margin-block-end: 12px; }
.queue-tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; padding-block-end: 10px; border-bottom: 1px solid var(--line); }
.queue-tabs::-webkit-scrollbar { display: none; }
.qtab { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: var(--r-pill); color: var(--text-2); text-decoration: none; font-size: var(--fs-13); font-weight: var(--fw-medium); border: 1px solid transparent; }
.qtab:hover { background: var(--ink-soft); }
.qtab.on { background: var(--text); color: var(--bg); }
.qtab.on .qcount { background: color-mix(in srgb, var(--bg) 20%, transparent); color: var(--bg); }
.qtab-hot:not(.on) { border-color: var(--brand); color: var(--brand-text); }
.conv-list { display: grid; }
.conv-row { display: flex; gap: 12px; padding: 14px 4px; border-bottom: 1px solid var(--rule); color: var(--text); text-decoration: none; position: relative; }
.conv-row:hover { background: var(--ink-soft); }
.conv-row.on { background: var(--surface); }
.conv-row.on::before { content: ""; position: absolute; inset-inline-start: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--text); }
.conv-row.is-urgent .cr-name { color: var(--brand-text); }
.cr-body { flex: 1; min-width: 0; display: grid; gap: 3px; }
.cr-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.cr-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--fw-semibold); }
.cr-when { font-size: var(--fs-12); }
.cr-last { color: var(--text-2); font-size: var(--fs-13); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.45; }
.cr-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; align-items: center; }
.cr-live { display: inline-grid; place-items: center; width: 20px; height: 20px; }
.inbox-conv .empty { height: 100%; align-content: center; }
.inbox.has-open .inbox-list { display: none; }
.inbox:not(.has-open) .inbox-conv { display: none; }
@media (min-width: 900px) {
  #view[data-screen="inbox"] { padding: 0; max-width: none; }
  .inbox { grid-template-columns: 320px minmax(0, 1fr); height: 100dvh; }
  .inbox.has-open .inbox-list, .inbox:not(.has-open) .inbox-conv { display: flex; }
  .inbox-list { display: flex; flex-direction: column; min-height: 0; border-inline-end: 1px solid var(--line); }
  .inbox-list-head { padding: 22px 16px 0; }
  .queue-tabs { margin: 0; padding-inline: 16px; flex-wrap: wrap; }
  .conv-list { overflow-y: auto; flex: 1; padding-inline: 8px; }
  .conv-row { padding-inline: 10px; border-radius: 10px; border-bottom-color: transparent; }
  .conv-row + .conv-row, .conv-list li + li .conv-row { border-top: 1px solid var(--rule); }
  .inbox-conv { min-height: 0; min-width: 0; }
}
:root[data-duty="paused"] .inbox { height: auto; }

/* ---------- conversation ---------- */
.cv { display: grid; height: calc(100dvh - var(--top-h) - var(--bar-height) - var(--safe-b) - 32px); min-height: 420px; }
.cv-main { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--bg); }
.cv-panel { display: none; }
.cv-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding-block: 0 12px; border-bottom: 1px solid var(--line); }
.cv-back { margin-inline-start: -10px; }
.cv-who { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 200px; }
.cv-who-text { min-width: 0; }
.cv-name { font-size: var(--fs-18); font-weight: var(--fw-bold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-sub { display: flex; flex-wrap: wrap; gap: 0 6px; font-size: var(--fs-13); color: var(--text-2); }
.cv-sub .sep { opacity: .5; }
.cv-topic { color: var(--text); }
.cv-tags { display: flex; flex-wrap: wrap; gap: 4px; width: 100%; order: 3; }
.cv-actions { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; }
.take-btn { min-width: 128px; }
.take-back { background: var(--staff-soft); border-color: transparent; color: var(--staff); }
.cv-thread { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 0 18px; display: flex; flex-direction: column; gap: 10px; scroll-behavior: smooth; overscroll-behavior: contain; }
.cv-thread:focus-visible { outline-offset: -2px; }
.day-sep { display: flex; justify-content: center; margin-block: 6px; }
.day-sep span { font-size: var(--fs-12); color: var(--text-2); background: var(--surface-2); padding: 2px 10px; border-radius: var(--r-pill); }
.msg { max-width: min(78%, 520px); padding: 9px 12px 7px; border-radius: 14px; display: grid; gap: 2px; box-shadow: var(--shadow-1); }
.msg-customer { align-self: flex-start; background: var(--surface); border: 1px solid var(--line); border-start-start-radius: 4px; }
.msg-toran, .msg-staff { align-self: flex-end; border-start-end-radius: 4px; }
.msg-toran { background: var(--text); color: var(--bg); }
.msg-toran .msg-by, .msg-toran time { color: color-mix(in srgb, var(--bg) 70%, transparent); }
.msg-staff { background: var(--staff-soft); color: var(--text); border: 1px solid color-mix(in srgb, var(--staff) 25%, transparent); }
.msg-staff .msg-by { color: var(--staff); }
.msg-by { font-size: var(--fs-12); font-weight: var(--fw-semibold); }
.msg-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-meta { justify-self: end; display: flex; gap: 6px; align-items: center; }
.msg-meta time { font-size: 11px; }
.msg-fail { font-size: 11px; color: var(--danger); }
.note-line { align-self: center; width: min(100%, 560px); display: grid; grid-template-columns: auto 1fr auto; gap: 4px 10px; align-items: baseline; padding: 8px 12px; border-radius: 10px; background: var(--state-approval-soft); border: 1px dashed color-mix(in srgb, var(--state-approval) 40%, transparent); font-size: var(--fs-13); }
.note-system { background: transparent; border-color: var(--line); color: var(--text-2); }
.note-tag { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-12); font-weight: var(--fw-semibold); color: var(--state-approval); }
.note-system .note-tag { color: var(--text-2); }
.note-line p { overflow-wrap: anywhere; }
.typing { align-self: flex-end; display: inline-flex; align-items: center; gap: 8px; color: var(--text-2); font-size: var(--fs-13); }
.typing .avatar { width: 26px; height: 26px; }
.dots { display: inline-flex; gap: 3px; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .4; animation: dot 1.2s infinite; }
.dots i:nth-child(2) { animation-delay: .15s; }
.dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 30% { opacity: 1; transform: translateY(-2px); } }
.handoff-note { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; padding: 10px 12px; border-radius: 12px; background: var(--staff-soft); color: var(--text); font-size: var(--fs-13); animation: fade var(--dur-slow); }
.handoff-note .avatar { width: 28px; height: 28px; }
.handoff-note strong { display: block; color: var(--staff); }
.cv-compose { border-top: 1px solid var(--line); padding-top: 10px; display: grid; gap: 8px; }
.cv-compose.is-note textarea { background: var(--state-approval-soft); border-style: dashed; }
.seg-compose .seg-opt { min-height: 32px; font-size: var(--fs-13); padding: 0 12px; }
.compose-row { display: flex; gap: 8px; align-items: flex-end; }
.compose-row textarea { min-height: var(--tap-min); max-height: 180px; resize: none; }
.send-btn { flex: none; }
.send-btn span { display: none; }
.compose-hint { font-size: var(--fs-12); color: var(--text-2); min-height: 1em; }
.task-form { display: grid; gap: 8px; }
.task-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.task-form-row .btn { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .cv { height: 100%; }
  .cv-main { padding: 18px 24px 16px; }
  .send-btn span { display: inline; }
  .task-form-row { grid-template-columns: 1fr 1fr auto; }
  .task-form-row .btn { grid-column: auto; }
}
@media (min-width: 1240px) {
  .cv { grid-template-columns: minmax(0, 1fr) 300px; }
  .cv-panel { display: block; overflow-y: auto; border-inline-start: 1px solid var(--line); padding: 20px 18px; background: var(--surface); }
}
.cv-head .cv-tags { order: 3; }

/* contact card */
.ccard { display: grid; gap: 12px; }
.ccard-head { display: flex; gap: 12px; align-items: center; }
.ccard-head .avatar { width: 44px; height: 44px; font-size: 15px; }
.ccard-head h3 { font-size: var(--fs-18); }
.ccard-phone { font-family: var(--font-mono); font-size: var(--fs-13); }
.ccard-row { display: grid; grid-template-columns: 56px 1fr; align-items: center; gap: 8px; }
.ccard-row label { font-size: var(--fs-13); color: var(--text-2); }
.ccard-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.ccard-fields { display: grid; gap: 4px; font-size: var(--fs-13); }
.ccard-fields div { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px dashed var(--rule); padding-block: 4px; }
.ccard-fields dt { color: var(--text-2); }
.ccard-h { font-size: var(--fs-12); text-transform: none; letter-spacing: .04em; color: var(--text-2); font-weight: var(--fw-semibold); margin-top: 6px; }
.mini-tasks { display: grid; gap: 6px; font-size: var(--fs-13); }
.mini-tasks li { display: flex; gap: 6px; align-items: center; }
.mini-tasks li span { flex: 1; }
.mini-tasks li.done span { text-decoration: line-through; color: var(--text-2); }
.notes { display: grid; gap: 8px; }
.notes li { background: var(--state-approval-soft); border-radius: 10px; padding: 8px 10px; font-size: var(--fs-13); display: grid; gap: 2px; }
.notes small { color: var(--text-2); font-size: var(--fs-12); }
.note-add { display: grid; gap: 6px; justify-items: end; }

/* ---------- approvals ---------- */
.approvals, .contacts, .tasks, .notifs, .more, .reports, .board-screen, .profile, .sim-page { display: grid; gap: 14px; align-content: start; }
.approvals .screen-head, .tasks .screen-head, .reports .screen-head { margin-block-end: 6px; }
.deck { display: grid; gap: 16px; }
@media (max-width: 899px) {
  .deck { grid-auto-flow: column; grid-auto-columns: calc(100% - 28px); overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin-inline: -16px; padding: 12px 16px 16px; scrollbar-width: none; overscroll-behavior-x: contain; }
  .deck::-webkit-scrollbar { display: none; }
  .deck > .ticket { scroll-snap-align: center; }
}
@media (min-width: 1000px) { .deck { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.swipe-count { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--text-2); }
.batch { display: grid; gap: 10px; padding: 16px; border-radius: var(--r-card); background: var(--surface); border: 2px solid var(--text); box-shadow: var(--shadow-2); transition: opacity var(--dur-base), transform var(--dur-base); }
.batch-head { display: flex; align-items: center; gap: 8px; }
.batch-head h2 { font-size: var(--fs-18); font-weight: var(--fw-semibold); }
.batch-list { display: grid; gap: 6px; }
.batch-list li { display: flex; align-items: center; gap: 8px; font-size: var(--fs-13); }
.batch-list .avatar { width: 24px; height: 24px; font-size: 10px; }
.batch.tk-leaving { opacity: 0; transform: scale(.98); }
.decided-item { display: grid; gap: 8px; padding-block: 10px; border-top: 1px solid var(--rule); }
.decided-line { font-size: var(--fs-13); }

/* ---------- contacts ---------- */
.toolbar { display: flex; gap: 8px; flex-wrap: wrap; }
.toolbar .search-box { min-width: 200px; }
.contact-list { display: grid; background: var(--surface); border: var(--border); border-radius: var(--r-card); overflow: hidden; }
.contact-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "av main when" "av tags tags"; gap: 4px 12px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--rule); color: var(--text); text-decoration: none; }
.contact-row:hover { background: var(--ink-soft); }
.contact-row .avatar { grid-area: av; }
.ct-main { grid-area: main; display: grid; min-width: 0; }
.ct-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-main .muted { font-family: var(--font-mono); font-size: var(--fs-12); justify-self: start; }
.ct-tags { grid-area: tags; display: flex; flex-wrap: wrap; gap: 4px; }
.ct-when { grid-area: when; font-size: var(--fs-12); }
@media (min-width: 900px) {
  .contact-row { grid-template-columns: auto minmax(0, 1.2fr) minmax(0, 1fr) 90px; grid-template-areas: "av main tags when"; }
}
.profile-head { display: flex; gap: 14px; align-items: center; }
.profile-head .avatar { width: 56px; height: 56px; font-size: 18px; }
.profile-grid { display: grid; gap: 16px; }
.profile-main { display: grid; gap: 16px; align-content: start; }
@media (min-width: 1000px) { .profile-grid { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; } }

/* ---------- board ---------- */
.board { display: grid; gap: 12px; }
@media (min-width: 900px) { .board { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; } }
.bcol { background: var(--surface-2); border-radius: var(--r-card); padding: 10px; display: grid; gap: 8px; align-content: start; min-height: 140px; transition: background-color var(--dur-quick), box-shadow var(--dur-quick); }
.bcol.drop { background: var(--state-auto-soft); box-shadow: inset 0 0 0 2px var(--state-auto); }
.bcol-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 4px; }
.bcol-head h2 { font-size: var(--fs-15); font-weight: var(--fw-semibold); }
.bcol-lead .bcol-head h2::before, .bcol-customer .bcol-head h2::before, .bcol-new .bcol-head h2::before, .bcol-inactive .bcol-head h2::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-inline-end: 8px; background: var(--text-2); }
.bcol-lead .bcol-head h2::before { background: var(--state-approval); }
.bcol-customer .bcol-head h2::before { background: var(--state-auto); }
.bcol-body { display: grid; gap: 8px; }
.bcol-empty { padding: 12px 4px; }
.bcard { position: relative; background: var(--surface); border: var(--border); border-radius: 10px; padding: 10px; padding-inline-end: 44px; box-shadow: var(--shadow-1); display: grid; gap: 6px; }
.bcard[draggable="true"] { cursor: grab; }
.bcard.dragging { opacity: .5; }
.bcard-link { display: flex; gap: 10px; align-items: center; color: var(--text); text-decoration: none; min-width: 0; }
.bcard-link .avatar { width: 30px; height: 30px; font-size: 11px; }
.bcard-main { display: grid; min-width: 0; }
.bcard-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bcard-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.card-move { position: absolute; inset-inline-end: 2px; top: 4px; }

/* ---------- tasks ---------- */
.task-add { display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px dashed var(--line); border-radius: 12px; background: var(--surface); }
.task-add input { border: 0; background: transparent; padding-inline: 0; }
.task-add input:focus-visible { outline: none; }
.task-add:focus-within { border-color: var(--text); border-style: solid; }
.task-group { display: grid; gap: 6px; }
.task-group .section-title { margin-block: 8px 2px; }
.g-late .section-title { color: var(--brand-text); }
.task-list { background: var(--surface); border: var(--border); border-radius: var(--r-card); overflow: hidden; }
.task { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--rule); }
.task-check { position: relative; display: grid; place-items: center; width: var(--tap-min); height: var(--tap-min); margin: -10px; margin-inline-end: -6px; cursor: pointer; flex: none; }
.task-check input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.task-box { width: 22px; height: 22px; border-radius: 7px; border: 2px solid var(--text-2); display: grid; place-items: center; color: transparent; transition: background-color var(--dur-quick), border-color var(--dur-quick); }
.task-check input:checked + .task-box { background: var(--state-auto); border-color: var(--state-auto); color: var(--bg); }
.task-check input:focus-visible + .task-box { outline: 2px solid var(--text); outline-offset: 2px; }
.task-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.task-title { font-weight: var(--fw-medium); }
.is-done .task-title { text-decoration: line-through; color: var(--text-2); }
.task-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: var(--fs-12); color: var(--text-2); }
.task-meta > * { display: inline-flex; align-items: center; gap: 4px; }
.task-meta .late { color: var(--brand-text); font-weight: var(--fw-semibold); }
.by-toran { color: var(--staff); }
.task-who .avatar { width: 28px; height: 28px; font-size: 11px; }

/* ---------- staff chat ---------- */
.staff { display: grid; gap: 16px; }
.staff-side { display: none; }
.staff-main { display: flex; flex-direction: column; min-height: calc(100dvh - var(--top-h) - var(--bar-height) - var(--safe-b) - 32px); background: var(--staff-soft); border-radius: var(--r-card); border: 1px solid color-mix(in srgb, var(--staff) 22%, transparent); overflow: hidden; }
.staff-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid color-mix(in srgb, var(--staff) 20%, transparent); }
.staff-badge { display: flex; gap: 10px; align-items: flex-start; flex: 1 1 240px; }
.staff-badge .screen-title { font-size: var(--fs-18); color: var(--staff); }
.staff-log { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.staff-empty { margin: auto; text-align: center; display: grid; gap: 14px; justify-items: center; padding: 20px 0; }
.staff-empty .tr-editorial { font-size: var(--fs-28); color: var(--staff); }
.suggest { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.sugg { min-height: 40px; padding: 0 14px; border-radius: var(--r-pill); border: 1px solid color-mix(in srgb, var(--staff) 35%, transparent); background: var(--surface); color: var(--staff); font-size: var(--fs-13); }
.smsg { max-width: min(84%, 560px); padding: 10px 12px 8px; border-radius: 14px; display: grid; gap: 2px; }
.smsg time { justify-self: end; font-size: 11px; }
.smsg-me { align-self: flex-start; background: var(--surface); border: 1px solid var(--line); border-start-start-radius: 4px; }
.smsg-toran { align-self: flex-end; background: var(--staff); color: var(--bg); border-start-end-radius: 4px; }
.smsg-toran time, .smsg-toran .msg-by { color: color-mix(in srgb, var(--bg) 75%, transparent); }
.smsg p { white-space: pre-wrap; overflow-wrap: anywhere; }
.preview { margin-top: 8px; padding: 10px; border-radius: 10px; background: var(--surface); color: var(--text); display: grid; gap: 6px; }
.preview-title { display: flex; gap: 6px; align-items: center; font-weight: var(--fw-semibold); }
.preview-actions { display: flex; gap: 8px; }
.typing-sea { color: var(--staff); }
.staff-compose { padding: 12px 16px; border-top: 1px solid color-mix(in srgb, var(--staff) 20%, transparent); background: color-mix(in srgb, var(--staff-soft) 60%, var(--surface)); }
.staff-compose textarea { min-height: var(--tap-min); resize: none; }
@media (min-width: 1000px) {
  .staff { grid-template-columns: 240px minmax(0, 1fr); }
  .staff-side { display: block; }
  .staff-main { min-height: calc(100dvh - 76px); }
}

/* ---------- reports ---------- */
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 900px) { .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kpi { background: var(--surface); border: var(--border); border-radius: var(--r-card); padding: 14px; display: grid; gap: 4px; align-content: start; }
.kpi-label { font-size: var(--fs-12); color: var(--text-2); }
.kpi-val { font-family: var(--font-mono); font-size: var(--fs-28); line-height: 1.1; }
.kpi-sub { font-size: var(--fs-12); color: var(--text-2); }
.kpi-live .kpi-val { color: var(--state-auto); }
.kpi-hold .kpi-val { color: var(--state-approval); }
.legend { display: flex; gap: 14px; font-size: var(--fs-12); color: var(--text-2); margin-block-end: 8px; }
.lg::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-inline-end: 6px; vertical-align: -1px; }
.lg-toran::before { background: var(--text); }
.lg-human::before { background: var(--staff); }
.bars { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; height: 200px; align-items: end; }
.bar-col { display: grid; grid-template-rows: 1fr auto auto; height: 100%; justify-items: center; gap: 4px; min-width: 0; }
.bar { width: 100%; max-width: 36px; display: flex; flex-direction: column; align-self: end; border-radius: 6px 6px 2px 2px; overflow: hidden; }
.bar-human { background: var(--staff); }
.bar-toran { background: var(--text); }
.bar-n { font-family: var(--font-mono); font-size: var(--fs-12); }
.bar-day { font-size: var(--fs-12); color: var(--text-2); }
.report-grid { display: grid; gap: 14px; }
@media (min-width: 900px) { .report-grid { grid-template-columns: 1fr 1fr; } }
.topbars { display: grid; gap: 10px; }
.topbars li { display: grid; grid-template-columns: minmax(70px, 34%) minmax(0, 1fr) 36px; align-items: center; gap: 10px; font-size: var(--fs-13); }
.tb-track { height: 10px; background: var(--surface-2); border-radius: 5px; overflow: hidden; }
.tb-fill { display: block; height: 100%; background: var(--text); border-radius: 5px; }
.tb-live { background: var(--state-auto); }
.tb-n { font-family: var(--font-mono); text-align: end; }

/* ---------- settings ---------- */
.set-grid { display: grid; gap: 16px; }
.set-nav ul { display: grid; background: var(--surface); border: var(--border); border-radius: var(--r-card); overflow: hidden; }
.set-link { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 16px; color: var(--text); text-decoration: none; border-bottom: 1px solid var(--rule); }
.set-link span { flex: 1; }
.set-link:hover { background: var(--ink-soft); }
.set-link.on { background: var(--bg); font-weight: var(--fw-semibold); box-shadow: inset -3px 0 0 var(--brand); }
.set-chev { color: var(--text-2); }
.settings.has-sec .set-nav { display: none; }
.settings:not(.has-sec) .set-body { display: none; }
@media (min-width: 900px) {
  .set-grid { grid-template-columns: 230px minmax(0, 1fr); align-items: start; }
  .settings.has-sec .set-nav, .settings:not(.has-sec) .set-body { display: block; }
  .set-nav { position: sticky; top: 24px; }
  .set-link { min-height: 44px; border-bottom: 0; }
  .set-nav ul { padding: 6px; background: transparent; border: 0; }
  .set-link { border-radius: 9px; }
  .set-head { margin-block-end: 8px; }
}
.set-body { min-width: 0; max-width: 820px; }
.set-title { font-size: var(--fs-22); font-weight: var(--fw-bold); margin-block-end: 8px; }
.set-sub { font-size: var(--fs-15); font-weight: var(--fw-semibold); margin-block: 22px 10px; }
.save-bar { position: sticky; bottom: calc(var(--bar-height) + var(--safe-b) + 8px); display: flex; justify-content: flex-end; padding-top: 10px; }
@media (min-width: 900px) { .save-bar { bottom: 16px; } }
.perm-list { display: grid; gap: 10px; }
.perm { display: grid; gap: 12px; padding: 14px 16px; background: var(--surface); border: var(--border); border-radius: var(--r-card); border-inline-start: 4px solid var(--state-off); transition: border-color var(--dur-base); }
.perm.mode-auto { border-inline-start-color: var(--state-auto); }
.perm.mode-approve { border-inline-start-color: var(--state-approval); }
.perm-sentence { font-family: var(--font-editorial); font-size: var(--fs-22); line-height: 1.2; }
.perm-sentence strong { font-weight: var(--fw-bold); }
.perm-desc { font-size: var(--fs-13); color: var(--text-2); margin-top: 2px; }
.perm-rule, .perm-suggest { display: flex; gap: 6px; align-items: center; font-size: var(--fs-13); margin-top: 6px; }
.perm-rule { color: var(--state-approval); }
.perm-suggest { color: var(--staff); }
.perm-ctl { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.seg-perm .seg-opt { min-height: 40px; font-size: var(--fs-13); padding: 0 12px; }
.seg-perm .seg-auto[aria-checked="true"] { background: var(--state-auto); color: var(--bg); }
.seg-perm .seg-approve[aria-checked="true"] { background: var(--state-approval); color: var(--bg); }
.seg-perm .seg-off[aria-checked="true"] { background: var(--text-2); color: var(--bg); }
@media (min-width: 900px) { .perm { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } .perm-ctl { flex-direction: column; align-items: flex-end; } }
.tone-preview { display: grid; gap: 8px; margin-block: 10px 6px; }
.bubble-preview { justify-self: start; background: var(--text); color: var(--bg); padding: 9px 12px; border-radius: 14px; border-start-end-radius: 4px; max-width: 320px; }
.hours { display: grid; background: var(--surface); border: var(--border); border-radius: var(--r-card); overflow: hidden; margin-block: 12px 18px; }
.hour-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; padding: 8px 14px; border-bottom: 1px solid var(--rule); }
.hour-row .check { min-width: 92px; }
.hour-range { display: flex; align-items: center; gap: 8px; }
.hour-range input { width: 112px; }
.hour-closed { display: none; color: var(--text-2); font-size: var(--fs-13); }
.hour-row.closed .hour-range { display: none; }
.hour-row.closed .hour-closed { display: inline; }
.kb-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.kb-list { display: grid; gap: 10px; }
.kb-item { background: var(--surface); border: var(--border); border-radius: var(--r-card); padding: 12px 14px; display: grid; gap: 6px; }
.kb-top { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.kb-top strong { margin-inline-end: auto; }
.kb-item p { font-size: var(--fs-13); color: var(--text-2); }
.kb-foot { display: flex; justify-content: space-between; align-items: center; }
.gap-rows { display: grid; gap: 8px; }
.gap-rows li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.gap-rows li > span:first-child { flex: 1 1 160px; font-weight: var(--fw-medium); }
.gap-card { border-color: color-mix(in srgb, var(--state-approval) 30%, var(--line)); }
.conn-list { display: grid; gap: 10px; margin-top: 10px; }
.conn { background: var(--surface); border: var(--border); border-radius: var(--r-card); padding: 14px; display: grid; gap: 10px; }
.conn-head { display: flex; gap: 12px; align-items: center; }
.conn-head > div { flex: 1; min-width: 0; }
.conn-ico { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: var(--surface-2); flex: none; }
.conn-err { display: flex; gap: 6px; align-items: center; color: var(--danger); font-size: var(--fs-13); }
.conn-key { display: grid; gap: 8px; }
.conn-key input { font-family: var(--font-mono); font-size: var(--fs-13); }
.conn-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.team-list { display: grid; gap: 2px; background: var(--surface); border: var(--border); border-radius: var(--r-card); overflow: hidden; margin-block: 12px; }
.team-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--rule); }
.team-row > div { flex: 1; min-width: 0; }
.facts { display: grid; gap: 10px; background: var(--surface); border: var(--border); border-radius: var(--r-card); padding: 14px; margin-block: 8px 12px; }
.facts div { display: grid; gap: 2px; }
.facts dt { font-size: var(--fs-12); color: var(--text-2); }

/* ---------- notifications ---------- */
.notif-list { display: grid; background: var(--surface); border: var(--border); border-radius: var(--r-card); overflow: hidden; }
.notif { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 14px; border-bottom: 1px solid var(--rule); color: var(--text); text-decoration: none; position: relative; }
.notif:hover { background: var(--ink-soft); }
.notif.unread { background: color-mix(in srgb, var(--state-approval-soft) 45%, var(--surface)); }
.notif.unread::before { content: ""; position: absolute; inset-inline-start: 0; top: 14px; bottom: 14px; width: 3px; background: var(--state-approval); border-radius: 0 3px 3px 0; }
.notif-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-2); }
.notif-main p { font-size: var(--fs-13); color: var(--text-2); margin-top: 2px; }
.notif time { font-size: var(--fs-12); }

/* ---------- more (phone) ---------- */
.more-list { display: grid; background: var(--surface); border: var(--border); border-radius: var(--r-card); overflow: hidden; }
.more-item { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 56px; padding: 8px 16px; border: 0; border-bottom: 1px solid var(--rule); background: transparent; color: var(--text); text-decoration: none; text-align: start; }
.more-item > span { flex: 1; display: grid; }
.more-item small { color: var(--text-2); font-size: var(--fs-12); }
.more-chev { color: var(--text-2); }

/* ---------- WhatsApp simulator ---------- */
.sim { display: grid; gap: 12px; justify-items: center; }
.sheet-sim .sheet-body { padding: 0 12px 16px; }
.wa-phone { width: 100%; max-width: 400px; height: min(720px, calc(100dvh - 190px)); min-height: 440px; display: flex; flex-direction: column; border-radius: 28px; border: 8px solid var(--text); background: var(--surface-2); overflow: hidden; box-shadow: var(--shadow-3); }
.sheet-full .wa-phone { height: calc(100dvh - 150px - var(--safe-b)); border-width: 0; border-radius: 16px; box-shadow: none; border: 1px solid var(--line); }
.wa-top { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--text); color: var(--bg); }
.wa-avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: var(--on-brand); font-weight: var(--fw-bold); flex: none; }
.wa-top-text { display: grid; flex: 1; min-width: 0; line-height: 1.25; }
.wa-top-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-top-text small { color: color-mix(in srgb, var(--bg) 70%, transparent); font-size: var(--fs-12); }
.wa-badge { font-family: var(--font-mono); font-size: 11px; padding: 2px 8px; border-radius: var(--r-pill); border: 1px solid color-mix(in srgb, var(--bg) 40%, transparent); }
.wa-who { background: var(--surface); border-bottom: 1px solid var(--line); font-size: var(--fs-13); }
.wa-who summary { display: flex; align-items: center; gap: 6px; padding: 8px 12px; cursor: pointer; color: var(--text-2); min-height: 40px; }
.wa-who summary strong { color: var(--text); }
.wa-who-body { padding: 4px 12px 12px; }
.wa-who-body .field { margin-block-end: 8px; }
.wa-thread { flex: 1; overflow-y: auto; padding: 12px 10px; display: flex; flex-direction: column; gap: 6px; background-color: var(--surface-2); background-image: radial-gradient(color-mix(in srgb, var(--text) 7%, transparent) 1px, transparent 1px); background-size: 14px 14px; overscroll-behavior: contain; }
.wa-day { display: flex; justify-content: center; }
.wa-day span { font-size: 11px; background: var(--surface); padding: 2px 10px; border-radius: 8px; color: var(--text-2); }
.wa-hint { margin: auto; text-align: center; color: var(--text-2); font-size: var(--fs-13); max-width: 26ch; }
.wa-msg { max-width: 82%; padding: 7px 10px 5px; border-radius: 10px; display: grid; gap: 1px; font-size: var(--fs-15); box-shadow: 0 1px 1px rgba(0, 0, 0, .08); animation: fade var(--dur-base); }
.wa-msg p { white-space: pre-wrap; overflow-wrap: anywhere; }
.wa-out { align-self: flex-end; background: var(--state-auto-soft); border-start-end-radius: 2px; }
.wa-in { align-self: flex-start; background: var(--surface); border-start-start-radius: 2px; }
.wa-meta { justify-self: end; display: flex; gap: 4px; font-family: var(--font-mono); font-size: 10px; color: var(--text-2); }
.wa-ticks { color: var(--staff); letter-spacing: -2px; }
.wa-typing { padding: 10px 12px; color: var(--text-2); }
.wa-system { align-self: center; font-size: var(--fs-12); color: var(--text-2); background: var(--surface); padding: 3px 10px; border-radius: 8px; text-align: center; }
.wa-backstage { align-self: stretch; display: grid; gap: 4px; padding: 6px 4px 8px; border: 1px dashed color-mix(in srgb, var(--text) 25%, transparent); border-radius: 12px; margin-block: 4px; }
.wa-bs-label { font-family: var(--font-mono); font-size: 10px; color: var(--text-2); text-align: center; letter-spacing: .06em; }
.wa-backstage .receipt { max-width: 300px; margin-inline: auto; width: 100%; }
.wa-backstage .ticket { margin: 0 2px; }
.wa-backstage .ticket .tk-sentence { font-size: var(--fs-15); }
.wa-quick { display: flex; gap: 6px; overflow-x: auto; padding: 8px 10px 0; background: var(--surface-2); scrollbar-width: none; }
.wa-quick::-webkit-scrollbar { display: none; }
.wa-chip { flex: none; min-height: 32px; padding: 0 12px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); font-size: var(--fs-12); color: var(--text); }
.wa-compose { display: flex; gap: 8px; padding: 8px 10px 10px; background: var(--surface-2); }
.wa-compose input { border-radius: var(--r-pill); padding-inline: 16px; }
.wa-send { width: var(--tap-min); height: var(--tap-min); border-radius: 50%; border: 0; background: var(--text); color: var(--bg); display: grid; place-items: center; flex: none; }
.wa-send .ico { transform: scaleX(-1); }
.sim-note { display: flex; gap: 6px; align-items: flex-start; font-size: var(--fs-12); color: var(--text-2); max-width: 400px; }
.sim-note .ico { margin-top: 2px; }
.sim-page .sim { justify-items: start; }

/* ---------- keyboard help ---------- */
.kbd-list { display: grid; gap: 4px; }
.kbd-h { font-size: var(--fs-13); color: var(--text-2); margin-block: 12px 4px; font-weight: var(--fw-semibold); }
.kbd-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--rule); }
.kbd-row kbd + kbd { margin-inline-start: 4px; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0ms !important; animation-delay: 0ms !important; transition-duration: 0ms !important; scroll-behavior: auto !important; }
  .rv { animation: none; }
  .pulse::after, .empty-mark .mk-flag { animation: none; }
  .hr-fill { transition: none; }
}

/* ---------- grid min-width guards (phone overflow) ---------- */
.approvals, .contacts, .tasks, .notifs, .more, .reports, .board-screen, .profile, .sim-page, .home-head { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 899px) { .inbox, .home-grid, .set-grid, .profile-grid, .staff, .cv { grid-template-columns: minmax(0, 1fr); } }
.inbox > *, .approvals > *, .contacts > *, .tasks > *, .reports > *, .board-screen > *, .home-grid > *, .set-grid > *, .profile-grid > *, .staff > *, .cv > * { min-width: 0; }
.log-text { display: block; }
.log-text > .log-steps, .log-text > .log-status { display: block; margin-top: 2px; }

@media (max-width: 899px) { .sim-page .wa-phone { height: calc(100dvh - var(--top-h) - var(--bar-height) - var(--safe-b) - 150px); min-height: 380px; } .sim-page .screen-head .muted { display: none; } }
.now-text .btn-link { display: inline; }

/* Plex Mono has no Hebrew: Hebrew text never sits in mono (BRAND §5). Digits stay tabular. */
.receipt, .log-steps, .wa-bs-label, .swipe-count, .rc-stamp, .tk-stamp { font-family: var(--font-ui); font-variant-numeric: tabular-nums; }
.rc-stamp time, .tk-stamp time { font-family: var(--font-mono); }
.cr-when, .ct-when, .notif time, .task-meta time, .kb-foot time, .pl-row time { font-family: var(--font-ui); font-variant-numeric: tabular-nums; }
.wa-bs-label { letter-spacing: .02em; }
@media (min-width: 900px) { .sheet-side { justify-content: flex-end; } }
.note-suggest { background: var(--staff-soft); border-color: color-mix(in srgb, var(--staff) 35%, transparent); }
.note-suggest .note-tag { color: var(--staff); }
.conn-new { border-style: dashed; border-color: var(--text-2); }