/* Westline CSS library: one stylesheet for the business app, the client portal, the operator console and the legal pages.

   Naming
     wl-<component>              one definition per component               wl-btn
     wl-<component>-<part>       a piece of it                              wl-card-head
     wl-<component>--<variant>   a named variant                            wl-btn--primary
     is-<state>                  a state, set next to the component class   is-loading
     wl-l-<name>                 layout helpers                             wl-l-stack
     wl-u-<property>-<step>      spacing utilities from the scale           wl-u-mt-4
     pg-<page>-<thing>           page classes: they may only place things (grid, flex, order, width, position),
                                 never set colour, spacing, type, border or shadow.

   Tokens
     The block below is the only place a colour, size, radius or shadow is named. Themes (themes.css) change tokens only.
     The values here are Harbor's; Field Guide, the default theme, sets its own in themes.css.
     Breakpoints cannot be variables in a media query, so they are fixed here by agreement: phone 560px, tablet 900px, wide 1180px. */
:root {
  /* colour roles */
  --bg: #edf2f1; --surface: #fbfdfc; --raise: #ffffff; --wash: #e3eae9;
  --line: #d3dddb; --line-soft: #e1e9e7; --line-strong: #7f9593;
  --ink: #102a2d; --ink-2: #44605f; --ink-3: #526c6a;
  --accent: #0b7a80; --accent-strong: #08595e; --accent-ink: #f4fffe; --accent-soft: #d4ebea;
  --mark: #c9a66b; --link: var(--accent); --focus: var(--accent);
  --ok: #1c7a4f; --warn: #985c0a; --bad: #b0392f; --info: #3a5f9e; --idle: #7f9290;
  --rail: #08181a; --rail-2: #10292d; --rail-ink: #a9c6c4; --rail-dim: #7f9e9c;
  --scrim: rgba(8,24,26,.55);
  /* space: 2 4 6 8 10 12 16 24 32 */
  --sp-1: 2px; --sp-2: 4px; --sp-3: 6px; --sp-4: 8px; --sp-5: 10px; --sp-6: 12px; --sp-7: 16px; --sp-8: 24px; --sp-9: 32px;
  /* type */
  --display: "Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font: "Instrument Sans", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --fs-1: 12px; --fs-2: 13px; --fs-3: 14.5px; --fs-4: 16px; --fs-5: 20px; --fs-6: 24px; --fs-7: 34px;
  --fw-regular: 400; --fw-medium: 500; --fw-bold: 600; --fw-heavy: 800;
  --head-case: none; --head-track: -.01em;
  /* shape */
  --radius-mark: 2px; --radius-chip: 4px; --radius-ctl: 5px; --radius-btn: 5px; --radius-panel: 6px; --radius-pill: 999px;
  --line-w: 1px; --line-w-strong: 1.5px; --border-card: 1px solid #d7e0de;
  /* depth */
  --shadow-card: 0 1px 3px rgba(16,42,45,.14), 0 8px 24px rgba(16,42,45,.19); --shadow-pop: 0 8px 28px rgba(0,0,0,.18); --shadow-btn: none;
  /* sizes */
  --ctl-h: 40px; --ctl-h-sm: 32px; --ctl-h-xs: 28px; --rail-w: 224px;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 14.5px/1.5 var(--font); -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; color: inherit; }
.mono { font-family: var(--mono); font-size: 12.5px; letter-spacing: -.01em; }
.num { font-variant-numeric: tabular-nums; text-align: right; }
.muted { color: var(--ink-3); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }

/* rail */
.shell { display: grid; grid-template-columns: 224px minmax(0, 1fr); min-height: 100vh; }
.rail { background: var(--rail); color: var(--rail-ink); padding: 26px 14px 18px; display: flex; flex-direction: column; gap: 2px;
  padding-left: max(14px, env(safe-area-inset-left, 0px)); position: sticky; top: 0; height: 100vh; }
.brand { padding: 0 12px 28px; line-height: 1; }
.brand b { display: block; font: 600 15px var(--display); letter-spacing: .34em; color: #fff; }
.brand span { display: block; margin-top: 6px; font: 500 9.5px var(--font); letter-spacing: .26em; text-transform: uppercase; color: var(--mark); }
.nav { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 8px; background: none; border: 0;
  color: var(--rail-ink); cursor: pointer; text-align: left; width: 100%; position: relative; font-weight: 500; }
.nav:hover { color: #fff; background: rgba(255,255,255,.05); }
.nav[aria-current="page"] { color: #fff; background: var(--rail-2); }
.nav[aria-current="page"]::before { content: ""; position: absolute; left: -14px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--mark); }
.nav svg { width: 17px; height: 17px; flex: none; opacity: .85; }
.rail .spacer { flex: 1; }
.who { padding: 10px 12px 6px; font-size: 12px; color: var(--rail-dim); border-top: 1px solid rgba(255,255,255,.08); margin-top: 8px; overflow-wrap: anywhere; }
.who b { display: block; color: var(--rail-ink); font-weight: 500; }
.nav.quiet { color: var(--rail-dim); font-weight: 400; }

/* page */
.main { padding-block: 34px 56px; padding-left: 40px; padding-right: max(40px, env(safe-area-inset-right, 0px)); min-width: 0; }
.head { display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: flex-end; justify-content: space-between; margin-bottom: 22px; }
.head p { margin: 4px 0 0; color: var(--ink-2); }
h1 { font: 600 30px/1.1 var(--display); letter-spacing: -.02em; margin: 0; }
h2 { font: 600 17px var(--display); letter-spacing: -.01em; margin: 0 0 10px; }

.tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-width: 0; }
/* ── wl-input, wl-select, wl-textarea: the text controls. One face in every theme; the themes only move the tokens. ── */
.wl-input, .wl-select { background: var(--raise); color: var(--ink); border: var(--line-w) solid var(--line-strong); border-radius: var(--radius-ctl); padding: var(--sp-4) var(--sp-6); min-width: 0; }
.wl-input { width: 250px; max-width: 100%; }
.wl-input::placeholder { color: var(--ink-3); }
.wl-input:disabled, .wl-select:disabled { color: var(--ink-3); }
.wl-input.wl-input--sm { width: 92px; }
.wl-select.wl-select--xs { height: 30px; padding: 0 var(--sp-4); font-size: var(--fs-1); width: auto; }
.wl-textarea { resize: vertical; }
/* ── wl-btn: plain (default), --primary, --quiet, --danger, --icon, --xs; --link stands alone as underlined text; states is-loading, is-filtered, [disabled] ── */
.wl-btn { background: var(--raise); border: var(--line-w) solid var(--line-strong); border-radius: var(--radius-btn); padding: var(--sp-4) 14px; cursor: pointer; font-weight: var(--fw-bold); white-space: nowrap; box-shadow: none; }
.wl-btn:hover { border-color: var(--ink-3); }
.wl-btn.wl-btn--primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow-btn); }
.wl-btn.wl-btn--primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.wl-btn.wl-btn--quiet { border-color: transparent; background: none; padding: var(--sp-3) 9px; color: var(--ink-2); box-shadow: none; }
.wl-btn.wl-btn--quiet:hover { background: var(--wash); }
.wl-btn.wl-btn--danger { color: var(--bad); }
.wl-btn.wl-btn--xs { font-size: var(--fs-1); padding: var(--sp-1) var(--sp-3); }
.wl-btn.wl-btn--icon { width: 40px; height: 40px; padding: 0; display: inline-grid; place-items: center; border-radius: var(--radius-panel); }
.wl-btn.is-filtered { border-color: var(--accent); color: var(--accent); }
.wl-btn[disabled] { opacity: .5; cursor: default; }
.wl-btn--link { background: none; border: 0; padding: var(--sp-1) 0; font: inherit; font-size: 13.5px; color: var(--accent); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.wl-btn--link:hover { text-decoration-thickness: 2px; } .wl-btn--link:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-mark); }
.wl-btn.is-loading { position: relative; overflow: hidden; cursor: progress; }
.wl-btn.is-loading::before { content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 9px; vertical-align: -2px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: wlspin .7s linear infinite; }
.wl-btn.is-loading::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 40%; background: rgba(255,255,255,.55); animation: wlsweep 1.1s ease-in-out infinite; }
.login form.signing .wl-input { opacity: .55; transition: opacity .2s; }
.login form.signing .alt { opacity: .5; pointer-events: none; }
@keyframes wlspin { to { transform: rotate(360deg); } }
@keyframes wlsweep { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } }

.tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--line); margin-bottom: 18px; overflow-x: auto; }
.tab { background: none; border: 0; padding: 8px 0 10px; cursor: pointer; color: var(--ink-3); font-weight: 600; position: relative; white-space: nowrap; }
.tab:hover { color: var(--ink); }
.tab[aria-pressed="true"] { color: var(--ink); }
.tab[aria-pressed="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent); }
.tab small { margin-left: 6px; font-weight: 500; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* overview */
.strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--surface); border-radius: 14px; box-shadow: var(--shadow-card); margin-bottom: 28px; }
.strip > div { padding: 20px 22px; border-left: 1px solid var(--line-soft); min-width: 0; }
.strip > div:first-child { border-left: 0; }
.strip dt { color: var(--ink-3); font-size: 12.5px; margin-bottom: 8px; }
.strip dd { margin: 0; font: 600 32px/1 var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.strip dd small { font: 500 13px var(--font); color: var(--ink-3); letter-spacing: 0; margin-left: 6px; }
.two { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.card { background: var(--surface); border-radius: 14px; box-shadow: var(--shadow-card); padding: 22px; min-width: 0; }
.chart { width: 100%; height: auto; display: block; }
.chart text { fill: var(--ink-3); font: 11px var(--font); }
.chart .bar { fill: var(--accent-soft); } .chart .bar.today { fill: var(--accent); }
.chart .grid { stroke: var(--line-soft); stroke-width: 1; }

/* data lists */
.tablewrap td, .tablewrap th { white-space: nowrap; }
.tablewrap { background: var(--surface); border-radius: 14px; box-shadow: var(--shadow-card); overflow-x: auto; }
table { border-collapse: collapse; width: 100%; min-width: 600px; }
th { text-align: left; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); padding: 14px 16px 10px; white-space: nowrap; }
td { padding: 13px 16px; border-top: 1px solid var(--line-soft); vertical-align: middle; }
td .mono, td .id, td.num, td.muted, td .status { white-space: nowrap; }
td .id { font: 500 13px var(--mono); color: var(--accent-strong); }
tbody tr[data-row] { cursor: pointer; }
tbody tr[data-row]:hover td { background: var(--wash); }
tbody tr[aria-selected="true"] td { background: var(--accent-soft); }
th.num { text-align: right; }
.empty { padding: 44px 16px; text-align: center; color: var(--ink-3); }
.status { display: inline-flex; align-items: center; gap: 7px; font-weight: 500; }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--idle); flex: none; }
.status.ok::before { background: var(--ok); } .status.warn::before { background: var(--warn); }
.status.bad::before { background: var(--bad); } .status.info::before { background: var(--info); }
.pill { /* kept for markup compatibility: renders as a status dot */ display: inline-flex; align-items: center; gap: 7px; font-weight: 500; white-space: nowrap; }
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--idle); flex: none; }
.pill.ok::before { background: var(--ok); } .pill.warn::before { background: var(--warn); } .pill.bad::before { background: var(--bad); } .pill.info::before { background: var(--info); }

.summary { display: flex; flex-wrap: wrap; gap: 6px 26px; margin-bottom: 12px; color: var(--ink-3); }
.summary b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(310px, 370px); gap: 24px; align-items: start; }
.split.solo { grid-template-columns: minmax(0, 1fr); }
.panel { background: var(--raise); border-radius: 16px; box-shadow: var(--shadow-card); padding: 22px; position: sticky; top: 20px; min-width: 0; }
.panel header { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; margin-bottom: 16px; }
.panel h3 { margin: 0; font: 600 20px/1.2 var(--display); letter-spacing: -.01em; }
.panel h2 { margin-top: 20px; font-size: 14px; }
.kv { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px 12px; margin: 0; }
.kv dt { color: var(--ink-3); } .kv dd { margin: 0; overflow-wrap: anywhere; }
.lines { width: 100%; min-width: 0; }
.lines th { padding: 8px 4px 6px; } .lines td { padding: 9px 4px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.timeline { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 1px solid var(--line); display: grid; gap: 10px; }
.timeline li { position: relative; display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 8px; }
.timeline li::before { content: ""; position: absolute; left: -18px; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.timeline time { color: var(--ink-3); font-size: 12.5px; }
.toast { position: fixed; right: max(20px, env(safe-area-inset-right, 0px)); bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  background: var(--ink); color: var(--bg); padding: 11px 16px; border-radius: 10px; max-width: min(360px, calc(100vw - 40px)); z-index: 20; box-shadow: var(--shadow-card); }
.sample { color: var(--mark); font-size: 12px; margin-top: 4px; }
.form { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; align-items: end; margin-bottom: 18px; background: var(--surface); border-radius: 14px; box-shadow: var(--shadow-card); padding: 18px; }
.form label { display: grid; gap: 5px; font-size: 12.5px; color: var(--ink-2); font-weight: 500; }
.total { font: 600 24px var(--display); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }

/* sign in */
.login { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.login .side { position: relative; overflow: hidden; background: var(--rail); color: #fff; padding: 56px max(48px, env(safe-area-inset-left, 0px)); display: flex; flex-direction: column; justify-content: flex-end; }
.login .side h2 { font: 600 34px/1.12 var(--display); letter-spacing: -.02em; margin: 0; max-width: 17ch; }
.login .side p { color: var(--rail-ink); max-width: 44ch; margin: 14px 0 0; }
.login .side .brand { padding: 0; }
.login .side > :not(.stage) { position: relative; z-index: 1; }
.login .side .stage { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(60% 45% at 50% 48%, rgba(79,196,201,.10), transparent 70%); }
.login .side .mark { position: absolute; opacity: 0; filter: blur(16px); animation: markdrift 9s cubic-bezier(.3,.6,.3,1) infinite; line-height: 1; }
.login .side .mark b { display: block; font: 600 clamp(22px, 3.2vw, 44px) var(--display); letter-spacing: .34em; color: #fff; }
.login .side .mark span { display: block; margin-top: .7em; font: 500 clamp(9px, 1vw, 12px) var(--font); letter-spacing: .26em; text-transform: uppercase; color: var(--mark); }
.login .side .m0 { left: 50%; top: 40%; transform: translate(-50%, -50%); animation-delay: 0s; }
@keyframes markdrift {
  0%   { opacity: 0; filter: blur(16px); translate: -50px 0; }
  26%  { opacity: .95; filter: blur(0); translate: 0 0; }
  62%  { opacity: .95; filter: blur(0); translate: 0 0; }
  88%  { opacity: 0; filter: blur(16px); translate: 50px 0; }
  100% { opacity: 0; filter: blur(16px); translate: 50px 0; }
}
@media (prefers-reduced-motion: reduce) { .login .side .m0 { opacity: .85; filter: none; } }
.login .formcol { display: grid; place-items: center; padding: 40px max(24px, env(safe-area-inset-right, 0px)); }
.login form { width: min(340px, 100%); display: grid; gap: 14px; }
.login form h1 { font-size: 24px; margin-bottom: 2px; }
.login label { display: grid; gap: 5px; font-size: 12.5px; color: var(--ink-2); font-weight: 500; }
.login .wl-input { width: 100%; }
.err { color: var(--bad); font-size: 13px; min-height: 18px; }

@media (max-width: 900px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .rail { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 10px 12px; gap: 2px;
    padding-left: max(12px, env(safe-area-inset-left, 0px)); }
  .brand { padding: 4px 14px 4px 0; } .brand span { display: none; } .rail .spacer, .who { display: none; }
  .nav { width: auto; padding: 8px 10px; } .nav[aria-current="page"]::before { display: none; }
  .main { padding-block: 22px 40px; padding-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px)); }
  .split, .two { grid-template-columns: minmax(0, 1fr); } .panel { position: static; }
  .strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } .strip > div:nth-child(3) { border-left: 0; } .strip > div:nth-child(n+3) { border-top: 1px solid var(--line-soft); }
  .login { grid-template-columns: minmax(0, 1fr); } .login .side { padding: 28px 24px; gap: 28px; min-height: 420px; } .login .side .m0 { top: 32%; } .login .side h2 { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } .wl-btn.is-loading::before { border-right-color: currentColor; } }

/* account screens */
.login .formwrap { width: min(400px, 100%); display: grid; gap: 14px; }
.login .formwrap form, .stack { display: grid; gap: 14px; }
.login .formwrap h1 { font-size: 24px; margin: 0; } .lead { margin: -6px 0 2px; color: var(--ink-2); }
.wl-field-hint { color: var(--ink-3); font-weight: 400; font-size: 12.5px; } .alt { margin: 0; color: var(--ink-2); font-size: 13.5px; } .alt a, .docs a { color: var(--accent); }
.login .wl-select, .stack .wl-select { width: 100%; } .stack .wl-input { width: 100%; max-width: 340px; }
div.ok, p.ok { color: var(--ok); background: var(--accent-soft); border-radius: 10px; padding: 11px 14px; }
.docs { display: grid; gap: 14px; } .legalrow { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 2px 10px; align-items: start; border: 0; padding: 0; }
.legalrow input { margin: 2px 0 0; width: 16px; height: 16px; } .legalrow label { display: block; color: var(--ink); font-size: 13.5px; line-height: 20px; } .legalrow .wl-field-hint { grid-column: 2; }
.banner { background: var(--accent-soft); border-radius: 10px; padding: 10px 14px; margin-bottom: 18px; display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.banner.bad { background: color-mix(in srgb, var(--bad) 14%, var(--surface)); color: var(--ink); }
.narrow { max-width: 640px; } .fine { font-size: 12.5px; } .big { font: 600 20px var(--display); margin: 0 0 6px; }
.meters { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; } .mrow { display: flex; justify-content: space-between; gap: 12px; }
.bar { height: 6px; border-radius: 3px; background: var(--wash); margin-top: 6px; overflow: hidden; } .bar i { display: block; height: 100%; background: var(--accent); }
.bar i.high { background: var(--warn); } .bar i.full { background: var(--bad); }
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.plan { border: 1px solid var(--line); border-radius: 12px; padding: 16px; display: grid; gap: 10px; align-content: start; } .plan.current { border-color: var(--accent); }
.plan h3 { margin: 0; font: 600 17px var(--display); } .price { font: 600 26px var(--display); } .price small { font: 400 13px var(--font); color: var(--ink-3); }
.plan ul { margin: 0; padding-left: 18px; color: var(--ink-2); font-size: 13.5px; } .seg { display: flex; gap: 6px; flex-wrap: wrap; }
.wl-check { display: flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 400; grid-column: 1 / -1; }
.tools { display: flex; gap: 8px; align-items: center; }

/* tiles, order card, units */
.tile { cursor: pointer; border-radius: 10px; } .tile:hover, .tile:focus-visible { background: var(--accent-soft); }
.tablewrap.narrow-cols { overflow-x: hidden; } .tablewrap.narrow-cols td, .tablewrap.narrow-cols th { white-space: normal; overflow-wrap: anywhere; }
.reserve { border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin-bottom: 12px; display: grid; gap: 10px; }
.reserve .rhead { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; } .rcount { font-variant-numeric: tabular-nums; color: var(--ink-2); white-space: nowrap; } .rcount.done { color: var(--ok); }
.rinput { display: flex; gap: 8px; flex-wrap: wrap; } .rinput .wl-input { flex: 1 1 140px; width: auto; }
details.units summary { cursor: pointer; color: var(--accent); font-weight: 600; } details.units ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
details.units li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 3px 0; border-bottom: 1px solid var(--line-soft); }
.lot { border-top: 1px solid var(--line-soft); padding: 12px 0; display: grid; gap: 6px; } .lothead { display: flex; justify-content: space-between; gap: 10px; }
.cinfo { display: grid; gap: 16px; margin-top: 18px; } .mini { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; } .mini div { background: var(--wash); border-radius: 10px; padding: 10px 12px; }
.mini dt { color: var(--ink-3); font-size: 12px; } .mini dd { margin: 2px 0 0; font: 600 20px var(--display); font-variant-numeric: tabular-nums; }
.minilist { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; } .minilist li { display: flex; justify-content: space-between; gap: 10px; }
.summary > * { white-space: nowrap; }

/* feedback round 3: no scrollbars on nav or lists, uniform fields, centered cards, scrolling order card */
.tabs { overflow: visible; flex-wrap: wrap; row-gap: 0; }
.tablewrap { overflow-x: hidden; } .tablewrap td, .tablewrap th { overflow-wrap: anywhere; }
.form .wl-input, .form .wl-select, .stack .wl-input, .stack .wl-select { width: 100%; max-width: none; box-sizing: border-box; height: 40px; }
.form .wl-btn, .stack .wl-btn { height: 40px; white-space: nowrap; width: auto; }
.form > div { display: flex; gap: 8px; align-items: end; flex-wrap: wrap; }
.stack label { display: grid; gap: 5px; font-size: 12.5px; color: var(--ink-2); font-weight: 500; }
.narrow { margin-inline: auto; width: min(640px, 100%); }
.narrow .card { box-sizing: border-box; }
.panel { max-height: calc(100vh - 40px); overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; }
.panel::-webkit-scrollbar { display: none; }
.stepper { display: inline-flex; align-items: center; gap: 10px; }
.stepper .wl-btn { width: 40px; height: 40px; padding: 0; font-size: 20px; line-height: 1; }
.stepper .num { min-width: 28px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }

/* feedback round 4: lists never scroll sideways, the detail card fits the window, no page scrollbar */
html { scrollbar-width: none; } html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; }
table { min-width: 0; }
.tablewrap td, .tablewrap th { white-space: normal; }
.tablewrap td .id, .tablewrap td .mono { white-space: normal; overflow-wrap: anywhere; }
.tablewrap.narrow-cols table { table-layout: fixed; }
.tablewrap.narrow-cols td:first-child, .tablewrap.narrow-cols th:first-child { width: 36%; }
.tablewrap.narrow-cols td:last-child, .tablewrap.narrow-cols th:last-child { width: 156px; }
@media (max-width: 900px) { .panel { max-height: none !important; } }

/* Team screen */
.perms { display: grid; gap: 8px; margin-top: 8px; }
.perm { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; }
.perm.on { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.perm-head { display: flex; align-items: center; gap: 10px; cursor: pointer; } .perm-head .muted { margin-left: auto; font-size: 12.5px; }
.perm ul { list-style: none; margin: 8px 0 2px 44px; padding: 0; display: grid; gap: 5px; } .perm li label { display: flex; align-items: center; gap: 6px; color: var(--ink); font-size: 13.5px; font-weight: 400; }
input.switch { appearance: none; -webkit-appearance: none; width: 34px; height: 20px; border-radius: 999px; background: var(--wash); border: 1px solid var(--line); position: relative; cursor: pointer; flex: none; margin: 0; transition: background .15s; }
input.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--ink-3); transition: transform .15s, background .15s; }
input.switch:checked { background: var(--accent); border-color: var(--accent); } input.switch:checked::after { transform: translateX(14px); background: #fff; }
input.switch:disabled { opacity: .45; cursor: default; }
.chip { display: inline-block; font-size: 12px; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: var(--wash); color: var(--ink-2); margin-left: 8px; }
.mcard { border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin-bottom: 10px; display: grid; gap: 10px; }
.mhead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .mhead .wl-btn { margin-left: auto; }
.mbody { display: grid; gap: 10px; } .mbody > label { display: grid; gap: 5px; font-size: 12.5px; color: var(--ink-2); font-weight: 500; }
.mbody .wl-check { display: flex; gap: 6px; align-items: center; color: var(--ink); font-size: 13.5px; }
.cpick { display: grid; gap: 8px; } .checks { display: grid; gap: 4px; max-height: 180px; overflow: auto; } .checks label { display: flex; gap: 6px; align-items: center; font-size: 13.5px; color: var(--ink); font-weight: 400; }
.reqs { display: grid; gap: 12px; max-width: 760px; } .req { display: grid; gap: 6px; } .req .rinput label { display: grid; gap: 4px; font-size: 12.5px; color: var(--ink-2); }
.panel h2 { font-size: 14px; }

.emptystate { display: grid; justify-items: center; gap: 14px; text-align: center; padding: 40px 24px; } .emptystate p { margin: 0; color: var(--ink-2); max-width: 44ch; }

/* username availability message */
.wl-field-hint.is-ok { color: var(--ok); } .wl-field-hint.is-bad { color: var(--bad); }

/* Rate cards */
.bands { display: grid; gap: 8px; margin: 8px 0; }
.band { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.band .from { min-width: 28px; text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-3); }
.band .dollar { color: var(--ink-3); margin-right: -4px; }
.comp { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 8px; }
.rule .mhead { align-items: center; }
.mix { display: grid; gap: 8px; margin: 8px 0 12px; }
.mixrow { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.vbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.vbar .wl-select { min-width: 260px; }
.actions.sticky { position: sticky; bottom: 0; background: var(--surface); padding: 12px 0; margin-top: 12px; border-top: 1px solid var(--line); z-index: 2; }
.rline { display: flex; justify-content: space-between; gap: 16px; padding: 4px 0; }
.rline.total { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 8px; }
.result { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line); }
.plist { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 4px 14px; margin-top: 10px; }
.wl-check.is-dim { opacity: .55; }
tr.clickable { cursor: pointer; } tr.clickable:hover { background: var(--wash); }
.detailcard { max-width: 1020px; }
.rinput .wl-input.wl-input--sm, .band .wl-input.wl-input--sm { flex: 0 0 92px; width: 92px; }
.stack label.wl-check { display: flex; align-items: center; gap: 8px; }
.rule .mhead > span { margin-left: auto; }
.mixrow .wl-select { width: auto; max-width: 100%; }
.mixrow label { display: grid; gap: 3px; font-size: 12px; color: var(--ink-2); }
.vbar .wl-select { max-width: 100%; }

/* A list with a card open beside it fills the window; the page doesn't scroll, each column does. */
@media (min-width: 901px) {
  .main.locked { height: 100vh; box-sizing: border-box; overflow: hidden; display: flex; flex-direction: column; padding-bottom: 20px; }
  .main.locked > * { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .main.locked > * > * { flex: 0 0 auto; }
  .main.locked > .split, .main.locked > * > .split { flex: 1 1 auto; min-height: 0; align-items: stretch; grid-template-rows: minmax(0, 1fr); }
  .main.locked .split > :first-child { overflow-y: auto; min-height: 0; padding-right: 4px; }
  .main.locked .split > .panel { position: static; align-self: stretch; max-height: none !important; height: auto; overflow-y: auto; }
}

/* Rate cards: price sentences */
.mhead > div:first-child { flex: 1 1 240px; min-width: 0; }
.sent { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; margin: 8px 0; }
.sent .wl-select { width: auto; max-width: 100%; }
.sent .wl-input { flex: 0 1 auto; width: 340px; }
.sent .wl-input.wl-input--sm { flex: 0 0 92px; width: 92px; }
.inl { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); font-weight: 400; }
.inl .wl-select { width: auto; max-width: 100%; }
.money { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-3); }
.tiers { display: grid; gap: 8px; margin: 8px 0; }
.tier { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; }
.tier .wl-select { width: auto; max-width: 100%; }
.note { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; justify-content: space-between; background: var(--wash); border-radius: 12px; padding: 14px 16px; margin-top: 6px; }
.disc { margin-top: 6px; }
.disc > .wl-btn { padding-left: 0; font-weight: 600; }

/* ── Service Rates grid and guided setup ── */
.srgrid { table-layout: auto; }
.srgrid th, .srgrid td { vertical-align: top; }
.srgrid td:first-child { min-width: 150px; }
.srcell { display: block; width: 100%; min-width: 170px; text-align: left; font: inherit; color: var(--ink, #102a2d); background: #fff; border: 1px solid #cdd9d7; border-radius: 10px; padding: 8px 10px; cursor: pointer; }
.srcell:hover { border-color: #0b7a80; }
.srcell.sel { border-color: #0b7a80; box-shadow: 0 0 0 2px rgba(11,122,128,.2); }
.srcell small { display: block; color: #5b7573; font-size: 12px; margin-top: 2px; }
.srcell.empty { border: 1.5px dashed #d9a441; background: #fff9ec; color: #8a6212; }
.srcell.empty small { color: #8a6212; }
.srcard, .typeadd, .trycard { margin-top: 16px; }
.srcard .shapes { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.sent.big { font-size: 16px; line-height: 2.3; background: #f3f8f7; border-radius: 12px; padding: 12px 16px; display: block; }
.sent.big .money, .sent.big .wl-input { margin: 0 4px; }
.check-it { margin-top: 14px; background: #fff; border: 1px solid #d3dedc; border-radius: 12px; padding: 12px 14px; }
.check-it .qs { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 6px; }
.notesline { display: flex; align-items: center; gap: 10px; margin: 8px 0 12px; }
.notesline .wl-input { flex: 1; }
.tabadd { width: auto; min-width: 150px; color: #0b7a80; font-weight: 600; border: 0; background: transparent; }
.fees .fee { margin-top: 8px; }
.card.soft { background: #f3f8f7; box-shadow: none; margin: 12px 0; }
.steps { display: flex; gap: 8px; margin-bottom: 16px; }
.steps .st { flex: 1; height: 6px; border-radius: 3px; background: #d3dedc; }
.steps .st.on { background: #0b7a80; }
.opt { display: flex; gap: 12px; align-items: flex-start; width: 100%; text-align: left; font: inherit; color: inherit; border: 1.5px solid #cdd9d7; border-radius: 12px; padding: 14px 16px; background: #fff; margin: 10px 0; cursor: pointer; }
.opt.sel { border-color: #0b7a80; background: #eef8f7; }
.opt b { font-size: 15px; }
.box { flex: 0 0 20px; height: 20px; border-radius: 5px; border: 1.5px solid #9fb3b0; background: #fff; text-align: center; font-size: 13px; line-height: 17px; color: #fff; margin-top: 2px; }
.box.on { background: #0b7a80; border-color: #0b7a80; }
.optgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
@media (max-width: 720px) { .optgrid { grid-template-columns: 1fr; } }
.chips { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.chip.pick { cursor: pointer; border: 1.5px solid transparent; }
.chip.pick.on { border-color: #0b7a80; background: #b9e0dc; }
.actions.between { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; }
.warn { color: #8a6212; }
.guided h1 { font-size: 24px; }
.srgrid th { white-space: nowrap; }

/* ── walkthrough and help ── */
/* ── Walkthrough (guide.js): a layer above the page. Four shades dim everything but the component being taught; the box sits beside it. ── */
.wl-guide { position: fixed; inset: 0; z-index: 1000; pointer-events: none; }
.wl-guide[hidden], .wl-guide-ring[hidden] { display: none; }
.wl-guide-shade { position: fixed; background: var(--scrim); pointer-events: auto; }
.wl-guide-ring { position: fixed; border: 2px solid var(--accent); border-radius: var(--radius-ctl, 6px); box-shadow: 0 0 0 3px var(--raise); pointer-events: none; }
.wl-guide-box { position: fixed; width: min(360px, calc(100vw - 24px)); background: var(--raise); color: var(--ink); border: 1px solid var(--line-strong, var(--line)); border-radius: var(--radius-panel, 8px); box-shadow: var(--shadow-card); padding: 16px 18px; pointer-events: auto; }
.wl-guide-arrow { position: absolute; width: 14px; height: 14px; background: var(--raise); border: 1px solid var(--line-strong, var(--line)); transform: rotate(45deg); }
.wl-guide-arrow.up { border-right: 0; border-bottom: 0; } .wl-guide-arrow.down { border-left: 0; border-top: 0; }
.wl-guide-arrow.left { border-right: 0; border-top: 0; } .wl-guide-arrow.right { border-left: 0; border-bottom: 0; } .wl-guide-arrow.none { display: none; }
.wl-guide-count { margin: 0 0 4px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.wl-guide-title { margin: 0 0 6px; font: 600 17px/1.25 var(--display); letter-spacing: -.01em; color: var(--ink); }
.wl-guide-text { margin: 0 0 14px; color: var(--ink-2); }
.wl-guide-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.wl-guide-actions .wl-btn--link { margin-left: auto; min-height: 36px; padding: 6px 4px; }
.wl-guide-welcome { width: min(460px, 100%); text-align: center; padding: var(--sp-9) var(--sp-8); }
.wl-guide-welcome h2 { margin: 0 0 var(--sp-4); font: var(--fw-bold) var(--fs-6)/1.2 var(--display); letter-spacing: -.01em; }
.wl-guide-welcome p { margin: 0 0 var(--sp-8); color: var(--ink-2); }
.wl-guide-welcome .actions { justify-content: center; flex-wrap: wrap; gap: var(--sp-4); }
/* ── Need help? (guide.js) ── */
.wl-help-search { display: grid; gap: 6px; font-weight: 500; margin-bottom: 8px; } .wl-help-search .wl-input { width: 100%; }
.wl-help-group > h2 { margin: 22px 0 8px; }
.wl-help-list { padding: 4px 20px; }
.wl-help-entry { border-bottom: 1px solid var(--line-soft); } .wl-help-entry:last-child { border-bottom: 0; }
.wl-help-q { display: flex; justify-content: space-between; gap: 12px; width: 100%; background: none; border: 0; font: inherit; font-weight: 600; text-align: left; padding: 14px 0; cursor: pointer; color: inherit; }
.wl-help-mark { color: var(--ink-3); }
.wl-help-a { padding: 0 0 16px; } .wl-help-a p { margin: 0 0 10px; }
.wl-help-h { margin: 14px 0 6px; font-weight: 600; font-size: 13px; color: var(--ink-2); }
.wl-help-a ol { margin: 0 0 12px 18px; padding: 0; } .wl-help-a li { margin: 4px 0; }
.wl-help-terms { margin: 0 0 12px; display: grid; grid-template-columns: minmax(120px, 30%) 1fr; gap: 6px 14px; } .wl-help-terms dt { font-weight: 600; } .wl-help-terms dd { margin: 0; color: var(--ink-2); }
@media (max-width: 560px) { .wl-help-terms { grid-template-columns: 1fr; gap: 2px; } .wl-help-terms dd { margin-bottom: 8px; } }
.wl-help-contact { margin-top: 20px; color: var(--ink-2); } .wl-help-contact a { color: var(--link, var(--accent-strong)); }
.qmark { display: inline-flex; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid currentColor; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; margin-right: 10px; flex: 0 0 20px; }

/* dashboard cards */
.dgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 72px; gap: 16px; position: relative; }
.dcard { background: var(--surface); border-radius: 14px; box-shadow: var(--shadow-card); padding: 18px 20px; min-width: 0; grid-column: var(--c) / span var(--w); grid-row: var(--r) / span var(--h); display: flex; flex-direction: column; overflow: hidden; }
.dbody { flex: 1; min-height: 0; overflow: auto; position: relative; }
.dghost { grid-column: var(--c) / span var(--w); grid-row: var(--r) / span var(--h); border-radius: 14px; background: color-mix(in srgb, var(--accent) 14%, transparent); border: 2px dashed var(--accent); pointer-events: none; transition: none; }
.dgrid.editing { background-image: radial-gradient(circle, var(--line) 1.2px, transparent 1.4px); background-size: calc((100% - 48px) / 4 + 16px) 88px; background-position: 0 0; }
.dcard.tile { cursor: pointer; } .dcard.tile:hover { outline: 2px solid var(--accent-soft); }
.dhead { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 10px; }
.dhead h2 { margin: 0; font: 600 12.5px var(--font); color: var(--ink-3); }
.dctl { display: flex; gap: 2px; flex-wrap: wrap; justify-content: flex-end; }
.bignum { font: 600 32px/1 var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin: 6px 0; }
.chart .area { fill: var(--accent-soft); opacity: .7; } .chart .ln { stroke: var(--accent); stroke-width: 2; } .chart .dot { fill: var(--surface); stroke: var(--accent); stroke-width: 2; } .chart .dot.now { fill: var(--accent); }
.donutwrap, .ringwrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.donut, .ring { width: 130px; height: 130px; flex: none; }
.donut .big, .ring .big { font: 600 22px var(--display); fill: var(--ink); } .donut .small { font: 11px var(--font); fill: var(--ink-3); }
.ring .track { stroke: var(--line-soft); } .ring .prog { stroke: var(--accent); }
.legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .legend li { display: flex; gap: 8px; align-items: center; } .legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; } .legend b { margin-left: auto; padding-left: 14px; font-variant-numeric: tabular-nums; }
.hbars { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .hbars li { display: grid; grid-template-columns: minmax(80px, 30%) 1fr auto; gap: 10px; align-items: center; }
.hbars .lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hbars .trk { background: var(--line-soft); border-radius: 6px; height: 10px; display: block; } .hbars .fill { display: block; height: 10px; border-radius: 6px; background: var(--accent); }
.addgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; } .addcard { text-align: left; display: grid; gap: 2px; height: auto; padding: 10px 12px; }
@media (max-width: 1000px) { .dgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; } .dcard { grid-column: auto / span 1; grid-row: auto; overflow: visible; } .dcard[data-w="2"], .dcard[data-w="3"], .dcard[data-w="4"] { grid-column: auto / span 2; } .dbody { overflow: visible; } .dgrid.editing { background-image: none; min-height: 0 !important; } .dghost { display: none; } }
/* phones keep two columns: a Small card is half the width, anything bigger runs across */
@media (max-width: 560px) { .dgrid { gap: 10px; } .dcard { padding: 14px; } .dcard h2 { font-size: 13px; } }
.chart .col { fill: var(--accent-soft); } .chart .col.today { fill: var(--accent); }

details.permbox { margin-top: 18px; border: 1px solid var(--line-soft); border-radius: 12px; padding: 0 14px; background: var(--raise); }
details.permbox > summary { cursor: pointer; display: flex; gap: 10px; align-items: baseline; justify-content: space-between; padding: 12px 0; list-style: none; }
details.permbox > summary::-webkit-details-marker { display: none; }
details.permbox > summary::after { content: "Show"; color: var(--accent); font-weight: 600; font-size: 13px; }
details.permbox[open] > summary::after { content: "Hide"; }
details.permbox[open] > summary { border-bottom: 1px solid var(--line-soft); margin-bottom: 8px; }
details.permbox > summary .muted { margin-left: auto; font-size: 13px; }

.dcard.editing { cursor: grab; outline: 1px dashed var(--line); } .dcard.dragging { visibility: hidden; }
.dcard .grip { color: var(--ink-3); letter-spacing: -2px; margin-right: 4px; }
.dcard.folded { padding-bottom: 6px; } .dcard.folded .dhead { margin-bottom: 0; align-items: center; }
.dctl.quiet { opacity: 0; transition: opacity .15s; } .dcard:hover .dctl.quiet, .dcard:focus-within .dctl.quiet, .dctl.quiet.wl-guide-on { opacity: 1; }
.dctl { align-items: center; }
.dcard.editing { position: relative; }
.dcard.editing .dctl { position: absolute; z-index: 3; top: 8px; right: 8px; left: 8px; justify-content: flex-end; flex-wrap: wrap; gap: 2px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 3px; box-shadow: var(--shadow-card); opacity: 0; pointer-events: none; transition: opacity .12s; }
.dcard.editing:hover .dctl, .dcard.editing:focus-within .dctl { opacity: 1; pointer-events: auto; }
.dcard.editing .dctl .wl-btn { padding: 2px 7px; min-width: 26px; height: 26px; }

/* ── tasks ── */
.tk-sec { margin-bottom: 22px; } .tk-sec h2 { font-size: 13px; color: var(--ink-3); margin: 0 0 8px; display: flex; gap: 8px; align-items: baseline; } .tk-sec h2 small { font-weight: 500; }
.tk-sec h2.tk-late, .tk-late { color: var(--bad); }
.tk-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tk-row { display: flex; gap: 12px; align-items: flex-start; background: var(--surface); border-radius: 12px; padding: 12px 14px; box-shadow: var(--shadow-card); }
.tk-row.on { outline: 2px solid var(--accent-soft); } .tk-row.done .tk-title { text-decoration: line-through; color: var(--ink-3); }
.tk-check { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--accent); flex: none; cursor: pointer; }
.tk-main { all: unset; cursor: pointer; display: grid; gap: 2px; flex: 1; min-width: 0; } .tk-main:focus-visible { outline: 2px solid var(--accent); border-radius: 6px; }
.tk-title { font-weight: 600; } .tk-meta { font-size: 13px; color: var(--ink-3); }
.tk-flag { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--bad); color: #fff; font-size: 12px; font-weight: 700; margin-right: 6px; }
.tk-filters { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.tk-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .tk-form .wl-textarea { height: auto; resize: vertical; padding: 8px 10px; } .tk-high { display: flex !important; align-items: center; gap: 8px; align-self: end; height: 40px; }

.tk-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.tk-dow { font-size: 12px; color: var(--ink-3); text-align: center; padding: 4px 0; }
.tk-day { background: var(--surface); border-radius: 10px; min-height: 92px; padding: 6px; display: flex; flex-direction: column; gap: 3px; cursor: pointer; overflow: hidden; }
.tk-day.other { opacity: .5; } .tk-day.today .tk-num { background: var(--accent); color: #fff; } .tk-day.sel { outline: 2px solid var(--accent); }
.tk-num { align-self: flex-start; font-size: 12px; font-weight: 600; min-width: 22px; height: 22px; border-radius: 11px; display: grid; place-items: center; }
.tk-chip { font-size: 12px; background: var(--accent-soft); border-radius: 5px; padding: 1px 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-chip.late { background: color-mix(in srgb, var(--bad) 18%, var(--surface)); } .tk-chip.done { text-decoration: line-through; opacity: .6; } .tk-chip.high { border-left: 3px solid var(--bad); }
.tk-more { font-size: 12px; color: var(--ink-3); }

.tkcard .tk-sum { display: flex; align-items: baseline; gap: 6px; margin-bottom: 8px; } .tkcard .bignum { font-size: 30px; }
.tk-mini { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.tk-mini li { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; padding: 4px 0; border-top: 1px solid var(--line-soft); }
.tk-mini .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tk-mini li.late .fine { color: var(--bad); } .tk-mini input { accent-color: var(--accent); }
 .tk-plus { font-size: 20px; line-height: 1; width: 30px; height: 30px; padding: 0; border-radius: 15px; background: var(--accent-soft); color: var(--accent); }
.tk-overlay { position: fixed; inset: 0; background: rgba(8, 20, 22, .45); display: grid; place-items: center; z-index: 60; padding: 16px; }
.tk-modal { background: var(--raise); border-radius: 16px; box-shadow: var(--shadow-card); padding: 22px; width: min(520px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; }
.tk-modal header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; } .tk-modal h3 { margin: 0; font: 600 20px var(--display); }
#tk-pops { position: fixed; right: 16px; bottom: 72px; display: grid; gap: 10px; z-index: 70; width: min(340px, calc(100vw - 32px)); }
.tk-pop { background: var(--raise); border-radius: 14px; box-shadow: 0 8px 30px rgba(0,0,0,.22); padding: 14px 16px; border-left: 4px solid var(--accent); display: grid; gap: 4px; }
.tk-pop-h { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); font-weight: 700; } .tk-pop-b { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; } .tk-pop-b .wl-btn { height: 32px; padding: 0 10px; }
@media (max-width: 700px) { .tk-two { grid-template-columns: 1fr; } .tk-day { min-height: 64px; } .tk-chip { display: none; } }
.dhead .tk-plus { margin-left: auto; }

.dsettings { position: relative; }
/* ── wl-menu: a pop-over anchored to a button. Plain: a list of actions. --form: a few fields with Clear all and Done. ── */
.wl-menu { position: absolute; right: 0; top: calc(100% + var(--sp-3)); z-index: 41; background: var(--raise); color: var(--ink); border-radius: var(--radius-panel); box-shadow: var(--shadow-pop); padding: var(--sp-3); min-width: 280px; display: grid; gap: var(--sp-1); }
.wl-menu--narrow { min-width: 190px; }
.wl-menu--form { padding: var(--sp-7); gap: var(--sp-6); width: min(320px, calc(100vw - 2 * var(--sp-7))); }
.wl-menu-item { all: unset; box-sizing: border-box; cursor: pointer; display: grid; gap: var(--sp-1); padding: var(--sp-5) var(--sp-6); border-radius: var(--radius-ctl); } .wl-menu-item:hover, .wl-menu-item:focus-visible { background: var(--accent-soft); }
.wl-menu-backdrop { position: fixed; inset: 0; z-index: 40; }
.wl-menu-field { display: grid; gap: var(--sp-2); font-size: var(--fs-1); color: var(--ink-3); } .wl-menu-field > :is(.wl-input, .wl-select, .wl-picker) { width: 100%; min-width: 0; max-width: none; }
.wl-menu-actions { display: flex; justify-content: space-between; gap: var(--sp-4); }
/* ── calendar page: fits the window ── */
.tkpage.cal { display: flex; flex-direction: column; }
.tkpage .head { flex: none; margin-bottom: 8px; }
.tk-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; min-height: 52px; gap: 12px; border-bottom: 1px solid var(--line); margin-bottom: 12px; flex: none; }
.tk-bar .tabs { border: 0; margin: 0; } .tk-bar .tab { padding: 10px 0 12px; }
.tk-monthnav { display: flex; align-items: center; justify-content: center; gap: 8px; padding-bottom: 6px; } .tk-monthnav h2 { margin: 0 6px; font: 600 18px var(--display); min-width: 150px; text-align: center; }
.tk-bar .tk-filters { justify-self: end; margin: 0; padding-bottom: 6px; flex-wrap: nowrap; } .nowrap { white-space: nowrap; }
.tkpage.cal .tk-split { align-items: stretch; } .tkpage.cal .tk-left { min-height: 0; display: flex; flex-direction: column; min-width: 0; }
.tkpage.cal .panel { position: static; height: auto; max-height: none !important; box-sizing: border-box; contain: size; overflow-y: auto; }
.tk-calwrap { min-height: 0; display: flex; flex-direction: column; } .tk-dowrow { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; flex: none; }
.tkpage.cal .tk-grid { align-items: stretch; } .tkpage.cal .tk-day { min-height: 0; }

.tk-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 6px; flex: none; background: var(--ink-3); }
.tk-row.ev.shift .tk-dot, .tk-chip.ev.shift, .tk-dots .tk-dot.shift { --evc: #3b5ba5; } .tk-row.ev.office_hours .tk-dot, .tk-chip.ev.office_hours, .tk-dots .tk-dot.office_hours { --evc: #1d7a52; } .tk-row.ev.event .tk-dot, .tk-chip.ev.event, .tk-dots .tk-dot.event { --evc: #a66a12; }
.tk-row.ev .tk-dot { background: var(--evc); } .tk-chip.ev { background: color-mix(in srgb, var(--evc) 14%, var(--surface)); border-left: 3px solid var(--evc); }
@media (max-width: 900px) { .tkpage.cal { height: auto; } .tk-bar { grid-template-columns: 1fr; } .tk-bar .tk-filters, .tk-monthnav { justify-self: start; } .tkpage.cal .tk-grid { min-height: 420px; } .tkpage.cal .panel { height: auto; } }

.tk-tag { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 1px 6px; border-radius: 5px; margin-right: 8px; vertical-align: 1px; background: var(--accent-soft); color: var(--accent); }
.tk-tag.shift { background: color-mix(in srgb, #3b5ba5 16%, var(--surface)); color: #3b5ba5; } .tk-tag.office_hours { background: color-mix(in srgb, #1d7a52 16%, var(--surface)); color: #1d7a52; } .tk-tag.event { background: color-mix(in srgb, #a66a12 16%, var(--surface)); color: #8a560b; }
 .tk-typeopt { display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 500; }
.tk-typeopt .tk-dot { margin: 0; --evc: var(--accent); background: var(--evc); } .tk-typeopt.shift .tk-dot { --evc: #3b5ba5; } .tk-typeopt.office_hours .tk-dot { --evc: #1d7a52; } .tk-typeopt.event .tk-dot { --evc: #a66a12; }

/* chart hover */
.chartwrap { position: relative; }
.chart .hit { fill: transparent; cursor: default; outline: none; } .chart .hit:hover, .chart .hit:focus { fill: color-mix(in srgb, var(--accent) 7%, transparent); }
.chart .col { transition: fill .12s; } .chart .col.hl { fill: var(--accent); } .chart .dot.hl { fill: var(--accent); }
.ctip { position: absolute; z-index: 5; transform: translate(-50%, calc(-100% - 8px)); background: var(--ink); color: var(--surface); border-radius: 8px; padding: 6px 10px; font-size: 12px; line-height: 1.35; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .1s; box-shadow: 0 6px 18px -6px rgba(0,0,0,.4); }
.ctip.on { opacity: 1; } .ctip b { display: block; font-weight: 600; } .ctip span { opacity: .85; }

/* who a task is for */
.tk-assign { display: grid; gap: 6px; } .tk-assign-l { font-size: 12.5px; color: var(--ink-2); font-weight: 500; }
.tk-picks { display: flex; flex-wrap: wrap; gap: 6px; min-height: 28px; align-items: center; }
.tk-pick { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 10px; border-radius: 999px; font-size: 13px; background: var(--accent-soft); color: var(--accent-strong); }
.tk-pick.team { background: color-mix(in srgb, var(--mark) 25%, var(--surface)); color: var(--ink); }
.tk-pick button { border: 0; background: transparent; cursor: pointer; font-size: 15px; line-height: 1; padding: 0 6px; border-radius: 50%; color: inherit; } .tk-pick button:hover { background: rgba(0,0,0,.08); }

.wl-btn.tk-plusbtn { width: 36px; height: 36px; padding: 0; font-size: 22px; line-height: 1; display: inline-grid; place-items: center; }
.tk-panelhead { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.tk-day.sel { outline-offset: -2px; }
.tkpage.cal { box-sizing: border-box; padding-bottom: 16px; }

/* compact calendar controls */
.tk-bar { min-height: 44px; }
.tk-bar .wl-btn, .tk-bar .wl-select { height: 32px; padding: 0 11px; font-size: 13px; box-sizing: border-box; }
.tk-bar .wl-select { padding-right: 26px; width: auto; min-width: 0; }
.tk-bar .wl-btn.wl-btn--quiet { padding: 0 8px; }
.tk-bar .wl-check { font-size: 13px; }
.tk-bar .tab { font-size: 14px; }
.tk-monthnav { gap: 6px; } .tk-monthnav h2 { font-size: 16px; min-width: 130px; }
.tk-monthnav .wl-btn.tk-sq { width: 26px; padding: 0; }
.tk-bar .tk-filters { gap: 10px; }
.wl-btn.tk-plusbtn { width: 32px; height: 32px; font-size: 20px; }
/* the day card: small until opened */
.tk-daypanel { padding: 10px 12px; }
.tk-daypanel .tk-panelhead { align-items: center; }

.tk-daypanel.open .tk-list, .tk-daypanel.open > p { margin-top: 10px; }

/* one small filter button, a month picker, and a day card as tall as the calendar */
.tk-bar .tk-sq, .tk-sq { width: 26px; height: 26px; min-width: 0; padding: 0; font-size: 14px; line-height: 1; display: inline-grid; place-items: center; }
.tk-monthnav { gap: 4px; }
.tk-monthbtn { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 8px; font: 600 16px var(--display); color: var(--ink); white-space: nowrap; }
.tk-monthbtn:hover, .tk-monthbtn[aria-expanded="true"] { background: var(--accent-soft); } .tk-monthbtn:focus-visible { outline: 2px solid var(--accent); }
.tk-caret { font-size: 12px; color: var(--ink-3); }
.tk-monthpick { position: relative; }
.tk-pickmenu { left: 50%; right: auto; transform: translateX(-50%); top: 38px; min-width: 232px; padding: 10px; gap: 8px; }
.tk-pickyear { display: flex; align-items: center; justify-content: space-between; } .tk-pickyear b { font: 600 15px var(--display); }
.tk-pickgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.tk-pickm { all: unset; box-sizing: border-box; cursor: pointer; text-align: center; padding: 8px 0; border-radius: 8px; font-size: 13.5px; } .tk-pickm:hover, .tk-pickm:focus-visible { background: var(--accent-soft); } .tk-pickm.on { background: var(--accent); color: #fff; }
.tk-bar .wl-btn.tk-iconbtn { width: 32px; padding: 0; position: relative; display: inline-grid; place-items: center; }
.tk-ico { display: inline-grid; place-items: center; }
.tk-badge { position: absolute; top: -5px; right: -5px; min-width: 15px; height: 15px; padding: 0 4px; box-sizing: border-box; border-radius: 999px; background: var(--accent); color: #fff; font: 600 12px/15px var(--body, inherit); font-style: normal; text-align: center; }
.tk-filtermenu { min-width: 230px; padding: 12px; gap: 12px; }
.tk-fgroup { display: grid; gap: 8px; } .tk-flabel { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.tk-filtermenu .wl-select { width: 100%; }
.tk-panelbtns { display: flex; align-items: center; gap: 6px; }
.tk-daypanel { padding: 16px 18px; }
@media (max-width: 900px) { .tkpage.cal .panel { contain: none; overflow-y: visible; } }

/* time of day */
.tk-tfield { display: grid; gap: 5px; align-content: start; } .tk-tl { font-size: 12.5px; color: var(--ink-2); font-weight: 500; }
.tk-timewrap { position: relative; }
.tk-timeinput { padding-right: 42px; } .tk-timeinput.bad { border-color: var(--bad); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad) 18%, transparent); }
.tk-clockbtn { all: unset; box-sizing: border-box; cursor: pointer; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: var(--ink-3); }
.tk-clockbtn:hover, .tk-clockbtn[aria-expanded="true"] { background: var(--accent-soft); color: var(--accent); } .tk-clockbtn:focus-visible { outline: 2px solid var(--accent); } .tk-clockbtn:disabled { opacity: .4; cursor: default; background: none; }
.tk-timepop { position: absolute; z-index: 60; left: 0; top: calc(100% + 6px); display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px 4px; width: 236px; padding: 10px; background: var(--raise); border-radius: 14px; box-shadow: 0 12px 36px rgba(0,0,0,.2), 0 0 0 1px var(--line); }
.tk-timepop.up { top: auto; bottom: calc(100% + 6px); }
.tk-col { display: flex; flex-direction: column; gap: 2px; max-height: 188px; overflow-y: auto; scrollbar-width: thin; padding-right: 2px; }
.tk-opt { all: unset; box-sizing: border-box; cursor: pointer; text-align: center; padding: 7px 0; border-radius: 8px; font-size: 14px; color: var(--ink); flex: none; }
.tk-opt:hover, .tk-opt:focus-visible { background: var(--accent-soft); } .tk-opt.on { background: var(--accent); color: #fff; font-weight: 600; }
.tk-popfoot { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; padding-top: 6px; border-top: 1px solid var(--line); }
.tk-popfoot .wl-btn { height: 32px; padding: 0 14px; font-size: 13px; }

/* charts fill their card */
.dbody > .chartbox { position: absolute; inset: 0; } .chartbox .chartwrap { width: 100%; height: 100%; } .chartbox .chart { width: auto; height: auto; max-width: none; }
@media (max-width: 1000px) { .dbody > .chartbox { position: relative; inset: auto; height: 240px; } }

/* Nothing on a dashboard card ever scrolls sideways or spills out; only lists scroll, and only up and down. */
.dbody { overflow: hidden; container-type: size; }
.dbody.k-tasks, .dbody.k-hbar { overflow-x: hidden; overflow-y: auto; }
.dbody > .donutwrap, .dbody > .ringwrap { height: 100%; min-height: 0; flex-wrap: nowrap; }
.ringwrap { flex-direction: column; justify-content: center; text-align: center; gap: 8px; }
.ringwrap .ring { flex: 1 1 0; min-height: 0; width: 100%; height: auto; max-height: 100%; }
.ringwrap > .muted { flex: none; font-size: 12.5px; }
.donutwrap { flex-direction: column; justify-content: center; }
.donutwrap .donut { flex: 1 1 0; min-height: 0; width: 100%; height: auto; max-height: 100%; }
.donutwrap .legend { flex: none; width: 100%; max-height: 45%; overflow-y: auto; }
@container (min-width: 360px) { .donutwrap { flex-direction: row; } .donutwrap .donut { flex: 1 1 50%; width: auto; height: 100%; min-width: 0; } .donutwrap .legend { flex: 1 1 50%; width: auto; max-height: 100%; } }
@media (max-width: 1000px) { .dbody { overflow: visible; container-type: normal; } .dbody > .donutwrap, .dbody > .ringwrap { height: auto; } .ringwrap .ring, .donutwrap .donut { width: 160px; height: 160px; flex: none; margin: 0 auto; } }
.chartbox { overflow: hidden; }

/* calendar: the month takes two thirds, the day card one third; on a phone-sized window the card drops below. */
.tkpage.cal .tk-split:not(.solo) { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
@media (max-width: 900px) {
  .tkpage.cal .tk-split:not(.solo) { grid-template-columns: minmax(0, 1fr); }
  .tkpage.cal .panel { contain: none; overflow-y: visible; height: auto; }
}

/* contract and signed documents on a rate card */
.docscard { display: grid; gap: 10px; }
.docscard .mhead { align-items: flex-start; gap: 12px; }
.docrow { display: flex; gap: 12px; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid var(--line, rgba(0,0,0,.08)); }
.docmain { display: grid; gap: 2px; min-width: 0; flex: 1 1 260px; }
.doctitle { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; overflow-wrap: anywhere; }
.doctitle .chip { margin-left: 4px; }
.chip.shared { background: color-mix(in srgb, var(--accent, #2f6f5e) 15%, transparent); color: var(--accent, #2f6f5e); }
.docact { display: flex; gap: 4px; flex-wrap: wrap; }
.docform { display: grid; gap: 10px; padding: 10px 0; }
.docrow.editing { display: block; }
.docshare { display: flex; align-items: center; gap: 8px; }
.docform label:not(.docshare) { display: grid; gap: 4px; font-size: 12.5px; color: var(--ink-2); }
.docform .rinput > label { flex: 1 1 160px; }
.docform .wl-input, .docform .wl-select { width: 100%; }

/* the finished price sheet */
.sheetwrap { display: grid; gap: 22px; margin: 6px 0 14px; }
.sheetsvc h3 { margin: 0 0 8px; font-size: 16px; }
.sheet { width: 100%; border-collapse: collapse; }
.sheet th { text-align: left; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2, #5b7573); font-weight: 600; padding: 6px 12px 8px 0; border-bottom: 1px solid var(--line, #d9e2e0); white-space: nowrap; }
.sheet td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--line, #e6ecea); vertical-align: top; }
.sheet td small, .sheetfee small { display: block; color: var(--ink-2, #5b7573); font-size: 12.5px; margin-top: 2px; }
.sheet td.none { color: var(--ink-2, #8a9d9b); }
.sheet tbody tr:last-child td { border-bottom: 0; }
.sheetfees { margin-top: 10px; }
.sheetsub { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2, #5b7573); font-weight: 600; margin-bottom: 2px; }
.sheetfee { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line, #e6ecea); }
.sheetfee:last-child { border-bottom: 0; }
.sheetfee b { white-space: nowrap; }
.sheetnote { margin: 0 0 8px; }
.actions.quiet { margin-top: 4px; }

/* phone: the menu folds into one bar with a button */
.navtoggle { display: none; }
.navlist { display: contents; }
@media (max-width: 900px) {
  .rail { flex-wrap: nowrap; justify-content: space-between; position: sticky; top: 0; z-index: 30; }
  .rail .navtoggle { display: inline-flex; align-items: center; gap: 12px; margin-left: auto; background: transparent; border: 0; color: inherit; font: inherit; font-weight: 600; padding: 8px 4px 8px 10px; min-height: 44px; cursor: pointer; border-radius: 10px; }
  .navnow { max-width: 42vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; opacity: .85; }
  .burger { display: inline-grid; gap: 4px; width: 20px; }
  .burger i { display: block; height: 2px; border-radius: 2px; background: currentColor; transition: transform .18s, opacity .18s; }
  .rail.open .burger i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .rail.open .burger i:nth-child(2) { opacity: 0; }
  .rail.open .burger i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .rail .navlist { display: none; }
  .rail.open { flex-wrap: wrap; max-height: 100vh; overflow-y: auto; }
  .rail.open .navlist { display: flex; flex-direction: column; flex: 0 0 100%; gap: 2px; padding: 8px 0 12px; }
  .rail.open .navlist .nav { width: 100%; padding: 12px 10px; min-height: 44px; }
  .rail.open .navlist .spacer { display: none; }
  .rail.open .navlist .who { display: block; padding: 10px 12px; }
}

/* ── wl-fold: a section of a card that folds to its heading; open on a desktop, closed on a phone (set by the page) ── */
.wl-fold > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--sp-3); } .wl-fold > summary::-webkit-details-marker { display: none; }
.wl-fold > summary > * { margin: 0; } .wl-fold > summary::after { content: "▾"; color: var(--ink-3); font-size: var(--fs-2); } .wl-fold:not([open]) > summary::after { content: "▸"; }
.wl-fold > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-chip); }
.wl-fold[open] > summary { margin-bottom: var(--sp-4); }
/* the lot-then-unit picker on an order line (reserveBox); its two fields and the typed row share one column */
.unitpick { display: grid; gap: var(--sp-4); margin-top: var(--sp-4); } .unitpick .wl-select { width: 100%; }

/* phone: tables scroll instead of crushing their words */
@media (max-width: 900px) { .shell { grid-template-rows: auto 1fr; } .rail { align-self: start; } }

/* phones: every table becomes a stack of cards, so nothing ever scrolls sideways */
@media (max-width: 720px) {
  .tablewrap, .tablewrap.narrow-cols { overflow: visible; background: none; box-shadow: none; border-radius: 0; }
  .tablewrap table, .tablewrap tbody, .tablewrap.narrow-cols table { display: block; width: 100%; table-layout: auto; }
  .tablewrap thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tablewrap tbody tr { display: grid; gap: 8px; background: var(--surface); border-radius: 14px; box-shadow: var(--shadow-card); padding: 14px 16px; margin: 0 0 10px; border: 0; }
  .tablewrap td, .tablewrap.narrow-cols td { display: grid; grid-template-columns: minmax(86px, 36%) minmax(0, 1fr); gap: 10px; align-items: start; width: auto !important; min-width: 0; padding: 0; border: 0; white-space: normal; overflow-wrap: anywhere; text-align: left; }
  .tablewrap td::before { content: attr(data-label); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2, #5b7573); padding-top: 3px; }
  .tablewrap td[data-label=""] { grid-template-columns: minmax(0, 1fr); } .tablewrap td[data-label=""]::before { display: none; }
  .tablewrap td:first-child { grid-template-columns: minmax(0, 1fr); font-size: 16px; } .tablewrap td:first-child::before { display: none; }
  .tablewrap td.none { display: none; }
  .tablewrap td > * { min-width: 0; max-width: 100%; }
  .srcell { min-width: 0; }
  .tablewrap tr.clickable { cursor: pointer; }
  .sheet td { border: 0; }
}
@media (max-width: 720px) { .sheet td > * { grid-column: 2; } .sheet td > small { margin-top: -6px; } }
@media (max-width: 560px) { .dgrid:not(.editing) { grid-auto-flow: row dense; } }

/* phones: tapping a card gives one calm, whole-card cue (no grey blocks left behind by a sticky hover) */
@media (max-width: 720px) {
  .tablewrap tbody tr[data-row]:hover td, .tablewrap tbody tr[aria-selected="true"] td, .tablewrap tr.clickable:hover td { background: transparent !important; }
  .tablewrap tr.clickable:hover { background: var(--surface); }
  .tablewrap tbody tr[aria-selected="true"] { box-shadow: var(--shadow-card), 0 0 0 2px var(--accent); }
  .tablewrap tbody tr[data-row], .tablewrap tr.clickable { -webkit-tap-highlight-color: transparent; transition: transform .08s; }
  .tablewrap tbody tr[data-row]:active, .tablewrap tr.clickable:active { transform: scale(.985); }
}
tr, .dcard.tile, .wl-btn, .nav, .tab { -webkit-tap-highlight-color: transparent; }
/* tapping a row, card or button never leaves text selected (the blue highlight iOS and Firefox paint on touch) */
tr[data-row], tr.clickable, .dcard.tile, .tab, .nav, .wl-btn, .navtoggle { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
@media (max-width: 720px) { .tablewrap td { overflow-wrap: break-word; } }

/* desktop menu: it opens a touch when the pointer is over it, and the item under the pointer slides out.
   A short delay on the way in and a slightly longer one on the way out keeps it calm while the pointer travels between buttons.
   Nothing changes the buttons' own positions (no gap change), so the item under the pointer never shifts out from under it. */
@media (min-width: 901px) and (hover: hover) {
  .rail { width: 224px; z-index: 25; transition: width .34s cubic-bezier(.25,.8,.3,1) .12s, box-shadow .34s ease .12s; }
  .rail:is(:hover,.hov) { width: 240px; box-shadow: 10px 0 30px rgba(6,18,20,.18); transition-delay: .06s; }
  .nav { transition: transform .32s cubic-bezier(.25,.8,.3,1) .08s, background-color .24s ease .08s, color .24s ease .08s; }
  .nav svg { transition: opacity .24s ease .08s, transform .32s cubic-bezier(.25,.8,.3,1) .08s; }
  .rail .nav:is(:hover,.hov) { transform: translateX(7px); background-color: rgba(255,255,255,.09); color: #fff; transition-delay: .04s; }
  .rail .nav:is(:hover,.hov) svg { opacity: 1; transform: scale(1.08); transition-delay: .04s; }
  .rail .nav[aria-current="page"]:is(:hover,.hov)::before { transform: translateX(-7px); transition-delay: .04s; }
  .nav[aria-current="page"]::before { transition: transform .32s cubic-bezier(.25,.8,.3,1) .08s; }
  .rail .nav:focus-visible { transform: translateX(7px); transition-delay: 0s; }
}

.pill.ok { background: none; padding: 0; border-radius: 0; color: inherit; }
.narrow { margin-inline: 0; }
.linkish { color: var(--accent); font-weight: 600; }
@media (max-width: 720px) { .sheet td:first-child > * { grid-column: 1; } }

/* Tap targets: inline text links in dashboard cards */

/* Reminder pop-ups on phones: one slim bar, kept clear of the page edge and the walkthrough */
@media (max-width:720px){
  #tk-pops{ left:8px; right:8px; bottom:72px; width:auto; }
  .tk-pop{ padding:10px 12px; gap:2px; }
  .tk-pop-b{ margin-top:6px; display:grid; grid-template-columns:repeat(4,1fr); gap:4px; } .tk-pop-b .wl-btn{ padding:0 4px; min-height:36px; font-size:13px; justify-content:center; }
}

body.gated #tk-pops, body.wl-guiding #tk-pops{ display:none; }

/* List pages: Find box and sortable headings */
.tfind{ display:flex; align-items:center; gap:10px; margin:0 0 10px; } .tfind .wl-input{ max-width:320px; width:100%; }
th.sortable{ cursor:pointer; user-select:none; white-space:nowrap; } th.sortable:hover{ color:var(--accent); }
th.sortable::after{ content:"↕"; margin-left:6px; font-size: 12px; opacity:.35; }
th.sortable[aria-sort=ascending]::after{ content:"↑"; opacity:1; color:var(--accent); } th.sortable[aria-sort=descending]::after{ content:"↓"; opacity:1; color:var(--accent); }
tr[hidden]{ display:none !important; }
@media (max-width:720px){ .tfind .wl-input{ max-width:none; } th.sortable::after{ content:none; } }
.tfind .wl-input{ height:38px; }

/* Client page numbers that open a list */
.mini .stat.go{ cursor:pointer; position:relative; transition:background-color .15s; } .mini .stat.go::after{ content:"›"; position:absolute; right:10px; top:8px; color:var(--ink-3); }
.mini .stat.go:hover, .mini .stat.go:focus-visible{ background:var(--accent-soft); }

/* Appointments tab and dashboard card */

.apcard .tk-mini li{ grid-template-columns:74px 1fr auto; }

/* Client website */
.shell.client .brand b{ display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; letter-spacing:.14em; text-transform:uppercase; font-size:15px; }
.ctiles{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-bottom:22px; }
.ctile{ all:unset; box-sizing:border-box; cursor:pointer; display:grid; gap:4px; padding:18px 20px; border-radius:14px; background:var(--raise); box-shadow:var(--shadow-card); transition:transform .15s, box-shadow .15s; -webkit-tap-highlight-color:transparent; -webkit-user-select:none; user-select:none; }
.ctile:hover, .ctile:focus-visible{ transform:translateY(-2px); outline:2px solid var(--accent-soft); }
.ctile .cl{ font-size:13px; color:var(--ink-3); } .ctile .cv, .cbig .cv{ font:600 34px var(--display); font-variant-numeric:tabular-nums; line-height:1.15; } .ctile .ch{ font-size:12px; color:var(--ink-3); }
.cbig{ margin:6px 0 14px; } .cbig .cv{ font-size:40px; }
.csec{ margin:0 0 22px; } .csec-h{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; } .csec-h h2, .csub{ margin:0; font:600 17px var(--display); } .csub{ margin:18px 0 8px; font-size:15px; }
.clist{ list-style:none; margin:0; padding:0; background:var(--raise); border-radius:14px; box-shadow:var(--shadow-card); overflow:hidden; }
.clist li + li{ border-top:1px solid var(--line-soft); }
.crow{ all:unset; box-sizing:border-box; cursor:pointer; width:100%; display:grid; grid-template-columns:120px minmax(0,1fr) 90px auto; gap:12px; align-items:center; padding:12px 16px; -webkit-tap-highlight-color:transparent; -webkit-user-select:none; user-select:none; }
.crow:hover, .crow:focus-visible{ background:var(--accent-soft); }
.cdoc{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 16px; flex-wrap:wrap; } .cdoc-t{ display:grid; gap:2px; min-width:0; } .cdoc-b{ display:flex; gap:8px; }
td.neg{ color:var(--bad); } td.pos{ color:var(--ok, #1d7a4d); }
@media (max-width:900px){ .ctiles{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:720px){
  .ctiles{ gap:10px; } .ctile{ padding:14px 14px; } .ctile .cv{ font-size:28px; }
  .crow{ grid-template-columns:minmax(0,1fr) auto; gap:2px 10px; } .crow .muted:nth-child(2){ grid-column:1; } .crow .fine{ grid-column:1; } .crow .pill{ grid-column:2; grid-row:1 / span 2; }
  .cdoc-b .wl-btn{ min-height:40px; }
}
.panel .csub{ margin-top:24px; }
@media (max-width:720px){ .ctiles .ctile:last-child:nth-child(odd){ grid-column:1 / -1; } }

/* Tasks tab date changer */
.tk-daynav { display: flex; align-items: center; gap: 6px; }
.tk-daynav .tk-dpick { width: auto; min-width: 0; height: 36px; padding: 0 8px; }

@media (max-width: 700px) { .tk-daynav { flex-wrap: wrap; } }

/* Appointments are a kind of calendar entry */
.tk-row.ev.appointment .tk-dot, .tk-chip.ev.appointment, .tk-typeopt.appointment .tk-dot, .tk-dots .tk-dot.appointment { --evc: #7a4fa3; }
.tk-tag.appointment { background: color-mix(in srgb, #7a4fa3 16%, var(--surface)); color: #6a4192; }
.tk-chip.ev.appointment.done, .tk-row.ev.appointment.done .tk-title { opacity: .6; text-decoration: line-through; }
.tk-row .tk-minibtn { height: 30px; padding: 0 10px; font-size: 12.5px; align-self: center; white-space: nowrap; }
/* On phones the filter and month pop-ups open from the button's left edge so they never run off the screen */
@media (max-width: 900px) { .tk-bar .dsettings { position: relative; } .tk-bar .wl-menu { right: auto; left: 0; max-width: calc(100vw - 32px); } }
.tk-two { align-items: start; } .tk-hint { margin: -4px 0 0; }
.tk-two > label { align-content: start; align-self: start; }

/* Client portal: deliveries, invoices, prices */
.shell.client .sheetwrap { display: grid; gap: 22px; max-width: 860px; } .shell.client .sheetnote { margin-top: 4px; }

/* View as client */
.viewbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: color-mix(in srgb, #a66a12 14%, var(--surface)); border-radius: 12px; padding: 10px 14px; margin-bottom: 16px; font-size: 14px; }
.viewbar .webaccess { margin-top: 16px; display: grid; gap: 10px; } .webaccess h4 { margin: 0; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }
.websw { align-items: flex-start !important; } .websw span { display: grid; gap: 1px; } .websw small { font-weight: 400; }
.cset h3{margin:0 0 4px}
.cset .webaccess + .webaccess{margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
/* Change password (client My account): fields line up at the top, hint under its own field, button below */
.pwform{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px;align-items:start}
.pwform > label{display:grid;gap:6px;align-content:start}
.pwform .actions{grid-column:1 / -1;margin:0}
@media (max-width:640px){.pwform{grid-template-columns:1fr}}

/* Free units on My prices */
.freeunit{display:grid;gap:8px;padding:12px 0;border-top:1px solid var(--line)}
.freeunit:first-of-type{border-top:0}
.freeunit small{display:block;color:var(--ink-3);font-size:13px;margin-top:2px}
.freeunit small.gone{color:var(--warn)}
.freeunit .meter{height:8px;border-radius:99px;background:var(--accent-soft);overflow:hidden}
.freeunit .meter i{display:block;height:100%;background:var(--accent);border-radius:99px}

/* Cost per order, charge mix and the quarterly summary (client website) */
.insights{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.icard{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius,14px);padding:18px;display:grid;gap:12px;align-content:start}
.icard h2{margin:0;font-size:16px}
.icard-h{display:flex;align-items:center;justify-content:space-between;gap:10px}
.icard-h .wl-select{height:32px;width:auto;padding:0 28px 0 10px;font-size:13px}
.icard .chartbox{position:relative;height:190px}
.shell.client .icard-h .wl-select{height:32px}
.icard .big{font-size:32px;font-weight:700;letter-spacing:-.02em}
.icard .big small{font-size:14px;font-weight:500;color:var(--ink-3)}
.chg{font-size:13px;font-weight:600}.chg.good{color:var(--ok)}.chg.bad{color:var(--warn)}.chg.flat{color:var(--ink-3);font-weight:500}
.mixwrap{display:grid;gap:12px}
.mixbar{display:flex;height:14px;border-radius:99px;overflow:hidden;background:rgba(100,116,139,.15)}
.mixbar i,.mixkey i{display:block}
.m1{background:#0f766e}.m2{background:#3b82a6}.m3{background:#c98a2b}.m4{background:#8a6bb0}
.mixkey{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.mixkey li{display:grid;grid-template-columns:12px 1fr auto 52px;gap:8px;align-items:center;font-size:14px}
.mixkey li i{width:12px;height:12px;border-radius:3px}
.mixkey small{text-align:right;color:var(--ink-3)}
.ctile.static{cursor:default}
.qsum .ctiles{margin:12px 0 18px}
@media print{
  .rail,.viewbar,.noprint,.toast,#fb-btn,.navtoggle,.navclose,.navopen{display:none !important}
  .shell,.shell.client{display:block !important}
  .main{padding:0 !important;max-width:none !important}
  .ctile,.icard{break-inside:avoid;box-shadow:none !important}
  body{background:#fff !important}
}

/* Summary period filter */
.pbar{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:flex-end;margin:4px 0 14px}
.pbar label{display:grid;gap:4px;font-size:13px;color:var(--ink-3)}
.pbar .pdates{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.pbar .pkeep{display:flex;gap:10px;align-items:center;margin-left:auto}
@media (max-width:640px){.pbar{align-items:stretch}.pbar>label,.pbar .pdates label{flex:1 1 100%}.pbar .pkeep{margin-left:0;flex:1 1 100%}}

/* Needs attention and slow-moving stock (client Overview) */
.attn,.aged{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius,14px);padding:16px 18px;display:grid;gap:10px}
.attn .csec-h,.aged .csec-h{margin:0}
.attn .clist,.aged .clist{box-shadow:none}
.agedbands{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.agedbands li{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:baseline;font-size:14px}
.agedbands small{color:var(--ink-3);min-width:76px;text-align:right}

/* Client health */
.hsum { display: flex; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.hsum-i { display: flex; align-items: baseline; gap: 8px; padding: 10px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.hsum-i b { font-size: 1.5rem; } .hsum-i.bad b { color: var(--bad); } .hsum-i.warn b { color: var(--warn); } .hsum-i.ok b { color: var(--ok); }
.hsig { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; } .hsig li.attention { color: var(--bad); }
.chealth td { vertical-align: top; } .hcard .tk-mini li { cursor: pointer; display: flex; gap: 8px; align-items: baseline; }
.holdbox { margin-top: 14px; padding: 12px 14px; display: grid; gap: 6px; }
.hsum-i.ok, .hsum-i.warn, .hsum-i.bad { background: var(--surface); }

/* Reading a legal document in a modal */
.docmodal { width: min(760px, calc(100vw - 24px)); max-height: calc(100vh - 32px); display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.docmodal header { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); } .docmodal header h2 { margin: 0; font-size: 1.1rem; }
.docmodal footer { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--line); flex-wrap: wrap; } .docmodal footer .grow { flex: 1; }
.docbody { overflow-y: auto; padding: 8px 22px 22px; line-height: 1.65; font-size: 14.5px; min-height: 200px; } .docbody:focus { outline: none; }
.docbody h1 { font-size: 1.4rem; } .docbody h2 { margin-top: 1.8em; font-size: 1.15rem; } .docbody a { color: var(--accent); }
.docbody blockquote { margin: 1em 0; padding: .1em 1em; border-left: 3px solid var(--line); color: var(--ink-2); }
.docbody table { border-collapse: collapse; width: 100%; font-size: 13px; display: block; overflow-x: auto; } .docbody td, .docbody th { border: 1px solid var(--line); padding: 6px 9px; text-align: left; vertical-align: top; }
.docbody hr { border: 0; border-top: 1px solid var(--line); margin: 1.6em 0; } .docbody .draft { border: 1px solid var(--warn); color: var(--warn); padding: 8px 12px; border-radius: 10px; font-size: 13px; }

/* Stock cover and expected deliveries */
.edline { display: flex; gap: 8px; margin: 6px 0; align-items: center; } .edline .wl-select { flex: 1 1 auto; min-width: 0; } .edline .wl-input { width: 110px; flex: none; }
.hadd { display: grid; gap: 10px; max-width: 560px; margin-bottom: 16px; } .hadd label, .tk-modal > label { display: grid; gap: 4px; font-size: 13px; color: var(--ink-2); }
.cover .crow { display: flex; gap: 12px; align-items: center; justify-content: space-between; }

/* No rubber-band bounce at the ends of the page: it made the sticky sidebar slide for a moment. */
html, body { overscroll-behavior-y: none; }

/* Client page: overview card */
.ovcard { display: grid; gap: 18px; align-content: start; }
.ovcontact { display: grid; gap: 3px; }
.ovk { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.ovname { font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.ovlink { color: var(--link, var(--accent, inherit)); overflow-wrap: anywhere; }
.ovfacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 14px 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.ovfact { display: grid; gap: 2px; min-width: 0; } .ovv { overflow-wrap: anywhere; }
.ovactions { padding-top: 16px; border-top: 1px solid var(--line); margin: 0; }

/* ── Menu groups and the signed-in person (all themes; colours come from tokens) ── */
.navgroup { font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--rail-dim); padding: 16px 12px 7px; }
.navlist > .navgroup:first-child { padding-top: 2px; }
.who-id { display: flex; gap: 10px; align-items: center; min-width: 0; }
.who-av { width: 34px; height: 34px; border-radius: 50%; flex: none; overflow: hidden; display: block; box-shadow: 0 0 0 2px rgba(255,255,255,.14); } .who-av svg { display: block; image-rendering: pixelated; }
.who-mono { width: 30px; height: 30px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); font: 600 12px/1 var(--font); letter-spacing: .02em; }
.who-txt { display: grid; gap: 2px; min-width: 0; }
.who-role { font-size: 12px; color: var(--rail-dim); }
.who .sample { margin-top: 8px; }
.who-txt b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The desktop menu always fits the window: it tightens as the window gets shorter, and only scrolls (with no visible bar) when it still cannot fit. */
@media (min-width: 901px) { .rail { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; -ms-overflow-style: none; } .rail::-webkit-scrollbar { display: none; width: 0; height: 0; } }
@media (min-width: 901px) and (max-height: 980px) {
  .rail { padding-top: 18px; padding-bottom: 12px; } .brand { padding-bottom: 16px; }
  .rail .nav { padding-block: 6px; } .navgroup { padding: 11px 12px 5px; } .navlist > .navgroup:first-child { padding-top: 0; }
  .who { margin-top: 4px; padding-top: 8px; }
}
@media (min-width: 901px) and (max-height: 820px) {
  .rail { padding-top: 14px; padding-bottom: 8px; gap: 0; } .brand { padding-bottom: 8px; }
  .rail .nav { padding-block: 4px; } .navgroup { padding: 8px 12px 3px; }
  .who { padding-bottom: 2px; } .who-av, .who-mono { width: 28px; height: 28px; }
}
/* Average line on the daily bar chart */
.chart .avg { stroke: var(--ink-2); stroke-width: 1.5; stroke-dasharray: 4 4; }
.chart .avglbl { fill: var(--ink-2); font-weight: 600; paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; }
/* Dashboard list rows shrink to the card instead of pushing the page sideways on phones */
.tk-mini { grid-template-columns: minmax(0, 1fr); } .hcard .tk-mini li { min-width: 0; } .hcard .tk-mini .t { flex: 1 1 auto; min-width: 0; }

/* audit fix 1: with a card open beside the list at tablet width, rows stack like phone cards; words break at spaces, not mid-word */
@media (min-width: 901px) and (max-width: 1180px) {
  .split:not(.solo) .tablewrap,.split:not(.solo) .tablewrap.narrow-cols { overflow: visible; background: none; box-shadow: none; border-radius: 0; }
  .split:not(.solo) .tablewrap table,.split:not(.solo) .tablewrap tbody,.split:not(.solo) .tablewrap.narrow-cols table { display: block; width: 100%; table-layout: auto; }
  .split:not(.solo) .tablewrap thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .split:not(.solo) .tablewrap tbody tr { display: grid; gap: 8px; background: var(--surface); border-radius: 14px; box-shadow: var(--shadow-card); padding: 14px 16px; margin: 0 0 10px; border: 0; }
  .split:not(.solo) .tablewrap td,.split:not(.solo) .tablewrap.narrow-cols td { display: grid; grid-template-columns: minmax(86px, 36%) minmax(0, 1fr); gap: 10px; align-items: start; width: auto !important; min-width: 0; padding: 0; border: 0; white-space: normal; overflow-wrap: anywhere; text-align: left; }
  .split:not(.solo) .tablewrap td::before { content: attr(data-label); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2, #5b7573); padding-top: 3px; }
  .split:not(.solo) .tablewrap td[data-label=""] { grid-template-columns: minmax(0, 1fr); } .split:not(.solo) .tablewrap td[data-label=""]::before { display: none; }
  .split:not(.solo) .tablewrap td:first-child { grid-template-columns: minmax(0, 1fr); font-size: 16px; } .split:not(.solo) .tablewrap td:first-child::before { display: none; }
  .split:not(.solo) .tablewrap td.none { display: none; }
  .split:not(.solo) .tablewrap td > * { min-width: 0; max-width: 100%; }
  .split:not(.solo) .tablewrap tr.clickable { cursor: pointer; }
}
.tablewrap td, .tablewrap th { overflow-wrap: break-word; }
.tablewrap td .id, .tablewrap td .mono { overflow-wrap: break-word; }
.tablewrap.narrow-cols td, .tablewrap.narrow-cols th { overflow-wrap: break-word; }

/* audit fix 2: on phones an opened order, client, delivery or invoice fills the screen, with Back at the top-left */
@media (max-width: 720px) {
  .main .split:not(.solo) > .panel { position: fixed; inset: 0; z-index: 60; max-height: none !important; height: 100%; border-radius: 0; box-shadow: none; padding: 0 16px 28px; overflow-y: auto; overscroll-behavior: contain; background: var(--raise); }
  .main .split:not(.solo) > .panel header:first-of-type { position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 -16px 16px; padding: 8px 16px 12px; background: var(--raise); border-bottom: 1px solid var(--line-soft); }
  .main .split:not(.solo) > .panel header:first-of-type > div:last-child { display: contents; }
  .main .split:not(.solo) > .panel header:first-of-type > div:first-child { order: 2; flex: 1 1 100%; min-width: 0; }
  .main .split:not(.solo) > .panel header:first-of-type > div:last-child > * { order: 1; }
  .main .split:not(.solo) > .panel header:first-of-type > div:last-child > :first-child { margin-left: auto; }
  .main .split:not(.solo) > .panel header:first-of-type .wl-btn[aria-label="Close detail"] { order: 0; margin-left: 0 !important; font-size: 0; min-height: 44px; padding: 0 14px 0 8px; display: inline-flex; align-items: center; border-color: transparent; background: none; box-shadow: none; }
  .main .split:not(.solo) > .panel header:first-of-type .wl-btn[aria-label="Close detail"]::after { content: "‹ Back"; font-size: 15px; font-weight: 600; color: var(--accent); }
}

/* audit fix 3: one card recipe — 14px corners, 20/22 padding; boxes inside cards use a hairline border, no shadow; two heading levels */
.card, .panel { border-radius: 14px; padding: 20px 22px; }
.card h3, .dcard h3, .panel .card h3 { margin: 0 0 10px; font: 600 16px/1.25 var(--display); letter-spacing: -.01em; color: var(--ink); }
.panel h2, .card h2.sub, .dcard h2.sub { margin: 20px 0 8px; font: 600 12px/1.3 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.hsum-i, .holdbox, .reserve, .card.soft, .mini div { border: 1px solid var(--line-soft); border-radius: 12px; box-shadow: none; }
.tablewrap td, .tablewrap th, .lot { padding-block: 12px; }
.kv { row-gap: 10px; }
/* audit fix 4: page actions live at the right end of the page head */
.head > .tools, .head > div:last-child:not(:first-child) { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wl-btn.tk-plusbtn { white-space: nowrap; padding: 0 14px; width: auto; height: 36px; font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; }
/* audit fix 5: Overview tidy */
.tk-mini .t { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: break-word; }
.chart .avglbl { text-anchor: start; }
@media (max-width: 1000px) { .dgrid .dcard:has(> .dbody.k-number) { grid-column: auto / span 1; } .dgrid .dcard.attn, .dgrid .dcard:has(.banner) { order: -1; grid-column: 1 / -1; } }
/* audit fix 6: the main action stays in view; destructive actions go last, as plain red text */
.panel .actions.pin { position: sticky; bottom: 0; background: var(--raise); padding: 12px 0; margin-top: 16px; border-top: 1px solid var(--line-soft); z-index: 2; }
.panel .actions .wl-btn.wl-btn--danger { order: 9; margin-left: auto; background: none; border-color: transparent; box-shadow: none; color: var(--bad); font-weight: 600; }
.panel .actions .wl-btn.wl-btn--danger:hover { background: transparent; text-decoration: underline; }
.panel .actions.pin .wl-btn.wl-btn--danger { margin-left: 0; }
/* audit fix 7: facts that link to their fix */
.hlink { color: var(--link, var(--accent)); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; background: none; border: 0; padding: 0; font: inherit; }
/* audit fix 8: nothing smaller than 12px; phone tap targets 44px */
th { font-size: 12px; }
.fine, .tk-meta { font-size: 12.5px; }
@media (min-width: 901px) { .muted, .head p { font-size: 13px; } .head p { font-size: 15px; } }
@media (max-width: 720px) {
  .wl-btn, .wl-input, .wl-select, .nav, .tabs button, .tfind .wl-input { min-height: 44px; }
  .tablewrap td::before { font-size: 12px; }
  .tk-mini input[type="checkbox"] { width: 22px; height: 22px; }
}
small { font-size: 12px; }
@media (max-width: 900px) { .tk-bar .tk-filters { flex-wrap: wrap; justify-self: stretch; max-width: 100%; } }

/* client page: clickable rows (recent orders) get padding so the highlight frames the text, and only show on hover or keyboard focus */
.minilist li.tile { align-items: center; padding: 8px 12px; margin-inline: -12px; border-radius: 10px; transition: background-color .12s; }
.minilist li.tile:hover { background: var(--wash); }
.minilist li.tile:focus { outline: none; background: transparent; }
.minilist li.tile:focus-visible { background: transparent; outline: 2px solid var(--accent); outline-offset: -2px; }
.minilist li.tile:hover:focus-visible { background: var(--wash); }

/* Overview cards in the Harbor look: title row with a quiet right-hand figure, rows with a status word, stock meters */
.dmeta { margin-left: auto; font: 400 12px var(--mono, ui-monospace, monospace); color: var(--ink-3); text-align: right; }
.dlink { margin-left: auto; background: none; border: 0; padding: 0; font: 600 13px var(--font); color: var(--accent); cursor: pointer; }
.dlink.cue { color: var(--ink-3); font-weight: 500; opacity: 0; transition: opacity .12s; } .dcard.tile:hover .dlink.cue, .dcard.tile:focus-visible .dlink.cue { opacity: 1; }
@media (hover: none) { .dlink.cue { opacity: 1; } }
.hlist { list-style: none; margin: 0; padding: 0; } .hlist li { padding: 12px 0; border-top: 1px solid var(--line-soft); cursor: pointer; } .hlist li:first-child { border-top: 0; padding-top: 2px; }
.hl-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; } .hl-top b { font-weight: 600; }
.hl-name { display: grid; gap: 2px; min-width: 0; } .hl-why { margin-top: 2px; font-size: 13px; color: var(--ink-2); } .hl-why.bad { color: var(--bad); }
.hl-days { display: flex; align-items: center; gap: 12px; flex: none; } .dn { font: 600 22px var(--display); font-variant-numeric: tabular-nums; } .dn.out, .dn.urgent { color: var(--bad); }
.meter { width: 96px; height: 6px; border-radius: 3px; background: var(--wash); overflow: hidden; display: inline-block; } .meter i { display: block; height: 100%; border-radius: 3px; background: var(--ok); }
.meter.low i { background: var(--warn); } .meter.urgent i, .meter.out i { background: var(--bad); }
.hl-foot { margin: 8px 0 0; }
.dcard > .hrows, .dcard .hrows { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.dhead .tk-plus { margin-left: 10px; }
.dhead .dlink + .tk-plus, .dhead .dmeta + .tk-plus { margin-left: 10px; }
.dcard .hlist li { padding: 8px 0; } .dcard .hl-name { gap: 0; } .dcard .hl-why { margin-top: 0; line-height: 1.35; }
/* Feedback #45/#46: price sheet rows had no inner padding, document rows overlapped, add-card tiles clipped their text */
.sheetsvc .tablewrap { padding: 4px 18px; box-sizing: border-box; }
.sheetsvc .sheet td, .sheetsvc .sheet th { padding-right: 16px; }
.sheetsvc .sheet td:last-child, .sheetsvc .sheet th:last-child { padding-right: 0; }
.sheetfee { min-width: 0; } .sheetfee > span { min-width: 0; overflow-wrap: anywhere; }
.docrow .doctitle, .docrow .docmain > * { line-height: 1.4; }
.docrow .docmain .muted { overflow-wrap: anywhere; }
.docrow { padding: 12px 0; }
.addcard { white-space: normal; min-width: 0; align-content: start; }
.addcard > * { min-width: 0; white-space: normal; overflow-wrap: anywhere; display: block; }

/* Reminder pop-up: shrinks to a small bell that can be dragged anywhere */
.tk-pop-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.tk-pop-min { border: 0; background: transparent; color: var(--ink-3); font-size: 20px; line-height: 1; width: 28px; height: 28px; border-radius: 8px; cursor: pointer; }
.tk-pop-min:hover { background: var(--wash); color: var(--ink); }
#tk-pops.min { width: auto; right: 16px; bottom: 80px; left: auto; display: block; } /* sits above the Feedback button */
.tk-pop-icon { position: relative; width: 52px; height: 52px; border-radius: 50%; border: 0; background: var(--accent); color: #fff; display: grid; place-items: center; cursor: grab; box-shadow: 0 6px 22px rgba(0,0,0,.28); touch-action: none; user-select: none; }
.tk-pop-icon:active { cursor: grabbing; }
.tk-pop-count { position: absolute; top: -3px; right: -3px; min-width: 20px; height: 20px; padding: 0 5px; box-sizing: border-box; border-radius: 10px; background: var(--mark); color: var(--rail, #0e2a2a); font-size: 12px; font-weight: 700; display: grid; place-items: center; }

/* note 47: stacked rows (phones, and tablet widths with a card open beside the list): the card is a smaller, squarer rectangle that matches the other
   cards, sits a hair inside the list edge, each cell has a little breathing room, and the "selected" cue is one calm tint on the whole card, not a block behind every line. */
@media (max-width: 720px) {
  .tablewrap { padding: 6px; box-sizing: border-box; }
  .tablewrap tbody tr { border-radius: var(--radius-panel, 6px); margin: 0 0 8px; padding: 12px 14px; }
  .tablewrap tbody tr:last-child { margin-bottom: 0; }
  .tablewrap tbody tr[data-row]:hover td, .tablewrap tbody tr[aria-selected="true"] td, .tablewrap tr.clickable:hover td { background: transparent !important; }
  .tablewrap tbody tr[data-row]:hover, .tablewrap tr.clickable:hover { background: var(--wash); }
  .tablewrap tbody tr[aria-selected="true"] { background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent); }
  .tablewrap td { padding: 1px 2px; border-radius: 0; }
}
@media (min-width: 901px) and (max-width: 1180px) {
  .split:not(.solo) .tablewrap { padding: 6px; box-sizing: border-box; }
  .main.locked .split > .tablewrap:first-child { padding: 6px; }
  .split:not(.solo) .tablewrap tbody tr { border-radius: var(--radius-panel, 6px); margin: 0 0 8px; padding: 12px 14px; }
  .split:not(.solo) .tablewrap tbody tr:last-child { margin-bottom: 0; }
  .split:not(.solo) .tablewrap tbody tr[data-row]:hover td, .split:not(.solo) .tablewrap tbody tr[aria-selected="true"] td, .split:not(.solo) .tablewrap tr.clickable:hover td { background: transparent !important; }
  .split:not(.solo) .tablewrap tbody tr[data-row]:hover, .split:not(.solo) .tablewrap tr.clickable:hover { background: var(--wash); }
  .split:not(.solo) .tablewrap tbody tr[aria-selected="true"] { background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent); }
  .split:not(.solo) .tablewrap td { padding: 1px 2px; border-radius: 0; }
}

/* Feedback #48: the Add client and Edit client forms sit on an even two-column grid. Each field is label, box, then its note, and a long note
   only makes its own cell taller, so the boxes in a row stay level instead of being pushed around. */
.form:has(input[name="company_name"]) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; align-items: start; padding: 20px; }
.form:has(input[name="company_name"]) > label:not(.wl-check) { align-content: start; gap: 6px; }
.form:has(input[name="company_name"]) > label:not(.wl-check) .wl-field-hint { line-height: 1.4; text-wrap: balance; }
.form:has(input[name="company_name"]) > label.wl-check { display: flex; align-items: center; gap: 10px; } .form:has(input[name="company_name"]) > label.wl-check input { width: 18px; height: 18px; margin: 0; flex: none; }
.form:has(input[name="company_name"]) > .wl-check, .form:has(input[name="company_name"]) > div, .form:has(input[name="company_name"]) > span, .form:has(input[name="company_name"]) > p { grid-column: 1 / -1; }
.form:has(input[name="company_name"]) > .wl-check { padding-top: 2px; }
.form:has(input[name="company_name"]) > button { justify-self: start; }
.form:has(input[name="company_name"]) > div { align-items: center; padding-top: 4px; }
@media (max-width: 560px) { .form:has(input[name="company_name"]) { grid-template-columns: minmax(0, 1fr); } }

/* Feedback #49: an empty-state card sits at the top of its box (it was stretching its rows to fill a tall card, which pushed the button far down and made it huge),
   with the button right under the text, normal button size, and a drop shadow so it reads as a button. */
.emptystate { align-content: start; }
.emptystate .wl-btn { height: 40px; width: auto; align-self: start; justify-self: center; }
:root:root:root .emptystate .wl-btn.wl-btn--primary { box-shadow: 0 1px 2px rgba(16, 24, 24, .22), 0 4px 10px rgba(16, 24, 24, .18); }
:root:root:root .emptystate .wl-btn.wl-btn--primary:hover { box-shadow: 0 2px 3px rgba(16, 24, 24, .24), 0 6px 14px rgba(16, 24, 24, .20); }
:root:root:root .emptystate .wl-btn.wl-btn--primary:active { box-shadow: 0 1px 1px rgba(16, 24, 24, .22); transform: translateY(1px); }

/* create dialogs: New order, Add product, Receive stock */
.ncf-modal { width: min(600px, 100%); } .ncf-modal .stack { display: grid; gap: 12px; }
.wl-field { display: grid; gap: 4px; font-size: 13px; color: var(--ink-2); } .wl-field .wl-field-hint { color: var(--ink-3); font-size: 12px; }
.ncf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ncf-line { display: flex; gap: 8px; align-items: center; } .ncf-line select.wl-select { flex: 1 1 0; width: auto; min-width: 0; } .ncf-line input.ncf-qty { flex: 0 0 84px; width: 84px; min-width: 0; } .ncf-line .wl-btn { flex: none; } .ncf-modal .wl-btn.wl-btn--quiet { justify-self: start; }
.ncf-set { border: 1px solid var(--line, rgba(0,0,0,.12)); border-radius: 12px; padding: 12px; display: grid; gap: 10px; margin: 0; } .ncf-set legend { font-size: 13px; color: var(--ink-2); padding: 0 6px; }
.ncf-radios { display: grid; gap: 8px; } .ncf-radio { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line, rgba(0,0,0,.12)); border-radius: 12px; cursor: pointer; } .ncf-radio span { display: grid; gap: 2px; } .ncf-radio input { margin-top: 3px; accent-color: var(--accent); }
.ncf-modal .wl-textarea { font: inherit; resize: vertical; }

/* Feedback #50: each "how is this product tracked" choice is one even row: title and note on the left, the round check centred on the right of the same row. */
.ncf-modal .ncf-radio { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px; }
.ncf-modal .ncf-radio > span { order: 1; flex: 1 1 auto; min-width: 0; gap: 3px; }
.ncf-modal .ncf-radio > input { order: 2; flex: none; width: 20px; height: 20px; margin: 0; }
.ncf-modal .ncf-radio:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.ncf-modal .ncf-radio:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

.ncf-tags { display: flex; flex-wrap: wrap; gap: 6px 16px; } .ncf-tags .wl-check { display: inline-flex; gap: 6px; align-items: center; }
.matbox { margin: 14px 0; } .matlist { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; }
.matrow { display: flex; gap: 8px; align-items: center; } .matrow .matname { flex: 1; min-width: 0; } .matadd { display: flex; gap: 8px; align-items: center; }

/* Stock warning on orders, and the Add note / Add tracking links */
.stockwarn, .ncf-warn { border: 1px solid color-mix(in srgb, var(--warn) 55%, var(--line)); background: color-mix(in srgb, var(--warn) 12%, var(--surface)); border-radius: 10px; padding: 10px 12px; margin: 12px 0; display: grid; gap: 4px; font-size: 13.5px; color: var(--ink); }
.stockwarn ul, .ncf-warn ul { margin: 0; padding-left: 18px; }
.ncf-warn[hidden], .odf-box[hidden] { display: none; }
.odf { display: grid; gap: 8px; margin: 4px 0 10px; }
.odf-links { display: flex; gap: 16px; }
.odf-box { display: grid; gap: 8px; } .odf-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 8px; } .odf-actions { display: flex; gap: 8px; }
.notetext { white-space: pre-wrap; }

/* Shopify card */
.shopconn { border-top: 1px solid var(--line, #e3e6e4); margin-top: 12px; padding-top: 12px; }
.shoplist { margin-top: 8px; display: grid; gap: 4px; }
.shoprow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 4px 0; }
.shoprow .chip { margin-left: 0; } .shopwhen { min-width: 110px; } .shopwhy { flex: 1 1 260px; } .shopbtns { display: inline-flex; gap: 6px; margin-left: auto; }
.shopwarn { background: color-mix(in srgb, #b45309 12%, transparent); color: var(--ink, #1c2321); border-radius: 8px; padding: 8px 10px; margin-top: 8px; }
.shopform { margin-top: 12px; }
.chip.ok { background: var(--accent-soft); color: var(--ok); }

/* Hide the side menu on a wide screen: a small arrow at the menu's top right closes it, and one at the page's top left brings it back. */
.navclose, .navopen { display: none; }
@media (min-width: 901px) {
  .navclose { display: inline-flex; align-items: center; justify-content: center; position: absolute; top: 18px; right: 10px; width: 28px; height: 28px; padding: 0; border-radius: 8px; background: transparent; border: 0; color: var(--rail-dim, #9fb3b3); cursor: pointer; font: 600 16px/1 var(--font); z-index: 2; }
  .navclose:hover, .navclose:focus-visible { color: #fff; background: rgba(255,255,255,.1); }
  .shell.navhidden { grid-template-columns: minmax(0, 1fr); }
  .shell.navhidden .rail { display: none; }
  .navopen { display: none; }
  .shell.navhidden .navopen { display: inline-flex; align-items: center; justify-content: center; position: fixed; top: 14px; left: 14px; width: 34px; height: 34px; padding: 0; border-radius: 10px; background: var(--rail); color: #fff; border: 0; cursor: pointer; font: 600 16px/1 var(--font); z-index: 30; box-shadow: 0 4px 14px rgba(6,18,20,.25); }
  .shell.navhidden .navopen:hover, .shell.navhidden .navopen:focus-visible { background: var(--rail-2, #1c3a3a); }
  .shell.navhidden .main { padding-left: max(60px, var(--main-pad-left, 60px)); }
}

/* Service rates: "Keep the old prices until" box and the "+ Add a service" tab */
.gracebox { padding: 14px 16px; }
.gracebox > label { display: grid; gap: 6px; max-width: 560px; font-weight: 600; }
.gracebox > label .wl-input { width: 200px; max-width: 100%; height: 40px; box-sizing: border-box; font-weight: 400; }
.gracebox > label .muted.fine { font-weight: 400; line-height: 1.4; }
.gracebox > label:has(input[type=checkbox]) { display: flex; max-width: none; font-weight: 400; }
.tabs .tabadd { -webkit-appearance: none; appearance: none; width: auto; min-width: 0; height: auto; box-sizing: content-box; border: 0; border-radius: 0; background: none; padding: 8px 0 10px; font: inherit; font-weight: 600; color: var(--accent); cursor: pointer; }
.tabs .tabadd:hover { color: var(--ink); }
.prevbox { padding: 12px 16px; display: grid; gap: 8px; }
.prevrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 14px; }
.prevrow .wl-select { height: 38px; box-sizing: border-box; min-width: 0; width: auto; max-width: 100%; padding: 0 32px 0 12px; }
.prevrow .wl-btn { height: 32px; padding: 0 12px; font-size: 13px; }
.prevnote { line-height: 1.4; max-width: 640px; }

/* Orders list: keep the Order type column beside an open order card, unless the window is too narrow for it */
@media (max-width: 1279px) { .split:not(.solo) .col-type { display: none; } }

/* Orders list: one page bar above the list (stats on the left, a Shopify-style pill on the right). It is invisible chrome until the list scrolls under it; then the stats and the pager each float as a small raised pill. It never reaches past the page column, so it stays clear of the menu. */
.pagebar { position: sticky; top: 8px; z-index: 6; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 26px; margin: 0 0 10px; padding: 0; color: var(--ink-3); pointer-events: none; }
.pagebar > * { pointer-events: auto; }
.pagebar .sumstats { display: flex; flex-wrap: wrap; gap: 6px 26px; align-items: center; white-space: nowrap; padding: 7px 16px 7px 16px; border: 1px solid transparent; border-radius: var(--radius-ctl, 6px); transition: box-shadow .15s ease, background .15s ease, border-color .15s ease; }
.pagebar.stuck .sumstats, .pagebar.stuck .pager { background: var(--raise); border-color: var(--line-strong, var(--line)); box-shadow: 0 6px 16px -6px rgba(16, 42, 45, .34); }
.pagebar b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.pager { margin-left: auto; display: inline-flex; align-items: center; background: var(--raise); border: 1px solid var(--line-strong, var(--line)); border-radius: var(--radius-ctl, 4px); color: var(--ink); height: 34px; padding: 0 2px; transition: box-shadow .15s ease; }
.pager .pillbtn { display: inline-grid; place-items: center; width: 30px; height: 28px; border: 0; border-radius: max(0px, calc(var(--radius-ctl, 4px) - 1px)); background: transparent; color: var(--ink-2); cursor: pointer; }
.pager .pillbtn:hover:not(:disabled) { background: var(--wash); color: var(--ink); }
.pager .pillbtn:disabled { opacity: .35; cursor: default; }
.pager .pagerange { padding: 0 10px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* The same pill as the calendar's day and month navigation */
.pager.pillnav { margin-left: 0; }
.pillnav .tk-monthbtn, .pillnav .tk-dpick { height: 28px; border: 0; background: transparent; color: var(--ink); font: 600 14px var(--font, inherit); padding: 0 10px; box-shadow: none; border-radius: 0; min-height: 0; width: auto; cursor: pointer; }
.pillnav .tk-dpick { width: 128px; padding: 0 6px; } .pillnav .tk-monthbtn:hover { background: var(--wash); }
.tk-monthnav .pager { height: 34px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 900px) { .pagebar { top: calc(var(--railbar, 64px) + 8px); } }

/* Search box and Filters button on page headers share one height */
.head .tools .wl-input[type="search"], .head .tools button[id$="-filter-btn"] { height: 40px; min-height: 40px; box-sizing: border-box; }

/* Day navigation: the pill stays centered; "Today" sits just to its right without pushing it over */
.tk-daynav { position: relative; }
.tk-daynav #tk-dtoday { position: absolute; left: calc(100% + 10px); top: calc(50% - 2px); transform: translateY(-50%); white-space: nowrap; }
@media (max-width: 900px) { .tk-daynav #tk-dtoday { position: static; transform: none; } }

/* Calendar bar: one shared center line for the tabs, the navigation pill, Today and the filter button; the date field is wide enough for its full text */
.tk-bar .tk-monthnav { padding-bottom: 4px; }
.tk-bar .tk-filters { padding-bottom: 5px; }
.pillnav .tk-dpick { width: 156px; padding: 0 8px; text-align: center; }
.pillnav .tk-monthbtn { min-width: 160px; text-align: center; justify-content: center; }

/* ── Client portal consistency pass: same cards, headings, controls and spacing as the admin side ── */
.shell.client .ctile, .shell.client .clist, .shell.client .icard { background: var(--surface); }
.shell.client .ctile { padding: 18px 20px; }
.shell.client .ctiles { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
@media (max-width: 900px) { .shell.client .ctiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* "Needs your attention" and "Slow-moving stock" read like every other section: heading on the page, rows in a card */
.shell.client .attn, .shell.client .aged { background: none; border: 0; box-shadow: none; padding: 0; display: block; border-radius: 0; }
.shell.client .attn .csec-h, .shell.client .aged .csec-h { margin-bottom: 8px; }
.shell.client .attn .clist, .shell.client .aged .clist { box-shadow: var(--shadow-card); margin: 0 0 12px; }
.shell.client .attn p, .shell.client .aged > p { margin: 0 0 10px; }
.shell.client .agedbands { margin: 0 0 12px; }
/* one heading scale: section 17px, sub-section 15px, always the display face */
.shell.client .csec h3, .shell.client .main h3.csub, .shell.client .sheetsvc h3, .shell.client .card > h3, .shell.client .icard h2 { font: 600 17px var(--display); margin: 0 0 10px; }
.shell.client .csec > h3 { margin: 18px 0 8px; }
.shell.client .card h4 { font: 600 15px var(--display); margin: 0 0 6px; }
.shell.client .panel h2 { font: 600 17px var(--display); }
/* forms inside a card are not a second card */
.shell.client .card .form, .shell.client .card form.form { background: none; box-shadow: none; border: 0; border-radius: 0; padding: 0; }
/* controls share the admin height */
.shell.client .head .tools .wl-btn, .shell.client .pbar .wl-btn, .shell.client .pbar .wl-select, .shell.client .pbar .wl-input { height: 40px; box-sizing: border-box; }
.shell.client .pbar { align-items: center; gap: 10px 16px; margin: 4px 0 14px; }
.shell.client .pbar label { display: flex; align-items: center; gap: 10px; }
.shell.client .pbar .pdates { align-items: center; }
.shell.client .pbar .pkeep { align-items: center; }
/* a long company name wraps instead of running under the collapse arrow */
.shell.client .brand { padding-right: 36px; } .shell.client .brand b { overflow-wrap: anywhere; line-height: 1.25; }

.shell.client .brand b { white-space: normal; text-overflow: clip; overflow: visible; }
.shell.client .panel h3.csub { margin: 22px 0 10px; }
.shell.client .freeunits .freeunit { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-panel, 6px); box-shadow: var(--shadow-card); padding: 14px 16px; margin-bottom: 10px; }
.shell.client .freeunits .freeunit:first-of-type { border-top: 1px solid var(--line); }

/* plan picker (plans.js) */
.pl-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; margin: 4px 0 8px; }
.pl-seg { display: inline-flex; border: 1px solid var(--ink-3); border-radius: 4px; overflow: hidden; background: var(--raise); }
.pl-seg button { border: 0; background: none; padding: 7px 16px; font-weight: 500; cursor: pointer; } .pl-seg button.on { background: var(--accent); color: var(--accent-ink); }
.pl-seg em { font: 500 11px var(--mono); font-style: normal; margin-left: 6px; opacity: .85; }
.pl-line { margin-top: 24px; } .pl-line h2, .pl-cmp h2 { font: 600 19px/1.2 var(--display); margin: 0; } .pl-line > p { margin: 4px 0 12px; color: var(--ink-2); }
.pl-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.pl-card { background: var(--raise); border: 1px solid var(--line); border-radius: 6px; box-shadow: var(--shadow-card); padding: 22px 24px; display: flex; flex-direction: column; }
.pl-card.pl-pop { border-color: var(--accent); box-shadow: inset 0 3px 0 var(--accent), var(--shadow-card); } .pl-card.pl-cur { outline: 2px solid var(--accent); }
.pl-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .pl-top h3 { font: 600 20px var(--display); margin: 0; }
.pl-tag { font: 500 10.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-strong); background: var(--accent-soft); padding: 3px 7px; border-radius: 3px; }
.pl-price { margin: 14px 0 2px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .pl-price b { font: 600 34px/1 var(--display); letter-spacing: -.02em; } .pl-price small { color: var(--ink-2); font-size: 14px; }
.pl-was { color: var(--ink-3); text-decoration: line-through; } .pl-save { font: 500 11px var(--mono); color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, var(--raise)); padding: 2px 6px; border-radius: 3px; }
.pl-sub { color: var(--ink-3); font-size: 13px; min-height: 19px; }
.pl-limits { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-soft); display: grid; gap: 7px; }
.pl-row { display: flex; justify-content: space-between; gap: 12px; } .pl-row span:first-child { color: var(--ink-2); } .pl-row span:last-child { font-weight: 600; text-align: right; }
.pl-row i { display: block; font-style: normal; font-weight: 400; color: var(--ink-3); font-size: 12.5px; }
.pl-feats { list-style: none; margin: 14px 0 18px; padding: 14px 0 0; border-top: 1px solid var(--line-soft); display: grid; gap: 6px; }
.pl-feats li { padding-left: 20px; position: relative; } .pl-feats li::before { content: ""; position: absolute; left: 2px; top: 7px; width: 9px; height: 5px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }
.pl-feats li.no { color: var(--ink-3); } .pl-feats li.no::before { border: 0; height: 2px; background: var(--ink-3); top: 10px; transform: none; width: 9px; }
.pl-card .wl-btn, .pl-your { margin-top: auto; } .pl-your { color: var(--ink-3); text-align: center; padding: 9px 0; }
.pl-ent { margin-top: 26px; background: var(--rail-2); color: #fff; border-radius: 6px; padding: 24px 28px; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 28px; }
.pl-ent h2 { font: 600 22px var(--display); margin: 0; } .pl-ent p, .pl-ent ul, .pl-ent label { color: var(--rail-ink); } .pl-ent ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; } .pl-ent ul li::marker { color: var(--mark); }

.pl-addon { margin-top: 16px; background: var(--raise); border: 1px solid var(--line); border-radius: 4px; padding: 16px 22px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.pl-addon b { font: 600 16px var(--display); } .pl-addon p { margin: 2px 0 0; color: var(--ink-2); font-size: 13.5px; }
.pl-stepper { display: inline-flex; align-items: center; gap: 8px; } .pl-stepper span { min-width: 36px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.pl-cmp { margin-top: 30px; } .pl-cmp table { width: 100%; border-collapse: collapse; font-size: 13.5px; margin-top: 10px; }
.pl-cmp th, .pl-cmp td { padding: 9px 12px; border-bottom: 1px solid var(--line-soft); text-align: left; vertical-align: top; } .pl-cmp tbody th { font-weight: 500; color: var(--ink-2); }
.pl-cmp thead th { font: 600 14px var(--display); } .pl-cmp tr.pl-grp th { background: var(--wash); font: 500 10.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.pl-cmp td.y { color: var(--accent-strong); font-weight: 600; } .pl-cmp td.n { color: var(--ink-3); }
@media (max-width: 760px) { .pl-ent { grid-template-columns: 1fr; padding: 20px; } }
.pl-ent > * { min-width: 0; }

/* Settings cards spread across the page, filling columns top to bottom */
.setgrid { columns: 2 340px; column-gap: 20px; max-width: 1100px; }
.setgrid > .card { break-inside: avoid; display: inline-block; width: 100%; box-sizing: border-box; }

/* searchable client picker in the create forms */
.wl-picker { position: relative; } .wl-picker-trigger { width: 100%; text-align: left; display: flex; align-items: center; cursor: pointer; } .wl-picker-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wl-picker-label.ph { color: var(--ink-3); }
.wl-picker-trigger::after { content: ""; flex: none; width: 7px; height: 7px; margin-left: 8px; border-right: 1.5px solid var(--ink-3); border-bottom: 1.5px solid var(--ink-3); transform: translateY(-2px) rotate(45deg); }
.wl-picker-pop { position: absolute; z-index: 30; left: 0; right: 0; min-width: 240px; top: calc(100% + 4px); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 10px 28px -10px rgba(0,0,0,.35); padding: 8px; display: grid; gap: 6px; }
.wl-picker-pop[hidden] { display: none; } .wl-picker-pop .wl-picker-search { width: 100%; max-width: none; box-sizing: border-box; height: 36px; }
.wl-picker-list { list-style: none; margin: 0; padding: 0; max-height: 220px; overflow-y: auto; display: grid; gap: 1px; }
.wl-picker-opt { padding: 8px 10px; border-radius: 6px; cursor: pointer; font-size: 14px; } .wl-picker-opt.none { color: var(--ink-3); } .wl-picker-opt.on { background: var(--accent-soft); } .wl-picker-opt.sel { font-weight: 600; }
.wl-picker-empty { padding: 10px; color: var(--ink-3); font-size: 13px; }
.wl-picker-pop.is-up { top: auto; bottom: calc(100% + 4px); box-shadow: 0 -10px 28px -10px rgba(0,0,0,.35); }

/* wl-toolbar: the one row above a list's tabs. Search and Filters grow on the left; Sort beside them; the page's buttons (wl-toolbar-actions) sit at the right. */
.wl-toolbar { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; margin: calc(-1 * var(--sp-4)) 0 var(--sp-7); }
.wl-toolbar > .tools { flex: 1 1 260px; min-width: 0; } .wl-toolbar > .tools .wl-input[type="search"] { flex: 1 1 160px; min-width: 0; }
.wl-toolbar > .wl-select { width: auto; max-width: 100%; }
.wl-toolbar-actions { display: flex; gap: var(--sp-4); margin-left: auto; }
.wl-toolbar + .tabs { margin-top: 0; }

/* wl-table-group: a small client header between groups of rows */
.wl-table-group th { background: var(--wash); font: var(--fw-bold) var(--fs-1) var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); padding: var(--sp-4) 16px; }

/* wl-chips: a text field whose entries become chips below it (unit ids in Receive). */
.wl-chips { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-3); } .wl-chips:empty { display: none; }
.wl-chip { display: inline-flex; align-items: center; gap: var(--sp-2); max-width: 100%; padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-5); border: var(--line-w) solid var(--line-strong); border-radius: 999px; background: var(--raise); font: var(--fw-medium) var(--fs-2) var(--mono); color: var(--ink); }
.wl-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-chip-x { flex: none; width: 22px; height: 22px; border: 0; border-radius: 50%; background: none; color: var(--ink-3); cursor: pointer; font-size: 14px; line-height: 1; padding: 0; }
.wl-chip-x:hover { background: var(--wash); color: var(--ink); } .wl-chip-x:focus-visible { outline: 2px solid var(--focus, var(--accent)); outline-offset: 1px; }

/* orders list: no inner scrollbar, and ticking several orders at once */
.main.locked .split > :first-child { scrollbar-width: none; -ms-overflow-style: none; } .main.locked .split > :first-child::-webkit-scrollbar { display: none; }
.tablewrap th.selcol, .tablewrap td.selcol { width: 40px; padding-right: 0; } .tablewrap.narrow-cols th.selcol, .tablewrap.narrow-cols td.selcol { width: 40px !important; }
.tablewrap.narrow-cols th.selcol + th, .tablewrap.narrow-cols td.selcol + td { width: 36%; }
.tablewrap td.selcol input, .tablewrap th.selcol input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); cursor: pointer; vertical-align: middle; }
.tablewrap tr.picked td { background: var(--accent-soft); }
.pagebar .selbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .pagebar .selbar .wl-btn { height: 28px; padding: 0 10px; font-size: 13px; } .pagebar .selbar .wl-btn--link { margin-left: 4px; }
@media (max-width: 720px) { .tablewrap td.selcol { display: block; } .tablewrap td.selcol::before { display: none; } .tablewrap td.selcol + td { grid-template-columns: minmax(0, 1fr); font-size: 16px; } .tablewrap td.selcol + td::before { display: none; } }
@media (min-width: 901px) and (max-width: 1180px) { .split:not(.solo) .tablewrap td.selcol { display: block; } .split:not(.solo) .tablewrap td.selcol::before { display: none; } .split:not(.solo) .tablewrap td.selcol + td { grid-template-columns: minmax(0, 1fr); font-size: 16px; } .split:not(.solo) .tablewrap td.selcol + td::before { display: none; } }

/* auth pages: hero stays fixed, only the form column scrolls (desktop) */
@media (min-width: 901px) {
  .login { height: 100vh; min-height: 0; overflow: hidden; }
  .login .formcol { overflow-y: auto; display: flex; }
  .login .formcol > * { margin: auto; }
}
.login .formwrap:has(.su-plans) { width: min(520px, 100%); }
.su-field { display: grid; gap: 8px; } .su-label { font-size: 12.5px; color: var(--ink-2); font-weight: 500; }
.su-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.su-plan { display: grid; gap: 4px; text-align: left; padding: 14px 16px; border: 1.5px solid var(--line-soft, #d8d2c4); border-radius: 12px; background: var(--surface, #fff); color: var(--ink); font: inherit; cursor: pointer; }
.su-plan:hover { border-color: var(--accent); }
.su-plan.on { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent); }
.su-name { font-weight: 600; font-size: 14px; } .su-price { font-size: 13px; color: var(--ink-2); } .su-price b { font-size: 24px; color: var(--ink); font-weight: 600; }
.su-was, .su-for { font-size: 12px; color: var(--ink-3); }
.su-actions { display: grid; gap: 10px; }
.su-actions .wl-btn { width: 100%; justify-content: center; text-align: center; height: 44px; padding: 0 18px; }
div.ok:empty, p.ok:empty { display: none; }
.login .formwrap form { width: 100%; }
.login .formwrap:has(.su-plans) { margin-inline: auto; }
/* single-company businesses have no clients to choose between */
html.single label:has(#client-filter), html.single .ncf-modal label:has(.wl-picker-trigger), html.single .wl-field:has(.ncf-tags) { display: none; }

/* ── Phones ──
   A text control under 16px makes iPhone zoom the page in when it is focused, so every control is at least --fs-4 at tablet width and below.
   Dialogs and pop-over forms share one size, padding and field spacing; their fields are the full width of the panel and never wider. */
@media (max-width: 900px) {
  :root:root :is(input, select, textarea):not([type="checkbox"], [type="radio"], [type="range"]) { font-size: var(--fs-4); }
  .wl-input[type="date"], .wl-input[type="time"], .wl-input[type="month"] { -webkit-appearance: none; appearance: none; display: block; min-width: 0; text-align: left; }
  .wl-input[type="date"]::-webkit-date-and-time-value { text-align: left; }
}
@media (max-width: 560px) {
  .tk-overlay { padding: var(--sp-4); }
  .tk-modal { width: 100%; max-height: calc(100vh - 2 * var(--sp-4)); padding: var(--sp-7); border-radius: var(--radius-panel); }
  .tk-modal header { margin-bottom: var(--sp-6); }
  .tk-modal .stack, .tk-modal .tk-form, .ncf-modal .stack { gap: var(--sp-6); }
  .tk-two, .ncf-row { grid-template-columns: 1fr; }
  .ncf-line { flex-wrap: wrap; } .ncf-line select.wl-select { flex-basis: 100%; } .ncf-line input.ncf-qty { flex: 1 1 auto; width: auto; }
  :is(.tk-modal, .wl-menu--form, .panel, .form, .shopform, .holdbox) :is(.wl-input, .wl-select, .wl-picker, .wl-textarea) { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
  .rinput .wl-input, .shopform .wl-input { flex-basis: 100%; }
  .sent .wl-input.wl-input--sm[type="date"] { flex: 1 1 130px; width: auto; }
  .tk-high { height: auto; }
  /* the Overview and Calendar pop-overs open under their button and stay inside the screen */
  .wl-menu { max-width: calc(100vw - 2 * var(--sp-7)); }
  .tk-pickmenu { left: 0; transform: none; }
}
/* Calendar on a phone: a compact month (a number and up to three dots a day) with the chosen day's items listed under it. The bar keeps
   the month pager on the left and the filter button on the right, in one row. */
@media (max-width: 700px) {
  .tkpage.cal .tk-grid { min-height: 0; }
  .tk-calwrap.compact .tk-grid, .tk-calwrap.compact .tk-dowrow { gap: var(--sp-1); }
  .tk-calwrap.compact .tk-day { min-height: 0; aspect-ratio: 1; padding: var(--sp-2) 0 0; align-items: center; gap: var(--sp-1); border-radius: var(--radius-ctl); }
  .tk-calwrap.compact .tk-num { align-self: center; }
  .tk-dots { display: flex; gap: 3px; } .tk-dots .tk-dot { display: block; width: 5px; height: 5px; border-radius: 50%; background: var(--evc, var(--accent)); }
  /* the chosen day's items are a card under the month, not the full-screen sheet an opened task gets */
  .main .split.tk-split > .panel.tk-daypanel { position: static; inset: auto; height: auto; z-index: auto; margin-top: var(--sp-7); padding: var(--sp-7); border-radius: var(--radius-panel); box-shadow: var(--shadow-card); overflow: visible; }
  .main .split.tk-split > .panel.tk-daypanel header:first-of-type { position: static; margin: 0 0 var(--sp-6); padding: 0; border-bottom: 0; flex-wrap: nowrap; justify-content: space-between; }
  .main .split.tk-split > .panel.tk-daypanel header:first-of-type > div:first-child { order: 0; flex: 1 1 auto; }
  .main .split.tk-split > .panel.tk-daypanel header:first-of-type > div:last-child { display: flex; gap: var(--sp-4); }
  .main .split.tk-split > .panel.tk-daypanel header:first-of-type > div:last-child > * { order: 0; margin-left: 0; }
}
@media (max-width: 900px) {
  .tk-bar { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .tk-bar .tabs { grid-column: 1 / -1; }
  .tk-bar .tk-monthnav, .tk-bar .tk-daynav { justify-self: start; }
  .tk-bar .tk-filters { justify-self: end; flex-wrap: nowrap; }
}

/* Toolbar on a phone: the buttons take a line of their own, full width; group headers stay plain rows between the cards */
@media (max-width: 560px) { .wl-toolbar-actions { width: 100%; margin-left: 0; } .wl-toolbar-actions .wl-btn { flex: 1 1 0; } }
@media (max-width: 720px) { .tablewrap tbody tr.wl-table-group { display: block; background: none; box-shadow: none; padding: var(--sp-6) var(--sp-3) var(--sp-2); margin: 0; } .tablewrap tbody tr.wl-table-group th { display: block; background: none; padding: 0; } }
@media (min-width: 901px) and (max-width: 1180px) { .split:not(.solo) .tablewrap tbody tr.wl-table-group { display: block; background: none; box-shadow: none; padding: var(--sp-6) var(--sp-3) var(--sp-2); margin: 0; } .split:not(.solo) .tablewrap tbody tr.wl-table-group th { display: block; background: none; padding: 0; } }