/* Layout: fixed left rail for staff tools, editorial charcoal header for the public booking pages. Stone and charcoal from the brand, oxblood used only for "now" and primary emphasis. */
:root {
  --bg: #e6e3da; --surface: #f3f1eb; --surface-2: #ebe8e0; --sunk: #dcd9ce; --line: #cfcabc; --line-2: #bdb7a7;
  --ink: #20201e; --ink-2: #3b3a35; --muted: #6a665c; --accent: #4a0000; --accent-2: #6e1a12; --accent-soft: #e9d9d4; --on-accent: #f3f1eb;
  --ok: #3d5a36; --ok-soft: #dfe6d6; --warn: #845510; --warn-soft: #f1e3c4; --bad: #8e1b12; --bad-soft: #f2d8d2;
  --btn: #20201e; --on-btn: #f3f1eb; --charcoal: #20201e; --stone: #dcd9ce; --hatch: rgba(32,32,30,.07); --shadow: 0 1px 2px rgba(32,32,30,.06), 0 8px 24px rgba(32,32,30,.08);
  --display: "Jost", "Futura", "Avenir Next", ui-sans-serif, system-ui, sans-serif; --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --r: 6px; --r-lg: 10px; --side: 236px; --bar: 48px;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #161614; --surface: #20201e; --surface-2: #2a2a27; --sunk: #1b1b19; --line: #36352f; --line-2: #4a4840;
  --ink: #dcd9ce; --ink-2: #c2beb1; --muted: #9a968a; --accent: #c98a80; --accent-2: #e0a59b; --accent-soft: #3a2421; --on-accent: #20201e;
  --ok: #9cc191; --ok-soft: #26321f; --warn: #ddb26a; --warn-soft: #3a2f1a; --bad: #e7887a; --bad-soft: #3d201c;
  --btn: #dcd9ce; --on-btn: #20201e; --hatch: rgba(220,217,206,.06); --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35); color-scheme: dark; } }
:root[data-theme="dark"] {
  --bg: #161614; --surface: #20201e; --surface-2: #2a2a27; --sunk: #1b1b19; --line: #36352f; --line-2: #4a4840;
  --ink: #dcd9ce; --ink-2: #c2beb1; --muted: #9a968a; --accent: #c98a80; --accent-2: #e0a59b; --accent-soft: #3a2421; --on-accent: #20201e;
  --ok: #9cc191; --ok-soft: #26321f; --warn: #ddb26a; --warn-soft: #3a2f1a; --bad: #e7887a; --bad-soft: #3d201c;
  --btn: #dcd9ce; --on-btn: #20201e; --hatch: rgba(220,217,206,.06); --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35); color-scheme: dark; }

*, *::before, *::after { box-sizing: border-box; }
html, body { background: var(--bg); color: var(--ink); }
body { font: 14px/1.5 var(--sans); -webkit-font-smoothing: antialiased; min-height: 100vh; }
body.locked { overflow: hidden; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
button:disabled { cursor: not-allowed; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
a { color: inherit; }
.ic { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }
.ic--lg { width: 36px; height: 36px; stroke-width: 1.2; color: var(--muted); }
.wm { display: inline-flex; color: currentColor; }
.wm svg { height: 100%; width: auto; display: block; }
.h1 { font: 500 26px/1.15 var(--display); letter-spacing: .06em; text-transform: uppercase; margin: 0; text-wrap: balance; }
.h2 { font: 500 20px/1.2 var(--display); letter-spacing: .04em; margin: 0 0 8px; text-wrap: balance; }
.h3 { font: 600 14px/1.3 var(--sans); margin: 0; letter-spacing: .01em; }
.h4 { font: 600 13px/1.3 var(--sans); margin: 0 0 8px; }
.eyebrow, .label { font: 600 10.5px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0; display: block; }
.eyebrow { margin-bottom: 6px; }
.muted { color: var(--muted); } .sm { font-size: 12.5px; } .pad { padding: 16px; }
.mt { margin-top: 28px !important; margin-bottom: 10px !important; }
.num, .kpi-v, .fn-n, .fn-v, .sched-t, td { font-variant-numeric: tabular-nums; }
.row { display: flex; gap: 8px; align-items: center; } .row.wrap, .wrap { flex-wrap: wrap; } .row.between { justify-content: space-between; } .row.end { justify-content: flex-end; flex-wrap: wrap; } .row.center { justify-content: center; } .gap-s { gap: 6px; }
.stack { display: grid; gap: 8px; }
.nowrap { white-space: nowrap; } .ta-r { text-align: right; } .ta-c { text-align: center; }
.sel { user-select: all; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 7px 14px; border-radius: var(--r); border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font-weight: 500; font-size: 13.5px; white-space: nowrap; text-decoration: none; transition: background .15s, border-color .15s; }
.btn:hover:not(:disabled) { background: var(--surface-2); border-color: var(--ink-2); }
.btn:disabled { opacity: .45; }
.btn--primary { background: var(--btn); color: var(--on-btn); border-color: var(--btn); }
.btn--primary:hover:not(:disabled) { background: var(--ink-2); border-color: var(--ink-2); }
.btn--danger { background: var(--bad); color: #fff; border-color: var(--bad); }
:root[data-theme="dark"] .btn--danger { color: #20201e; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn--danger { color: #20201e; } }
.btn--danger:hover:not(:disabled) { background: var(--bad); filter: brightness(1.08); }
.btn--ghost { background: transparent; border-color: transparent; }
.btn--ghost:hover:not(:disabled) { background: var(--surface-2); border-color: transparent; }
.btn--danger-t { color: var(--bad); }
.btn--sm { min-height: 30px; padding: 4px 10px; font-size: 12.5px; }
.btn--lg { min-height: 48px; font-size: 15px; }
.btn--block { width: 100%; }
.btn.on { background: var(--surface-2); border-color: var(--ink-2); }
.icon-btn { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: var(--r); color: var(--ink-2); }
.icon-btn:hover:not(:disabled) { background: var(--surface-2); }
.icon-btn:disabled { opacity: .35; }
.icon-btn--sm { width: 26px; height: 26px; }
.link { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; font-weight: 500; font-size: 13px; }
.link:hover { text-decoration-color: var(--ink); }
.link.danger { color: var(--bad); }
.link.back { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; margin-bottom: 12px; }

/* pills & chips */
.pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 99px; font-size: 11.5px; font-weight: 600; letter-spacing: .01em; background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line); white-space: nowrap; }
.pill.ok { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.pill.warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.pill.bad { background: var(--bad-soft); color: var(--bad); border-color: transparent; }
.pill.done { background: var(--surface-2); color: var(--ink-2); }
.pill.muted { background: transparent; color: var(--muted); }
.pill.accent { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 99px; border: 1px solid var(--line-2); background: var(--surface); font-size: 12.5px; font-weight: 500; }
.chip:hover { border-color: var(--ink-2); }
.chip--sm { padding: 2px 8px; font-size: 12px; }
.chip--tog { opacity: .55; } .chip--tog.on { opacity: 1; background: var(--surface); border-color: var(--ink-2); }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c); flex: none; display: inline-block; }
.av { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--c); color: #f3f1eb; font: 600 11.5px/1 var(--sans); letter-spacing: .04em; flex: none; }
.av--xs { width: 22px; height: 22px; font-size: 9px; }
.av--empty { background: var(--sunk); color: var(--muted); border: 1px dashed var(--line-2); }
.who { display: inline-flex; align-items: center; gap: 8px; }
.who > span:last-child { display: flex; flex-direction: column; }

/* form */
.field { display: grid; gap: 5px; min-width: 0; border: 0; padding: 0; margin: 0 0 14px; }
.field > span, .field > legend { font-size: 12.5px; font-weight: 600; color: var(--ink-2); padding: 0; }
.field em { font-style: normal; font-weight: 400; }
.field--sm { margin: 10px 0 0; } .field--sm > span { font-size: 11px; color: var(--muted); }
.field--narrow { max-width: 260px; }
.field--inline { display: flex; align-items: center; gap: 8px; margin: 0; }
input:not([type=checkbox]):not([type=radio]), select, textarea { width: 100%; min-height: 38px; padding: 8px 10px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface); color: var(--ink); }
textarea { resize: vertical; line-height: 1.5; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--accent-soft); }
input:disabled, select:disabled, textarea:disabled { opacity: .6; }
.field.bad input, .field.bad select, [aria-invalid="true"] { border-color: var(--bad) !important; }
.f-err, .form-err { color: var(--bad); font-size: 12.5px; font-weight: 500; margin: 0; }
.form-err { margin: 0 0 12px; }
.check { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; margin: 0 0 12px; cursor: pointer; }
.check input { margin-top: 3px; accent-color: var(--ink); width: 15px; height: 15px; flex: none; }
.switch { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; cursor: pointer; margin: 0 0 12px; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch span { width: 34px; height: 20px; border-radius: 99px; background: var(--line-2); position: relative; transition: background .15s; flex: none; }
.switch span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); transition: transform .15s; }
.switch input:checked + span { background: var(--ok); }
.switch input:checked + span::after { transform: translateX(14px); }
.switch input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.switch input:disabled + span { opacity: .6; }
.switch--sm { margin: 0; font-size: 12px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 10px; }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 10px; }
.search { display: flex; align-items: center; gap: 6px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface); padding: 0 10px; min-width: 0; }
.search input { border: 0 !important; box-shadow: none !important; padding-left: 0; background: transparent; min-width: 0; }
.seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: var(--r); padding: 2px; background: var(--surface); gap: 2px; }
.seg button { padding: 6px 12px; border-radius: 4px; font-size: 13px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.seg button.on { background: var(--btn); color: var(--on-btn); }
.seg button:hover:not(.on) { color: var(--ink); background: var(--surface-2); }
.seg--sm button { padding: 4px 10px; font-size: 12.5px; }
.seg--fill { display: flex; } .seg--fill button { flex: 1; white-space: normal; text-align: center; }

/* prototype bar */
.proto { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40; height: var(--bar); display: flex; align-items: center; gap: 16px; padding: 0 16px; background: var(--charcoal); color: var(--stone); border-bottom: 1px solid #000; }
.proto-l { display: flex; align-items: center; gap: 12px; min-width: 0; }
.proto-mark .wm { height: 11px; color: var(--stone); }
.proto-tag { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #9a968a; white-space: nowrap; }
.proto-seg { margin: 0 auto; background: #2a2a27; border-color: #3a3934; overflow-x: auto; max-width: 100%; }
.proto-seg button { color: #b8b4a8; }
.proto-seg button.on { background: var(--stone); color: var(--charcoal); }
.proto-seg button:hover:not(.on) { background: #34332e; color: var(--stone); }
.proto .btn--ghost { color: #b8b4a8; }
.proto .btn--ghost:hover { background: #2a2a27; color: var(--stone); }

/* login */
.login { display: grid; grid-template-columns: 1.1fr 1fr; min-height: calc(100vh - var(--bar)); }
.login-art { background-size: cover; background-position: center; position: relative; }
.login-art::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(32,32,30,.15), rgba(32,32,30,.75)); }
.login-art-in { position: absolute; left: 40px; right: 40px; bottom: 40px; color: #dcd9ce; }
.login-art-in .wm { height: 30px; } .login-art-in p { letter-spacing: .2em; text-transform: uppercase; font-size: 11px; margin: 12px 0 0; }
.login-card { align-self: center; justify-self: center; width: min(400px, 100%); padding: 40px 24px; display: grid; gap: 4px; }
.login-card .h1 { font-size: 34px; margin-bottom: 4px; }
.login-card > .muted { margin: 0 0 20px; }
.login-card .btn--block { margin-top: 6px; }
.demo-accts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.demo-accts .label { width: 100%; margin-bottom: 4px; }
.fine { font-size: 11.5px; color: var(--muted); margin-top: 16px; }

/* shell */
.shell { display: grid; grid-template-columns: var(--side) minmax(0, 1fr); min-height: calc(100vh - var(--bar)); }
.side { position: sticky; top: var(--bar); height: calc(100vh - var(--bar)); display: flex; flex-direction: column; background: var(--surface); border-right: 1px solid var(--line); padding: 18px 12px 12px; overflow-y: auto; }
.side-top { display: flex; flex-direction: column; gap: 6px; padding: 4px 10px 20px; }
.side-wm .wm { height: 12px; }
.side-sub { font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.side-nav { display: grid; gap: 1px; }
.nav-h { font: 600 10px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 18px 10px 6px; }
.nav-i { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r); color: var(--ink-2); font-weight: 500; text-align: left; position: relative; }
.nav-i:hover { background: var(--surface-2); color: var(--ink); }
.nav-i.on { background: var(--surface-2); color: var(--ink); }
.nav-i.on::before { content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 2px 2px 0; background: var(--accent); }
.nav-n { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--accent); color: var(--on-accent); font-size: 11px; display: inline-grid; place-items: center; }
.side-me { margin-top: auto; padding: 14px 6px 0; border-top: 1px solid var(--line); }
.me-row { display: flex; align-items: center; gap: 10px; }
.me-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; } .me-txt b { font-size: 13px; } .me-txt span { font-size: 11.5px; color: var(--muted); }
.mtop { display: none; }
.side-scrim { display: none; }
.main { min-width: 0; }
.page { padding: 28px clamp(16px, 3vw, 40px) 64px; max-width: 1240px; }
.page--wide { max-width: none; }
.phead { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.phead p { margin: 6px 0 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.phead-act { display: flex; gap: 8px; flex-wrap: wrap; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); min-width: 0; }
.card-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.empty { text-align: center; padding: 64px 16px; display: grid; justify-items: center; gap: 6px; }
.note { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-radius: var(--r); background: var(--surface-2); font-size: 13px; color: var(--ink-2); margin: 8px 0; }
.warnbox { display: flex; gap: 10px; padding: 12px 14px; border-radius: var(--r); background: var(--warn-soft); color: var(--ink); margin: 4px 0 14px; font-size: 13px; }
.warnbox > .ic { color: var(--warn); margin-top: 2px; }
.warnbox ul { margin: 6px 0; padding-left: 18px; }
.warnbox .check { margin: 8px 0 0; }

/* overview */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px 16px; display: grid; gap: 4px; }
.kpi-v { font: 500 26px/1.1 var(--display); letter-spacing: .02em; }
.ov-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.att { list-style: none; margin: 0; padding: 4px 0; max-height: 380px; overflow-y: auto; }
.att li { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--line); font-size: 13px; }
.att li:last-child { border-bottom: 0; }
.att .dot { margin-top: -18px; }
.sched { display: grid; padding: 6px 0; }
.sched-i { display: grid; grid-template-columns: 76px 1fr auto; gap: 12px; align-items: center; padding: 10px 16px; text-align: left; border-bottom: 1px solid var(--line); }
.sched-i:last-child { border-bottom: 0; }
.sched-i:hover { background: var(--surface-2); }
.sched-i.past { opacity: .6; }
.sched-t { font-weight: 600; font-size: 13px; }
.sched-b { display: flex; flex-direction: column; padding-left: 10px; border-left: 3px solid var(--c); min-width: 0; }
.sched-b span { font-size: 12.5px; color: var(--muted); }
.sched-s { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.fn { padding: 14px 16px; display: grid; gap: 10px; }
.fn-row { display: grid; grid-template-columns: 110px 1fr 28px 92px; gap: 10px; align-items: center; font-size: 13px; }
.fn-bar { height: 10px; background: var(--surface-2); border-radius: 99px; overflow: hidden; }
.fn-bar i { display: block; height: 100%; background: var(--ink-2); border-radius: 99px; min-width: 2px; }
.fn-bar i.won { background: var(--ok); } .fn-bar i.lost { background: var(--line-2); }
.fn-n { text-align: right; font-weight: 600; } .fn-v { text-align: right; color: var(--muted); font-size: 12.5px; }
.feed { list-style: none; margin: 0; padding: 8px 16px; display: grid; gap: 0; }
.feed li { display: grid; gap: 2px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.feed li:last-child { border-bottom: 0; }
.feed--lg li { padding: 10px 0; }

/* calendar */
.cal-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.cal-nav { display: flex; align-items: center; gap: 6px; }
.cal-title { margin-left: 8px; }
.cal-legend { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 6px; }
.legend-k { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); margin-left: 6px; }
.legend-k i { width: 16px; height: 12px; border-radius: 2px; display: inline-block; }
.k-block { background: repeating-linear-gradient(135deg, var(--accent-soft) 0 4px, transparent 4px 8px); border: 1px solid var(--accent); }
.k-away { background: repeating-linear-gradient(135deg, var(--hatch) 0 3px, transparent 3px 6px); border: 1px dashed var(--line-2); }
.k-closed { background: var(--sunk); border: 1px solid var(--line); }
.cal-hint { margin: 4px 0 12px; }
.cal-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 16px; align-items: start; }
.cal-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.cal { min-width: 760px; }
.cal-head, .cal-body { display: grid; grid-template-columns: 56px repeat(var(--cols), minmax(96px, 1fr)); }
.cal-head { position: sticky; top: 0; z-index: 3; background: var(--surface); border-bottom: 1px solid var(--line); }
.cal-dh { display: flex; flex-direction: column; align-items: flex-start; padding: 8px 10px; border-left: 1px solid var(--line); text-align: left; }
button.cal-dh:hover { background: var(--surface-2); }
.cal-dh span { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.cal-dh b { font: 500 20px/1.1 var(--display); }
.cal-dh em { font-style: normal; font-size: 11.5px; color: var(--muted); }
.cal-dh.today b { color: var(--on-accent); background: var(--accent); border-radius: 4px; padding: 0 6px; }
.cal-dh--staff { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px; }
.cal-dh--staff b { font-size: 15px; } .cal-dh--staff em { width: 100%; }
.cal-gut { border-right: 0; }
.cal-hr { position: relative; border-top: 1px solid transparent; }
.cal-hr span { position: absolute; top: -8px; right: 8px; font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.cal-hr:first-child span { top: 2px; }
.cal-col { position: relative; border-left: 1px solid var(--line); background-image: repeating-linear-gradient(180deg, var(--line) 0 1px, transparent 1px 52px), repeating-linear-gradient(180deg, transparent 0 26px, var(--hatch) 26px 27px, transparent 27px 52px); cursor: copy; }
.cal-closed { position: absolute; left: 0; right: 0; background: var(--sunk); opacity: .85; pointer-events: none; display: grid; place-items: center; }
.cal-closed span { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.cal-block { position: absolute; left: 0; right: 0; z-index: 1; background: repeating-linear-gradient(135deg, var(--accent-soft) 0 6px, transparent 6px 12px), var(--surface); border-top: 2px solid var(--accent); border-bottom: 1px solid var(--accent); text-align: left; padding: 4px 8px; display: flex; flex-direction: column; overflow: hidden; font-size: 11.5px; color: var(--accent-2); }
:root[data-theme="dark"] .cal-block { color: var(--accent); }
.cal-block b { font-weight: 600; }
.cal-ev { position: absolute; z-index: 2; border-radius: 5px; padding: 4px 6px; text-align: left; overflow: hidden; display: flex; flex-direction: column; font-size: 11.5px; line-height: 1.25; background: color-mix(in srgb, var(--c) 18%, var(--surface)); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); color: var(--ink); box-shadow: inset 3px 0 0 var(--c); }
.cal-ev:hover { background: color-mix(in srgb, var(--c) 28%, var(--surface)); z-index: 4; }
.cal-ev b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-t, .ev-s { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11px; }
.cal-ev.st-completed { opacity: .6; }
.cal-ev.st-cancelled { opacity: .5; background: var(--surface); } .cal-ev.st-cancelled b { text-decoration: line-through; }
.cal-ev.st-no_show b { text-decoration: line-through; }
.cal-ev.needs { border-style: dashed; border-color: var(--warn); }
.cal-ev.needsmove { outline: 2px solid var(--warn); }
.cal-ev--away { background: repeating-linear-gradient(135deg, var(--hatch) 0 4px, transparent 4px 8px), var(--surface-2); border: 1px dashed var(--line-2); box-shadow: inset 3px 0 0 var(--c); color: var(--muted); }
.cal-now { position: absolute; left: -1px; right: 0; height: 2px; background: var(--accent); z-index: 5; pointer-events: none; }
.cal-now::before { content: ""; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.cal-side .blk-list { list-style: none; margin: 0; padding: 6px; display: grid; gap: 2px; }
.blk-list button { display: flex; gap: 10px; width: 100%; text-align: left; padding: 8px; border-radius: var(--r); }
.blk-list button:hover { background: var(--surface-2); }
.blk-list button > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.blk-sw { width: 10px; height: 34px; border-radius: 2px; background: repeating-linear-gradient(135deg, var(--c) 0 2px, transparent 2px 5px); border: 1px solid var(--c); flex: none; }

/* tables */
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.toolbar-r { display: flex; gap: 8px; flex-wrap: wrap; }
.toolbar select { width: auto; }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); overflow-x: auto; max-width: 100%; }
.tabs button { padding: 8px 12px; font-weight: 500; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; display: inline-flex; gap: 6px; align-items: center; }
.tabs button.on { color: var(--ink); border-color: var(--accent); }
.tabs button:hover { color: var(--ink); }
.table-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th { text-align: left; font: 600 10.5px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 12px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl td { padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl td > b, .tbl td > .muted.sm { display: block; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl--click tbody tr { cursor: pointer; }
.tbl--click tbody tr:hover, .tbl--click tbody tr:focus-visible { background: var(--surface-2); }
.tbl tr.inactive { opacity: .55; }
.rem { display: inline-block; font-size: 11px; padding: 1px 6px; border-radius: 4px; margin-right: 4px; border: 1px solid var(--line); color: var(--muted); }
.rem--sent { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.rem--scheduled { color: var(--ink-2); border-style: dashed; }
.rem--cancelled { text-decoration: line-through; }
.perm td:first-child { min-width: 260px; }
.yes { color: var(--ok); } .no { color: var(--line-2); font-weight: 700; }

/* overlay */
#overlay { position: fixed; inset: 0; z-index: 60; }
.ov-scrim { position: absolute; inset: 0; background: rgba(20,20,18,.45); animation: fade .15s ease; }
.ov { position: absolute; background: var(--surface); box-shadow: var(--shadow); display: flex; flex-direction: column; }
.ov--drawer { top: 0; right: 0; bottom: 0; width: min(520px, 100%); border-left: 1px solid var(--line); animation: slide .2s ease; }
.ov--modal { top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(480px, calc(100% - 32px)); max-height: calc(100% - 48px); border-radius: var(--r-lg); border: 1px solid var(--line); animation: pop .16s ease; }
.ov--modal.ov--wide { width: min(720px, calc(100% - 32px)); }
.ov-body { overflow-y: auto; padding: 24px; padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
.ov-x { position: absolute; top: 12px; right: 12px; z-index: 2; width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--r); background: var(--surface); }
.ov-x:hover { background: var(--surface-2); }
@keyframes fade { from { opacity: 0; } } @keyframes slide { from { transform: translateX(24px); opacity: 0; } } @keyframes pop { from { opacity: 0; transform: translate(-50%, -48%); } }
.mf { display: block; }
.mf .h2 { padding-right: 40px; }
.mf > .muted { margin: 0 0 16px; }
.mf--sm .stack { margin-top: 16px; }
.dr .h2 { padding-right: 40px; margin-bottom: 10px; }
.dr-sec { border-top: 1px solid var(--line); padding-top: 16px; margin-top: 18px; }
.dl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin: 16px 0; font-size: 13px; }
.dl > div { display: grid; gap: 3px; min-width: 0; word-break: break-word; }
.dl--when { padding: 14px; border-radius: var(--r); background: var(--surface-2); align-items: start; }
.dl--when b { font-size: 15px; }
.copyable { display: inline-flex; align-items: center; gap: 4px; min-width: 0; } .copyable > span { overflow: hidden; text-overflow: ellipsis; }
.copyable code { font-size: 13px; padding: 4px 8px; background: var(--surface-2); border-radius: 4px; }
.act-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 6px; }
.confirm-box { border: 1px solid var(--line-2); border-radius: var(--r); padding: 14px; margin: 8px 0; background: var(--surface-2); }
.confirm-box .row { justify-content: flex-end; }
.em-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.em-row { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: center; padding: 6px 0; font-size: 13px; }
.em-row > span:nth-child(2) { display: flex; flex-direction: column; }
.em-ic { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); }
.em-sent .em-ic { background: var(--ok-soft); color: var(--ok); }
.em-cancelled { opacity: .55; }
.em-ic .ic { width: 12px; height: 12px; }
.slots { display: flex; flex-wrap: wrap; gap: 6px; }
.slot { display: inline-flex; flex-direction: column; align-items: center; min-width: 84px; padding: 8px 10px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface); font-weight: 600; font-size: 13px; }
.slot small { font-weight: 400; color: var(--muted); font-size: 11px; }
.slot:hover { border-color: var(--ink); }
.slot.on { background: var(--btn); color: var(--on-btn); border-color: var(--btn); }
.slot.on small { color: inherit; opacity: .8; }
.cad-prev { list-style: none; margin: -4px 0 14px; padding: 0; border-left: 1px solid var(--line-2); }
.cad-prev li { display: grid; grid-template-columns: 64px 1fr auto; gap: 10px; padding: 6px 0 6px 14px; position: relative; font-size: 13px; }
.cad-prev li::before { content: ""; position: absolute; left: -4px; top: 12px; width: 7px; height: 7px; border-radius: 50%; background: var(--surface); border: 1px solid var(--ink-2); }
.cad-d { font-weight: 600; }

/* leads */
.board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 12px; align-items: start; }
.col { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-lg); min-height: 240px; display: flex; flex-direction: column; transition: background .12s, border-color .12s; }
.col.over { background: var(--accent-soft); border-color: var(--accent); }
.col[data-stage="won"] .col-h b { color: var(--ok); }
.col-h { padding: 12px 12px 8px; display: grid; gap: 2px; }
.col-b { padding: 4px 8px 10px; display: grid; gap: 8px; }
.col-empty { font-size: 12px; color: var(--muted); padding: 14px 6px; text-align: center; border: 1px dashed var(--line-2); border-radius: var(--r); margin: 0; }
.lc { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; display: grid; gap: 6px; cursor: grab; box-shadow: 0 1px 1px rgba(0,0,0,.03); }
.lc:hover { border-color: var(--ink-2); }
.lc.dragging { opacity: .4; }
.lc-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.lc-bot { display: flex; justify-content: space-between; align-items: center; }
.lc-v { font-weight: 600; font-variant-numeric: tabular-nums; }
.heat { font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; font-weight: 600; color: var(--muted); }
.heat--hot { color: var(--accent); }
.due { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--muted); }
.due .ic { width: 12px; height: 12px; }
.due--over { color: var(--bad); font-weight: 600; } .due--today { color: var(--warn); font-weight: 600; } .due--none { color: var(--warn); }
.next-up { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r); background: var(--surface-2); margin: 4px 0 14px; }
.next-up > div { flex: 1; display: grid; gap: 2px; min-width: 0; }
.tabs--dr { margin-bottom: 14px; }
.dr-head { margin-top: 8px; }
.add-task { display: grid; grid-template-columns: 1fr auto auto auto; gap: 6px; margin-bottom: 12px; }
.add-task select, .add-task input[type=date] { width: auto; }
.add-note { display: grid; gap: 6px; justify-items: end; margin-bottom: 8px; }
.tasks { list-style: none; margin: 10px 0 0; padding: 0; }
.task { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.tasks.card .task:last-child, .task:last-child { border-bottom: 0; }
.task > div:nth-child(2) { display: grid; gap: 2px; min-width: 0; }
.task.over b { color: var(--bad); }
.task.done b { text-decoration: line-through; color: var(--muted); }
.task-a { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.tick { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line-2); display: grid; place-items: center; color: var(--on-btn); }
.tick:hover { border-color: var(--ok); background: var(--ok-soft); }
.task.done .tick { background: var(--ok); border-color: var(--ok); }
.tick .ic { width: 12px; height: 12px; stroke-width: 2.5; }
.done-tasks summary { cursor: pointer; font-size: 13px; color: var(--muted); padding: 10px 0; }
.visit-list { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 6px; }
.visit-list button { width: 100%; text-align: left; display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r); }
.visit-list button span:not(.pill) { grid-column: 1; font-size: 12.5px; color: var(--muted); }
.visit-list .pill { grid-row: 1 / 3; grid-column: 2; align-self: center; }
.visit-list button:hover { border-color: var(--ink-2); }
.fu-g { margin-bottom: 22px; }
.fu-g h2 { margin-bottom: 8px; }
.tone-over { color: var(--bad); } .tone-today { color: var(--warn); }

/* emails editor */
.em-ed { display: grid; grid-template-columns: 220px minmax(0, 1fr) minmax(0, 1.05fr); gap: 16px; align-items: start; }
.tpl-list { padding: 6px; display: grid; gap: 1px; position: sticky; top: calc(var(--bar) + 16px); }
.tpl-list .nav-h { margin: 12px 8px 4px; } .tpl-list .nav-h:first-child { margin-top: 6px; }
.tpl-i { display: flex; flex-direction: column; text-align: left; padding: 8px 10px; border-radius: var(--r); font-size: 13px; }
.tpl-i:hover { background: var(--surface-2); }
.tpl-i.on { background: var(--surface-2); box-shadow: inset 2px 0 0 var(--accent); }
.em-form { padding: 18px; }
.em-form > .row:first-child { margin-bottom: 12px; align-items: flex-start; }
.tags { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: -6px 0 14px; }
.tags .label { margin-right: 4px; }
.btn-ed { display: grid; grid-template-columns: auto minmax(0, 1fr) 150px; gap: 8px; align-items: center; margin-bottom: 6px; }
.btn-ed .check { margin: 0; }
.sticky-act { position: sticky; bottom: 0; background: var(--surface); padding: 12px 0 0; border-top: 1px solid var(--line); margin-top: 8px; flex-wrap: wrap; }
.em-pv { position: sticky; top: calc(var(--bar) + 16px); display: grid; gap: 8px; }
.em-inbox-line { font-size: 13px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.em-frame { background: #e9e6de; border-radius: var(--r-lg); padding: 20px 12px; max-height: calc(100vh - 200px); overflow-y: auto; border: 1px solid var(--line); }
.em-frame--inbox { max-height: none; }
.em-meta { display: grid; gap: 6px; font-size: 13px; margin: 6px 0 12px; } .em-meta > div { display: flex; gap: 8px; align-items: baseline; }
/* the email itself: emails are light-only by design */
.em { max-width: 560px; margin: 0 auto; background: #f7f5f0; color: #20201e; font: 15px/1.6 var(--sans); border-radius: 4px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.em--m { max-width: 360px; font-size: 14.5px; }
.em-pre { display: none; }
.em-head { background: #20201e; color: #dcd9ce; padding: 22px 28px; display: flex; flex-direction: column; gap: 8px; }
.em-head .wm { height: 13px; } .em-head span { font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: #a7a397; }
.em-main { padding: 28px; }
.em--m .em-main { padding: 22px 18px; }
.em-main .em-h1 { font: 500 22px/1.25 var(--display); letter-spacing: .02em; margin: 0 0 16px; color: #20201e; }
.em-main p { margin: 0 0 14px; }
.em-det { width: 100%; border-collapse: collapse; margin: 6px 0 20px; border-top: 1px solid #cfcabc; font-size: 14px; }
.em-det td { padding: 9px 0; border-bottom: 1px solid #cfcabc; vertical-align: top; color: #20201e; }
.em-det td:first-child { width: 96px; color: #6a665c; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; padding-top: 12px; }
.em-btns { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 8px; }
.em--m .em-btns { flex-direction: column; }
.em-btn { display: inline-block; text-align: center; padding: 11px 18px; border: 1px solid #20201e; color: #20201e; text-decoration: none; font-size: 13px; font-weight: 600; letter-spacing: .04em; border-radius: 2px; }
.em-btn--p { background: #4a0000; border-color: #4a0000; color: #f7f5f0; }
.em-btn:hover { filter: brightness(1.15); }
.em-sign { color: #6a665c; margin-top: 18px !important; }
.em-foot { padding: 18px 28px 24px; font-size: 11.5px; color: #6a665c; border-top: 1px solid #dcd9ce; line-height: 1.6; }
.form-card { padding: 18px; }
.form-card .h3 { margin-bottom: 14px; }

/* website editor */
.web-ed { display: grid; grid-template-columns: 200px minmax(0, .9fr) minmax(0, 1.1fr); gap: 16px; align-items: start; }
.web-form { padding: 18px; }
.web-pv { position: sticky; top: calc(var(--bar) + 16px); display: grid; gap: 8px; }
.site-frame { height: calc(100vh - 180px); min-height: 420px; overflow-y: auto; border-radius: var(--r-lg); border: 1px solid var(--line); background: #20201e; }
.revs { margin-top: 10px; padding: 8px; border-top: 1px solid var(--line); font-size: 13px; }
.revs summary { cursor: pointer; font-weight: 600; }
.revs ul { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 8px; }
.revs li { display: grid; gap: 2px; }
.rep { border: 1px solid var(--line); border-radius: var(--r); padding: 12px; margin-bottom: 10px; position: relative; }
.rep-n { font: 500 12px var(--display); color: var(--muted); position: absolute; right: 12px; top: 10px; }
.rep-img { width: 64px; height: 64px; object-fit: cover; border-radius: 4px; display: block; margin-bottom: 8px; }
.rep--row { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; }
.rep--row .rep-img { width: 76px; height: 76px; }
.rep .field { margin-bottom: 8px; }
.serp { display: grid; gap: 2px; padding: 12px 14px; border-radius: var(--r); background: #fff; color: #202124; font-family: Arial, sans-serif; font-size: 13px; margin-top: 4px; }
.serp b { color: #1a0dab; font-weight: 400; font-size: 17px; } .serp-u { color: #4d5156; font-size: 12px; }
/* mini site preview: always the site's dark/stone look */
.sp { color: #dcd9ce; font-family: var(--sans); }
.sp-nav { display: flex; align-items: center; gap: 12px; padding: 14px 18px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; position: sticky; top: 0; background: #20201e; z-index: 1; border-bottom: 1px solid #36352f; }
.sp-nav .wm { height: 9px; } .sp-nav span { flex: 1; color: #9a968a; } .sp-nav b { border: 1px solid #dcd9ce; padding: 5px 9px; font-weight: 500; white-space: nowrap; }
.sp-hero { min-height: 320px; background-size: cover; background-position: center; display: flex; flex-direction: column; justify-content: flex-end; padding: 28px 22px; gap: 8px; }
.sp-hero .wm { height: auto; width: 100%; max-width: 100%; }
.sp-hero .wm svg { width: 100%; height: auto; }
.sp-tag { font-size: 10px; letter-spacing: .3em; text-transform: uppercase; margin: 0; }
.sp-hero p:last-child { margin: 0; max-width: 34ch; font-size: 13px; color: #c2beb1; }
.sp-sec { padding: 30px 22px; border-top: 1px solid #36352f; }
.sp-light { background: #dcd9ce; color: #20201e; }
.sp-k { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; opacity: .7; display: block; margin-bottom: 12px; }
.sp-big { font: 400 18px/1.4 var(--display); margin: 0; }
.sp-work { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sp-work figure { margin: 0; } .sp-work img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.sp-work figcaption { display: grid; font-size: 11px; padding-top: 6px; } .sp-work figcaption span { color: #9a968a; }
.sp-disc { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: d; }
.sp-disc li { display: grid; grid-template-columns: 110px 1fr; gap: 10px; font-size: 12px; padding-bottom: 12px; border-bottom: 1px solid #36352f; }
.sp-disc b { font: 500 18px var(--display); text-transform: uppercase; letter-spacing: .04em; } .sp-disc span { color: #9a968a; }
.sp-mats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.sp-mats figure { margin: 0; } .sp-mats img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; }
.sp-mats figcaption { display: grid; font-size: 10.5px; padding-top: 6px; } .sp-mats em { font-style: normal; opacity: .7; }
.sp-btn { display: inline-block; border: 1px solid #dcd9ce; padding: 8px 12px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; }
.sp-small { font-size: 12px; color: #9a968a; }

/* team & settings */
.hrs { display: grid; gap: 6px; }
.hrs-row { display: grid; grid-template-columns: 130px 110px auto 110px; gap: 8px; align-items: center; }
.hrs-row .check { margin: 0; }
.hrs-row input[type=time] { min-height: 32px; padding: 4px 8px; }
.hrs-row > .muted { grid-column: 2 / 5; }
.set-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.span2 { grid-column: span 2; }
.types { display: grid; gap: 12px; }
.type-row { display: grid; grid-template-columns: minmax(140px, 1.3fr) 110px 120px auto; gap: 8px; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.type-row textarea { grid-column: 1 / -1; min-height: 0; }
.type-row:last-child { border-bottom: 0; }
.mini { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.mini input { width: 70px !important; }
.plain { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 8px; font-size: 13px; }
.integ { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.integ-i { display: grid; gap: 4px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r); justify-items: start; }

/* public booking */
[data-mode="public"] { background: var(--stone); }
.pub { --p-bg: #dcd9ce; --p-surface: #ebe8e0; --p-ink: #20201e; --p-muted: #5f5b52; --p-line: #bdb7a7; background: var(--p-bg); color: var(--p-ink); min-height: calc(100vh - var(--bar)); display: flex; flex-direction: column; color-scheme: light;
  --surface: #f3f1eb; --surface-2: #e6e3da; --line: #cfcabc; --line-2: #b6b09f; --ink: #20201e; --ink-2: #3b3a35; --muted: #5f5b52; --btn: #20201e; --on-btn: #f3f1eb; --accent: #4a0000; --accent-soft: #e9d9d4; --ok: #3d5a36; --ok-soft: #dfe6d6; --bad: #8e1b12; --bad-soft: #f2d8d2; --warn: #845510; --warn-soft: #f1e3c4; --on-accent: #f3f1eb; }
.pub .btn--danger { color: #fff; }
.pub-head { background: #20201e; color: #dcd9ce; }
.pub-head-in { max-width: 1080px; margin: 0 auto; padding: 18px 16px; display: flex; align-items: center; gap: 16px; }
.pub-wm .wm { height: 15px; color: #dcd9ce; }
.pub-sub { font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; color: #a7a397; flex: 1; }
.pub-link { font-size: 12px; color: #a7a397; text-decoration: none; } .pub-link:hover { color: #dcd9ce; }
.pub-in { width: 100%; max-width: 1080px; margin: 0 auto; padding: 32px 16px 64px; flex: 1; }
.pub-narrow { max-width: 680px; }
.pub-h { font: 400 clamp(30px, 4.6vw, 46px)/1.05 var(--display); letter-spacing: .02em; margin: 0 0 12px; text-wrap: balance; }
.pub-lead { font-size: 16px; color: var(--p-muted); max-width: 56ch; margin: 0 0 24px; }
.prog { list-style: none; display: flex; gap: 0; padding: 0; margin: 0 0 28px; border-bottom: 1px solid var(--p-line); counter-reset: s; overflow-x: auto; }
.prog li { counter-increment: s; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--p-muted); padding: 0 20px 12px 0; position: relative; white-space: nowrap; }
.prog li > *::before { content: counter(s) " · "; }
.prog li.on { color: var(--p-ink); font-weight: 600; }
.prog li.on::after { content: ""; position: absolute; left: 0; right: 20px; bottom: -1px; height: 2px; background: #4a0000; }
.prog li.done button { color: var(--p-ink); text-decoration: underline; text-underline-offset: 3px; letter-spacing: inherit; text-transform: inherit; font-size: inherit; }
.pub-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; align-items: start; }
.pub-grid--done { grid-template-columns: 1fr; }
.pub-sum { position: sticky; top: calc(var(--bar) + 16px); background: var(--p-surface); border: 1px solid var(--p-line); border-radius: 4px; padding: 20px; }
.pub-sum dl { margin: 12px 0; display: grid; gap: 12px; }
.pub-sum dl > div { display: grid; grid-template-columns: 56px 1fr; gap: 8px; font-size: 13.5px; }
.pub-sum dt { color: var(--p-muted); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; padding-top: 2px; }
.pub-sum dd { margin: 0; }
.vt { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.vt-i { display: grid; gap: 10px; text-align: left; padding: 20px; background: var(--p-surface); border: 1px solid var(--p-line); border-radius: 4px; transition: border-color .15s, transform .15s; }
.vt-i:hover { border-color: #20201e; transform: translateY(-1px); }
.vt-i.on { border-color: #20201e; box-shadow: inset 0 0 0 1px #20201e; }
.vt-top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.vt-top b { font: 500 19px/1.2 var(--display); }
.vt-top span { font-size: 12px; color: var(--p-muted); white-space: nowrap; }
.vt-d { font-size: 13.5px; color: var(--p-muted); }
.vt-go { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; display: inline-flex; gap: 6px; align-items: center; }
.host-pick { border: 0; padding: 0; margin: 0 0 22px; }
.host-pick .label { margin-bottom: 10px; }
.hp { display: flex; flex-wrap: wrap; gap: 8px; }
.hp-i { display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border: 1px solid var(--p-line); border-radius: 99px; background: var(--p-surface); text-align: left; }
.hp-i > span:last-child { display: flex; flex-direction: column; line-height: 1.2; } .hp-i > span:last-child span { font-size: 11.5px; color: var(--p-muted); }
.hp-i.on { border-color: #20201e; box-shadow: inset 0 0 0 1px #20201e; }
.hp-i .av--empty { border-style: solid; }
.dt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.mg { background: var(--p-surface); border: 1px solid var(--p-line); border-radius: 4px; padding: 14px; }
.mg-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.mg-h b { font: 500 16px var(--display); letter-spacing: .03em; }
.mg-w, .mg-g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.mg-w span { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--p-muted); padding: 4px 0; }
.mg-d { aspect-ratio: 1; border-radius: 50%; font-size: 14px; color: #9a968a; display: grid; place-items: center; max-width: 44px; width: 100%; justify-self: center; }
.mg-d.has { color: #20201e; font-weight: 600; background: #dcd9ce; }
.mg-d.has:hover { background: #cfcabc; }
.mg-d.on { background: #20201e !important; color: #f3f1eb; }
.mg-d.today { box-shadow: inset 0 0 0 1px #4a0000; }
.dt-slots .h4 { font: 500 17px var(--display); margin-bottom: 12px; }
.sg { margin-bottom: 14px; } .sg .label { margin-bottom: 6px; }
.dt-slots .slot { min-width: 92px; background: var(--p-surface); border-color: var(--p-line); }
.dt-slots .slot.on { background: #20201e; color: #f3f1eb; }
.tz { display: flex; gap: 6px; align-items: center; margin: 4px 0 14px; }
.pf { max-width: 640px; }
.pf input, .pf select, .pf textarea { background: #f3f1eb; }
.radio-cards { display: flex; flex-wrap: wrap; gap: 8px; }
.radio-cards--col { flex-direction: column; align-items: stretch; }
.rc { display: flex; gap: 8px; align-items: center; padding: 10px 14px; border: 1px solid var(--p-line); border-radius: 4px; background: var(--p-surface); cursor: pointer; font-size: 13.5px; }
.rc input { accent-color: #20201e; }
.rc.on { border-color: #20201e; box-shadow: inset 0 0 0 1px #20201e; }
.rc:focus-within { outline: 2px solid #4a0000; outline-offset: 2px; }
.done { text-align: center; padding: 32px 0; display: grid; justify-items: center; gap: 8px; }
.done .pub-lead { margin: 0 auto 20px; }
.done-ic { width: 56px; height: 56px; border-radius: 50%; background: #20201e; color: #dcd9ce; display: grid; place-items: center; margin-bottom: 8px; }
.done-ic .ic { width: 26px; height: 26px; stroke-width: 2; }
.mcard { background: var(--p-surface); border: 1px solid var(--p-line); border-radius: 4px; padding: 22px; margin: 0 0 20px; display: grid; gap: 4px; justify-items: start; }
.mcard p { margin: 0; }
.pub-in > .row, .pub-narrow .row { margin-bottom: 14px; }
.pub-foot { background: #20201e; color: #a7a397; font-size: 12px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; padding: 22px 16px; align-items: center; }
.pub-foot .wm { height: 9px; color: #dcd9ce; }

/* inbox */
.inbox { padding: 24px clamp(16px, 3vw, 40px) 48px; max-width: 1240px; margin: 0 auto; }
.inbox-bar { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.inbox-bar p { margin: 4px 0 0; max-width: 60ch; }
.inbox-bar select { max-width: 360px; }
.ib { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 16px; align-items: start; }
.ib-list { padding: 6px; max-height: calc(100vh - 200px); overflow-y: auto; }
.ib-list .nav-h { margin: 10px 8px 6px; }
.ib-i { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; width: 100%; text-align: left; padding: 10px; border-radius: var(--r); border-bottom: 1px solid var(--line); }
.ib-i b, .ib-pre { grid-column: 1 / -1; } .ib-pre { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ib-i:hover { background: var(--surface-2); }
.ib-i.on { background: var(--surface-2); box-shadow: inset 2px 0 0 var(--accent); }
.ib-from { font-size: 12.5px; font-weight: 600; }
.ib-s { display: grid; gap: 4px; justify-items: start; padding: 10px; border: 1px dashed var(--line-2); border-radius: var(--r); margin: 6px 4px; font-size: 13px; }
.ib-read { padding: 18px; }
.ib-meta { margin-bottom: 14px; } .ib-meta p { margin: 4px 0 0; }

/* blueprint */
.bp { padding: 32px 16px 80px; }
.bp-in { max-width: 820px; margin: 0 auto; font-size: 15px; line-height: 1.65; }
.bp-in h1 { font: 500 34px/1.1 var(--display); letter-spacing: .05em; text-transform: uppercase; margin: 0 0 12px; }
.bp-in h2 { font: 500 21px/1.2 var(--display); letter-spacing: .04em; margin: 44px 0 12px; padding-top: 18px; border-top: 1px solid var(--line); }
.bp-in h3 { font-size: 15px; margin: 24px 0 8px; }
.bp-in table { width: 100%; border-collapse: collapse; font-size: 13.5px; margin: 12px 0; display: block; overflow-x: auto; }
.bp-in th, .bp-in td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.bp-in th { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.bp-in code { font-size: 13px; background: var(--surface-2); padding: 1px 5px; border-radius: 3px; }
.bp-in pre { background: var(--surface); border: 1px solid var(--line); padding: 14px; border-radius: var(--r); overflow-x: auto; font-size: 12.5px; }
.bp-in pre code { background: none; padding: 0; }
.bp-in blockquote { margin: 16px 0; padding: 10px 16px; border-left: 3px solid var(--accent); background: var(--surface); }
.bp-in li { margin: 4px 0; }

/* toasts */
#toasts { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 90; display: grid; gap: 8px; justify-items: center; width: min(520px, calc(100% - 32px)); pointer-events: none; }
.toast { background: #20201e; color: #dcd9ce; padding: 11px 16px; border-radius: var(--r); font-size: 13.5px; box-shadow: 0 8px 24px rgba(0,0,0,.25); animation: tin .2s ease; transition: opacity .4s, transform .4s; text-align: center; }
.toast.bad { background: #8e1b12; color: #fff; }
.toast.out { opacity: 0; transform: translateY(8px); }
@keyframes tin { from { opacity: 0; transform: translateY(8px); } }

/* responsive */
@media (max-width: 1280px) {
  .em-ed { grid-template-columns: 200px minmax(0, 1fr); } .em-pv { grid-column: 1 / -1; position: static; }
  .web-ed { grid-template-columns: 190px minmax(0, 1fr); } .web-pv { grid-column: 1 / -1; position: static; }
  .site-frame { height: 560px; }
}
@media (max-width: 1100px) { .cal-wrap { grid-template-columns: 1fr; } .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .side { position: fixed; top: var(--bar); left: 0; bottom: 0; height: auto; width: 272px; z-index: 50; transform: translateX(-100%); transition: transform .2s ease; box-shadow: var(--shadow); }
  .nav-open .side { transform: none; }
  .nav-open .side-scrim { display: block; position: fixed; inset: var(--bar) 0 0 0; background: rgba(20,20,18,.4); z-index: 45; }
  .mtop { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--surface); position: sticky; top: var(--bar); z-index: 20; }
  .mtop .wm { height: 11px; }
  .ov-grid, .set-grid { grid-template-columns: 1fr; } .span2 { grid-column: auto; }
  .em-ed, .web-ed { grid-template-columns: 1fr; } .tpl-list { position: static; grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; } .tpl-list .nav-h { display: none; } .revs { display: none; }
  .login { grid-template-columns: 1fr; } .login-art { min-height: 180px; } .login-art-in { bottom: 20px; left: 20px; } .login-art-in .wm { height: 20px; }
  .pub-grid { grid-template-columns: 1fr; gap: 20px; } .pub-sum { position: static; order: -1; padding: 14px 16px; } .pub-sum dl { grid-template-columns: 1fr 1fr; } .pub-sum > p.muted { display: none; }
  .dt { grid-template-columns: 1fr; }
  .ib { grid-template-columns: 1fr; } .ib-list { max-height: 280px; }
  .proto-tag { display: none; }
}
@media (max-width: 640px) {
  .proto { gap: 8px; padding: 0 10px; } .proto-mark { display: none; } .proto .btn--ghost { padding: 4px 6px; font-size: 11.5px; white-space: normal; line-height: 1.1; max-width: 70px; } .proto-seg button { padding: 5px 8px; font-size: 12px; }
  .grid2, .grid3 { grid-template-columns: 1fr; } .grid4 { grid-template-columns: 1fr 1fr; }
  .kpis { grid-template-columns: 1fr 1fr; } .kpi-v { font-size: 21px; }
  .vt { grid-template-columns: 1fr; }
  .fn-row { grid-template-columns: 90px 1fr 22px; } .fn-v { display: none; }
  .att li { grid-template-columns: auto 1fr; } .att li .btn { grid-column: 2; justify-self: start; }
  .sched-i { grid-template-columns: 64px 1fr; } .sched-s { grid-column: 2; flex-direction: row; align-items: center; }
  .dl { grid-template-columns: 1fr; }
  .add-task { grid-template-columns: 1fr 1fr; } .add-task input:first-child { grid-column: 1 / -1; }
  .task { grid-template-columns: auto 1fr; } .task-a { grid-column: 2; justify-content: flex-start; }
  .hrs-row { grid-template-columns: 1fr 1fr; } .hrs-row .check { grid-column: 1 / -1; } .hrs-row > span:not(.muted) { display: none; } .hrs-row > .muted { grid-column: 1 / -1; }
  .type-row { grid-template-columns: 1fr 1fr; } .type-row > input:first-child { grid-column: 1 / -1; }
  .integ { grid-template-columns: 1fr; }
  .btn-ed { grid-template-columns: auto 1fr; } .btn-ed > .muted { grid-column: 2; }
  .page { padding-top: 20px; } .h1 { font-size: 22px; }
  .pub-sum dl { grid-template-columns: 1fr; }
  .ov-body { padding: 20px 16px; }
  .ov--modal { top: auto; bottom: 0; left: 0; transform: none; width: 100% !important; max-height: 92%; border-radius: var(--r-lg) var(--r-lg) 0 0; animation: slideup .2s ease; }
  @keyframes slideup { from { transform: translateY(24px); opacity: 0; } }
  .sp-mats { grid-template-columns: 1fr 1fr; } .sp-disc li { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* round 1 fixes */
.cal-ev--away { z-index: 1; opacity: .9; }
.cal-ev--away:hover { z-index: 1; }
.note--act { flex-wrap: wrap; justify-content: space-between; background: var(--accent-soft); }
.att-more { display: block; margin: 0 16px 14px; }
.att { max-height: none; }
.pub-sub { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 900px) { .pub-sum--compact dl > div:not(:first-child), .pub-sum--compact > .label { display: none; } .pub-sum--compact dl { margin: 0; } .pub-sum--compact { padding: 10px 14px; } }
@media (max-width: 640px) { .pub-link { display: none; } .pub-head-in { gap: 10px; } .pub-wm .wm { height: 12px; } .cal-hint, .legend-k { display: none; } }

/* round 2 */
.proto .sh { display: none; }
@media (max-width: 640px) { .proto .lg { display: none; } .proto .sh { display: inline; } .proto .btn--ghost { max-width: none; } }
.att-btns { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.aff { list-style: none; padding: 0; display: grid; gap: 8px; }
.aff li { display: grid; gap: 6px; }
.ov-body h2:focus { outline: none; }
.ov-body h2:focus-visible { outline: 2px solid var(--accent); }
#main:focus { outline: none; }

/* round 3 */
@media (max-width: 640px) { .att li .att-btns { grid-column: 2; justify-content: flex-start; } .c-opt { display: none; } }
@media (max-width: 420px) { .c-opt2 { display: none; } }
.hp-any { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; margin: 0; font-size: 15px; }
.copyable a { color: inherit; text-underline-offset: 3px; text-decoration-color: var(--line-2); }

/* ============ Studio Academy ============ */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nav-tag { margin-left: auto; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.sandbox-bar { position: sticky; top: var(--bar); z-index: 35; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 8px 16px; background: var(--warn-soft); color: var(--ink); border-bottom: 1px solid var(--warn); font-size: 13px; }
.ring text { font-weight: 500; }
.ac-banner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 14px 18px; margin-bottom: 18px; border-color: var(--line-2); }
.ac-banner-l { display: flex; align-items: center; gap: 14px; min-width: 0; }
.ac-banner-l > div { display: grid; gap: 2px; min-width: 0; }
.ac-hero { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 20px; }
.ac-hero-l { display: flex; align-items: center; gap: 20px; min-width: 0; }
.ac-hero-l p { margin: 6px 0 0; }
.ac-hero-r { display: grid; gap: 6px; justify-items: end; }
.ac-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 12.5px; color: var(--muted); }
.ac-legend span { display: inline-flex; gap: 6px; align-items: center; }
.ac-body { margin-top: 18px; }
.mods { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; max-width: 980px; }
.mod-h { width: 100%; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto 20px; gap: 14px; align-items: center; padding: 14px 16px; text-align: left; }
.mod-h--static { grid-template-columns: 40px minmax(0, 1fr) auto; }
button.mod-h:hover { background: var(--surface-2); border-radius: var(--r-lg); }
.mod-n { font: 500 18px var(--display); color: var(--muted); display: grid; place-items: center; }
.mod--done .mod-n { color: var(--ok); }
.mod-t { display: grid; gap: 2px; min-width: 0; } .mod-t b { font-size: 14.5px; }
.mod-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.mod-ls { list-style: none; margin: 0; padding: 0 16px 12px 70px; display: grid; gap: 2px; }
.mod-ls button { width: 100%; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: var(--r); text-align: left; font-size: 13.5px; }
.mod-ls button:hover { background: var(--surface-2); }
.mod-ic { display: inline-flex; gap: 4px; color: var(--muted); } .mod-ic .ic { width: 14px; height: 14px; }
.tick-s { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--line-2); display: inline-grid; place-items: center; flex: none; }
.tick-s.on { background: var(--ok); border-color: var(--ok); color: var(--on-btn); }
.tick-s .ic { width: 11px; height: 11px; stroke-width: 2.6; }
.mod--final { border-style: dashed; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; color: var(--muted); margin-bottom: 18px; }
.lp { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 28px; align-items: start; }
.lp-rail { position: sticky; top: calc(var(--bar) + 16px); padding: 8px; }
.lp-rail ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.lp-rail button { width: 100%; display: flex; gap: 10px; align-items: flex-start; text-align: left; padding: 8px; border-radius: var(--r); font-size: 13px; line-height: 1.35; }
.lp-rail button:hover { background: var(--surface-2); }
.lp-rail button.on { background: var(--surface-2); box-shadow: inset 2px 0 0 var(--accent); font-weight: 600; }
.lp-main { min-width: 0; max-width: 1000px; }
.lp-title { margin: 0 0 18px; text-transform: none; letter-spacing: .02em; font-size: 30px; }
.lp-title:focus { outline: none; }
.aud { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 10px; border: 1px solid var(--line); border-radius: 99px; background: var(--surface); margin-bottom: 22px; max-width: 560px; }
.aud-play { width: 44px; height: 44px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; flex: none; }
.aud-play .ic { width: 18px; height: 18px; fill: currentColor; stroke: none; }
.aud-play:hover { filter: brightness(1.15); }
.aud-t { display: grid; flex: 1; min-width: 0; } .aud-t b { font-size: 13.5px; }
.aud-rate select { width: auto; min-height: 32px; padding: 4px 8px; }
.lp-cols { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 28px; align-items: start; }
.lp-cols--one { grid-template-columns: minmax(0, 1fr); max-width: 72ch; }
.say { display: grid; gap: 4px; }
.say-p { position: relative; margin: 0; padding: 10px 12px 10px 40px; border-radius: var(--r); font-size: 15.5px; line-height: 1.65; color: var(--ink-2); transition: background .25s, color .25s; max-width: 70ch; }
.say-p.cur { background: var(--accent-soft); color: var(--ink); }
.say-go { position: absolute; left: 8px; top: 12px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); opacity: 0; }
.say-p:hover .say-go, .say-go:focus-visible, .say-p.cur .say-go { opacity: 1; }
.say-go .ic { width: 11px; height: 11px; fill: currentColor; stroke: none; }
.lp-fig { position: sticky; top: calc(var(--bar) + 16px); }
.flow { margin: 0; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.flow ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.flow-n { position: relative; display: grid; grid-template-columns: 30px 1fr; column-gap: 12px; padding: 0 0 18px; opacity: .55; transition: opacity .35s, transform .35s; }
.flow-n:last-child { padding-bottom: 0; }
.flow-n::before { content: ""; position: absolute; left: 14px; top: 30px; bottom: 0; width: 2px; background: var(--line); }
.flow-n:last-child::before { display: none; }
.flow-n b { font-size: 14px; align-self: center; } .flow-n > span:not(.flow-k) { grid-column: 2; font-size: 12.5px; color: var(--muted); }
.flow-k { grid-row: span 2; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--line-2); font: 500 13px var(--display); background: var(--surface); position: relative; z-index: 1; }
.flow-n.lit { opacity: 1; } .flow-n.lit .flow-k { border-color: var(--ink); }
.flow-n.lit::before { background: var(--ink-2); }
.flow-n.cur { transform: translateX(4px); } .flow-n.cur .flow-k { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.lp-cols:not(:has(.say-p.cur)) .flow-n { opacity: 1; }
.ac-when { margin: 26px 0 0; } .ac-when .tbl { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.ac-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; margin: 26px 0 0; }
.ac-card { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); padding: 16px; display: grid; gap: 10px; align-content: start; justify-items: start; }
.ac-card p { margin: 0; }
.ac-card-h { display: flex; gap: 12px; align-items: flex-start; width: 100%; }
.ac-card-h > .ic { width: 22px; height: 22px; margin-top: 2px; color: var(--accent); }
.ac-card-h > div { display: grid; flex: 1; }
.ac-card--task { border-color: var(--ink-2); }
.ac-card--done { border-color: var(--ok); }
.ac-take { margin-top: 26px; padding: 16px 18px; border-radius: var(--r-lg); background: var(--surface-2); }
.ac-take ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ac-take li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; } .ac-take li .ic { color: var(--ok); margin-top: 3px; }
.lp-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); }
.lp-foot-r { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.qz { list-style: none; margin: 18px 0; padding: 0; display: grid; gap: 12px; max-width: 760px; }
.q { padding: 16px 18px; }
.q fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.q legend { display: flex; gap: 10px; font-weight: 600; font-size: 14.5px; padding: 0; margin-bottom: 12px; }
.q-n { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--surface-2); display: grid; place-items: center; font-size: 12px; }
.q-os { display: grid; gap: 6px; }
.q-o { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: var(--r); cursor: pointer; font-size: 14px; }
.q-o:hover { border-color: var(--ink-2); }
.q-o input { margin-top: 3px; accent-color: var(--ink); }
.q-o.ok { border-color: var(--ok); background: var(--ok-soft); } .q-o.bad { border-color: var(--bad); background: var(--bad-soft); } .q-o.sel { border-color: var(--ink); background: var(--surface-2); }
.q-o:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.q-why { margin: 10px 0 0; font-size: 13.5px; }
.q--ok { border-color: var(--ok); }
.qz-done { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; padding: 18px; max-width: 760px; border-color: var(--ok); }
.qz-done .ic--lg { color: var(--ok); } .qz-done > div { flex: 1; } .qz-done .h2 { margin: 0; }
.fin-prog { height: 6px; background: var(--surface-2); border-radius: 99px; overflow: hidden; max-width: 760px; margin-top: 10px; }
.fin-prog span { display: block; height: 100%; background: var(--accent); transition: width .2s; }
.fin-score { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; padding: 20px; max-width: 760px; }
.fin-score > div { flex: 1; min-width: 220px; }
.cert { max-width: 760px; margin: 0 auto 18px; padding: 14px; background: var(--charcoal); border-radius: 4px; }
.cert-in { border: 1px solid #5a5850; padding: clamp(28px, 6vw, 56px) clamp(16px, 5vw, 48px); text-align: center; color: #dcd9ce; display: grid; justify-items: center; gap: 6px; }
.cert-wm { height: 22px; color: #dcd9ce; }
.cert-k { font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: #a7a397; margin: 6px 0 24px; }
.cert .eyebrow { color: #a7a397; }
.cert-name { font: 400 clamp(28px, 5vw, 44px)/1.1 var(--display); margin: 8px 0; letter-spacing: .02em; }
.cert-t { color: #c2beb1; margin: 0; line-height: 1.7; }
.cert-d { margin: 18px 0 0; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #a7a397; }
.center { text-align: center; }
.ref { display: grid; gap: 22px; max-width: 1000px; }
.ref .h3 { margin-bottom: 10px; }
.ref-s { max-width: 420px; }
.ref-g { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.chk { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.chk li { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; } .chk .ic { color: var(--ok); margin-top: 3px; }
.gl { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; margin: 0; }
.gl > div { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.gl dt { font-weight: 600; } .gl dd { margin: 4px 0 0; color: var(--ink-2); font-size: 13.5px; }
.bar { display: inline-block; width: 120px; height: 6px; border-radius: 99px; background: var(--surface-2); overflow: hidden; vertical-align: middle; margin-right: 8px; }
.bar span { display: block; height: 100%; background: var(--accent); }
/* coach */
#coach { position: fixed; inset: 0; z-index: 85; pointer-events: none; }
.spot { position: fixed; border-radius: 8px; box-shadow: 0 0 0 3px var(--accent), 0 0 0 9999px rgba(20, 20, 18, .42); transition: all .3s ease; pointer-events: none; }
.coach { position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); width: min(380px, calc(100% - 32px)); pointer-events: auto; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 14px 16px; display: grid; gap: 8px; animation: pop2 .2s ease; }
@keyframes pop2 { from { opacity: 0; transform: translateY(8px); } }
.co-top { display: flex; align-items: center; gap: 8px; } .co-top .muted { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.co-badge { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 2px 8px; border-radius: 99px; background: var(--warn-soft); color: var(--warn); }
.co-say { margin: 0; font-size: 15px; line-height: 1.5; }
.co-hint { margin: 0; padding: 8px 10px; border-radius: var(--r); background: var(--surface-2); font-size: 13px; }
.co-wait { display: flex; gap: 8px; align-items: center; margin: 0; font-size: 12.5px; color: var(--muted); }
.co-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--warn); animation: pulse 1.4s ease infinite; }
@keyframes pulse { 50% { opacity: .3; } }
.co-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .co-sp { flex: 1; }
.co-auto { margin: 0; font-size: 12.5px; }
.co-done { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: var(--r); background: var(--ok-soft); }
.co-done > .ic { color: var(--ok); width: 22px; height: 22px; } .co-done > div { display: grid; }
body.coaching #toasts { bottom: calc(220px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 1100px) { .lp { grid-template-columns: 1fr; } .lp-rail { position: static; } .lp-rail ol { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; } .lp-rail .nav-h { display: none; } .lp-cols { grid-template-columns: 1fr; } .lp-fig { position: static; order: -1; } }
@media (max-width: 640px) {
  .ac-hero-r { justify-items: stretch; width: 100%; } .ac-hero-l { gap: 14px; } .ac-hero .ring { width: 72px; height: 72px; }
  .mod-h { grid-template-columns: 30px minmax(0, 1fr) 18px; } .mod-meta { grid-column: 2; justify-content: flex-start; grid-row: 2; }
  .mod-ls { padding-left: 16px; } .mod-ls button { grid-template-columns: 22px minmax(0, 1fr) auto; } .mod-ic { display: none; }
  .lp-title { font-size: 24px; } .say-p { font-size: 15px; padding-left: 12px; } .say-go { display: none; }
  .aud { border-radius: var(--r-lg); }
  .coach { right: 8px; left: 8px; width: auto; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
  .lp-foot .btn--primary { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .spot { transition: none; } }

.ev-att { display: inline-grid; place-items: center; width: 13px; height: 13px; border-radius: 50%; background: var(--ok); color: var(--surface); margin-right: 4px; vertical-align: -2px; }
.ev-att .ic { width: 9px; height: 9px; stroke-width: 3; }
.co-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.co-steps li { display: flex; gap: 8px; align-items: center; font-size: 13.5px; }
.co-steps li.on { color: var(--muted); text-decoration: line-through; }
.co-near { margin: 0; padding: 8px 10px; border-radius: var(--r); background: var(--warn-soft); font-size: 13px; }
.co-say:focus { outline: none; }
.coach-pill { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); pointer-events: auto; display: inline-flex; gap: 8px; align-items: center; padding: 10px 14px; border-radius: 99px; background: var(--btn); color: var(--on-btn); box-shadow: var(--shadow); font-size: 13px; max-width: calc(100% - 32px); }
.coach-pill b { text-decoration: underline; text-underline-offset: 3px; }
.qz-retry { border-color: var(--warn); } .qz-retry .ic--lg { color: var(--warn); }
.q-why:focus { outline: none; }

.coach { grid-template-columns: minmax(0, 1fr); }
.co-top, .co-row { min-width: 0; }
.coach--top { bottom: auto; top: calc(var(--bar) + 12px); }
.q-check { margin-top: 10px; }
.pub-find { color: #dcd9ce; font-size: 12px; text-decoration-color: #6a665c; }
@media (max-width: 640px) { .say-go { display: grid; opacity: .7; left: auto; right: 6px; top: 8px; } .say-p { padding-right: 36px; } }

@media (max-width: 900px) { body.coaching .page, body.coaching .pub-in, body.coaching .inbox, body.coaching .ov-body { padding-bottom: calc(var(--coach-h, 300px) + 32px); } }
body.coaching #toasts { bottom: calc(var(--coach-h, 200px) + 32px + env(safe-area-inset-bottom, 0px)); }
/* the live dashboard has no prototype bar, so the sidebar and sticky panels start at the very top */
:root { --bar: 0px; }

/* ---------- live build ---------- */
@font-face { font-family: "Inter"; src: url("/fonts/inter-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Jost"; src: url("/fonts/jost-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
body { background: var(--bg); color: var(--ink); margin: 0; }
.live-msg { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.live-msg-in { max-width: 440px; text-align: center; display: grid; gap: 14px; justify-items: center; }
.live-msg-in .wm { width: 220px; color: var(--ink); }
#sync { position: fixed; left: 16px; bottom: 16px; z-index: 60; font-size: 12px; padding: 6px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--muted); box-shadow: 0 2px 10px rgba(0,0,0,.06); transition: opacity .3s; pointer-events: none; }
#sync[data-s="idle"] { opacity: 0; }
#sync[data-s="error"], #sync[data-s="signin"] { color: var(--bad); border-color: var(--bad); background: var(--bad-soft); opacity: 1; }
body.busy { cursor: progress; }
body.busy #app button, body.busy #app a, body.busy #app input, body.busy #app select { pointer-events: none; }
body.busy #app .btn--primary { opacity: .6; }
.live-bar { position: sticky; top: 0; z-index: 50; }
@media (max-width: 720px) { #sync { left: 50%; transform: translateX(-50%); bottom: 12px; } }
.hp[hidden], [hidden] { display: none !important; }

/* ---------- the film: card in Training, screening room overlay ---------- */
.film-card { display: grid; grid-template-columns: minmax(220px, 340px) minmax(0, 1fr); gap: 22px; align-items: center; padding: 16px; margin: 0 0 18px; background: #20201e; color: #dcd9ce; border-radius: var(--r, 8px); }
.film-card .eyebrow { color: #9a968a; } .film-card .muted { color: #b5b1a5; } .film-card .h3 { color: #dcd9ce; margin: 2px 0 6px; }
.film-card .btn--primary { background: #dcd9ce; color: #20201e; border-color: #dcd9ce; }
.film-card-txt { display: grid; gap: 8px; } .film-card-txt p { margin: 0; }
.film-card-pic { position: relative; aspect-ratio: 16/9; border: 0; border-radius: 6px; background: #000 center/cover no-repeat; cursor: pointer; padding: 0; }
.film-card-pic::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.45)); }
.film-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: rgba(243,241,235,.92); color: #20201e; transition: transform .2s; }
.film-card-pic:hover .film-play { transform: translate(-50%, -50%) scale(1.06); }
.film-card-pic:focus-visible { outline: 2px solid #c98a80; outline-offset: 3px; }
@media (max-width: 720px) { .film-card { grid-template-columns: 1fr; } }
.filmroom { position: fixed; inset: 0; z-index: 200; overflow-y: auto; background: #161614; color: #dcd9ce; font: 15px/1.55 var(--sans); color-scheme: dark; }
.fr-wrap { max-width: 1180px; margin: 0 auto; padding: 24px 16px 64px; }
.fr-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 26px; }
.fr-wm { display: inline-flex; height: 16px; color: #dcd9ce; } .fr-wm .wm, .fr-wm svg { height: 100%; width: auto; color: #dcd9ce; }
.fr-head .fr-kick { margin-right: auto; }
.fr-kick { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: #9a968a; margin: 0; }
.fr-x { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid #34332e; border-radius: 999px; background: #20201e; color: #dcd9ce; font: inherit; font-size: 13px; cursor: pointer; }
.fr-x:hover { border-color: #5a5850; } .fr-x:focus-visible { outline: 2px solid #c98a80; outline-offset: 2px; }
.fr-h { font: 400 clamp(32px, 5.2vw, 56px)/1.05 var(--display); letter-spacing: .02em; margin: 6px 0 8px; text-wrap: balance; }
.fr-lede { color: #9a968a; max-width: 62ch; margin: 0 0 22px; font-size: 16px; }
.fr-player { width: 100%; max-width: calc((100vh - 140px) * 16 / 9); margin-inline: auto; aspect-ratio: 16/9; background: #000; border-radius: 6px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.5); scroll-margin-top: 16px; }
.fr-player video { width: 100%; height: 100%; display: block; background: #000; }
.fr-err { padding: 12px 14px; border: 1px solid #34332e; border-radius: 6px; margin: 12px 0 0; color: #9a968a; }
.fr-meta { display: flex; gap: 18px; flex-wrap: wrap; color: #9a968a; font-size: 13px; margin: 14px 0 32px; }
.fr-h2 { font: 500 13px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: #9a968a; margin: 0 0 14px; }
.fr-chs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.fr-ch { width: 100%; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center; text-align: left; padding: 12px 14px; border: 1px solid #34332e; border-radius: 6px; background: #20201e; color: #dcd9ce; font: inherit; cursor: pointer; }
.fr-ch:hover { border-color: #5a5850; } .fr-ch:focus-visible { outline: 2px solid #c98a80; outline-offset: 2px; }
.fr-ch.on { border-color: #c98a80; box-shadow: inset 3px 0 0 #c98a80; }
.fr-ch-n { font: 500 17px var(--display); color: #9a968a; } .fr-ch.on .fr-ch-n { color: #c98a80; }
.fr-ch-t { display: grid; min-width: 0; } .fr-ch-t b { font-weight: 600; font-size: 14px; } .fr-ch-t span { font-size: 12.5px; color: #9a968a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fr-ch-time { font-size: 12.5px; color: #9a968a; font-variant-numeric: tabular-nums; }
.fr-foot { margin-top: 36px; color: #9a968a; font-size: 12.5px; }

.fr-ch-t span { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }
.fr-chs { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

/* ---------- clients ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.cl-link { display: inline-flex; align-items: center; gap: 6px; margin: 2px 0 8px; }
.cl-link .ic { width: 15px; height: 15px; }
.cl-filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin: 18px 0 12px; }
.cl-filters .field { margin: 0; }
.cl-search { position: relative; flex: 1 1 320px; }
.cl-search .ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
.cl-search input, .cl-search input[type=search] { padding-left: 36px; width: 100%; }
.cl-av { background: var(--sunk); color: var(--ink-2); font-weight: 600; }
.cl-av--lg { width: 64px; height: 64px; font-size: 20px; flex: none; }
.cl-tbl td .chip { padding: 2px 8px; font-size: 11.5px; }
.cl-pager { display: flex; gap: 8px; align-items: center; justify-content: flex-end; margin-top: 10px; }
.cl-pager .muted { margin-right: auto; }
.cl-note { margin-top: 14px; }
.cl-bdays { padding: 14px 16px; margin-top: 18px; }
.cl-bdays-h { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-bottom: 10px; }
.cl-bdays-l { display: flex; gap: 8px; flex-wrap: wrap; }
.cl-bday { display: grid; gap: 2px; text-align: left; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); min-width: 170px; font-size: 13px; }
.cl-bday:hover { border-color: var(--line-2); }
.cl-page .back { margin-bottom: 14px; display: inline-flex; align-items: center; gap: 4px; }
.cl-head { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-bottom: 20px; }
.cl-head-t { flex: 1 1 260px; min-width: 0; display: grid; gap: 6px; }
.cl-head-t .h1 { overflow-wrap: anywhere; }
.cl-head-a { display: flex; gap: 8px; flex-wrap: wrap; }
.cl-grid { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 16px; align-items: start; }
.cl-side { display: grid; gap: 12px; min-width: 0; }
.cl-card { padding: 14px 16px; display: grid; gap: 6px; font-size: 13.5px; overflow-wrap: anywhere; }
.cl-card p { margin: 0; }
.cl-key { white-space: normal; line-height: 1.55; }
.cl-dates { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cl-dates li { display: flex; justify-content: space-between; gap: 10px; }
.cl-dates li span { color: var(--muted); }
.cl-dl { margin: 0; display: grid; gap: 6px; }
.cl-dl div { display: flex; justify-content: space-between; gap: 12px; }
.cl-dl dt { color: var(--muted); } .cl-dl dd { margin: 0; text-align: right; }
.cl-main { min-width: 0; }
.cl-main .tabs { padding: 0 12px; }
.cl-body { padding: 16px; display: grid; gap: 12px; }
.cl-body .h4 { margin: 6px 0 0; }
.cl-empty { margin: 0; }
.cl-add { display: grid; gap: 4px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.cl-add .field { margin: 0 0 6px; }
.cl-notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cl-note-i { border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; background: var(--surface); }
.cl-note-i.pinned { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.cl-note-i p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.55; overflow-wrap: anywhere; }
.cl-note-m { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.cl-note-a { margin-left: auto; display: flex; gap: 12px; }
.cl-up { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.cl-up-b { cursor: pointer; }
.cl-files { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cl-files li { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r); flex-wrap: wrap; }
.cl-file-ic { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 6px; background: var(--sunk); font: 600 10px/1 var(--sans); letter-spacing: .06em; color: var(--ink-2); flex: none; }
.cl-file-t { display: grid; flex: 1 1 200px; min-width: 0; } .cl-file-t a { color: inherit; overflow-wrap: anywhere; }
.cl-file-a { display: flex; gap: 6px; }
.cl-dates-ed { display: grid; gap: 8px; margin-bottom: 6px; }
.cl-date-row { display: grid; grid-template-columns: minmax(0, 1fr) 90px 72px 76px auto; gap: 8px; align-items: center; }
@media (max-width: 900px) { .cl-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .cl-date-row { grid-template-columns: 1fr 1fr 1fr; } .cl-date-row > input:first-child { grid-column: 1 / -1; } .grid3 { grid-template-columns: 1fr 1fr; } .cl-tbl th:nth-child(n+4), .cl-tbl td:nth-child(n+4) { display: none; } }

/* ---------- socials ---------- */
.so-page { max-width: 1400px; }
.so-page .phead { margin-bottom: 16px; }
.so-pi { width: 16px; height: 16px; flex: none; }
.so-spin { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line-2); border-top-color: var(--ink); animation: so-spin .8s linear infinite; display: inline-block; vertical-align: middle; }
.so-spin--sm { width: 14px; height: 14px; border-width: 2px; }
@keyframes so-spin { to { transform: rotate(360deg); } }
.so-loading { padding: 48px 16px; }
.so-demo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; margin: 0 0 14px; border-radius: var(--r); background: var(--warn-soft); color: var(--ink); font-size: 13px; }
.so-demo > span { flex: 1 1 260px; min-width: 0; }
.so-demo .ic { color: var(--warn); }
.so-tabs { margin-bottom: 14px; }
.so-tabn { font-size: 11px; font-weight: 600; background: var(--surface-2); border: 1px solid var(--line); border-radius: 99px; padding: 0 7px; color: var(--ink-2); }
.so-bar { display: flex; gap: 10px 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin: 0 0 16px; }
.so-accts { display: flex; gap: 6px; flex-wrap: wrap; min-width: 0; }
.so-accts .chip { cursor: pointer; }
.so-accts .chip.so-dim { opacity: .85; }
.so-range { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; min-width: 0; }
.so-range .field, .so-pbar .field, .so-filters .field { margin: 0; }
.so-range select, .so-date input { min-height: 30px; padding: 3px 8px; font-size: 12.5px; }
.so-presets { max-width: 100%; overflow-x: auto; }
.so-rtxt { white-space: nowrap; }
.so-kpis .kpi { align-content: start; }
.so-kpi .label { display: flex; align-items: center; gap: 6px; }
.so-kd { display: block; line-height: 1.35; }
.so-delta { font-size: 12px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.so-delta.ok { color: var(--ok); } .so-delta.bad { color: var(--bad); }
.so-i { display: inline-grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--line-2); font: 600 9px/1 var(--sans); color: var(--muted); text-transform: none; letter-spacing: 0; cursor: help; }
.so-warn-t { color: var(--warn); }
.so-kpis--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.so-card { min-width: 0; }
.so-card .card-h { align-items: flex-start; }
.so-def { margin: 3px 0 0; }
.so-cb { padding: 14px 16px 16px; min-width: 0; }
.so-ov { margin-bottom: 16px; }
.span2-lg { grid-column: 1 / -1; }
.so-chart { width: 100%; min-width: 0; position: relative; }
.so-svg { display: block; overflow: visible; font: 11px var(--sans); font-variant-numeric: tabular-nums; }
.so-svg text { fill: var(--muted); }
.so-ax { font-size: 10.5px; } .so-ax--l { fill: var(--ink-2) !important; font-size: 11.5px; } .so-ax--v { fill: var(--ink) !important; font-weight: 600; font-size: 11.5px; }
.so-grid { stroke: var(--line); stroke-width: 1; } .so-zero { stroke: var(--line-2); }
.so-area { fill-opacity: .22; stroke: none; }
.so-track { fill: var(--surface-2); }
.so-hcell { fill: var(--surface-2); }
.so-col .so-hov { opacity: 0; transition: opacity .1s; } .so-col:hover .so-hov { opacity: 1; }
.so-col:hover > rect:first-child { fill: var(--hatch); }
.so-cross { stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 3 3; }
.so-tip { position: fixed; z-index: 300; pointer-events: none; max-width: 260px; background: var(--charcoal); color: var(--stone); padding: 8px 10px; border-radius: var(--r); font-size: 12px; line-height: 1.45; white-space: pre-line; box-shadow: 0 8px 24px rgba(0,0,0,.25); font-variant-numeric: tabular-nums; }
.so-legend { display: flex; gap: 6px 14px; flex-wrap: wrap; font-size: 12px; color: var(--ink-2); margin: 8px 0 0; }
.so-legend span { display: inline-flex; align-items: center; gap: 6px; }
.so-legend i { width: 12px; height: 3px; border-radius: 2px; background: var(--c); display: inline-block; }
.so-legend i.dash { background: repeating-linear-gradient(90deg, var(--c) 0 4px, transparent 4px 7px); }
.so-legend i.hatch { width: 12px; height: 12px; background: repeating-linear-gradient(45deg, var(--line-2) 0 1.5px, var(--surface-2) 1.5px 4px); }
.so-legend i.ring { width: 12px; height: 12px; border: 2px solid var(--accent); background: none; }
.card-h .so-legend { margin: 2px 0 0; justify-content: flex-end; }
.so-minis { list-style: none; margin: 0; padding: 4px 8px 8px; }
.so-mini { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; text-align: left; padding: 9px 8px; border-radius: var(--r); }
.so-mini:hover, .so-mini:focus-visible { background: var(--surface-2); }
.so-mini-b { min-width: 0; display: block; }
.so-mini-t { display: block; font-size: 13px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.so-top { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 12px; }
.so-pcard { display: grid; text-align: left; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--surface); min-width: 0; transition: border-color .15s; }
.so-pcard:hover, .so-pcard:focus-visible { border-color: var(--ink-2); }
.so-thumb { position: relative; display: block; aspect-ratio: 1; background: var(--sunk); overflow: hidden; }
.so-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.so-pi-wrap { position: absolute; left: 8px; top: 8px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: rgba(243,241,235,.92); color: #20201e; }
.so-type { position: absolute; right: 8px; top: 8px; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 99px; background: rgba(32,32,30,.78); color: #f3f1eb; }
.so-noimg { display: grid; place-items: center; width: 100%; height: 100%; color: var(--muted); background: repeating-linear-gradient(45deg, var(--surface-2) 0 6px, var(--sunk) 6px 12px); }
.so-pcard-b { display: grid; gap: 4px; padding: 10px 12px 12px; min-width: 0; }
.so-cap { font-size: 13px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.35; }
.so-stats { display: flex; gap: 4px 10px; flex-wrap: wrap; font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.so-stats span { display: inline-flex; align-items: center; gap: 3px; } .so-stats .ic { width: 13px; height: 13px; color: var(--muted); }
.so-openb { justify-self: start; font-size: 11.5px; font-weight: 600; color: var(--accent); }
.so-pcard--c .so-cap { -webkit-line-clamp: 1; }
.so-tbl td .muted.sm { display: block; }
.so-tbl--sm td, .so-tbl--sm th { padding: 8px 10px; }
.so-sync li { grid-template-columns: minmax(140px, auto) 1fr; align-items: center; gap: 2px 14px; }
.so-sync .so-warn-t { grid-column: 1 / -1; }
.so-empty { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 48px 16px; }
.so-empty .h3 { margin: 4px 0 0; }
kbd { font: 600 11px/1 var(--sans); padding: 2px 6px; border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 4px; background: var(--surface); color: var(--ink-2); white-space: nowrap; }

/* inbox */
.so-split { display: grid; grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); gap: 14px; height: calc(100vh - var(--bar) - 210px); min-height: 520px; }
.so-list, .so-thread { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.so-filters { padding: 12px 12px 8px; display: grid; gap: 8px; border-bottom: 1px solid var(--line); }
.so-status { width: 100%; } .so-status button { flex: 1; }
.so-search { position: relative; display: block; }
.so-search .ic { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.so-search input { padding-left: 32px; width: 100%; }
.so-fsel { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.so-fsel select { min-height: 30px; padding: 3px 26px 3px 8px; font-size: 12.5px; max-width: 150px; }
.so-bulk { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; padding: 8px 12px; background: var(--surface-2); border-bottom: 1px solid var(--line); font-size: 13px; }
.so-lhead { display: flex; align-items: center; gap: 8px; padding: 8px 12px; font-size: 12.5px; color: var(--ink-2); border-bottom: 1px solid var(--line); }
.so-lhead .so-keys { margin-left: auto; display: inline-flex; gap: 4px; align-items: center; text-decoration: none; color: var(--muted); }
.so-list-in { overflow-y: auto; flex: 1; min-height: 0; overscroll-behavior: contain; }
.so-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; padding: 10px 12px 10px 10px; border-bottom: 1px solid var(--line); border-left: 2px solid transparent; cursor: pointer; text-align: left; }
.so-row.so-pl-instagram { border-left-color: var(--ink-2); } .so-row.so-pl-facebook { border-left-color: var(--muted); } .so-row.so-pl-tiktok { border-left-color: var(--accent-2); }
.so-row:hover { background: var(--surface-2); }
.so-row.on { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--ink); }
.so-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 0; }
.so-chk { padding-top: 1px; } .so-chk input { accent-color: var(--ink); width: 15px; height: 15px; margin: 0; cursor: pointer; }
.so-row-b { min-width: 0; display: grid; gap: 3px; }
.so-row-h { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 13px; }
.so-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.so-row.unread .so-name { font-weight: 700; }
.so-row-chips { display: inline-flex; gap: 4px; align-items: center; min-width: 0; overflow: hidden; }
.so-row-chips .pill, .so-row-chips .chip { font-size: 10.5px; padding: 1px 7px; }
.so-age { margin-left: auto; font-size: 11.5px; color: var(--muted); white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; }
.so-unread { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); display: inline-block; }
.so-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c); flex: none; }
.so-row-t { margin: 0; font-size: 13px; color: var(--ink-2); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.4; overflow-wrap: anywhere; }
.so-gone { font-style: italic; color: var(--muted) !important; }
.so-row-f { display: flex; align-items: center; gap: 6px; min-width: 0; }
.so-rthumb { width: 22px; height: 22px; border-radius: 3px; object-fit: cover; flex: none; }
.so-on { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.so-row-ic { margin-left: auto; display: inline-flex; gap: 5px; align-items: center; color: var(--muted); }
.so-ic-t .ic { width: 14px; height: 14px; } .so-ic-t.ok { color: var(--ok); } .so-ic-t.bad { color: var(--bad); } .so-ic-t.accent { color: var(--accent); }
.so-more { display: flex; justify-content: center; padding: 12px; }
.so-thread { position: relative; }
.so-pick { margin: auto; }
.so-back { display: none; margin: 0 0 8px; }
.so-th-head { padding: 12px 14px 10px; border-bottom: 1px solid var(--line); }
.so-strip { display: flex; gap: 12px; align-items: center; min-width: 0; }
.so-sthumb { width: 56px; height: 56px; border-radius: var(--r); object-fit: cover; flex: none; background: var(--sunk); }
.so-strip-b { display: grid; gap: 3px; min-width: 0; }
.so-strip-b .so-cap { -webkit-line-clamp: 1; }
.so-tools { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; padding: 10px 14px 6px; }
.so-tools .field { margin: 0; } .so-tools select { min-height: 30px; padding: 3px 26px 3px 8px; font-size: 12.5px; }
.so-tagrow { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; padding: 4px 14px 10px; border-bottom: 1px solid var(--line); }
.so-tagrow input { min-height: 26px; padding: 2px 8px; font-size: 12.5px; width: 130px; border-radius: 99px; }
.so-tagc { padding-right: 4px; } .so-tagc button { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; color: var(--muted); } .so-tagc button:hover { background: var(--surface-2); color: var(--ink); } .so-tagc .ic { width: 11px; height: 11px; }
.so-collide { margin: 0; padding: 8px 14px; display: flex; gap: 8px; align-items: center; background: var(--warn-soft); font-size: 12.5px; }
.so-conv-wrap { flex: 1; min-height: 0; overflow-y: auto; padding: 14px; overscroll-behavior: contain; }
.so-conv { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.so-msg { display: flex; gap: 10px; align-items: flex-start; max-width: 88%; }
.so-msg.ours { margin-left: auto; flex-direction: row-reverse; }
.so-msg.top .so-bub { background: var(--surface); border-color: var(--line-2); }
.so-av { width: 32px; height: 32px; font-size: 11px; }
.so-bub { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 9px 12px; background: var(--surface); min-width: 0; }
.so-msg.ours .so-bub { background: var(--surface-2); }
.so-msg.pend .so-bub { border-style: dashed; }
.so-bub p { margin: 4px 0 0; overflow-wrap: anywhere; }
.so-msg-h { display: flex; gap: 6px 8px; align-items: center; flex-wrap: wrap; font-size: 13px; }
.so-msg-h .ic { width: 12px; height: 12px; vertical-align: -2px; }
.so-msg-a { display: flex; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.so-fail { color: var(--bad); }
.so-note { margin-top: 14px; }
.so-note-v { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: start; padding: 10px 12px; background: var(--surface-2); border-radius: var(--r); font-size: 13px; }
.so-note-v p { margin: 2px 0 0; }
.so-note .link { display: inline-flex; gap: 6px; align-items: center; }
.so-composer { border-top: 1px solid var(--line); padding: 10px 14px 12px; background: var(--surface); display: grid; gap: 6px; }
.so-composer textarea { width: 100%; resize: vertical; min-height: 76px; }
.so-composer--off { color: var(--muted); }
.so-composer--off p { margin: 0; }
.so-comp-f { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.so-doneafter { margin: 0; font-size: 12.5px; }
.so-count { margin-left: auto; font-variant-numeric: tabular-nums; } .so-count.bad { color: var(--bad); }
.so-menu { display: grid; gap: 8px; } .so-menu .btn { justify-content: flex-start; }
.so-keys-t td { padding: 7px 10px; }
.so-slist { list-style: none; margin: 0; padding: 4px 16px 12px; display: grid; }
.so-slist li { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--line); }
.so-slist li:last-child { border-bottom: 0; }
.so-slist p { margin: 3px 0 0; }
.so-slist--pick { padding: 0; max-height: 50vh; overflow-y: auto; }
.so-spick { display: grid; gap: 3px; text-align: left; width: 100%; padding: 4px 6px; border-radius: var(--r); }
.so-spick:hover, .so-spick:focus-visible { background: var(--surface-2); }
.so-dl { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 10px; } .so-dl li { display: grid; gap: 4px; justify-items: start; }

/* posts */
.so-pbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0 0 14px; }
.so-pbar .so-search { flex: 1 1 220px; max-width: 320px; }
.so-pbar select { min-height: 34px; }
.so-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.so-tcell { display: flex; gap: 10px; align-items: center; min-width: 220px; max-width: 360px; }
.so-tcell img { width: 40px; height: 40px; object-fit: cover; border-radius: 4px; flex: none; }
.so-cap2 { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 12.5px; line-height: 1.35; }
.so-sort { font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; } .so-sort.on { color: var(--ink); }
.so-drawer .eyebrow { display: flex; gap: 6px; align-items: center; }
.so-media { position: relative; border-radius: var(--r); overflow: hidden; background: var(--sunk); margin: 6px 0 8px; }
.so-media img { width: 100%; max-height: 460px; object-fit: contain; display: block; background: var(--sunk); }
.so-noimg--lg { height: 220px; }
.so-play { position: absolute; left: 12px; bottom: 12px; display: inline-flex; gap: 6px; align-items: center; padding: 7px 12px; border-radius: 99px; background: rgba(32,32,30,.82); color: #f3f1eb; text-decoration: none; font-size: 13px; }
.so-mthumbs { display: flex; gap: 6px; margin: 0 0 10px; } .so-mthumbs button { width: 54px; height: 54px; border-radius: 4px; overflow: hidden; border: 2px solid transparent; } .so-mthumbs button.on { border-color: var(--ink); } .so-mthumbs img { width: 100%; height: 100%; object-fit: cover; }
.so-caption { font-size: 13.5px; line-height: 1.55; overflow-wrap: anywhere; }
.so-hash { margin: 1px 0; }
.so-mtiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin: 14px 0 10px; }
.so-mt { border: 1px solid var(--line); border-radius: var(--r); padding: 9px 11px; display: grid; gap: 2px; } .so-mt b { font: 500 19px/1.2 var(--display); }
.so-rate { padding: 10px 12px; background: var(--surface-2); border-radius: var(--r); display: grid; gap: 6px; }
.so-rates { display: flex; gap: 6px 16px; flex-wrap: wrap; font-size: 13px; } .so-rates b { font-weight: 600; }
.so-reacts { margin: 12px 0 0; display: grid; gap: 6px; }
.so-rbar { display: grid; grid-template-columns: 70px 1fr 50px; gap: 8px; align-items: center; font-size: 12.5px; text-transform: capitalize; }
.so-rtrack { height: 10px; background: var(--surface-2); border-radius: 2px; overflow: hidden; } .so-rtrack i { display: block; height: 100%; background: var(--ink-2); }
.so-rbar b { text-align: right; font-variant-numeric: tabular-nums; }
.so-dh { margin-top: 18px; }

/* reports */
.so-reps { display: grid; gap: 16px; }
.so-sub { margin-top: 18px; }
.so-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; }
.so-two > div { min-width: 0; }
.so-details { margin-top: 14px; } .so-details summary { cursor: pointer; font-weight: 600; font-size: 13px; padding: 6px 0; }
.so-faded { opacity: .55; }
.so-best { margin: 10px 0 4px; }
.so-notes { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 13px; color: var(--ink-2); }
.so-demo-acc + .so-demo-acc { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.so-demo-acc .h4 { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.so-demo-g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; }
.so-demo-g > div { min-width: 0; }
.so-dlab { margin: 0 0 6px; }
.so-print-head, .so-print-foot { display: none; }

/* connections */
.so-provs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
.so-prov { display: flex; flex-direction: column; padding: 16px; gap: 10px; }
.so-prov-h { display: flex; gap: 12px; align-items: flex-start; }
.so-prov-h p { margin: 4px 0 0; }
.so-prov-ic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-2); flex: none; } .so-prov-ic .ic { width: 20px; height: 20px; }
.so-accs { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.so-acc { border: 1px solid var(--line); border-radius: var(--r); padding: 10px; display: grid; gap: 8px; }
.so-acc-h { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.so-acc-av { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: none; }
.so-acc-av--i { display: grid; place-items: center; background: var(--surface-2); }
.so-acc-t { display: grid; min-width: 0; flex: 1 1 140px; }
.so-accd { display: grid; gap: 4px; border-top: 1px solid var(--line); padding-top: 8px; } .so-accd p { margin: 0; } .so-accd .label { margin-bottom: 3px; } .so-accd .chip { margin: 2px 2px 0 0; }
.so-prov-f { display: grid; gap: 8px; justify-items: start; margin-top: auto; }
.so-prov-f p { margin: 0; }
.so-none { margin: 0; }
.so-example { border: 1px dashed var(--line-2); border-radius: var(--r); padding: 8px 10px; } .so-example p { margin: 4px 0 0; }
.so-cgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 16px; align-items: start; margin-bottom: 14px; }
.so-cstack { gap: 16px; }
.so-hrs { margin-bottom: 12px; }
.so-rlist { list-style: none; margin: 0; padding: 4px 16px 12px; }
.so-rlist li { display: flex; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.so-rlist li:last-child { border-bottom: 0; }
.so-rlist li.off .so-rbody { opacity: .55; }
.so-rmove { display: grid; }
.so-rbody { display: grid; gap: 3px; flex: 1; min-width: 0; }
.so-pick { margin-bottom: 16px; }
.so-setup .so-steps { padding-left: 18px; display: grid; gap: 8px; }
.so-setup .copyable { display: inline-flex; max-width: 100%; vertical-align: middle; margin: 2px 0; }
.so-setup code { overflow-wrap: anywhere; }
.so-setup .h4 { display: flex; gap: 8px; align-items: center; margin-top: 18px; }

@media (max-width: 1280px) { .so-provs { grid-template-columns: 1fr 1fr; } }
@media (max-width: 1100px) { .so-kpis--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .so-cgrid { grid-template-columns: 1fr; } }
@media (max-width: 960px) {
  .so-split { grid-template-columns: 1fr; height: auto; min-height: 0; }
  .so-split.has-sel .so-list { display: none; }
  .so-split:not(.has-sel) .so-thread { display: none; }
  .so-list-in { max-height: none; overflow: visible; }
  .so-conv-wrap { overflow: visible; }
  .so-back { display: inline-flex; }
  .so-composer { position: sticky; bottom: 0; z-index: 5; box-shadow: 0 -6px 16px rgba(0,0,0,.06); }
  .so-two, .so-demo-g { grid-template-columns: 1fr; }
  .so-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .so-provs { grid-template-columns: 1fr; }
  .so-kpis--5 { grid-template-columns: 1fr 1fr; }
  .so-bar { align-items: stretch; }
  .so-range { width: 100%; }
  .so-rtxt { white-space: normal; }
  .so-top { grid-template-columns: 1fr; }
  .so-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .so-pcard-b { padding: 8px 9px 10px; }
  .so-msg { max-width: 100%; }
  .so-fsel select { max-width: calc(50vw - 30px); }
  .so-tools .btn--sm { padding: 4px 8px; }
  .so-cb { padding: 12px; }
  .so-sync li { grid-template-columns: 1fr; }
  .so-delta + .muted { display: block; }
}

/* print: Reports as a clean PDF */
@media print {
  @page { margin: 9mm 10mm; }
  html, body { background: #fff !important; }
  .so-printing *, .so-printing { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .side, .mtop, .so-tabs, .so-bar, .phead, .so-demo, #sync, #toasts, #overlay, .live-bar, .sandbox-bar, .so-tip, .btn, .so-details summary::marker { display: none !important; }
  .shell { display: block !important; }
  .main, .page, .so-page { max-width: none !important; width: auto !important; padding: 0 !important; margin: 0 !important; }
  .so-print-head { display: flex !important; gap: 18px; align-items: flex-start; border-bottom: 1px solid #bdb7a7; padding-bottom: 10px; margin-bottom: 14px; }
  .so-print-head p { margin: 2px 0; font-size: 11px; } .so-print-wm .wm { height: 14px; color: #20201e; }
  .so-print-foot { display: block !important; text-align: center; font-size: 10px; color: #6a665c; margin-top: 18px; }
  .so-card, .so-rep { break-inside: auto; page-break-inside: auto; box-shadow: none !important; }
  .kpi, .so-kpis, .so-chart, .table-wrap, .so-legend, .so-demo-acc, .so-two > div, .card-h { break-inside: avoid; page-break-inside: avoid; }
  .card-h { break-after: avoid; page-break-after: avoid; }
  .so-reps { gap: 10px; } .so-cb { padding: 8px 12px 10px; } .so-kpis { margin-bottom: 10px; gap: 8px; } .kpi { padding: 10px 12px; }
  .so-kpis { grid-template-columns: repeat(4, 1fr) !important; }
  .so-two { grid-template-columns: 1fr 1fr !important; }
  .so-details:not([open]) > :not(summary) { display: none; }
  .table-wrap { overflow: visible !important; }
  a { text-decoration: none; }
}
.so-thread .so-back { display: none; }
.field.so-search input { padding-left: 32px; }
.so-tagrow input#so-tag-in { width: 140px; flex: 0 0 140px; }
@media (max-width: 960px) { .so-thread .so-back { display: inline-flex; } }
.so-provs { align-items: start; }

/* socials: review round 2 */
.so-list-in, .so-conv-wrap, .so-row, .so-dot, .so-minis, .so-slist, .so-rlist, .so-card { position: relative; }
.so-row.late { box-shadow: inset 3px 0 0 var(--warn); }
.so-row.late.on { box-shadow: inset 3px 0 0 var(--ink); }
.so-late-t { color: var(--warn); font-weight: 600; }
.so-demo-short { display: none; }
.so-tab-sync { display: none; margin-left: auto; flex: none; }
.so-later { margin-bottom: 14px; }
.so-later .so-notes { padding: 12px 16px 14px 34px; }
@media (max-width: 640px) {
  .so-demo { flex-wrap: nowrap; padding: 8px 10px; gap: 8px; }
  .so-demo-long { display: none; }
  .so-demo-short { display: block; flex: 1 1 auto; font-size: 12.5px; }
  .so-demo .btn { padding: 4px 8px; }
  .so-page .phead { margin-bottom: 10px; }
  .so-page .phead p { font-size: 12.5px; }
  .so-page .phead-act .so-sync-b, .so-page .phead-act .so-conn-b { display: none; }
  .so-tab-sync { display: inline-grid; }
  .so-tabs { align-items: center; }
}
@media print { .so-tab-sync, .so-later { display: none !important; } }
@media (max-width: 640px) { .so-tab-sync { position: sticky; right: 0; background: var(--bg); box-shadow: -10px 0 10px var(--bg); } }
/* socials: final polish */
@media (max-width: 640px) {
  .so-page .phead-act { flex-wrap: wrap; gap: 6px; }
  .so-page .phead-act .so-sync-b { display: inline-flex; padding: 6px 9px; min-height: 34px; }
  .so-page .phead-act .so-sync-b .so-lbl { display: none; }
  .so-page .phead-act .btn:not(.so-sync-b) { padding: 6px 10px; }
  .so-tabs { flex-wrap: wrap; overflow: visible; row-gap: 0; }
  .so-tabs button { padding: 8px 9px; font-size: 13.5px; }
  .so-presets { flex-wrap: wrap; overflow: visible; }
  .so-presets button { flex: 1 0 auto; }
  /* a table wider than the phone shows a soft edge on the side that can still scroll */
  .so-page .table-wrap { background: linear-gradient(to right, var(--surface) 30%, transparent) left center / 28px 100% no-repeat local, linear-gradient(to left, var(--surface) 30%, transparent) right center / 28px 100% no-repeat local, radial-gradient(farthest-side at 0 50%, rgba(32,32,30,.18), transparent) left center / 12px 100% no-repeat scroll, radial-gradient(farthest-side at 100% 50%, rgba(32,32,30,.18), transparent) right center / 12px 100% no-repeat scroll; }
}
@media print {
  .so-hov, .so-cross, .so-tip { display: none !important; }
  .so-col:hover > rect:first-child { fill: transparent !important; }
  .so-keep { break-inside: avoid; page-break-inside: avoid; }
  .so-rep h3, .so-rep .h4, .so-sub, .so-dlab { break-after: avoid; page-break-after: avoid; }
}
@media (max-width: 640px) { .so-page:not(.so-tab-reports) .phead { flex-wrap: nowrap; align-items: flex-start; } .so-page .phead > div:first-child { min-width: 0; } }

/* socials: comments inside a post (round 4) */
.so-pcw { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.so-pch { display: flex; gap: 8px 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin: 0 0 10px; }
.so-pch .h4 { margin: 0; }
.so-pch .seg button.on .muted { color: inherit; opacity: .75; }
.so-pcs { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.so-pc { border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; background: var(--surface); display: grid; gap: 8px; min-width: 0; }
.so-pc.open { border-color: var(--line-2); box-shadow: var(--shadow); }
.so-pc-h { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; }
.so-pc-h .so-av { width: 28px; height: 28px; font-size: 10.5px; }
.so-pc-m { min-width: 0; }
.so-pc-l { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; font-size: 13px; min-width: 0; }
.so-pc-l > b { overflow-wrap: anywhere; }
.so-pc-l .ic { width: 12px; height: 12px; vertical-align: -2px; }
.so-pc-l .pill { font-size: 10.5px; padding: 1px 7px; }
.so-pc-m > p, .so-pr > p { margin: 3px 0 0; font-size: 13.5px; line-height: 1.5; overflow-wrap: anywhere; }
.so-pc-prev { display: grid; gap: 2px; margin-left: 38px; padding: 7px 10px; border: 1px solid transparent; border-radius: var(--r); background: var(--surface-2); text-align: left; font-size: 12.5px; min-width: 0; color: var(--ink-2); }
.so-pc-prev:hover, .so-pc-prev:focus-visible { border-color: var(--line-2); }
.so-pc-n { display: inline-flex; gap: 5px; align-items: center; font-weight: 600; color: var(--ink); }
.so-pc-n .ic { width: 13px; height: 13px; }
.so-pc-pt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.so-pc-a { display: flex; gap: 6px 14px; align-items: center; flex-wrap: wrap; margin-left: 38px; }
.so-pc-a .btn .ic { width: 14px; height: 14px; }
.so-prs { list-style: none; margin: 0 0 0 38px; padding: 0 0 0 12px; border-left: 2px solid var(--line); display: grid; gap: 6px; }
.so-pr { padding: 7px 10px; border-radius: var(--r); min-width: 0; }
.so-pr.ours { background: var(--surface-2); }
.so-pr.pend { border: 1px dashed var(--line-2); }
.so-pc-c { margin-left: 38px; display: grid; gap: 6px; }
.so-pc-c textarea { width: 100%; min-height: 64px; max-height: 260px; resize: vertical; field-sizing: content; font-size: 13.5px; }
.so-pc-c .so-comp-f .check { margin: 0; }
.so-pc-load, .so-pc-off, .so-pc-nor { margin: 0 0 0 38px; }
.so-pc-load { display: flex; gap: 8px; align-items: center; }
.so-pc-off { padding: 8px 10px; background: var(--surface-2); border-radius: var(--r); }
.so-pc-none, .so-pc-more { margin: 4px 0 0; }
/* "Client: Name" / "Lead: Name" next to a commenter we already know */
.so-match { display: inline-flex; gap: 4px; align-items: center; max-width: 100%; min-width: 0; border-color: var(--accent); color: var(--accent); background: var(--surface); font-weight: 600; cursor: pointer; }
.so-match:hover, .so-match:focus-visible { background: var(--accent-soft); border-color: var(--accent); }
.so-match .ic { width: 12px; height: 12px; flex: none; }
.so-match span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.so-row-f .so-match { font-size: 10.5px; padding: 1px 7px; max-width: 200px; flex: none; }
.so-msg-h .so-match { font-size: 11.5px; padding: 1px 8px; }
@media (max-width: 640px) {
  .so-pc { padding: 9px 10px; }
  .so-pc-prev, .so-pc-a, .so-pc-c, .so-pc-load, .so-pc-off, .so-pc-nor { margin-left: 0; }
  .so-prs { margin-left: 4px; padding-left: 10px; }
  .so-pc-c .so-comp-f { gap: 6px 10px; }
  .so-row-f .so-match { max-width: 150px; }
}

/* social profiles on clients and leads (round 4) */
.soc-i { width: 15px; height: 15px; }
.soc-fs { display: grid; gap: 6px; }
.soc-help { margin: 0 0 4px; }
.soc-row { display: grid; grid-template-columns: 116px minmax(0, 1fr) 112px; gap: 8px; align-items: center; }
.soc-row input { min-height: 34px; padding: 6px 9px; font-size: 13px; }
.soc-ch { display: inline-flex; gap: 7px; align-items: center; font-size: 13px; font-weight: 500; color: var(--ink-2); min-width: 0; }
.soc-ch .soc-i { color: var(--muted); }
.soc-det { margin: 0 0 12px; border: 1px solid var(--line); border-radius: var(--r); padding: 0 12px; }
.soc-det > summary { cursor: pointer; display: flex; gap: 6px; align-items: center; padding: 9px 0; font-size: 13px; font-weight: 600; color: var(--ink-2); list-style: none; }
.soc-det > summary::-webkit-details-marker { display: none; }
.soc-det > summary .ic { width: 14px; height: 14px; transition: transform .15s; }
.soc-det[open] > summary .ic { transform: rotate(45deg); }
.soc-det[open] { padding-bottom: 12px; }
.soc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.soc-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; min-width: 0; }
.soc-ic { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; background: var(--surface-2); color: var(--ink-2); }
.soc-ic .soc-i { width: 14px; height: 14px; }
.soc-h { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.soc-h a { color: inherit; }
.soc-f { font-variant-numeric: tabular-nums; font-size: 12.5px; white-space: nowrap; text-align: right; }
.soc-total { display: flex; justify-content: space-between; gap: 10px; margin: 4px 0 0 !important; padding-top: 8px; border-top: 1px solid var(--line); }
.soc-total span { color: var(--muted); }
.soc-total b { font-variant-numeric: tabular-nums; }
.soc-list--c { gap: 5px; }
.soc-list--c .soc-ic { width: 20px; height: 20px; border-radius: 5px; }
.soc-list--c .soc-ic .soc-i { width: 12px; height: 12px; }
.dl > .dl-soc { grid-column: 1 / -1; }
.dl-soc .label .muted { font-weight: 500; text-transform: none; letter-spacing: 0; }
.cl-aud { white-space: nowrap; }
.cl-aud b { font-variant-numeric: tabular-nums; }
.cl-socs { display: flex; gap: 3px; justify-content: flex-end; color: var(--muted); margin-top: 2px; }
.cl-socs .soc-i { width: 12px; height: 12px; }
@media (max-width: 560px) {
  .soc-row { grid-template-columns: 1fr 96px; }
  .soc-row .soc-ch { grid-column: 1 / -1; }
  .soc-row .soc-nof { display: none; }
  .soc-row:has(.soc-nof) input { grid-column: 1 / -1; }
  .cl-tbl th.cl-aud, .cl-tbl td.cl-aud { display: table-cell; }
}
/* a drawer or dialog that repaints (new data, a reply sent) stays put; only opening it slides in */
#overlay.ov-still .ov, #overlay.ov-still .ov-scrim { animation: none; }
/* the booking page's ".done" block must not reach the small "Done" pill */
.pill.done { display: inline-flex; padding: 2px 8px; gap: 4px; text-align: inherit; justify-items: normal; }

/* practice mode bar scrolls away with the page so it never covers the sidebar or the phone top bar */
.sandbox-bar:not(.live-bar) { position: static; }

/* ==== Collective: library (part B) ==== */
.lib-page { max-width: 1480px; }
.lib-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 20px; }
.lib-sub { margin: 6px 0 0; }
.lib-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); overflow-x: auto; max-width: 100%; scrollbar-width: none; }
.lib-tabs button { padding: 9px 14px 10px; font-size: 13.5px; font-weight: 500; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.lib-tabs button:hover { color: var(--ink); }
.lib-tabs button.on { color: var(--ink); border-bottom-color: var(--ink); }
.lib-bar { position: sticky; top: 0; z-index: 6; display: flex; gap: 10px; align-items: center; padding: 12px 0 14px; margin-bottom: 8px; background: var(--bg); }
.lib-search { position: relative; flex: 1 1 360px; display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 14px 0 16px; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-lg); transition: border-color .15s, box-shadow .15s; }
.lib-search:focus-within { border-color: var(--ink-2); box-shadow: 0 0 0 3px var(--hatch); }
.lib-search > .ic { width: 18px; height: 18px; color: var(--muted); }
.lib-search input, .lib-search input[type="search"] { flex: 1; min-width: 0; height: 100%; border: 0 !important; background: none !important; box-shadow: none !important; font-size: 16px; outline: none !important; padding: 0; border-radius: 0; }
.lib-search input::-webkit-search-cancel-button { cursor: pointer; }
.lib-kbd { font: 500 11px/1 var(--sans); color: var(--muted); border: 1px solid var(--line-2); border-radius: 4px; padding: 3px 6px; }
.lib-search:focus-within .lib-kbd { display: none; }
.lib-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line-2); border-top-color: var(--ink-2); animation: libspin .7s linear infinite; flex: none; }
@keyframes libspin { to { transform: rotate(360deg); } }
.lib-sugg { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 20; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 6px; display: grid; }
.lib-sg { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--r); text-align: left; font-size: 14px; }
.lib-sg .ic { color: var(--muted); }
.lib-sg span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-sg em { font-style: normal; font-size: 11.5px; color: var(--muted); }
.lib-sg:hover, .lib-sg.on { background: var(--surface-2); }
.lib-bar .btn { height: 52px; border-radius: var(--r-lg); padding: 0 16px; }
.lib-colour-w { position: relative; }
.lib-colour-b.on { border-color: var(--ink-2); }
.lib-pop { position: absolute; top: calc(100% + 8px); right: 0; z-index: 21; width: 300px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 16px; }
.lib-pop .label { margin-bottom: 10px; }
.lib-palette { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; margin-bottom: 12px; }
.lib-pick { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; margin-bottom: 8px; cursor: pointer; }
.lib-pick input { width: 40px; height: 30px; border: 1px solid var(--line-2); border-radius: var(--r); padding: 2px; background: var(--surface); cursor: pointer; }
.lib-pop .muted { margin: 0 0 6px; }
.lib-sw { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(32,32,30,.18); flex: none; vertical-align: -2px; }
.lib-sw--xs { width: 10px; height: 10px; vertical-align: 0; margin-right: 6px; }
.lib-sw--lg { width: 26px; height: 26px; }
button.lib-sw { cursor: pointer; transition: transform .12s; }
button.lib-sw:hover { transform: scale(1.12); }
button.lib-sw.on, .lib-fam.on .lib-sw { box-shadow: inset 0 0 0 1px rgba(32,32,30,.2), 0 0 0 2px var(--bg), 0 0 0 4px var(--ink); }
.lib-filter-b { display: none !important; }
.lib-body { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 40px; align-items: start; }
.lib-rail { position: sticky; top: 84px; max-height: calc(100vh - 100px); overflow-y: auto; padding: 4px 6px 24px 0; scrollbar-width: thin; }
.lib-fs { padding: 16px 0; border-top: 1px solid var(--line); }
.lib-fs:first-child { border-top: 0; padding-top: 4px; }
.lib-fs .label { margin-bottom: 10px; }
.lib-fs ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.lib-fo { display: flex; align-items: center; gap: 10px; width: 100%; padding: 5px 6px; margin-left: -6px; border-radius: var(--r); font-size: 13.5px; text-align: left; color: var(--ink-2); }
.lib-fo:hover { background: var(--surface-2); color: var(--ink); }
.lib-cb { width: 16px; height: 16px; border: 1px solid var(--line-2); border-radius: 4px; display: grid; place-items: center; flex: none; background: var(--surface); }
.lib-cb .ic { width: 12px; height: 12px; stroke-width: 2.4; }
.lib-fo.on { color: var(--ink); font-weight: 500; }
.lib-fo.on .lib-cb { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.lib-fl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-fn { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.lib-fs .link { margin-top: 6px; }
.lib-fams { display: grid; grid-template-columns: repeat(6, 26px); gap: 10px 9px; }
.lib-fam { display: grid; place-items: center; border-radius: 50%; }
.lib-fs--sw .switch { margin: 0 0 10px; display: flex; }
.lib-fs--sw .switch em { font-style: normal; font-size: 12px; margin-left: auto; }
.lib-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; min-height: 36px; }
.lib-status { margin: 0; font-size: 13.5px; }
.lib-status q { quotes: '\201C' '\201D'; }
.lib-sort select { height: 36px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface); padding: 0 30px 0 10px; font-size: 13px; }
.lib-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 18px; }
.lib-chip .ic { width: 12px; height: 12px; color: var(--muted); }
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); gap: 34px 22px; }
.lib-card { position: relative; min-width: 0; }
.lib-img { position: relative; display: block; width: 100%; aspect-ratio: 1; border-radius: 6px; overflow: hidden; background: color-mix(in srgb, var(--c, var(--surface-2)) 30%, var(--surface-2)); }
.lib-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.lib-card:hover .lib-img img { transform: scale(1.035); }
.lib-noimg { position: absolute; inset: 0; display: grid; place-items: center; font: 400 34px/1 var(--display); letter-spacing: .08em; color: var(--muted); }
.lib-badge { position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 99px; background: rgba(243,241,235,.93); color: #20201e; font-size: 11.5px; font-weight: 500; backdrop-filter: blur(4px); }
.lib-badge .ic { width: 12px; height: 12px; }
.lib-badge--off { left: auto; right: 10px; bottom: auto; top: 10px; background: var(--ink); color: var(--surface); }
.lib-save { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: rgba(243,241,235,.93); color: #20201e; opacity: 0; transform: translateY(-3px); transition: opacity .18s, transform .18s; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.lib-card:hover .lib-save, .lib-save:focus-visible { opacity: 1; transform: none; }
.lib-save:hover { background: #fff; }
@media (hover: none) { .lib-save { opacity: 1; transform: none; } }
.lib-meta { padding-top: 12px; display: grid; gap: 3px; }
.lib-meta p { margin: 0; }
.lib-vendor { font: 600 10.5px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-name { margin: 0; font: 500 14.5px/1.32 var(--sans); }
.lib-name button { text-align: left; }
.lib-name button:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-2); }
.lib-fin { font-size: 12.5px; color: var(--ink-2); display: flex; align-items: center; min-width: 0; }
.lib-fin .lib-sw { margin-right: 7px; }
.lib-fin .muted { margin-left: 4px; white-space: nowrap; }
.lib-fin > :not(.lib-sw):not(.muted) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-price { font-size: 13px; margin-top: 2px !important; font-variant-numeric: tabular-nums; }
.lib-price b { font-weight: 600; }
.lib-price .lib-u { color: var(--muted); font-size: 12px; margin-right: 5px; }
.lib-card--off .lib-img img { filter: grayscale(.7); opacity: .75; }
.lib-card--skel .lib-img { background: var(--surface-2); animation: libpulse 1.2s ease-in-out infinite alternate; }
.lib-card--skel .lib-meta i { display: block; height: 10px; border-radius: 4px; background: var(--surface-2); margin-top: 6px; width: 70%; }
.lib-card--skel .lib-meta i:first-child { width: 40%; }
@keyframes libpulse { to { opacity: .55; } }
.lib-skel { display: grid; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); gap: 34px 22px; margin-top: 80px; }
.lib-more { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 40px 0 10px; }
.lib-empty { padding: 56px 24px; }
/* product drawer */
.ov--drawer.lib-dr { width: min(780px, 100%); }
.lib-dr .ov-body { padding: 0; }
.lib-d-hero { position: relative; height: min(58vh, 560px); background: #e7e3db; overflow: hidden; display: grid; place-items: center; }
.lib-d-hero img { width: 100%; height: 100%; object-fit: contain; display: block; }
.lib-d-hero.lib-card--skel { animation: libpulse 1.2s ease-in-out infinite alternate; }
.lib-d-thumbs { display: flex; gap: 8px; padding: 12px 28px 0; overflow-x: auto; }
.lib-d-thumbs button { width: 64px; height: 64px; border-radius: 4px; overflow: hidden; flex: none; opacity: .7; outline: 1px solid var(--line); }
.lib-d-thumbs button.on { opacity: 1; outline: 2px solid var(--ink); }
.lib-d-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.lib-d-main { padding: 22px 28px 40px; }
.lib-d > .h2, .lib-d > .muted { padding: 24px 28px 0; }
.lib-d-name { font-size: 26px; line-height: 1.2; margin: 2px 0 8px; padding-right: 0; }
.lib-vlink { font: inherit; letter-spacing: inherit; color: inherit; text-decoration: none; }
.lib-vlink:hover { text-decoration: underline; }
.lib-d-fin { display: flex; align-items: center; gap: 6px; margin: 0 0 16px; color: var(--ink-2); }
.lib-d-fin span:last-child { margin-left: 4px; }
.lib-prices { display: flex; gap: 28px; flex-wrap: wrap; margin: 0 0 18px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.lib-prices div { display: grid; gap: 2px; }
.lib-prices dt { font: 600 10.5px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.lib-prices dd { margin: 0; font: 500 22px/1.2 var(--display); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.lib-prices dd span { font: 400 12.5px var(--sans); color: var(--muted); margin-left: 4px; letter-spacing: 0; }
.lib-noprice { padding: 12px 14px; background: var(--surface-2); border-radius: var(--r); }
.lib-d-acts { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 4px 0 12px; }
.lib-addb { position: relative; }
.lib-pop--b { left: 0; right: auto; width: 300px; padding: 8px; display: grid; gap: 2px; }
.lib-bo { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r); text-align: left; font-size: 13.5px; }
.lib-bo:hover { background: var(--surface-2); }
.lib-bo span { flex: 1; } .lib-bo em { font-style: normal; color: var(--muted); font-size: 12px; }
.lib-bo.on .ic { color: var(--ok); }
.lib-newb { display: flex; gap: 6px; padding: 8px 2px 2px; border-top: 1px solid var(--line); margin-top: 4px; }
.lib-newb input { flex: 1; min-width: 0; height: 34px; border: 1px solid var(--line-2); border-radius: var(--r); padding: 0 10px; background: var(--surface); }
.lib-newb--top { border: 0; padding: 0; margin: 0; }
.lib-newb--top input { height: 36px; min-width: 200px; }
.lib-code { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 10px; border: 1px dashed var(--line-2); border-radius: var(--r); }
.lib-code span { display: grid; line-height: 1.2; } .lib-code b { font-size: 13px; letter-spacing: .04em; } .lib-code em { font-style: normal; font-size: 11px; color: var(--muted); }
.lib-d-desc { font-size: 14.5px; line-height: 1.6; color: var(--ink-2); margin: 16px 0; max-width: 62ch; }
.lib-specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; margin: 18px 0; }
.lib-specs div { display: grid; grid-template-columns: 110px 1fr; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.lib-specs dt { color: var(--muted); } .lib-specs dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.lib-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 22px; }
.lib-d-v, .lib-d-mgr { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.lib-d-v .label, .lib-d-mgr .label { margin-bottom: 12px; }
.lib-vrow { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.lib-vrow div { display: grid; }
.lib-vlogo { width: 40px; height: 40px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--line); display: grid; place-items: center; font: 500 14px/1 var(--display); letter-spacing: .06em; color: var(--ink-2); overflow: hidden; flex: none; }
.lib-vlogo img { width: 100%; height: 100%; object-fit: contain; }
.lib-vlogo--lg { width: 56px; height: 56px; font-size: 18px; }
.lib-vlogo--xl { width: 84px; height: 84px; font-size: 26px; border-radius: 12px; }
.lib-rep { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.lib-d-mgr { background: var(--surface-2); margin: 26px -28px -40px; padding: 18px 28px 32px; }
.lib-up-b { cursor: pointer; }
.lib-hist { width: 100%; border-collapse: collapse; font-size: 13px; margin: 8px 0 12px; }
.lib-hist th, .lib-hist td { text-align: left; padding: 7px 6px; border-bottom: 1px solid var(--line); }
.lib-hist th { font-size: 11px; color: var(--muted); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.lib-hist .num { text-align: right; }
.lib-up { color: var(--bad); } .lib-down { color: var(--ok); }
/* edit forms */
.lib-ed-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.lib-ed-grid .span2 { grid-column: 1 / -1; }
.lib-ed-grid input, .lib-ed-grid select, .lib-ed-grid textarea, .lib-map select, .lib-cattab input, .lib-syn-add input { width: 100%; }
/* boards */
.lib-sec-head { margin: 4px 0 18px; gap: 12px; }
.lib-sec-head > p { margin: 0; }
.lib-h { margin: 26px 0 14px; }
.lib-bgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 28px 22px; }
.lib-bcov { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 3px; width: 100%; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: var(--surface-2); }
.lib-bcov img, .lib-bcov span { width: 100%; height: 100%; object-fit: cover; display: block; background: var(--surface-2); transition: transform .5s; }
.lib-bcard:hover .lib-bcov img { transform: scale(1.03); }
.lib-bmeta { padding-top: 12px; }
.lib-bmeta .h3 { font-size: 15px; font-weight: 500; }
.lib-bmeta p { margin: 4px 0 0; }
.lib-back { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 14px; text-decoration: none; }
.lib-bhead { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 26px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.lib-bhead-t { flex: 1 1 420px; display: grid; gap: 6px; }
.lib-bname { font: 500 26px/1.2 var(--display); letter-spacing: .04em; border: 1px solid transparent; background: none; padding: 4px 8px; margin-left: -8px; border-radius: var(--r); }
.lib-bname:hover, .lib-bname:focus { border-color: var(--line-2); background: var(--surface); outline: none; }
.lib-bnotes { border: 1px solid transparent; background: none; padding: 6px 8px; margin-left: -8px; border-radius: var(--r); resize: vertical; color: var(--ink-2); font-size: 14px; max-width: 70ch; }
.lib-bnotes:hover, .lib-bnotes:focus { border-color: var(--line-2); background: var(--surface); outline: none; }
.lib-bhead-a { display: grid; gap: 10px; align-content: start; justify-items: end; }
.lib-bhead-a .switch { margin: 0; }
.lib-bshare select { height: 34px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface); padding: 0 8px; max-width: 260px; }
.lib-bitem { display: grid; gap: 8px; align-content: start; }
.lib-bnote { display: flex; gap: 4px; align-items: flex-start; }
.lib-bnote textarea { flex: 1; min-width: 0; font-size: 12.5px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); padding: 6px 8px; resize: vertical; }
/* vendors */
.lib-vgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; }
.lib-vcard { display: flex; align-items: center; gap: 16px; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); text-align: left; transition: border-color .15s, transform .15s; }
.lib-vcard:hover { border-color: var(--ink-2); transform: translateY(-1px); }
.lib-vtxt { display: grid; gap: 1px; min-width: 0; }
.lib-vtxt b { font-weight: 500; font-size: 15px; }
.lib-vhead { display: flex; gap: 22px; align-items: flex-start; margin-bottom: 24px; flex-wrap: wrap; }
.lib-vhead > div { flex: 1 1 360px; display: grid; gap: 8px; }
.lib-vhead p { margin: 0; max-width: 70ch; }
.lib-vinfo { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px 24px; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.lib-vinfo > div { display: grid; gap: 4px; font-size: 13.5px; }
.lib-implist { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.lib-implist li { display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--line); }
/* settings */
.lib-settings, .lib-import { display: grid; gap: 18px; max-width: 980px; }
.lib-set > .h3 { margin-bottom: 6px; }
.lib-set > .muted { margin: 0 0 14px; max-width: 75ch; }
.lib-mk { gap: 16px; align-items: flex-end; }
.lib-mk-ex { margin: 0 0 18px; }
.lib-cattab { border-collapse: collapse; width: 100%; max-width: 560px; margin: 4px 0 12px; font-size: 13.5px; }
.lib-cattab th { text-align: left; font-size: 11px; color: var(--muted); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 6px 8px; }
.lib-cattab td { padding: 4px 8px; border-top: 1px solid var(--line); }
.lib-cattab input { height: 32px; border: 1px solid var(--line-2); border-radius: var(--r); padding: 0 8px; background: var(--surface); max-width: 110px; }
.lib-syn-add { display: grid; grid-template-columns: 1fr 2fr auto; gap: 8px; margin-bottom: 14px; }
.lib-syn-add input { height: 36px; border: 1px solid var(--line-2); border-radius: var(--r); padding: 0 10px; background: var(--surface); }
.lib-syn { display: grid; max-height: 420px; overflow-y: auto; border-top: 1px solid var(--line); }
.lib-syn-r { display: grid; grid-template-columns: 150px 1fr auto; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line); }
.lib-syn-t { text-align: left; font-weight: 500; }
.lib-syn-x { display: flex; flex-wrap: wrap; gap: 4px; }
.lib-syn-x .chip { padding: 2px 8px; font-size: 12px; }
/* import */
.lib-steps { display: flex; gap: 6px; list-style: none; padding: 0; margin: 10px 0 20px; counter-reset: st; flex-wrap: wrap; }
.lib-steps li { counter-increment: st; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); padding-right: 14px; }
.lib-steps li::before { content: counter(st); width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; font-size: 11.5px; }
.lib-steps li.on { color: var(--ink); font-weight: 500; } .lib-steps li.on::before { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.lib-steps li.done::before { content: '\2713'; background: var(--ok-soft); border-color: transparent; color: var(--ok); }
.lib-drop { display: grid; justify-items: center; gap: 8px; text-align: center; padding: 38px 20px; border: 1.5px dashed var(--line-2); border-radius: var(--r-lg); background: var(--surface-2); cursor: pointer; transition: border-color .15s, background .15s; }
.lib-drop:hover, .lib-drop.over { border-color: var(--ink-2); background: var(--surface); }
.lib-drop.busy { cursor: progress; opacity: .8; }
.lib-drop--sm { padding: 24px 16px; }
.lib-map { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0 16px; margin: 12px 0 4px; }
.lib-map select { height: 36px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface); padding: 0 8px; }
.lib-tblw { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); margin: 12px 0 16px; max-height: 420px; }
.lib-prev { border-collapse: collapse; width: 100%; font-size: 12.5px; }
.lib-prev th, .lib-prev td { padding: 7px 10px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.lib-prev th { position: sticky; top: 0; background: var(--surface-2); font-weight: 600; }
.lib-prev .num { text-align: right; font-variant-numeric: tabular-nums; }
.lib-sum { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.lib-sumi { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); text-align: left; }
.lib-sumi b { font: 500 24px/1.1 var(--display); }
.lib-sumi span { font-size: 12px; color: var(--muted); }
.lib-sumi.on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.lib-sumi--x { background: transparent; }
.lib-ziplog { list-style: none; margin: 12px 0 0; padding: 0; font-size: 12.5px; display: grid; gap: 3px; max-height: 220px; overflow-y: auto; }
.lib-ziplog li.bad { color: var(--bad); }
.lib-railov .h2 { margin-bottom: 14px; }
.lib-railov .lib-fs:first-of-type { border-top: 0; }
.lib-railov-b { position: sticky; bottom: -24px; background: var(--surface); padding: 14px 0; border-top: 1px solid var(--line); margin-top: 8px; }
.lg-only { display: inline; }
@media (max-width: 1100px) { .lib-body { grid-template-columns: 200px minmax(0, 1fr); gap: 28px; } .lib-grid, .lib-skel { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } }
@media (max-width: 900px) {
  .lib-body { grid-template-columns: minmax(0, 1fr); }
  .lib-rail { display: none; }
  .lib-filter-b { display: inline-flex !important; }
  .lib-kbd { display: none; }
  .lib-bar { flex-wrap: wrap; position: static; }
  .lib-search { flex: 1 1 100%; }
  .lib-bar .btn { height: 42px; flex: 1 1 0; }
  .lib-pop { right: auto; left: 0; }
  .lib-specs { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .lib-head { margin-bottom: 8px; }
  .lib-grid, .lib-skel { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
  .lib-name { font-size: 13.5px; }
  .lib-price span.muted:not(:first-of-type) { display: none; }
  .lg-only { display: none; }
  .lib-bar .btn { padding: 0 10px; }
  .lib-d-main { padding: 18px 16px 32px; }
  .lib-d-thumbs { padding: 10px 16px 0; }
  .lib-d-mgr { margin: 22px -16px -32px; padding: 16px 16px 28px; }
  .lib-d-name { font-size: 22px; }
  .lib-prices { gap: 20px; } .lib-prices dd { font-size: 19px; }
  .lib-ed-grid, .lib-syn-add { grid-template-columns: minmax(0, 1fr); }
  .lib-syn-r { grid-template-columns: 1fr auto; } .lib-syn-x { grid-column: 1 / -1; grid-row: 2; }
  .lib-sum { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lib-bgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
  .lib-bhead-a { justify-items: start; }
  .lib-newb--top { width: 100%; } .lib-newb--top input { min-width: 0; }
  .lib-pop { width: min(300px, calc(100vw - 32px)); }
  .lib-specs div { grid-template-columns: 96px 1fr; }
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lib-sw { box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); } }
/* ==== end Collective part B ==== */

/* ==== FR: a button that is working (9-live.js EWB) ==== */
.btn.ewb-busy, button.ewb-busy { cursor: progress; }
.btn.ewb-busy[disabled], button.ewb-busy[disabled] { opacity: 1; }
.btn--primary.ewb-busy[disabled] { opacity: .92; }
/* ==== Collective: foundations (part A) ==== */
/* hub shell */
.hub-top { gap: 8px; }
.hub-logo { display: block; max-width: 168px; max-height: 56px; width: auto; height: auto; object-fit: contain; object-position: left center; }
.hub-logo--sm { max-height: 28px; max-width: 120px; }
.hub-poweredby { margin: 10px 4px 0; opacity: .7; } .hub-poweredby .wm { height: 9px; }
.hub-viewas { position: sticky; top: 0; z-index: 30; }
.hub-viewas + .shell .side { top: 44px; height: calc(100vh - 44px); }
.hub-errbar { padding-bottom: 0; }
.hub-sent { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: var(--r); background: var(--ok-soft); color: var(--ink); margin: 0 0 12px; }
.hub-sent p { margin: 2px 0 0; }
.hub-login .fine a { color: inherit; text-decoration: underline; }
.hub-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.hub-card .pad, .card .pad { padding: 14px 16px; margin: 0; }
/* getting started */
.hub-onb { margin-bottom: 18px; }
.hub-steps { list-style: none; margin: 0; padding: 4px 16px 8px; }
.hub-steps li { display: grid; grid-template-columns: 26px 1fr auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.hub-steps li:last-child { border-bottom: 0; }
.hub-steps li > div { display: grid; gap: 2px; min-width: 0; }
.hub-steps li.is-done b { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line-2); }
.hub-ck { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--line-2); display: grid; place-items: center; font-size: 12px; font-weight: 600; color: var(--muted); }
.hub-steps li.is-done .hub-ck, .hub-track li.is-done .hub-ck { background: var(--ok); border-color: var(--ok); color: var(--surface); }
.hub-ck .ic { width: 14px; height: 14px; }
.hub-ring { --p: 0; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--accent) calc(var(--p) * 1%), var(--line) 0); flex: none; }
.hub-ring b { width: 36px; height: 36px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; font-size: 12px; }
.hub-pc { padding: 14px 16px; margin-bottom: 18px; display: grid; gap: 10px; }
.hub-bar { height: 6px; border-radius: 99px; background: var(--line); overflow: hidden; } .hub-bar i { display: block; height: 100%; background: var(--accent); }
/* applicant */
.hub-track { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0; padding: 18px 16px 6px; }
.hub-track li { display: grid; justify-items: center; gap: 8px; text-align: center; font-size: 12.5px; color: var(--muted); position: relative; }
.hub-track li::before { content: ""; position: absolute; top: 12px; left: calc(-50% + 16px); right: calc(50% + 16px); height: 1.5px; background: var(--line-2); }
.hub-track li:first-child::before { display: none; }
.hub-track li.is-on { color: var(--ink); font-weight: 600; } .hub-track li.is-on .hub-ck { border-color: var(--accent); color: var(--accent); }
.hub-app .card > p { padding: 0 16px; } .hub-app-msg { font-size: 15px; line-height: 1.55; margin: 10px 0 12px; }
.hub-app .card > p.muted { padding-bottom: 16px; }
/* profile */
.hub-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.hub-logo-card { margin-bottom: 18px; }
.hub-logo-ed { display: grid; grid-template-columns: minmax(0, 260px) 1fr; gap: 24px; padding: 16px; align-items: start; }
.hub-logo-pv { display: grid; gap: 8px; }
.hub-pv-side { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px 12px; display: grid; gap: 2px; box-shadow: 0 1px 0 var(--line); }
.hub-pv-top { display: grid; gap: 6px; padding: 2px 8px 14px; }
.hub-pv-empty { display: grid; place-items: center; height: 44px; border: 1.5px dashed var(--line-2); border-radius: var(--r); color: var(--muted); font-size: 12px; }
.hub-pv-i { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: var(--r); font-size: 13px; color: var(--muted); }
.hub-pv-i.on { background: var(--surface-2); color: var(--ink); }
.hub-pv-i .ic { width: 16px; height: 16px; }
.hub-logo-up { display: grid; gap: 10px; align-content: start; justify-items: start; }
.hub-file { position: relative; cursor: pointer; }
.hub-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.hub-file:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.form-card { padding: 16px; display: grid; gap: 4px; margin-bottom: 18px; }
.hub-profile .form-card .h3 { margin: 0 0 8px; }
.field .form-err { margin: 4px 0 0; font-size: 12.5px; }
/* terms */
.terms-doc { padding: 20px 24px; max-width: 760px; line-height: 1.6; }
.terms-doc h3 { font: 600 15px/1.3 var(--sans); margin: 22px 0 6px; }
.terms-doc p:first-child { padding: 10px 12px; background: var(--warn-soft); color: var(--warn); border-radius: var(--r); font-size: 13px; }
.terms-doc ul { margin: 6px 0; padding-left: 20px; } .terms-doc li { margin: 4px 0; }
.hub-accept { padding: 14px 16px; max-width: 760px; margin-top: 14px; gap: 12px; }

/* staff: menus, overview, applications, members */
.side-viewas { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 10px; padding: 7px 8px; border-radius: var(--r); font-size: 13px; color: var(--ink-2); border: 1px dashed var(--line-2); }
.side-viewas:hover { background: var(--surface-2); color: var(--ink); }
.side-viewas .ic { width: 16px; height: 16px; }
.ovp-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin-bottom: 12px; }
.ovp { padding: 14px 16px; display: grid; gap: 4px; justify-items: start; }
.cx-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.cx-tabs .chip.on { background: var(--btn); color: var(--on-btn); border-color: var(--btn); }
.cx-tabs .chip b { font-weight: 600; opacity: .8; }
.cx-tbl td { vertical-align: middle; }
.cx-logo { width: 34px; height: 34px; border-radius: 8px; object-fit: contain; background: var(--surface-2); border: 1px solid var(--line); flex: none; }
.cx-logo--mono { display: inline-grid; place-items: center; font: 600 12px/1 var(--sans); color: var(--muted); }
.cx-logo--lg { width: 72px; height: 72px; border-radius: 14px; font-size: 18px; }
.cx-p-head { display: flex; gap: 14px; align-items: center; margin-bottom: 8px; } .cx-p-head .h2 { margin: 0 0 6px; padding-right: 40px; }
.cx-dr .act-row { margin: 14px 0 4px; }
.cx-review-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.cx-scores { display: flex; flex-wrap: wrap; gap: 14px; margin: 4px 0 12px; }
.cx-score { display: grid; gap: 6px; }
.cx-meet { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.cx-meet p { margin: 0; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.cx-quote { margin: 8px 0 12px; padding: 10px 14px; border-left: 3px solid var(--accent-soft); background: var(--surface-2); border-radius: 0 var(--r) var(--r) 0; font-size: 14px; line-height: 1.55; white-space: pre-wrap; }
.cx-files { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.cx-file { display: grid; gap: 4px; color: inherit; text-decoration: none; }
.cx-file img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface-2); }
.cx-file--doc { aspect-ratio: 4 / 3; place-items: center; align-content: center; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); padding: 8px; text-align: center; }
.cx-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.cx-notes { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.cx-notes li { padding: 10px 12px; background: var(--surface-2); border-radius: var(--r); } .cx-notes p { margin: 4px 0 0; white-space: pre-wrap; }
.cx-onb { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }
.cx-onb li { display: flex; gap: 8px; align-items: center; } .cx-onb li.is-done { color: var(--muted); } .cx-onb .ic { width: 16px; height: 16px; color: var(--ok); }
.cx-dot { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--line-2); margin: 0 3px; }
.cx-pricing { margin-bottom: 14px; } .cx-pricing-b { padding: 14px 16px 4px; display: grid; }
.cx-sw-cell .switch { margin: 0; }
.cx-va { list-style: none; margin: 10px 0; padding: 0; display: grid; gap: 8px; }
.cx-va-i { display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: var(--r); }
.cx-va-i > div { display: grid; gap: 2px; min-width: 0; }
.cx-va-more summary { cursor: pointer; font-size: 13px; color: var(--muted); margin: 6px 0; }
.cx-mail-i { display: grid; gap: 3px; text-align: left; }
.cx-mail-pv { display: grid; grid-template-rows: auto 1fr; min-height: 560px; overflow: hidden; }
.cx-mail-h { padding: 12px 16px; border-bottom: 1px solid var(--line); display: grid; gap: 2px; }
.cx-mail-frame { width: 100%; height: 100%; min-height: 520px; border: 0; background: #e6e3da; }
.cx-mail { grid-template-columns: minmax(0, 320px) 1fr; }
@media (max-width: 900px) {
  .cx-mail { grid-template-columns: 1fr; }
  .hub-logo-ed { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .hub-grid2, .cx-review-grid { grid-template-columns: 1fr; }
  .hub-track { grid-template-columns: repeat(2, 1fr); row-gap: 16px; } .hub-track li::before { display: none; }
  .hub-steps li { grid-template-columns: 26px 1fr; } .hub-steps li > .btn, .hub-steps li > .pill { grid-column: 2; justify-self: start; }
  .cx-va-i { grid-template-columns: 34px 1fr; } .cx-va-i > .row { grid-column: 1 / -1; }
  .terms-doc { padding: 16px; }
}
.who .pill { align-self: flex-start; width: max-content; }
.cx-mail-pv .cx-mail-h { min-width: 0; }
@media (max-width: 640px) {
  .cx-tbl--apps th:nth-child(n+2):nth-child(-n+7), .cx-tbl--apps td:nth-child(n+2):nth-child(-n+7) { display: none; }
  .cx-tbl--mem th:nth-child(2), .cx-tbl--mem td:nth-child(2), .cx-tbl--mem th:nth-child(4), .cx-tbl--mem td:nth-child(4), .cx-tbl--mem th:nth-child(5), .cx-tbl--mem td:nth-child(5) { display: none; }
}
/* ==== end Collective part A ==== */
/* ==== Collective: bookings and briefs (part C) ==== */
.modal-in { display: grid; gap: 12px; }
.modal-in .h2 { margin: 0; }
.note--warn { background: var(--warn-soft); color: var(--ink); }
.cxs-note { margin: 0 0 14px; align-items: flex-start; }
.cxs-note .ic { margin-top: 2px; }

/* logos and monograms */
.cxs-logo { width: 28px; height: 28px; border-radius: 6px; object-fit: contain; background: var(--surface); border: 1px solid var(--line); flex: none; display: inline-grid; place-items: center; }
.cxs-logo--mono { font: 600 10.5px/1 var(--sans); letter-spacing: .04em; color: var(--surface); background: #2f4a3a; border-color: transparent; }
.cxs-logo--xs { width: 18px; height: 18px; border-radius: 4px; font-size: 8px; vertical-align: -4px; margin-right: 4px; }
.cxs-logo--lg { width: 52px; height: 52px; border-radius: 10px; font-size: 15px; padding: 4px; }

/* hub: bookings */
.cxs-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.cxs-side { display: grid; gap: 16px; }
.cxs-body { padding: 4px 16px 16px; display: grid; gap: 16px; }
.cxs-step { display: grid; gap: 8px; }
.cxs-days { display: grid; grid-auto-flow: column; grid-auto-columns: 74px; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.cxs-day { display: grid; justify-items: center; gap: 1px; padding: 8px 4px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.cxs-day span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.cxs-day b { font: 500 20px/1.1 var(--display); }
.cxs-day em { font-style: normal; font-size: 11px; color: var(--ok); }
.cxs-day.is-off { opacity: .5; } .cxs-day.is-off em { color: var(--muted); }
.cxs-day.on { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.cxs-times { display: flex; flex-wrap: wrap; gap: 6px; }
.cxs-time { min-width: 84px; justify-content: center; }
.cxs-time.on { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.cxs-form { display: grid; gap: 10px; border-top: 1px solid var(--line); padding-top: 14px; }
.cxs-form .h4 { margin: 4px 0 0; }
.cxs-pull { border: 0; padding: 0; margin: 0; }
.cxs-pull legend { font-size: 12.5px; color: var(--ink-2); margin-bottom: 6px; padding: 0; }
.cxs-checks { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.cxs-screen { align-self: end; padding-bottom: 10px; }
.cxs-orient { padding: 10px 12px; border-radius: var(--r); background: var(--accent-soft); }
.cxs-list { list-style: none; margin: 0; padding: 0 16px; }
.cxs-row { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.cxs-row:last-child { border-bottom: 0; }
.cxs-row.is-past { opacity: .75; }
.cxs-date { display: grid; justify-items: center; align-content: start; padding: 6px 0; border-radius: var(--r); background: var(--surface-2); }
.cxs-date b { font: 500 18px/1 var(--display); } .cxs-date span { font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.cxs-main { display: grid; gap: 4px; min-width: 0; }
.cxs-main .row { gap: 6px; }
.cxs-acts { margin-top: 6px; gap: 6px; }
.cxs-rules { padding: 0 4px; margin: 0; }
.cxs-next p { margin: 0 0 6px; } .cxs-next-d { font: 500 17px/1.2 var(--display); letter-spacing: .03em; }

/* staff: calendar layer, drawer, settings */
.cal-ev--cx { box-shadow: inset 3px 0 0 var(--c); }
.cal-ev--cx .ev-t { display: flex; align-items: center; gap: 2px; white-space: nowrap; overflow: hidden; }
.cal-ev--cx .ev-t .ic { width: 11px; height: 11px; }
.cal-ev--cx.st-requested { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--c) 14%, var(--surface)) 0 6px, var(--surface) 6px 12px); }
.cal-ev--cx.is-in { box-shadow: inset 3px 0 0 var(--ok); }
.cal-ev--cx.st-cancelled, .cal-ev--cx.st-declined { opacity: .5; background: var(--surface); }
.cal-dh--cx b { color: #2f4a3a; }
.cxs-dr-head { display: flex; gap: 14px; align-items: center; }
.cxs-dr-head .h2 { margin: 0; }
.cxs-set-g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.cxs-nw .cxs-times { max-height: 180px; overflow-y: auto; }

/* briefs: list */
.br-filters { display: grid; gap: 10px; margin-bottom: 12px; }
.br-filters .tabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
.br-search { min-width: 220px; flex: 1; }
.br-filters select, .br-filters input { min-height: 36px; padding: 6px 10px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface); }
.br-who { display: flex; gap: 8px; align-items: center; } .br-who > span { display: grid; }
.br-late { color: var(--bad); font-weight: 600; }

/* briefs: builder */
.br-page { padding-bottom: 60px; }
.br-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.br-head { margin-bottom: 12px; }
.br-head-t { display: flex; gap: 14px; align-items: flex-start; }
.br-head-t > div { display: grid; gap: 6px; min-width: 0; flex: 1; }
.br-head .eyebrow { margin: 0; }
.br-title-in { font: 500 26px/1.15 var(--display); letter-spacing: .05em; text-transform: uppercase; border: 1px solid transparent; background: transparent; padding: 2px 6px; margin-left: -7px; border-radius: var(--r); width: 100%; max-width: 760px; }
.br-title-in:hover { border-color: var(--line); } .br-title-in:focus { border-color: var(--ink-2); background: var(--surface); outline: none; }
.br-title { margin: 0; }
.br-next { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); margin-bottom: 14px; }
.br-next p { margin: 2px 0 0; color: var(--ink-2); }
.br-next .ic { margin-top: 2px; color: var(--accent); }
.br-next--changes { background: var(--bad-soft); border-color: transparent; }
.br-next--approved, .br-next--ready { background: var(--ok-soft); border-color: transparent; } .br-next--approved .ic, .br-next--ready .ic { color: var(--ok); }
.br-next--submitted { background: var(--warn-soft); border-color: transparent; }
.br-snotes { margin: 8px 0 0; padding-left: 18px; }
.br-review { margin-bottom: 14px; border-color: var(--ink-2); }
.br-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.br-main, .br-side { display: grid; gap: 16px; min-width: 0; }
.br-side { position: sticky; top: 16px; }
.br-pad { padding: 4px 16px 16px; display: grid; gap: 12px; }
.br-pad-x { padding: 0 16px; }
.br-ro { font-weight: 500; display: block; padding: 6px 0; }
.br-client { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: flex-start; }
.br-client > div:first-child { display: grid; gap: 2px; }
.br-client select { min-height: 32px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface); padding: 4px 8px; max-width: 220px; }
.br-cf { display: grid; gap: 6px; padding: 12px; border-radius: var(--r); background: var(--surface-2); }
.br-tabs-row { display: flex; align-items: flex-end; gap: 8px; padding: 6px 12px 0; border-bottom: 1px solid var(--line); }
.br-tabs { border-bottom: 0; flex: 1; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
.br-tabs-row > .btn { margin-bottom: 6px; }
.br-room-ed { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto; gap: 10px; align-items: end; padding-top: 10px; }
.br-room-a { gap: 2px; padding-bottom: 6px; }
.br-items { display: grid; gap: 10px; }
.br-empty { padding: 18px; text-align: center; border: 1px dashed var(--line-2); border-radius: var(--r); }
.br-item { display: grid; grid-template-columns: auto 96px minmax(0, 1fr); gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.br-item--ro { grid-template-columns: 96px minmax(0, 1fr); }
.br-item.is-off { opacity: .7; }
.br-item.is-chosen { border-color: var(--ok); box-shadow: 0 0 0 1px var(--ok); }
.br-selck { padding-top: 4px; }
.br-thumb { width: 96px; height: 96px; border-radius: var(--r); overflow: hidden; background: var(--c, var(--sunk)); position: relative; display: grid; place-items: center; }
.br-thumb img { width: 100%; height: 100%; object-fit: cover; }
.br-noimg { font: 500 20px var(--display); color: rgba(255,255,255,.85); }
.br-noimg .ic { width: 28px; height: 28px; color: var(--ink-2); }
.br-opt { position: absolute; left: 6px; top: 6px; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: var(--surface); display: grid; place-items: center; font: 600 12px var(--sans); }
.br-ibody { display: grid; gap: 8px; min-width: 0; }
.br-ihead { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.br-ihead .lib-vendor { margin: 0; }
.br-iname { font: 600 14.5px/1.3 var(--sans); margin: 0; } .br-iname .link { text-align: left; font-weight: 600; }
.br-iname-in { font: 600 14.5px/1.3 var(--sans); border: 1px solid var(--line); border-radius: var(--r); padding: 4px 8px; width: 100%; background: var(--surface); }
.br-ihead p { margin: 2px 0 0; }
.br-iside { display: grid; justify-items: end; gap: 4px; text-align: right; flex: none; }
.br-price { font-size: 12.5px; display: grid; } .br-price > span:first-child { font-weight: 600; font-size: 13.5px; }
.br-fields { display: grid; grid-template-columns: 110px minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.br-f { margin: 0; } .br-f > span { font-size: 11.5px; }
.br-f input, .br-f textarea { min-height: 34px; padding: 6px 9px; }
.br-f textarea { min-height: 34px; resize: vertical; }
.br-f--int > span { color: var(--muted); } .br-f--int .ic { width: 12px; height: 12px; }
.br-dl { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.br-imgs { display: flex; gap: 6px; flex-wrap: wrap; } .br-imgs img { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); }
.br-iacts { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.br-iacts-r { margin-left: auto; display: flex; gap: 2px; align-items: center; }
.br-move-room { min-height: 28px; font-size: 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); padding: 2px 6px; max-width: 120px; }
.br-up { position: relative; cursor: pointer; display: inline-flex; gap: 4px; align-items: center; }
.br-up input { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; }
.br-group { border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: 10px; display: grid; gap: 8px; background: var(--surface-2); }
.br-group-h { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.br-group-h input { font-weight: 600; border: 1px solid var(--line); border-radius: var(--r); padding: 4px 8px; background: var(--surface); min-width: 0; flex: 1; max-width: 260px; }
.br-group-h .link { margin-left: auto; }
.br-selbar { position: sticky; bottom: 10px; z-index: 5; display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: var(--r-lg); background: var(--ink); color: var(--surface); box-shadow: var(--shadow); }
.br-selbar .link { color: var(--surface); }
.br-add { display: flex; flex-wrap: wrap; gap: 8px; }
.br-add select { min-height: 36px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface); padding: 6px 10px; max-width: 100%; }
.br-searchp, .br-customf { border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: 12px; display: grid; gap: 10px; background: var(--surface-2); }
.br-searchp input[type="search"] { flex: 1; min-height: 38px; padding: 8px 12px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface); min-width: 0; }
.br-sres { display: grid; gap: 8px; max-height: 440px; overflow-y: auto; }
.br-sr { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); }
.br-sr .br-thumb { width: 56px; height: 56px; }
.br-sr > div:nth-child(2) { display: grid; gap: 1px; min-width: 0; } .br-sr .lib-vendor { margin: 0; }
.br-sr-a { display: grid; justify-items: end; gap: 4px; }
.br-thread { display: grid; gap: 8px; padding: 10px; border-radius: var(--r); background: var(--surface-2); }
.br-c { padding: 8px 10px; border-radius: var(--r); background: var(--surface); }
.br-c p { margin: 2px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.br-c--client { background: var(--accent-soft); }
.br-c--studio { background: var(--warn-soft); }
.br-cform { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; }
.br-cform textarea { min-height: 38px; padding: 7px 10px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface); resize: vertical; width: 100%; }
.br-tot { display: grid; gap: 6px; margin: 0; }
.br-tot div { display: flex; justify-content: space-between; align-items: baseline; }
.br-tot dt { color: var(--muted); font-size: 12.5px; } .br-tot dd { margin: 0; font: 500 20px/1.1 var(--display); letter-spacing: .03em; }
.br-sw { font-size: 13px; }
.br-link { display: grid; gap: 6px; padding: 10px; border-radius: var(--r); background: var(--ok-soft); }
.br-link code { font-size: 11.5px; word-break: break-all; }
.br-ck { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.br-ck li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; align-items: start; }
.br-ck li > div { display: grid; }
.br-ck li.is-ok .hub-ck { background: var(--ok); border-color: var(--ok); color: var(--surface); }
.br-files { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.br-files li { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.br-files a { overflow-wrap: anywhere; flex: 1 1 100%; }
.br-feed { margin-top: 4px; max-height: 320px; overflow-y: auto; }
.br-vers summary { cursor: pointer; } .br-vers ul { margin: 6px 0 0; padding-left: 18px; }
.br-vlist { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; } .br-vlist li { display: grid; padding: 6px 0; border-bottom: 1px solid var(--line); }
.br-notifs, .br-homelist { list-style: none; margin: 0; padding: 6px 16px; display: grid; gap: 8px; }
.br-notifs li, .br-homelist li { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.br-notifs .link, .br-homelist .link { text-align: left; }
.ovp-list { list-style: none; margin: 4px 0; padding: 0; display: grid; gap: 2px; width: 100%; font-size: 12.5px; }
.ovp-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; }

@media (max-width: 1100px) { .br-grid { grid-template-columns: minmax(0, 1fr); } .br-side { position: static; } }
@media (max-width: 860px) { .cxs-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .br-item { grid-template-columns: 64px minmax(0, 1fr); }
  .br-item--ro { grid-template-columns: 64px minmax(0, 1fr); }
  .br-item .br-selck { grid-column: 1 / -1; padding: 0; }
  .br-thumb { width: 64px; height: 64px; }
  .br-fields { grid-template-columns: 1fr 1fr; } .br-fields .br-f:last-child { grid-column: 1 / -1; }
  .br-room-ed { grid-template-columns: minmax(0, 1fr); }
  .br-ihead { flex-direction: column; } .br-iside { justify-items: start; text-align: left; }
  .br-title-in { font-size: 20px; }
  .br-search { min-width: 0; }
  .br-filters .row { flex-wrap: wrap; } .br-filters select { flex: 1; min-width: 0; }
  .cxs-set-g { grid-template-columns: minmax(0, 1fr); }
  .br-tbl th:nth-child(4), .br-tbl td:nth-child(4) { display: none; }
  .br-sr { grid-template-columns: 48px minmax(0, 1fr); } .br-sr-a { grid-column: 1 / -1; display: flex; justify-content: flex-end; }
  .br-cform { grid-template-columns: minmax(0, 1fr); }
}
/* ==== end Collective part C ==== */

/* ==== B3 follow-up: running totals on the brief page (sticky at the top of the rooms card) and the save status ==== */
.br-run { position: sticky; top: 0; z-index: 3; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 10px 16px; background: var(--surface-2); border-bottom: 1px solid var(--line); border-radius: var(--r-lg, 12px) var(--r-lg, 12px) 0 0; }
.br-run b { font-size: 18px; font-variant-numeric: tabular-nums; }
.br-sub { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.br-por { display: block; }
@media (max-width: 900px) { html:not(.ipad) .br-run { top: 56px; } }   /* below the phone top bar */
.br-saved[data-s="retry"], .ipb-saved[data-s="retry"] { color: var(--bad); font-weight: 600; }
/* ==== end B3 follow-up ==== */
/* ==== Collective: projects (part D) ==== */
.pj-tbl td > .muted.sm, .pj-tbl td > .sm { display: block; }
.pj-unread { color: var(--accent); }
.pj-flag { display: inline-flex; gap: 4px; align-items: center; color: var(--bad); font-size: 12.5px; }
.pj-flag .ic { width: 14px; height: 14px; }
.pj-filters { display: grid; gap: 10px; margin-bottom: 12px; }
.pj-filters .row > .field { flex: 1 1 260px; margin: 0; }
.pj-filters select { min-height: 38px; }
.pj-page .tabs { margin-bottom: 14px; }
.pj-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 12px; }
.pj-head-t { display: flex; gap: 14px; align-items: flex-start; min-width: 0; }
.pj-head-t > div { display: grid; gap: 6px; min-width: 0; }
.pj-head .eyebrow { margin: 0; }
.pj-head-act { justify-content: flex-end; }
.pj-logo { max-height: 40px; max-width: 160px; object-fit: contain; display: block; }
.pj-logo--lg { max-height: 56px; width: 56px; border-radius: 8px; }
.pj-card { margin-bottom: 14px; }
.pj-card .pad-x, .pad-x { padding: 0 16px 14px; }
.pj-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; align-items: start; }
.pj-two { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: 18px; padding: 16px; align-items: start; }
.pj-dl { margin: 0; padding: 14px 16px; display: grid; gap: 12px; }
.pj-dl--2 { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.pj-dl dt { font: 600 10.5px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; }
.pj-dl dd { margin: 0; display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.pj-dl--money > div, .pj-dl:not(.pj-dl--2) > div { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.pj-dl--money dt, .pj-dl:not(.pj-dl--2) dt { margin: 0; }
.pj-prow > span + span { margin-left: 8px; }
.pj-prow { display: inline-flex; flex-wrap: wrap; gap: 0 0; }
.pj-dl dd .link { justify-self: start; }
.pj-tot { border-top: 1px solid var(--line); padding-top: 10px; }
.pj-desc { color: var(--ink-2); }
.pj-margin dd b { color: var(--ok); }
.pj-btbl { width: 100%; } .pj-btbl th[scope=row] { text-align: left; font-weight: 500; } .pj-btbl tr.pj-tot td, .pj-btbl tr.pj-tot th { font-weight: 600; }
.pj-wait ul { list-style: none; margin: 0; padding: 12px 16px; display: grid; gap: 8px; }
.pj-wait li { display: flex; gap: 8px; align-items: baseline; }
.pj-wait li .pill { flex: none; }
/* stages */
.pj-track { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; counter-reset: s; }
.pj-track li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 4px 0; color: var(--muted); }
.pj-track li.is-done { color: var(--ink-2); }
.pj-track li.is-on { color: var(--ink); font-weight: 600; }
.pj-dot { width: 24px; height: 24px; border-radius: 99px; border: 1px solid var(--line-2); display: grid; place-items: center; font-size: 11px; background: var(--surface); }
.pj-dot .ic { width: 13px; height: 13px; }
.is-done .pj-dot { background: var(--ok-soft); border-color: var(--ok); color: var(--ok); }
.is-on .pj-dot { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.pj-track--c li { padding: 2px 0; font-size: 13px; }
.pj-tl { list-style: none; margin: 0; padding: 4px 16px 14px; display: grid; gap: 14px; }
.pj-two .pj-tl { padding: 0; }
.pj-tl li { border-left: 2px solid var(--line); padding-left: 12px; display: grid; gap: 4px; }
.pj-tl-h { display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; }
.pj-tl p { margin: 0; }
.pj-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin-top: 6px; }
.pj-photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); display: block; background: var(--surface-2); }
.pj-photos--sm { grid-template-columns: repeat(auto-fill, minmax(72px, 96px)); }
/* scope */
.pj-room + .pj-room { margin-top: 18px; }
.pj-room > .h3 { margin: 0 0 8px; }
.pj-items { list-style: none; margin: 0; padding: 0; display: grid; }
.pj-it { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); align-items: start; }
.pj-it > img, .pj-noimg { width: 64px; height: 64px; object-fit: cover; border-radius: var(--r); background: var(--surface-2); display: grid; place-items: center; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.pj-it > div { display: grid; gap: 2px; min-width: 0; }
.pj-it-r { text-align: right; justify-items: end; }
.pj-opt { color: var(--accent); font-weight: 500; }
.pj-int { display: inline-flex; gap: 4px; align-items: center; } .pj-int .ic { width: 12px; height: 12px; }
.pj-pr span { display: block; }
.pj-scope-tot { text-align: right; font-weight: 600; margin: 12px 0 0; }
.pj-scope-tot span { margin-left: 10px; }
/* change orders */
.pj-co { border: 1px solid var(--line); border-radius: var(--r); padding: 12px; display: grid; gap: 8px; background: var(--surface); }
.pj-co + .pj-co { margin-top: 10px; }
.pj-co--waiting { border-color: var(--warn); background: var(--warn-soft); }
.pj-co header { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.pj-co header b { flex: 1 1 200px; }
.pj-co p { margin: 0; }
.pj-co-ref { font: 600 11px/1 var(--sans); letter-spacing: .1em; color: var(--accent); }
.pj-co-meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; }
.pj-co-meta > span > span { margin-left: 6px; }
.pj-co-act .btn--lg { flex: 1 1 140px; }
.pj-flist { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px 14px; flex-wrap: wrap; font-size: 13px; }
.pj-flist a { display: inline-flex; gap: 4px; align-items: center; } .pj-flist .ic { width: 14px; height: 14px; }
/* files */
.pj-up { margin-bottom: 12px; }
.pj-files { list-style: none; margin: 0; padding: 0; display: grid; }
.pj-files li { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.pj-f-n { display: flex; gap: 8px; align-items: center; min-width: 0; color: inherit; text-decoration: none; flex: 1 1 240px; }
.pj-f-n > span { display: grid; min-width: 0; } .pj-f-n b { overflow-wrap: anywhere; }
.pj-f-r { display: flex; gap: 6px; align-items: center; }
/* conversation */
.pj-conv-f { margin-bottom: 10px; }
.pj-conv-f .seg { flex-wrap: wrap; }
.pj-msgs { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; }
.pj-m { border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; background: var(--surface); display: grid; gap: 4px; max-width: 760px; }
.pj-m.is-mine { margin-left: auto; background: var(--surface-2); }
.pj-m--internal { border-style: dashed; background: var(--warn-soft); }
.pj-m--email { border-left: 3px solid var(--line-2); }
.pj-m-h { display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; }
.pj-m-b { white-space: pre-wrap; overflow-wrap: anywhere; }
.pj-m-sub { margin: 0; }
.pj-ch { display: inline-flex; gap: 4px; align-items: center; font: 600 10px/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.pj-ch .ic { width: 12px; height: 12px; }
.pj-ch--int { color: var(--warn); } .pj-ch--mail { color: var(--accent); }
.pj-comp { display: grid; gap: 8px; border-top: 1px solid var(--line); padding-top: 12px; }
.pj-comp .field { margin: 0; }
.pj-attbox { display: grid; gap: 8px; justify-items: start; margin: 8px 0 12px; }
.pj-att { position: relative; display: block; } .pj-att .icon-btn { position: absolute; top: 2px; right: 2px; width: 24px; height: 24px; background: var(--surface); }
.pj-att img { width: 96px; height: 72px; object-fit: cover; border-radius: var(--r); }
.pj-act { list-style: none; margin: 0; padding: 10px 16px; display: grid; gap: 8px; }
.pj-act li { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 10px; }
/* production */
.pj-prod .h1 { font-size: 30px; }
.pj-pcards { display: grid; gap: 12px; }
.pj-pcard { display: flex; gap: 14px; align-items: center; padding: 14px 16px; flex-wrap: wrap; }
.pj-pcard.is-new { border-color: var(--accent); box-shadow: inset 4px 0 0 var(--accent); }
.pj-pcard-main { flex: 1 1 280px; display: grid; gap: 6px; text-align: left; font-size: 15px; min-width: 0; }
.pj-pcard-main .eyebrow { margin: 0; }
.pj-pcard-t { font: 500 20px/1.2 var(--display); }
.pj-big { min-height: 56px; font-size: 16px; padding: 0 20px; justify-content: center; }
.pj-pcard .pj-big { flex: 0 1 220px; }
.pj-bigbtns { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; margin: 16px 0; }
.pj-big-link { font-size: 16px; }
.pj-ph { display: grid; gap: 6px; }
.pj-ph .eyebrow { margin: 0; } .pj-ph-sub { margin: 0; font-size: 16px; }
.pj-ms { font-size: 16px; margin: 0; }
.pj-sec-h { margin: 22px 0 10px; }
.pj-det > summary { list-style: none; cursor: pointer; padding: 14px 16px; }
.pj-det > summary::-webkit-details-marker { display: none; }
.pj-det > summary .h3 { display: inline; }
.pj-det > summary::after { content: '+'; float: right; color: var(--muted); font-size: 18px; line-height: 1; }
.pj-det[open] > summary::after { content: '\2212'; }
.pj-det[open] > summary { border-bottom: 1px solid var(--line); }
/* client portal */
.pj-portal { max-width: 760px; margin: 0 auto; }
.pj-cobrand { display: flex; align-items: center; gap: 10px; margin: 4px 0 14px; flex-wrap: wrap; }
.pj-cobrand .pj-logo { max-height: 44px; }
.pj-cobrand .pj-x { font-size: 12px; color: var(--muted); letter-spacing: .1em; text-transform: uppercase; }
.pj-wm .wm svg { height: 13px; width: auto; }
.pj-hero { display: grid; gap: 4px; margin-bottom: 14px; }
.pj-hero .eyebrow { margin: 0; } .pj-hero > .muted { margin: 0; }
.pj-now { margin-top: 12px; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); display: grid; gap: 4px; }
.pj-now > b { font: 500 24px/1.2 var(--display); }
.pj-now p { margin: 4px 0 0; }
.pj-prog { height: 6px; background: var(--surface-2); border-radius: 99px; overflow: hidden; margin-top: 8px; }
.pj-prog i { display: block; height: 100%; background: var(--accent); border-radius: 99px; }
.pj-next { display: flex; gap: 6px; align-items: center; }
.pj-jump { position: sticky; top: 0; z-index: 3; display: flex; gap: 6px; overflow-x: auto; padding: 8px 0; margin-bottom: 8px; background: var(--bg); }
.pj-jump a { flex: none; padding: 8px 12px; border: 1px solid var(--line-2); border-radius: 99px; font-size: 13px; text-decoration: none; color: var(--ink); background: var(--surface); display: inline-flex; gap: 6px; align-items: center; }
.pj-jump .nav-n { margin: 0; }
.pj-appr { border-color: var(--warn); }
/* unfiled, audit, overview */
.pj-unf { display: grid; gap: 12px; }
.pj-unf-i { padding: 14px 16px; display: grid; gap: 8px; }
.pj-unf-i header { display: grid; gap: 2px; }
.pj-unf-i select { min-height: 36px; max-width: 100%; flex: 1 1 260px; }
.pj-unf-i .pj-m-b { max-height: 180px; overflow: auto; font-size: 13.5px; color: var(--ink-2); }
.pj-afilt { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; padding: 12px 16px; margin-bottom: 12px; }
.pj-afilt .field { margin: 0; flex: 1 1 160px; }
.pj-atbl td { vertical-align: top; } .pj-atbl td > .muted.sm { display: block; }
.pj-adet { max-width: 380px; overflow-wrap: anywhere; }
.ovp--pj { grid-row: span 2; }
.pj-bars { list-style: none; margin: 6px 0; padding: 0; display: grid; gap: 4px; width: 100%; }
.pj-bars li { display: grid; grid-template-columns: minmax(0, 1fr) 70px 22px; gap: 8px; align-items: center; font-size: 12.5px; }
.pj-bars .link { text-align: left; }
.pj-bar { height: 6px; background: var(--surface-2); border-radius: 99px; overflow: hidden; } .pj-bar i { display: block; height: 100%; background: var(--accent); }
.pj-ovl { margin-top: 6px; }
.pj-ovlist { list-style: none; margin: 4px 0; padding: 0; display: grid; gap: 6px; width: 100%; font-size: 12.5px; }
.pj-ovlist li { display: grid; gap: 1px; justify-items: start; }
.pj-ovlist .link { text-align: left; }
.pj-ovsep { display: block; width: 100%; border-top: 1px solid var(--line); margin: 8px 0 4px; }
.kpi-v--sm { font-size: 20px; }
.pj-val { margin: 4px 0; display: grid; gap: 8px; width: 100%; }
.pj-val > div { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 8px; }
.pj-val dt { color: var(--muted); font-size: 12.5px; } .pj-val dd { margin: 0; display: grid; }
.pj-mail-att { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.pj-mail-att .label { margin-right: 4px; }
@media (max-width: 1100px) { .pj-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .pj-two { grid-template-columns: minmax(0, 1fr); }
  .pj-head-act { justify-content: flex-start; }
  .pj-head-act .btn { flex: 1 1 auto; }
  .pj-it { grid-template-columns: 56px minmax(0, 1fr); }
  .pj-it > img, .pj-noimg { width: 56px; height: 56px; }
  .pj-it-r { grid-column: 2; text-align: left; justify-items: start; display: flex; gap: 10px; flex-wrap: wrap; }
  .pj-act li { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .pj-tbl thead { display: none; }
  .pj-tbl tr { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
  .pj-tbl td { border: 0; padding: 0; }
  .pj-tbl td:first-child { grid-column: 1 / -1; }
  .pj-tbl td.num { text-align: left; }
  .pj-big { width: 100%; }
  .pj-pcard .pj-big { flex: 1 1 100%; }
  .pj-m.is-mine { margin-left: 0; }
  .pj-val > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
/* Overview: designer sessions with logos (part C panel, extended in part D) */
.cxs-ovl { display: inline-flex; gap: 4px; align-items: center; text-align: left; }
#pj-root label.btn, .ov label.btn { position: relative; overflow: hidden; }
#pj-root label.btn > input[type=file], .ov label.btn > input[type=file] { left: 0; top: 0; }
/* ==== end Collective part D ==== */

/* ==== Oct 16 (batch A, item 2): Conversation as an email-app thread (newest first, older read ones on one line) ==== */
.pj-conv .pj-comp { margin-bottom: 14px; }
.pj-conv-all { justify-content: flex-end; margin: 0 0 6px; }
.pj-m--closed { padding: 0; }
.pj-m-line { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 10px; align-items: baseline; width: 100%; text-align: left; padding: 9px 12px; min-height: 40px; border-radius: var(--r); }
.pj-m-line:hover { background: var(--surface-2); }
.pj-m-snip { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pj-m-when { white-space: nowrap; }
.pj-m-x { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: var(--r); color: var(--muted); margin-left: -4px; }
.pj-m-x:hover { background: var(--surface-2); color: var(--ink); }
@media (max-width: 640px) { .pj-m-line { grid-template-columns: auto minmax(0, 1fr); } .pj-m-line .pj-m-snip { grid-column: 1 / -1; } .pj-m-line > span.muted.sm:last-child { display: none; } }
/* ==== Oct 16, batch B: pipeline (visit brief, emails on a visit or lead, client Conversations) ==== */
.cl-right { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.pl-vb .act-row { align-items: center; }
.pl-list, .pl-em { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 10px; }
.pl-em-h { margin-top: 10px; }
.pl-cv .card-h { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.pl-cv-f select { max-width: 100%; }
.pl-cv-l { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; }
.pl-cv-i + .pl-cv-i { border-top: 1px solid var(--line); }
.pl-cv-b { display: flex; flex-direction: column; gap: 3px; width: 100%; text-align: left; background: none; border: 0; padding: 10px 4px; color: inherit; font: inherit; cursor: pointer; border-radius: 8px; min-width: 0; }
.pl-cv-b:hover, .pl-cv-b:focus-visible { background: var(--bg2, rgba(0,0,0,.04)); }
.pl-cv-top { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pl-cv-s { font-weight: 600; overflow-wrap: anywhere; }
.pl-cv-t { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.mx-targets { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 12px; }
.mx-targets-g { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mx-links { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0; }
.pj-m-cue { display: inline-flex; color: var(--muted); flex: none; } .pj-m-cue .ic { width: 15px; height: 15px; }

/* ==== Update B2: a Collective session row in Appointments names its host on a phone (the Host column is hidden there) ==== */
.appt-cx-host { display: none; }
@media (max-width: 420px) { .appt-cx-host { display: inline; } }
/* ==== end Update B2 ==== */

/* ==== B3 follow-up: New appointment > the client (new, existing client, existing lead, a searchable list) ==== */
.nb-who { display: grid; gap: 8px; margin-bottom: 12px; }
.nb-who-seg { flex-wrap: wrap; }
.nb-who-s input { width: 100%; }
.nb-who-l { display: grid; gap: 6px; max-height: 260px; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.nb-who-i { display: grid; gap: 2px; text-align: left; padding: 10px 12px; min-height: 44px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: inherit; cursor: pointer; }
.nb-who-i:hover, .nb-who-i:focus-visible { border-color: var(--ink-2); }
.nb-who-i .pill { justify-self: start; }
.nb-who-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); }
/* ==== end B3 follow-up ==== */
/* ==== Collective: fix 1 ==== */
/* #20 Overview: no holes in the panel grid (the tall "Projects by stage" panel no longer spans two rows) */
.ovp-row { grid-auto-flow: row dense; align-items: start; }
.ovp--pj { grid-row: auto; }
.ovp--req { grid-column: span 2; }
@media (max-width: 1100px) { .ovp--req { grid-column: 1 / -1; } }
@media (max-width: 700px) { .ovp--req { grid-column: auto; } }
.cx-req-off { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 8px 0; }
.cx-req-off > span { flex: 1 1 260px; }
.cx-req li { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.cx-req li > span:first-child { flex: 1; min-width: 0; }
.cx-req .row { flex-wrap: nowrap; }
.ovp--req .cx-prices-sw { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.ovp--req .cx-prices-sw .label { grid-column: 1 / -1; }
.ovp { align-content: start; }
.ovp--wide { grid-column: 1 / -1; }
/* H: today's prep list */
.ovp--prep { gap: 8px; justify-items: stretch; }
.ovp--prep > .row { width: 100%; }
.cxs-prep { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cxs-prep li { display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr) auto; gap: 6px 16px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.cxs-prep li.is-done { background: var(--surface-2); }
.cxs-prep li.is-done .cxs-prep-d { color: var(--muted); }
.cxs-prep-t { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cxs-prep-t > span { display: inline-flex; gap: 6px; align-items: center; }
.cxs-prep-d { color: var(--ink-2); line-height: 1.5; }
.cxs-prep-a { gap: 10px; justify-content: flex-end; }
.cxs-prep-a .check { display: inline-flex; gap: 6px; align-items: center; min-height: 32px; }
@media (max-width: 1200px) { .cxs-prep li { grid-template-columns: minmax(140px, 200px) minmax(0, 1fr); } .cxs-prep-a { grid-column: 2; justify-content: flex-start; } }
@media (max-width: 900px) { .cxs-prep li { grid-template-columns: minmax(0, 1fr); } .cxs-prep-a { grid-column: auto; justify-content: flex-start; } }
/* K: requests */
.cx-req li { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 4px 0; }
.cx-ask { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-top: 8px; }
.cx-ask .muted { max-width: 46ch; }
/* #15 Briefs queue: cards on a phone */
@media (max-width: 640px) {
  .br-tbl thead { display: none; }
  .br-tbl, .br-tbl tbody { display: block; }
  .br-tbl tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px 12px; padding: 12px; border-bottom: 1px solid var(--line); }
  .br-tbl td { display: block; border: 0; padding: 0; min-width: 0; }
  .br-tbl td:first-child { grid-column: 1 / -1; }
  .br-tbl th:nth-child(4), .br-tbl td:nth-child(4) { display: block; }
  .br-tbl td[data-label]:not(:first-child)::before { content: attr(data-label); display: block; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
  .pj-atbl thead { display: none; }
  .pj-atbl, .pj-atbl tbody { display: block; }
  .pj-atbl tr { display: grid; gap: 2px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
  .pj-atbl td { border: 0; padding: 0; display: block; }
}
/* briefs: header actions, approver, private note hint, room mapping, link card */
.br-head { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.br-head-a { gap: 8px; }
.br-appr { display: inline-flex; gap: 4px; align-items: center; color: var(--ok); }
.br-appr .ic { width: 14px; height: 14px; }
.br-int-h { display: block; margin-top: 4px; line-height: 1.4; }
.br-map { border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; display: grid; gap: 8px; }
.br-map legend { padding: 0 4px; font-size: 13px; }
.br-map-r { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 10px; align-items: center; font-size: 13.5px; }
.br-map-r input { min-height: 34px; }
.br-link--first .copyable { border: 1px solid var(--accent); }
.br-link--first .copyable .btn { white-space: nowrap; }
/* #19 Unfiled: the Sample pill keeps its own width */
.pj-unf-i header .pill { justify-self: start; }
/* #29 a single toast, and above the dialog on a phone */
@media (max-width: 700px) { body:has(#overlay:not([hidden]) .ov) #toasts { bottom: auto; top: calc(12px + env(safe-area-inset-top, 0px)); } }
/* #37 hit areas of at least 24 px (colour dots, facet rows, small icon buttons) */
.lib-fo { min-height: 32px; }
.lib-fam { min-width: 32px; min-height: 32px; }
button.lib-sw { min-width: 24px; min-height: 24px; }
.icon-btn--sm { min-width: 28px; min-height: 28px; }
.br-selck input, .cxs-checks input[type=checkbox], .check input[type=checkbox] { min-width: 18px; min-height: 18px; }
/* reset and add a person */
.cx-hr { border: 0; border-top: 1px solid var(--line); margin: 14px 0; }
.cx-reset { border: 1px solid var(--bad); border-radius: var(--r); padding: 14px 16px; display: grid; gap: 10px; margin-top: 10px; background: color-mix(in srgb, var(--bad) 4%, var(--surface)); }
.cx-reset-l { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.cx-reset-l li { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 10px; font-size: 13.5px; }
@media (max-width: 560px) { .cx-reset-l li { grid-template-columns: minmax(0, 1fr); gap: 0; } }
/* #21 Collective emails: filters and pages */
.cx-mail-f { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin-bottom: 12px; }
.cx-mail-f .cl-search { flex: 1 1 260px; }
.cx-mail-f select { min-height: 38px; }
.cx-pager { padding: 10px 12px; gap: 8px; border-top: 1px solid var(--line); }
/* hub: show contact details */
.hub-cc { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; }
/* I: production's week */
.pj-week-g { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px 24px; padding: 4px 16px 14px; }
.pj-week-g .label { display: block; margin: 8px 0 4px; }
.pj-wl { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pj-wl li { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 10px; align-items: baseline; }
.pj-wl li > span:last-child { display: grid; }
.pj-wl li.is-late .pj-wd { color: var(--bad); font-weight: 600; }
.pj-wd { font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.pj-cam { position: relative; overflow: hidden; }
/* L: expected dates, what happens next, the designer card */
.pj-plan-g { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px 14px; }
.pj-plan-a { padding-bottom: 14px; }
.pj-ahead { list-style: none; margin: 0; padding: 4px 16px 12px; display: grid; gap: 10px; counter-reset: ah; }
.pj-ahead li { display: grid; gap: 2px; padding-left: 30px; position: relative; }
.pj-ahead li::before { counter-increment: ah; content: counter(ah); position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; font-size: 12px; color: var(--muted); }
.pj-ahead li.is-next::before { background: var(--accent); border-color: var(--accent); color: #f3f1eb; }
.pj-ahead li > div { display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; }
.pj-ahead-d { font-size: 13px; color: var(--accent); }
.pj-dz-b { display: flex; gap: 14px; align-items: flex-start; }
.pj-dz-b > div { display: grid; gap: 4px; }
.pj-dz-l { gap: 14px; }
.pj-dz-l a { text-decoration: underline; text-underline-offset: 3px; }
/* J: the digest and the audit log */
.pj-digest-g { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 20px; }
.pj-digest-g ul { margin: 4px 0 0; padding-left: 18px; font-size: 13.5px; display: grid; gap: 2px; }
.pj-atbl td > .muted.sm { display: block; }
.pj-afilt .pj-a-as { align-self: end; min-height: 38px; display: inline-flex; gap: 6px; align-items: center; }
.pj-wl .link { text-align: left; justify-self: start; }
/* #37 (second pass): text buttons and switches are at least 24 px tall */
#pj-root button.link, #br-root button.link, .hub-card button.link, .br-notifs button.link, .br-homelist button.link { min-height: 24px; }
.lib-card button[data-act="lib-open"] { min-height: 24px; }
#pj-root .switch, #pj-root label.row, #br-root .switch { min-height: 26px; align-items: center; }
/* fix 2 (#5): the brief name field fills the header */
.br-head-t { flex: 1 1 480px; min-width: 0; }
.br-title-in { width: 100%; max-width: 100%; box-sizing: border-box; }
/* fix 2 (#10): the member's note on a request */
.cx-req-q { margin: 4px 0 0; padding: 4px 10px; border-left: 2px solid var(--line-2); color: var(--ink-2); font-style: italic; font-size: 12.5px; }
.cx-ask textarea { width: 100%; min-height: 54px; font: inherit; font-size: 13px; }
.cx-prices-sw { display: grid; gap: 4px; margin-top: 6px; }
/* fix 3 (P1-2) */
.cl-badges { display: inline-flex; gap: 4px; margin-left: 6px; vertical-align: middle; }
.cl-badges--lg { margin: 4px 0 0; display: flex; }
/* ==== end Collective fix 1 ==== */
/* ==== Lead to project ==== */
.lw-block { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); padding: 12px 14px; margin: 12px 0; display: grid; gap: 8px; }
.lw-block .h4 { margin: 0; }
.lw-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.lw-row > span { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.lw-row .label { margin: 0; }
.lw-tag { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; line-height: 1.5; background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line); max-width: 100%; }
.lw-tag .ic { width: 12px; height: 12px; }
.lw-tag--p { background: var(--ok-bg, #e6eee0); color: var(--ok, #3f5a2e); border-color: transparent; }
.lw-tag--btn { cursor: pointer; font: inherit; font-size: 11.5px; }
.lw-tag--btn:hover, .lw-tag--btn:focus-visible { border-color: var(--ink-2); color: var(--ink); }
.lw-chip { font-size: 12px; }
.lw-np .lw-fs { border: 0; padding: 0; margin: 4px 0 8px; display: grid; gap: 8px; }
.lw-np .lw-fs legend { margin-bottom: 6px; }
.lw-res { display: grid; gap: 4px; }
.lw-res-l { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: 220px; overflow: auto; }
.lw-res-i { width: 100%; text-align: left; display: grid; gap: 2px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); cursor: pointer; font: inherit; }
.lw-res-i:hover, .lw-res-i:focus-visible { border-color: var(--ink-2); }
.lw-picked { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; margin: 0; }
.lw-scope-note .row { margin-top: 8px; align-items: center; }
.lw-pend { margin: 0 16px; }
@media (max-width: 700px) { .lw-row .btn { width: 100%; justify-content: center; } }
/* ==== end Lead to project ==== */
.lw-tag--s { background: transparent; border-style: dashed; }
/* lead to project fixes */
.ov--wide .lw-np { max-width: none; }
.lw-grid { display: grid; gap: 10px 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lw-grid .lw-span2 { grid-column: span 2; }
.lw-grid .lw-span3 { grid-column: 1 / -1; }
@media (max-width: 760px) { .lw-grid { grid-template-columns: minmax(0, 1fr); } .lw-grid .lw-span2, .lw-grid .lw-span3 { grid-column: auto; } }
.lw-when { border-top: 1px solid var(--line); padding-top: 10px; }
.lw-hint { margin: 0; }
.lw-tot { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0 16px; font-variant-numeric: tabular-nums; }
.lw-chips { gap: 6px; }
.lw-cw-l { list-style: none; margin: 0; padding: 4px 16px 14px; display: grid; gap: 8px; }
.lw-cw-l li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 8px; align-items: center; }
.lw-cw-l li .muted { grid-column: 2; }
.lw-grid { align-items: start; }
/* ==== Overview redesign and page widths ==== */
/* every admin page is fluid up to 1680 px, left-aligned beside the sidebar (it was 1240 px, or unbounded for wide pages) */
.page { max-width: 1680px; margin-inline: auto; }   /* centred in the space beside the sidebar on very wide screens */
.page--wide { max-width: 1680px; }
.page--ov { max-width: 1680px; }

.ov2 { container-type: inline-size; container-name: ov; font-variant-numeric: tabular-nums; }
.ov-h { font: 600 11px/1.3 var(--ui, inherit); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.ov-sub { font-size: 13px; font-weight: 600; margin: 0 0 8px; }
.ov-n { display: block; font: 500 26px/1.1 var(--display); color: var(--ink); font-variant-numeric: tabular-nums; margin: 2px 0; }

/* training: one line, dismissible for the session */
.ov-train { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 12px; margin: 0 0 18px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.ov-train .ring { flex: none; }
.ov-train > span { flex: 1 1 260px; min-width: 0; font-size: 13.5px; }
.ov-train .btn { flex: none; gap: 0; }
.ov-train .btn .ov-train-l { white-space: pre; }
@container ov (max-width: 700px) { .ov-train-l { display: none; } }

/* Needs you */
.ov-needs { margin: 0 0 24px; }
.ov-tiles { display: flex; flex-wrap: wrap; gap: 10px; }   /* the last row stretches, so there are never holes */
.ov-tiles > .ov-tile { flex: 1 1 180px; }
.ov-tile { position: relative; display: grid; align-content: start; gap: 2px; text-align: left; padding: 12px 34px 12px 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); cursor: pointer; font: inherit; color: inherit; min-height: 84px; }
.ov-tile:hover, .ov-tile:focus-visible { border-color: var(--ink-2); }
.ov-tile--warn { border-left: 3px solid var(--warn); }
.ov-tile-l { font-size: 13.5px; font-weight: 500; }
.ov-tile-go { position: absolute; right: 10px; top: 14px; color: var(--muted); }
.ov-tile-go .ic { width: 16px; height: 16px; }
.ov-calm { display: flex; align-items: center; gap: 8px; margin: 0; padding: 12px 14px; border: 1px dashed var(--line); border-radius: var(--r); color: var(--ink-2); }
.ov-att { margin-top: 12px; }
.ov-att .att li > div { display: grid; gap: 2px; }
.ov-req { margin-top: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.ov-req-l { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ov-req-l li { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding-top: 8px; border-top: 1px solid var(--line); }
.ov-req-l li:first-child { border-top: 0; padding-top: 0; }
.ov-req-l li > div { min-width: 0; flex: 1; }
.ov-req-l .row { flex: none; flex-wrap: nowrap; gap: 6px; }
.ov-note { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: 10px 0 0; font-size: 13px; color: var(--ink-2); }
.ov-note .ic { width: 16px; height: 16px; color: var(--warn); }
@container ov (max-width: 560px) { .ov-req-l li { flex-direction: column; } }

/* the columns: one, two (activity below, full width) or three */
.ov-cols { display: grid; gap: 24px 20px; grid-template-columns: minmax(0, 1fr); align-items: start; }
.ov-col { display: grid; gap: 14px; align-content: start; min-width: 0; }
.ov-col > .ov-h { margin-bottom: -4px; }
@container ov (min-width: 680px) {
  .ov-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ov-col--act { grid-column: 1 / -1; }
  .ov-col--act .ov-feed { columns: 2; column-gap: 28px; }
  .ov-col--act .ov-feed li { break-inside: avoid; }
}
@container ov (min-width: 1080px) {
  .ov-cols { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, .85fr); }
  .ov-col--act { grid-column: auto; }
  .ov-col--act .ov-feed { columns: 1; }
}
/* when a column is missing (for example no projects or pipeline for this person), the others share the row */
@container ov (min-width: 680px) { .ov-cols:not(:has(.ov-col--work)) { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } .ov-cols:not(:has(.ov-col--work)) .ov-col--act { grid-column: auto; } .ov-cols:not(:has(.ov-col--work)) .ov-col--act .ov-feed { columns: 1; } }

.ov-card { margin: 0; }
.ov-card.ovp { display: grid; gap: 6px; padding: 14px 16px; }
.ov-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px 16px; padding: 12px 16px 4px; }
.ov-stats > div { display: grid; align-content: start; min-width: 0; }
.ov-stats .ov-n { font-size: 22px; }
.ov-card .sched { padding-top: 6px; }
.ov-card .fn { padding-top: 4px; }
.ov-bars { padding: 6px 16px 14px; }
.ov-feed li { padding: 7px 16px; }
.pad-s { padding: 10px 16px 14px; margin: 0; }
.ovp--prep .cxs-prep li { grid-template-columns: minmax(0, 1fr); }
.ovp--prep .cxs-prep-a { grid-column: auto; justify-content: flex-start; }
/* ==== end Overview redesign ==== */
/* phones: each tile is one compact row (number, then its line) */
@container ov (max-width: 560px) {
  .ov-tiles { gap: 6px; }
  .ov-tiles > .ov-tile { flex-basis: 100%; grid-template-columns: 44px minmax(0, 1fr); column-gap: 10px; min-height: 0; padding: 8px 32px 8px 12px; align-items: center; }
  .ov-tile .ov-n { grid-row: span 2; font-size: 22px; margin: 0; }
  .ov-tile-go { top: 50%; transform: translateY(-50%); }
}
.ov-note > span { flex: 1 1 200px; }
.ov-tiles > .ov-tile { max-width: 380px; }
/* final polish */
.ov-tiles > .ov-tile { flex: 1 1 220px; max-width: none; }   /* rows fill evenly, no half-width orphan */
.ov-tiles > .ov-tile:only-child { max-width: 420px; }
.ov-feed li:nth-child(n+9) { display: none; }
@container ov (min-width: 1080px) { .ov-feed li:nth-child(n+9) { display: grid; } }
.board { grid-auto-columns: minmax(196px, 1fr); }   /* the seven pipeline columns fit at 1680 px; scroll only below that */
/* ==== D1: time holds, review claims, the move to the new database ==== */
.hold-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; margin: 0 0 14px; border: 1px solid var(--line); border-left: 3px solid var(--ok); border-radius: var(--r); background: var(--surface); }
.hold-bar .hold-ic { display: inline-flex; color: var(--ok); }
.hold-bar .hold-t { flex: 1 1 220px; min-width: 0; }
.hold-bar .hold-clock { font-variant-numeric: tabular-nums; font-size: 1.05em; min-width: 3.2em; text-align: right; }
.hold-next { margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); }
.hold-next .label { margin: 0 0 8px; }
.hold-next .slots, .hold-next .cxs-times { display: flex; flex-wrap: wrap; gap: 8px; }
.hold-next .slot small { display: block; }
.slot[disabled] { opacity: .45; text-decoration: line-through; cursor: not-allowed; }
.br-claim { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; margin: 0 0 12px; border: 1px solid var(--line); border-left: 3px solid var(--warn); border-radius: var(--r); background: var(--surface-2); }
.br-claim > div { display: grid; gap: 6px; min-width: 0; }
.br-claim .row { margin-top: 4px; }
.br-claim-mine { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; }
.br-claim-tag { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; font-size: .8em; color: var(--muted); white-space: nowrap; }
.br-claim-tag svg, .br-claim-mine svg { width: 14px; height: 14px; }
.mv-card ul.plain { margin: 8px 0 12px; padding-left: 1.1em; list-style: disc; display: grid; gap: 4px; }
.mv-bar { height: 8px; border-radius: 99px; background: var(--sunk); overflow: hidden; margin: 10px 0; }
.mv-bar > span { display: block; height: 100%; background: var(--accent); transition: width .4s ease; }
@media (max-width: 640px) {
  .hold-bar { padding: 10px 12px; }
  .hold-bar .hold-clock { text-align: left; }
  .br-claim-tag { display: flex; margin: 4px 0 0; white-space: normal; }
}
.mv-bk { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); display: grid; gap: 8px; }
.mv-bk p { margin: 0; }
.mv-bk-list ul { margin: 6px 0 0; display: grid; gap: 4px; }
.mv-screen .live-msg-in { max-width: 760px; width: 100%; text-align: left; }
.mv-screen .set-grid { display: block; margin-top: 16px; }
/* Fable final round: the hub "View as" banner. Text first, the button under it on a narrow screen; on phones it scrolls
   away with the page (not sticky) so it never sits over the menu button or the page header. */
.sandbox-bar.hub-viewas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 10px 16px; background: var(--warn-soft, #f5ead6); border-bottom: 1px solid var(--warn, #b07a2a); color: var(--ink); font-size: 13px; line-height: 1.45; }
.sandbox-bar.hub-viewas > span { flex: 1 1 320px; min-width: 0; }
.sandbox-bar.hub-viewas .btn { flex: none; }
@media (max-width: 760px) {
  .sandbox-bar.hub-viewas { position: static; padding: 12px 16px; }
  .sandbox-bar.hub-viewas > span { flex-basis: 100%; }
  .hub-viewas + .shell .side { top: 0; height: 100vh; }
}
/* ==== Email (Cloudflare) ==== */
/* Mail: list and reading pane (staff), production's big-button inbox (hub), Booking settings > Email */
.mx-tabs { margin-bottom: 14px; }
.mx-n { display: inline-block; min-width: 18px; padding: 0 6px; border-radius: 9px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; }
.seg button .mx-n { background: var(--warn); }
.mx-split { display: grid; grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); gap: 14px; height: calc(100vh - var(--bar) - 230px); min-height: 540px; }
.mx-list, .mx-read { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.mx-filters { padding: 12px 12px 8px; display: grid; gap: 8px; border-bottom: 1px solid var(--line); }
.mx-folders { width: 100%; } .mx-folders button { flex: 1; }
.mx-search label { position: relative; display: block; }
.mx-search .ic { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.mx-search input, .mx-search input[type="search"] { padding-left: 34px; width: 100%; }
.mx-fchips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mx-fchips .chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border: 1px solid var(--line-2); border-radius: 999px; font-size: 12.5px; color: var(--ink-2); background: var(--surface); }
.mx-fchips .chip.on { background: var(--btn); color: var(--on-btn); border-color: var(--btn); }
.mx-fchips .chip .ic { width: 13px; height: 13px; }
.mx-fchips select { min-height: 30px; padding: 3px 26px 3px 8px; font-size: 12.5px; max-width: 170px; }
.mx-lhead { display: flex; align-items: center; gap: 8px; padding: 8px 12px; font-size: 12.5px; color: var(--ink-2); border-bottom: 1px solid var(--line); min-height: 38px; }
.mx-pg { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; }
.mx-list-in { overflow-y: auto; flex: 1; min-height: 0; overscroll-behavior: contain; }
.mx-row { display: grid; gap: 2px; width: 100%; padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; cursor: pointer; min-width: 0; }
.mx-row:hover { background: var(--surface-2); }
.mx-row.on { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--ink); }
.mx-row:focus-visible, .mx-bigrow:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.mx-row-h { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 13px; }
.mx-from { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; font-weight: 500; }
.mx-row.unread .mx-from, .mx-row.unread .mx-subj, .mx-bigrow.unread .mx-from, .mx-bigrow.unread .mx-subj { font-weight: 700; }
.mx-ic { color: var(--muted); display: inline-flex; } .mx-ic .ic { width: 13px; height: 13px; }
.mx-age { margin-left: auto; font-size: 11.5px; color: var(--muted); white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; }
.mx-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); display: inline-block; }
.mx-subj { font-size: 13px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-snip { font-size: 12.5px; color: var(--muted); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.4; overflow-wrap: anywhere; }
.mx-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.mx-chips .pill { font-size: 10.5px; padding: 1px 7px; }
.mx-empty { flex: 1; display: grid; place-items: center; align-content: center; gap: 8px; padding: 32px 20px; text-align: center; color: var(--muted); }
.mx-read--empty { display: grid; place-items: center; align-content: center; gap: 8px; color: var(--muted); }
.mx-read { overflow-y: auto; overscroll-behavior: contain; }
.mx-rhead { padding: 14px 16px 12px; border-bottom: 1px solid var(--line); display: grid; gap: 4px; }
.mx-back { display: none; justify-self: start; align-items: center; gap: 4px; font-size: 13px; }
.mx-rsubj { margin: 0; overflow-wrap: anywhere; }
.mx-meta, .mx-to, .mx-proj, .mx-auth { margin: 0; overflow-wrap: anywhere; }
.mx-meta .pill { margin-left: 4px; }
.mx-auth { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; } .mx-auth .ic { width: 13px; height: 13px; }
.mx-ok { color: var(--ok); } .mx-bad { color: var(--bad); }
.mx-proj { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; font-size: 13.5px; } .mx-proj .ic { width: 15px; height: 15px; color: var(--muted); }
.mx-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.mx-acts .btn.on { box-shadow: inset 0 0 0 1px var(--ink); background: var(--surface-2); }
.mx-read > .note { margin: 12px 16px 0; }
.note--bad { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--r); background: color-mix(in srgb, var(--bad) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--bad) 30%, transparent); font-size: 13.5px; }
.mx-why { margin: 6px 0 0; padding-left: 18px; }
.mx-comp { margin: 12px 16px 0; padding: 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); display: grid; gap: 8px; }
.mx-comp textarea { width: 100%; }
.mx-body { padding: 0; flex: 1 0 auto; display: flex; min-height: 280px; }
.mx-frame { width: 100%; min-height: 420px; border: 0; background: #fff; flex: 1; }
.mx-text { white-space: pre-wrap; overflow-wrap: anywhere; padding: 16px; font-size: 14.5px; line-height: 1.55; width: 100%; }
.mx-files { list-style: none; margin: 0; padding: 10px 16px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 6px 14px; }
.mx-files a { display: inline-flex; align-items: center; gap: 5px; font-size: 13.5px; } .mx-files .ic { width: 15px; height: 15px; }
.mx-thread { padding: 10px 16px 14px; border-top: 1px solid var(--line); font-size: 13.5px; }
.mx-thread summary { cursor: pointer; color: var(--ink-2); }
.mx-thread ol { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.mx-thread li { display: grid; gap: 1px; }
/* production: big buttons, little else */
.mx-page--big .mx-bigseg { margin: 4px 0 12px; } .mx-page--big .mx-bigseg button { padding: 10px 18px; font-size: 15px; }
.mx-search--big { margin-bottom: 12px; } .mx-search--big input { min-height: 46px; font-size: 16px; }
.mx-biglist { display: grid; gap: 10px; margin-bottom: 14px; }
.mx-bigrow { display: grid; gap: 4px; text-align: left; padding: 14px 16px; width: 100%; cursor: pointer; }
.mx-bigrow .mx-row-h { font-size: 15px; } .mx-bigrow .mx-subj { font-size: 15px; white-space: normal; } .mx-bigrow .mx-snip { font-size: 14px; }
.mx-page--big .mx-read { overflow: visible; }
.mx-page--big .mx-back { display: inline-flex; font-size: 15px; margin-bottom: 4px; }
.mx-bigbtns { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin-top: 10px; }
.mx-bigbtns .btn { justify-content: center; min-height: 52px; font-size: 16px; }
.mx-page--big .mx-comp textarea { font-size: 16px; }
/* Booking settings > Email */
.mx-set .label { margin: 18px 0 6px; }
.mx-setgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 28px; }
.mx-setgrid > div > .label:first-child { margin-top: 10px; }
.mx-kv { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.mx-kv > span:last-child { text-align: right; overflow-wrap: anywhere; min-width: 0; }
.mx-test { align-items: flex-end; gap: 8px; margin-top: 10px; } .mx-test .field { flex: 1 1 220px; margin: 0; }
.mx-copies { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; } .mx-copies .row { grid-column: 1 / -1; }
.mx-tblwrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); }
.mx-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.mx-tbl th, .mx-tbl td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.mx-tbl th { font-weight: 500; color: var(--muted); font-size: 12px; }
.mx-tbl tr:last-child td { border-bottom: 0; }
.mx-err { display: block; margin-top: 2px; }
.mx-adv { margin-top: 12px; font-size: 13.5px; } .mx-adv summary { cursor: pointer; color: var(--ink-2); } .mx-adv .field { margin-top: 8px; }
.mx-steps { margin: 8px 0; padding-left: 20px; display: grid; gap: 6px; }
@media (max-width: 1100px) { .mx-setgrid { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .mx-split { display: block; height: auto; min-height: 0; }
  .mx-list, .mx-read { overflow: visible; }
  .mx-list-in { overflow: visible; }
  .mx-back { display: inline-flex; }
  .mx-frame { min-height: 360px; }
  .mx-copies { grid-template-columns: 1fr; }
  .mx-tbl thead { display: none; }
  .mx-tbl tr { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; padding: 8px 10px; border-bottom: 1px solid var(--line); }
  .mx-tbl tr:last-child { border-bottom: 0; }
  .mx-tbl td { border: 0; padding: 0; overflow-wrap: anywhere; }
  .mx-tbl td:nth-child(3), .mx-tbl td:nth-child(4) { grid-column: 1 / -1; }
  .mx-tabs { margin-bottom: 10px; }
}
.mx-from-fixed { margin: 6px 0 0; font-size: 14px; color: var(--ink-2); }
/* ==== Email, second round ==== */
/* Unfiled: one-click suggestions under a row and in the message */
.mx-rowwrap { border-bottom: 1px solid var(--line); }
.mx-rowwrap .mx-row { border-bottom: 0; }
.mx-sugg { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 0 12px 10px; }
.mx-sugg-b { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; }
.mx-sugg-b .ic { width: 13px; height: 13px; }
.mx-sugg--read { padding: 6px 0 2px; }
.mx-sugg-w { margin-right: 8px; overflow-wrap: anywhere; }
/* each person's status on an email to several people */
.mx-rcpts { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 4px; font-size: 12.5px; }
.mx-rcpts li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.mx-rcpts li > span:first-child { overflow-wrap: anywhere; color: var(--ink-2); }
.mx-rcpts .pill { font-size: 10.5px; padding: 1px 7px; }
.mx-sample { margin: 0 0 8px; }
.mx-keep { align-items: flex-end; gap: 8px; margin-top: 8px; }
.mx-keep .field { margin: 0; } .mx-keep input { width: 110px; }
/* the project's own email address */
.pj-mail-a { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; }
.pj-mail-addr { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface-2); color: var(--ink); overflow-wrap: anywhere; min-width: 0; flex: 1 1 220px; user-select: all; }
.pj-mail--big .pj-mail-addr { font-size: 15px; padding: 10px 12px; }
.pj-mail-k { margin-top: 8px; } .pj-mail-k summary { cursor: pointer; color: var(--ink-2); }
.pj-mail-k ul { margin: 6px 0 0; display: grid; gap: 4px; }
.pj-mail-k li { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; } .pj-mail-k li > span:first-child { overflow-wrap: anywhere; }
.pj-sample-note { margin: 0 0 10px; }
/* section 6: sender not verified */
.mx-unv, .pj-unv { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--r); background: color-mix(in srgb, var(--warn) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent); font-size: 13.5px; margin: 6px 0; }
.mx-unv .btn, .pj-unv .btn { margin-top: 6px; }
.pj-unv b { margin-right: 4px; }
/* section 7 (C): Unread on the project Overview */
.pj-unread .card-h h2 { display: flex; align-items: center; gap: 8px; }
.pj-ur { list-style: none; margin: 0; padding: 0; }
.pj-ur li + li { border-top: 1px solid var(--line); }
.pj-ur-i { display: grid; gap: 3px; width: 100%; text-align: left; padding: 12px 16px; cursor: pointer; min-width: 0; }
.pj-ur-i:hover { background: var(--surface-2); }
.pj-ur-i:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.pj-ur-i.is-waiting { box-shadow: inset 3px 0 0 var(--bad); }
.pj-ur-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; font-size: 13.5px; }
.pj-ur-h .ic { width: 15px; height: 15px; color: var(--muted); }
.pj-ur-h .pill { font-size: 10.5px; padding: 1px 7px; }
.pj-ur-t { margin-left: auto; white-space: nowrap; }
.pj-ur-s { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pj-ur-b { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.pj-ur-none { display: flex; align-items: center; gap: 8px; color: var(--ink-2); }
.pj-unread--big .pj-ur-i { padding: 14px 16px; }
.pj-m.is-focus { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; transition: outline-color .6s; }
/* section 7 (A): attachments on emails */
.att { display: grid; gap: 6px; margin: 4px 0 8px; }
.att-drop { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border: 1px dashed var(--line-2); border-radius: var(--r); background: var(--surface); }
.att-drop.is-over { border-color: var(--accent); background: var(--surface-2); }
.att-drop .ic { width: 14px; height: 14px; vertical-align: -2px; }
.att-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.att-list li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); min-width: 0; font-size: 13.5px; }
.att-list li.is-err { border-color: var(--bad); }
.att-list .att-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
.att-list .ic { width: 14px; height: 14px; color: var(--muted); flex: none; }
.att-pick { max-height: 200px; overflow: auto; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.att-pick ul { margin: 0; display: grid; gap: 4px; }
.att-note { margin: 0; }
/* ==== end Email, second round ==== */
/* ==== end Email (Cloudflare) ==== */
/* section 7 (E): change order lines */
.pj-colines td.num, .pj-colines th.num { text-align: right; white-space: nowrap; }
.pj-colines .pj-tot td { font-weight: 600; border-top: 1px solid var(--line, #ddd); }
.pj-colines-ed { display: grid; gap: 10px; margin: 8px 0; }
.pj-coline { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; grid-template-areas: "k a x" "d d d" "n n n"; gap: 8px; align-items: end; padding: 10px; border: 1px solid var(--line, #e4e0d6); border-radius: 10px; }
.pj-coline > .field:nth-child(1) { grid-area: k; } .pj-coline-d { grid-area: d; } .pj-coline > .field:nth-child(3) { grid-area: a; } .pj-coline-n { grid-area: n; } .pj-coline > .icon-btn { grid-area: x; }
.pj-coline .field > span { white-space: nowrap; }
.pj-coline .field { margin: 0; }
.pj-cototal { font-size: 15px; }
.pj-co-act { margin-top: 10px; gap: 8px; }
.pj-co .note { display: flex; gap: 8px; align-items: flex-start; }
/* section 7 (G): studio access */
.sa-sec { margin: 14px 0; padding-top: 12px; border-top: 1px solid var(--line, #e4e0d6); }
.sa-sec .h4 { display: flex; align-items: center; gap: 6px; }
.sa-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.sa-f .row { gap: 8px; margin: 6px 0; }
.sa-code { font-variant-numeric: tabular-nums; letter-spacing: .08em; }
.sa-revoke, .sa-sec .note { display: flex; gap: 8px; align-items: flex-start; }
.sa-mine { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 8px 12px; border: 1px solid var(--line, #e4e0d6); border-radius: 10px; font-size: 14px; }
.sa-tbl code { font-size: 13px; white-space: nowrap; }
.sa-tbl tr.is-revoke td { background: color-mix(in srgb, #b4442c 7%, transparent); }
.sa-hub { margin-bottom: 16px; padding: 18px 20px; }
.sa-hub .h3 { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; }
.sa-tbl td:nth-child(3) { white-space: nowrap; }
/* section 6: four folders for production on a phone: wrap instead of pushing the page sideways */
.mx-page--big .mx-bigseg { display: flex; flex-wrap: wrap; max-width: 100%; }
@media (max-width: 520px) { .mx-page--big .mx-bigseg button { padding: 9px 12px; font-size: 14px; flex: 1 1 auto; } }
/* ==== Nov 3 (NC): All mail ==== the small mailbox label on each email (tokens only, so light and dark follow the theme) */
.mx-boxlbl { flex: none; display: inline-flex; align-items: center; height: 17px; padding: 0 6px; border: 1px solid var(--line-2); border-radius: 4px; font-size: 10.5px; font-weight: 500; letter-spacing: .01em; line-height: 1; color: var(--ink-2); background: var(--surface-2); white-space: nowrap; }
.mx-row.unread .mx-boxlbl { font-weight: 600; }
.mx-boxlbl--read { vertical-align: 1px; margin-left: 2px; }
.mx-tabs [data-k="all"] { font-weight: 600; }
html.ipad .mx-boxlbl { height: 20px; font-size: 12px; padding: 0 8px; }
@media (max-width: 760px) { .mx-boxlbl { height: 16px; font-size: 10px; padding: 0 5px; } }
/* Nov 3 (NC): the iPad (side by side): the folder tabs stay on one line that scrolls sideways, and the list card scrolls as a
   whole when the filters and the selection bar take its height, so the emails under a selection can still be reached */
@media (min-width: 761px) {
  html.ipad .mx-folders { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  html.ipad .mx-folders::-webkit-scrollbar { display: none; }
  html.ipad .mx-list { overflow-y: auto; overscroll-behavior: contain; }
  html.ipad .mx-list-in { flex: 1 0 auto; min-height: 260px; overflow-y: visible; }
}
/* ==== Mail keys and actions (Oct 27) ==== the keys next to the buttons, the folders, the row's tick and star, the selection
   bar, the composer (Cc, Bcc), the snooze picker, the shortcut sheet, the Undo toast and the phone swipes. Tokens only, so
   dark mode follows the theme. The iPad (html.ipad) gets large targets; a phone hides the key hints. */
.xk-k { display: inline-block; margin-left: 6px; padding: 0 5px; min-width: 18px; border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 4px; font: 500 10.5px/15px var(--sans); color: var(--muted); text-align: center; background: var(--surface); vertical-align: 1px; white-space: nowrap; letter-spacing: 0; }
.btn--primary .xk-k, .chip.on .xk-k { background: transparent; color: inherit; border-color: currentColor; opacity: .7; }
.xk-k--inv { background: transparent; color: inherit; border-color: rgba(220, 217, 206, .45); opacity: .85; }
html.xk-nohints .xk-k { display: none; }
.xk-hintline { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; justify-content: center; }
.xk-hintline .xk-k { margin-left: 0; }
.xk-hbtn { gap: 4px; padding-left: 10px; padding-right: 10px; }
.xk-hlabel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* folders */
.xk-folders { display: flex; flex-wrap: wrap; gap: 2px 2px; }
.xk-fold { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 999px; font-size: 12.5px; color: var(--ink-2); min-height: 28px; }
.xk-fold:hover { background: var(--surface-2); }
.xk-fold.on { background: var(--btn); color: var(--on-btn); }
.xk-fold.on .mx-n { background: var(--on-btn); color: var(--btn); }
.mx-n--quiet { background: var(--line-2); color: var(--ink); }
.mx-n--warn { background: var(--warn); }
.mx-search { position: relative; }
.mx-search > .xk-k { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); margin: 0; pointer-events: none; }
.mx-search input { padding-right: 34px; }
.xk-fnote { margin: 0; padding: 7px 12px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.xk-empty { margin-left: 6px; }
.xk-empty .ic { width: 14px; height: 14px; }
/* rows: tick, the email, star; the cursor (J, K) and the picked rows */
.mx-row { display: block; padding: 0; position: relative; overflow: hidden; cursor: default; }
.xk-sw-fg { display: flex; align-items: stretch; background: var(--surface); position: relative; z-index: 1; touch-action: pan-y; }
.mx-row:hover .xk-sw-fg { background: var(--surface-2); }
.mx-row.on .xk-sw-fg { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--ink); }
.mx-row.cur:not(.on) .xk-sw-fg { box-shadow: inset 3px 0 0 var(--accent); }
.mx-row.picked .xk-sw-fg { background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
.mx-row.on { box-shadow: none; }
.mx-row-main { display: grid; gap: 2px; flex: 1; min-width: 0; padding: 10px 2px 10px 0; text-align: left; cursor: pointer; }
.mx-row-main:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.mx-rowwrap .mx-row { border-bottom: 0; }
.xk-tick { flex: none; width: 34px; display: grid; place-items: start center; padding-top: 11px; color: transparent; }
.xk-tick .ic { width: 16px; height: 16px; border: 1.5px solid var(--line-2); border-radius: 4px; padding: 1px; stroke-width: 2.4; color: transparent; background: var(--surface); }
.mx-row:hover .xk-tick .ic, .mx-row.cur .xk-tick .ic, .xk-tick:focus-visible .ic { border-color: var(--muted); }
.xk-tick[aria-pressed="true"] .ic { background: var(--btn); border-color: var(--btn); color: var(--on-btn); }
.xk-tick--all { width: 22px; padding: 0; place-items: center; }
.xk-star { flex: none; width: 34px; display: grid; place-items: start center; padding-top: 9px; color: var(--line-2); }
.xk-star .ic { width: 17px; height: 17px; }
.xk-star:hover { color: var(--muted); }
.xk-star.on { color: var(--accent); } .xk-star.on .ic { fill: currentColor; }
.xk-when { display: inline-flex; align-items: center; gap: 3px; color: var(--accent); font-weight: 500; }
.xk-when .ic { width: 12px; height: 12px; }
/* the selection bar */
.xk-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--surface-2); font-size: 13px; }
.xk-bulk > b { margin-right: 4px; }
.xk-bulk .btn .ic { width: 14px; height: 14px; }
.xk-bulk .btn--sm { min-height: 28px; padding: 3px 8px; font-size: 12px; gap: 4px; }
.xk-bulk .btn--sm .xk-k { margin-left: 3px; }
.mx-fchips .chip .xk-k { margin-left: 4px; }
.xk-bulk--big { padding: 10px 0; background: transparent; border: 0; gap: 8px; }
/* the reading pane's buttons */
.xk-acts { align-items: center; }
.xk-acts .btn .ic, .xk-bigmoves .btn .ic { width: 14px; height: 14px; }
.xk-sep { flex: 0 0 1px; align-self: stretch; background: var(--line); margin: 2px 4px; }
.xk-bigmoves .btn { font-size: 15px; }
.xk-snzline, .mx-read > .xk-snzline { display: flex; align-items: center; gap: 8px; margin: 12px 16px 0; }
.xk-private { font-style: italic; }
/* the composer */
.xk-cmp { gap: 6px; grid-template-columns: minmax(0, 1fr); min-width: 0; }   /* a long address or button row never pushes it wider than the pane */
.xk-cmp-h { display: flex; align-items: center; gap: 8px; }
.xk-cmp-h .xk-cmp-x { margin-left: auto; width: 30px; height: 30px; }
.xk-f { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); padding: 2px 0; }
.xk-f > span:first-child { flex: 0 0 64px; font-size: 13px; color: var(--muted); }
.xk-cmp .xk-f input:not([type=checkbox]), .xk-cmp .xk-f select { flex: 1; min-width: 0; width: auto; border: 0; background: transparent; padding: 7px 2px; border-radius: 0; box-shadow: none; min-height: 36px; }
.xk-cmp .xk-f input:focus, .xk-cmp .xk-f select:focus { outline: none; box-shadow: none; }
.xk-f:focus-within { border-bottom-color: var(--accent); }
.xk-f:focus-within > span:first-child { color: var(--ink); }
.xk-f--msg { border: 0; padding-top: 6px; }
.xk-f--msg textarea { width: 100%; min-height: 120px; }
.xk-torow { display: flex; align-items: center; gap: 8px; }
.xk-torow .xk-f { flex: 1; min-width: 0; }
.xk-ccb { display: inline-flex; gap: 10px; flex: none; }
.xk-subjline { margin: 4px 0 0; overflow-wrap: anywhere; }
.xk-fnote2 { margin: 0; }
.xk-cmp-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
.xk-cmp-acts .xk-sep { flex: 1 1 auto; background: transparent; }
.xk-cmp-help { margin: 0; }
.xk-cmp-modal .xk-cmp { margin: 0; border: 0; background: transparent; padding: 0; }
.xk-cmp-modal .xk-cmp-h b { font-family: var(--display); font-size: 20px; font-weight: 500; }
.xk-cmp-modal .xk-cmp-x { display: none; }   /* the window has its own close button */
/* the snooze picker */
.xk-snz { display: grid; gap: 12px; }
.xk-snz-h { display: flex; align-items: baseline; gap: 12px; } .xk-snz-h .h3 { margin: 0; } .xk-snz-h .muted { margin-left: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%; }
.xk-snz-type { display: flex; align-items: center; gap: 10px; padding: 0 12px; border: 1.5px solid var(--line-2); border-radius: var(--r-lg); background: var(--surface-2); }
.xk-snz-type:focus-within { border-color: var(--accent); }
.xk-snz-type input:not([type=checkbox]) { flex: 1; border: 0; background: transparent; padding: 11px 0; min-width: 0; box-shadow: none; }
.xk-snz-type input:focus { outline: none; box-shadow: none; }
.xk-snz-type .ic { color: var(--muted); }
.xk-snz-say { margin: -4px 0 0; } .xk-snz-say.xk-ok { color: var(--ok); }
.xk-snz-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.xk-snz-o { display: grid; gap: 3px; text-align: left; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface-2); min-height: 56px; }
.xk-snz-o:hover, .xk-snz-o:focus-visible { border-color: var(--ink-2); }
.xk-snz-o .muted { font-variant-numeric: tabular-nums; }
/* the shortcut sheet and the settings */
.xk-sheet-g { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 6px 26px; margin: 8px 0 14px; }
.xk-sheet-g section .label { margin: 12px 0 4px; }
.xk-sheet dl { margin: 0; display: grid; gap: 4px; }
.xk-sheet dl > div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; align-items: baseline; font-size: 13.5px; }
.xk-sheet dt { white-space: nowrap; } .xk-sheet dt .xk-k { margin-left: 0; margin-right: 2px; }
.xk-sheet dd { margin: 0; color: var(--ink-2); }
.xk-set .label { margin: 16px 0 6px; }
.xk-blocks { list-style: none; margin: 8px 0 14px; padding: 0; display: grid; gap: 6px; }
.xk-blocks li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r); overflow-wrap: anywhere; }
/* the toast with Undo */
#toasts .xk-toast { pointer-events: auto; display: flex; align-items: center; gap: 12px; text-align: left; padding: 9px 10px 9px 16px; }
.xk-toast-t { flex: 1; min-width: 0; font-variant-numeric: tabular-nums; }
.xk-toast-b { padding: 5px 11px; border-radius: 999px; background: rgba(220, 217, 206, .14); color: inherit; font-weight: 600; font-size: 13px; white-space: nowrap; display: inline-flex; align-items: center; }
.xk-toast-b:hover { background: rgba(220, 217, 206, .24); }
.xk-toast-x { width: 26px; height: 26px; display: grid; place-items: center; color: inherit; opacity: .6; border-radius: 50%; }
.xk-toast-x .ic { width: 14px; height: 14px; }
.xk-g { position: fixed; left: 50%; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 91; display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--shadow); font-size: 12.5px; color: var(--ink-2); }
.xk-g .xk-k { margin: 0; }
/* production's big inbox */
.mx-bigwrap { position: relative; overflow: hidden; border-radius: var(--r-lg); }
.mx-bigwrap .xk-sw-fg { background: transparent; align-items: stretch; gap: 0; }
.mx-bigwrap .mx-bigrow { flex: 1; min-width: 0; border-radius: 0; }
.xk-tick--big, .xk-star--big { width: 48px; place-items: center; padding: 0; background: var(--surface); border: 1px solid var(--line); }
.xk-tick--big { border-right: 0; border-radius: var(--r-lg) 0 0 var(--r-lg); } .xk-star--big { border-left: 0; border-radius: 0 var(--r-lg) var(--r-lg) 0; }
.xk-tick--big .ic { width: 20px; height: 20px; }
.xk-star--big .ic { width: 20px; height: 20px; }
.mx-bigwrap.cur .mx-bigrow { box-shadow: inset 3px 0 0 var(--accent); }
.mx-bigwrap.picked .mx-bigrow { background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
.mx-fchips--big { margin-bottom: 4px; }
.mx-fchips--big .chip { padding: 8px 14px; font-size: 14px; }
/* phone swipes */
.xk-sw-bg { position: absolute; inset: 0; display: flex; align-items: center; gap: 8px; padding: 0 22px; color: #fff; font-weight: 600; font-size: 14px; background: var(--line-2); opacity: 0; }
.mx-row.xk-swiping .xk-sw-bg, .mx-bigwrap.xk-swiping .xk-sw-bg { opacity: 1; }
.xk-sw-bg.xk-sw-r { justify-content: flex-end; }
.xk-sw-bg .ic { width: 20px; height: 20px; }
.xk-sw-bg:not(.is-on) { background: var(--line-2); color: var(--ink); }
.xk-sw-bg.is-on.xk-sw--done { background: var(--ok); }
.xk-sw-bg.is-on.xk-sw--in { background: var(--ink-2); }
.xk-sw-bg.is-on.xk-sw--snz { background: var(--warn); }
.xk-sw-bg.is-on.xk-sw--trash { background: var(--bad); }
.xk-sw-bg.is-on.xk-sw--read { background: var(--accent); }
:root[data-theme="dark"] .xk-sw-bg.is-on { color: #20201e; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .xk-sw-bg.is-on { color: #20201e; } }
.mx-row.xk-swiping .xk-sw-fg, .mx-bigwrap.xk-swiping .xk-sw-fg { box-shadow: 0 0 0 1px var(--line); }
/* the iPad: large buttons and targets */
html.ipad .xk-acts .btn, html.ipad .xk-bulk .btn, html.ipad .xk-cmp-acts .btn { min-height: 48px; font-size: 14.5px; padding-left: 14px; padding-right: 14px; }
html.ipad .xk-tick, html.ipad .xk-star { width: 46px; }
html.ipad .xk-fold { min-height: 48px; padding: 8px 14px; font-size: 14px; }   /* review NICE 1 */
html.ipad .xk-tick--all { width: 44px; min-height: 44px; }
html.ipad .xk-snz-o { min-height: 68px; }
html.ipad .xk-f input, html.ipad .xk-f select { min-height: 44px; font-size: 16px; }
@media (max-width: 760px) {
  .xk-k, .xk-hintline { display: none; }
  .xk-hbtn[data-act="xk-sheet"], .xk-acts .xk-sep { display: none; }
  .mx-row-main { padding: 12px 2px 12px 0; }
  .xk-snz-opts { grid-template-columns: 1fr 1fr; }
  .xk-acts .btn .xk-bl { display: inline; }
  .xk-f > span:first-child { flex-basis: 44px; }
  .xk-sheet dl > div { grid-template-columns: 80px minmax(0, 1fr); }
  .xk-g { display: none; }
}
/* review SHOULD 5: the composer's file input is visually hidden for real (the global input rule gave it width 100%, wider
   than a phone), and toasts never run past the screen */
.att input[type=file].sr-only { position: absolute; width: 1px; min-width: 0; height: 1px; min-height: 0; padding: 0; margin: -1px; border: 0; overflow: hidden; clip: rect(0 0 0 0); }
.att-drop { position: relative; max-width: 100%; }
#toasts { max-width: calc(100vw - 32px); }
#toasts .xk-toast { max-width: 100%; flex-wrap: wrap; }
.xk-folders.mx-folders { width: auto; } .xk-folders.mx-folders button { flex: none; }
/* ==== end Mail keys and actions ==== */
/* ==== Part C: marketing ==== Studio OS > Emails menu and Marketing (28-marketing.js) */
/* the Emails menu in the sidebar */
.nav-parent { width: 100%; }
.nav-caret { margin-left: auto; display: inline-flex; color: var(--muted); }
.nav-caret .ic { width: 14px; height: 14px; }
.nav-sub { display: grid; gap: 1px; margin: 2px 0 4px 26px; padding-left: 10px; border-left: 1px solid var(--line); }
.nav-sub[hidden] { display: none; }
.nav-sub-i { padding: 6px 10px; font-size: 13px; }
.nav-sub-i.on::before { left: -23px; }

/* page */
.mk .phead { flex-wrap: wrap; }
.mk-tabs { margin: 4px 0 16px; }
.mk-body { display: grid; gap: 16px; min-width: 0; }
.mk-banner { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; padding: 10px 14px; border-radius: var(--r); background: var(--accent-soft); color: var(--ink); margin: 0 0 10px; font-size: 13px; }
.mk-banner > div { flex: 1 1 260px; min-width: 0; }
.mk-banner > .ic { margin-top: 2px; }
.mk-banner--warn { background: var(--warn-soft); }
.mk-banner--muted { background: var(--surface-2); border: 1px solid var(--line); }
.mk-banner ul { margin: 6px 0 0; padding-left: 18px; }
.mk-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.mk-kpi { padding: 14px 16px; display: grid; gap: 4px; align-content: start; }
.mk-sec { padding: 16px 18px; min-width: 0; }
.mk-sec > .row:first-child { margin-bottom: 8px; }
.mk-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 16px; align-items: start; }
.mk-list { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 6px; }
.mk-rows { list-style: none; margin: 8px 0 0; padding: 0; }
.mk-rows li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.mk-rows li:first-child { border-top: 0; }
.mk-rows li > div:first-child { display: grid; min-width: 0; }
.mk-sub { display: block; }
.mk-tbl td { vertical-align: top; }
.mk-tbl .mk-ck { width: 34px; padding-right: 0; }
.mk-yes { color: var(--ok); font-weight: 600; display: inline-flex; gap: 4px; align-items: center; }
.mk-bad { color: var(--bad); }
.mk-ctop { margin-bottom: 4px; }
.mk-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.mk-filters .field { margin: 0; }
.mk-filters select { max-width: 200px; }
.mk-search { position: relative; flex: 1 1 240px; }
.mk-search .ic { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.mk-filters .mk-search input { padding-left: 32px; width: 100%; }
.mk-bulk { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 14px; }
.mk-bulk input, .mk-bulk select { max-width: 180px; }
.mk-why { padding: 8px 12px; border-radius: var(--r); background: var(--ok-soft); margin: 10px 0 0; font-size: 13px; }
.mk-why--no { background: var(--warn-soft); }
.mk-quote { margin: 6px 0 10px; padding: 8px 12px; border-left: 2px solid var(--line-2); color: var(--ink-2); font-size: 13px; }
.mk-tl { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.mk-tl li { display: grid; grid-template-columns: 150px 1fr; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13px; }
.mk-big { font: 500 22px/1.2 var(--display); margin: 4px 0; }
.mk-dl { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 6px 12px; margin: 10px 0 14px; }
.mk-dl dt { color: var(--muted); font-size: 12.5px; } .mk-dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.mk-code { font-size: 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 4px; padding: 4px 8px; overflow-wrap: anywhere; }
.mk-note { margin: 0; display: flex; gap: 6px; align-items: flex-start; }
.mk-url { overflow-wrap: anywhere; max-width: 360px; }
.mk-progress { padding: 14px 16px; display: grid; gap: 8px; }
.mk-bar { height: 8px; background: var(--surface-2); border-radius: 4px; overflow: hidden; }
.mk-bar i { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
.mk-rule { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
.mk-rule select, .mk-rule input { max-width: 220px; }
.mk-rule input[type=number] { width: 80px; }
.mk-rules { margin: 8px 0; }
.mk-match { margin: 4px 0 8px; }
.mk-count { padding: 12px 14px; margin: 12px 0; }
.mk-prev { margin: 6px 0 0; padding-left: 18px; font-size: 13px; }
.mk-map { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 0 12px; margin-top: 12px; }
.mk-prev-tbl { max-height: 180px; overflow: auto; }
.mk-radio { padding: 6px 0; }
.mk-srcbar { margin: 10px 0 6px; flex-wrap: wrap; }
.mk-srctbl { max-height: 46vh; overflow: auto; margin-bottom: 12px; }
.mk-imggrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; margin: 6px 0 10px; }
.mk-imggrid button { display: grid; gap: 4px; border: 1px solid var(--line); border-radius: var(--r); padding: 4px; text-align: left; background: var(--surface); }
.mk-imggrid button:hover { border-color: var(--ink-2); }
.mk-imggrid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 4px; }

/* the designer */
.mk-dhead { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 8px; }
.mk-dhead .back { margin: 0; }
.mk-name { font: 500 20px/1.2 var(--display); letter-spacing: .03em; border: 1px solid transparent; background: transparent; padding: 4px 6px; border-radius: 4px; min-width: 0; flex: 1 1 220px; }
.mk-name:hover, .mk-name:focus { border-color: var(--line-2); background: var(--surface); }
.mk-steps { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 14px; }
.mk-steps button { padding: 6px 12px; border-radius: 99px; border: 1px solid var(--line-2); font-size: 13px; font-weight: 500; color: var(--muted); }
.mk-steps button.on { background: var(--btn); color: var(--on-btn); border-color: var(--btn); }
.mk-design { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.mk-dleft { min-width: 0; }
.mk-dtools { margin-bottom: 10px; }
.mk-dright { padding: 16px; position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow: auto; min-width: 0; }
.mk-dright .h3 { margin-bottom: 10px; }
.mk-dnext { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.mk-dright .mk-dnext { padding-top: 12px; border-top: 1px solid var(--line); }
.mk-pfoot { margin-top: 16px; padding-top: 10px; border-top: 1px solid var(--line); }
.mk-canvas { background: #e6e3da; border-radius: var(--r-lg); padding: 18px 12px; }
.mk-paper { max-width: 600px; margin: 0 auto; background: #f3f1eb; color: #20201e; box-shadow: var(--shadow); font: 15px/1.6 Helvetica, Arial, sans-serif; }
.mk-block { position: relative; border: 1px dashed transparent; }
.mk-block:hover { border-color: #bdb7a7; }
.mk-block.on { border: 1px solid #4a0000; }
.mk-block.drag { opacity: .4; }
.mk-block.drop-b { box-shadow: 0 -3px 0 #4a0000; } .mk-block.drop-a { box-shadow: 0 3px 0 #4a0000; }
.mk-block-bar { display: flex; align-items: center; gap: 6px; padding: 2px 6px; min-height: 26px; background: rgba(32,32,30,.04); }
.mk-block-bar .label { color: #6a665c; }
.mk-block-acts { margin-left: auto; display: flex; gap: 2px; opacity: .55; }
.mk-block:hover .mk-block-acts, .mk-block.on .mk-block-acts, .mk-block-acts:focus-within { opacity: 1; }
.mk-block-acts .icon-btn { width: 26px; height: 26px; color: #3b3a35; }
.mk-drag { cursor: grab; color: #6a665c; display: inline-flex; }
.mk-block-in { display: block; width: 100%; text-align: left; padding: 12px 32px; color: #20201e; cursor: pointer; }
.mk-block-in img { max-width: 100%; height: auto; display: inline-block; }
.mk-block--locked .mk-block-bar .muted { color: #6a665c; display: inline-flex; gap: 4px; align-items: center; }
.mk-b-logo { display: grid; gap: 6px; }
.mk-b-logo .wm { height: 14px; color: #20201e; }
.mk-b-logo span { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #6a665c; }
.mk-b-h { font-weight: 500; line-height: 1.25; } .mk-b-h--l { font-size: 24px; } .mk-b-h--m { font-size: 20px; } .mk-b-h--s { font-size: 17px; }
.mk-b-t p { margin: 0 0 10px; } .mk-b-t a { color: #4a0000; }
.mk-b-btn { display: inline-block; background: #4a0000; color: #f3f1eb; padding: 10px 18px; border-radius: 2px; font-size: 14px; }
.mk-b-btn--o { background: transparent; color: #20201e; border: 1px solid #20201e; }
.mk-b-hr { border: 0; border-top: 1px solid #cfcabc; margin: 6px 0; }
.mk-b-sp { display: flex; align-items: center; justify-content: center; background: repeating-linear-gradient(45deg, transparent 0 6px, rgba(32,32,30,.05) 6px 12px); }
.mk-b-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; font-size: 14px; }
.mk-b-cols img { width: 100%; margin-bottom: 8px; }
.mk-b-soc { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.mk-b-foot { font-size: 12px; line-height: 1.6; color: #6a665c; border-top: 1px solid #cfcabc; padding-top: 12px; }
.mk-b-empty { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 22px; border: 1px dashed #bdb7a7; color: #6a665c; font-size: 13px; }
.mk-b-prods { display: grid; gap: 18px; } .mk-b-prods--grid { grid-template-columns: 1fr 1fr; }
.mk-b-prods > div { display: grid; gap: 4px; align-content: start; } .mk-b-prods img { width: 100%; margin-bottom: 6px; }
.mk-b-prods .mk-b-btn { justify-self: start; margin-top: 6px; font-size: 13px; padding: 8px 14px; }
.mk-addbar { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 32px; border-top: 1px dashed #cfcabc; border-bottom: 1px dashed #cfcabc; background: rgba(32,32,30,.02); }
.mk-addbar .chip { background: #f3f1eb; color: #20201e; border-color: #bdb7a7; }
.mk-merge { margin: -6px 0 12px; }
.mk-rtb { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 6px; }
.mk-rich { min-height: 120px; max-height: 320px; overflow: auto; border: 1px solid var(--line-2); border-radius: var(--r); padding: 8px 10px; background: var(--surface); margin-bottom: 10px; }
.mk-rich:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.mk-rich p { margin: 0 0 8px; }
.mk-imgpick { display: grid; gap: 8px; margin-bottom: 12px; }
.mk-imgpick img { max-height: 140px; width: auto; max-width: 100%; border-radius: 4px; border: 1px solid var(--line); }
.mk-mats { display: grid; gap: 6px; max-height: 340px; overflow: auto; margin: 0 0 10px; }
.mk-mat { display: grid; grid-template-columns: 44px 1fr auto; gap: 8px; align-items: center; padding: 6px; border: 1px solid var(--line); border-radius: var(--r); }
.mk-mat img, .mk-mat-ph { width: 44px; height: 44px; object-fit: cover; border-radius: 4px; background: var(--surface-2); display: block; }
.mk-mat > div:nth-child(2) { display: grid; gap: 2px; min-width: 0; font-size: 13px; }
.mk-mat .pill { justify-self: start; }
.mk-pvwrap { display: grid; gap: 10px; }
.mk-inbox { font-size: 13px; padding: 8px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); min-width: 0; flex: 1 1 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-frame { background: #e6e3da; border-radius: var(--r-lg); padding: 12px; display: flex; justify-content: center; }
.mk-frame iframe { width: 100%; height: 760px; border: 0; background: #e6e3da; display: block; }
.mk-frame--mobile iframe { width: 390px; max-width: 100%; border: 8px solid #20201e; border-radius: 22px; height: 720px; }
.mk-frame--small iframe { height: 520px; }

/* report chart: opens #9a3324 / clicks #0b6f96 (validated, light); dark: #d4705c / #3ea0cf */
.mk-chart { margin: 0; position: relative; }
.mk-chart figcaption { margin-bottom: 8px; flex-wrap: wrap; gap: 8px; }
.mk-legend { display: inline-flex; gap: 14px; align-items: center; font-size: 12.5px; color: var(--ink-2); flex-wrap: wrap; }
.mk-legend > span { display: inline-flex; gap: 6px; align-items: center; }
.mk-sw { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }
.mk-sw--o, .mk-line--o { --c: #9a3324; } .mk-sw--c, .mk-line--c { --c: #0b6f96; }
.mk-sw { background: var(--c); }
.mk-plot { position: relative; padding: 0 64px 26px 34px; }
.mk-area { position: relative; height: 200px; }
.mk-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.mk-grid { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.mk-line { fill: none; stroke: var(--c); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.mk-yt { position: absolute; left: -34px; width: 28px; text-align: right; transform: translateY(-50%); font-size: 11px; color: var(--muted); }
.mk-xt { position: relative; height: 18px; margin-top: 8px; }
.mk-xt span { position: absolute; transform: translateX(-50%); font-size: 11px; color: var(--muted); white-space: nowrap; }
.mk-xt span:first-child { transform: none; }
.mk-lbl { position: absolute; left: calc(100% + 8px); transform: translateY(-50%); font-size: 11px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.mk-hit { fill: transparent; cursor: crosshair; }
.mk-hit:hover { fill: var(--hatch); }
.mk-tip { position: absolute; z-index: 2; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r); padding: 6px 10px; font-size: 12.5px; box-shadow: var(--shadow); pointer-events: none; width: 220px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mk-sw--o, :root:not([data-theme="light"]) .mk-line--o { --c: #d4705c; } :root:not([data-theme="light"]) .mk-sw--c, :root:not([data-theme="light"]) .mk-line--c { --c: #3ea0cf; } }
:root[data-theme="dark"] .mk-sw--o, :root[data-theme="dark"] .mk-line--o { --c: #d4705c; } :root[data-theme="dark"] .mk-sw--c, :root[data-theme="dark"] .mk-line--c { --c: #3ea0cf; }

@media (max-width: 900px) {
  .mk-design { grid-template-columns: minmax(0, 1fr); }
  .mk-dright { position: static; max-height: none; }
}
@media (max-width: 760px) {
  .mk-block-in { padding: 10px 14px; }
  .mk-addbar { padding: 10px 14px; }
  .mk-canvas { padding: 10px 0; margin: 0 -4px; }
  .mk-b-cols, .mk-b-prods--grid { grid-template-columns: 1fr; }
  .mk-tl li { grid-template-columns: 1fr; gap: 2px; }
  .mk-filters select { max-width: none; flex: 1 1 150px; }
  .mk-filters .field { flex: 1 1 150px; }
  .mk-frame { padding: 6px; } .mk-frame iframe { height: 620px; }
  .mk-dl { grid-template-columns: 1fr; gap: 0 0; } .mk-dl dd { margin-bottom: 8px; }
}
/* ==== end Part C: marketing ==== */

/* Fable fix 3: the express consent form in Add from Studio OS */
.mk-attest { padding: 12px 14px; margin: 0 0 10px; }
.mk-attest-t { margin-top: 10px; }

/* ==== Part C: marketing (templates) ==== the template picker and the studio canvas */
.mk-tpls { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: 12px; margin: 0 0 14px; }
.mk-tpl { position: relative; display: grid; gap: 6px; padding: 8px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); cursor: pointer; }
.mk-tpl:hover { border-color: var(--line-2); }
.mk-tpl:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.mk-tpl input { position: absolute; opacity: 0; pointer-events: none; }
.mk-tpl:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.mk-tpl img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: top; border-radius: 3px; background: #f6f4ef; border: 1px solid var(--line); }
.mk-tpl b { font-size: 13px; font-weight: 500; }
.mk-tpl .sm { line-height: 1.4; }
.mk-paper--studio { box-shadow: var(--shadow); font: inherit; }
.mk-sblock .mk-block-in.mk-sin { padding: 0; }
.mk-frag { pointer-events: none; overflow: hidden; }
.mk-frag table { border-collapse: collapse; }
.mk-frag img { max-width: 100%; height: auto; }
.mk-ph { display: flex; gap: 6px; align-items: flex-start; margin: 0 0 10px; padding: 8px 12px; border-radius: var(--r); background: #f1e3c4; color: #20201e; font-size: 13px; }
.mk-space { margin: 10px 0; }
.mk-space summary { cursor: pointer; font-size: 13px; color: var(--ink-2); }
.mk-list-f { display: grid; gap: 8px; }
.mk-li { padding: 10px; border: 1px solid var(--line); border-radius: var(--r); }
.mk-quick { margin: -4px 0 10px; }
.mk-imgpick img.mk-portrait { width: 96px; height: 96px; object-fit: cover; border-radius: 50%; filter: grayscale(1); }
.mk-imgpick img.mk-composite, .field img.mk-composite { max-height: none; width: 100%; border: 1px solid var(--line); border-radius: 4px; }
.mk-pvwrap { grid-template-columns: minmax(0, 1fr); }   /* a long preview text never pushes the page sideways */
.mk-pvwrap > .row > * { min-width: 0; }
.mk-pfoot { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); }
/* ==== end Part C: marketing (templates) ==== */
/* ==== Part D: Finance (Studio OS: owner and studio managers; the hub: the bill-to party and production) ==== */
.fn-page .fn-tabs { margin: 0 0 18px; }
.fn-page > .card, .fn-grid > .card { margin-bottom: 14px; }
.fn-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin: 0 0 14px; }
.fn-tile { display: grid; gap: 3px; padding: 12px 14px; }
.fn-tile b { font: 500 22px/1.15 var(--display, inherit); color: var(--ink); }
.fn-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 0 14px; align-items: start; }
.fn-t td.num, .fn-t th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fn-t td { vertical-align: middle; }
.fn-t select { font: inherit; padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); }
.fn-tw { max-width: 100%; }
.fn-ags { display: grid; gap: 10px; }
.fn-ag { display: grid; grid-template-columns: 110px 1fr auto; gap: 10px; align-items: center; font-size: 13px; }
.fn-ag i { display: block; height: 10px; min-width: 2px; border-radius: 5px; background: var(--accent); }
.fn-ag:nth-child(2) i { background: var(--warn); } .fn-ag:nth-child(3) i, .fn-ag:nth-child(4) i { background: var(--bad); }
.fn-ag b { font-variant-numeric: tabular-nums; }
.fn-proj { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.fn-pm { display: grid; gap: 4px; justify-items: start; min-width: 0; }
.fn-stack { display: flex; flex-direction: column-reverse; width: 100%; height: 110px; border-bottom: 1px solid var(--line); }
.fn-stack i { display: block; width: 100%; }
.fn-s1 { background: var(--accent); } .fn-s2 { background: var(--ok); opacity: .7; } .fn-s3 { background: var(--line-2, var(--line)); }
.fn-key { display: flex; gap: 6px 12px; flex-wrap: wrap; align-items: center; }
.fn-key i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.fn-prob { width: 64px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; font: inherit; text-align: right; background: var(--surface); color: var(--ink); }
.fn-filters { gap: 10px; align-items: end; }
.fn-filters input[type=search] { flex: 1 1 200px; min-width: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r); font: inherit; background: var(--surface); color: var(--ink); }
.fn-date { margin: 0; }
.fn-exports { display: grid; gap: 8px; border-top: 1px solid var(--line); }
.fn-ex { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fn-ex > span { min-width: 160px; font-weight: 500; }
.fn-set h2 { margin: 18px 0 4px; } .fn-set h2:first-child { margin-top: 0; }
.fn-set textarea { width: 100%; font: inherit; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); color: var(--ink); }
.fn-pcard .h4 { margin: 16px 0 8px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.fn-tplsel { width: auto; max-width: 100%; font: inherit; font-size: 12px; padding: 3px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); }
.fn-sched { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.fn-sched li { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); }
.fn-sched li > span:nth-child(2) { font-variant-numeric: tabular-nums; }
.fh-sched li { grid-template-columns: 1fr auto; }
.fn-parts { border: 0; padding: 0; margin: 10px 0; display: grid; gap: 6px; }
.fn-inv .pj-dl--money { max-width: 340px; margin-left: auto; }
.fh-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.fh-inv { display: grid; grid-template-columns: 1fr auto auto; gap: 8px 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.fh-inv > div:first-child { display: grid; gap: 2px; }
.fh-amt { display: grid; justify-items: end; font-variant-numeric: tabular-nums; }
.fh-pay { margin-top: 14px; padding: 12px 14px; border-radius: var(--r); background: var(--surface-2, var(--surface)); }
.fh-pay .h4 { margin: 0 0 6px; }
@media (max-width: 720px) {
  .fn-proj { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fn-ag { grid-template-columns: 90px 1fr auto; }
  .fn-sched li { grid-template-columns: 1fr auto; }
  .fn-sched li > :last-child { grid-column: 1 / -1; }
  .fh-inv { grid-template-columns: 1fr auto; }
  .fh-inv > .row { grid-column: 1 / -1; }
  .fn-ex > span { min-width: 0; flex-basis: 100%; }
}
/* ==== end Part D ==== */

/* UI fix S12 */
.fn-sched-n { display: block; margin-top: 2px; }
.fn-sched-inv { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
/* ==== Part E: the production dashboard (Today, Board, Projects) ==== */
.pd-page .pd-tabs { margin: 0 0 18px; }
.pd-h1 { font: 400 26px/1.2 var(--display, inherit); margin: 4px 0 0; color: var(--ink); letter-spacing: .01em; }
.pd-hello { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin: 0 0 18px; }
.pd-warn { color: var(--accent); font-weight: 600; }
.pd-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 16px; }
.pd-tile { display: grid; gap: 4px; padding: 14px 16px; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.pd-tile:hover { border-color: var(--line-2, var(--line)); }
.pd-tile-l { font-size: 12px; color: var(--muted); }
.pd-tile-n { font: 400 28px/1.1 var(--display, inherit); color: var(--ink); }
.pd-today { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr) minmax(0, 300px); gap: 14px; align-items: start; }
.pd-sec { margin-bottom: 14px; }
.pd-sched, .pd-acts, .pd-health, .pd-mini, .pd-ck, .pd-lrows { list-style: none; margin: 0; padding: 0; }
.pd-sched li { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 10px; padding: 10px 16px; border-top: 1px solid var(--line); }
.pd-sched li:first-child { border-top: 0; }
.pd-sched li.is-late .pd-when { color: var(--accent); font-weight: 600; }
.pd-when { color: var(--muted); font-size: 12px; padding-top: 2px; }
.pd-li { display: grid; text-align: left; gap: 2px; text-decoration: none; }
.pd-acts li { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 16px; border-top: 1px solid var(--line); }
.pd-acts li:first-child { border-top: 0; }
.pd-age { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.pd-what { min-width: 0; }
.pd-none { display: flex; gap: 8px; align-items: center; }
.pd-health li { padding: 8px 16px; }
.pd-hl { display: grid; gap: 6px; width: 100%; text-align: left; font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.pd-hl-t { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: baseline; }
.pd-hl-t > span:last-child { text-align: right; max-width: 130px; }
.pd-hl-t > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-bar { display: block; height: 6px; border-radius: 3px; background: var(--surface-2, var(--line)); overflow: hidden; }
.pd-bar i { display: block; height: 100%; background: var(--ink); border-radius: 3px; }
.pd-bar.is-late i { background: var(--accent); }
/* board */
.pd-bar-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 6px; }
.pd-search { min-width: 0; flex: 0 1 320px; }
.pd-hint { margin: 0 0 12px; }
.pd-board { max-width: 100%; display: grid; grid-template-columns: repeat(5, minmax(180px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 8px; align-items: start; }
.pd-col { background: var(--surface-2, var(--surface)); border: 1px solid var(--line); border-radius: var(--r); padding: 10px; min-height: 200px; transition: box-shadow .15s; }
.pd-col.is-over { box-shadow: 0 0 0 2px var(--accent) inset; }
.pd-col-h { display: flex; justify-content: space-between; align-items: baseline; }
.pd-col-h .h4 { margin: 0; }
.pd-col-s { margin: 2px 0 10px; }
.pd-col-b { display: grid; gap: 8px; }
.pd-empty { padding: 8px 2px; }
.pd-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; display: grid; gap: 6px; }
.pd-card.is-new { border-color: var(--accent); }
.pd-card.is-late { border-left: 3px solid var(--accent); }
.pd-card.is-dragging { opacity: .4; }
.pd-card-h { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.pd-new { color: var(--accent); font-weight: 600; }
.pd-grip { cursor: grab; touch-action: none; padding: 6px; margin: -6px -6px -6px 0; border-radius: 6px; display: inline-flex; color: var(--muted); }
.pd-grip:hover { background: var(--surface-2, var(--line)); color: var(--ink); }
.pd-card-t { display: grid; gap: 2px; text-align: left; font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.pd-card-f { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pd-card-f .btn { margin-left: auto; }
.pd-ghost { position: fixed; z-index: 1000; pointer-events: none; box-shadow: 0 12px 30px rgba(0, 0, 0, .18); transform: rotate(1.5deg); }
/* projects: the list beside the selected project */
.pd-split { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 16px; align-items: start; }
.pd-list { position: sticky; top: 12px; display: grid; gap: 10px; max-height: calc(100vh - 40px); overflow-y: auto; overflow-x: hidden; min-width: 0; }
.pd-lf button { padding-left: 6px; padding-right: 6px; font-size: 12.5px; white-space: nowrap; }
.pd-lf { width: 100%; }
.pd-lf button { flex: 1; }
.pd-lrows { display: grid; gap: 4px; }
.pd-lrow { display: grid; gap: 2px; width: 100%; text-align: left; font: inherit; color: inherit; background: none; border: 1px solid transparent; border-radius: var(--r); padding: 9px 10px; cursor: pointer; }
.pd-lrow:hover { background: var(--surface); }
.pd-lrow.on { background: var(--surface); border-color: var(--line); }
.pd-lrow-t { display: flex; justify-content: space-between; gap: 6px; align-items: baseline; }
.pd-lrow-t b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-back { display: none; margin: 0 0 10px; }
.pd-pick { display: grid; justify-items: center; gap: 6px; padding: 40px 20px; text-align: center; }
.pd-ws-h { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin: 0 0 14px; }
.pd-ws-h p { margin: 4px 0 0; }
.pd-acts1 { gap: 8px; }
.pd-stagebar { display: grid; grid-template-columns: repeat(13, 1fr); gap: 3px; margin: 0 0 6px; }
.pd-stagebar i { height: 8px; border-radius: 2px; background: var(--surface-2, var(--line)); }
.pd-stagebar i.is-done { background: var(--ink); }
.pd-stagebar i.is-on { background: var(--accent); }
.pd-stageline { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; }
.pd-ws-g { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 14px; align-items: start; }
.pd-ck li { display: flex; align-items: flex-start; gap: 8px; padding: 8px 16px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.pd-ck li:first-child { border-top: 0; }
.pd-ck .check { flex: 1 1 200px; margin: 0; }
.pd-ck-add { gap: 6px; padding: 10px 16px 14px; }
.pd-ck-add input { flex: 1; min-width: 0; padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--r); font: inherit; background: var(--surface); color: var(--ink); }
.pd-mini li { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 9px 16px; border-top: 1px solid var(--line); }
.pd-mini li:first-child { border-top: 0; }
@media (max-width: 1180px) {
  .pd-today { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pd-today > :nth-child(2) { grid-column: 1 / -1; grid-row: 1; }
  .pd-ws-g { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .pd-split { grid-template-columns: minmax(0, 1fr); }
  .pd-split.has-sel .pd-list { display: none; }
  .pd-split.has-sel .pd-back { display: inline-flex; }
  .pd-list { position: static; max-height: none; }
}
@media (max-width: 720px) {
  .pd-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pd-today { grid-template-columns: minmax(0, 1fr); }
  .pd-acts li { grid-template-columns: minmax(0, 1fr) auto; }
  .pd-acts .pd-age { grid-column: 1 / -1; }
  .pd-h1 { font-size: 22px; }
  .pd-board { grid-template-columns: repeat(5, minmax(240px, 80vw)); scroll-snap-type: x mandatory; }
  .pd-col { scroll-snap-align: start; }
}
/* ==== end Part E ==== */
@media (pointer: coarse) { .pd-grip { padding: 14px; margin: -14px -14px -14px 0; } }
/* ==== Part F: schedule, orders, deliveries ==== */
.po-bar { align-items: center; margin-bottom: 12px; }
.po-lbl { margin-left: 6px; }
.po-days { display: grid; gap: 10px; }
.po-days--week { grid-template-columns: repeat(7, minmax(150px, 1fr)); overflow-x: auto; max-width: 100%; padding-bottom: 6px; align-items: start; }
.po-days--day { grid-template-columns: minmax(0, 1fr); }
.po-day { padding: 0; min-width: 0; }
.po-day.is-today { border-color: var(--accent); }
.po-day-h { padding: 10px 12px; border-bottom: 1px solid var(--line); }
.po-free { padding: 10px 12px; margin: 0; }
.po-list { list-style: none; margin: 0; padding: 0; }
.po-it { border-top: 1px solid var(--line); } .po-it:first-child { border-top: 0; }
.po-it.is-done .po-w b, .po-it.is-cancelled .po-w b { text-decoration: line-through; color: var(--muted); }
.po-itb { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 8px; width: 100%; padding: 10px 12px; background: none; border: 0; text-align: left; font: inherit; color: inherit; cursor: pointer; min-height: 44px; }
.po-itb:hover { background: var(--surface-2, var(--surface)); }
.po-t { display: grid; font-variant-numeric: tabular-nums; font-weight: 600; font-size: 13px; }
.po-w { display: grid; gap: 3px; min-width: 0; }
.po-w b { font-weight: 500; overflow-wrap: anywhere; }
.po-it--install { box-shadow: inset 3px 0 0 var(--ok); } .po-it--yard { box-shadow: inset 3px 0 0 var(--warn); } .po-it--measure { box-shadow: inset 3px 0 0 var(--accent); }
.po-otabs { margin: 0 0 12px; }
.po-t td .muted.sm { display: block; }
.po-t tr.is-late td:first-child { box-shadow: inset 3px 0 0 var(--bad, var(--accent)); }
.po-t tr[data-act] { cursor: pointer; }
.po-line { display: grid; grid-template-columns: minmax(0, 1fr) 80px 120px; gap: 8px; }
.pd-sched li.is-done b { text-decoration: line-through; color: var(--muted); }
@media (max-width: 900px) { .po-days--week { grid-template-columns: repeat(7, minmax(220px, 78vw)); scroll-snap-type: x mandatory; } .po-day { scroll-snap-align: start; } }
@media (max-width: 520px) { .po-line { grid-template-columns: minmax(0, 1fr) 64px 96px; } }
/* ==== end Part F ==== */
/* ==== Update G (Oct 17) ==== */
/* "Studio OS was updated, reload" */
.ug-reload { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 9000; display: flex; align-items: center; gap: 14px; padding: 10px 12px 10px 16px; max-width: calc(100vw - 24px); background: var(--ink); color: var(--surface, #f3f1eb); border-radius: 4px; box-shadow: 0 6px 24px rgba(0, 0, 0, .25); font-size: 14px; }
.ug-reload .btn { flex: none; }
@media (max-width: 520px) { .ug-reload { left: 12px; right: 12px; transform: none; bottom: 12px; flex-wrap: wrap; } }
/* the bot check box (booking page, hub sign-in) */
.ts-box { margin: 10px 0 12px; min-height: 65px; }
.ts-box[hidden] { display: none; }
.pub-legal { margin: 12px 0 10px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.pub-legal a, .pub-legal-links a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.pub-legal-links { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; }
.hub-code { margin: 14px 0 6px; padding: 14px; border: 1px solid var(--line); border-radius: 4px; display: grid; gap: 10px; }
.hub-code .h4 { margin: 0; }
/* health card and the Before you open list */
.ug-h-list, .ug-launch { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 2px; }
.ug-h-row, .ug-launch li { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); align-items: start; }
.ug-launch li { padding: 14px 16px; }
.ug-h-row p, .ug-launch p { margin: 4px 0 0; }
.ug-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; background: var(--muted); }
.ug-dot--ok { background: var(--ok, #2f6b3f); }
.ug-dot--warn { background: var(--warn, #b7791f); }
.ug-dot--bad { background: var(--bad, #a33a2b); }
.ug-dot--off { background: transparent; border: 1.5px solid var(--muted); }
.ug-launch-sum { margin: 0 0 12px; }
.ug-launch-banner .row { gap: 14px; }
.ug-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; }
@media (max-width: 760px) { .ug-two { grid-template-columns: 1fr; } }
.row.between { justify-content: space-between; align-items: center; }
/* privacy (erase and export), sign-in help, the door */
.ug-erase-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 12px 0; }
.ug-erase-cols ul { display: grid; gap: 8px; }
.ug-erase-cols li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 6px; }
@media (max-width: 640px) { .ug-erase-cols { grid-template-columns: 1fr; } }
.ug-code { display: grid; gap: 4px; margin: 8px 0; }
.ug-code b { font-size: 28px; letter-spacing: .14em; font-variant-numeric: tabular-nums; }
.ug-help .copyable code { overflow-wrap: anywhere; word-break: break-all; }
.ug-door .btn { margin-left: 8px; }
.sa-code--masked { letter-spacing: .12em; }
/* Mail: start the pipeline from an email */
.ug-start { margin: 0 0 12px; display: grid; gap: 8px; }
.ug-start--new { padding: 12px; border: 1px dashed var(--line-2, var(--line)); border-radius: 4px; }
.ug-start .row { gap: 8px; }
/* Enquiries */
.ug-enq-grid { display: grid; grid-template-columns: minmax(260px, 380px) minmax(0, 1fr); gap: 16px; align-items: start; }
.ug-enq-col { padding: 0; overflow: hidden; }
.ug-enq-list { list-style: none; margin: 0; padding: 0; }
.ug-enq-i { display: grid; gap: 2px; width: 100%; text-align: left; padding: 12px 14px; border: 0; border-bottom: 1px solid var(--line); background: none; color: inherit; cursor: pointer; font: inherit; }
.ug-enq-i:hover, .ug-enq-i:focus-visible { background: var(--surface-2, rgba(0, 0, 0, .03)); }
.ug-enq-i.on { background: var(--surface-2, rgba(0, 0, 0, .05)); box-shadow: inset 3px 0 0 var(--accent); }
.ug-enq-i.is-unread .ug-enq-subj, .ug-enq-i.is-unread .ug-enq-from { font-weight: 600; }
.ug-enq-subj { overflow-wrap: anywhere; }
.ug-enq-read { padding: 18px; min-width: 0; }
.ug-enq-read--empty { display: grid; place-items: center; min-height: 240px; color: var(--muted); }
.ug-enq-h { margin-bottom: 12px; display: grid; gap: 6px; }
.ug-enq-h .h3 { margin: 0; overflow-wrap: anywhere; }
.ug-enq-back { display: none; justify-self: start; }
.ug-enq-body { padding: 14px 0; border-top: 1px solid var(--line); line-height: 1.6; overflow-wrap: anywhere; max-height: 60vh; overflow: auto; }
@media (max-width: 860px) {
  .ug-enq-grid { grid-template-columns: 1fr; }
  .ug-enq.has-sel .ug-enq-col { display: none; }
  .ug-enq:not(.has-sel) .ug-enq-read { display: none; }
  .ug-enq-back { display: inline-flex; }
}
/* older records */
.ug-arch-link { margin: 0 0 6px; text-align: right; }
.ug-arch form.row { gap: 8px; margin: 8px 0 14px; }
.ug-arch form.row input { flex: 1; min-width: 0; }
/* ==== end Update G ==== */
/* Update G: the Before you open banner on the Overview */
.ug-launch-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; padding: 14px 18px; margin: 0 0 18px; border-left: 3px solid var(--accent); }
.ug-launch-banner p { margin: 4px 0 0; }
.ug-launch-banner .row { gap: 8px; }
/* Update G review: Settings > Privacy, erase or export by email address */
.ug-erase-email { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.ug-erase-email .row { gap: 8px; }
.ug-erase-email input { flex: 1; min-width: 200px; }
/* ==== Programa R1 and R5 (builder E): Today's focus, the account door code line, one filter bar on the list pages ==== */
/* ---------- R1: Today ---------- */
.ov3 .ft-head { align-items: flex-end; margin-bottom: 14px; }
.ov3 .ft-head .h1 { margin-top: 4px; }
.ft-date { margin: 0; }
.ft-setup { display: flex; align-items: center; justify-content: space-between; gap: 10px 18px; flex-wrap: wrap; padding: 9px 14px; margin: 0 0 14px; }
.ft-setup .row { gap: 10px 14px; flex-wrap: wrap; align-items: center; }
.ft-setup .label { color: var(--ink); margin: 0; }
.ft-setup .link b { font-weight: 600; }
.ft-bar { display: inline-block; width: 90px; height: 5px; border-radius: 3px; background: var(--sunk); overflow: hidden; vertical-align: middle; }
.ft-bar i { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.ft-counts { display: flex; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); overflow: hidden; }
.ft-count { flex: 1 1 0; min-width: 0; display: grid; gap: 4px; text-align: left; padding: 12px 16px; border: 0; border-right: 1px solid var(--line); background: none; font: inherit; color: var(--ink); cursor: pointer; }
.ft-count:last-child { border-right: 0; }
.ft-count:hover, .ft-count:focus-visible { background: var(--surface-2); }
.ft-count b { font: 400 22px/1 var(--display); font-variant-numeric: tabular-nums; }
.ft-count b.is-red { color: var(--bad); }
.ft-count span { font-size: 12px; color: var(--muted); }
.ov3 .ov-needs { margin: 0 0 18px; }
.ft-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; margin-bottom: 26px; }
@container ov (min-width: 900px) { .ft-grid { grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); } }
.ft { margin: 0; overflow: hidden; }
.ft-h { display: flex; align-items: center; justify-content: space-between; }
.ft-h .row { gap: 8px; align-items: center; }
.ft-n { font-variant-numeric: tabular-nums; }
.ft-list { list-style: none; margin: 0; padding: 0; }
.ft-c { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.ft-c:last-child { border-bottom: 0; }
.ft-ico { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2); }
.ft-ico .ic { width: 16px; height: 16px; }
.ft-ico--ox { background: var(--accent-soft); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 22%, var(--line)); }
.ft-main { min-width: 0; }
.ft-t { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.ft-t b { font-weight: 600; font-size: 14px; }
.ft-age { font: 600 10.5px/1.2 var(--sans); letter-spacing: .12em; color: var(--muted); text-transform: uppercase; white-space: nowrap; }
.ft-age.is-late { color: var(--bad); }
.ft-lock { font-size: 11px; gap: 4px; background: transparent; border: 1px solid var(--line-2); color: var(--ink-2); }
.ft-lock .ic { width: 11px; height: 11px; }
.ft-sub { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.ft-note { margin: 6px 0 0; font-size: 12.5px; color: var(--ink-2); }
.ft-note .ic { width: 14px; height: 14px; color: var(--warn); vertical-align: -2px; margin-right: 4px; }
.ft-act { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.ft-act .btn { white-space: nowrap; }
.ft-done { color: var(--muted); }
.ft-done:hover { color: var(--ok); }
.ft-calm { display: flex; align-items: center; gap: 8px; margin: 0; padding: 18px 16px; color: var(--ink-2); }
.ft-more { list-style: none; margin: 0; padding: 8px 16px 10px 64px; border-top: 1px solid var(--line); display: grid; gap: 4px; font-size: 13px; }
.ft-donel { list-style: none; margin: 0; padding: 8px 16px; border-top: 1px solid var(--line); display: grid; gap: 6px; font-size: 13px; }
.ft-donel li { display: flex; justify-content: space-between; gap: 10px; color: var(--muted); }
.ft-donel .ic { width: 13px; height: 13px; color: var(--ok); vertical-align: -2px; }
.ft-f { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--line); background: var(--surface-2); }
.ft-f .ic { width: 13px; height: 13px; vertical-align: -2px; }
.ft-vote { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--muted); }
.ft-vote .icon-btn .ic { width: 15px; height: 15px; }
.ft-vote .icon-btn.on { color: var(--ink); background: var(--sunk); }
.ft-down .ic, .ft-down.ic { transform: rotate(180deg); }
.ft-stats { border-top: 1px solid var(--line); padding-bottom: 12px; margin-top: 4px; }
.ft-others .ft-ol { list-style: none; margin: 0; padding: 10px 16px 14px; display: grid; gap: 7px; font-size: 13px; }
.ft-others .ft-ol li { display: flex; justify-content: space-between; gap: 12px; }
.ft-others .ft-ol li > span:last-child { text-align: right; }
.ft-votes { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.ft-votes .ic { width: 12px; height: 12px; }
.ft-below { margin-top: 4px; }
/* the showroom today, beside the list: time, then the visit, its pills under it (the mockup's narrow column) */
@container ov (min-width: 900px) {
  .ft-grid .ov-col--today .sched-i { grid-template-columns: 58px minmax(0, 1fr); gap: 4px 10px; align-items: start; padding: 11px 16px; }
  .ft-grid .ov-col--today .sched-t { font-weight: 400; font-size: 12.5px; color: var(--muted); padding-top: 1px; }
  .ft-grid .ov-col--today .sched-b { border-left-width: 2px; }
  .ft-grid .ov-col--today .sched-s { grid-column: 2; flex-direction: row; flex-wrap: wrap; align-items: center; padding-left: 12px; }
}
@container ov (max-width: 700px) {
  .ft-counts { flex-wrap: wrap; }
  .ft-count { flex: 1 1 33%; border-bottom: 1px solid var(--line); }
  .ft-c { grid-template-columns: 34px minmax(0, 1fr); }
  .ft-act { grid-column: 2; flex-wrap: wrap; }
  .ft-more { padding-left: 16px; }
}
/* the iPad: bigger touch targets */
html.ipad .ft-act .btn, html.ipad .ft-done, html.ipad .ft-count { min-height: var(--ip-tap, 44px); }
html.ipad .ft-done { min-width: var(--ip-tap, 44px); }
/* production's Needs your action: Later and Done */
.pdf-btns { display: inline-flex; align-items: center; gap: 2px; }
.pd-acts li:has(.pdf-btns) { grid-template-columns: 70px minmax(0, 1fr) auto auto; gap: 8px 8px; }
.pdf-btns .icon-btn { color: var(--muted); }
.pdf-btns .icon-btn:hover { color: var(--ink); }
.pdf-foot { margin: 0; padding: 8px 16px 12px; }
.pdf-foot .ic { width: 13px; height: 13px; vertical-align: -2px; color: var(--ok); }
@media (max-width: 900px) { .pd-acts li:has(.pdf-btns) { grid-template-columns: minmax(0, 1fr) auto; } .pd-acts li:has(.pdf-btns) .pdf-btns { grid-column: 2; } }
html.ipad .pdf-btns .btn, html.ipad .pdf-btns .icon-btn { min-height: var(--ip-tap, 44px); min-width: var(--ip-tap, 44px); }
/* the door code in the account area */
.side-me .sa-acct { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 10px 0 0; padding: 7px 8px; border: 1px solid var(--line); border-radius: var(--r); font-size: 12.5px; color: var(--ink-2); }
.side-me .sa-acct .ic { width: 14px; height: 14px; }
.side-me .sa-acct .sa-acct-l { font-weight: 500; }
.side-me .sa-acct .sa-code { letter-spacing: .12em; }

/* ---------- R5: the filter bar ---------- */
.lb-views { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 2px; border-bottom: 1px solid var(--line); margin-top: 4px; }
.lb-views-r { display: flex; align-items: flex-end; gap: 2px; margin-left: auto; padding-left: 12px; }
.lb-tab, .lb-view-b { display: inline-flex; align-items: center; gap: 6px; padding: 10px 9px; font-size: 13.5px; color: var(--muted); border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; white-space: nowrap; cursor: pointer; font-weight: 500; }
.lb-tab:hover, .lb-view-b:hover { color: var(--ink); }
.lb-tab.on, .lb-view.on .lb-view-b { color: var(--ink); border-bottom-color: var(--accent); }
.lb-tab i, .lb-view-b i { font-style: normal; font-size: 11px; background: var(--sunk); border-radius: 9px; padding: 1px 7px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.lb-tab i.r { background: var(--accent); color: var(--on-accent); }
.lb-view { display: inline-flex; align-items: center; position: relative; }
.lb-view-b { color: var(--ink-2); }
.lb-view-b .ic { width: 13px; height: 13px; }
.lb-view-x { display: none; position: absolute; right: -4px; top: 2px; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--surface); color: var(--muted); padding: 0; place-items: center; cursor: pointer; }
.lb-view-x .ic { width: 10px; height: 10px; }
.lb-view:hover .lb-view-x, .lb-view:focus-within .lb-view-x { display: grid; }
.lb-save-b .ic { width: 13px; height: 13px; }
.lb-save { display: inline-flex; align-items: center; gap: 6px; padding: 4px 0 6px; }
.lb-save input { min-height: 0; height: 30px; width: 160px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface); font: inherit; font-size: 13px; color: var(--ink); }
.lb-filters { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.lb-filters-r { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-wrap: wrap; }
.lb-search { display: inline-flex; align-items: center; gap: 8px; width: 320px; max-width: 100%; height: 32px; padding: 0 6px 0 12px; border: 1px solid var(--line-2); border-radius: 16px; background: var(--surface); color: var(--muted); }
.lb-search:focus-within { border-color: var(--ink-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 8%, transparent); }
.lb-search .ic { width: 15px; height: 15px; flex: none; }
.lb-search input[type=search] { flex: 1; width: auto; min-width: 0; min-height: 0; border: 0; outline: 0; box-shadow: none; background: none; font: inherit; font-size: 13.5px; color: var(--ink); height: 100%; padding: 0; border-radius: 0; }
.lb-search input[type=search]:focus { box-shadow: none; }
.lb-more-w { position: relative; display: inline-flex; }
.lb-more-w .ic { width: 11px; height: 11px; }
.lb-search .kbd { font: 600 11px/1 var(--sans); padding: 2px 6px; border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 4px; color: var(--muted); }
.lb-search:focus-within .kbd { display: none; }
.lb-chip-w { position: relative; display: inline-flex; align-items: center; }
.lb-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 11px; border-radius: 16px; border: 1px solid var(--line-2); background: var(--surface); font: inherit; font-size: 13px; color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.lb-chip b { font-weight: 600; color: var(--ink); }
.lb-chip .ic { width: 11px; height: 11px; color: var(--muted); }
.lb-chip:hover { border-color: var(--ink-2); }
.lb-chip.is-set { border-color: var(--ink-2); }
.lb-chip-w:has(.lb-chip-x) .lb-chip { padding-right: 30px; }
.lb-chip-x { position: absolute; right: 6px; width: 20px; height: 20px; border-radius: 50%; border: 0; background: none; color: var(--muted); display: grid; place-items: center; cursor: pointer; padding: 0; }
.lb-chip-x:hover { background: var(--surface-2); color: var(--ink); }
.lb-chip-x .ic { width: 11px; height: 11px; }
.lb-chip--add { border-style: dashed; color: var(--muted); }
.lb-sort { border: 0; background: none; font: inherit; font-size: 13px; color: var(--muted); cursor: pointer; white-space: nowrap; padding: 4px 2px; }
.lb-sort b { color: var(--ink); font-weight: 600; }
.lb-pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; min-width: 200px; max-height: 320px; overflow: auto; display: grid; padding: 4px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow); }
.lb-pop--r { left: auto; right: 0; }
.lb-pop button { text-align: left; padding: 7px 10px; border: 0; border-radius: 4px; background: none; font: inherit; font-size: 13px; color: var(--ink); cursor: pointer; white-space: nowrap; }
.lb-pop button:hover, .lb-pop button:focus-visible { background: var(--surface-2); }
.lb-pop button.on { font-weight: 600; }
.lb-pop button.on::after { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-left: 8px; vertical-align: 2px; }
.lb-dens button { font-size: 12px; }
/* the table */
.lb-card { overflow: visible; }
.lb-selbar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 9px 14px; background: var(--charcoal, #20201e); color: #f3f1eb; border-radius: var(--r-lg, 8px) var(--r-lg, 8px) 0 0; font-size: 13px; position: sticky; top: 0; z-index: 5; }
.lb-selbar .btn { background: transparent; color: #f3f1eb; border-color: #55544e; }
.lb-selbar .btn:hover { border-color: #f3f1eb; }
.lb-selbar .lb-sel-x { margin-left: auto; color: #f3f1eb; }
.lb-selbar .lb-pop { color: var(--ink); }
.lb-tbl th.lb-tick, .lb-tbl td.lb-tick { width: 34px; padding-right: 0; }
.lb-cb { position: relative; display: inline-grid; place-items: center; width: 22px; height: 22px; cursor: pointer; vertical-align: middle; }
.lb-cb input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.lb-cb span { width: 15px; height: 15px; border: 1.5px solid var(--line-2); border-radius: 3px; background: var(--surface); }
.lb-cb input:checked + span { background: var(--accent); border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--surface); }
.lb-cb input:focus-visible + span { outline: 2px solid var(--ink-2); outline-offset: 2px; }
.lb-tbl tr.is-sel td { background: color-mix(in srgb, var(--accent-soft) 45%, transparent); }
.lb-tbl tr.is-cur td { box-shadow: inset 0 1px 0 var(--ink-2), inset 0 -1px 0 var(--ink-2); }
.lb-tbl tr.is-cur td:first-child { box-shadow: inset 3px 0 0 var(--accent), inset 0 1px 0 var(--ink-2), inset 0 -1px 0 var(--ink-2); }
.lb-tbl--compact td { padding-top: 6px; padding-bottom: 6px; }
.lb-tbl--compact th { padding-top: 9px; padding-bottom: 9px; }
.lb-tbl--compact td .muted.sm { display: inline; margin-left: 6px; }
.lb-tbl--compact td > b { display: inline; }
.lb-ref { font: 500 11.5px/1.4 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .04em; color: var(--muted); }
td > .sm { display: block; }
.lb-tbl--compact td > .sm { display: inline; margin-left: 6px; }
.lb-age { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; color: var(--muted); }
.lb-age-b { width: 70px; height: 4px; border-radius: 2px; background: var(--sunk); overflow: hidden; flex: none; }
.lb-age-b i { display: block; height: 100%; background: var(--line-2); border-radius: 2px; }
.lb-age.is-warn { color: var(--warn); } .lb-age.is-warn i { background: var(--warn); }
.lb-age.is-red { color: var(--bad); } .lb-age.is-red i { background: var(--bad); }
.lb-hint { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.lb-hint .kbd { font: 600 11px/1 var(--sans); padding: 2px 6px; border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 4px; background: var(--surface); color: var(--ink-2); margin: 0 2px; }
.lb-page .br-who { display: inline-flex; align-items: center; gap: 8px; }
/* phones: each row becomes a small card with its tick box */
@media (max-width: 640px) {
  .lb-search { width: 100%; }
  .lb-filters-r { margin-left: 0; width: 100%; justify-content: space-between; }
  .lb-tbl thead { display: none; }
  .lb-tbl, .lb-tbl tbody { display: block; }
  .lb-tbl tr { display: grid; grid-template-columns: 30px minmax(0, 1fr) minmax(0, 1fr); gap: 6px 12px; padding: 12px; border-bottom: 1px solid var(--line); }
  .lb-tbl td { display: block; border: 0; padding: 0; min-width: 0; }
  .lb-tbl td.lb-tick { grid-row: span 4; width: auto; }
  .lb-tbl td:nth-child(2) { grid-column: 2 / -1; }
  .lb-tbl td[data-label]:not(:nth-child(2)):not(.lb-tick)::before { content: attr(data-label); display: block; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
  .lb-tbl td.ta-r { text-align: left; }
  .lb-tbl tr.is-cur td, .lb-tbl tr.is-cur td:first-child { box-shadow: none; }
  .lb-tbl tr.is-cur { box-shadow: inset 3px 0 0 var(--accent); }
  .lb-tbl tr.is-sel td { background: none; }
  .lb-tbl tr.is-sel { background: color-mix(in srgb, var(--accent-soft) 45%, transparent); }
  .lb-tbl.cl-tbl td:not(.c-opt) { display: block; }
  .lb-tbl.cl-tbl td.c-opt { display: none; }
  .lb-hint > span:last-child { display: none; }
}
/* the iPad: touch targets */
html.ipad .lb-chip, html.ipad .lb-search, html.ipad .lb-tab, html.ipad .lb-view-b { min-height: var(--ip-tap, 44px); }
html.ipad .lb-cb { width: 40px; height: 40px; }
html.ipad .lb-cb span { width: 20px; height: 20px; }
html.ipad .lb-pop button { min-height: var(--ip-tap, 44px); }
html.ipad .lb-view-x { display: grid; }
html.ipad .lb-view:has(.lb-view-x) .lb-view-b { padding-right: 20px; }
/* ==== end Programa R1 and R5 ==== */
/* ==== Programa integration: saved views wrap on a narrow screen (three or more views widened the phone page sideways) ==== */
.lb-views-r { flex-wrap: wrap; min-width: 0; max-width: 100%; }
@media (max-width: 720px) { .lb-views-r { margin-left: 0; padding-left: 0; } .lb-view-b { max-width: calc(100vw - 48px); overflow: hidden; text-overflow: ellipsis; } }

/* UI fix S2: the Clients table fits 1180 to 1299 px (web): Phone, Audience and Tags step aside there (the profile and the drawer have them) */
@media (min-width: 901px) and (max-width: 1299px) { .lb-tbl.cl-tbl .cl-o13 { display: none; } }
/* ==== Programa R3, R7, R9, R10 (builder B) ==== the Schedule view, the details drawer, add from a link. Light and dark
   through the tokens (gen/styles.css); the iPad layer (html.ipad) keeps 44 point targets. */

/* ---------- R9: the details drawer ---------- */
.ov--drawer.ewd { width: min(600px, 100%); }
.ov--drawer.ewd.lib-dr { width: min(720px, 100%); }
.ewd .ov-body { padding: 0; display: flex; flex-direction: column; min-height: 100%; }
.ewd .ov-x { top: 14px; right: 14px; }
.ewd-in { display: flex; flex-direction: column; min-height: 100%; }
.ewd-h { padding: 18px 22px 0; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--surface); z-index: 3; }
.ewd-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-right: 44px; min-height: 34px; }
.ewd-eye { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ewd-nav { display: flex; align-items: center; gap: 4px; flex: none; }
.ewd-nav .icon-btn { border: 1px solid var(--line-2); width: 32px; height: 32px; }
.ewd-pos { margin-right: 4px; white-space: nowrap; }
.ewd-titlerow { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 8px 0 12px; }
.ewd-title { font-size: 22px; margin: 0; letter-spacing: .02em; }
.ewd-pill { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; flex: none; max-width: 50%; }
.ewd-tabs { border-bottom: 0; gap: 14px; }
.ewd-tabs .ic { width: 12px; height: 12px; }
.ewd-b { padding: 18px 22px 24px; flex: 1; display: grid; gap: 14px; align-content: start; }
.ewd-f { position: sticky; bottom: 0; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 22px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); background: var(--surface); flex-wrap: wrap; }
.ewd-fa { gap: 8px; }
.ewd-hint kbd { font-size: 10px; padding: 1px 5px; }
.ewd .lib-d { padding: 0; }
.ewd.lib-dr .ewd-b { padding: 0 0 20px; }
.ewd.lib-dr .ewd-b > .lib-d { padding: 0; }
.ewd.lib-dr .ewd-b > :not(.lib-d) { margin: 0 22px; }
.ewd.lib-dr .ewd-b > .lib-d-mgr, .ewd.lib-dr .lib-prices { margin: 0 22px; }
html.ipad .ewd-step--lg { width: 48px; height: 48px; }
html.ipad .ewd-nav .icon-btn { width: 48px; height: 48px; }
html.ipad .ewd-hint kbd { display: none; }
@media (max-width: 640px) { .ewd-hint { display: none; } .ewd-titlerow { flex-direction: column; } .ewd-pill { max-width: none; justify-content: flex-start; } }

/* brief item drawer */
.pg-gal { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 8px; }
.pg-gal--1 { grid-template-columns: 1fr; }
.pg-gal-i { display: block; aspect-ratio: 1; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--surface-2); }
.pg-gal-i--main { aspect-ratio: auto; height: 100%; min-height: 150px; }
.pg-gal--1 .pg-gal-i--main { height: 230px; }
.pg-gal-i img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pg-gal--none { height: 160px; border-radius: var(--r); background: var(--c, var(--surface-2)); display: grid; place-items: center; border: 1px solid var(--line); }
.pg-vrow { align-items: flex-start; gap: 10px; }
.pg-vlink { text-decoration: none; }
.pg-vlink .ic { width: 12px; height: 12px; }
.pg-f { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.pg-f .field { margin-bottom: 10px; }
.pg-f-w { grid-column: 1 / -1; }
.pg-f-late input { border-color: var(--warn); }
.pg-dl { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin: 0; }
.pg-dl dt { font-size: 12px; color: var(--muted); font-weight: 600; } .pg-dl dd { margin: 2px 0 0; }
.pg-warn { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: var(--r); background: var(--warn-soft); color: var(--warn); font-size: 13px; line-height: 1.45; }
.pg-warn .ic { flex: none; margin-top: 2px; }
.pg-warn b { color: inherit; }
.pg-swap { display: grid; gap: 10px; }
.pg-swap .h3 { margin: 0; font-size: 15px; }
.pg-swap-l { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pg-swap-c { display: flex; align-items: center; gap: 10px; padding: 8px; margin: 0; }
.pg-swap-c > div { flex: 1; min-width: 0; }
.pg-swap-c .btn { flex: none; }
.pg-ptbl { width: 100%; } .pg-ptbl .num { text-align: right; font-variant-numeric: tabular-nums; }
.pg-files { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.pg-files a { display: grid; gap: 4px; text-decoration: none; color: var(--ink-2); }
.pg-files img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r); border: 1px solid var(--line); }
.pg-flist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .pg-flist li { display: flex; justify-content: space-between; gap: 10px; }
.pg-feed { margin: 0; }
.pg-askb { white-space: nowrap; }
@media (max-width: 640px) { .pg-f, .pg-dl, .pg-swap-l { grid-template-columns: 1fr; } .pg-gal { grid-template-columns: 1fr 1fr; } .pg-gal-i--main { grid-column: 1 / -1; height: 200px; } }

/* ---------- R3: the Schedule ---------- */
.br-grid--sched { grid-template-columns: minmax(0, 1fr); }
.br-grid--sched .br-main { display: flex; flex-direction: column; gap: 16px; }
.br-grid--sched .br-rooms { order: -1; }
.br-grid--sched .br-side { position: static; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); align-items: start; }
.pg-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px; }
.pg-bar--cards { padding: 12px 16px 0; }
.pg-bar-l, .pg-bar-r { gap: 8px; flex-wrap: wrap; }
.pg-seg button .ic { width: 12px; height: 12px; vertical-align: -1px; }
.pg-q { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line-2); border-radius: var(--r); padding: 0 10px; background: var(--surface); min-width: 220px; }
.pg-q input { border: 0; background: none; padding: 7px 0; min-width: 0; flex: 1; outline: none; }
.pg-q:focus-within { border-color: var(--ink-2); box-shadow: 0 0 0 2px var(--accent-soft); }
.pg-bar-r select { padding: 7px 10px; }
.pg-sched { overflow: visible; padding-bottom: 8px; }
.pg-sum { display: flex; align-items: center; gap: 28px; padding: 12px 16px; margin: 0 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); flex-wrap: wrap; }
.pg-v { font: 400 22px/1 var(--display); font-variant-numeric: tabular-nums; }
.pg-k { font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.pg-ok { color: var(--ok); }
.pg-grow { flex: 1; }
.pg-pills { gap: 6px; flex-wrap: wrap; }
.pg-cnt { cursor: pointer; }
.pg-cnt.is-on { box-shadow: 0 0 0 2px var(--ink-2); }
.pg-ghost { background: transparent; color: var(--muted); border-color: var(--line-2); }
.pg-pill { font-weight: 500; }
.pg-pill .ic { width: 11px; height: 11px; }
.pg-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; display: inline-block; margin-right: 1px; }
.pg-ro-note { margin: 10px 16px 0; }
.pg-sec { padding: 0 16px; }
.pg-sec-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 18px 0 8px; flex-wrap: wrap; }
.pg-sec-l { gap: 10px; align-items: center; min-width: 0; }
.pg-sec-n { font: 500 15px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; margin: 0; }
.pg-sec-notes { max-width: 46ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-sec-t { font-variant-numeric: tabular-nums; }
.pg-rows { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.pg-hd, .pg-r { display: grid; grid-template-columns: var(--cols); gap: 8px; align-items: center; padding: 0 12px; }
.pg-hd { height: 34px; font: 600 10px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); }
.pg-r { min-height: 62px; border-bottom: 1px solid var(--line); font-size: 13px; cursor: pointer; position: relative; }
.pg-r:last-child { border-bottom: 0; }
.pg-r:hover { background: var(--surface-2); }
.pg-r:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.pg-r.is-opt { background: var(--surface-2); min-height: 54px; }
.pg-r.is-sel { background: var(--accent-soft); }
.pg-r.is-off .pg-nm b { text-decoration: line-through; color: var(--muted); }
.pg-r.is-drag { opacity: .45; }
.pg-r.drop-b { box-shadow: inset 0 2px 0 var(--accent); }
.pg-r.drop-a { box-shadow: inset 0 -2px 0 var(--accent); }
.pg-cb { display: grid; place-items: center; cursor: pointer; }
.pg-cb input { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; }
.pg-grip { color: var(--muted); cursor: grab; opacity: 0; display: grid; place-items: center; }
.pg-grip .ic { width: 14px; height: 14px; }
.pg-r:hover .pg-grip:not(.is-off), .pg-r:focus-within .pg-grip:not(.is-off) { opacity: 1; }
.pg-grip.is-off { cursor: default; }
.pg-th { width: 46px; height: 46px; border-radius: 6px; border: 1px solid var(--line); overflow: hidden; background: var(--c, var(--surface-2)); display: grid; place-items: center; flex: none; }
.pg-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pg-th--sm { width: 40px; height: 40px; margin-left: 6px; }
.pg-mono { font: 600 12px/1 var(--sans); color: rgba(32,32,30,.55); }
.pg-mono .ic { width: 16px; height: 16px; }
.pg-mono--lg { font-size: 22px; } .pg-mono--lg .ic { width: 28px; height: 28px; }
.pg-ref { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.pg-nm { min-width: 0; padding: 8px 0; }
.pg-nm b { display: block; font-weight: 600; font-size: 13.5px; line-height: 1.3; }
.pg-r.is-opt .pg-nm b { font-weight: 500; }
.pg-nm > span { font-size: 12px; color: var(--muted); }
.pg-qty, .pg-lead { white-space: nowrap; font-variant-numeric: tabular-nums; }
.pg-lead.is-late { color: var(--bad); font-weight: 600; }
.pg-set { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--ink-2); margin-left: 4px; vertical-align: 2px; }
.pg-st .pill { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.pg-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pg-margin { color: var(--ok); } .pg-margin.is-low { color: var(--warn); }
.pg-more-w { position: relative; display: grid; place-items: center; }
.pg-menu { position: absolute; right: 0; top: 30px; z-index: 20; min-width: 210px; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r); box-shadow: var(--shadow); padding: 4px; display: grid; }
.pg-menu button { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 4px; text-align: left; font-size: 13px; }
.pg-menu button:hover, .pg-menu button:focus-visible { background: var(--surface-2); }
.pg-menu .ic { width: 14px; height: 14px; }
.pg-menu-bad { color: var(--bad); }
.pg-none, .pg-empty { padding: 14px 12px; margin: 0; }
.pg-empty { border: 1px dashed var(--line-2); border-radius: var(--r); }
.pg-add { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 14px 16px 6px; }
.pg-add-room { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .pg-add-room select { padding: 5px 8px; }
.pg-sched .br-searchp, .pg-sched .br-customf { margin: 8px 16px; }
.pg-bulk { position: fixed; left: 50%; transform: translateX(-50%); bottom: 22px; z-index: 40; background: var(--charcoal); color: #f3f1eb; border-radius: 10px; padding: 10px 12px 10px 18px; display: flex; gap: 8px; align-items: center; box-shadow: 0 12px 30px rgba(0,0,0,.25); font-size: 13px; flex-wrap: wrap; width: max-content; max-width: calc(100vw - 32px); }
.pg-bulk .btn { background: transparent; color: #f3f1eb; border-color: #55544e; }
.pg-bulk .btn:hover { background: rgba(255,255,255,.08); }
.pg-bulk .btn.pg-bulk-a { background: #4a0000; border-color: #4a0000; }
.pg-bulk .icon-btn { color: #f3f1eb; } .pg-bulk .icon-btn:hover { background: rgba(255,255,255,.1); }
.pg-bulk-n { white-space: nowrap; margin-right: 4px; }
.pg-pop { position: absolute; bottom: calc(100% + 8px); right: 40px; background: var(--surface); color: var(--ink); border: 1px solid var(--line-2); border-radius: var(--r); padding: 12px; box-shadow: var(--shadow); display: grid; gap: 6px; min-width: 220px; }
.pg-pop .btn { color: var(--ink); border-color: var(--line-2); }
.pg-pop .btn--primary { background: var(--btn); color: var(--on-btn); }
.pg-pop .field { margin: 0; }
.pg-rest-sw { margin-top: 6px; }
@media (max-width: 900px) {
  .pg-hd { display: none; }
  .pg-r { grid-template-columns: auto auto 46px minmax(0, 1fr) auto !important; grid-template-areas: "cb grip th nm more" ". . . st st"; padding: 8px 10px; row-gap: 4px; }
  .pg-r > .pg-ref, .pg-r > .pg-qty, .pg-r > .pg-lead, .pg-r > .pg-num { display: none; }
  .pg-r > .pg-cb { grid-area: cb; } .pg-r > .pg-grip { grid-area: grip; } .pg-r > .pg-th { grid-area: th; } .pg-r > .pg-nm { grid-area: nm; } .pg-r > .pg-st { grid-area: st; } .pg-r > .pg-more-w { grid-area: more; }
  .pg-sched--ro .pg-r { grid-template-columns: 46px minmax(0, 1fr) auto !important; grid-template-areas: "th nm more" ". st st"; }
  .pg-sum { gap: 16px; } .pg-q { min-width: 0; flex: 1; } .pg-bar-r { width: 100%; }
}
/* UI fix S1: the Prices view fits a laptop: no Ref column below 1400 px, no Ref or Lead below 1280 px (Lead stays in Client view and the drawer) */
@media (min-width: 901px) and (max-width: 1399px) { .pg-sched--pr .pg-hd, .pg-sched--pr .pg-r { grid-template-columns: var(--cols-n); } .pg-sched--pr .pg-hd > .pg-ref, .pg-sched--pr .pg-r > .pg-ref { display: none; } }
@media (min-width: 901px) and (max-width: 1279px) { .pg-sched--pr .pg-hd, .pg-sched--pr .pg-r { grid-template-columns: var(--cols-s); } .pg-sched--pr .pg-hd > .pg-lead, .pg-sched--pr .pg-r > .pg-lead { display: none; } }
html.ipad .pg-r { min-height: 64px; }
html.ipad .pg-more { min-width: 44px; min-height: 44px; }
html.ipad .pg-cnt { min-height: 36px; }
html.ipad .pg-q input { min-height: 40px; }

/* ---------- R7: add from a link ---------- */
.pgl { display: grid; gap: 14px; }
.pgl-hd h2 { margin: 0 0 2px; }
.pgl-url { display: flex; gap: 10px; }
.pgl-in { flex: 1; display: flex; align-items: center; gap: 8px; border: 1px solid var(--line-2); border-radius: var(--r); padding: 0 12px; background: var(--surface); }
.pgl-in input { flex: 1; border: 0; background: none; padding: 9px 0; outline: none; min-width: 0; }
.pgl-in:focus-within { border-color: var(--ink-2); box-shadow: 0 0 0 2px var(--accent-soft); }
.pgl-help { margin: 0; }
.pgl-steps { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }
.pgl-steps .ok { color: var(--ok); } .pgl-steps .ic { width: 12px; height: 12px; vertical-align: -1px; }
.pgl-steps b { color: var(--ink); }
.pgl-body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); gap: 20px; }
.pgl-pics { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pgl-pic { position: relative; aspect-ratio: 1; border: 2px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--surface-2); padding: 0; opacity: .7; }
.pgl-pic.on { border-color: var(--accent); opacity: 1; }
.pgl-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pgl-ck { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; }
.pgl-ck .ic { width: 13px; height: 13px; }
.pgl-att { margin-top: 10px; padding: 12px; display: grid; gap: 6px; }
.pgl-ff { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.pgl-ff .field { margin-bottom: 10px; }
.pgl-ff .field > span { display: flex; justify-content: space-between; gap: 8px; }
.pgl-w { grid-column: 1 / -1; }
.pgl-found { color: var(--ok); font-size: 11.5px; }
.pgl-need { color: var(--warn); font-size: 11.5px; }
.pgl-needf input { border-color: var(--warn); }
.pgl-ro { display: flex; justify-content: space-between; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: var(--r); padding: 8px 10px; background: var(--surface-2); }
.pgl-vp { justify-self: start; }
.pgl-prev { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; border: 1px solid var(--line); border-radius: var(--r); padding: 8px 10px; }
.pgl-dup { display: flex; gap: 8px; align-items: flex-start; color: var(--warn); font-size: 12.5px; margin: 4px 0 0; }
.pgl-dup .ic { flex: none; margin-top: 2px; }
.pgl-ft { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 14px; }
.pgl-ft .ic { width: 12px; height: 12px; vertical-align: -1px; }
.pgl-ft .row { gap: 8px; }
.pgl-sugg { display: grid; gap: 12px; }
.pgl-sl { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pgl-sl li { display: flex; gap: 12px; align-items: center; padding: 10px 12px; margin: 0; }
.pgl-sl li > div:not(.pgl-sa) { flex: 1; display: grid; gap: 2px; min-width: 0; }
.pgl-sth { width: 52px; height: 52px; border-radius: 6px; overflow: hidden; background: var(--surface-2); display: grid; place-items: center; flex: none; border: 1px solid var(--line); }
.pgl-sth img { width: 100%; height: 100%; object-fit: cover; }
.pgl-sa { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.lib-link-b .ic { width: 15px; height: 15px; }
@media (max-width: 760px) { .pgl-body, .pgl-ff { grid-template-columns: 1fr; } .pgl-url { flex-direction: column; } .pgl-sl li { flex-wrap: wrap; } }
/* ==== end Programa builder B ==== */

/* speed (Oct 2026): the button that sends shows a spinner and "Sending..." at once */
.ew-busy-spin { display: inline-block; width: 12px; height: 12px; margin-right: 7px; vertical-align: -1px; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; animation: ew-busy-spin .8s linear infinite; opacity: .85; }
@keyframes ew-busy-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ew-busy-spin { animation: none; border-top-color: currentColor; opacity: .5; } }
[aria-busy="true"] { cursor: progress; }

/* ---------- owner request (Oct 28): the floating submit panel on the brief page (studio and hub) ----------
   Bottom right on a computer, above the page and below dialogs (60) and toasts (90); a slim full-width bar on a phone. */
.br-fab-space { display: none; }
.br-grid:has(.br-fab) { padding-bottom: 96px; }   /* the end of the page scrolls clear of the panel */
.br-grid:has(.br-fab.is-docked) { padding-bottom: 140px; }
/* round 2: docked over the right-hand column on a computer, two rows (progress, then a full-width Submit) */
.br-fab.is-docked { right: var(--fab-r); width: var(--fab-w); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
.br-fab.is-docked .br-fab-bar { flex-wrap: wrap; gap: 8px; padding: 10px 12px 12px; }
.br-fab.is-docked .br-fab-prog { flex: 1 1 100%; }
.br-fab.is-docked .br-fab-btn { flex: 1 1 100%; justify-content: center; min-height: 40px; }
.br-fab { position: fixed; right: calc(20px + env(safe-area-inset-right, 0px)); bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 55; width: min(400px, calc(100vw - 40px)); background: var(--surface); color: var(--ink); border: 1px solid var(--line-2); border-radius: 12px; box-shadow: 0 14px 40px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.08); overflow: hidden; }
.br-fab-bar { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 12px; }
.br-fab-prog { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 4px 8px; margin: 0; border: 0; border-radius: 8px; background: transparent; color: inherit; font: inherit; cursor: pointer; flex: 1; min-width: 0; text-align: left; }
.br-fab-prog:hover { background: var(--surface-2); }
.br-fab-prog:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.br-fab-ticks { display: inline-flex; gap: 4px; flex: none; }
.br-fab-ticks i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--muted); display: block; }
.br-fab-ticks i.ok { background: var(--ok); border-color: var(--ok); }
.br-fab-n { font-size: 13.5px; white-space: nowrap; }
.br-fab-n b { font-weight: 600; }
.br-fab-btn { flex: none; white-space: nowrap; }
.br-fab.is-open .br-fab-bar { border-top: 1px solid var(--line); }
.br-fab-list { max-height: min(60vh, 460px); overflow-y: auto; padding: 14px 16px 6px; }
.br-fab-h { margin: 0 0 8px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.br-fab-ck { margin: 0; }
.br-fab-fix { display: grid; gap: 2px; width: 100%; padding: 2px 0 6px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.br-fab-fix:hover b, .br-fab-fix:focus-visible b { text-decoration: underline; }
.br-fab-go-to { color: var(--accent); font-weight: 500; }
.br-flash { animation: br-flash 1.6s ease; }
@keyframes br-flash { 0%, 60% { box-shadow: 0 0 0 3px var(--accent); } 100% { box-shadow: 0 0 0 0 transparent; } }
body:has(.br-fab) #toasts { bottom: calc(100px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 640px) {
  .br-fab { left: 0; right: 0; bottom: 0; width: auto; border-radius: 14px 14px 0 0; border-width: 1px 0 0; }
  .br-fab-bar { padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)); }
  .br-fab-ticks, .br-fab-rd { display: none; }
  .br-fab-prog { flex: none; padding: 4px 10px; border: 1px solid var(--line-2); border-radius: 999px; min-height: 36px; }
  .br-fab-btn { flex: 1; }
  body:has(.br-fab) #toasts { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) { .br-flash { animation: none; outline: 3px solid var(--accent); } }
html.ipad .br-fab-prog, html.ipad .br-fab-btn, html.ipad .br-fab.is-docked .br-fab-btn { min-height: 44px; }

/* owner feedback (Oct 28, v2 and v3): only the bar is in the opposite colours; the checklist that opens above it stays in the page's own colours. 
   On a light page the bar is charcoal (the dark theme's tokens); on a dark page it is stone (the light theme's tokens). */
.br-fab-bar { --bg: #161614; --surface: #20201e; --surface-2: #2a2a27; --sunk: #1b1b19; --line: #36352f; --line-2: #4a4840;
  --ink: #dcd9ce; --ink-2: #c2beb1; --muted: #a5a194; --accent: #e0a59b; --accent-soft: #3a2421; --ok: #9cc191; --ok-soft: #26321f;
  --btn: #dcd9ce; --on-btn: #20201e; color-scheme: dark; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .br-fab-bar {
  --bg: #e6e3da; --surface: #f3f1eb; --surface-2: #ebe8e0; --sunk: #dcd9ce; --line: #cfcabc; --line-2: #bdb7a7;
  --ink: #20201e; --ink-2: #3b3a35; --muted: #5e5a51; --accent: #4a0000; --accent-soft: #e9d9d4; --ok: #3d5a36; --ok-soft: #dfe6d6;
  --btn: #20201e; --on-btn: #f3f1eb; color-scheme: light; } }
:root[data-theme="dark"] .br-fab-bar {
  --bg: #e6e3da; --surface: #f3f1eb; --surface-2: #ebe8e0; --sunk: #dcd9ce; --line: #cfcabc; --line-2: #bdb7a7;
  --ink: #20201e; --ink-2: #3b3a35; --muted: #5e5a51; --accent: #4a0000; --accent-soft: #e9d9d4; --ok: #3d5a36; --ok-soft: #dfe6d6;
  --btn: #20201e; --on-btn: #f3f1eb; color-scheme: light; }
.br-fab-bar { background: var(--surface); color: var(--ink); }
.br-fab { border-color: var(--line-2); box-shadow: 0 16px 44px rgba(0,0,0,.32), 0 2px 8px rgba(0,0,0,.18); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .br-fab { border-color: var(--line-2); box-shadow: 0 16px 44px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.4); } }
:root[data-theme="dark"] .br-fab { border-color: var(--line-2); box-shadow: 0 16px 44px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.4); }
.br-fab.is-open .br-fab-bar { border-top: 0; }
.br-fab .br-fab-btn { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }   /* outlined until all four are met */
.br-fab .br-fab-btn.btn--primary { background: var(--btn); color: var(--on-btn); border-color: var(--btn); }   /* stone on charcoal, charcoal on stone */
.br-fab .br-fab-btn:hover:not(:disabled) { background: var(--surface-2); }
.br-fab .br-fab-btn.btn--primary:hover:not(:disabled) { background: var(--ink-2); border-color: var(--ink-2); }
.br-fab .br-fab-btn:disabled { opacity: 1; }
.br-fab .br-fab-btn:focus-visible, .br-fab .br-fab-prog:focus-visible, .br-fab .br-fab-fix:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.br-fab .br-fab-ticks i { border-color: var(--ink-2); }
.br-fab .hub-ck { border-color: var(--line-2); }
/* ==== Programa R6, R13, R15 (builder D): proposals, the client's week, visit notes ==== */
/* the proposal pages inside Studio OS (the client's own page carries the same classes with its own inline style sheet) */
.qd { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 32px 36px; box-shadow: var(--shadow); color: var(--ink); }
.qd-pg { padding: 0 0 28px; margin: 0 0 28px; border-bottom: 1px solid var(--line); scroll-margin-top: 16px; }
.qd-pg:last-child { border-bottom: 0; margin-bottom: 0; }
.qd-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; align-items: center; margin: 0 0 28px; }
.qd-wm .wm { height: 14px; } .qd-meta { font-size: 12.5px; color: var(--muted); }
.qd-h1 { font: 500 28px/1.15 var(--display); letter-spacing: .08em; text-transform: uppercase; margin: 0 0 6px; }
.qd-h2 { font: 500 19px/1.25 var(--display); letter-spacing: .04em; margin: 0 0 12px; }
.qd-sub, .qd-note { color: var(--muted); margin: 0 0 18px; }
.qd-eyebrow { font: 600 11px/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 22px 0 10px; }
.qd-hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin: 0 0 18px; }
.qd-hero .qd-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.qd-img { display: block; background: var(--surface-2); border-radius: 3px; } .qd-img--none { width: 100%; aspect-ratio: 4 / 3; }
.qd-img--sq { width: 64px; height: 64px; object-fit: cover; flex: none; }
.qd-items { list-style: none; margin: 0; padding: 0; }
.qd-item { display: flex; gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.qd-it-t { flex: 1; min-width: 0; display: flex; flex-direction: column; } .qd-it-t span { color: var(--muted); font-size: 12.5px; }
.qd-amt, .qd-n { font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; } .qd-amt em { color: var(--muted); font-style: normal; font-size: 12.5px; }
.qd-roomtot { display: flex; justify-content: space-between; margin: 12px 0 0; font-weight: 600; }
.qd-t { width: 100%; border-collapse: collapse; } .qd-t td { padding: 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; } .qd-t td + td { padding-left: 12px; }
.qd-tn { display: block; color: var(--muted); font-size: 12.5px; } .qd-sub-r td { color: var(--muted); } .qd-tot td { font-weight: 700; border-bottom: 2px solid var(--ink); }
.qd-sched { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.qd-pay { border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; display: flex; flex-direction: column; background: var(--surface-2); }
.qd-pay span { font-size: 12.5px; color: var(--muted); } .qd-pay b { font: 400 22px/1.3 var(--display); font-variant-numeric: tabular-nums; }
.qd-terms p, .qd-p { font-size: 13px; } .qd-terms p { color: var(--muted); margin: 0 0 8px; } .qd-intro p { margin: 0 0 10px; }
.qd-draft { background: var(--warn-soft); color: var(--warn); padding: 8px 12px; border-radius: 4px; font-size: 12.5px; }

/* Proposals in Studio OS */
.cd-blk { display: block; }
.cd-t tbody tr { cursor: pointer; } .cd-t tbody tr:hover td { background: var(--surface-2); } .cd-tw { overflow-x: auto; }
.cd-grid { display: grid; grid-template-columns: 190px minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.cd-thumbs { position: sticky; top: 12px; display: grid; gap: 10px; } .cd-thumbs ol { display: grid; gap: 12px; margin: 0; padding: 0; }
.cd-th { display: grid; gap: 6px; width: 100%; text-align: left; color: var(--ink-2); }
.cd-th-p { display: flex; flex-direction: column; justify-content: center; gap: 6px; height: 112px; padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.cd-th-p img { width: 100%; height: 100%; object-fit: cover; border-radius: 2px; }
.cd-th-l { display: block; height: 3px; background: var(--line); border-radius: 2px; } .cd-th-l--s { width: 50%; background: var(--accent); }
.cd-th.on .cd-th-p { outline: 2px solid var(--accent); outline-offset: 2px; } .cd-th.on { color: var(--ink); font-weight: 600; }
.cd-mid { display: grid; gap: 16px; min-width: 0; }
.cd-edit .pad { display: grid; gap: 4px; } .cd-edit textarea, .cd-edit input, .cd-edit select { width: 100%; }
.cd-line { display: grid; grid-template-columns: 140px minmax(0, 1fr) 96px 96px 36px; gap: 8px; align-items: center; margin: 0 0 8px; }
.cd-side { display: grid; gap: 14px; position: sticky; top: 12px; }
.cd-card .pad { display: grid; gap: 10px; } .cd-card .field { margin: 0; }
.cd-dl { display: grid; gap: 6px; margin: 0; } .cd-dl div { display: grid; grid-template-columns: 60px 1fr; gap: 8px; } .cd-dl dt { color: var(--muted); font-size: 12.5px; } .cd-dl dd { margin: 0; font-size: 13px; }
.cd-acc { display: flex; gap: 8px; align-items: flex-start; color: var(--ok); margin: 0; } .cd-acc b { color: var(--ink); }
.cd-next li { padding: 3px 0; font-size: 13.5px; } .pb { padding-bottom: 14px; }
.cd-vers { margin: 0; padding: 4px 16px 14px; } .cd-vers li { padding: 8px 0; border-bottom: 1px solid var(--line); display: grid; gap: 2px; } .cd-vers li:last-child { border: 0; }
.cd-terms-n { align-items: flex-start; }
.cd-bcard .pad { display: grid; gap: 8px; } .cd-bq { display: block; text-align: left; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r); width: 100%; } .cd-bq:hover { border-color: var(--ink-2); }
.cd-mk { margin-top: 6px; } .cd-chip--on { background: var(--btn); color: var(--on-btn); border-color: var(--btn); }
.cd-asks .cd-ask-l { margin: 0; padding: 0 16px; } .cd-ask { display: flex; gap: 10px; justify-content: space-between; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--line); }
.cd-ask.is-done b { color: var(--muted); text-decoration: line-through; } .cd-ans { display: block; margin: 4px 0 0; padding: 6px 8px; background: var(--surface-2); border-radius: 4px; white-space: pre-wrap; }
.cd-add-f { padding: 12px 0 0; } .cd-add-f input, .cd-add-f select { width: 100%; }
.cd-wk-f { width: 100%; height: 70vh; border: 1px solid var(--line); border-radius: var(--r); background: #e6e3da; }
.cd-set .pad { display: grid; gap: 6px; } .cd-set textarea { width: 100%; font-size: 13px; }
.cd-prod { margin-top: 16px; }
/* the hub: What we need from you */
.cd-needs { border-color: var(--accent-soft); } .cd-needs-h { color: var(--accent); }
.cd-need { display: grid; gap: 4px; padding: 14px 16px; border-top: 1px solid var(--line); } .cd-need .btn { justify-self: start; margin-top: 6px; }
.btn--accent { background: var(--accent); color: var(--on-accent); border-color: var(--accent); } .btn--accent:hover:not(:disabled) { background: var(--accent-2); border-color: var(--accent-2); }
.cd-answer textarea { width: 100%; }
@media (max-width: 1180px) { .cd-grid { grid-template-columns: 150px minmax(0, 1fr); } .cd-side { grid-column: 1 / -1; position: static; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } }
@media (max-width: 760px) { .cd-grid { grid-template-columns: minmax(0, 1fr); } .cd-thumbs { position: static; } .cd-thumbs ol { grid-auto-flow: column; grid-auto-columns: 120px; overflow-x: auto; padding-bottom: 4px; } .cd-th-p { height: 80px; }
  .qd { padding: 20px 16px; } .qd-h1 { font-size: 22px; } .cd-line { grid-template-columns: 1fr 1fr; } .cd-line input[id^="cd-l-d"] { grid-column: 1 / -1; grid-row: 1; } }

/* Visit notes (Appointments > Notes) */
.vn-grid { display: grid; grid-template-columns: 260px minmax(0, 1fr); padding: 0; overflow: hidden; min-height: 60vh; }
.vn-list { border-right: 1px solid var(--line); background: var(--surface-2); max-height: 78vh; overflow-y: auto; }
.vn-day { padding: 14px 16px 6px; }
.vn-li { display: grid; gap: 2px; width: 100%; text-align: left; padding: 10px 16px; border-top: 1px solid var(--line); border-left: 3px solid transparent; }
.vn-li:hover { background: var(--surface); } .vn-li.on { background: var(--surface); border-left-color: var(--accent); }
.vn-main { padding: 20px 24px; min-width: 0; }
.vn-h { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding: 0 0 14px; border-bottom: 1px solid var(--line); margin: 0 0 16px; }
.vn-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 24px; align-items: start; }
.vn-lab { display: block; margin: 0 0 8px; }
.vn-ta { width: 100%; min-height: 220px; padding: 12px 14px; border: 1px dashed var(--line-2); border-radius: var(--r); background: var(--surface); line-height: 1.6; resize: vertical; }
.vn-tools { margin: 10px 0 0; } .vn-save { margin: 14px 0 0; }
.vn-chk { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 12px; border-radius: var(--r); margin: 0 0 12px; font-size: 13px; }
.vn-chk.warn { background: var(--warn-soft); color: var(--warn); } .vn-chk.ok { background: var(--ok-soft); color: var(--ok); } .vn-chk .btn { margin-left: auto; }
.vn-sec { margin: 0 0 18px; } .vn-sec header { margin: 0 0 6px; } .vn-sec ul { margin: 0; padding: 0; }
.vn-dec { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--line); } .vn-dec > .ic { color: var(--accent); margin-top: 9px; }
.vn-dec-t { flex: 1; min-width: 0; display: grid; gap: 6px; }
.vn-in { width: 100%; border: 1px solid transparent; background: transparent; padding: 5px 6px; border-radius: 4px; font-size: 14px; }
.vn-main input.vn-in { border-color: transparent; background: transparent; box-shadow: none; min-height: 34px; }
.vn-main input.vn-in:hover, .vn-main input.vn-in:focus { border-color: var(--line-2); background: var(--surface); }
.vn-todo .row select, .vn-todo .row input[type=date] { width: auto; flex: 1 1 130px; min-width: 0; }
.vn-todo { display: grid; gap: 6px; padding: 8px 0; border-bottom: 1px solid var(--line); } .vn-todo select, .vn-todo input[type=date] { min-height: 32px; }
.vn-sorter { margin: 14px 0 0; } .vn-sorter ol { margin: 0; padding: 0 16px; }
.vn-sl { display: grid; gap: 6px; padding: 10px 0; border-bottom: 1px solid var(--line); } .vn-sl .seg { flex-wrap: wrap; }
.vn-recap { margin: 20px 0 0; background: var(--surface-2); } .vn-recap textarea { width: 100%; }
.vn-seg { margin-right: 4px; }
@media (max-width: 900px) { .vn-grid { grid-template-columns: minmax(0, 1fr); } .vn-list { border-right: 0; border-bottom: 1px solid var(--line); max-height: 240px; } .vn-cols { grid-template-columns: minmax(0, 1fr); } .vn-main { padding: 16px; } }
/* the iPad: touch targets and room for the keyboard */
html.ipad .vn-li, html.ipad .cd-th, html.ipad .cd-need .btn, html.ipad .vn-sl .seg button, html.ipad .vn-tools .btn { min-height: var(--ip-tap, 44px); }
html.ipad .vn-ta { font-size: 17px; min-height: 260px; }
/* ==== end Programa R6, R13, R15 ==== */

/* UI fix S9: Note lines (lines of the notes in neither list) */
.vn-loose > p { margin: 0 0 6px; }
.vn-note { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--line); }
.vn-note > .ic { width: 15px; height: 15px; margin-top: 3px; color: var(--muted); flex: none; }
.vn-note .vn-dec-t { display: grid; gap: 4px; min-width: 0; }
.vn-note .row { gap: 4px 16px; }
html.ipad .vn-note .link { min-height: var(--ip-tap, 44px); }
/* ==== Programa build (builder C): the project hub (R8), the production Timeline (R11), orders by when due and "Your
   pieces" (R12), shop time (R16). East Weston tokens only (light and dark come from them); the iPad layer at the end. ==== */
.red { color: var(--bad); }
.xs { font-size: 12px; }

/* ---------- R8: the project hub ---------- */
.pp-crumb { margin: 0 0 12px; color: var(--muted); }
.pp-crumb .link { color: var(--muted); font-weight: 400; }
.pp-crumb b { color: var(--ink); font-weight: 500; }
.pp-head { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 24px; align-items: stretch; margin: 0 0 20px; }
.pp-head-t { min-width: 0; }
.pp-head .h1 { margin: 8px 0 12px; }
.pp-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pp-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface); font-size: 12.5px; color: var(--ink-2); text-decoration: none; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; cursor: default; }
a.pp-chip, summary.pp-chip { cursor: pointer; }
a.pp-chip:hover, summary.pp-chip:hover { border-color: var(--ink-2); }
.pp-chip .ic { width: 13px; height: 13px; }
.pp-chip .pp-caret { width: 11px; height: 11px; color: var(--muted); }
.pp-chip--stage { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.pp-chip--stage .pp-caret { color: inherit; }
.pp-chip--ghost { background: transparent; color: var(--muted); }
.pp-av { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font: 600 8px/1 var(--sans); background: var(--sunk); color: var(--ink-2); flex: none; }
.pp-av--b { background: var(--ok-soft); color: var(--ok); }
.pp-dd { position: relative; display: inline-block; }
.pp-dd > summary { list-style: none; }
.pp-dd > summary::-webkit-details-marker { display: none; }
.pp-menu { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; min-width: 200px; display: grid; padding: 6px; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r); box-shadow: var(--shadow); }
.pp-menu button { text-align: left; padding: 8px 10px; border-radius: var(--r); font-size: 13px; color: var(--ink); }
.pp-menu button:hover, .pp-menu button:focus-visible { background: var(--surface-2); }
.pp-desc { margin: 14px 0 0; color: var(--ink-2); max-width: 72ch; }
.pp-mailrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; color: var(--ink-2); }
.pp-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; overflow-wrap: anywhere; }
.pp-acts { margin-top: 14px; }
.pp-cover { position: relative; margin: 0; min-height: 200px; border-radius: var(--r-lg); border: 1px solid var(--line); overflow: hidden; background: var(--sunk); }
.pp-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pp-cover figcaption { position: absolute; left: 12px; bottom: 12px; right: 12px; width: fit-content; max-width: calc(100% - 24px); padding: 3px 10px; border-radius: 99px; background: color-mix(in srgb, var(--surface) 92%, transparent); color: var(--ink); font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-cover--none { display: grid; place-items: center; align-content: center; gap: 8px; color: var(--muted); text-align: center; padding: 16px; }
.pp-cover--none .ic { width: 28px; height: 28px; }
.pp-page .pj-tabs { margin-bottom: 18px; }
.pp-figs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); margin: 0 0 16px; overflow: hidden; }
.pp-fig { display: grid; align-content: start; gap: 2px; padding: 14px 16px; text-align: left; border-right: 1px solid var(--line); min-width: 0; color: inherit; font: inherit; background: none; }
.pp-fig:last-child { border-right: 0; }
button.pp-fig { cursor: pointer; } button.pp-fig:hover { background: var(--surface-2); }
.pp-fig-n { display: flex; align-items: center; gap: 6px; font: 400 26px/1.15 var(--display); color: var(--ink); font-variant-numeric: tabular-nums; }
.pp-fig-n .ic { width: 14px; height: 14px; color: var(--muted); }
.pp-fig.is-bad .pp-fig-n { color: var(--bad); }
.pp-fig-l { font-size: 12.5px; font-weight: 500; color: var(--ink-2); margin-top: 4px; }
.pp-fig-s { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.pp-fig-s .pp-lock { width: 11px; height: 11px; vertical-align: -1px; }
.pp-figs--ws { margin: 12px 0 8px; }
.pp-prog { padding: 14px 16px; margin: 0 0 18px; }
.pp-prog-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.pp-stg { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); gap: 4px; }
.pp-stg li { display: grid; gap: 6px; min-width: 0; }
.pp-stg i { display: block; height: 6px; border-radius: 3px; background: var(--sunk); }
.pp-stg li.is-done i { background: var(--ok); }
.pp-stg li.is-on i { background: var(--accent); }
.pp-stg span:not(.sr-only) { font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-stg li.is-on span b { color: var(--accent); font-weight: 600; }
.pp-sec-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 20px 0 10px; }
.pp-recent { margin: 0 0 18px; }
.pp-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.pp-tile { display: grid; grid-template-rows: 120px auto; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--surface); text-decoration: none; color: inherit; min-width: 0; }
.pp-tile:hover { border-color: var(--line-2); }
.pp-tile img { width: 100%; height: 120px; object-fit: cover; display: block; background: var(--sunk); }
.pp-tile-doc { display: grid; place-items: center; align-content: center; gap: 4px; background: var(--sunk); color: var(--muted); font-size: 11px; letter-spacing: .1em; }
.pp-tile-doc .ic { width: 26px; height: 26px; }
.pp-tile-m { display: grid; gap: 2px; padding: 10px 12px; font-size: 13px; min-width: 0; }
.pp-tile-m b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-empty { display: flex; gap: 8px; align-items: center; padding: 14px 16px; border: 1px dashed var(--line-2); border-radius: var(--r-lg); margin: 0; }
.pp-det > summary { list-style: none; cursor: pointer; }
.pp-det > summary::-webkit-details-marker { display: none; }
.pp-det:not([open]) > summary { border-bottom: 0; }
.pp-det[open] > summary .ic { transform: rotate(180deg); }
.pp-labour { display: flex; gap: 8px; align-items: flex-start; color: var(--ink-2); }
@media (max-width: 1180px) { .pp-figs { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pp-fig:nth-child(3n) { border-right: 0; } .pp-fig:nth-child(-n+3) { border-bottom: 1px solid var(--line); } .pp-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pp-tile:nth-child(n+4) { display: none; } }
@media (max-width: 900px) { .pp-head { grid-template-columns: 1fr; } .pp-cover { min-height: 180px; order: -1; } }
/* UI fix M1: the iPad split view's detail pane is narrow (about 560 px in landscape): the cover goes above the title there too */
.ip-split-detail .pp-head { grid-template-columns: 1fr; } .ip-split-detail .pp-cover { min-height: 180px; order: -1; }
@media (max-width: 720px) {
  .pp-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pp-fig { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); } .pp-fig:nth-child(2n) { border-right: 0; } .pp-fig:nth-child(3n) { border-right: 1px solid var(--line); } .pp-fig:nth-child(3n):nth-child(2n) { border-right: 0; } .pp-fig:nth-last-child(-n+2) { border-bottom: 0; }
  .pp-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pp-tile:nth-child(n+4) { display: grid; } .pp-tile:nth-child(n+5) { display: none; }
  .pp-stg span:not(.sr-only) { display: none; } .pp-stg li.is-on span:not(.sr-only) { display: block; overflow: visible; }
  .pp-head .h1 { font-size: 22px; }
}

/* ---------- R11: the Timeline ---------- */
.pp-tl-top { margin: 0 0 22px; gap: 12px; }
.pp-chiprow { gap: 6px; }
.pp-chiprow .chip, .pp-ochips .chip { min-height: 28px; font-size: 12.5px; }
.pp-chiprow .chip.on, .pp-ochips .chip.on { background: var(--btn); color: var(--on-btn); border-color: var(--btn); }
.pp-tl-nav { gap: 4px; margin-left: 8px; }
.pp-key { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--muted); }
.pp-key span { display: inline-flex; align-items: center; gap: 5px; }
.pp-key i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.pp-key .pp-key-ms { width: 9px; height: 9px; border-radius: 1px; background: var(--ink); transform: rotate(45deg); }
.pp-g-intake { background: #dcd9ce; color: #20201e; } .pp-g-measure { background: #bdb7a7; color: #20201e; } .pp-g-drawings { background: #d8c79f; color: #20201e; } .pp-g-ordering { background: #b9c3ac; color: #20201e; }
.pp-g-fab { background: #4a0000; color: #f3f1eb; } .pp-g-finish { background: #8e5a4f; color: #f3f1eb; } .pp-g-delivery { background: #6a665c; color: #f3f1eb; } .pp-g-install { background: #3d5a36; color: #f3f1eb; }
.pp-tl-wrap { overflow-x: auto; max-width: 100%; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); -webkit-overflow-scrolling: touch; }
.pp-tl { --nm: 230px; min-width: 980px; position: relative; }
.pp-th, .pp-tr { display: grid; grid-template-columns: var(--nm) minmax(0, 1fr); }
.pp-th { height: 50px; border-bottom: 1px solid var(--line); }
.pp-tr { min-height: 56px; border-bottom: 1px solid var(--line); }
.pp-tl-body > .pp-tr:last-of-type { border-bottom: 0; }
.pp-nm { padding: 9px 14px; font-size: 13px; border-right: 1px solid var(--line); min-width: 0; }
.pp-nm--h { display: flex; align-items: flex-end; }
.pp-nm-t { font-weight: 600; text-align: left; color: var(--ink); }
.pp-nm-t:hover { text-decoration: underline; }
.pp-nm-s { display: block; font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-late { font-size: 10.5px; padding: 0 7px; vertical-align: 1px; }
.pp-lane { position: relative; min-width: 0; background-image: linear-gradient(90deg, color-mix(in srgb, var(--line) 60%, transparent) 1px, transparent 1px); background-size: calc(100% / var(--weeks)) 100%; }
.pp-lane--h { background: none; }
.pp-wk { position: absolute; bottom: 8px; font-size: 11px; color: var(--muted); padding-left: 6px; border-left: 1px solid var(--line); height: 18px; white-space: nowrap; }
.pp-mo { position: absolute; top: 8px; font: 600 10.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); padding-left: 6px; white-space: nowrap; }
.pp-seg { position: absolute; top: 15px; height: 26px; border-radius: 5px; font: 500 11.5px/26px var(--sans); padding: 0 8px; white-space: nowrap; overflow: hidden; min-width: 6px; }
.pp-seg > span { pointer-events: none; }
/* UI fix S7: a label never shows cut mid-word: it ends in an ellipsis, and a bar narrower than about 70 px shows no label (its title
   still names the stage on hover, and the stage key above the lanes names the colours) */
.pp-seg { container-type: inline-size; }
.pp-seg > span { display: block; overflow: hidden; text-overflow: ellipsis; }
@container (max-width: 70px) { .pp-seg > span { visibility: hidden; } }
.pp-seg.clipl { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.pp-seg.is-open { mask-image: linear-gradient(90deg, #000 70%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 70%, transparent); }
.pp-seg.is-late { box-shadow: inset -3px 0 0 var(--bad); }
.pp-seg.is-drag, .pp-seg.is-pend { outline: 2px dashed var(--accent); outline-offset: 2px; box-shadow: 0 6px 14px rgba(0, 0, 0, .2); z-index: 4; overflow: visible; }
.pp-h { position: absolute; z-index: 3; right: 0; top: 0; bottom: 0; width: 12px; cursor: ew-resize; background: linear-gradient(90deg, transparent 3px, rgba(255, 255, 255, .45) 3px 5px, transparent 5px); border-radius: 0 5px 5px 0; touch-action: none; }
.pp-h::after { content: ""; position: absolute; inset: -9px -10px; }
.pp-h:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.pp-ms { position: absolute; top: 22px; width: 12px; height: 12px; margin-left: -6px; transform: rotate(45deg); background: var(--ink); border: 2px solid var(--surface); z-index: 2; }
.pp-ms.late { background: var(--bad); } .pp-ms.rcv { background: var(--surface); border-color: var(--muted); }
.pp-inst { position: absolute; top: 44px; width: 10px; height: 6px; margin-left: 0; border-radius: 2px; background: var(--ok); }
.pp-due { position: absolute; top: 8px; bottom: 8px; width: 2px; background: var(--ink-2); opacity: .55; }
.pp-due.late { background: var(--bad); opacity: 1; }
.pp-today { position: absolute; top: -50px; bottom: 0; width: 2px; margin-left: -1px; background: var(--accent); z-index: 3; left: calc(var(--nm) + (100% - var(--nm)) * var(--x)); pointer-events: none; }
.pp-today i { position: absolute; top: 4px; left: -24px; font: 600 10.5px/1 var(--sans); font-style: normal; color: var(--on-accent); background: var(--accent); padding: 4px 6px; border-radius: 4px; letter-spacing: .06em; text-transform: uppercase; }
.pp-tl-body { position: relative; }
.pp-loadr { min-height: 84px; }
.pp-lane--load { background: none; }
.pp-ld { position: absolute; bottom: 10px; background: var(--line-2); border-radius: 3px 3px 0 0; min-height: 2px; }
.pp-ld.zero { background: none; } .pp-ld.zero i { display: none; }
.pp-ld i { position: absolute; top: -16px; left: 0; right: 0; text-align: center; font: 600 11px/1 var(--sans); font-style: normal; color: var(--muted); }
.pp-ld.over { background: var(--bad); } .pp-ld.over i { color: var(--bad); }
.pp-cap { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--bad); }
.pp-tip { position: absolute; top: 46px; z-index: 6; width: 300px; background: var(--charcoal); color: #f3f1eb; border-radius: 8px; padding: 10px 12px; font-size: 12px; box-shadow: 0 10px 24px rgba(0, 0, 0, .25); }
.pp-tip b { font-weight: 600; } .pp-tip p { margin: 4px 0 8px; color: #cfcabc; }
.pp-tip .btn { min-height: 28px; } .pp-tip .btn--primary { background: #6e1a12; border-color: #6e1a12; color: #f3f1eb; } .pp-tip .btn:not(.btn--primary) { background: #f3f1eb; color: #20201e; border-color: #f3f1eb; } .pp-tip .btn--ghost { background: transparent; color: #f3f1eb; border-color: #55544e; }
.pp-tr.is-pendrow { position: relative; z-index: 5; }
.pp-dragtip { position: absolute; z-index: 7; transform: translateX(-50%); background: var(--charcoal); color: #f3f1eb; font-size: 11.5px; padding: 3px 8px; border-radius: 4px; white-space: nowrap; pointer-events: none; }
.pp-tl-foot { margin-top: 12px; }
@media (max-width: 720px) { .pp-tl { --nm: 160px; min-width: 860px; } .pp-key { gap: 10px; } }

/* ---------- R12: orders by when due, and Your pieces ---------- */
.pp-orders { overflow: hidden; }
.pp-grp { display: flex; gap: 8px; align-items: center; margin: 0; padding: 14px 16px 8px; font: 600 10.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); background: var(--surface-2); border-bottom: 1px solid var(--line); }
.pp-grp.late { color: var(--bad); } .pp-grp .ic { width: 13px; height: 13px; }
.pp-recv-d > summary { list-style: none; cursor: pointer; } .pp-recv-d > summary::-webkit-details-marker { display: none; }
.pp-ol { list-style: none; margin: 0; padding: 0; }
.pp-o { display: grid; grid-template-columns: 44px minmax(0, 1.4fr) minmax(0, 1fr) 150px 120px 360px; gap: 12px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--line); font-size: 13px; }
.pp-ol:last-child .pp-o:last-child { border-bottom: 0; }
.pp-o-th { width: 44px; height: 44px; border-radius: 6px; display: grid; place-items: center; background: var(--sunk); color: var(--muted); }
.pp-o-m, .pp-o-d { display: grid; gap: 2px; min-width: 0; }
.pp-o-m b { font-weight: 600; }
.pp-o-s { font-size: 11.5px; color: var(--muted); }
.pp-trk { display: inline-flex; gap: 6px; align-items: center; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; color: var(--ink-2); min-width: 0; overflow-wrap: anywhere; }
.pp-trk .ic { width: 13px; height: 13px; flex: none; } .pp-cp { width: 26px; height: 26px; }
.pp-o-a { justify-content: flex-end; gap: 6px; }
.pp-for { grid-column: 1 / -1; }
.pp-pc { list-style: none; margin: 0; padding: 0; }
.pp-pc li { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.pp-pc li:last-child { border-bottom: 0; }
.pp-pc li > div { display: grid; gap: 2px; min-width: 0; }
.pp-pc-th { width: 46px; height: 46px; border-radius: 6px; overflow: hidden; display: grid; place-items: center; background: var(--sunk); color: var(--muted); }
.pp-pc-th img { width: 100%; height: 100%; object-fit: cover; }
.pp-pc-t { font-size: 12px; color: var(--muted); }
.pp-pc-t.is-ok { color: var(--ok); } .pp-pc-t.is-late { color: var(--accent); } .pp-pc-t.is-warn { color: var(--warn); }
.pp-steps { display: flex; gap: 3px; margin-top: 6px; }
.pp-steps i { flex: 1; height: 4px; border-radius: 2px; background: var(--sunk); }
.pp-steps i.d { background: var(--ok); }
@media (max-width: 1180px) { .pp-o { grid-template-columns: 44px minmax(0, 1fr) minmax(0, 150px) 130px; } .pp-o-p { grid-column: 3; } .pp-o-a { grid-column: 2 / -1; justify-content: flex-start; } .pp-trk { grid-column: 4; grid-row: 1; } }
@media (max-width: 720px) { .pp-o { grid-template-columns: 44px minmax(0, 1fr); } .pp-o-d, .pp-trk, .pp-o-p, .pp-o-a { grid-column: 2; grid-row: auto; } }

/* ---------- R16: shop time ---------- */
.pp-time { max-width: 1100px; }
.pp-time-h { align-items: flex-end; margin: 0 0 16px; }
.pp-time-h .h1, .pp-time-h .h2 { margin-top: 6px; }
.pp-run { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; background: var(--charcoal); color: #f3f1eb; border-radius: 14px; padding: 20px 22px; }
.pp-run-e { margin: 0; font: 600 10.5px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #bdb7a7; }
.pp-clock { margin: 8px 0 0; font: 300 46px/1 var(--display); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.pp-run-w { margin: 8px 0 0; font-size: 14px; } .pp-run-w b { font-weight: 600; }
.pp-run .link { color: #f3f1eb; text-decoration-color: #6a665c; }
.pp-run-a { gap: 10px; }
.pp-run-a .btn { height: 52px; min-height: 52px; padding: 0 22px; font-size: 15px; }
.pp-run-sw { background: transparent; color: #f3f1eb; border-color: #55544e; }
.pp-run-stop { background: #4a0000; color: #f3f1eb; border-color: #4a0000; }
.pp-run.is-idle .pp-clock { color: #9a968a; }
.pp-qs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pp-q { border: 1px solid var(--line); background: var(--surface); border-radius: 12px; padding: 14px; min-height: 96px; display: flex; flex-direction: column; justify-content: space-between; gap: 8px; align-items: flex-start; }
.pp-q.is-on { border-color: var(--ok); }
.pp-q b { display: block; font-size: 14px; } .pp-q span { font-size: 12px; color: var(--muted); }
.pp-ens { list-style: none; margin: 0; padding: 0; }
.pp-en { display: grid; grid-template-columns: minmax(0, 1fr) 150px 70px 44px; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); align-items: center; font-size: 14px; min-height: 56px; }
.pp-en > span:first-child { display: grid; gap: 2px; min-width: 0; }
.pp-en-d { font-variant-numeric: tabular-nums; }
.pp-time-f { margin-top: 16px; }
.pp-time > .h1, .pp-time > .h2 { margin: 6px 0 16px; }
.pp-who .pp-who-l { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0; }
.pp-who .pp-who-l .btn { gap: 10px; }
.pp-who .pp-av { width: 28px; height: 28px; font-size: 11px; }
.pp-who-add { align-items: flex-end; }
.pp-who-add .field { margin: 0; flex: 1 1 220px; }
.pp-rate { margin-top: 14px; } .pp-rate .h3 { margin-bottom: 6px; } .pp-rate .field { margin-top: 10px; }
@media (max-width: 900px) { .pp-qs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .pp-run { grid-template-columns: 1fr; } .pp-clock { font-size: 38px; } .pp-run-a .btn { flex: 1 1 auto; }
  .pp-qs { grid-template-columns: 1fr; }
  .pp-en { grid-template-columns: minmax(0, 1fr) 56px 44px; } .pp-en > span.sm { grid-column: 1; grid-row: 2; }
}

/* ---------- the iPad: fingers, not a mouse ---------- */
html.ipad .pp-chip, html.ipad .pp-chiprow .chip, html.ipad .pp-ochips .chip { min-height: 44px; }
html.ipad .pp-menu button { min-height: 44px; }
html.ipad .pp-fig { min-height: 96px; }
html.ipad .pp-h { width: 16px; }
html.ipad .pp-h::after { inset: -14px -18px; }
html.ipad .pp-nm-t { min-height: 30px; }
html.ipad .pp-o { padding: 12px 16px; } html.ipad .pp-o .btn--sm { min-height: 44px; }
html.ipad .pp-cp { width: 44px; height: 44px; }
html.ipad .pp-q .btn, html.ipad .pp-en .icon-btn { min-height: 44px; min-width: 44px; }
html.ipad .pp-tip .btn { min-height: 44px; }
/* dark: the oxblood stage reads against the dark lane */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pp-g-fab { background: #7a2418; } :root:not([data-theme="light"]) .pp-g-install { background: #4d7044; } }
:root[data-theme="dark"] .pp-g-fab { background: #7a2418; } :root[data-theme="dark"] .pp-g-install { background: #4d7044; }
/* ==== Programa integration: production orders in the shared details drawer ==== */
.pp-o-open { all: unset; cursor: pointer; display: inline; font: inherit; color: var(--ink); border-radius: 3px; }
.pp-o-open:hover b { text-decoration: underline; text-underline-offset: 3px; }
.pp-o-open:focus-visible { outline: 2px solid var(--accent, #6b1f1f); outline-offset: 2px; }
.pp-dr-h { margin: 18px 0 6px; }
.pp-dr-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pp-dr-lines li { display: grid; gap: 2px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.pp-dr-notes { white-space: pre-wrap; margin: 0; }
.pp-dr-t { width: 100%; margin-bottom: 8px; }
.pp-dr-feed { margin: 0; }
html.ipad .pp-o-open { min-height: 44px; display: inline-flex; align-items: center; }
.pp-dr-acts { gap: 8px; margin-bottom: 16px; }
/* ==== Programa (builder A, Oct 26 2026): the calmer sidebar (R4), the polish kit (R14) and search everything (R2) ====
   Studio OS's own tokens (gen/styles.css); light and dark follow them. The iPad keeps 44 point targets. */

/* ---------- R4: the sidebar ---------- */
.pa-nav { display: grid; gap: 1px; grid-template-columns: minmax(0, 1fr); }
.pa-nav > *, .nav-gi > * { min-width: 0; }
.nav-gi { grid-template-columns: minmax(0, 1fr); }
.nav-n--open { background: var(--sunk); color: var(--ink-2); font-weight: 600; }
.nav-n--need { background: var(--accent); color: var(--on-accent); font-weight: 600; }
.nav-g { display: flex; align-items: center; justify-content: space-between; width: 100%; margin: 10px 0 2px; padding: 6px 10px; border-radius: var(--r); font: 600 10px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.nav-g:hover { color: var(--ink); background: var(--surface-2); }
.nav-g .nav-chev { width: 13px; height: 13px; transform: rotate(90deg); transition: transform .15s ease; }
.nav-g[aria-expanded="false"] .nav-chev { transform: none; }
.nav-gi { display: grid; gap: 1px; }
.nav-gi[hidden] { display: none; }
.nav-search .nav-kbd { margin-left: auto; font: 500 10.5px/1 var(--sans); color: var(--muted); border: 1px solid var(--line-2); border-radius: 4px; padding: 3px 5px; background: var(--surface); }
.nav-pinrow { position: relative; display: flex; align-items: center; }
.nav-pinrow .nav-pin { flex: 1; min-width: 0; padding-right: 30px; }
.nav-pin > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.nav-unpin { position: absolute; right: 4px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: var(--r); color: var(--muted); opacity: 0; }
.nav-unpin .ic { width: 13px; height: 13px; }
.nav-pinrow:hover .nav-unpin, .nav-unpin:focus-visible { opacity: 1; }
.nav-unpin:hover { background: var(--sunk); color: var(--ink); }
.nav-sep { display: block; height: 1px; background: var(--line); margin: 10px 8px; }
.pa-railt { position: absolute; top: 14px; right: 10px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: var(--r); color: var(--muted); }
.pa-railt:hover { background: var(--surface-2); color: var(--ink); }
.side-top { position: relative; }
.pa-railwm { display: none; font: 500 11px/1 var(--display); letter-spacing: .32em; margin-left: .32em; color: var(--ink); }
.pa-pinbtn .ic { margin-right: 2px; }
.pa-pinbtn[aria-pressed="true"] { color: var(--accent); }
.pa-pinwrap { float: right; }
@media (max-width: 899px) { .pa-railt { display: none; } }

/* the desktop icon rail (the person's choice, nav.rail); the iPad's folded rail looks the same */
@media (min-width: 900px) {
  html.pa-rail:not(.ipad) { --side: 72px; }
  html.pa-rail:not(.ipad) .side { padding: 14px 8px 12px; }
  html.pa-rail:not(.ipad) .side-top { align-items: center; padding: 34px 0 12px; }
  html.pa-rail:not(.ipad) .side-top .side-sub { display: none; }
  html.pa-rail:not(.ipad) .side-top .side-wm { display: none; }
  html.pa-rail:not(.ipad) .pa-railwm { display: block; }
  html.pa-rail:not(.ipad) .pa-railt { right: 50%; transform: translateX(50%); top: 6px; }
  html.pa-rail:not(.ipad) .side .nav-i { justify-content: center; padding: 10px 0; }
  html.pa-rail:not(.ipad) .side .nav-i > span, html.pa-rail:not(.ipad) .side .nav-tag, html.pa-rail:not(.ipad) .side .nav-kbd, html.pa-rail:not(.ipad) .side .nav-caret { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  html.pa-rail:not(.ipad) .side .nav-n { position: absolute; top: 3px; right: 6px; min-width: 17px; height: 17px; padding: 0 4px; font-size: 10px; }
  /* UI fix S3: grey (open) counts are a small dot in the rail, after the count rule above so it wins */
  html.pa-rail:not(.ipad) .side .nav-n.nav-n--open { min-width: 8px; width: 8px; height: 8px; padding: 0; font-size: 0; top: 7px; right: 14px; overflow: hidden; }
  html.pa-rail:not(.ipad) .side .nav-i.on::before { left: -8px; }
  html.pa-rail:not(.ipad) .nav-g { height: 1px; min-height: 0; padding: 0; margin: 10px 8px; background: var(--line); font-size: 0; pointer-events: none; }
  html.pa-rail:not(.ipad) .nav-g .nav-chev { display: none; }
  html.pa-rail:not(.ipad) .nav-unpin { display: none; }
  html.pa-rail:not(.ipad) .nav-pinrow .nav-pin { padding-right: 0; }
  html.pa-rail:not(.ipad) .me-txt, html.pa-rail:not(.ipad) .side-viewas span, html.pa-rail:not(.ipad) .pa-me-x { display: none; }
  html.pa-rail:not(.ipad) .side .sa-acct { display: none; }   /* UI fix M3: the door code lives in the unfolded menu (it wrapped word by word down the rail) */
  html.pa-rail:not(.ipad) .me-row { flex-direction: column; gap: 6px; }
  html.pa-rail:not(.ipad) .side-viewas { justify-content: center; padding: 8px 0; }
  html.pa-rail:not(.ipad) .side-me { padding: 12px 0 0; }
}
/* the iPad's folded rail: groups as separators, and the View as button fits (it overflowed the rail before) */
html.ipad.ip-rail-min .nav-g { height: 1px; min-height: 0; padding: 0; margin: 10px 8px; background: var(--line); font-size: 0; pointer-events: none; }
html.ipad.ip-rail-min .side .nav-n.nav-n--open { min-width: 8px; width: 8px; height: 8px; padding: 0; font-size: 0; top: 8px; right: 16px; }
html.ipad.ip-rail-min .nav-g .nav-chev, html.ipad.ip-rail-min .nav-unpin, html.ipad.ip-rail-min .nav-kbd { display: none; }
html.ipad.ip-rail-min .nav-pinrow .nav-pin { padding-right: 0; }
html.ipad.ip-rail-min .side-viewas { justify-content: center; padding: 0; width: var(--ip-tap); min-width: 0; margin: 8px auto 0; overflow: hidden; }
html.ipad.ip-rail-min .side-viewas span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html.ipad:not(.ip-rail-min) .nav-g { min-height: var(--ip-tap); }   /* UI fix M4: not in the narrow rail, where a group is a 1 px separator (min-height made it a 44 px grey block) */
html.ipad .nav-unpin { opacity: 1; width: var(--ip-tap); height: var(--ip-tap); right: 0; }
html.ipad .nav-search .nav-kbd { display: none; }

/* ---------- R2: search everything ---------- */
#pa-search[hidden] { display: none; }
#pa-search { position: fixed; inset: 0; z-index: 120; }
html.sr-on, html.sr-on body { overflow: hidden; }
.sr-scrim { position: absolute; inset: 0; background: rgba(32,32,30,.45); }
.sr-box { position: absolute; left: 50%; top: 8vh; transform: translateX(-50%); width: min(900px, calc(100vw - 32px)); max-height: 84vh; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line-2); border-radius: 12px; box-shadow: 0 24px 60px rgba(32,32,30,.28); overflow: hidden; }
.sr-q { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.sr-q > .ic { width: 20px; height: 20px; color: var(--ink-2); }
#pa-search .sr-q input { flex: 1; min-width: 0; width: auto; border: 0; border-radius: 0; box-shadow: none; background: transparent; font-size: 18px; color: var(--ink); outline: none; padding: 4px 0; height: auto; }
.sr-q input::-webkit-search-cancel-button { display: none; }
.sr-scope { display: flex; gap: 6px; flex-wrap: nowrap; }
.sr-sc { cursor: pointer; font-weight: 500; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-sc .ic { width: 12px; height: 12px; }
.sr-sc.on { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.sr-x { flex: none; }
.sr-spin { width: 14px; height: 14px; border: 2px solid var(--line-2); border-top-color: var(--accent); border-radius: 50%; animation: sr-spin .7s linear infinite; }
.sr-spin[hidden] { display: none; }
@keyframes sr-spin { to { transform: rotate(360deg); } }
.sr-cols { display: grid; grid-template-columns: minmax(0, 1fr) 320px; min-height: 0; flex: 1; }
.sr-list { overflow-y: auto; padding: 6px 0 10px; border-right: 1px solid var(--line); min-height: 300px; max-height: calc(84vh - 120px); }
.sr-gh { display: flex; justify-content: space-between; font: 600 10.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding: 14px 18px 6px; margin: 0; }
.sr-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 7px 18px; cursor: pointer; min-height: 48px; }
.sr-row.on { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--accent); }
.sr-ic { width: 36px; height: 36px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--line); display: grid; place-items: center; color: var(--ink-2); background-size: cover; background-position: center; }
.sr-txt { display: grid; min-width: 0; }
.sr-t { font-size: 14px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-s { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-row mark, .sr-rec mark { background: var(--accent-soft); color: var(--accent); border-radius: 2px; padding: 0 1px; }
.sr-kind { font-size: 12px; color: var(--muted); }
.sr-sample { font-size: 10.5px; padding: 0 6px; vertical-align: 1px; }
.sr-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); vertical-align: 2px; }
.sr-kbd, .sr-keys kbd { font: 500 10.5px/1 var(--sans); color: var(--muted); border: 1px solid var(--line-2); border-radius: 4px; padding: 3px 5px; background: var(--surface); min-width: 18px; text-align: center; display: inline-block; }
.sr-empty { padding: 18px; margin: 0; color: var(--muted); font-size: 13px; }
.sr-pv { padding: 18px; overflow-y: auto; max-height: calc(84vh - 120px); }
.sr-pv-img { height: 150px; border-radius: 8px; background: var(--surface-2) center / cover no-repeat; border: 1px solid var(--line); margin-bottom: 14px; }
.sr-pv-eb { margin-top: 2px; }
.sr-pv-t { font: 500 18px/1.2 var(--display); text-transform: uppercase; letter-spacing: .05em; margin: 4px 0 10px; }
.sr-pv-pills { gap: 6px; }
.sr-pv-facts { display: grid; gap: 6px; margin-top: 14px; font-size: 13px; }
.sr-f { display: flex; justify-content: space-between; gap: 12px; } .sr-f > span:last-child { text-align: right; }
.sr-pv-btns { gap: 6px; margin-top: 16px; }
.sr-pv-empty { color: var(--muted); }
.sr-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 18px; border-top: 1px solid var(--line); background: var(--surface-2); font-size: 12px; color: var(--muted); }
.sr-rec { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.sr-rec .link { font-size: 12px; color: var(--muted); }
.sr-keys { display: flex; gap: 12px; flex: none; } .sr-keys kbd { margin-right: 3px; }
@media (max-width: 899px) { .sr-cols { grid-template-columns: 1fr; } .sr-pv { display: none; } .sr-list { border-right: 0; } .sr-keys { display: none; } }
@media (max-width: 640px) {
  .sr-box { top: 0; left: 0; transform: none; width: 100vw; max-height: none; height: 100%; border-radius: 0; border: 0; }
  .sr-q { flex-wrap: wrap; } .sr-q input { font-size: 17px; } .sr-scope { order: 3; width: 100%; } .sr-list { max-height: none; }
}
/* the iPad: a large sheet with touch rows; the preview in landscape */
html.ipad .sr-box { top: 6vh; width: min(980px, calc(100vw - 48px)); }
html.ipad .sr-row { min-height: 56px; }
html.ipad .sr-sc, html.ipad .sr-x { min-height: var(--ip-tap); }
html.ipad .sr-x { min-width: var(--ip-tap); }
@media (max-width: 999px) { html.ipad .sr-cols { grid-template-columns: 1fr; } html.ipad .sr-pv { display: none; } }

/* ---------- R14: the polish kit ---------- */
/* one set of status pills: a dot for the states that move; Sample is a quiet outline */
.pill .d { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.pill.ghost { background: transparent; color: var(--ink-2); border: 1px solid var(--line-2); }
.ew-head .phead-act { align-items: center; }
.pk-quiet { padding-left: 10px; padding-right: 10px; }
.pk-quiet .ic { width: 17px; height: 17px; }
/* empty states: a picture, one sentence, one button */
.ew-empty { text-align: center; padding: 30px 16px; display: grid; justify-items: center; gap: 6px; }
.ew-empty-ill { width: 120px; height: 84px; border-radius: 8px; background: var(--surface-2) center / cover; border: 1px solid var(--line); box-shadow: 10px 8px 0 -2px var(--sunk); margin-bottom: 10px; }
.ew-empty-ic { margin-bottom: 4px; }
.ew-empty p { margin: 0 0 10px; }
/* numbers and type */
.ew-ref { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12.5px; letter-spacing: .02em; }
.ew-num { font: 500 28px/1.1 var(--display); letter-spacing: .02em; }
/* the account area */
.pk-me { display: flex; flex-wrap: wrap; gap: 2px 4px; margin: 0 0 10px; }
.pk-me-b { display: inline-flex; align-items: center; gap: 6px; padding: 5px 6px; border-radius: var(--r); font-size: 12px; color: var(--muted); }
.pk-me-b:hover { background: var(--surface-2); color: var(--ink); }
.pk-me-b .ic { width: 14px; height: 14px; }
.pk-me-b .nav-n { margin-left: 2px; min-width: 18px; height: 18px; font-size: 10.5px; }
html.ipad .pk-me-b { min-height: var(--ip-tap); padding: 0 8px; }
html.ipad.ip-rail-min .pk-me { justify-content: center; }
html.ipad.ip-rail-min .pk-me-b span, html.ipad.ip-rail-min .pk-me-b .nav-n { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (min-width: 900px) { html.pa-rail:not(.ipad) .pk-me { flex-direction: column; align-items: center; } html.pa-rail:not(.ipad) .pk-me-b span, html.pa-rail:not(.ipad) .pk-me-b .nav-n { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }
/* What's new */
.pk-news-l { list-style: none; margin: 12px 0; padding: 0; max-height: 56vh; overflow-y: auto; }
.pk-news-l li { display: grid; grid-template-columns: 8px 1fr; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.pk-news-l li:last-child { border-bottom: 0; }
.pk-news-l i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-top: 6px; }
.pk-news .row { gap: 8px; }
/* the first-visit tip: dark, small, bottom right, above the page and below any panel */
.pk-tip { position: fixed; right: 20px; bottom: 20px; z-index: 40; width: min(380px, calc(100vw - 32px)); display: grid; grid-template-columns: 44px 1fr; gap: 12px; padding: 14px; border-radius: 10px; background: #20201e; color: #f3f1eb; box-shadow: 0 12px 32px rgba(0,0,0,.28); font-size: 12.5px; }
.pk-tip b { font-size: 13px; }
.pk-tip p { margin: 4px 0 0; color: #cfcabc; }
.pk-tip-ic { width: 44px; height: 44px; border-radius: 8px; background: #3b3a35; display: grid; place-items: center; color: #e9d9d4; }
.pk-tip-b { gap: 6px; margin-top: 10px; align-items: center; }
.pk-tip .btn { min-height: 0; }
.pk-tip-go { background: #4a0000; color: #f3f1eb; border-color: #4a0000; }
.pk-tip-no { background: transparent; color: #f3f1eb; border-color: #55544e; }
.pk-tip-n { margin-left: auto; color: #bdb7a7; }
:root[data-theme="dark"] .pk-tip { background: #2a2a27; border: 1px solid #4a4840; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pk-tip { background: #2a2a27; border: 1px solid #4a4840; } }
/* Comfortable or Compact (the iPad keeps its 44 point targets: the class is never set there) */
html.pa-compact .nav-i { padding-top: 6px; padding-bottom: 6px; }
html.pa-compact .nav-g { margin-top: 8px; }
html.pa-compact .page { padding-top: 22px; }
html.pa-compact .card.pad, html.pa-compact .pad { padding: 12px; }
html.pa-compact .phead { margin-bottom: 14px; }
html.pa-compact table td, html.pa-compact table th { padding-top: 6px; padding-bottom: 6px; }
html.pa-compact .sr-row { min-height: 40px; padding-top: 5px; padding-bottom: 5px; }
/* ==== Programa integration: the Search button on Today's header (mockup 01) ==== */
.pa-searchbtn .nav-kbd { margin-left: 4px; font: 500 10.5px/1 var(--sans); color: var(--muted); border: 1px solid var(--line-2); border-radius: 4px; padding: 3px 5px; background: var(--surface); }
html.pa-compact .pa-searchbtn .nav-kbd { padding: 2px 4px; }

/* ==== UI fix S5 (Oct 27): the menu fits a laptop screen. Group headers 10 px apart (above), What's new and Comfortable on one
   row, the door code one line without a box, and the account area stays at the foot of the menu while the menu scrolls above it
   (as on the iPad), so the name, sign out, door code and View as are always reachable without scrolling. ==== */
.side-me .pk-me { flex-wrap: wrap; gap: 0 2px; margin: 0 -5px 6px; }
.side-me .pk-me-b { padding: 4px; gap: 4px; font-size: 11.5px; white-space: nowrap; }
.side-me .pk-me-b .nav-n { margin-left: 0; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; }
.side-me .pk-me-b .ic { width: 13px; height: 13px; }
.side-me .sa-acct { flex-wrap: nowrap; white-space: nowrap; gap: 6px; margin: 6px 0 0; padding: 4px 6px; border: 0; font-size: 12px; overflow: hidden; }
.side-me .sa-acct .muted.sm { display: none; }
@media (min-width: 900px) {
  html:not(.ipad) .side-me { position: sticky; bottom: -12px; z-index: 2; background: var(--surface); margin-bottom: -12px; padding-bottom: 12px; }
  html:not(.ipad) .side-me::before { content: ''; position: absolute; left: 0; right: 0; top: -13px; height: 12px; background: linear-gradient(transparent, var(--surface)); pointer-events: none; }
}
@media (min-width: 900px) and (max-height: 960px) { html:not(.ipad) .side .nav-i { padding-top: 6px; padding-bottom: 6px; } }   /* UI fix S5: a laptop screen shows the whole menu with Studio folded */
/* ==== Programa dashboards (builder G, Oct 27 2026): widgets on Today and the hub Home (live/60-dash.js) ====
   East Weston tokens only, so light and dark both follow the theme. Sizes: Small a quarter, Medium a half, Wide full width;
   two columns on narrow screens (the iPad in portrait, split views), one on a phone. */
.dsh-wrap { container-type: inline-size; container-name: dsh; }
.dsh-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; align-items: start; grid-auto-flow: row; }
.dw { min-width: 0; margin: 0; padding: 0; display: flex; flex-direction: column; overflow: visible; }
.dw--S { grid-column: span 1; } .dw--M { grid-column: span 2; } .dw--W { grid-column: 1 / -1; }
/* review SHOULD 4: four columns down to 820 px of container (the iPad in landscape is about 855), two below */
@container dsh (max-width: 819px) { .dsh-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dw--M, .dw--W { grid-column: 1 / -1; } }
@container dsh (max-width: 559px) { .dsh-grid { grid-template-columns: minmax(0, 1fr); } .dw--S, .dw--M, .dw--W { grid-column: 1 / -1; } }
.ov-col--today > .dw { width: 100%; }

/* the card */
.dw-h { display: flex; align-items: center; justify-content: space-between; gap: 10px 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); min-height: 50px; flex-wrap: wrap; }
.dw-t { display: flex; align-items: center; gap: 8px; margin: 0; font: 600 14px/1.3 var(--sans); color: var(--ink); min-width: 0; }
.dw-t .ic { width: 16px; height: 16px; color: var(--muted); flex: none; }
.dw-t span { overflow: hidden; text-overflow: ellipsis; }
.dw-r { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); flex-wrap: wrap; justify-content: flex-end; }
.dw-r .link.sm, .dw-f .link.sm { color: var(--ink-2); }
.dw-b { padding: 14px 16px; min-width: 0; flex: 1; }
.dw-f { padding: 10px 16px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--surface-2); border-radius: 0 0 var(--r) var(--r); }
.dw-lock { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 11px; border: 1px solid var(--line); font: 500 11px/1 var(--sans); color: var(--muted); white-space: nowrap; }
.dw-lock .ic { width: 11px; height: 11px; }
.dw-empty { color: var(--muted); font-size: 13px; margin: 2px 0; }
.dw-loading { padding: 0; }
.dw-eyb { font: 600 10.5px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 14px 0 6px; }
.dw-b > .dw-eyb:first-child { margin-top: 0; }
.dw-big { display: block; font: 400 28px/1.05 var(--display); letter-spacing: .01em; color: var(--ink); }
.dw-big--m { font-size: 22px; }
.dw-lbl { display: block; font-size: 12px; color: var(--muted); margin-top: 4px; }
.dw-two { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; margin-bottom: 8px; }
.dw-two--l { justify-content: flex-start; gap: 28px; }
.ta-r { text-align: right; }
.tnum { font-variant-numeric: tabular-nums; }
.dw-note { display: flex; gap: 6px; align-items: flex-start; font-size: 11.5px; color: var(--muted); margin: 10px 0 0; line-height: 1.4; }
.dw-note .ic { width: 13px; height: 13px; flex: none; margin-top: 1px; }
.dw-sub { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; overflow-wrap: anywhere; }
.dw-sub.xs { font-size: 11px; }
.is-late { color: var(--bad) !important; }
.dw-chg { display: inline-flex; align-items: center; height: 19px; padding: 0 7px; border-radius: 10px; font: 600 11px/1 var(--sans); white-space: nowrap; }
.dw-chg.up { background: var(--ok-soft); color: var(--ok); } .dw-chg.dn { background: var(--bad-soft); color: var(--bad); } .dw-chg.flat { background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); }
.dw-kv { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .dw-kv .dw-lbl { margin: 0; }

/* lists */
.dw-list { list-style: none; margin: 0; padding: 0; }
.dw-list > li { border-bottom: 1px solid var(--line); }
.dw-list > li:last-child { border-bottom: 0; }
.dw-row, .dw-row2, .dw-row3 { display: grid; gap: 4px 12px; align-items: center; padding: 10px 0; font-size: 13px; width: 100%; text-align: left; background: none; border: 0; color: inherit; font-family: inherit; }
.dw-row { grid-template-columns: 74px minmax(0, 1fr) auto; cursor: pointer; border-radius: 4px; }
button.dw-row:hover .dw-main b, .link-row:hover b { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-2); }
.dw-row.past { opacity: .72; }
.dw-row2 { grid-template-columns: auto minmax(0, 1fr) auto; }
.dw-row3 { grid-template-columns: minmax(0, 1fr) auto; }
.dw-tight .dw-row3 { padding: 7px 0; }
.dw-when { font-size: 12px; color: var(--muted); line-height: 1.35; }
.dw-main { min-width: 0; display: block; }
.dw-main b, .dw-row3 b { font-weight: 600; }
.dw-end { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; font-size: 12.5px; }
.dw-acts { display: flex; align-items: center; gap: 6px; }
.link-row { display: block; background: none; border: 0; padding: 0; margin: 0; text-align: left; font: inherit; color: inherit; cursor: pointer; min-width: 0; }
.dw-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); align-self: start; margin-top: 6px; }
.dw-dot.late { background: var(--bad); }
.dw-sched .dw-main .pill { margin-left: 4px; }
.dw-msg { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 4px 12px; align-items: start; padding: 11px 0; font-size: 13px; }
.dw-av { width: 30px; height: 30px; border-radius: 50%; display: inline-grid; place-items: center; font: 600 11px/1 var(--sans); color: var(--on-accent); background: var(--accent); flex: none; }
.dw-av.av--1 { background: var(--ok); } .dw-av.av--2 { background: var(--warn); } .dw-av.sm { width: 24px; height: 24px; font-size: 10px; }
.dw-age { font: 600 10.5px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.dw-age.is-late { color: var(--bad); }
.dw-q { margin: 3px 0 0; font-size: 12.5px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dw-pillcol { align-self: start; padding-top: 1px; }

/* horizontal bars */
.dw-hb { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.dw-hb li { display: grid; grid-template-columns: minmax(80px, 38%) minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 12.5px; padding: 4px 0; }
.dw-hb--wide li { grid-template-columns: minmax(110px, 34%) minmax(0, 1fr) 54px; }
.dw-hb--money li { grid-template-columns: minmax(96px, 30%) minmax(0, 1fr) minmax(86px, auto); }
.dw-hb--names li { grid-template-columns: minmax(150px, 42%) minmax(0, 1fr) minmax(76px, auto); }
.dw-hb-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.dw-hb-t { height: 10px; background: var(--surface-2); border-radius: 0 3px 3px 0; position: relative; overflow: hidden; }
.dw-hb-t i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent); border-radius: 0 3px 3px 0; }
.dw-hb-t i.dim { background: var(--line-2); }
.dw-hb-n { text-align: right; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* tiles (briefs by status) */
.dw-tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; margin-bottom: 8px; }
.dw-tile { padding: 10px 10px 9px; border-right: 1px solid var(--line); min-width: 0; }
.dw-tile:last-child { border-right: 0; }
.dw-tile b { display: block; font: 400 22px/1 var(--display); }
.dw-tile span { display: block; font-size: 11px; color: var(--muted); margin-top: 5px; line-height: 1.25; }
.dw-tile.bad { background: var(--bad-soft); } .dw-tile.bad b, .dw-tile.bad span { color: var(--bad); }
.dw-tile.ok { background: var(--ok-soft); } .dw-tile.ok b, .dw-tile.ok span { color: var(--ok); }
.dw--S .dw-tiles, .dw--M .dw-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } .dw--S .dw-tile:nth-child(3n), .dw--M .dw-tile:nth-child(3n) { border-right: 0; } .dw--S .dw-tile:nth-child(-n+3), .dw--M .dw-tile:nth-child(-n+3) { border-bottom: 1px solid var(--line); }
@container dsh (min-width: 1000px) { .dw--M .dw-tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); } .dw--M .dw-tile:nth-child(3n) { border-right: 1px solid var(--line); } .dw--M .dw-tile:last-child { border-right: 0; } .dw--M .dw-tile:nth-child(-n+3) { border-bottom: 0; } }

/* stages as one line */
.dw-stages .dw-stg { grid-template-columns: minmax(120px, 1fr) minmax(130px, 1.2fr) minmax(86px, auto); padding: 11px 0; }
.dw-stages.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 36px; }
.dw-stages.two > li:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
.dw-dots { display: flex; gap: 3px; } .dw-dots i { flex: 1; height: 6px; max-width: 14px; border-radius: 3px; background: var(--sunk); }
.dw-dots i.d { background: var(--ok); } .dw-dots i.c { background: var(--accent); } .dw-dots i.l { background: var(--bad); }
.dw-stgl { display: grid; gap: 4px; min-width: 0; }
.dw-stg .dw-end { flex-direction: row; gap: 4px; align-items: baseline; white-space: nowrap; }
.dw-stg .dw-end b { color: var(--accent); font-weight: 600; } .dw-stg .dw-end.is-late b { color: var(--bad); }

/* conversion strip */
.dw-conv { display: flex; align-items: center; border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; gap: 6px; }
.dw-conv > div { flex: 1; min-width: 0; } .dw-conv b { font: 400 22px/1 var(--display); display: block; } .dw-conv span { font-size: 11.5px; color: var(--muted); }
.dw-conv > i { font: 600 10.5px/1 var(--sans); font-style: normal; background: var(--ink); color: var(--bg); padding: 4px 6px; border-radius: 10px; flex: none; }

/* charts */
.dw-chart { position: relative; min-height: 40px; width: 100%; }
.dw-chart svg { display: block; overflow: visible; }
.dw-svg text { font: 11px var(--sans); }
.dw-axis { fill: var(--muted); } .dw-axis.now { fill: var(--ink); font-weight: 600; } .dw-axis.xs { font-size: 10px; }
.dw-grid { stroke: var(--line); stroke-width: 1; } .dw-grid.dash { stroke-dasharray: 3 4; }
.dw-cur { fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; } .dw-cur.thin { stroke-width: 1.8; }
.dw-prev { fill: none; stroke: var(--muted); stroke-width: 1.6; stroke-dasharray: 5 4; opacity: .85; }
.dw-gs1 { stop-color: var(--accent); stop-opacity: .16; } .dw-gs0 { stop-color: var(--accent); stop-opacity: 0; }
.dw-dot { fill: var(--surface); stroke: var(--accent); stroke-width: 1.6; } .dw-dot.on, .dw-pt.on .dw-dot { fill: var(--accent); }
.dw-pt { cursor: pointer; outline: none; } .dw-hit { fill: transparent; stroke: none; }
.dw-pt:focus-visible .dw-dot { stroke-width: 3; }
.dw-vline { stroke: var(--ink-2); stroke-width: 1; stroke-dasharray: 2 3; }
.dw-lastl { fill: var(--accent); font-weight: 600; }
.dw-bar { fill: var(--accent); } .dw-bar.over { fill: var(--bad); } .dw-bar.dim { fill: var(--line-2); }
.dw-bar.a0 { fill: var(--accent-soft); stroke: var(--accent-2); stroke-width: .5; } .dw-bar.a1 { fill: var(--accent-2); opacity: .7; } .dw-bar.a2 { fill: var(--accent-2); } .dw-bar.a3 { fill: var(--accent); }
.dw-bart { fill: var(--ink-2); font-weight: 500; } .dw-bart.over { fill: var(--bad); font-weight: 600; }
.dw-cap { stroke: var(--ink-2); stroke-width: 1.4; stroke-dasharray: 6 4; } .dw-capt { fill: var(--ink-2); font-weight: 500; }
.dw-tip { position: absolute; z-index: 4; background: var(--ink); color: var(--bg); border-radius: 7px; padding: 9px 11px; font-size: 12px; line-height: 1.45; box-shadow: 0 8px 20px rgba(0,0,0,.18); white-space: nowrap; pointer-events: none; }
.dw-tip b { font-weight: 600; } .dw-tip .m { opacity: .72; }
.dw-axisrow { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-top: 6px; }
.dw-legend, .dw-legend2 { display: flex; gap: 6px 16px; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin: 0 0 6px; }
.dw-legend2 { margin: 8px 0 0; } .dw-legend2 .dw-sp { flex: 1; }
.dw-legend i, .dw-legend2 i { display: inline-block; vertical-align: middle; margin-right: 6px; }
.lg-cur { width: 18px; border-top: 2px solid var(--accent); } .lg-prev { width: 18px; border-top: 2px dashed var(--muted); }
.lg-bar { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); } .lg-cap { width: 18px; border-top: 1.5px dashed var(--ink-2); }
.dw-alert { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--bad-soft); color: var(--bad); border: 1px solid color-mix(in srgb, var(--bad) 30%, transparent); border-radius: var(--r); padding: 10px 12px; margin-top: 10px; font-size: 13px; }
.dw-alert b { font-weight: 600; }
.dw-nc { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); }

/* AAA trend: chips and KPI strip */
.dw--trend .dw-h { align-items: center; }
.dw-chips { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.dw-chip { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 28px 0 10px; border: 1px solid var(--line-2); border-radius: 7px; background: var(--surface); font: 500 12.5px/1 var(--sans); color: var(--ink-2); white-space: nowrap; cursor: pointer; }
.dw-chip.static { padding-right: 10px; cursor: default; } .dw-chip.static em { font-style: normal; color: var(--accent); font-weight: 600; } .dw-chip .ic { width: 13px; height: 13px; color: var(--muted); }
.dw-chip select { appearance: none; -webkit-appearance: none; border: 0; background: transparent; font: 600 12.5px/1 var(--sans); color: var(--accent); padding: 0; margin: 0; cursor: pointer; max-width: 140px; }
.dw-chip select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.dw-chip > .ic:last-child { position: absolute; right: 9px; pointer-events: none; }
.dw--trend.is-busy .dw-chart { opacity: .5; transition: opacity .2s; }
.dw-kpis { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 8px; margin-top: 12px; }
.dw-kpi { padding: 11px 14px; border-right: 1px solid var(--line); min-width: 0; }
.dw-kpi:last-child { border-right: 0; }
.dw-kpi-l { display: block; font-size: 12px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dw-kpi-v { display: flex; align-items: center; gap: 7px; margin-top: 6px; flex-wrap: wrap; }
.dw-kpi-v b { font: 600 17px/1 var(--sans); letter-spacing: -.01em; } .dw-kpi-v small { font-size: 11.5px; color: var(--muted); }
@container dsh (max-width: 699px) { .dw-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dw-kpi { border-bottom: 1px solid var(--line); } .dw-kpi:nth-child(2n) { border-right: 0; } .dw-chips { justify-content: flex-start; } }
.dw--M.dw--trend .dw-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dw--M.dw--trend .dw-kpi { border-bottom: 1px solid var(--line); } .dw--M.dw--trend .dw-kpi:nth-child(2n) { border-right: 0; } .dw--M.dw--trend .dw-chips { justify-content: flex-start; }

/* timeline (8 weeks) */
.dw-tl { position: relative; --lab: 190px; font-size: 12.5px; }
.dw-tl-h, .dw-tl-r { display: grid; grid-template-columns: var(--lab) minmax(0, 1fr); align-items: center; }
.dw-tl-h { color: var(--muted); font-size: 11.5px; border-bottom: 1px solid var(--line); padding-bottom: 6px; }
.dw-tl-h > span:first-child { padding-left: 2px; }
.dw-tl-wk { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); } .dw-tl-wk span { border-left: 1px solid var(--line); padding-left: 6px; white-space: nowrap; overflow: hidden; }
.dw-tl-wk span:first-child { color: var(--ink); font-weight: 600; }
.dw-tl-r { border-bottom: 1px solid var(--line); min-height: 34px; } .dw-tl-r:last-of-type { border-bottom: 0; }
.dw-tl-r > .link-row { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 10px; }
.dw-tl-track { position: relative; height: 34px; background: repeating-linear-gradient(to right, transparent 0, transparent calc(12.5% - 1px), var(--line) calc(12.5% - 1px), var(--line) 12.5%); }
.dw-tl-bar { position: absolute; top: 9px; height: 16px; border-radius: 3px; background: var(--sunk); color: var(--ink-2); font-size: 11px; line-height: 16px; overflow: hidden; }
.dw-tl-bar em { font-style: normal; padding: 0 5px; white-space: nowrap; }
.dw-tl-bar.fab { background: var(--accent); color: var(--on-accent); } .dw-tl-bar.finish { background: color-mix(in srgb, var(--accent-2) 60%, var(--surface)); color: var(--on-accent); }
.dw-tl-bar.inst { background: var(--ok); color: var(--surface); } .dw-tl-bar.late { background: var(--bad); color: var(--surface); } .dw-tl-bar.open { opacity: .85; }
.dw-tl-inst { position: absolute; top: 12px; width: 10px; height: 10px; background: var(--ok); transform: translateX(-5px) rotate(45deg); }
.dw-tl-today { position: absolute; top: 0; bottom: 0; left: calc(var(--lab) + (100% - var(--lab)) * var(--x) / 100); border-left: 1.5px dashed var(--ink); pointer-events: none; }
.tl-fab, .tl-finish, .tl-before, .tl-inst { width: 8px; height: 8px; border-radius: 50%; } .tl-fab { background: var(--accent); } .tl-finish { background: color-mix(in srgb, var(--accent-2) 60%, var(--surface)); } .tl-before { background: var(--sunk); } .tl-inst { background: var(--ok); border-radius: 1px; transform: rotate(45deg); }
.dw-legend.sm { margin: 0; font-size: 12px; }
@container dsh (max-width: 700px) { .dw-tl { --lab: 120px; } .dw-tl-wk span:nth-child(even) { color: transparent; } }

/* pieces, photos, progress */
.dw-pieces { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.dw-pieces li { border: 1px solid var(--line); border-radius: var(--r); padding: 0 0 9px; overflow: hidden; font-size: 12.5px; background: var(--surface); }
.dw-pieces li > b, .dw-pieces li > .dw-sub, .dw-pieces li > .pill { margin-left: 10px; margin-right: 10px; } .dw-pieces li > b { display: block; margin-top: 8px; font-weight: 600; }
.dw-pieces li > .pill { margin-top: 5px; }
.dw-img { display: block; aspect-ratio: 4 / 3; background: var(--sunk); overflow: hidden; } .dw-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dw--S .dw-pieces { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dw-photos { display: grid; gap: 10px; grid-template-columns: 1.4fr 1fr; grid-template-rows: 1fr 1fr; min-height: 240px; }
.dw-photos.n1 { grid-template-columns: 1fr; grid-template-rows: 1fr; } .dw-photos.n2 { grid-template-rows: 1fr; grid-template-columns: 1fr 1fr; }
.dw-photos figure { position: relative; margin: 0; border-radius: var(--r); overflow: hidden; background: var(--sunk); min-height: 110px; }
.dw-photos.n3 figure:first-child { grid-row: span 2; }
.dw-photos img { width: 100%; height: 100%; object-fit: cover; display: block; position: absolute; inset: 0; }
.dw-photos figcaption, .dw-cover figcaption { position: absolute; left: 8px; bottom: 8px; background: var(--surface); color: var(--ink); font-size: 11.5px; padding: 3px 8px; border-radius: 10px; }
.dw-prog { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; } .dw-prog.has-cover { grid-template-columns: minmax(0, 1fr) 210px; }
.dw-prog-now { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 10px; font-size: 13.5px; }
.dw-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); gap: 3px; }
.dw-steps li { display: grid; gap: 6px; font-size: 10.5px; color: var(--muted); min-width: 0; } .dw-steps li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dw-steps i { height: 5px; border-radius: 3px; background: var(--sunk); } .dw-steps li.d i { background: var(--ok); } .dw-steps li.c i { background: var(--accent); } .dw-steps li.c span { color: var(--accent); font-weight: 600; }
.dw-next { display: flex; gap: 10px; align-items: center; border: 1px solid var(--line); background: var(--surface-2); border-radius: var(--r); padding: 10px 12px; margin: 14px 0 0; font-size: 13px; } .dw-next .ic { width: 16px; height: 16px; flex: none; color: var(--muted); }
.dw-cover { position: relative; margin: 0; border-radius: var(--r); overflow: hidden; background: var(--sunk); min-height: 150px; } .dw-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@container dsh (max-width: 819px) { .dw-prog.has-cover { grid-template-columns: minmax(0, 1fr); } .dw-cover { min-height: 180px; } .dw-steps li span { display: none; } .dw-steps li.c span { display: block; overflow: visible; } }
.dw--needs .dw-h { border-bottom-color: var(--accent-soft); } .dw--needs .dw-t span { font: 600 11px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); } .dw--needs .dw-t .ic { display: none; }
.dw-who { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; font-size: 13px; color: var(--ink-2); }
.dw-links { display: flex; gap: 14px; margin: 10px 0 0; flex-wrap: wrap; }
.dw-paybar { display: block; height: 8px; background: var(--sunk); border-radius: 4px; overflow: hidden; margin: 10px 0 6px; } .dw-paybar i { display: block; height: 100%; background: var(--ok); }
.dw-how summary { cursor: pointer; font-size: 12.5px; color: var(--ink-2); margin-top: 8px; }
.dw-chat { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 12px; }
.dw-chat li { display: flex; gap: 10px; align-items: flex-start; max-width: 78%; } .dw-chat li.mine { margin-left: auto; flex-direction: row-reverse; }
.dw-chat li > div { background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; } .dw-chat li > div p { margin: 0; font-size: 13.5px; }
.dw-chat li.mine > div { background: var(--ink); color: var(--bg); border-color: var(--ink); } .dw-chat li.mine .dw-sub { color: color-mix(in srgb, var(--bg) 70%, transparent); }
.dw-reply { display: flex; gap: 10px; } .dw-reply input { flex: 1; min-width: 0; height: 40px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface); color: var(--ink); font: inherit; }
.dw-tbl { width: 100%; border-collapse: collapse; font-size: 13px; } .dw-tbl th { font: 600 10.5px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); text-align: left; padding: 0 0 8px; } .dw-tbl td { padding: 8px 0; border-top: 1px solid var(--line); }

/* the page: label, folded line, the fixed block in edit mode */
.dsh-label { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 22px 0 10px; flex-wrap: wrap; }
.dsh-label .dw-eyb { margin: 0; }
.dsh-label .ic { width: 12px; height: 12px; vertical-align: -1px; }
.dsh-fold { display: flex; align-items: center; gap: 12px; padding: 12px 16px; margin: 0 0 6px; font-size: 13px; flex-wrap: wrap; }
.dsh-fold > b { font-weight: 600; } .dsh-fold-t { flex: 1; min-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dsh-fold .link .ic { width: 14px; height: 14px; vertical-align: -3px; }
.dsh-foldb { margin-left: 6px; } .dsh-foldb .ic { width: 15px; height: 15px; }
.ft-h .dsh-foldb { margin-left: auto; }
.dsh-fixed { display: flex; align-items: center; gap: 12px; padding: 12px 16px; font-size: 13px; border-style: dashed; margin-bottom: 4px; flex-wrap: wrap; }
.dsh-fixed .ic { width: 14px; height: 14px; color: var(--muted); }
.dsh-solo { grid-template-columns: minmax(0, 1fr) !important; }
.dsh-wait { margin: 18px 0; } .dsh-foot { display: flex; gap: 6px; align-items: center; margin: 18px 0 0; } .dsh-foot .ic { width: 13px; height: 13px; }
.dsh-none { padding: 18px; display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.dsh-cust .ic { width: 15px; height: 15px; }
.dsh-page .hub-cards { display: none; }

/* edit mode */
.dsh-editbar { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; background: var(--ink); color: var(--bg); border-radius: 8px; padding: 10px 12px 10px 16px; margin: 0 0 14px; flex-wrap: wrap; position: sticky; top: 8px; z-index: 6; }
.dsh-eb-t { display: flex; gap: 12px; align-items: flex-start; min-width: 240px; flex: 1; } .dsh-eb-t > .ic { width: 18px; height: 18px; margin-top: 2px; flex: none; }
.dsh-eb-t b { display: block; font-weight: 600; font-size: 14px; } .dsh-eb-t span { display: block; font-size: 12.5px; opacity: .75; max-width: 520px; }
.dsh-eb-a { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.dsh-editbar .btn { background: transparent; color: var(--bg); border-color: color-mix(in srgb, var(--bg) 35%, transparent); }
.dsh-editbar .btn:hover { border-color: var(--bg); }
.dsh-editbar .btn--light { background: var(--bg); color: var(--ink); border-color: var(--bg); }
.dsh-defsel { display: inline-flex; align-items: center; gap: 6px; border: 1px solid color-mix(in srgb, var(--bg) 35%, transparent); border-radius: 7px; padding: 3px 4px 3px 10px; font-size: 12.5px; }
.dsh-defsel select { background: transparent; color: var(--bg); border: 0; font: 600 12.5px var(--sans); max-width: 170px; }
.dsh-defsel select option { color: var(--ink); background: var(--surface); }
.dsh-defsel .btn { height: 26px; }
.dw.is-ed { outline: 1.5px dashed var(--line-2); outline-offset: 3px; }
.dw-h--ed { background: var(--surface-2); border-radius: var(--r) var(--r) 0 0; justify-content: flex-start; flex-wrap: nowrap; }
.dw-h--ed .dw-t { flex: 1 1 auto; min-width: 0; }
.dw-grip { display: inline-grid; place-items: center; width: 28px; height: 30px; border-radius: 5px; color: var(--muted); border: 1px solid var(--line); background: var(--surface); cursor: grab; touch-action: none; flex: none; }
.dw-grip:active { cursor: grabbing; } .dw-grip .ic { width: 15px; height: 15px; }
.dw-sz { display: inline-flex; border: 1px solid var(--line-2); border-radius: 6px; overflow: hidden; background: var(--surface); flex: none; }
.dw-sz button { padding: 0 9px; height: 28px; border: 0; border-right: 1px solid var(--line); background: transparent; font: 500 11.5px/1 var(--sans); color: var(--muted); cursor: pointer; }
.dw-sz button:last-child { border-right: 0; } .dw-sz button.on { background: var(--ink); color: var(--bg); } .dw-sz button.off { color: var(--line-2); text-decoration: line-through; cursor: not-allowed; }
.dw-rm { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2); cursor: pointer; flex: none; }
.dw-rm:hover { border-color: var(--bad); color: var(--bad); } .dw-rm .ic { width: 14px; height: 14px; }
.dw-h--ed .dw-lock { flex: none; }
.dsh-grid.is-ed .dw-b, .dsh-grid.is-ed .dw-f { opacity: .62; }
.dw-hidden { display: none !important; }
.dw-slot { border: 2px dashed var(--accent); border-radius: 8px; background: color-mix(in srgb, var(--accent) 5%, transparent); display: grid; place-items: center; color: var(--accent); font-size: 13px; font-weight: 500; min-height: 120px; max-height: 360px; }
.dw-ghost { position: fixed; z-index: 120; pointer-events: none; box-shadow: 0 18px 40px rgba(0,0,0,.24); transform: rotate(-1.2deg); opacity: .96; max-height: 360px; overflow: hidden; }

/* the Add widget drawer */
.dsh-drawer { display: grid; gap: 12px; }
.dsh-search { position: relative; display: block; } .dsh-search .ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--muted); }
.dsh-search input { width: 100%; height: 40px; padding: 0 12px 0 36px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface); color: var(--ink); font: inherit; }
.dsh-chips { display: flex; gap: 6px; flex-wrap: wrap; } .dsh-chips .chip.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.dsh-dg { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
.dsh-dg .dw-eyb { margin: 0; }
.dsh-dl { list-style: none; margin: 0; padding: 0; }
.dsh-di { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.dsh-di b { font-weight: 600; } .dsh-di.is-on .dsh-pv { opacity: .55; }
.dsh-pv { width: 92px; height: 58px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); overflow: hidden; display: block; }
.dw-mini { width: 92px; height: 58px; display: block; }
.dsh-on { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); white-space: nowrap; } .dsh-on .ic { width: 13px; height: 13px; }
.dsh-dfoot { display: flex; justify-content: space-between; align-items: center; gap: 10px; border-top: 1px solid var(--line); padding-top: 12px; position: sticky; bottom: 0; background: var(--surface); }
.m-acc { fill: var(--accent); } .m-acc.o1 { opacity: .82; } .m-acc.o2 { opacity: .64; } .m-acc.o3 { opacity: .46; }
.m-line { fill: none; stroke: var(--accent); stroke-width: 2; } .m-fill { fill: var(--accent); opacity: .12; } .m-prev { fill: none; stroke: var(--muted); stroke-width: 1.4; stroke-dasharray: 3 2; }
.m-sunk { fill: var(--sunk); } .m-line2 { fill: var(--line-2); } .m-ink { fill: var(--ink-2); } .m-ok { fill: var(--ok); } .m-bad { fill: var(--bad); } .m-surf { fill: var(--surface); stroke: var(--line-2); }
.m-cap { stroke: var(--ink-2); stroke-dasharray: 3 2; } .m-out { fill: var(--surface); stroke: var(--ink-2); } .m-num { font: 15px var(--display); fill: var(--ink); } .m-num.sm { font-size: 12px; }
.m-a0 { fill: var(--accent-soft); } .m-a1 { fill: var(--accent-2); opacity: .7; } .m-a2 { fill: var(--accent-2); } .m-a3 { fill: var(--accent); }
.m-ph0 { fill: #6b3f26; } .m-ph1 { fill: #cdbfa6; } .m-ph2 { fill: var(--accent); } .m-pc0 { fill: #7a8f6a; } .m-pc1 { fill: #e3dccd; } .m-pc2 { fill: #b58a3c; } .m-pc3 { fill: var(--ink-2); }
.m-av0 { fill: var(--accent-2); } .m-av1 { fill: var(--ok); } .m-av2 { fill: var(--warn); }
.dsh-listv { display: grid; gap: 10px; }

/* production's Today: the widgets come after the figures */
.pd-page--today .dsh-label { margin-top: 18px; }
.pd-page--today .dsh-fold, .pd-page--today .pd-sec { margin-top: 14px; }

/* the iPad: 44 point targets */
html.ipad .dw-grip, html.ipad .dw-rm { width: 44px; height: 44px; } html.ipad .dw-sz button { height: 44px; padding: 0 12px; } html.ipad .dw-chip { height: 44px; }
html.ipad .dsh-di .btn, html.ipad .dw-acts .icon-btn, html.ipad .dw-acts .link { min-height: 44px; min-width: 44px; }
html.ipad .dw-row { min-height: 44px; }
/* phones */
@media (max-width: 640px) {
  .dsh-editbar { position: static; } .dsh-eb-a { width: 100%; } .dsh-eb-a .btn { flex: 1 1 auto; }
  .dw-pieces { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dw-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .dw-stages .dw-stg { grid-template-columns: minmax(0, 1fr) auto; } .dw-stages .dw-stgl { grid-column: 1 / -1; grid-row: 2; }
  .dw-stages.two { grid-template-columns: minmax(0, 1fr); }
  .dw-hb--names li, .dw-hb--money li { grid-template-columns: minmax(90px, 40%) minmax(0, 1fr) auto; }
  .dw-chat li { max-width: 92%; }
  .dw-conv { flex-wrap: wrap; } .dw-conv > div { flex: 1 1 40%; }
  .dsh-di { grid-template-columns: 70px minmax(0, 1fr); } .dsh-di > :last-child { grid-column: 2; justify-self: start; } .dsh-pv, .dw-mini { width: 70px; height: 44px; }
}
.dw-h--ed .dw-t span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dsh-drawer .dsh-search input[type=search] { padding-left: 38px; }
.dw--S .dw-h--ed { gap: 6px; padding: 10px 10px; } .dw--S .dw-h--ed .dw-sz button { padding: 0 7px; }
@container dsh (max-width: 699px) { .dw-kpi:last-child:nth-child(odd) { grid-column: 1 / -1; border-bottom: 0; } }
.dw--M.dw--trend .dw-kpi:last-child:nth-child(odd) { grid-column: 1 / -1; border-bottom: 0; }

/* ==== owner feedback (Oct 27): packed widgets and content that always fits its card ==== */
/* packing: 2 px rows, each widget spans its own height (live/60-dash.js dshPack); the gap between rows is in the span */
.dsh-grid.is-packed { grid-auto-rows: 2px; row-gap: 0; }
.dsh-grid > .dw, .dsh-grid > .dw-slot { align-self: start; }
.dw-slot { max-height: none; }
/* every widget is its own size context, so its content follows the card's width, not the window's */
.dw { container: dwc / inline-size; max-width: 100%; }
.dw > * { min-width: 0; }
.dw-b { overflow-wrap: anywhere; }
/* customize: the header wraps (title first, then the size switch, the lock and remove) rather than squeezing the body */
.dw-h--ed { flex-wrap: wrap; row-gap: 8px; }
.dw-h--ed .dw-t { flex: 1 1 120px; }
.dw-h--ed .dw-sz, .dw-h--ed .dw-lock, .dw-h--ed .dw-rm { flex: none; }
.dw-h--ed .dw-rm { margin-left: auto; }
.dw-r { min-width: 0; }
/* two figures side by side when there is room, one under the other when not */
.dw-two { flex-wrap: wrap; row-gap: 8px; }
.dw-two > div { min-width: 0; }
.dw-big { font-size: clamp(22px, 7.5cqi, 28px); overflow-wrap: normal; }
.dw-big--m { font-size: clamp(18px, 5.6cqi, 22px); }
@container dwc (max-width: 400px) {
  .dw-two { flex-direction: column; align-items: flex-start; }
  .dw-two .ta-r { text-align: left; }
  .dw-hb li, .dw-hb--money li, .dw-hb--names li, .dw-hb--wide li { grid-template-columns: minmax(70px, 34%) minmax(0, 1fr) auto; gap: 8px; }
  .dw-conv { flex-wrap: wrap; } .dw-conv > div { flex: 1 1 40%; }
  .dw-stages .dw-stg { grid-template-columns: minmax(0, 1fr) auto; } .dw-stages .dw-stgl { grid-column: 1 / -1; grid-row: 2; }
  .dw-row { grid-template-columns: 60px minmax(0, 1fr); } .dw-row .dw-end { grid-column: 2; align-items: flex-start; text-align: left; }
  .dw-row2 { grid-template-columns: auto minmax(0, 1fr); } .dw-row2 > :last-child { grid-column: 2; justify-self: start; }
  .dw-msg { grid-template-columns: 30px minmax(0, 1fr); } .dw-msg > .btn { grid-column: 2; justify-self: start; }
  .dw-prog-now { flex-direction: column; }
  .dw-alert { flex-direction: column; align-items: flex-start; }
}
@container dwc (max-width: 260px) { .dw-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .dw-tile { border-right: 0 !important; border-bottom: 1px solid var(--line); } }
.dw-kpi-v b { overflow-wrap: anywhere; }
.dw-legend2 > * { min-width: 0; }
.dw-chips { min-width: 0; } .dw-chip { max-width: 100%; } .dw-chip select { min-width: 0; max-width: 120px; text-overflow: ellipsis; }
.dw-reply { flex-wrap: wrap; } .dw-reply input { min-width: 160px; }
.dw-tl-r > .link-row { min-width: 0; }
@container dwc (max-width: 899px) { .dw-stages.two { grid-template-columns: minmax(0, 1fr); } }
@container dwc (max-width: 560px) { .dw-stages .dw-stg { grid-template-columns: minmax(0, 1fr) auto; } .dw-stages .dw-stgl { grid-column: 1 / -1; grid-row: 2; } }
.dsh-dragging, .dsh-dragging * { user-select: none !important; -webkit-user-select: none !important; }
/* ==== Library structure (Oct 27): landing, category pages, the rail, cards, the drawer ====
   Mockups programa/library/01-library-landing, 02-category-stone, 03-product-drawer, in Studio OS's own tokens, light and dark. */

/* landing: department tabs, sections, tiles */
.lib-landing { display: grid; gap: 4px; }
.lib-body--landing { display: block; }
.lib-depts { display: flex; align-items: center; gap: 0; border-bottom: 1px solid var(--line); margin: 6px 0 4px; overflow-x: auto; scrollbar-width: none; }
.lib-depts button { padding: 11px 16px 12px; font-size: 14px; color: var(--muted); display: inline-flex; gap: 8px; align-items: center; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.lib-depts button:hover { color: var(--ink); }
.lib-depts button.on { color: var(--ink); border-bottom-color: var(--accent); font-weight: 500; }
.lib-depts em { font-style: normal; font-size: 11.5px; color: var(--muted); background: var(--sunk); border-radius: 9px; padding: 1px 7px; font-weight: 400; }
.lib-depts em.lib-new { background: var(--accent); color: var(--on-accent); }
.lib-showing { margin-left: auto; padding-left: 16px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 13px; }
.lib-pf { display: inline-flex; align-items: center; gap: 8px; }
.lib-pf select { height: 32px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface); padding: 0 26px 0 8px; font-size: 13px; font-weight: 600; color: var(--ink); }
.lib-sec { margin-top: 26px; min-width: 0; }
.lib-sec-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.lib-sec-h h2 { font: 500 15px/1.2 var(--display); letter-spacing: .14em; text-transform: uppercase; margin: 0; }
.lib-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.lib-tile { display: block; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; transition: border-color .15s, transform .15s; min-width: 0; }
.lib-tile:hover { border-color: var(--ink-2); transform: translateY(-1px); }
.lib-tile-im { display: block; aspect-ratio: 4 / 3; background: var(--sunk); position: relative; overflow: hidden; }
.lib-tile-im img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lib-tile-im.empty { background: repeating-linear-gradient(135deg, var(--sunk) 0 10px, var(--surface-2) 10px 20px); display: grid; place-items: center; color: var(--muted); font-size: 12px; }
.lib-tile-tx { display: block; padding: 10px 12px 12px; }
.lib-tile-r { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.lib-tile-r b { font: 600 14px/1.3 var(--sans); }
.lib-tile-n { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.lib-tile-b { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib-tile.dim { opacity: .72; }
.lib-two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
.lib-minis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.lib-mini { display: grid; gap: 3px; text-align: left; padding: 10px 12px; border: 1px dashed var(--line-2); border-radius: 6px; font-size: 13.5px; color: var(--ink-2); position: relative; min-width: 0; }
.lib-mini:hover { border-color: var(--ink-2); color: var(--ink); }
.lib-mini b { font-weight: 500; } .lib-mini span { font-size: 12px; color: var(--muted); }
.lib-mini em { position: absolute; top: 9px; right: 10px; font-style: normal; font-size: 12px; color: var(--muted); }
.lib-fablink { color: var(--accent); display: inline-flex; align-items: center; gap: 4px; }
.lib-fablink .ic { width: 12px; height: 12px; }
.lib-rooms { display: flex; flex-wrap: wrap; gap: 8px; }
.lib-rooms .chip { padding: 6px 12px; font-size: 13px; }
.lib-rooms .chip em { font-style: normal; color: var(--muted); font-size: 12px; font-weight: 400; }
.lib-savedc { gap: 2px; padding-right: 2px; } .lib-savedc .link { display: inline-flex; gap: 6px; align-items: center; text-decoration: none; color: var(--ink); }
.lib-savedc .icon-btn { width: 24px; height: 24px; } .lib-savedc .ic { width: 12px; height: 12px; }
.lib-edits { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.lib-edit { text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; display: block; min-width: 0; }
.lib-edit:hover { border-color: var(--ink-2); }
.lib-edit-cov { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 2px; height: 128px; }
.lib-edit-cov img, .lib-edit-cov span { width: 100%; height: 100%; object-fit: cover; display: block; background: var(--sunk); min-height: 0; }
.lib-edit-cov > :first-child { grid-row: span 2; }
.lib-edit-tx { display: grid; gap: 2px; padding: 10px 12px 12px; }
.lib-edit-tx b { font: 600 14px/1.3 var(--sans); }
.lib-gap { margin: 8px 0 0; font-size: 11.5px; line-height: 1.4; color: var(--warn); background: var(--warn-soft); border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent); border-radius: 5px; padding: 6px 8px; }
.lib-gap .link { font-size: inherit; color: inherit; text-decoration: underline; }
.lib-gap--wide { margin-top: 24px; display: flex; gap: 8px; align-items: center; font-size: 13px; }

/* category page: path, title, type chips */
.lib-chead { margin-bottom: 4px; }
.lib-crumbs { font-size: 12.5px; color: var(--muted); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.lib-crumbs .link { font-size: inherit; color: var(--muted); text-decoration: none; }
.lib-crumbs .link:hover { color: var(--ink); text-decoration: underline; }
.lib-crumbs b { color: var(--ink); font-weight: 500; } .lib-crumbs .ic { width: 11px; height: 11px; }
.lib-chead-r { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px 20px; flex-wrap: wrap; margin-top: 10px; }
.lib-chead-r .h1 { margin: 0; }
.lib-chead-r .lib-tchip { max-width: 80ch; }
.lib-chead-a .btn { height: 36px; }
.lib-bar--cat { padding-top: 10px; }
.lib-bar--cat .lib-search { height: 44px; }
.lib-bar--cat .btn { height: 44px; }
.lib-tchips { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; }
.lib-tchip { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--surface); font-size: 13.5px; color: var(--ink); }
.lib-tchip:hover { border-color: var(--ink-2); }
.lib-tchip em { font-style: normal; color: var(--muted); font-size: 12px; }
.lib-tchip-t { width: 38px; height: 38px; border-radius: 5px; background: var(--sunk); overflow: hidden; flex: none; }
.lib-tchip-t img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lib-tchip.on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.lib-tchip.zero { opacity: .55; }
.lib-tchip--none { opacity: .7; border-style: dashed; padding: 6px 14px; color: var(--muted); min-height: 52px; }

/* the rail */
.lib-body--cat, .lib-body--results { grid-template-columns: 236px minmax(0, 1fr); gap: 30px; }
.lib-fs .label { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.lib-fs-tag { font: 600 9.5px/1 var(--sans); letter-spacing: .08em; color: var(--accent); text-transform: uppercase; }
.lib-fo.zero { color: var(--muted); opacity: .7; }
.lib-fo.zero .lib-fn { opacity: .8; }
.lib-fo.on .lib-cb { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.lib-fam.off { opacity: .25; }
.lib-fam-n { margin: 8px 0 0; }
.lib-more-o { color: var(--accent); }
.lib-fs--sw .switch em { font-style: normal; font-size: 12px; margin-left: auto; }
.lib-fs--sw .label { margin-bottom: 8px; }
.lib-fs--fold summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; }
.lib-fs--fold summary::-webkit-details-marker { display: none; }
.lib-fs--fold summary::after { content: '+'; font-size: 14px; color: var(--muted); }
.lib-fs--fold[open] summary::after { content: '−'; }
.lib-fs--fold ul { margin-top: 10px; }

/* applied filters, the result header */
.lib-chips { gap: 8px; margin-bottom: 12px; }
.lib-achip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 14px; background: var(--ink); color: var(--bg); font-size: 12.5px; }
.lib-achip .ic { width: 11px; height: 11px; }
.lib-achip:hover { opacity: .88; }
.lib-clear-a { color: var(--accent); }
.lib-words { margin: -4px 0 12px; }
.lib-tools-r { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-left: auto; }
.lib-intime { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 4px 0 10px; border-radius: 16px; border: 1px solid var(--line-2); background: var(--surface); font-size: 12.5px; color: var(--ink-2); max-width: 100%; }
.lib-intime .ic { width: 14px; height: 14px; flex: none; }
.lib-intime select { border: 0; background: transparent; font-size: 12.5px; height: 28px; max-width: 160px; color: inherit; padding: 0 4px; }
.lib-intime .link { font-size: 12.5px; color: inherit; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 300px; }
.lib-intime.ok { border-color: color-mix(in srgb, var(--ok) 35%, transparent); color: var(--ok); background: var(--ok-soft); }
.lib-intime.warn { border-color: color-mix(in srgb, var(--warn) 35%, transparent); color: var(--warn); background: var(--warn-soft); }
.lib-lay { display: inline-flex; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface); }
.lib-lay .icon-btn { width: 34px; height: 32px; border-radius: 0; color: var(--muted); }
.lib-lay .icon-btn.on { color: var(--ink); background: var(--surface-2); }

/* cards */
.lib-badges { position: absolute; left: 8px; bottom: 8px; display: flex; gap: 5px; flex-wrap: wrap; }
.lib-badges .lib-badge { position: static; }
.lib-badge--shop { background: var(--accent); color: var(--on-accent); }
.lib-acts { position: absolute; top: 8px; right: 8px; display: flex; gap: 5px; }
.lib-acts .lib-save { position: static; }
.lib-cmp { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: rgba(243,241,235,.93); color: #20201e; opacity: 0; transform: translateY(-3px); transition: opacity .18s, transform .18s; }
.lib-cmp .ic { width: 15px; height: 15px; }
.lib-card:hover .lib-cmp, .lib-cmp:focus-visible, .lib-cmp.on { opacity: 1; transform: none; }
.lib-cmp.on { background: var(--accent); color: var(--on-accent); }
@media (hover: none) { .lib-cmp { opacity: 1; transform: none; } }
.lib-also { font-size: 12.5px; color: var(--muted); margin: 0; }
.lib-grid--list { grid-template-columns: minmax(0, 1fr); gap: 0; }
.lib-grid--list .lib-card { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.lib-grid--list .lib-img { width: 96px; }
.lib-grid--list .lib-badges, .lib-grid--list .lib-acts { display: none; }
.lib-grid--list .lib-meta { padding-top: 0; }

/* the drawer (L3) */
.lib-d2 { display: grid; gap: 18px; padding-top: 14px; }
.lib-body--cat .lib-grid, .lib-body--results .lib-grid { grid-template-columns: repeat(auto-fill, minmax(188px, 1fr)); gap: 30px 18px; }
.lib-d2-top { display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 1fr); gap: 20px; align-items: start; }
.lib-d2-hero { position: relative; aspect-ratio: 1; border-radius: 6px; overflow: hidden; background: color-mix(in srgb, var(--c, var(--surface-2)) 30%, var(--surface-2)); border: 1px solid var(--line); }
.lib-d2-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lib-d2-hero .lib-badge--shop { left: 8px; bottom: 8px; top: auto; }
.lib-d2-hero.lib-card--skel { animation: libpulse 1.2s ease-in-out infinite alternate; }
.lib-d2-side { display: grid; gap: 10px; align-content: start; min-width: 0; }
.lib-d2-side .lib-prices { margin: 4px 0 0; padding: 10px 0 0; border-bottom: 0; gap: 18px; flex-wrap: nowrap; }
.lib-d2-side .lib-prices dd { font-size: 20px; white-space: nowrap; }
.lib-d2-side .lib-prices { margin-left: 0 !important; margin-right: 0; padding-left: 0 !important; }
.lib-d2-side .lib-d-thumbs { padding: 0; }
.lib-h5 { margin: 0 0 9px; font: 600 10.5px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.lib-h5-r { letter-spacing: 0; text-transform: none; font-weight: 400; font-size: 11.5px; }
.lib-h5-r.ok { color: var(--ok); font-weight: 600; } .lib-h5-r.bad { color: var(--bad); font-weight: 600; }
.lib-vars { display: flex; gap: 8px; flex-wrap: wrap; }
.lib-var { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--surface); font-size: 13px; }
.lib-var.on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.lib-var-t { width: 28px; height: 28px; border-radius: 4px; overflow: hidden; background: var(--sunk); }
.lib-var-t img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pill--xs { font-size: 10.5px; padding: 0 6px; }
.lib-specs2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; margin: 0; }
.lib-specs2 div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.lib-specs2 dt { color: var(--muted); } .lib-specs2 dd { margin: 0; text-align: right; min-width: 0; overflow-wrap: anywhere; font-weight: 500; }
.lib-specs2 div.gap dd { color: var(--accent); font-weight: 500; }
.lib-d2-split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.lib-uses { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.lib-uses .pill { font-weight: 500; font-size: 12px; padding: 3px 10px; }
.lib-tl { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; position: relative; }
.lib-tl li { display: grid; gap: 2px; font-size: 12.5px; color: var(--muted); padding-top: 18px; position: relative; }
.lib-tl li::before { content: ''; position: absolute; top: 4px; left: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--ok); }
.lib-tl li:last-child::before { background: var(--accent); }
.lib-tl li::after { content: ''; position: absolute; top: 8px; left: 14px; right: -6px; height: 2px; background: var(--line-2); }
.lib-tl li:last-child::after { display: none; }
.lib-tl b { color: var(--ink); font-weight: 600; }
.lib-goes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.lib-go { display: grid; gap: 4px; text-align: left; min-width: 0; }
.lib-go-im { display: block; aspect-ratio: 1; border-radius: 6px; overflow: hidden; background: color-mix(in srgb, var(--c, var(--surface-2)) 30%, var(--surface-2)); border: 1px solid var(--line); }
.lib-go-im img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lib-go-n { font-size: 12.5px; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.lib-go-c { font-size: 11.5px; color: var(--muted); }
.lib-go:hover .lib-go-n { text-decoration: underline; }
.lib-d2-boards, .lib-dboards-add { position: relative; }
.lib-pop--inline { position: static; width: auto; box-shadow: none; }
.lib-tagin { display: grid; gap: 4px; padding: 8px 2px 0; border-top: 1px solid var(--line); margin-top: 4px; }
.lib-tagin input { height: 34px; border: 1px solid var(--line-2); border-radius: var(--r); padding: 0 10px; background: var(--surface); }
.lib-dboards { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.lib-dboards li { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.lib-dr-save { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.lib-btags { display: flex; gap: 6px; flex-wrap: wrap; margin: 0; }
.lib-btagin input { width: 100%; font-size: 12.5px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); padding: 6px 8px; }
.lib-det-miss select, .lib-det-miss input { border-color: var(--warn) !important; }
.lib-det-multi { display: flex; flex-wrap: wrap; gap: 6px 14px; border: 0; padding: 0; margin: 0 0 12px; }
.lib-det-multi legend, .lib-ed fieldset legend { font-size: 12.5px; font-weight: 600; margin-bottom: 6px; }
.lib-ed fieldset { border: 0; padding: 0; margin: 0 0 12px; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.lib-ed .chk { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; }

/* compare */
.lib-cmpv { max-width: 1000px; }
.lib-cmpt { width: 100%; border-collapse: collapse; font-size: 13px; }
.lib-cmpt th, .lib-cmpt td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.lib-cmpt tbody th { color: var(--muted); font-weight: 500; width: 160px; }
.lib-cmp-h { display: grid; gap: 4px; text-align: left; }
.lib-cmp-im { display: block; width: 120px; aspect-ratio: 1; border-radius: 6px; overflow: hidden; background: color-mix(in srgb, var(--c, var(--surface-2)) 30%, var(--surface-2)); }
.lib-cmp-im img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lib-sg--chips { background: var(--surface-2); }
.lib-sg--chips span { font-weight: 500; }

/* widths: 1440 desktop, the iPad (1180 x 820 and portrait), 390 phones */
@media (max-width: 1280px) { .lib-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } .lib-edits { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .lib-body--cat, .lib-body--results { grid-template-columns: 200px minmax(0, 1fr); gap: 24px; } .lib-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } .lib-two { grid-template-columns: minmax(0, 1fr); } .lib-goes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .lib-body--cat, .lib-body--results { grid-template-columns: minmax(0, 1fr); }
  .lib-edits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lib-showing { display: none; }
  .lib-d2-top { grid-template-columns: minmax(0, 1fr); }
  .lib-d2-hero { max-width: 320px; }
}
@media (max-width: 640px) {
  .lib-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .lib-minis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lib-edits { grid-template-columns: minmax(0, 1fr); }
  .lib-depts button { padding: 10px 10px 11px; font-size: 13px; }
  .lib-specs2, .lib-d2-split { grid-template-columns: minmax(0, 1fr); }
  .lib-d2-side .lib-prices { flex-wrap: wrap; gap: 10px 18px; } .lib-d2-side .lib-prices dd { font-size: 18px; }
  .lib-tl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lib-tl li::after { display: none; }
  .lib-goes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lib-tools { align-items: flex-start; }
  .lib-tools-r { margin-left: 0; width: 100%; }
  .lib-intime .link { max-width: 200px; }
  .lib-chead-a { width: 100%; } .lib-chead-a .btn { flex: 1 1 0; }
  .lib-tchip { padding-right: 10px; font-size: 13px; }
}
/* the iPad: touch targets, nothing waits for a hover */
html.ipad .lib-cmp, html.ipad .lib-save { opacity: 1; transform: none; width: 44px; height: 44px; }
html.ipad .lib-depts button, html.ipad .lib-tchip, html.ipad .lib-var, html.ipad .lib-tile, html.ipad .lib-achip { min-height: 44px; }
html.ipad .lib-lay .icon-btn { width: 44px; height: 44px; }
html.ipad .lib-intime, html.ipad .lib-intime select { min-height: 40px; }

/* Clear filters (N): a real button at the top of the rail and at the bottom of the phone sheet */
.lib-rail-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 32px; padding-bottom: 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.lib-rail-h .label { margin: 0; }
.lib-clearf { white-space: nowrap; }
.lib-rail .lib-rail-h + .lib-fs { border-top: 0; }
html.ipad .lib-clearf { min-height: 44px; }
/* ==== Find a Designer (builder FB, Oct 28 2026): Studio OS screens ====
   Hub: Introductions, Your public profile. Studio: Profile reviews, Leads > Collective introductions, settings, the flag.
   Built from mockups 10 to 14. Tokens are the app's own (light and dark); no colour is written twice. */
.fd { --fd-ok-bd: color-mix(in srgb, var(--ok) 32%, var(--surface)); --fd-warn-bd: color-mix(in srgb, var(--warn) 38%, var(--surface)); --fd-bad-bd: color-mix(in srgb, var(--bad) 34%, var(--surface)); --fd-acc-bd: color-mix(in srgb, var(--accent) 28%, var(--surface)); --fd-field: color-mix(in srgb, var(--surface) 70%, var(--bg)); --fd-note: color-mix(in srgb, var(--warn-soft) 55%, var(--surface)); }
.fd, .fd * { box-sizing: border-box; }
.fd-eyb { font: 600 10.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.fd-u { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-2); color: var(--ink-2); background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.fd-xs { font-size: 11.5px; } .fd-sm { font-size: 12.5px; }
.fd-row { display: flex; align-items: center; gap: 10px; } .fd-row.wrap { flex-wrap: wrap; } .fd-between { justify-content: space-between; } .fd-gap-s { gap: 6px; }
.fd-mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; letter-spacing: .02em; }
.fd-tnum { font-variant-numeric: tabular-nums; }
.fd svg.ic { vertical-align: -3px; }
.fd-ph { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 20px; flex-wrap: wrap; }
.fd-ph .fd-sub { color: var(--muted); margin: 8px 0 0; font-size: 14px; max-width: 62ch; }
.fd-ph .fd-eyb { margin-bottom: 8px; display: block; }
.fd-ph-act { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.fd-new { margin-left: auto; height: 17px; padding: 0 6px; border-radius: 9px; background: var(--accent-soft); color: var(--accent); font: 600 10px/17px var(--sans); letter-spacing: .04em; }
.fd-new + .nav-n { margin-left: 6px; }

/* portraits: the designer's own photo in a circle; with none yet, initials on a material (the placeholder style of the mockups) */
.fd-pt { position: relative; border-radius: 50%; background: var(--sunk) center/cover; flex: none; display: inline-grid; place-items: center; overflow: hidden; width: var(--s, 40px); height: var(--s, 40px); }
.fd-pt::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 45%, rgba(32,32,30,.15), rgba(32,32,30,.45)); }
.fd-pt b { position: relative; font: 500 calc(var(--s, 40px) * .32) / 1 var(--display); letter-spacing: .14em; color: #e6e3da; padding-left: .14em; }
.fd-pt.has::before, .fd-pt.has b { display: none; }
.fd-pt.m1 { background-image: linear-gradient(135deg, #6b5d4c, #4a3f33); } .fd-pt.m2 { background-image: linear-gradient(135deg, #3b3d3f, #232526); } .fd-pt.m3 { background-image: linear-gradient(135deg, #7a6a58, #5a4a3a); } .fd-pt.m4 { background-image: linear-gradient(135deg, #4c5a4a, #333d31); } .fd-pt.m5 { background-image: linear-gradient(135deg, #8a8170, #6a6252); }
.fd-pt.ring { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--accent); }
.fd-av { width: 34px; height: 34px; border-radius: 50%; display: inline-grid; place-items: center; font: 600 11.5px/1 var(--sans); color: #f3f1eb; background: #845510; flex: none; }
.fd-av.me { background: #4a0000; } .fd-av.st { background: var(--ink-2); color: var(--surface); }

/* list and detail */
.fd-split { display: grid; grid-template-columns: 318px minmax(0, 1fr); gap: 20px; align-items: start; }
.fd-ilist { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.fd-lh { padding: 12px 14px; border-bottom: 1px solid var(--line); display: flex; gap: 8px; align-items: center; }
.fd-seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 3px; gap: 2px; }
.fd-seg > button, .fd-seg > span { padding: 6px 13px; border-radius: 6px; font-size: 13px; color: var(--muted); white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; }
.fd-seg > .on { background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px var(--line); font-weight: 500; }
.fd-seg.grow { flex: 1; } .fd-seg.grow > * { flex: 1; }
.fd-ii { display: grid; gap: 5px; width: 100%; text-align: left; padding: 14px 16px 14px 18px; border: 0; border-bottom: 1px solid var(--line); position: relative; background: transparent; color: inherit; }
.fd-ii:hover { background: var(--surface-2); }
.fd-ii.on { background: var(--bg); }
.fd-ii.on::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); }
.fd-ii.late { box-shadow: inset 0 0 0 1px var(--fd-bad-bd); }
.fd-ii .nm { font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.fd-ii .nm .t { margin-left: auto; font-weight: 400; font-size: 12px; color: var(--muted); }
.fd-ii .s { font-size: 12.5px; color: var(--ink-2); }
.fd-ii .m { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fd-unread { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); display: inline-block; flex: none; }
.fd-listnote { padding: 14px 16px; border-top: 1px solid var(--line); background: var(--surface-2); color: var(--muted); font-size: 11.5px; display: flex; gap: 6px; align-items: flex-start; }
.fd-q { display: grid; grid-template-columns: 40px 1fr; gap: 0 12px; align-items: start; }
.fd-q > div { display: grid; gap: 4px; min-width: 0; }

.fd-dcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); min-width: 0; }
.fd-dhead { padding: 20px 22px 18px; border-bottom: 1px solid var(--line); }
.fd-dname { font: 500 26px/1.1 var(--display); letter-spacing: .04em; margin: 0; }
.fd-dmeta { color: var(--muted); font-size: 13px; margin-top: 6px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fd-dot::before { content: "\00b7"; color: var(--line-2); margin: 0 2px; }
.fd-stages { display: flex; align-items: center; margin-top: 16px; overflow-x: auto; padding-bottom: 2px; }
.fd-stg { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 13px 0 9px; border-radius: 15px; border: 1px solid var(--line); background: var(--surface); font: 500 12.5px/1 var(--sans); color: var(--muted); white-space: nowrap; flex: none; }
.fd-stg .n { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--line-2); display: inline-grid; place-items: center; font: 600 10px/1 var(--sans); color: var(--muted); }
.fd-stg.done { color: var(--ok); border-color: var(--fd-ok-bd); background: var(--ok-soft); }
.fd-stg.done .n { background: var(--ok); border-color: var(--ok); color: var(--surface); }
.fd-stg.now { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.fd-stg.now .n { background: var(--surface); border-color: var(--surface); color: var(--ink); }
.fd-ln { width: 18px; height: 1px; background: var(--line-2); flex: none; } .fd-ln.d { background: var(--ok); }

.fd-dbody { display: grid; grid-template-columns: minmax(0, 1fr) 318px; }
.fd-dmain { padding: 20px 22px 22px; border-right: 1px solid var(--line); min-width: 0; }
.fd-daside { padding: 20px 18px 22px; display: grid; gap: 14px; align-content: start; background: var(--surface-2); border-radius: 0 0 var(--r-lg) 0; min-width: 0; }
.fd-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.fd-bh { white-space: nowrap; display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-bottom: 1px solid var(--line); font: 600 13px/1.3 var(--sans); }
.fd-bh svg { color: var(--muted); } .fd-bh .r { margin-left: auto; font-weight: 400; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.fd-bb { padding: 12px 14px; }
.fd-kv { display: grid; grid-template-columns: 82px 1fr; gap: 7px 10px; font-size: 12.5px; margin: 0; }
.fd-kv dt { color: var(--muted); } .fd-kv dd { margin: 0; color: var(--ink); min-width: 0; overflow-wrap: anywhere; display: flex; align-items: center; gap: 5px; }
.fd-quote { margin-top: 10px; padding: 10px 12px; border-left: 2px solid var(--accent); background: var(--surface-2); font-size: 13px; line-height: 1.5; color: var(--ink-2); border-radius: 0 6px 6px 0; }
.fd-locked { background: var(--surface); border: 1px dashed var(--line-2); border-radius: var(--r-lg); padding: 14px; }
.fd-lk { width: 32px; height: 32px; border-radius: 50%; background: var(--sunk); display: grid; place-items: center; color: var(--ink-2); flex: none; }
.fd-mask { display: inline-block; height: 9px; border-radius: 5px; background: repeating-linear-gradient(90deg, var(--line) 0 7px, transparent 7px 10px); vertical-align: middle; }
.fd-mini { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 12px; }
.fd-mini .st { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.fd-mini .st i { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--line-2); display: inline-grid; place-items: center; font-style: normal; }
.fd-mini .st.d { color: var(--ok); } .fd-mini .st.d i { background: var(--ok); border-color: var(--ok); color: var(--surface); }
.fd-mini .bar2 { flex: 1; height: 2px; background: var(--line); border-radius: 1px; min-width: 24px; } .fd-mini .bar2.d { background: var(--ok); }
.fd-reveal { background: var(--surface); border: 1px solid var(--fd-ok-bd); border-radius: var(--r-lg); overflow: hidden; }
.fd-reveal .rh { display: flex; align-items: center; gap: 8px; padding: 11px 14px; background: var(--ok-soft); color: var(--ok); font: 600 13px/1.3 var(--sans); border-bottom: 1px solid var(--fd-ok-bd); white-space: nowrap; }
.fd-reveal .rb { padding: 14px; display: grid; gap: 11px; font-size: 13px; }
.fd-reveal .rr { display: grid; grid-template-columns: 18px 1fr; gap: 9px; align-items: start; overflow-wrap: anywhere; }
.fd-reveal .rr svg { color: var(--muted); margin-top: 2px; }
.fd-copy { color: var(--muted); background: none; border: 0; padding: 2px; margin-left: auto; }
.fd-divider { height: 1px; background: var(--line); }
.fd-dark { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.fd-dark .fd-sm2 { color: color-mix(in srgb, var(--surface) 70%, var(--ink)); margin-top: 4px; line-height: 1.5; font-size: 11.5px; }
.fd-dark .btn { background: var(--surface); border-color: var(--surface); color: var(--ink); }

/* thread */
.fd-thread { display: grid; gap: 14px; }
.fd-evt { display: flex; gap: 10px; align-items: center; font-size: 12.5px; color: var(--muted); }
.fd-evt::before, .fd-evt::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.fd-evt > span { display: inline-flex; align-items: center; gap: 6px; text-align: center; }
.fd-evt.ok { color: var(--ok); }
.fd-msg { display: grid; grid-template-columns: 34px 1fr; gap: 12px; }
.fd-msg.small { grid-template-columns: 30px 1fr; gap: 10px; }
.fd-who { display: flex; align-items: baseline; gap: 8px; font-size: 13px; flex-wrap: wrap; } .fd-who b { font-weight: 600; } .fd-who span { color: var(--muted); font-size: 12px; }
.fd-bubble { margin-top: 6px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 2px 10px 10px 10px; padding: 12px 14px; font-size: 13.5px; line-height: 1.55; color: var(--ink); overflow-wrap: anywhere; white-space: pre-wrap; }
.fd-msg.me .fd-bubble { background: color-mix(in srgb, var(--surface) 70%, var(--bg)); }
.fd-msg.studio .fd-bubble { border-style: dashed; }
.fd-msg.small .fd-bubble { font-size: 13px; padding: 10px 12px; }
.fd-masked { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: 4px; background: var(--sunk); color: var(--ink-2); font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.fd-masked svg { width: 11px; height: 11px; }
.fd-flagged { background: var(--warn-soft); box-shadow: 0 0 0 1.5px var(--fd-warn-bd); color: var(--warn); border-radius: 3px; padding: 0 3px; font-weight: 500; }
.fd-att { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.fd-att a, .fd-att span.im { width: 84px; height: 62px; border-radius: 6px; background: var(--sunk) center/cover; border: 1px solid var(--line); display: block; }
.fd-hold { font-size: 11.5px; color: var(--muted); margin-top: 6px; display: flex; gap: 6px; align-items: flex-start; }
.fd-orig { margin-top: 8px; font-size: 12px; background: var(--warn-soft); border: 1px solid var(--fd-warn-bd); border-radius: 6px; padding: 7px 9px; color: var(--warn); display: flex; gap: 7px; align-items: flex-start; }
.fd-orig svg { flex: none; margin-top: 1px; }
.fd-composer { border: 1px solid var(--line-2); border-radius: 8px; background: var(--surface); overflow: hidden; }
.fd-composer textarea { display: block; width: 100%; border: 0; background: transparent; padding: 12px 14px; min-height: 92px; font: 13.5px/1.55 var(--sans); color: var(--ink); resize: vertical; outline: 0; }
.fd-composer:focus-within { border-color: var(--ink-2); }
.fd-cf { display: flex; align-items: center; gap: 10px; padding: 9px 10px 9px 14px; border-top: 1px solid var(--line); background: var(--surface-2); }
.fd-cf .fd-gate { flex: 1; min-width: 0; }
.fd-gate { display: flex; gap: 7px; align-items: center; font-size: 12px; color: var(--muted); } .fd-gate.ok { color: var(--ok); }
.fd-slot { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 8px 0 12px; border-radius: 17px; border: 1px solid var(--line-2); background: var(--surface); font: 500 13px/1 var(--sans); color: var(--ink); white-space: nowrap; }
.fd-slot small { font-weight: 400; color: var(--muted); font-size: 12px; }
.fd-slot .x { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); background: var(--surface-2); border: 0; padding: 0; }
.fd-slot.add { border-style: dashed; color: var(--ink-2); padding: 0 12px; background: transparent; }
.fd-slot.picked { background: var(--ok-soft); border-color: var(--fd-ok-bd); color: var(--ok); }
.fd-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fd-addslot { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.fd-addslot input, .fd-addslot select { min-height: 36px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--fd-field); padding: 0 10px; font: 13px var(--sans); color: var(--ink); }
.fd-banner { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-radius: var(--r-lg); background: var(--ok-soft); border: 1px solid var(--fd-ok-bd); color: var(--ok); font-size: 14px; margin-bottom: 18px; }
.fd-banner .ic2 { width: 28px; height: 28px; border-radius: 50%; background: var(--ok); color: var(--surface); display: grid; place-items: center; flex: none; }
.fd-banner .rt { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.fd-tagx { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); font: 600 11.5px/1 var(--sans); border: 1px solid var(--fd-acc-bd); white-space: nowrap; }
.fd-visit { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }
.fd-cal { width: 52px; text-align: center; border: 1px solid var(--line); border-radius: 6px; padding: 5px 0; background: var(--surface-2); flex: none; }
.fd-cal .m { font: 600 9.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .fd-cal .d { font: 400 22px/1.1 var(--display); }

/* status pills for introductions */
.fd-sp { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 11px; font: 500 11.5px/1 var(--sans); white-space: nowrap; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2); }
.fd-sp::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .85; }
.fd-sp.new { background: var(--accent-soft); color: var(--accent); border-color: var(--fd-acc-bd); }
.fd-sp.rep { background: var(--sunk); }
.fd-sp.vp { background: var(--warn-soft); color: var(--warn); border-color: var(--fd-warn-bd); }
.fd-sp.vb { background: color-mix(in srgb, #3a5a78 16%, var(--surface)); color: color-mix(in srgb, #3a5a78 80%, var(--ink)); border-color: color-mix(in srgb, #3a5a78 28%, var(--surface)); }
.fd-sp.ci { background: var(--ok-soft); color: var(--ok); border-color: var(--fd-ok-bd); }
.fd-sp.pr { background: var(--ok); color: var(--surface); border-color: var(--ok); }
.fd-sp.cl { background: transparent; color: var(--muted); }
.fd-sp.late { background: var(--bad-soft); color: var(--bad); border-color: var(--fd-bad-bd); }
.fd-sp.vp2 { background: var(--warn-soft); color: var(--warn); border-color: var(--fd-warn-bd); }
.fd-pill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 12px; font: 500 12px/1 var(--sans); white-space: nowrap; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2); }
.fd-pill.warn { background: var(--warn-soft); color: var(--warn); border-color: var(--fd-warn-bd); } .fd-pill.bad { background: var(--bad-soft); color: var(--bad); border-color: var(--fd-bad-bd); } .fd-pill.ok { background: var(--ok-soft); color: var(--ok); border-color: var(--fd-ok-bd); } .fd-pill.acc { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.fd-pill .d { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* forms (profile editor and settings) */
.fd-ed { display: grid; grid-template-columns: minmax(0, 1fr) 432px; gap: 24px; align-items: start; }
.fd-form { display: grid; gap: 16px; min-width: 0; }
.fd-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fd-fcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.fd-fh { padding: 16px 20px 0; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.fd-fh h3 { font: 600 15px/1.3 var(--sans); margin: 0; } .fd-fh .hint { font-size: 12.5px; color: var(--muted); }
.fd-fb { padding: 14px 20px 20px; }
.fd-lab { font: 500 12.5px/1.3 var(--sans); color: var(--ink-2); margin-bottom: 7px; display: flex; justify-content: space-between; gap: 8px; } .fd-lab small { color: var(--muted); font-weight: 400; font-size: 12px; }
.fd-fld { display: block; width: 100%; border: 1px solid var(--line-2); border-radius: 6px; background: var(--fd-field); padding: 9px 12px; font: 14px/1.5 var(--sans); color: var(--ink); min-height: 40px; }
.fd-fld:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
textarea.fd-fld { min-height: 112px; font-size: 13.5px; resize: vertical; }
.fd-cnt { text-align: right; font-size: 11.5px; color: var(--muted); margin-top: 6px; } .fd-cnt.over { color: var(--bad); }
.fd-chip { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 17px; border: 1px solid var(--line-2); background: var(--surface); font-size: 13px; color: var(--ink-2); white-space: nowrap; cursor: pointer; }
.fd-chip.on { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.fd-chip.dis { opacity: .45; cursor: not-allowed; }
.fd-chip svg { width: 13px; height: 13px; }
.fd-tog { width: 40px; height: 24px; border-radius: 12px; background: var(--line-2); position: relative; flex: none; border: 0; padding: 0; cursor: pointer; }
.fd-tog::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: left .15s; }
.fd-tog[aria-checked="true"] { background: var(--ok); } .fd-tog[aria-checked="true"]::after { left: 19px; }
.fd-tog:disabled { opacity: .5; }
.fd-oktext { color: var(--ok); display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 500; }
.fd-tags { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.fd-tags .fd-pill button { background: none; border: 0; padding: 0; display: inline-grid; place-items: center; color: var(--muted); }
.fd-tagin { border: 0; background: transparent; min-width: 110px; flex: 1; font: 13px var(--sans); color: var(--ink); outline: 0; }
.fd-tagbox { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; border: 1px solid var(--line-2); border-radius: 6px; background: var(--fd-field); padding: 6px 8px; min-height: 40px; }

.fd-cropper { display: grid; grid-template-columns: 280px 1fr; gap: 22px; }
.fd-cstage { position: relative; width: 280px; height: 280px; border-radius: 8px; overflow: hidden; background: #20201e; touch-action: none; cursor: grab; user-select: none; }
.fd-cstage.drag { cursor: grabbing; }
.fd-cstage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.fd-cstage .circ { position: absolute; left: 32px; top: 32px; width: 216px; height: 216px; border-radius: 50%; border: 1.5px solid #f3f1eb; box-shadow: 0 0 0 1px rgba(0,0,0,.25); pointer-events: none; }
.fd-cstage .circ::before, .fd-cstage .circ::after { content: ""; position: absolute; left: 33%; right: 33%; top: 0; bottom: 0; border-left: 1px solid rgba(243,241,235,.35); border-right: 1px solid rgba(243,241,235,.35); }
.fd-cstage .circ::after { left: 0; right: 0; top: 33%; bottom: 33%; border: 0; border-top: 1px solid rgba(243,241,235,.35); border-bottom: 1px solid rgba(243,241,235,.35); }
.fd-cstage .grab { position: absolute; left: 50%; transform: translateX(-50%); bottom: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 14px; background: rgba(32,32,30,.78); color: #f3f1eb; font-size: 11.5px; white-space: nowrap; pointer-events: none; }
.fd-cstage .ini { position: absolute; left: 32px; top: 32px; width: 216px; height: 216px; display: grid; place-items: center; font: 500 40px/1 var(--display); letter-spacing: .18em; color: #e6e3da; padding-left: .18em; pointer-events: none; }
.fd-zoom { display: flex; align-items: center; gap: 10px; margin-top: 12px; color: var(--muted); font-size: 12px; }
.fd-zoom input[type=range] { flex: 1; accent-color: var(--ink); min-height: 28px; }
.fd-checks { display: grid; gap: 9px; margin-top: 4px; }
.fd-checks > div { display: flex; gap: 8px; align-items: center; font-size: 13px; }
.fd-checks .ok, .fd-checks .no, .fd-checks .wait { width: 18px; height: 18px; border-radius: 50%; color: #fff; display: grid; place-items: center; flex: none; }
.fd-checks .ok { background: var(--ok); } .fd-checks .no { background: var(--warn); } .fd-checks .wait { background: var(--line-2); }
.fd-drop { border: 1px dashed var(--line-2); border-radius: 8px; padding: 14px; display: flex; gap: 12px; align-items: center; background: var(--surface-2); font-size: 12.5px; color: var(--muted); cursor: pointer; }
.fd-drop.over { border-color: var(--accent); background: var(--accent-soft); }
.fd-cover { height: 150px; border-radius: 8px; background: var(--sunk) center/cover; position: relative; border: 1px solid var(--line); cursor: crosshair; overflow: hidden; }
.fd-cover .bt { position: absolute; right: 10px; bottom: 10px; display: flex; gap: 6px; }
.fd-cover .bt button { background: rgba(243,241,235,.94); color: #20201e; border: 0; border-radius: 6px; padding: 6px 10px; font: 500 12px var(--sans); display: inline-flex; gap: 6px; align-items: center; }
.fd-cover .fp { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; border: 2px solid #f3f1eb; box-shadow: 0 0 0 1px rgba(0,0,0,.3); pointer-events: none; }
.fd-prj { display: grid; grid-template-columns: 20px 1fr auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); background: var(--surface); }
.fd-prj:last-of-type { border-bottom: 0; }
.fd-prj .hd { color: var(--line-2); cursor: grab; background: none; border: 0; padding: 0; touch-action: none; } .fd-prj .hd:focus-visible { color: var(--ink); }
.fd-strip { display: flex; gap: 5px; margin-top: 8px; }
.fd-strip i { width: 54px; height: 40px; border-radius: 4px; background: var(--sunk) center/cover; border: 1px solid var(--line); display: block; }
.fd-strip i.more { display: grid; place-items: center; font: 500 11px/1 var(--sans); font-style: normal; color: var(--muted); background: var(--surface-2); }
.fd-prj.dragging { box-shadow: 0 10px 24px rgba(32,32,30,.16), 0 0 0 1px var(--line-2); border-radius: 8px; padding: 12px; margin: 4px -12px; transform: rotate(-.4deg); border-bottom: 0; position: relative; z-index: 2; }
.fd-prj.slotx { height: 8px; padding: 0; border: 1.5px dashed var(--accent); border-radius: 6px; background: var(--accent-soft); margin: 2px 0; }
.fd-mats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.fd-mat { border: 1px solid var(--line); border-radius: 7px; overflow: hidden; background: var(--surface); position: relative; }
.fd-mat .im { height: 82px; background: var(--sunk) center/cover; }
.fd-mat .m { padding: 7px 9px; font-size: 11.5px; line-height: 1.3; } .fd-mat .m small { display: block; color: var(--muted); font-size: 10.5px; margin-top: 2px; }
.fd-mat .xx { position: absolute; right: 6px; top: 6px; width: 24px; height: 24px; border-radius: 50%; background: rgba(243,241,235,.92); color: #3b3a35; display: grid; place-items: center; border: 0; padding: 0; }
.fd-mat.empty { border-style: dashed; display: grid; place-items: center; min-height: 124px; color: var(--muted); font-size: 12px; background: var(--surface-2); text-align: center; width: 100%; cursor: pointer; }
.fd-pv { position: sticky; top: 20px; display: grid; gap: 12px; min-width: 0; }
.fd-pvh { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.fd-web { background: #20201e; color: #dcd9ce; border-radius: 10px; overflow: hidden; }
.fd-web .lbl2 { font: 500 10px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: #9a968a; }
.fd-web .disp { font: 400 34px/.95 var(--display); letter-spacing: -.01em; text-transform: uppercase; }
.fd-wpill { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 16px; border-radius: 17px; border: 1px solid rgba(220,217,206,.5); color: #dcd9ce; font: 500 12px/1 var(--sans); letter-spacing: .04em; white-space: nowrap; }
.fd-wpill.s { background: #dcd9ce; color: #20201e; border-color: #dcd9ce; } .fd-wpill.sm { height: 24px; padding: 0 10px; font-size: 10.5px; }
.fd-wcard { padding: 26px 24px 22px; }
.fd-strip3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 18px; } .fd-strip3 i { height: 74px; background: #3b3a35 center/cover; display: block; }
.fd-wpage .cv { height: 170px; background: #3b3a35 center 60%/cover; position: relative; }
.fd-wpage .cv::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(32,32,30,.55), rgba(32,32,30,.15) 40%, rgba(32,32,30,.8)); }
.fd-wpage .nav3 { position: absolute; z-index: 2; left: 18px; right: 18px; top: 14px; display: flex; justify-content: space-between; align-items: center; font: 500 8.5px/1 var(--sans); letter-spacing: .18em; color: #dcd9ce; }
.fd-wpage .bd2 { padding: 0 22px 24px; position: relative; }
.fd-wpage .fd-pt.big { margin-top: -52px; position: relative; z-index: 3; box-shadow: 0 0 0 4px #20201e; }
.fd-wphone { width: 280px; margin: 0 auto; border: 6px solid #3b3a35; border-radius: 28px; }
.fd-sfoot { position: sticky; bottom: 0; margin: 28px -4px 0; padding: 14px 20px; background: color-mix(in srgb, var(--surface) 97%, transparent); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgba(32,32,30,.07); display: flex; align-items: center; gap: 14px; flex-wrap: wrap; z-index: 5; }
.fd-dotc { width: 8px; height: 8px; border-radius: 50%; background: var(--warn); display: inline-block; flex: none; } .fd-dotc.ok { background: var(--ok); } .fd-dotc.bad { background: var(--bad); }

/* studio: introductions */
.fd-tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--line); margin-bottom: 18px; overflow-x: auto; }
.fd-tabs button { padding: 10px 2px; color: var(--muted); font-size: 14px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; white-space: nowrap; display: inline-flex; gap: 6px; align-items: center; }
.fd-tabs button.on { color: var(--ink); border-bottom-color: var(--accent); font-weight: 500; }
.fd-wrow { display: grid; grid-template-columns: 1fr 1.25fr 1.25fr; gap: 16px; margin-bottom: 18px; }
.fd-wd { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); min-width: 0; }
.fd-wd .wh { display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-bottom: 1px solid var(--line); font: 600 13px/1.3 var(--sans); white-space: nowrap; } .fd-wd .wh svg { color: var(--muted); } .fd-wd .wh .r { margin-left: auto; font-weight: 400; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.fd-wd .wb { padding: 14px; }
.fd-bigv { font: 400 34px/1 var(--display); letter-spacing: .01em; }
.fd-chg { display: inline-flex; align-items: center; height: 19px; padding: 0 7px; border-radius: 10px; font: 600 11px/1 var(--sans); } .fd-chg.up { background: var(--ok-soft); color: var(--ok); } .fd-chg.dn { background: var(--bad-soft); color: var(--bad); }
.fd-spark { display: flex; align-items: flex-end; gap: 5px; height: 44px; margin-top: 12px; } .fd-spark i { flex: 1; background: var(--sunk); border-radius: 2px 2px 0 0; display: block; } .fd-spark i.c { background: var(--accent); }
.fd-rb { display: grid; grid-template-columns: 112px 1fr 56px; gap: 8px; align-items: center; font-size: 12px; padding: 2.5px 0; }
.fd-rb .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-rb .tr { height: 8px; background: var(--surface-2); border-radius: 0 3px 3px 0; position: relative; } .fd-rb .tr i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--ink-2); border-radius: 0 3px 3px 0; } .fd-rb .tr i.bad { background: var(--bad); }
.fd-rb .tr .tg { position: absolute; top: -3px; bottom: -3px; border-left: 1.5px dashed var(--accent); }
.fd-rb .n { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.fd-fun { display: grid; gap: 6px; } .fd-fun .fr { display: grid; grid-template-columns: 92px 1fr 30px; gap: 8px; align-items: center; font-size: 12px; } .fd-fun .tr { height: 14px; position: relative; } .fd-fun .tr i { position: absolute; left: 0; top: 0; bottom: 0; background: color-mix(in srgb, var(--accent) 22%, var(--sunk)); border-radius: 2px; } .fd-fun .fr:last-child .tr i { background: var(--accent); } .fd-fun .n { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.fd-stagebar { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.fd-stagebar button { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 11px; border-radius: 15px; border: 1px solid var(--line-2); background: var(--surface); font-size: 12.5px; color: var(--ink-2); white-space: nowrap; }
.fd-stagebar button b { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
.fd-stagebar button.on { background: var(--ink); border-color: var(--ink); color: var(--surface); } .fd-stagebar button.on b { color: var(--surface); }
.fd-lay { display: grid; grid-template-columns: minmax(0, 1fr) 452px; gap: 18px; align-items: start; }
.fd-lay.nopanel { grid-template-columns: minmax(0, 1fr); }
.fd-tblc { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.fd-tblc .scroll { overflow-x: auto; }
table.fd-it { width: 100%; border-collapse: collapse; }
table.fd-it th { text-align: left; font: 600 10px/1 var(--sans); letter-spacing: .13em; text-transform: uppercase; color: var(--muted); padding: 11px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.fd-it td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: middle; font-size: 13px; }
table.fd-it tr:last-child td { border-bottom: 0; }
table.fd-it tbody tr { cursor: pointer; } table.fd-it tbody tr:hover td { background: var(--surface-2); }
table.fd-it tr.on td { background: var(--bg); } table.fd-it tr.on td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
table.fd-it tr.late td { background: var(--bad-soft); }
.fd-who2 b { font-weight: 600; display: block; font-size: 13px; } .fd-who2 small { color: var(--muted); font-size: 11.5px; }
.fd-dz { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.fd-rt { font-variant-numeric: tabular-nums; white-space: nowrap; } .fd-rt.late { color: var(--bad); font-weight: 600; } .fd-rt small { display: block; font-weight: 400; font-size: 11px; color: var(--muted); } .fd-rt.late small { color: var(--bad); }
.fd-pan { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); min-width: 0; }
.fd-pan .ph2 { padding: 16px 18px 14px; border-bottom: 1px solid var(--line); }
.fd-pan .sec { padding: 14px 18px; border-bottom: 1px solid var(--line); }
.fd-cgrid { display: grid; grid-template-columns: 18px 1fr; gap: 7px 9px; font-size: 12.5px; align-items: start; overflow-wrap: anywhere; } .fd-cgrid svg { color: var(--muted); margin-top: 2px; }
.fd-inote { border: 1px solid var(--fd-warn-bd); background: var(--fd-note); border-radius: 8px; overflow: hidden; }
.fd-inote .ih { display: flex; align-items: center; gap: 7px; padding: 8px 12px; font: 600 11.5px/1 var(--sans); color: var(--warn); border-bottom: 1px solid var(--fd-warn-bd); letter-spacing: .02em; }
.fd-inote .it { padding: 10px 12px; font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; } .fd-inote .it + .it { border-top: 1px dashed var(--fd-warn-bd); }
.fd-inote textarea { display: block; width: 100%; border: 0; background: transparent; padding: 10px 12px; min-height: 56px; font: 13px/1.5 var(--sans); color: var(--ink); resize: vertical; outline: 0; }
.fd-inote .if { display: flex; justify-content: flex-end; gap: 6px; padding: 8px 10px; border-top: 1px solid var(--fd-warn-bd); }
.fd-log { display: grid; gap: 6px; font-size: 12px; color: var(--muted); } .fd-log div { display: grid; grid-template-columns: 74px 1fr; gap: 8px; }
.fd-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

/* studio: profile reviews */
.fd-rsplit { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 20px; align-items: start; }
.fd-chk { display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
.fd-chk > div { display: flex; flex-direction: column; justify-content: space-between; padding: 12px 14px; border-right: 1px solid var(--line); min-width: 0; } .fd-chk > div:last-child { border-right: 0; }
.fd-chk .k { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; } .fd-chk .v { margin-top: 7px; font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.fd-chk .v.ok { color: var(--ok); } .fd-chk .v.fl { color: var(--warn); } .fd-chk > div.flag { background: var(--warn-soft); } .fd-chk > div.flag .k { color: var(--warn); }
.fd-chk .tick { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; color: #fff; flex: none; border: 0; padding: 0; }
.fd-chk .v.man { font-weight: 500; font-size: 12.5px; color: var(--ink-2); } .fd-chk label { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.fd-cmp { display: grid; grid-template-columns: 150px 1fr 1fr; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
.fd-cmp > div { padding: 14px 16px; border-bottom: 1px solid var(--line); font-size: 13px; line-height: 1.6; min-width: 0; overflow-wrap: anywhere; }
.fd-cmp > div.f { color: var(--muted); font-size: 12.5px; background: var(--surface-2); border-right: 1px solid var(--line); } .fd-cmp > div.f b { display: block; color: var(--ink); font-weight: 600; font-size: 13px; margin-bottom: 4px; }
.fd-cmp > div.a { border-right: 1px solid var(--line); color: var(--ink-2); }
.fd-cmp > div.hd { background: var(--surface-2); padding: 11px 16px; font-size: 12px; color: var(--muted); } .fd-cmp > div.hd b { color: var(--ink); font-weight: 600; font-size: 13px; }
.fd-cmp > div.last { border-bottom: 0; }
.fd-dadd { background: var(--ok-soft); color: var(--ok); border-radius: 3px; padding: 0 2px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.fd-ddel { background: var(--bad-soft); color: var(--bad); text-decoration: line-through; border-radius: 3px; padding: 0 2px; }
.fd-chg2 { white-space: nowrap; flex: none; display: inline-flex; height: 18px; padding: 0 7px; border-radius: 9px; font: 600 10.5px/18px var(--sans); background: var(--accent-soft); color: var(--accent); } .fd-chg2.n { background: var(--ok-soft); color: var(--ok); }
.fd-flagnote { margin-top: 10px; display: flex; gap: 8px; align-items: flex-start; font-size: 12px; color: var(--warn); background: var(--warn-soft); border: 1px solid var(--fd-warn-bd); border-radius: 6px; padding: 8px 10px; } .fd-flagnote svg { flex: none; margin-top: 2px; }
.fd-minipr { display: flex; gap: 10px; align-items: center; } .fd-minipr i { width: 56px; height: 42px; border-radius: 4px; background: var(--sunk) center/cover; border: 1px solid var(--line); display: inline-block; flex: none; }
.fd-act { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: end; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.fd-btn-a { background: var(--warn-soft); border-color: var(--fd-warn-bd); color: var(--warn); }
.fd-flaglist { display: grid; gap: 6px; margin-top: 8px; font-size: 12px; }

/* settings and small panels */
.fd-set { display: grid; gap: 14px; }
.fd-set .fd-fld { max-width: 260px; }
.fd-ro { color: var(--muted); font-size: 12.5px; }

/* Collective activity on the member record */
.fd-act-sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 10px 0; }
.fd-act-sum div { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; background: var(--surface-2); } .fd-act-sum b { display: block; font: 400 24px/1.1 var(--display); } .fd-act-sum span { font-size: 11.5px; color: var(--muted); }
.fd-act-bars { display: flex; align-items: flex-end; gap: 6px; height: 56px; margin-top: 8px; } .fd-act-bars div { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; gap: 1px; height: 100%; } .fd-act-bars i { display: block; background: var(--accent); border-radius: 2px 2px 0 0; min-height: 2px; } .fd-act-bars i.b { background: color-mix(in srgb, var(--accent) 55%, var(--sunk)); } .fd-act-bars i.i { background: var(--sunk); }
.fd-act-lab { display: flex; gap: 6px; font-size: 10.5px; color: var(--muted); } .fd-act-lab span { flex: 1; text-align: center; }

/* Today and Mail lines */
.fd-mailline { display: flex; gap: 10px; align-items: center; padding: 10px 14px; border: 1px solid var(--fd-bad-bd); background: var(--bad-soft); border-radius: var(--r-lg); margin-bottom: 12px; font-size: 13px; }
.fd-mailline svg { color: var(--bad); flex: none; } .fd-mailline .btn { margin-left: auto; }

/* dark mode adjustments for the dark-on-dark bits */
:root[data-theme="dark"] .fd-stg.now, :root[data-theme="dark"] .fd-chip.on, :root[data-theme="dark"] .fd-stagebar button.on { color: #20201e; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fd-stg.now, :root:not([data-theme="light"]) .fd-chip.on, :root:not([data-theme="light"]) .fd-stagebar button.on { color: #20201e; } }
:root[data-theme="dark"] .fd-stagebar button.on b { color: #20201e; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fd-stagebar button.on b { color: #20201e; } }
:root[data-theme="dark"] .fd-dark { background: #2a2a27; border-color: var(--line-2); color: var(--ink); } :root[data-theme="dark"] .fd-dark .fd-sm2 { color: var(--muted); } :root[data-theme="dark"] .fd-dark .btn { background: var(--btn); color: var(--on-btn); border-color: var(--btn); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fd-dark { background: #2a2a27; border-color: var(--line-2); color: var(--ink); } :root:not([data-theme="light"]) .fd-dark .fd-sm2 { color: var(--muted); } :root:not([data-theme="light"]) .fd-dark .btn { background: var(--btn); color: var(--on-btn); border-color: var(--btn); } }
:root[data-theme="dark"] .fd-stg.done .n, :root[data-theme="dark"] .fd-mini .st.d i, :root[data-theme="dark"] .fd-banner .ic2 { color: #20201e; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fd-stg.done .n, :root:not([data-theme="light"]) .fd-mini .st.d i, :root:not([data-theme="light"]) .fd-banner .ic2 { color: #20201e; } }
:root[data-theme="dark"] .fd-sp.pr { color: #20201e; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fd-sp.pr { color: #20201e; } }
:root[data-theme="dark"] .fd-pill.acc { color: #20201e; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fd-pill.acc { color: #20201e; } }

/* narrower screens: laptop, iPad, phone */
@media (max-width: 1320px) { .fd-ed { grid-template-columns: minmax(0, 1fr) 380px; } .fd-lay { grid-template-columns: minmax(0, 1fr); } .fd-wrow { grid-template-columns: 1fr 1fr; } .fd-wrow > :first-child { grid-column: 1 / -1; } }
@media (max-width: 1100px) {
  .fd-split, .fd-rsplit { grid-template-columns: 1fr; } .fd-dbody { grid-template-columns: 1fr; } .fd-dmain { border-right: 0; } .fd-daside { border-radius: 0 0 var(--r-lg) var(--r-lg); border-top: 1px solid var(--line); }
  .fd-ed { grid-template-columns: 1fr; } .fd-pv { position: static; } .fd-wrow { grid-template-columns: 1fr; } .fd-chk { grid-template-columns: repeat(2, 1fr); } .fd-chk > div { border-bottom: 1px solid var(--line); }
  .fd-cmp { grid-template-columns: 110px 1fr 1fr; }
}
@media (max-width: 720px) {
  .fd-cropper { grid-template-columns: 1fr; } .fd-two { grid-template-columns: 1fr; } .fd-mats { grid-template-columns: repeat(2, 1fr); } .fd-act { grid-template-columns: 1fr; }
  .fd-cmp { grid-template-columns: 1fr; } .fd-cmp > div.hd:first-child { display: none; } .fd-cmp > div.a { border-right: 0; } .fd-dhead, .fd-dmain { padding-left: 16px; padding-right: 16px; } .fd-prj { grid-template-columns: 20px 1fr; } .fd-prj > .row2 { grid-column: 1 / -1; }
  .fd-sfoot { margin: 20px -8px 0; padding: 12px; } .fd-sfoot > span, .fd-sfoot .fd-row { flex-wrap: wrap; } .fd-sfoot { max-width: 100%; box-sizing: border-box; } .fd-sfoot .fd-xs.muted { display: none; } .fd-dname { font-size: 22px; } .fd-act-sum { grid-template-columns: 1fr; }
}
/* the iPad layer: touch targets */
html.ipad .fd .btn, html[data-ew-ipad] .fd .btn { min-height: 44px; }
html.ipad .fd-chip, html.ipad .fd-slot, html.ipad .fd-seg > *, html.ipad .fd-stagebar button, html.ipad .fd-tabs button { min-height: 44px; }
html.ipad .fd-tblc tbody tr td { padding-top: 14px; padding-bottom: 14px; }
@media (pointer: coarse) { .fd-chip { height: 40px; } .fd-slot { height: 40px; } .fd-seg > button { min-height: 40px; } .fd-stagebar button { height: 38px; } .fd-slot .x { width: 28px; height: 28px; } .fd-mat .xx { width: 32px; height: 32px; } .fd-tog { width: 48px; height: 28px; } .fd-tog::after { width: 22px; height: 22px; } .fd-tog[aria-checked="true"]::after { left: 23px; } }
@media (prefers-reduced-motion: reduce) { .fd-tog::after { transition: none; } }

/* studio: profile review queue and detail */
.fd-qu { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.fd-qu-h { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--line); font-size: 14px; }
.fd-qu-i { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: start; width: 100%; text-align: left; padding: 14px 16px; border: 0; border-bottom: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; }
.fd-qu-i.on { background: var(--bg); box-shadow: inset 3px 0 0 var(--accent); }
.fd-qu-i:hover { background: var(--surface-2); }
.fd-qu-t { display: grid; gap: 3px; min-width: 0; } .fd-qu-t b { font-weight: 600; font-size: 14px; } .fd-qu-t small { color: var(--muted); font-size: 12.5px; }
.fd-qu-f { display: flex; gap: 8px; align-items: center; margin-top: 4px; flex-wrap: wrap; }
.fd-qu-w { white-space: nowrap; }
.fd-qu-foot { padding: 14px 16px; font-size: 12.5px; color: var(--muted); border-top: 1px solid var(--line); background: var(--surface-2); }
.fd-rh { display: flex; gap: 16px; align-items: center; padding: 18px 22px; border-bottom: 1px solid var(--line); flex-wrap: wrap; } .fd-rh .fd-ph-act { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.fd-rb2 { padding: 18px 22px 22px; }
.fd-sec-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.fd-cmp > div.b { color: var(--ink); }
@media (max-width: 720px) { .fd-rh, .fd-rb2 { padding-left: 14px; padding-right: 14px; } }

/* ===== Introduction as a large modal (FB, owner request) ===== */
.ov--modal:has(.fd-im) { width: min(1180px, calc(100% - 32px)); height: min(90vh, 920px); max-height: calc(100% - 32px); overflow: hidden; }
.ov--modal:has(.fd-im) .ov-body { padding: 0; display: flex; flex-direction: column; min-height: 0; flex: 1; overflow: hidden; }
.fd-im { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.fd-im h2:focus, .fd-im h2:focus-visible { outline: none; }
.fd-imh { display: flex; align-items: center; gap: 14px; padding: 16px 64px 14px 22px; border-bottom: 1px solid var(--line); flex: none; }
.fd-imn { display: flex; align-items: center; gap: 4px; flex: none; }
.fd-imb { display: grid; grid-template-columns: minmax(300px, 4fr) minmax(0, 6fr); min-height: 0; flex: 1; overflow: hidden; }
.fd-imc { overflow-y: auto; min-height: 0; overscroll-behavior: contain; }
.fd-imc1 { border-right: 1px solid var(--line); background: color-mix(in srgb, var(--surface-2) 55%, var(--surface)); }
.fd-im .sec { padding: 16px 22px; border-bottom: 1px solid var(--line); }
.fd-imc2 .fd-thread { max-height: none; }
.ov--modal:has(.fd-im) .ov-x { top: 14px; right: 16px; }
/* iPad and phone: a full-screen sheet */
html.ipad .ov--modal:has(.fd-im), .ov--modal:has(.fd-im).fd-sheet { top: 0; left: 0; transform: none; width: 100%; height: 100dvh; max-height: none; border-radius: 0; border: 0; bottom: auto; padding-top: env(safe-area-inset-top); }
html.ipad .ov--modal:has(.fd-im)::before { display: none; }
html.ipad .ov--modal:has(.fd-im) .ov-x { top: calc(10px + env(safe-area-inset-top, 0px)); }
@media (max-width: 900px) {
  .ov--modal:has(.fd-im) { top: 0; left: 0; transform: none; width: 100%; height: 100dvh; max-height: none; border-radius: 0; border: 0; bottom: auto; padding-top: env(safe-area-inset-top); }
  .fd-imh { padding: 12px 56px 12px 16px; flex-wrap: wrap; gap: 8px; }
  .fd-imb { display: block; overflow-y: auto; }
  .fd-imc { overflow: visible; } .fd-imc1 { border-right: 0; border-bottom: 1px solid var(--line); }
  .fd-im .sec { padding: 14px 16px; }
}
/* ==== Prospects (FP, Oct 29 2026): Members > Prospects, the profile, bulk tags and the import. Studio OS tokens only, so
   dark mode follows by itself; the iPad layer (html.ipad) keeps every touch target at 44 points and the profile a sheet. ==== */
.pr-av { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: none; background: var(--sunk); border: 1px solid var(--line); display: inline-grid; place-items: center; font: 600 11px/1 var(--sans); color: var(--muted); letter-spacing: .04em; }
.pr-av--mono { border-style: dashed; border-color: var(--line-2); }
.pr-av--md { width: 56px; height: 56px; font-size: 14px; }
.pr-av--lg { width: 84px; height: 84px; font-size: 22px; }
.pr-who b { line-height: 1.25; }
.pr-who > span:last-child { gap: 2px; }
.pr-dne-pill { display: inline-flex; align-items: center; gap: 4px; width: max-content; margin-top: 3px; padding: 1px 8px 1px 6px; border-radius: 999px; background: var(--bad-soft); color: var(--bad); font: 600 11px/1.6 var(--sans); }
.pr-dne-pill .ic { width: 12px; height: 12px; vertical-align: 0; }
.pr-row--dne td:nth-child(2) { box-shadow: inset 3px 0 0 var(--bad); }
.pr-fit { display: inline-flex; align-items: baseline; gap: 1px; white-space: nowrap; }
.pr-fit > i { display: inline-block; width: 42px; height: 4px; margin-left: 8px; border-radius: 2px; background: var(--sunk); vertical-align: middle; overflow: hidden; position: relative; top: -2px; }
.pr-fit > i > i { display: block; height: 100%; background: var(--line-2); }
.pr-fit.is-q > i > i { background: var(--ok); }
.pr-fit.is-q b { color: var(--ok); }
.pr-fit--lg { font-size: 15px; padding: 2px 10px; border-radius: 999px; background: var(--surface-2); }
.pr-tag { display: inline-flex; align-items: center; gap: 4px; margin: 0 4px 4px 0; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); font-size: 11.5px; line-height: 1.6; white-space: nowrap; }
.pr-tag--bad { background: var(--bad-soft); color: var(--bad); border-color: transparent; font-weight: 600; }
.pr-tag button { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; color: var(--muted); }
.pr-tag button:hover { background: var(--sunk); color: var(--ink); }
.pr-tag button .ic { width: 12px; height: 12px; vertical-align: 0; }
.pr-th { display: inline-flex; align-items: center; gap: 4px; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; }
.pr-th.on { color: var(--ink); }
.pr-th .ic { width: 12px; height: 12px; vertical-align: 0; }
.pr-tbl td { vertical-align: middle; }
.pr-bad { color: var(--bad); }

/* the profile: full size */
.ov--drawer:has(.pr-dr) { width: min(1180px, 100%); }
.pr-dr { max-width: 1080px; }
.pr-nav { display: flex; align-items: center; gap: 10px; margin: 0 40px 12px 0; }
.pr-head { display: flex; gap: 18px; align-items: flex-start; }
.pr-head-t { min-width: 0; display: grid; gap: 6px; }
.pr-head-t .h2 { margin: 0; }
.pr-pills { gap: 6px; align-items: center; }
.pr-dne { display: grid; gap: 4px; margin: 16px 0 0; padding: 12px 14px; border-radius: var(--r-lg); background: var(--bad-soft); color: var(--bad); border: 1px solid color-mix(in srgb, var(--bad) 35%, transparent); }
.pr-dne b { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; letter-spacing: .02em; text-transform: uppercase; }
.pr-dne span { color: var(--ink); }
.pr-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 16px 0 6px; }
.pr-acts-r { margin-left: auto; display: flex; flex-wrap: wrap; gap: 6px; }
.pr-email, .pr-email-off { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pr-email .field { margin: 0; }
.pr-email-off .muted { max-width: 46ch; }
.pr-sec { border-top: 1px solid var(--line); padding-top: 16px; margin-top: 16px; }
.pr-sec.is-edit { background: var(--surface-2); margin-left: -16px; margin-right: -16px; padding: 16px; border-radius: var(--r-lg); border-top-color: transparent; }
.pr-sec-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.pr-sec-h .h4 { margin: 0 0 2px; font-size: 14px; }
.pr-dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 20px; font-size: 13px; }
.pr-dl > div { display: grid; gap: 3px; min-width: 0; align-content: start; word-break: break-word; }
.pr-dl > .pr-dl-w { grid-column: 1 / -1; }
.pr-pre { white-space: pre-wrap; }
.pr-li { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pr-li li { display: grid; gap: 2px; padding: 8px 10px; border-radius: var(--r); background: var(--surface-2); }
.pr-li .pr-q { font-style: italic; color: var(--ink-2); }
.pr-clog li { grid-template-columns: minmax(150px, max-content) minmax(0, 1fr); gap: 12px; align-items: baseline; }
.pr-avrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pr-gal-h { margin: 18px 0 8px; }
.pr-gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.pr-gal-i { margin: 0; display: grid; gap: 6px; align-content: start; }
.pr-gal-img { display: block; aspect-ratio: 4 / 5; border-radius: var(--r); overflow: hidden; background: var(--sunk); border: 1px solid var(--line); }
.pr-gal-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pr-gal-none { display: grid; place-items: center; text-align: center; padding: 12px; }
.pr-gal-i figcaption { display: grid; gap: 2px; }
.pr-log { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; font-size: 13px; }
.pr-log li { display: grid; grid-template-columns: minmax(170px, max-content) minmax(0, 1fr); gap: 12px; }

/* editing */
.pr-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; }
.pr-form .field { margin: 0; }
.pr-f { display: grid; gap: 4px; align-content: start; }
.pr-f-w, .pr-form-acts, .pr-form .form-err { grid-column: 1 / -1; }
.pr-why { margin: 0; }
.pr-multi { display: flex; flex-wrap: wrap; gap: 4px 16px; border: 0; padding: 0; }
.pr-multi legend, .pr-list legend { font-weight: 600; font-size: 12.5px; margin-bottom: 6px; padding: 0; }
.pr-tags-ed { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 6px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface); }
.pr-tags-ed input { flex: 1 1 160px; border: 0; background: transparent; padding: 4px; min-width: 120px; }
.pr-tags-ed input:focus { outline: none; }
.pr-list { border: 0; padding: 0; display: grid; gap: 10px; }
.pr-list-i { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px 12px; padding: 10px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); align-items: end; }
.pr-list-x { justify-self: start; }
.pr-auto { grid-column: 1 / -1; }
.pr-gal-th { width: 72px; height: 72px; object-fit: cover; border-radius: var(--r); background: var(--sunk); display: block; }
.pr-list-i.pr-gal-ed { grid-template-columns: 72px repeat(auto-fit, minmax(160px, 1fr)); }

/* bulk tags, add, import */
.pr-bulk, .pr-new { display: grid; gap: 12px; }
.pr-bulk-rm { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.pr-new-g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
.pr-new-g .field { margin: 0; }
.pr-imp { display: grid; gap: 12px; }
.pr-drop { position: relative; display: grid; place-items: center; padding: 26px 16px; border: 1.5px dashed var(--line-2); border-radius: var(--r-lg); background: var(--surface-2); text-align: center; cursor: pointer; }
.pr-drop:hover, .pr-drop:focus-within { border-color: var(--ink-2); }
.pr-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.pr-drop > span { display: grid; gap: 4px; justify-items: center; }
.pr-drop.is-busy { opacity: .6; }
.pr-imp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pr-imp-f { display: grid; gap: 4px; padding: 10px 12px; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); }
.pr-imp-f.done { border-color: color-mix(in srgb, var(--ok) 40%, var(--line)); }
.pr-imp-f.error { border-color: color-mix(in srgb, var(--bad) 45%, var(--line)); }
.pr-bar { display: block; height: 5px; border-radius: 3px; background: var(--sunk); overflow: hidden; }
.pr-bar i { display: block; height: 100%; background: var(--ok); transition: width .2s; }
.pr-sum { padding: 14px; border-radius: var(--r-lg); background: var(--surface-2); display: grid; gap: 10px; }
.pr-sum-n { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.pr-sum-n div { display: grid; gap: 2px; }
.pr-sum-n b { font: 500 22px/1.1 var(--display); }
.pr-probs ul { margin: 8px 0 0; padding-left: 18px; max-height: 240px; overflow: auto; }
.xk-pr-note { margin: 0; }

@media (max-width: 900px) { .pr-dl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .pr-dl, .pr-form, .pr-new-g { grid-template-columns: minmax(0, 1fr); }
  .pr-head { gap: 12px; } .pr-av--lg { width: 60px; height: 60px; font-size: 16px; }
  .pr-clog li, .pr-log li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .pr-acts-r { margin-left: 0; }
  .pr-gal { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .pr-fit > i { display: none; }
}
/* the studio iPad: a full-height sheet, touch-sized tags and controls */
html.ipad .ov--drawer:has(.pr-dr) { width: min(1000px, 100vw); }
@media (min-width: 1100px) { html.ipad .ov--drawer:has(.pr-dr) { width: min(1000px, 92vw); } }
html.ipad .pr-tag { padding: 4px 10px; font-size: 13px; }
html.ipad .pr-tag button { width: 32px; height: 32px; }
html.ipad .pr-th { min-height: 40px; }
html.ipad .pr-drop { padding: 36px 16px; }
html.ipad .pr-multi .check, html.ipad .pr-bulk-rm .check { min-height: 44px; }
/* the list fits the page: narrow columns wrap, and the card scrolls sideways itself if it ever has to */
.lb-card:has(.pr-tbl) { overflow-x: auto; }
.pr-tbl td[data-label="Firm and name"] { min-width: 210px; max-width: 280px; }
.pr-tbl td[data-label="Area and distance"] { max-width: 170px; }
.pr-tbl td[data-label="Tags"] { max-width: 190px; white-space: normal; }
.pr-tbl td[data-label="Last verified"] { min-width: 96px; }
.pr-tbl th, .pr-tbl td { padding-left: 8px; padding-right: 8px; }
@media (max-width: 1500px) { .pr-tbl .pr-fit > i { display: none; } .pr-tbl td[data-label="Tags"] .pr-tag:nth-of-type(n+3) { display: none; } }

/* ==== Prospects round 2 (FQ): the decision bar, Approve, delete permanently, templates, photos ==== */
.pr-decide { position: sticky; bottom: 0; z-index: 4; margin: 20px -24px -24px; padding: 0 24px calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(to bottom, transparent, var(--surface) 14px); }
.pr-decide-in { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--surface-2); box-shadow: var(--shadow); }
.pr-decide-l { display: grid; gap: 1px; min-width: 112px; }
.pr-decide-l b { font-size: 14px; }
.pr-seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--line-2); border-radius: var(--r); overflow: hidden; background: var(--surface); }
.pr-seg button { padding: 7px 14px; font-weight: 500; border-right: 1px solid var(--line); }
.pr-seg button:last-child { border-right: 0; }
.pr-seg button.on { background: var(--btn); color: var(--on-btn); }
.pr-seg button[data-v="Declined"].on { background: var(--bad); color: var(--surface); }
.pr-seg button:focus-visible { outline-offset: -2px; }
.pr-notes-b { margin-left: auto; }
.pr-notes { margin-bottom: 8px; padding: 12px; border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow); display: grid; gap: 8px; }
.pr-notes .field { margin: 0; }
.pr-member { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 14px 0 0; padding: 10px 12px; border-radius: var(--r-lg); background: var(--ok-soft); }
.pr-member > span:first-child { display: inline-flex; align-items: center; gap: 6px; }
.pr-member-warn { flex-basis: 100%; color: var(--ink-2); }
.pr-from { margin: 8px 0 0; }
.pr-appr, .pr-del, .pr-tpl { display: grid; gap: 12px; }
.pr-appr .field, .pr-del .field, .pr-tpl .field { margin: 0; }
.pr-wmail { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 12px 14px; background: var(--surface-2); display: grid; gap: 8px; }
.pr-wbody { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; font-size: 14px; }
.pr-wbody p { margin: 0 0 10px; }
.pr-wl { margin: 0 0 12px; padding-left: 22px; display: grid; gap: 4px; }
.pr-wbtn span { display: inline-block; padding: 9px 14px; background: var(--btn); color: var(--on-btn); border-radius: 2px; font-size: 13px; }
.pr-photo-b { gap: 8px; align-items: center; margin: 4px 0 12px; }
.pr-photo-b .btn.is-busy { opacity: .6; }
.pr-move { display: inline-flex; gap: 2px; }
.pr-tpl-g { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.pr-tpl-ed, .pr-tpl-pv { display: grid; gap: 10px; }
.pr-tpl-ed textarea { font-size: 13.5px; line-height: 1.5; }
.pr-tpl-out { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 12px 14px; background: var(--surface-2); }
.pr-tpl-out pre { white-space: pre-wrap; font: 13.5px/1.55 var(--sans); margin: 8px 0 0; }
.pr-tpl code { font-size: 12px; background: var(--sunk); padding: 1px 4px; border-radius: 3px; }
@media (max-width: 900px) { .pr-tpl-g { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .pr-decide { margin-left: -16px; margin-right: -16px; padding-left: 12px; padding-right: 12px; } .pr-seg { width: 100%; } .pr-seg button { flex: 1 1 auto; padding: 8px 6px; font-size: 12.5px; } .pr-notes-b { margin-left: 0; } }
html.ipad .pr-seg button { min-height: 44px; padding: 8px 16px; }

/* ==== FR ==== the conversation on a prospect and a member, and "From prospect" in Mail */
.pr-conv-l { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 2px; }
.pr-conv-l li { display: grid; grid-template-columns: auto 1fr; gap: 0 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.pr-conv-l li:first-child { border-top: 0; }
.pr-conv-l .pr-conv-s { grid-column: 1 / -1; font-weight: 500; }
.pr-conv-l .pr-conv-snip { grid-column: 1 / -1; color: var(--ink-2); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-people .link { font-weight: 500; }
.xk-praddr { margin: 4px 0 0; }
/* ==== Where links (FT, Oct 30 2026) ==== breadcrumbs that go there: hover, focus, and the light on the place you land */
.where-link { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; cursor: pointer; border-radius: 3px; padding: 1px 2px; margin: 0 -2px; transition: color .15s, background .15s, text-decoration-color .15s; }
.where-link::after { content: "\2192"; display: inline-block; margin-left: .3em; text-decoration: none; transition: transform .15s; }
.where-link:hover { color: var(--accent); background: var(--accent-soft); text-decoration-color: currentColor; }
.where-link:hover::after, .where-link:focus-visible::after { transform: translateX(3px); }
.where-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; color: var(--accent); }
.where-link:active { background: var(--accent-soft); }
.where-text { font-weight: 500; }
.where-flash { animation: where-flash 2.4s ease; border-radius: var(--r, 6px); scroll-margin: 96px; }
.where-flash:focus { outline: none; }
@keyframes where-flash { 0%, 65% { box-shadow: 0 0 0 3px var(--accent); background-color: var(--accent-soft); } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (pointer: coarse) { .where-link { padding: 8px 4px; margin: -8px -4px; } }
@media (prefers-reduced-motion: reduce) { .where-flash { animation: none; outline: 3px solid var(--accent); outline-offset: 3px; } .where-link, .where-link::after { transition: none; } }
/* ==== Site media (builder FU, Oct 30 2026): Website > Home page: Rooms with a point of view. Colours from the tokens, so dark
   mode follows by itself; the iPad layer keeps touch targets at 44 points (the Website area is web only on the iPad). ==== */
.smx { padding: 18px; margin-bottom: 16px; display: grid; gap: 14px; }
.smx-top { display: flex; gap: 16px; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; }
.smx-top p.muted { max-width: 62ch; margin: 6px 0 0; }
.smx-state { display: grid; gap: 4px; justify-items: end; text-align: right; }
.smx-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 20px; align-items: start; }
.smx-src { display: grid; gap: 10px; min-width: 0; }
.smx-src > p { margin: 0; }
.smx-pick { position: relative; width: min(100%, calc(380px * var(--ar, 1.5))); justify-self: start; border-radius: var(--r); overflow: hidden; background: var(--sunk); border: 1px solid var(--line); }
.smx-pick.on { cursor: crosshair; }
.smx-pick-m { width: 100%; height: 100%; object-fit: cover; display: block; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.smx-dot { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; border: 2px solid #f3f1eb; box-shadow: 0 0 0 1px rgba(32,32,30,.6), 0 2px 8px rgba(0,0,0,.35); background: rgba(74,0,0,.55); pointer-events: none; }
.smx-pick:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.smx-file { margin: 0; color: var(--ink-2); }
.smx-warn { margin: 0; color: var(--warn); display: flex; gap: 6px; align-items: flex-start; }
.smx-warn .ic { margin-top: 2px; }
.smx-busy { margin: 0; color: var(--ink-2); font-weight: 600; }
.smx-acts { align-items: center; gap: 10px; }
.smx-file-btn { position: relative; cursor: pointer; }
.smx-file-btn:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.smx-still { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); }
.smx-still .h4, .smx-still p { margin: 0; }
.smx-still-img { width: 160px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r); border: 1px solid var(--line); display: block; }
.smx-cap { display: grid; gap: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.smx-cap video { width: 100%; max-height: 260px; background: #20201e; border-radius: var(--r); }
.smx-cap input[type="range"] { width: 100%; }
.smx-pv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: end; background: #20201e; border-radius: var(--r-lg); padding: 16px; }
.smx-fig { margin: 0; display: grid; gap: 6px; justify-items: center; }
.smx-fig figcaption { color: #b9b5a9; }
.smx-arch { width: 120px; aspect-ratio: 26 / 36; border-radius: 9999px 9999px 0 0; overflow: hidden; background: #2a2926; }
.smx-arch .smx-pv-m { transform: scale(1.35); }
.smx-full { width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #2a2926; border-radius: 2px; }
.smx-pv-m { width: 100%; height: 100%; object-fit: cover; display: block; }
.smx-foot { display: flex; gap: 12px; justify-content: space-between; align-items: center; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--line); }
.smx-foot .row { gap: 8px; }
@media (max-width: 900px) {
  .smx-grid { grid-template-columns: 1fr; }
  .smx-state { justify-items: start; text-align: left; }
}
@media (max-width: 520px) { .smx-pv { grid-template-columns: 1fr; } .smx-arch { width: 110px; } }
html.ipad .smx .btn, html.ipad .smx-file-btn { min-height: 44px; }
/* ==== end Site media (FU) ==== */
/* ==== Nov 3 (NB): the booking page and the visitor label ==== */
/* Back to East Weston: on every step of /book and the manage pages. The same markup and look as builder NA's button on
   /collective/apply (repo/public/css/back-to-site.css, class ew-back), in the dark header, which now stays on screen (sticky). */
.pub-head { position: sticky; top: 0; z-index: 30; }
.pub .pub-sum { top: 96px; }   /* below the header that stays on screen */
.pub-head .ew-back { display: inline-flex; align-items: center; gap: .75em; min-height: 44px; padding: 0 18px 0 13px; border: 1px solid color-mix(in srgb, currentColor 40%, transparent); border-radius: 999px; color: #f3f1eb; font: 500 .68rem/1 var(--sans, system-ui, sans-serif); letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; text-decoration: none; flex: none; -webkit-tap-highlight-color: transparent; transition: background .35s ease, color .35s ease, border-color .35s ease; }
.pub-head .ew-back__arrow { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s ease; }
.pub-head .ew-back__txt { opacity: .8; }
.pub-head .ew-back__wm { display: block; width: 108px; height: auto; flex: none; }
.pub-head .ew-back:hover, .pub-head .ew-back:focus-visible { background: #f3f1eb; color: #20201e; border-color: #f3f1eb; }
.pub-head .ew-back:hover .ew-back__arrow, .pub-head .ew-back:focus-visible .ew-back__arrow { transform: translateX(-3px); }
.pub-head .ew-back:focus-visible { outline: 2px solid #c98a80; outline-offset: 3px; }
.pub-head .pub-sub { text-align: right; }
@media (max-width: 767px) { .pub-head-in { padding: 10px 16px; } .pub-head .ew-back { gap: .6em; padding: 0 13px 0 10px; font-size: .6rem; letter-spacing: .16em; } .pub-head .ew-back__wm { width: 82px; } }
@media (max-width: 480px) { .pub-head .pub-sub { display: none; } }
@media (prefers-reduced-motion: reduce) { .pub-head .ew-back, .pub-head .ew-back__arrow { transition: none; } }
/* the Other boxes under "I am a" and "What are you planning" */
.pf .nb-other { margin-top: 10px; }
.pf .nb-other[hidden] { display: none; }
.pf .nb-col { display: flex; flex-direction: column; min-width: 0; }
.pf fieldset.field .nb-other { max-width: 420px; }
/* the visitor label (Studio OS: calendar, drawers, lists, Today, the iPad) */
.nb-who { display: inline-flex; align-items: center; max-width: 100%; padding: 1px 8px; border: 1px solid var(--accent); border-radius: 999px; color: var(--accent); background: var(--surface); font-size: 11.5px; font-weight: 500; line-height: 1.5; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.nb-who--sm { font-size: 11px; padding: 0 7px; margin: 2px 0; }
td .nb-who--sm, .sched-b .nb-who--sm { display: inline-flex; width: fit-content; }
.cal-ev .nb-who--cal { font-size: 10.5px; padding: 0 6px; margin: 1px 0; line-height: 1.45; align-self: flex-start; }
.nb-lead-who { margin: 2px 0 8px; gap: 8px; align-items: center; }
.nb-cal-who { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.nb-cal-who select { min-height: 30px; padding: 2px 8px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface); color: var(--ink); font-size: 12.5px; }
.nb-cal-who.on select { border-color: var(--accent); color: var(--accent); }
/* ==== end Nov 3 (NB) ==== */
/* ==== Nov 3 (ND): the Studio calendar (Calendar > Studio, and production's Studio calendar page in the hub) ==== */
:root { --sc-deadline: #8e3b2f; --sc-delivery: #3e5a6e; --sc-task: #4f6a3c; --sc-event: #85612a; --sc-other: #6a665c; }
:root[data-theme="dark"] { --sc-deadline: #dc9a8b; --sc-delivery: #93b3c9; --sc-task: #a7c290; --sc-event: #d9b677; --sc-other: #aaa598; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --sc-deadline: #dc9a8b; --sc-delivery: #93b3c9; --sc-task: #a7c290; --sc-event: #d9b677; --sc-other: #aaa598; } }
.sc-t-deadline { --c: var(--sc-deadline); } .sc-t-delivery { --c: var(--sc-delivery); } .sc-t-task { --c: var(--sc-task); } .sc-t-event { --c: var(--sc-event); } .sc-t-other { --c: var(--sc-other); }

/* Bookings | Studio */
.sc-mode { margin: 0 0 14px; }
.sc-mode button { display: inline-flex; align-items: center; gap: 6px; }
.sc-mode .ic { width: 15px; height: 15px; }

/* the bar under the date navigation: the filter and the key */
.sc-bar2 { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.sc-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sc-person select { height: 30px; min-height: 0; width: auto; max-width: 220px; padding-top: 0; padding-bottom: 0; border-radius: 999px; padding: 0 28px 0 12px; border: 1px solid var(--line); background-color: var(--surface); color: var(--ink); font: inherit; font-size: 13px; }
.sc-person.on select { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.sc-legend { display: flex; flex-wrap: wrap; gap: 10px; }
.sc-key { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ink-2); }
.sc-key .ic { width: 14px; height: 14px; color: var(--c); stroke: var(--c); }

/* week and day */
.sc-wrap { position: relative; }
.sc-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg, 10px); background: var(--surface); }
.sc-cal { min-width: 760px; }
.sc-cal--day { min-width: 0; }
.sc-cal .cal-head, .sc-cal .cal-body, .sc-adrow { display: grid; grid-template-columns: 56px repeat(var(--cols), minmax(96px, 1fr)); }
.sc-adrow { border-bottom: 1px solid var(--line); background: var(--surface-2); }
.sc-adlab { font-size: 10.5px; color: var(--muted); padding: 8px 6px 0 0; text-align: right; }
.sc-ad { min-height: 40px; border-left: 1px solid var(--line); padding: 4px 3px; display: flex; flex-direction: column; gap: 3px; }
.sc-ad[data-act] { cursor: copy; }
.sc-col { background-image: repeating-linear-gradient(180deg, var(--line) 0 1px, transparent 1px 44px); cursor: default; }
.sc-col[data-act] { cursor: copy; }

/* an entry */
.sc-ev { position: relative; display: flex; align-items: flex-start; gap: 5px; width: 100%; min-height: 24px; text-align: left; padding: 3px 6px; border-radius: 5px; font-size: 11.5px; line-height: 1.25; color: var(--ink);
  background: color-mix(in srgb, var(--c) 14%, var(--surface)); border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); box-shadow: inset 3px 0 0 var(--c); overflow: hidden; user-select: none; -webkit-user-select: none; }
.sc-ev:hover { background: color-mix(in srgb, var(--c) 24%, var(--surface)); }
.sc-ev:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.sc-ev > .ic { flex: none; width: 13px; height: 13px; margin-top: 1px; color: var(--c); stroke: var(--c); }
.sc-ev-x { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.sc-ev-x b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-ev-t { font-size: 10.5px; color: var(--muted); }
.sc-ev-s { font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-ev--timed { position: absolute; z-index: 2; }
.sc-ev[data-sc-drag] { cursor: grab; touch-action: none; }
.sc-ev.is-done { opacity: .62; }
.sc-ev.is-done b, .sc-struck { text-decoration: line-through; text-decoration-thickness: 1px; }
.sc-ev-done { flex: none; display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: var(--c); color: var(--surface); }
.sc-ev-done .ic { width: 10px; height: 10px; stroke: var(--surface); stroke-width: 3; }
.sc-lifted { opacity: .35; }
.sc-ghost { position: fixed; z-index: 90; pointer-events: none; box-shadow: var(--shadow, 0 8px 24px rgba(0,0,0,.18)); opacity: .95; cursor: grabbing; }
html.sc-dragging, html.sc-dragging * { cursor: grabbing !important; }
.sc-over { background-color: color-mix(in srgb, var(--accent) 10%, transparent) !important; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent); }

/* month */
.sc-month { border: 1px solid var(--line); border-radius: var(--r-lg, 10px); background: var(--surface); overflow: hidden; }
.sc-mgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.sc-mh { padding: 8px 8px 6px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); }
.sc-mc { min-height: 112px; padding: 4px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sc-mc:nth-child(7n) { border-right: 0; }
.sc-mc[data-act] { cursor: copy; }
.sc-mc.is-out { background: var(--surface-2); }
.sc-mc.is-out .sc-mday { color: var(--muted); }
.sc-mday { align-self: flex-start; min-width: 26px; height: 24px; padding: 0 6px; border-radius: 4px; font: 500 13px/24px var(--display, inherit); color: var(--ink); text-align: left; }
.sc-mday:hover { background: var(--surface-2); }
.sc-mc.is-today .sc-mday { background: var(--accent); color: var(--on-accent); }
.sc-more { align-self: flex-start; font-size: 11.5px; color: var(--accent-2); padding: 2px 4px; border-radius: 4px; }
.sc-more:hover { text-decoration: underline; }

/* details drawer */
.sc-detail .eyebrow { display: flex; align-items: center; gap: 6px; }
.sc-detail .eyebrow .sc-key { font-size: inherit; text-transform: inherit; letter-spacing: inherit; }
.sc-doneline { display: inline-flex; align-items: center; gap: 6px; margin: 8px 0 0; padding: 4px 10px; border-radius: 999px; font-size: 13px; background: var(--ok-soft); color: var(--ok); }
.sc-doneline .ic { width: 14px; height: 14px; }
.sc-rows { margin: 18px 0; border-top: 1px solid var(--line); }
.sc-row { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.sc-row a { color: var(--accent-2); text-decoration: underline; text-underline-offset: 2px; }
.sc-people { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.sc-pp { display: inline-flex; align-items: center; gap: 6px; }
.sc-notes { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.sc-act { margin-top: 8px; gap: 8px; flex-wrap: wrap; }

/* the form */
.sc-types { flex-wrap: wrap; }
.sc-type { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; padding: 6px 10px; border-radius: 4px; font-size: 13px; font-weight: 500; color: var(--muted); white-space: nowrap; position: relative; }
.sc-type:hover:not(.on) { color: var(--ink); background: var(--surface-2); }
.sc-type.on { background: var(--btn); color: var(--on-btn); }
.sc-type.on .ic { color: var(--on-btn); stroke: var(--on-btn); }
.sc-type input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.sc-type .ic { width: 14px; height: 14px; color: var(--c); stroke: var(--c); }
.sc-type:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: -2px; }
.sc-when { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0 14px; }
.sc-when .field { flex: 0 1 180px; min-width: 140px; }
.sc-allday { margin: 0 0 22px; white-space: nowrap; }
.sc-plist { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px 14px; }
.sc-pick { display: flex; align-items: center; gap: 8px; min-height: 32px; cursor: pointer; }
.sc-pick .dot { flex: none; }
.sc-assign[aria-invalid="true"] .sc-plist { outline: 1px solid var(--bad); outline-offset: 4px; border-radius: 4px; }
.sc-link { position: relative; }
.sc-link-res { display: flex; flex-direction: column; max-height: 180px; overflow-y: auto; }
.sc-link-res:not(:empty) { margin-top: 4px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.sc-lres { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); font-size: 13px; }
.sc-lres:last-child { border-bottom: 0; }
.sc-lres:hover, .sc-lres:focus-visible { background: var(--surface-2); }
.sc-linked { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 38px; padding: 4px 4px 4px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-2); }
.sc-loading { min-height: 200px; }

@media (max-width: 720px) {
  .sc-bar2 { flex-direction: column; align-items: flex-start; }
  .sc-mc { min-height: 76px; padding: 2px; }
  .sc-mc .sc-ev { padding: 2px 3px; } .sc-mc .sc-ev > .ic { display: none; }
  .sc-row { grid-template-columns: 1fr; gap: 2px; }
}

/* the iPad: touch targets */
html.ipad .sc-mode button, html.ipad .sc-filter .chip, html.ipad .sc-person select { min-height: 44px; }
html.ipad .sc-mode button { padding: 0 18px; }
html.ipad .sc-ev { min-height: 34px; font-size: 12.5px; padding: 6px 8px; }
html.ipad .sc-mday, html.ipad .sc-more { min-height: 34px; line-height: 34px; }
html.ipad .sc-pick { min-height: 44px; }
html.ipad .sc-lres { min-height: 44px; }
html.ipad .sc-type { min-height: 44px; }
/* ==== end Nov 3 (ND) ==== */