/* Client protocol pages. Builds on app.css tokens; brand: docs/brand/brand-guide.md
   These pages use the logo's own setting: a white, light shell with navy text,
   violet as the lead colour and pink only for the one primary action and the
   "rising arrow" accent. app.css (shared with quotes and payouts) stays dark;
   every override lives here. Contrast figures are WCAG 2.x against #FFFFFF. */
:root {
  color-scheme: light;
  --brand-purple-deep: #3702AF;
  --bg: #F5F6FA;                /* page */
  --bg-2: #FAFBFD;              /* nested surface (a process inside a phase) */
  --panel: #FFFFFF;             /* cards, dialogs, top bar */
  --panel-2: #F0F2F7;           /* quiet fills: tags, guides, hovers */
  --line: #E2E6EF;
  --line-strong: #C3CAD9;
  --control-edge: #7D879F;      /* inputs and checkboxes: 3.60:1, 3.21:1 on panel-2 */
  --text: #031432;              /* brand navy 18.26:1 */
  --text-2: #37425F;            /* 9.97:1 */
  --muted: #5A6480;             /* 5.88:1; 5.25:1 on panel-2 */
  --accent: #5302DF;            /* brand violet 8.60:1: selection, links, focus, progress */
  --accent-deep: #3702AF;       /* 11.73:1: hover and small violet text */
  --accent-soft: #F1ECFE;       /* violet 7.44:1 on it */
  --accent-hover: #E8DFFD;
  --pink: #F82272;              /* primary action only; navy text 4.75:1 */
  --pink-hover: #FF3D85;        /* navy text 5.44:1 */
  --on-pink: #031432;
  --ok: #117A45;                /* 5.39:1; white tick on it 5.39:1 */
  --ok-soft: #E7F5EE;
  --warn: #8F5B00;              /* 5.73:1 */
  --warn-soft: #FFF5E0;
  --warn-line: #E2B868;
  --danger: #C0182F;            /* 6.15:1; kept red, never brand pink */
  --late: var(--danger);        /* overdue; always with an icon and text */
  --late-soft: #FEF3F4;         /* danger 5.63:1 on it */
  --on-fill: #FFFFFF;           /* ticks and "!" on filled status icons */
  --row-hover: #F8F6FE;
  --shadow-1: 0 1px 2px rgba(3, 20, 50, 0.05), 0 10px 28px -20px rgba(3, 20, 50, 0.22);
  --topbar-h: 76px;
  /* Person cues: always paired with the name in text, and never a status colour.
     Mid-tone hues, each at least 3:1 on white for the dot and the outline. */
  --p-irit: #C8327A;            /* 5.01 */
  --p-lior: #2358C8;            /* 6.36 */
  --p-ofir: #6B3FD6;            /* 6.35 */
  --p-ilai: #0E8A6E;            /* 4.30 */
  --p-editor: #5E6882;          /* 5.56 */
}
@media (max-width: 760px) { :root { --topbar-h: 62px; } }

/* ── Light brand shell ─────────────────────── */
body { background: var(--bg); color: var(--text); }
body::before {
  /* A faint wash of the logo's violet and pink behind the header, no grid. */
  height: 360px; mask-image: none;
  background:
    radial-gradient(720px 260px at 100% -80px, rgba(83, 2, 223, 0.07), transparent 70%),
    radial-gradient(560px 220px at 0% -100px, rgba(248, 34, 114, 0.05), transparent 70%);
}
a { color: var(--accent); }
a:hover { color: var(--accent-deep); }
:focus-visible { outline-color: var(--accent); }

/* Top bar: the full logo on white, as it is drawn. */
.topbar {
  background: rgba(255, 255, 255, 0.96); border-bottom: 1px solid var(--line);
  backdrop-filter: saturate(140%) blur(10px); gap: 20px;
}
/* The tagline's violet-to-pink run, once, as the bar's bottom edge. */
.topbar::after {
  content: ''; position: absolute; inset: auto 0 -1px 0; height: 2px; pointer-events: none;
  background: linear-gradient(to right, var(--brand-purple), var(--brand-pink));
}
.brand { gap: 14px; color: var(--text); }
/* logo.png is 403×280 with a 13–14px white margin; on white only its size matters. */
.brand-logo { display: block; block-size: 66px; inline-size: auto; flex: none; margin-inline-start: -3px; }
.brand-sep { inline-size: 1px; block-size: 28px; background: var(--line-strong); }
.brand-product { color: var(--text-2); font-weight: 500; font-size: 15px; }
.navlink { color: var(--text-2); }
.navlink:hover { color: var(--text); background: var(--panel-2); }
.navlink[aria-current='page'] { color: var(--accent-deep); background: var(--accent-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent); font-weight: 500; }
.session { color: var(--muted); border-inline-start-color: var(--line); }
@media (max-width: 760px) {
  .brand-logo { block-size: 54px; margin-inline-start: -2px; }
  .topbar { gap: 8px; }
  .session { border-inline-start: 0; padding-inline-start: 4px; margin-inline-start: 4px; }
  .topbar nav .btn-sm, .topbar .navlink { min-height: 44px; display: inline-flex; align-items: center; }
}

/* Headings and the eyebrow: spaced caps, like ONE STEP AHEAD. */
.page-head h1, .cc-top h1 { color: var(--text); }
.kicker.latin {
  font-family: var(--font); font-weight: 500; font-size: 11.5px; letter-spacing: .26em; color: var(--accent);
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
  /* Violet into a deep pink (#B0105E, 6.81:1): the logo's run, readable as small text. */
  .kicker.latin {
    background: linear-gradient(to right, var(--brand-purple), #B0105E); -webkit-background-clip: text; background-clip: text;
    color: transparent;
  }
}

/* Surfaces */
.block { background: var(--panel); border-color: var(--line); box-shadow: var(--shadow-1); }
.facts { background: var(--bg-2); border-color: var(--line); }

/* Buttons: white secondary, pink primary with navy text. */
.btn { background: var(--panel); border-color: var(--line-strong); color: var(--text); box-shadow: 0 1px 1px rgba(3, 20, 50, 0.04); }
.btn:hover { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 40%, var(--line-strong)); }
.btn-primary { background: var(--pink); border-color: var(--pink); color: var(--on-pink); box-shadow: 0 6px 16px -10px rgba(248, 34, 114, 0.7); }
.btn-primary:hover { background: var(--pink-hover); border-color: var(--pink-hover); }
.btn-ghost { background: transparent; box-shadow: none; }
.btn-ghost:hover { background: var(--panel-2); border-color: var(--line-strong); }
.btn-text { color: var(--accent); }
.btn-text:hover { color: var(--accent-deep); }

/* Fields */
.input { background: var(--panel); border-color: var(--control-edge); color: var(--text); }
.input::placeholder { color: #6B7591; } /* 4.59:1 */
.input:hover { border-color: var(--muted); }
.input:focus { background: var(--panel); border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }

/* Filter chips (quotes.css) */
.chip { color: var(--text-2); border-color: var(--line-strong); background: var(--panel); }
.chip:hover { border-color: var(--control-edge); color: var(--text); }
.chip[aria-pressed='true'] { background: var(--accent-soft); color: var(--accent-deep); border-color: var(--accent); font-weight: 500; }
.chip[aria-pressed='true'] .n { color: var(--accent-deep); }

/* Tables (quotes.css) */
.qtable thead th { background: var(--bg); color: var(--muted); }
.qtable tbody tr:hover { background: var(--row-hover); }

/* Dialogs and toast */
dialog { background: var(--panel); color: var(--text); border-color: var(--line); box-shadow: 0 32px 64px -24px rgba(3, 20, 50, 0.35); }
dialog::backdrop { background: rgba(3, 20, 50, 0.42); backdrop-filter: blur(3px); }
.dlg-head .close { border-color: var(--line-strong); color: var(--text); }
.dlg-head .close:hover { background: var(--panel-2); }
.toast { background: var(--brand-navy); color: #fff; box-shadow: 0 12px 32px -8px rgba(3, 20, 50, 0.45); }

/* Login: the full logo above the form. */
.login::before {
  content: ''; justify-self: center; inline-size: 190px; aspect-ratio: 403 / 280; margin-bottom: 6px;
  background: url('../assets/logo.png') center / contain no-repeat;
}
.login h2 { text-align: center; }
.login > p { text-align: center; }
#login-block { max-inline-size: 460px; inline-size: 100%; justify-self: center; margin-top: 24px; overflow: hidden; }
#login-block::after {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; pointer-events: none;
  background: linear-gradient(to right, var(--brand-purple), var(--brand-pink));
}

.pr-app { display: grid; gap: 16px; min-width: 0; }
.pr-app > * { min-width: 0; }
.muted { color: var(--muted); }
.back { color: var(--text-2); text-decoration: none; font-size: 14px; justify-self: start; padding: 6px 0; }
.back:hover { color: var(--text); }
.topbar nav .btn-sm { min-height: 34px; margin-inline-start: 8px; }

/* People */
.pchips { display: inline-flex; flex-wrap: wrap; gap: 4px; vertical-align: middle; }
.pchip {
  display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px 1px 9px; border-radius: 999px;
  font-size: 12.5px; font-weight: 500; line-height: 1.6; color: var(--text); white-space: nowrap;
  background: color-mix(in srgb, var(--pc, var(--muted)) 9%, var(--panel));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pc, var(--muted)) 42%, transparent);
}
.pchip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--pc, var(--muted)); }
.p-irit { --pc: var(--p-irit); } .p-lior { --pc: var(--p-lior); } .p-ofir { --pc: var(--p-ofir); }
.p-ilai { --pc: var(--p-ilai); } .p-editor { --pc: var(--p-editor); }
.pchip.is-me { font-size: 14px; padding: 3px 12px; font-weight: 600; background: color-mix(in srgb, var(--pc, var(--muted)) 15%, var(--panel)); box-shadow: inset 0 0 0 1.5px var(--pc, var(--muted)); }
.pchip.is-me::before { width: 8px; height: 8px; }

.me-bar, .viewbar, .chips-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; }
.me-label { font-size: 13.5px; color: var(--text-2); margin-inline-end: 4px; }
.viewbar { justify-content: space-between; gap: 10px 16px; }
.viewbar-acts { display: flex; gap: 14px; margin-inline-start: auto; }
.only { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-2); cursor: pointer; min-height: 36px; }
.only input { width: 18px; height: 18px; accent-color: var(--accent); }

/* Status badges: icon + text, colour is secondary */
.sbadge { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; white-space: nowrap; color: var(--text-2); }
.sicon { width: 14px; height: 14px; border-radius: 50%; flex: none; display: inline-grid; place-items: center; box-shadow: inset 0 0 0 1.5px currentColor; }
.s-overdue.sbadge { color: var(--late); }
.s-overdue .sicon::before { content: '!'; font-size: 10px; font-weight: 700; line-height: 1; }
.s-today.sbadge { color: var(--accent); }
.s-today .sicon::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.s-done.sbadge { color: var(--ok); }
.s-done .sicon { background: currentColor; box-shadow: none; }
.s-done .sicon::before { content: ''; width: 6px; height: 3px; border: solid var(--on-fill); border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg); }
.s-waiting.sbadge { color: var(--muted); }
.s-waiting .sicon { box-shadow: inset 0 0 0 1.5px currentColor; border: 0; background: repeating-linear-gradient(45deg, transparent 0 2px, currentColor 2px 3px); opacity: .7; }
.s-due.sbadge { color: var(--accent); }
.s-client.sbadge { color: var(--warn); }
.s-client .sicon::before { content: '⏳'; font-size: 8px; line-height: 1; }

/* Progress */
.pbar { display: inline-block; inline-size: 88px; block-size: 6px; border-radius: 999px; background: var(--line); overflow: hidden; vertical-align: middle; flex: none; }
.pbar-fill { display: block; block-size: 100%; background: var(--accent); border-radius: inherit; transition: inline-size .15s; }

/* Tabs */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.tab {
  min-height: 44px; padding: 8px 16px; border: 0; background: transparent; color: var(--text-2); cursor: pointer;
  font-size: 15px; font-weight: 500; border-bottom: 3px solid transparent; margin-bottom: -1px; white-space: nowrap;
}
.tab:hover { color: var(--text); border-bottom-color: var(--line-strong); }
.tab[aria-selected='true'] { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }

/* Checkboxes */
.cbx {
  appearance: none; -webkit-appearance: none; flex: none; margin: 0; cursor: pointer;
  width: 24px; height: 24px; border-radius: 7px; border: 2px solid var(--control-edge); background: var(--panel);
  display: grid; place-items: center; transition: background-color .12s, border-color .12s;
}
.cbx::before { content: ''; width: 11px; height: 6px; border: solid var(--on-fill); border-width: 0 0 2.5px 2.5px; transform: translateY(-1px) rotate(-45deg) scale(0); transition: transform .12s; }
.cbx:checked { background: var(--ok); border-color: var(--ok); }
.cbx:checked::before { transform: translateY(-1px) rotate(-45deg) scale(1); }
.cbx:hover:not(:disabled) { border-color: var(--accent); }
.cbx:disabled { cursor: default; opacity: .55; }
.is-na .cbx { opacity: 1; background: transparent; border-style: dashed; }
.is-na .cbx::before { transform: none; width: 10px; height: 0; border-width: 0 0 2px 0; border-color: var(--muted); }

/* Items (client card, tasks, my work) */
.items, .tlist, .wlist, .clist, .hlist, .stuck { list-style: none; margin: 0; padding: 0; }
.item { display: flex; align-items: flex-start; gap: 8px; border-top: 1px solid var(--line); min-height: 44px; }
.item:first-child { border-top: 0; }
.item .cbx { margin-top: 1px; }
/* The whole row checks the box. */
.irow { flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; cursor: pointer; }
.is-na .irow, .is-blocked .irow { cursor: default; }
.recurring { align-items: center; gap: 12px; padding: 10px 0; }
.ibody { flex: 1; min-width: 0; display: block; }
.ilabel { display: block; color: var(--text); line-height: 1.45; padding-block: 1px; }
.blocked { color: var(--text-2); }
.blocked::before { content: '⏸ '; }
.is-blocked .ilabel { color: var(--text-2); }
.is-na .ilabel { color: var(--muted); cursor: default; }
.is-busy { opacity: .75; }
.imeta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 3px; font-size: 12.5px; color: var(--muted); }
.imeta .by { font-variant-numeric: tabular-nums; }
.inote { display: block; white-space: pre-wrap; color: var(--text-2); font-size: 13px; }
.tag { display: inline-block; margin-inline-start: 8px; padding: 0 7px; border-radius: 6px; font-size: 12px; color: var(--text-2); background: var(--panel-2); vertical-align: 1px; }
.imeta .tag { margin: 0; }
.na-btn { flex: none; font-size: 13px; color: var(--muted); min-height: 44px; padding-inline: 8px; }
@media (hover: hover) and (pointer: fine) {
  .na-btn:not(.is-opt) { opacity: 0; }
  .item:hover .na-btn, .item:focus-within .na-btn, .is-na .na-btn { opacity: 1; }
}
.na-btn:hover { color: var(--text); }
.item.is-mine .ilabel { font-weight: 500; }
.late { color: var(--late); }
.recurring .rmark { width: 24px; height: 24px; flex: none; border-radius: 50%; border: 2px dashed var(--control-edge); }
.recurring .rmark.on { border: 0; background: var(--ok); }
.recurring .btn { flex: none; }

/* Client card */
.cc-head { padding: 20px 24px; display: grid; gap: 14px; }
.cc-top { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
.cc-top h1 { margin: 0; font-size: 30px; line-height: 1.2; }
.cc-top p { margin: 4px 0 0; }
.cc-progress { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; font-size: 14px; color: var(--text-2); }
.cc-progress .pbar { inline-size: 160px; }
.cc-facts { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px 20px; margin: 0; border-top: 1px solid var(--line); padding-top: 14px; }
.cc-facts .fact { min-width: 0; }
.cc-facts dt { font-size: 12.5px; color: var(--muted); }
.cc-facts dd { margin: 2px 0 0; font-size: 14.5px; overflow-wrap: anywhere; }
.cc-notes { margin: 0; white-space: pre-wrap; color: var(--text-2); font-size: 14px; }

.phases { display: grid; gap: 12px; }
.phase { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.phase.is-current { border-color: var(--line-strong); border-inline-start: 3px solid var(--accent); }
.phase > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 14px 18px; min-height: 56px; flex-wrap: wrap;
}
.phase > summary::-webkit-details-marker { display: none; }
.phase > summary::after { content: ''; width: 8px; height: 8px; border: solid var(--muted); border-width: 0 2px 2px 0; transform: rotate(45deg); margin-inline-start: 4px; transition: transform .15s; flex: none; }
.phase[open] > summary::after { transform: rotate(-135deg); }
.ph-idx { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; font-size: 13px; color: var(--accent); background: var(--accent-soft); flex: none; }
.ph-title { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 180px; }
.ph-title h2 { margin: 0; font-size: 17px; }
.ph-now { font-size: 12px; font-weight: 600; color: var(--accent); background: var(--accent-soft); padding: 1px 8px; border-radius: 999px; }
.ph-meta { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-2); }
.ph-note { margin: 0; padding: 0 18px 10px; color: var(--text-2); font-size: 14px; }
.procs { display: grid; gap: 10px; padding: 0 12px 12px; }

.proc { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 14px 16px; scroll-margin-top: calc(var(--topbar-h) + 16px); }
.proc.s-overdue { border-color: color-mix(in srgb, var(--late) 45%, var(--line)); background: linear-gradient(var(--late-soft), var(--late-soft)), var(--bg-2); }
.proc.s-done { background: transparent; padding-block: 8px; }
.proc.s-done .proc-title h3 { margin: 0; }
.proc.is-mine { border-inline-start: 3px solid var(--accent); }
/* Other people's processes recede by outline, not by opacity, so text keeps its contrast. */
.proc.is-dim { background: transparent; border-style: dashed; }
.proc.is-dim .proc-title h3, .proc.is-dim .pnum { color: var(--text-2); }
.proc:target { outline: 2px solid var(--accent); outline-offset: 2px; }
.proc-head { display: flex; align-items: flex-start; gap: 12px; }
.pnum { flex: none; min-width: 30px; height: 30px; padding-inline: 6px; border-radius: 8px; display: grid; place-items: center; font-size: 13px; font-weight: 600; color: var(--text-2); box-shadow: inset 0 0 0 1px var(--line-strong); }
.proc-title { flex: 1; min-width: 0; }
.proc-title h3 { margin: 2px 0 4px; font-size: 16px; }
.proc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 13px; color: var(--text-2); }
.proc-meta .sla { color: var(--muted); }
.proc-meta .due { color: var(--text-2); }
.proc-status { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none; font-size: 12.5px; }
.proc-what, .proc-note, .proc-guide, .proc-rule { margin: 10px 0 0; font-size: 14px; color: var(--text-2); }
.proc-note { font-size: 13px; color: var(--muted); }
.proc-guide { padding: 8px 12px; border-radius: var(--radius-sm); background: var(--panel-2); }
.proc-rule { padding: 8px 12px; border-radius: var(--radius-sm); background: var(--panel-2); border-inline-start: 3px solid var(--text-2); color: var(--text); }
.proc .items { margin-top: 8px; max-inline-size: 860px; }
.need { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--warn-soft); border: 1px solid var(--warn-line); font-size: 14px; }
.ph-need { margin: 0 12px 10px; }
.need .btn { margin-inline-start: auto; }
.show-done { margin-top: 8px; font-size: 13.5px; }

.cc-side { padding: 18px 20px; }
.side-head h2 { margin: 0; font-size: 18px; }
.side-head p { margin: 2px 0 12px; font-size: 13.5px; }
.task-form { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.task-form .grow { flex: 1 1 240px; }
.task-form .field:not(.grow) { flex: 0 1 170px; }
.task-form .btn { min-height: 46px; }
.hlist { display: grid; gap: 8px; font-size: 13.5px; color: var(--text-2); max-height: 420px; overflow: auto; }
.hlist .empty, .tlist .empty { padding: 12px 0; text-align: start; }

/* Forms in dialogs */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.form-grid .span-2 { grid-column: 1 / -1; }
.form-grid.inner { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fs { border: 1px solid var(--line); border-radius: var(--radius-md); padding: 10px 14px 14px; }
.fs legend { font-size: 13px; font-weight: 600; color: var(--accent); padding: 0 6px; }
.hint { font-size: 12.5px; color: var(--muted); margin-top: 6px; }
select.input { appearance: auto; }
#dlg-edit { max-width: min(720px, calc(100vw - 32px)); }
#dlg-edit .dlg-body { max-height: calc(100vh - 200px); overflow: auto; }
#dlg-new { max-width: min(640px, calc(100vw - 32px)); }
#dlg-new .dlg-body { max-height: calc(100vh - 200px); overflow: auto; }

/* List page */
.list-tools { justify-content: space-between; align-items: center; gap: 10px; }
.search { flex: 0 1 260px; }
.search .input { min-height: 38px; padding-block: 6px; }
.clist > li + li { border-top: 1px solid var(--line); }
.crow {
  display: grid; grid-template-columns: minmax(160px, 1.3fr) minmax(120px, 1fr) minmax(130px, .9fr) minmax(180px, 1.6fr) minmax(120px, 1fr);
  gap: 12px 18px; align-items: center; padding: 14px 18px; color: var(--text); text-decoration: none; min-height: 64px;
}
.crow:hover { background: var(--row-hover); }
.crow .k { display: block; font-size: 11.5px; color: var(--muted); }
.cname strong { display: block; font-weight: 600; }
.cname small { color: var(--muted); font-size: 12.5px; }
.cprog { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
.cprog .k { flex-basis: 100%; }
.cnext { font-size: 14px; }
.cflags { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; font-size: 13px; }

.mine-list { padding: 4px 18px 16px; }
.wgroup + .wgroup { margin-top: 8px; }
.wgroup-h { display: flex; align-items: center; gap: 8px; margin: 14px 0 4px; font-size: 15px; font-weight: 600; color: var(--text-2); }
.wgroup-h .n, .chip .n { font-family: var(--mono); font-size: 12.5px; color: var(--muted); }
.g-overdue .wgroup-h { color: var(--late); }
.witem { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.witem.is-done { opacity: .55; }
.witem.is-done .wlabel { text-decoration: line-through; text-decoration-color: var(--muted); }
.wbody { flex: 1; min-width: 0; }
.wlabel { display: block; cursor: pointer; line-height: 1.45; }
.wmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 3px; font-size: 13px; color: var(--muted); }
.wclient { color: var(--accent); font-weight: 500; text-decoration: none; }
.wclient:hover { text-decoration: underline; }

.control { padding: 12px 18px 18px; }
.control-intro { display: flex; flex-direction: column; gap: 2px; margin: 0 0 4px; font-size: 13.5px; color: var(--muted); }
.ctable td.late { color: var(--late); font-weight: 600; }
.stuck > li { padding: 10px 0; border-top: 1px solid var(--line); }
.stuck ul { list-style: none; margin: 6px 0 0; padding: 0 16px 0 0; display: grid; gap: 4px; font-size: 14px; }
.stuck a { color: var(--text); }

@media (max-width: 900px) {
  .crow { grid-template-columns: 1fr 1fr; }
  .crow .cname, .crow .cnext { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .cc-head { padding: 16px; }
  .cc-top h1 { font-size: 24px; }
  .phase > summary { padding: 12px 14px; }
  .ph-meta .pbar { inline-size: 56px; }
  .procs { padding: 0 8px 8px; }
  .proc { padding: 12px; }
  .proc-head { flex-wrap: wrap; }
  .proc-status { flex-direction: row; align-items: center; gap: 8px; order: 3; flex-basis: 100%; padding-inline-start: 42px; }
  .form-grid, .form-grid.inner { grid-template-columns: 1fr; }
  .mine-list, .control { padding-inline: 12px; }
  .viewbar-acts { margin-inline-start: 0; }
  .topbar nav .navlink:not([aria-current]) { display: none; }
  .search { flex-basis: 100%; }
  .cc-side { padding: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .cbx, .cbx::before, .pbar-fill, .phase > summary::after { transition: none; }
}

@media print {
  :root { color-scheme: light; --text: #031432; --text-2: #26324F; --muted: #56617E; --line: #D5DAE6; --bg: #fff; --bg-2: #fff; --panel: #fff; --control-edge: #56617E; }
  body { background: #fff; color: #031432; }
  body::before, .topbar, .back, .viewbar, .head-actions, .task-form, .na-btn, .need .btn, .show-done, .toast, #history { display: none !important; }
  .block, .phase, .proc { background: #fff !important; box-shadow: none !important; border-color: #D5DAE6 !important; break-inside: avoid-page; }
  .phase:not([open]) > *:not(summary) { display: block; }
  .phase > summary::after { display: none; }
  .proc.is-dim { opacity: 1; }
  .cbx:checked { background: #1a7f4b; border-color: #1a7f4b; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
/* app.css prints only #print-root (the quote); the protocol pages print their main area. */
@media print { body > main#main { display: grid !important; } }

/* Mono for numbers, dates and codes */
/* Mono only for pure numbers: Hebrew words in dates keep Rubik. */
.pr-app .num[dir='ltr'], .pnum, .ph-idx, .ctable td.num, .chip .n { font-family: var(--mono); font-size: .92em; letter-spacing: -.01em; }
.small { font-size: 12.5px; font-weight: 400; }

/* Completed processes in a phase fold into one row */
.done-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; inline-size: 100%; min-height: 48px; padding: 8px 14px;
  border: 1px dashed var(--line-strong); border-radius: var(--radius-md); background: transparent; color: var(--text-2);
  font-size: 14px; cursor: pointer; text-align: start;
}
.done-row:hover { background: var(--panel-2); color: var(--text); }
.done-row .btn-text { margin-inline-start: auto; }

/* Next step in the header */
.cc-next {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; min-height: 48px;
  border-radius: var(--radius-md); background: var(--accent-soft); color: var(--text); text-decoration: none; font-weight: 500;
}
.cc-next .k { font-size: 12.5px; color: var(--muted); font-weight: 400; }
.cc-next.s-overdue { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--late) 50%, transparent); }
.cc-next:hover { background: var(--accent-hover); color: var(--text); }

/* Sticky progress on phones */
.cc-sticky { display: none; }
@media (max-width: 760px) {
  .cc-sticky {
    display: flex; align-items: center; gap: 10px; position: sticky; top: var(--topbar-h); z-index: 20;
    margin-inline: -12px; padding: 8px 16px; background: rgba(255, 255, 255, 0.96); border-bottom: 1px solid var(--line); font-size: 13.5px;
  }
  .cc-sticky .sticky-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cc-sticky .pbar { inline-size: 72px; }
  .proc { scroll-margin-top: calc(var(--topbar-h) + 56px); }
}

/* Shared processes */
.claim { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); }
.claim .btn-sm { min-height: 36px; }

/* Person picker: chips on wide screens, a select on phones */
.narrow-only { display: none !important; }
.person-select { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-2); inline-size: 100%; }
.person-select .input { min-height: 44px; flex: 1; }
@media (max-width: 760px) {
  .wide-only { display: none !important; }
  .narrow-only { display: flex !important; }
}

/* My work: grouped by client and process */
.wprocs { list-style: none; margin: 0; padding: 0; }
.wproc { border-top: 1px solid var(--line); padding: 12px 0 4px; }
.wproc-h { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; font-size: 13.5px; color: var(--text-2); }
.wproc-h .wclient { font-size: 15px; min-height: 32px; display: inline-flex; align-items: center; }
.wproc-h .sbadge { margin-inline-start: auto; }
.wproc .witem { border-top: 0; padding: 0; }
.wrow { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; min-height: 44px; cursor: pointer; }
.g-overdue .wgroup-h { color: var(--late); }

/* Toast stays in the page as a live region; shown only while it has a message */
.pr-toast { display: flex; align-items: center; gap: 12px; bottom: calc(16px + env(safe-area-inset-bottom)); transition: opacity .15s; }
.pr-toast:not(.on) { opacity: 0; pointer-events: none; }
.toast-act { border: 0; background: transparent; color: #A980EF; font: inherit; font-weight: 600; cursor: pointer; min-height: 32px; padding-inline: 4px; text-decoration: underline; }
.pr-app { padding-bottom: 56px; }

@media print {
  :root {
    --late: #B42318; --ok: #1A7F4B; --accent: #5302DF; --accent-soft: #F1EBFD; --panel-2: #EEF1F7; --line-strong: #9AA5C0;
  }
  .facts, .cc-facts { background: #fff !important; }
  .ph-idx { color: #5302DF; }
  .cc-sticky, .cc-next, .done-row, .claim .btn, .ph-need .btn, .pr-toast { display: none !important; }
  .phase::details-content { content-visibility: visible; }
}

/* ── Batch 2: client card ─────────────────── */
.warn { color: var(--warn); }
.auto-note {
  display: grid; gap: 10px; padding: 12px 14px; border-radius: var(--radius-md);
  background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
}
.auto-note p { margin: 0; font-size: 14px; }
.auto-acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.cc-links { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; border-top: 1px solid var(--line); padding-top: 12px; }
.cc-links ul { list-style: none; margin: 0; padding: 0; }
.link-chip { text-decoration: none; color: var(--text); display: inline-flex; align-items: center; min-height: 36px; }
.link-chip::after { content: '↗'; margin-inline-start: 6px; color: var(--muted); font-size: 12px; }
.chip-missing { border-style: dashed; color: var(--text-2); }

.deliv { border-top: 1px solid var(--line); padding-top: 12px; display: grid; gap: 6px; }
.deliv-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.deliv-head h2 { margin: 0; font-size: 15px; }
.deliv p { margin: 0; }
.deliv-row { display: grid; grid-template-columns: minmax(110px, 160px) minmax(150px, 220px) 120px auto; justify-content: start; align-items: center; gap: 4px 12px; min-height: 44px; font-size: 14px; }
.deliv-row .pbar { inline-size: 100%; }
.deliv-row .hint:empty { display: none; }
.deliv-k { color: var(--text-2); }
.deliv-btns { display: inline-flex; gap: 6px; }
.step {
  inline-size: 44px; block-size: 44px; border-radius: var(--radius-sm); border: 1px solid var(--line-strong);
  background: var(--panel); color: var(--text); font-size: 20px; line-height: 1; cursor: pointer;
}
.step:hover:not(:disabled) { background: var(--accent-soft); }
.step:disabled { opacity: .45; cursor: default; }
.deliv-row > .btn { justify-self: start; }

details.cal { display: inline-block; margin-inline-start: 8px; }
details.cal > summary { list-style: none; cursor: pointer; color: var(--accent); font-size: 13px; display: inline-flex; min-height: 32px; align-items: center; }
details.cal > summary::-webkit-details-marker { display: none; }
details.cal[open] > summary { text-decoration: underline; }
.cal-menu { display: grid; gap: 6px; padding: 8px 0; min-inline-size: 180px; }
.cal-menu .btn { justify-content: flex-start; min-height: 44px; }

.wait-line {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin-top: 10px; padding: 8px 12px; border-radius: var(--radius-sm);
  background: var(--warn-soft); border-inline-start: 3px solid var(--warn); font-size: 13.5px; color: var(--text-2);
}
.wait-btn { font-size: 12.5px; min-height: 32px; }
.proc.s-client { border-color: var(--warn-line); }
.bulk-btn { margin-top: 8px; min-height: 44px; font-weight: 500; }
.plink { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 14px; min-height: 32px; }
.plink::after { content: '↗'; font-size: 12px; }

.phase.is-round { border-style: solid; }
.round-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; padding: 0 18px 10px; color: var(--text-2); font-size: 14px; }
.round-add { display: flex; justify-content: flex-start; }

dialog.dlg-wide { max-width: min(760px, calc(100vw - 32px)); }
dialog.dlg-wide .dlg-body { max-height: calc(100vh - 200px); overflow: auto; display: grid; gap: 14px; }
.call-topics { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.call-topics textarea { min-height: 44px; resize: vertical; }
.call-tasks { display: grid; gap: 10px; margin-bottom: 10px; }
.call-task { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; padding-bottom: 10px; border-bottom: 1px dashed var(--line); }
.call-task .grow { flex: 1 1 220px; }
.call-task .field:not(.grow) { flex: 0 1 150px; }
.call-sum { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 8px 0; font-size: 13.5px; }
.call-sum dt { color: var(--muted); }
.call-sum dd { margin: 0; white-space: pre-wrap; }
.call-show > summary, .call-prev > summary { cursor: pointer; color: var(--accent); font-size: 13px; min-height: 32px; display: flex; align-items: center; }
.call-list { list-style: none; margin: 4px 0; padding: 0; display: grid; gap: 4px; font-size: 13.5px; }
.recurring .ibody details { margin-top: 4px; }

@media (max-width: 760px) {
  .deliv-row { grid-template-columns: minmax(0, 1fr) auto; }
  .deliv-k, .deliv-v { grid-column: 1; }
  .deliv-btns { grid-column: 2; grid-row: 1 / span 2; }
  .deliv-row .pbar { grid-column: 1 / -1; }
  .deliv-row > .btn { grid-column: 1 / -1; white-space: nowrap; justify-self: stretch; }
  .call-topics { grid-template-columns: 1fr; }
  dialog.dlg-wide { max-width: 100vw; width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; }
  dialog.dlg-wide[open] { display: flex; flex-direction: column; }
  dialog.dlg-wide form { display: flex; flex-direction: column; height: 100%; }
  dialog.dlg-wide .dlg-body { flex: 1; max-height: none; }
  .auto-acts .btn { flex: 1 1 100%; }
}
@media print {
  .deliv-btns, details.cal, .wait-btn, .bulk-btn, .round-add, .auto-acts { display: none !important; }
}
/* Mobile table labels are words, not numbers. */
.ctable td.num::before { font-family: var(--font); letter-spacing: 0; }

/* ── Final design pass ─────────────────────── */
.btn-text.danger { color: var(--danger); }
.btn-danger { background: transparent; color: var(--danger); border-color: color-mix(in srgb, var(--danger) 55%, transparent); }
.btn-danger:hover { background: var(--late-soft); border-color: var(--danger); }
.tag.tag-warn { color: var(--warn); background: var(--warn-soft); border: 1px solid var(--warn-line); }
.link-chip, .chip-missing, .step, .bulk-btn { border-color: var(--control-edge); }
.pr-app bdi.num { white-space: nowrap; }
.s-client .sicon::before { content: ''; width: 6px; height: 2px; background: currentColor; box-shadow: 0 -3px 0 currentColor, 0 3px 0 currentColor; }
dialog.dlg-wide .dlg-foot { border-top: 1px solid var(--line); padding-top: 14px; }
@media (max-width: 760px) {
  /* app.css hides .facts on phones; the client card needs them (phone, dates, calendar). */
  .cc-facts { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
  .cc-facts .fact:has(details[open]) { grid-column: 1 / -1; }
  .wait-btn, .plink, details.cal > summary, .wproc-h .wclient, .link-chip, .pr-app .chip, .pr-app .btn-text,
  .claim .btn-sm, label.only, .auto-acts .btn-sm, .round-add .btn-sm, .deliv-row .btn-sm, .head-actions .btn-sm,
  .rv-topics summary, .rv-narrow summary, .perf-proc summary, .call-show > summary, .call-prev > summary { min-height: 44px; }
  .pr-app .btn-text { min-width: 44px; }
  dialog .close { width: 44px; height: 44px; }
  .back, .cc-facts dd a, .hlist a, .stuck a, .rv-row a, .wproc-h a, .copy-btn, .wait-line .btn-text, .claim .btn-text {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  .auto-acts .btn-text, .cal-menu .btn { inline-size: 100%; justify-content: center; }
  dialog.dlg-wide { height: 100dvh; max-height: 100dvh; border: 0; }
  dialog.dlg-wide .dlg-foot { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
}
@media print {
  :root { --warn: #8A5A00; }
  .wait-line .btn-text, .cc-links .btn-text, .deliv-row > .btn, .round-head .btn-text, .round-head details.cal, .wait-btn, .cc-facts details.cal { display: none !important; }
}

/* ── Protocol v2: employee protocols ───────── */
:root { --p-nirel: #D2541B; --p-nadia: #5E8A12; --p-yariv: #A87400; --p-anna: #0A84B5; --p-eli: #8C5A32; } /* 4.18, 4.10, 4.07, 4.22, 5.80 on white */
.p-nirel { --pc: var(--p-nirel); } .p-nadia { --pc: var(--p-nadia); } .p-yariv { --pc: var(--p-yariv); } .p-anna { --pc: var(--p-anna); }
.p-eli { --pc: var(--p-eli); } /* Eli, the photographer */

/* Access vault */
.access-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.access-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.access-list .empty { padding: 12px 0; color: var(--muted); font-size: 13.5px; }
.access-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel-2);
}
.access-row.a-broken, .access-row.a-missing { border-inline-start: 3px solid var(--warn); }
.access-main { flex: 1 1 200px; min-width: 0; }
.access-main .imeta { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; margin-top: 4px; font-size: 13px; color: var(--text-2); }
.access-main .num[dir="ltr"] { overflow-wrap: anywhere; }
.access-acts { display: flex; align-items: center; gap: 4px 12px; flex-wrap: wrap; }
.secret { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.secret:not(:empty) { margin-top: 8px; padding: 6px 10px; border-radius: var(--radius-sm); background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
.secret .num { font-size: 15px; letter-spacing: .02em; overflow-wrap: anywhere; user-select: all; }
.secret .hint { margin: 0; flex-basis: 100%; }
.access-log { margin-top: 12px; }
.access-log > summary { cursor: pointer; color: var(--accent); font-size: 13px; min-height: 32px; display: flex; align-items: center; }
.access-log .hlist { margin-top: 6px; max-height: 260px; }

/* Ofir's weekly summary */
.status-note { padding: 12px 14px; border-radius: var(--radius-sm); background: var(--panel-2); border-inline-start: 3px solid var(--p-ofir); }
.status-note .call-sum { margin-bottom: 0; }

/* Tasks: urgent and briefs */
.tag.tag-urgent { color: var(--late); background: var(--late-soft); border: 1px solid color-mix(in srgb, var(--late) 55%, transparent); font-weight: 600; }
.task-form .span-all { flex: 1 1 100%; }
.task-brief > summary { cursor: pointer; color: var(--accent); font-size: 13.5px; min-height: 36px; display: flex; align-items: center; }
.task-brief[open] > summary { margin-bottom: 4px; }
.brief-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-top: 8px; }
.brief-grid textarea { min-height: 44px; resize: vertical; }
.task-brief-show { margin-top: 4px; }

/* Editing paused for another task */
.pause-line { background: color-mix(in srgb, var(--p-lior) 7%, var(--panel)); border-inline-start-color: var(--p-lior); }

@media (max-width: 760px) {
  .brief-grid { grid-template-columns: 1fr; }
  .access-acts { inline-size: 100%; }
  .access-acts .btn-sm, .access-log > summary, .task-brief > summary { min-height: 44px; }
}
@media print {
  /* Never print client passwords or the vault. */
  #access, .secret, .task-brief { display: none !important; }
}

/* ── Handoffs: a ready WhatsApp message to the next person (app/handoff-ui.js) ── */
/* The prompt sits above the toast (bottom 16px) and stays until it is closed. When
   the toast wraps to more lines, the prompt rises above it (--toast-room: the
   toast's height, set by handoff-ui.js). */
.handoff {
  position: fixed; z-index: 55; inset-inline: 16px; bottom: calc(max(72px, var(--toast-room, 0px) + 28px) + env(safe-area-inset-bottom));
  margin-inline: auto; max-inline-size: 520px; display: grid; gap: 10px; padding: 10px 14px 14px;
  background: var(--panel); color: var(--text); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
  border-radius: var(--radius-md); box-shadow: 0 16px 40px -12px rgba(3, 20, 50, 0.35);
}
.handoff[hidden] { display: none; }
.handoff-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.handoff-h { margin: 0; min-width: 0; font-size: 13px; font-weight: 600; color: var(--accent-deep); overflow-wrap: anywhere; }
.handoff-close {
  flex: none; inline-size: 44px; block-size: 44px; margin-inline-end: -8px; border: 0; border-radius: 10px;
  background: transparent; color: var(--text-2); font-size: 24px; line-height: 1; cursor: pointer;
}
.handoff-close:hover { background: var(--panel-2); color: var(--text); }
.handoff-row { display: grid; gap: 6px; min-width: 0; }
.handoff-row + .handoff-row { border-top: 1px solid var(--line); padding-top: 10px; }
.handoff-what { margin: 0; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.handoff-due { display: block; color: var(--text-2); font-size: 13px; }
.handoff-wa { min-height: 44px; justify-self: start; max-inline-size: 100%; white-space: normal; }
.handoff-nophone { margin: 0; }
.has-handoff .pr-app { padding-bottom: 260px; }
/* Phones: a tighter prompt, so it covers less of the list (the due time follows the name). */
@media (max-width: 420px) {
  .handoff { padding: 6px 12px 10px; gap: 6px; }
  .handoff-row + .handoff-row { padding-top: 6px; }
  .handoff-due { display: inline; }
  .handoff-due::before { content: ' · '; }
}

/* The "העברות" line of a process in the client card. */
.handoff-line {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin-top: 8px; padding-top: 6px;
  border-top: 1px dashed var(--line-strong); font-size: 13.5px; color: var(--text-2);
}
.proc.s-done .handoff-line { margin-top: 4px; }
.handoff-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; flex: 1 1 240px; min-width: 0; }
.handoff-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; min-width: 0; }
.handoff-list .hint { margin: 0; }
.handoff-send { min-height: 44px; }
@media print { .handoff, .handoff-send { display: none !important; } }

/* ── Short lists and the phone's page head (the review of 4.10.2026) ───────── */
/* "הצג עוד": the rest of a long list, one tap away (capList in app/protocol-ui.js). */
.more-row { list-style: none; padding: 10px 0 4px; border-top: 1px solid var(--line); }
.more-btn { min-height: 44px; inline-size: 100%; justify-content: center; color: var(--accent-deep); }

/* The short card of "המשימות שלי": client, deadline in words, the action, one button. */
.wproc.wc { padding: 10px 0 10px; }
.wc-head { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 10px; }
.wc-head .wclient { font-size: 15.5px; font-weight: 600; min-height: 32px; display: inline-flex; align-items: center; }
.wc-when { margin-inline-start: auto; font-size: 13px; font-weight: 500; color: var(--text-2); white-space: nowrap; }
.wc-when.s-overdue { color: var(--late); font-weight: 600; }
.wc-when.s-today { color: var(--accent-deep); }
.wc-when.s-client { color: var(--warn); }
.wc-what { display: flex; align-items: center; gap: 8px; }
.wc-title { flex: 1; min-width: 0; margin: 0; font-size: 14.5px; line-height: 1.4; color: var(--text); overflow-wrap: anywhere; }
.wc-sub { color: var(--text-2); font-size: 13.5px; }
.wc-more { flex: none; min-height: 44px; min-width: 44px; font-size: 13.5px; }
.wc-more::after, .wc-open::after {
  content: ''; display: inline-block; width: 6px; height: 6px; border: solid currentColor; border-width: 0 2px 2px 0;
  transform: translateY(-2px) rotate(45deg); margin-inline-start: 8px;
}
.wc-more[aria-expanded='true']::after, .wc-open[aria-expanded='true']::after { transform: translateY(1px) rotate(-135deg); }
.wc .wc-go { display: flex; inline-size: 100%; min-height: 44px; margin-top: 4px; align-items: center; justify-content: center; }
.wc .ik-go.wc-go { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 35%, transparent); color: var(--accent-deep); font-weight: 600; }
.wc > .wlist .wrow { padding: 6px 0; align-items: center; }
.wc > .task-start { margin: 4px 0 0; }
.wc-panel { margin-top: 6px; padding: 8px 12px 4px; border-radius: var(--radius-sm); background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
.wc-panel .wc-due { margin: 0; font-size: 13px; color: var(--text-2); }
.wc-panel .wproc-acts { padding-top: 2px; }
.wc.is-urgent .wc-head { padding-inline-start: 0; }
/* Folded groups ("השבוע", "בהמשך") read like the waiting group. */
details.wgroup > summary { list-style: none; cursor: pointer; min-height: 44px; }
details.wgroup > summary::-webkit-details-marker { display: none; }
details.mc-fold > summary { margin: 4px 0; }
details.g-week > summary::after, details.g-later > summary::after, details.mc-fold > summary::after {
  content: ''; width: 7px; height: 7px; border: solid var(--muted); border-width: 0 2px 2px 0;
  transform: rotate(45deg); margin-inline-start: 4px;
}
details.g-week[open] > summary::after, details.g-later[open] > summary::after, details.mc-fold[open] > summary::after { transform: rotate(-135deg); }
details.mc-fold > summary { list-style: none; cursor: pointer; min-height: 44px; }
details.mc-fold > summary::-webkit-details-marker { display: none; }
/* Under the list: the tools of a short list, and the list's length. */
.mine-foot { display: grid; gap: 8px; padding: 4px 18px 16px; }
.mine-foot:empty { display: none; }
.mine-more > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--accent); font-size: 14px; }
.mine-more[open] { display: grid; gap: 6px; }
.view-toggle { display: flex; gap: 8px; justify-content: center; padding-top: 8px; border-top: 1px solid var(--line); }
.view-toggle .chip { min-height: 44px; }

/* The links to other screens in the page head: a row on a wide screen, one button on a phone. */
.screens, .screens-list { display: contents; }
.screens-toggle { display: none; }
/* A manager has the switch at the top ("המשימות שלי" / "מבט מנהל"): the head does not repeat it. */
body:has(#mode-bar) .head-actions a[href='clients.html#mine'],
body:has(#mode-bar) .head-actions a[href='owner.html'] { display: none; }
@media (max-width: 760px) {
  /* The page's name is its heading: no English eyebrow, no second name in the top bar. */
  .kicker.latin { display: none; }
  .topbar nav .navlink[aria-current] { display: none; }
  .topbar nav .btn-sm { min-height: 44px; }
  .head-sub { display: none; }
  .page-head .head-actions { gap: 8px; align-items: center; }
  .page-head .head-actions .btn:not(.screens-toggle) { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .screens-toggle { min-height: 44px; align-items: center; justify-content: center; }
  .screens.is-fold .screens-toggle { display: inline-flex; }
  .screens.is-fold .screens-toggle::after {
    content: ''; display: inline-block; width: 6px; height: 6px; border: solid currentColor; border-width: 0 2px 2px 0;
    transform: translateY(-2px) rotate(45deg); margin-inline-start: 8px;
  }
  .screens.is-fold.is-open .screens-toggle::after { transform: translateY(1px) rotate(-135deg); }
  .screens.is-fold .screens-list { display: none; }
  .screens.is-fold.is-open .screens-list {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px; flex: 1 1 100%; order: 10;
    padding: 10px; border-radius: var(--radius-sm); background: var(--panel-2);
  }
  .screens.is-fold.is-open .screens-list > a { text-align: center; }
  .mine-foot { padding-inline: 12px; }
  .wc-head .wclient { min-height: 44px; }
}
@media print { .more-row, .screens-toggle, .mine-foot, .wc-more, .wc-open { display: none !important; } .wc-panel[hidden] { display: block !important; } }