/* Tektura — staff area. Builds on site.css; this file is the application layout. */
/* The staff area fills the whole screen, corners included: the page colour goes on html too
   (so no white shows round the rounded corners or on overscroll), heights use dvh, and the
   edges pad themselves clear of the status bar, notch and gesture bar. */
html:has(body.staff){background:var(--paper)}
body.staff{background:var(--paper);font-size:15px}
/* Sign-in: the card, with the mark being set out in pencil beside it (above it on a
   phone). The drawing is plain SVG in the page and draws itself with CSS alone, once;
   with less motion asked for it is simply there. */
.auth{min-height:100dvh;display:grid;place-items:center;padding:24px}
.auth .card{width:min(440px,100%)}
.auth.drawn{grid-template-columns:minmax(0,600px) minmax(0,440px);place-items:initial;align-items:center;justify-content:center;gap:clamp(32px,6vw,112px);padding:24px clamp(24px,5vw,72px)}
.auth.drawn .card{width:100%}
.auth .sheet{width:100%;max-width:600px;max-height:82vh;justify-self:center}
@media (max-width:900px){.auth.drawn{grid-template-columns:minmax(0,440px);align-content:center;gap:4px}.auth .sheet{justify-self:center;max-width:360px;max-height:32vh}}
/* The sign-in form: Forgotten it? beside Password, where you look when you need it; the
   trust box as a switch (still a real checkbox, so auth.js reads it as before); a line
   that says a new device has one more step; one quiet line of links at the foot. */
.frow{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.frow label{font-family:var(--sans);font-size:15px;line-height:1.35;color:var(--ink);font-weight:600}
/* The link's underline stays under its words; the tap area reaches up into the space
   above and stops short of the password box below. */
.frow :is(a,.auth-link){position:relative;font-size:14px;color:var(--slate)}
.frow :is(a,.auth-link)::before{content:"";position:absolute;inset:-20px -8px -6px}
/* Forgot your password? and Install as an app do something on the page, so they are
   buttons; they still look like the links beside them. */
.auth-link{font:inherit;line-height:inherit;background:none;border:0;border-bottom:1px solid currentColor;border-radius:0;padding:0;margin:0;cursor:pointer;transition:color .15s ease}
/* The switch: outlined while off, so it reads as a switch and as off; filled orange once on. */
.toggle{position:relative;display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:48px;cursor:pointer;font-size:15px;color:var(--ink)}
.toggle small{display:block;font-size:13px;color:var(--slate)}
.toggle input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.toggle i{position:relative;flex:none;width:44px;height:26px;background:var(--white);box-shadow:inset 0 0 0 1.5px var(--slate);border-bottom-left-radius:7px;border-top-right-radius:7px;transition:background-color .2s,box-shadow .2s}
.toggle i::after{content:"";position:absolute;top:4px;left:4px;width:18px;height:18px;background:var(--slate);border-bottom-left-radius:5px;border-top-right-radius:5px;transition:transform .2s,background-color .2s}
.toggle input:checked+i{background:var(--signal);box-shadow:none}
.toggle input:checked+i::after{transform:translateX(18px);background:var(--white)}
.toggle input:focus-visible+i{outline:2px solid var(--ink);outline-offset:3px}
#login .btn-row .btn{width:100%;justify-content:center;min-height:54px}
.auth .next{font-size:13px;color:var(--slate);margin:10px 0 0;text-align:center}
.auth .foot{display:flex;justify-content:space-between;gap:12px;font-size:13px;margin:20px 0 0;padding-top:14px;border-top:1px solid var(--rule)}
.auth .foot :is(a,.auth-link){position:relative;color:var(--slate)}
/* A tap area 44px tall around each small link, without moving it */
.auth .foot :is(a,.auth-link)::before{content:"";position:absolute;inset:-12px -6px}
/* What "Install as an app" says here (app-install.js): a block of its own under the card,
   one column, its button the full width. Beside the drawing it keeps to the card's column. */
.auth .install-help{width:min(440px,100%);margin-top:12px;background:var(--white);padding:clamp(22px,3vw,32px);border-top-right-radius:var(--r-card);border-bottom-left-radius:var(--r-card)}
.auth .install-help h2{font-family:var(--sans);font-size:18px;font-weight:600;line-height:1.3;letter-spacing:0;text-transform:none;color:var(--ink);margin:0 0 8px}
.auth .install-help h2:focus{outline:none}
.auth .install-help .btn{width:100%;justify-content:center;min-height:54px}
@media (min-width:901px){
  .auth.drawn{align-content:center;row-gap:16px}
  .auth.drawn .install-help{grid-column:2;width:100%;margin-top:0}
}
/* The card's top stays where it first sits, centred, when a message appears under the
   password or the next step is shorter: it is placed from the top by its height at load
   (--gate-h, set by auth.js), not centred afresh each time it changes. */
@media (min-width:901px){
  .auth.drawn:not(:has(.install-help)){align-content:stretch}
  .auth.drawn:not(:has(.install-help)) .card{align-self:start;margin-top:max(0px,calc(50dvh - 24px - var(--gate-h,568px)/2))}
}
@media (min-width:561px) and (max-width:900px){
  .auth.drawn:not(:has(.install-help)){align-content:start;padding-top:max(24px,calc(50dvh - (min(323px,32vh) + 4px + var(--gate-h,568px))/2))}
}
/* On a phone the card is a panel on the bottom edge, in thumb reach, and the drawing
   takes whatever height is left above it. The safe-area padding keeps it clear of the
   notch and the home bar in the installed app. */
@media (max-width:560px){
  .auth.drawn{display:flex;flex-direction:column;min-height:100dvh;padding:env(safe-area-inset-top) 0 0;gap:0}
  .auth.drawn .sheet{flex:1 1 0;height:0;min-height:0;max-height:none;width:100%;max-width:none;padding:14px 20px 6px;box-sizing:border-box}
  .auth.drawn .card{width:100%;margin-top:auto;border-bottom-left-radius:0;border-top-right-radius:28px;padding:22px 20px calc(18px + env(safe-area-inset-bottom));box-shadow:0 -12px 30px -22px rgba(18,22,27,.5)}
  .auth.drawn .brandline{margin-bottom:14px}
  .auth.drawn h1{font-size:20px!important;margin:0 0 12px!important}
  /* Under the panel, the help carries on the same sheet. */
  .auth.drawn .install-help{width:100%;margin:0;border-radius:0;border-top:1px solid var(--rule);padding:18px 20px calc(24px + env(safe-area-inset-bottom))}
}
.sheet .g{fill:none;stroke:var(--rule-strong);stroke-width:.7}
.sheet .l{fill:none;stroke:var(--ink-hi);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.sheet .lt{fill:none;stroke:var(--ink-hi);stroke-width:.9;stroke-linecap:round}
.sheet .dm{fill:none;stroke:var(--signal);stroke-width:.9;stroke-linecap:round}
.sheet .hatch line{stroke:var(--on-ink-dim);stroke-width:.7}
/* Last of all the mark colours itself in, ink rising from the bottom like a flood fill */
.sheet .fillk{fill:var(--ink)}
.sheet .t{font-family:var(--mono);font-size:11px;letter-spacing:.08em;fill:var(--ink-hi)}
.sheet .t.s{fill:var(--signal)}
.sheet .t.dim{fill:var(--slate)}
.sheet .t.big{font-size:14px;letter-spacing:.16em}
@media (prefers-reduced-motion:no-preference){
  .sheet [data-draw]{stroke-dasharray:1;stroke-dashoffset:1;animation:sheet-draw var(--u,.9s) cubic-bezier(.45,0,.3,1) var(--d,0s) forwards}
  .sheet [data-fade]{opacity:0;animation:sheet-fade .7s ease var(--d,0s) forwards}
  .sheet .flood{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(0);animation:sheet-flood 1.6s cubic-bezier(.6,0,.3,1) 7.1s forwards}
}
@keyframes sheet-draw{to{stroke-dashoffset:0}}
@keyframes sheet-flood{to{transform:none}}
@keyframes sheet-fade{to{opacity:1}}
/* After signing in on a phone the same drawing plays in the middle of the screen while
   the app opens, about seven times as fast (app.js takes it away). If that script never
   runs, it goes by itself after 5 seconds. */
.intro{display:none}
.intro:target,.intro.on{position:fixed;inset:0;z-index:1001;display:grid;place-items:center;background:var(--paper);animation:intro-gone 0s linear 5s forwards;transition:opacity .25s ease;will-change:opacity}
.intro.out{opacity:0}
/* The page opening under it is kept out of sight until it fades, so nothing of it shows through. */
body:has(.intro.on:not(.out)) .shell{visibility:hidden}
.intro .sheet{width:min(84vw,360px);max-height:70dvh;--k:.14}
@media (prefers-reduced-motion:no-preference){
  .intro .sheet [data-draw]{animation-duration:calc(var(--u,.9s)*var(--k));animation-delay:calc(var(--d,0s)*var(--k))}
  .intro .sheet [data-fade]{animation-duration:calc(.7s*var(--k));animation-delay:calc(var(--d,0s)*var(--k))}
  .intro .sheet .flood{animation-duration:calc(1.6s*var(--k));animation-delay:calc(7.1s*var(--k))}
}
@keyframes intro-gone{to{visibility:hidden}}
/* The logo with "Staff" beside it, centred on it after a thin rule */
.auth .brandline{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.auth .brandline .label{padding-left:14px;border-left:1px solid var(--rule);line-height:22px}

/* Shell */
.shell{display:grid;grid-template-columns:232px minmax(0,1fr);min-height:100dvh}
.rail{background:var(--ink);color:var(--paper);padding:22px 16px;display:flex;flex-direction:column;gap:6px;position:sticky;top:0;height:100dvh;overflow:auto;padding-top:max(22px,calc(env(safe-area-inset-top) + 12px));padding-bottom:max(22px,env(safe-area-inset-bottom));padding-left:max(16px,env(safe-area-inset-left))}
.rail .lockup{color:var(--paper);font-size:17px;margin:4px 6px 22px}
.rail .lockup svg{width:28px;height:28px}
.rail a{display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--on-ink);border:0;padding:8px 12px;font-size:14px;font-weight:500;border-bottom-left-radius:var(--r-btn);border-top-right-radius:var(--r-btn)}
.rail a:hover{background:#1E242C;color:var(--paper)}
.rail a.on{background:var(--signal);color:var(--paper)}
.rail a[hidden]{display:none}
.rail .navname{display:flex;align-items:center;gap:11px;min-width:0}
.rail .navname>:first-child{flex:none;width:20px;display:flex;align-items:center;justify-content:center}
.rail .navname span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rail a .gly{opacity:.72}
.rail a:hover .gly,.rail a.on .gly{opacity:1}
.rail .label{color:var(--on-ink-dim);margin:10px 12px 2px}
.rail .label.sec{display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer;user-select:none}
.rail .label.sec[hidden]{display:none}
.rail .label.sec:hover,.rail .label.sec:focus-visible{color:var(--on-ink)}
.rail .label .sec-end{display:inline-flex;align-items:center;gap:8px}
.rail .label .chev{transition:transform .15s ease}
.rail .label.shut .chev{transform:rotate(-90deg)}
.rail .label .sec-count{font-size:10px;line-height:15px;padding:0 5px;letter-spacing:0;background:#1E242C;color:var(--paper);border-bottom-left-radius:4px;border-top-right-radius:4px}
.rail a.tucked{display:none}
@media (prefers-reduced-motion:reduce){.rail .label .chev{transition:none}}
.rail .count{font-family:var(--mono);font-size:11px;background:#1E242C;padding:3px 7px;border-bottom-left-radius:4px;border-top-right-radius:4px}
.rail a.on .count{background:var(--signal-text)}
.rail .spacer{flex:1}
.rail .who{margin:8px 6px 0;font-size:12px;color:var(--on-ink-dim);line-height:1.5}
.main{padding:max(22px,calc(env(safe-area-inset-top) + 10px)) max(clamp(16px,3vw,40px),env(safe-area-inset-right)) calc(60px + env(safe-area-inset-bottom)) clamp(16px,3vw,40px);min-width:0}
@media (max-width:880px){.main{padding-left:max(16px,env(safe-area-inset-left))}}
.topbar{position:relative;background:var(--white);border-bottom-left-radius:var(--r-tab);border-top-right-radius:var(--r-tab);padding:12px 20px;display:flex;align-items:center;gap:16px;min-height:52px;margin-bottom:26px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--slate)}
.topbar .chip{position:absolute;top:0;right:0;bottom:0;display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:var(--paper);padding:0 18px;border:0;border-bottom-left-radius:var(--r-tab);border-top-right-radius:var(--r-tab);font-family:var(--mono);letter-spacing:.12em}
.topbar .chip button{background:none;border:0;color:var(--on-ink);font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer;padding:0}
.topbar .chip button:hover{color:var(--signal-dark)}
.menu-btn{display:none}
@media (max-width:880px){
  .shell{grid-template-columns:1fr}
  .rail{position:fixed;left:0;top:0;bottom:0;width:min(280px,86vw);z-index:60;transform:translateX(-100%);transition:transform .2s ease}
  .rail.open{transform:none}
  .menu-btn{display:inline-block;background:var(--paper);border:0;font:inherit;font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:8px 12px;border-bottom-left-radius:var(--r-tag);border-top-right-radius:var(--r-tag);cursor:pointer}
  .topbar{padding-right:120px}
  .topbar .chip{padding:0 12px}
}

/* Page pieces */
.page-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin-bottom:22px}
.page-head .htab{margin:0;font-size:20px;padding:11px 20px 11px 18px}
.titled{display:flex;align-items:center;gap:14px;min-width:0}
.titled .avatar{font-size:16px}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:22px}
@media (max-width:1100px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
.kpi{background:var(--white);padding:18px 20px;border-bottom-left-radius:var(--r-card);border-top-right-radius:var(--r-card)}
.kpi .v{font-weight:600;font-size:28px;line-height:1.1;letter-spacing:-0.01em;margin:6px 0 4px;font-variant-numeric:tabular-nums}
.kpi.ink{background:var(--ink);color:var(--paper)}
.kpi.ink .label,.kpi.ink .small{color:#A7B0BA}
.kpi.signal{background:var(--signal);color:var(--paper)}
.kpi.signal .label,.kpi.signal .small{color:var(--paper)}
.panel{background:var(--white);padding:20px 22px;border-bottom-left-radius:var(--r-card);border-top-right-radius:var(--r-card)}
.panel h3{font-size:13px;letter-spacing:.1em;margin-bottom:12px}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:1000px){.two,.three{grid-template-columns:minmax(0,1fr)}}
.list{list-style:none;margin:0;padding:0}
.list li{display:flex;justify-content:space-between;gap:14px;align-items:baseline;padding:9px 0;border-top:1px solid var(--rule);font-size:14px}
.list li:first-child{border-top:0}
.list a{border:0;color:var(--ink);font-weight:500}
.list a:hover{color:var(--signal)}
.bar-meter{height:8px;background:var(--paper);border-bottom-left-radius:4px;border-top-right-radius:4px;overflow:hidden;margin-top:8px}
.bar-meter i{display:block;height:100%;background:var(--signal);transition:width .8s cubic-bezier(.4,0,.2,1)}
@media (prefers-reduced-motion:reduce){.bar-meter i{transition:none}}
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--slate);font-weight:400;text-align:left;padding:8px 10px 8px 0;border-bottom:1px solid var(--rule)}
.tbl td{padding:10px 10px 10px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.tbl tr.row-link{cursor:pointer}
.tbl tr.row-link:hover td{background:var(--paper)}
.tbl .r{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl td.actions{white-space:nowrap;text-align:right}
.tbl .tag{font-size:10px;padding:4px 8px}
.empty{padding:26px;text-align:center;color:var(--slate);font-size:14px}

/* Buttons in the app */
.btn.sm{padding:9px 14px;font-size:12px}
.btn.ghost{background:var(--paper);color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}
.btn.danger:hover{background:var(--signal-text)}
.btn-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}

/* Something to type into has to look like something to type into.

   The site's own forms sit on paper, so a white box reads as a box there. In here
   almost everything sits on a white panel, and a white box on a white panel with no
   border is invisible until it is focused — you cannot see where to click, or how many
   boxes there are. So in the staff area every one of them gets a white fill and an edge
   dark enough to see (3.9:1 on white, 3.5:1 on paper), which is what the site uses too.
   Two places opt back out below, where the box IS the row it sits in. */
body.staff .input::placeholder,body.staff textarea::placeholder{color:var(--slate)}

/* Forms in the app */
.form{display:grid;gap:14px}
.form .input,.form textarea,.form select{padding:11px 13px;font-size:16px}
.form .cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.form .cols3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:700px){.form .cols,.form .cols3{grid-template-columns:minmax(0,1fr)}.form :is(.cols,.cols3)>*{grid-column:1/-1!important}}
.form .checks{display:flex;flex-wrap:wrap;gap:10px 18px}
/* How a form asks. A short list is a row of choices to tap; a long one narrows as you type;
   money carries its £; a date has quick picks; empty notes wait behind "Add notes". */
.dlg-lede{margin:-4px 0 18px;max-width:60ch}
#dlg h2{font-family:var(--sans);text-transform:none;letter-spacing:-.01em;font-size:22px;font-weight:600}
.form .cols{gap:18px 16px}
.pick{display:flex;flex-wrap:wrap;gap:8px}
.pick-o{position:relative;display:inline-flex;cursor:pointer}
.pick-o input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.pick-o span{display:inline-flex;align-items:center;gap:6px;min-height:42px;padding:9px 14px;font-size:14.5px;font-weight:500;background:var(--white);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--edge,var(--slate));border-bottom-left-radius:var(--r-btn);border-top-right-radius:var(--r-btn)}
.pick-o:hover span{background:var(--paper)}
.pick-o input:checked+span{background:var(--ink);color:var(--paper);box-shadow:none}
.pick-o input:checked+span::before{content:"";width:12px;height:7px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(-45deg)}
.pick-o input:focus-visible+span{outline:2.5px solid var(--signal);outline-offset:2px}
.combo{position:relative}
.combo>.input{padding-right:40px}
.combo::after{content:"";position:absolute;right:19px;top:50%;width:7px;height:7px;border:solid var(--ink);border-width:0 1.8px 1.8px 0;transform:translateY(-70%) rotate(45deg);pointer-events:none}
.form .f-sec{margin:14px 0 -4px;padding-top:18px;border-top:1px solid var(--rule-soft);font:600 15px/1.3 var(--sans);letter-spacing:0;text-transform:none;color:var(--ink)}
.combo-list{position:absolute;z-index:5;left:0;right:0;top:100%;margin:4px 0 0;padding:4px 0;list-style:none;max-height:240px;overflow:auto;background:var(--white);box-shadow:inset 0 0 0 1.5px var(--ink),0 10px 24px rgba(18,22,27,.14);border-bottom-left-radius:var(--r-btn)}
.combo-list li{padding:9px 14px;font-size:15px;cursor:pointer}
.combo-list li.on,.combo-list li:hover{background:var(--paper)}
.combo-list li.on{box-shadow:inset 3px 0 0 var(--signal)}
.combo-list li.none{color:var(--slate);cursor:default}
.money-in{position:relative;display:block}
.money-in .pre{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--slate);font-size:16px;pointer-events:none}
.money-in .input{padding-left:29px}
.date-in{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center}
.date-in>.input{flex:1 1 150px;min-width:0}
.date-quick{display:flex;gap:6px}
.dq{font:inherit;font-size:13px;font-weight:500;color:var(--ink);background:none;border:0;padding:8px 6px;text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:4px;cursor:pointer}
.dq:hover{text-decoration-color:var(--ink)}
.dq:focus-visible{outline:2.5px solid var(--signal);outline-offset:1px}
.more-f{justify-self:start;display:inline-flex;align-items:center;gap:9px;font:inherit;font-size:14.5px;font-weight:500;color:var(--ink);background:none;border:0;padding:4px 0;cursor:pointer}
.more-f span{display:inline-grid;place-items:center;width:22px;height:22px;box-shadow:inset 0 0 0 1.5px var(--ink);border-bottom-left-radius:var(--r-tag);border-top-right-radius:var(--r-tag);font-size:15px;line-height:1}
.more-f:hover span{background:var(--ink);color:var(--paper)}
#dlg-form>.btn-row{border-top:1px solid var(--rule);padding-top:18px;align-items:center}
.need-l{margin-left:auto;font-size:13.5px;color:var(--slate);text-align:right}
.need-l+[data-danger]{margin-left:16px!important}
.form .check{font-size:14px}
/* The window never scrolls itself (its card does), so the card flying in from the button
   that opened it cannot flash scroll bars on the way. Behind it the page is dimmed and
   softly blurred. */
dialog{border:0;padding:0;background:transparent;max-width:min(720px,94vw);width:100%;overflow:visible}
dialog::backdrop{background:rgba(18,22,27,.42);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
dialog .card.tk-nudge{animation:tk-nudge .32s cubic-bezier(.3,1.4,.5,1)}
@keyframes tk-nudge{0%,100%{transform:none}30%{transform:scale(1.015)}60%{transform:scale(.995)}}
@media (prefers-reduced-motion:reduce){dialog .card.tk-nudge{animation:none}}
dialog .card{max-height:88vh;overflow:auto}
dialog h2{font-size:18px;letter-spacing:.06em;margin-bottom:16px}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:var(--paper);padding:12px 18px;border-bottom-left-radius:var(--r-btn);border-top-right-radius:var(--r-btn);font-size:14px;z-index:96;opacity:0;transition:opacity .2s ease;pointer-events:none}
.toast.show{opacity:1}
.toast.bad{background:var(--signal)}

/* Pipeline board */
.board{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(230px,1fr);gap:12px;overflow-x:auto;padding-bottom:12px}
.col{border-bottom-left-radius:var(--r-card);border-top-right-radius:var(--r-card);padding:12px;min-height:220px}
.col h3{display:flex;justify-content:space-between;margin-bottom:10px}
.col.drop,.lostbin.drop{outline:2px dashed var(--signal);outline-offset:-4px}
/* What is late, and what has been standing still. Said quietly: a colour and a word,
   not a badge shouting at somebody who already knows. */
.col-sum{margin:0 0 8px;color:var(--slate)}
/* Money coming in reads as a gain; money going out is just the figure, because most of
   it goes out and a page of red is noise rather than information. */
.tx-in{color:var(--ok,var(--status));font-weight:500}
.lead .stuck,.col-sum .stuck{color:var(--signal)}
.lead{border-bottom-left-radius:var(--r-btn);border-top-right-radius:var(--r-btn);margin-bottom:8px;font-size:13px;cursor:grab}
.lead b{display:block;font-size:14px;margin-bottom:4px}
.lead .small{font-size:12px}
.lead .next{margin-top:8px;font-family:var(--mono);font-size:11px;color:var(--signal)}
.lead .next.late{color:var(--signal-text);font-weight:500}

/* Calendar */
.voice{font-size:13px;line-height:1.5}
.voice li{margin:4px 0}
.voice .bad{color:var(--signal)}
.voice .good{color:#1E6B3A}
.platform{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:3px 7px;background:var(--paper);margin-right:4px;border-bottom-left-radius:4px;border-top-right-radius:4px}

/* Invoice print view */
.invoice-sheet{background:var(--white);padding:40px;border-bottom-left-radius:var(--r-card);border-top-right-radius:var(--r-card);max-width:820px}
.invoice-sheet .head{display:flex;justify-content:space-between;gap:24px;margin-bottom:32px}
.invoice-sheet h1{font-size:24px;letter-spacing:.08em;text-transform:uppercase}
.invoice-sheet .tbl td,.invoice-sheet .tbl th{padding:10px 0}
.invoice-sheet .total{font-weight:600;font-size:18px}
@media print{
  body.staff{background:#fff}
  .rail,.topbar,.no-print,.menu-btn{display:none !important}
  .invoice-sheet{padding:0;max-width:none;border-radius:0}
}

/* ---------- Mail ---------- */
.mail-boxes{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.boxtab{background:var(--white);border:0;font:inherit;font-size:13px;font-weight:500;color:var(--ink);padding:9px 15px;border-bottom-left-radius:var(--r-btn);border-top-right-radius:var(--r-btn);cursor:pointer}
.boxtab .mono{font-size:11px;color:var(--slate);margin-left:4px}
.boxtab .small{font-weight:400;color:var(--slate)}
.boxtab:hover{background:var(--rule)}
.boxtab.on{background:var(--ink);color:var(--paper)}
.boxtab.on .mono,.boxtab.on .small{color:#A7B0BA}
.mail-list{font-size:14px;table-layout:fixed;width:100%}
.mail-list th{padding:10px 14px;border-bottom:1px solid var(--rule)}
.mail-list tr:last-child td{border-bottom:0}
.mail-list .tick{width:22px;padding-right:0}
.mail-list .tick input{width:16px;height:16px;accent-color:var(--signal);cursor:pointer}
.mail-list th.tick input{margin:0}
.mail-list .star{width:24px;padding:13px 4px 13px 8px;color:var(--rule)}
.mail-list .star button{background:none;border:0;padding:6px 2px;color:inherit;cursor:pointer;line-height:0}
.mail-list .star button:hover{color:var(--slate)}
.mail-list .star.on{color:var(--signal)}
.mail-list .whobox{display:flex;gap:10px}
.mail-list .min0{min-width:0}
.mail-list .who b,.mail-list .who .small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mail-list td b{overflow-wrap:anywhere}
/* A snippet can be one long unbroken link: break it anywhere, and show two lines at most. */
.mail-list .subj .small{overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.mail-list .clip{display:inline-block;vertical-align:-2px;color:var(--slate);margin-left:4px}
.mail-list tr.unread b{font-weight:600}
.mail-list tr.unread td:first-child{box-shadow:inset 3px 0 0 var(--signal)}
.mail-list tr.at td:first-child{box-shadow:inset 3px 0 0 var(--ink)}
.mail-list tr.unread.at td:first-child{box-shadow:inset 3px 0 0 var(--signal)}
.bulk{display:flex;flex-wrap:wrap;gap:8px;align-items:center;background:var(--ink);color:var(--paper);padding:10px 14px;margin-bottom:10px;border-bottom-left-radius:var(--r-btn);border-top-right-radius:var(--r-btn)}
.bulk .small{color:var(--on-ink);margin-right:6px}
.bulk .btn.ghost{background:#1E242C;color:var(--paper)}
.bulk .btn.ghost:hover{background:var(--paper);color:var(--ink)}
.bulk .btn.ghost.danger:hover{background:var(--signal);color:var(--paper)}
.mail-foot{display:grid;gap:4px}
.mail-foot p{margin:0;max-width:none}
.kbd{font-size:12px}
.kbd b{font-family:var(--mono);font-weight:400;background:var(--white);padding:1px 6px;border-bottom-left-radius:4px;border-top-right-radius:4px}
.avatar{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;flex-shrink:0;background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:11px;letter-spacing:.04em;border-bottom-left-radius:7px;border-top-right-radius:7px}
.mail-thread{display:grid;gap:12px}
.mail-msg{background:var(--white);padding:20px 22px;border-bottom-left-radius:var(--r-card);border-top-right-radius:var(--r-card)}
.mail-msg.out{background:var(--paper);box-shadow:inset 0 0 0 1px var(--rule)}
.mail-msg header{display:flex;gap:12px;align-items:flex-start;padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid var(--rule);cursor:pointer}
.mail-msg header .peek{display:none;color:var(--slate);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mail-msg.collapsed{padding:14px 22px}
.mail-msg.collapsed header{padding-bottom:0;margin-bottom:0;border-bottom:0}
.mail-msg.collapsed header .small:not(.peek):not(.mono){display:none}
.mail-msg.collapsed header .peek{display:block}
.mail-msg.collapsed .mail-body{display:none}
.mail-msg.out .avatar{background:var(--signal)}
.mail-msg.draft{display:flex;align-items:center;gap:8px;border:0;color:var(--ink);background:var(--signal-bg);box-shadow:inset 0 0 0 1px var(--tint);padding:14px 22px}
.mail-msg.draft .small:first-of-type{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mail-msg.draft .small:last-child{flex-shrink:0}
.mail-msg.draft:hover{background:var(--white)}
.mail-text{white-space:pre-wrap;font-size:15px;line-height:1.6;overflow-wrap:anywhere}
.mail-frame{display:block;width:100%;height:120px;border:0;margin-top:12px;background:#fff}
.msg-tools{margin-top:14px}
.msg-tools a{color:var(--slate);border:0}
.msg-tools a:hover{color:var(--signal)}
.attachments{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;padding-top:14px;border-top:1px solid var(--rule)}
.attach{display:flex;flex-direction:column;gap:2px;background:var(--paper);padding:9px 13px;border:0;color:var(--ink);border-bottom-left-radius:var(--r-btn);border-top-right-radius:var(--r-btn);font-size:13px;max-width:100%}
.attach b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:260px}
.attach:hover{background:var(--ink);color:var(--paper)}
.attach:hover .small{color:#A7B0BA}
/* On a phone each conversation is a card: who and when on the first line, the subject under. */
@media (max-width:700px){
  .mail-list,.mail-list thead,.mail-list tbody{display:block}
  .mail-list colgroup{display:none}
  .mail-list tr{display:grid;grid-template-columns:34px minmax(0,1fr) auto;grid-template-areas:"tick who when" "tick subj subj";column-gap:8px;align-items:start;padding:10px 12px 12px 8px;border-bottom:1px solid var(--rule)}
  .mail-list thead tr{grid-template-columns:34px minmax(0,1fr);grid-template-areas:"tick count";padding:8px 12px 8px 8px}
  .mail-list tr:last-child{border-bottom:0}
  .mail-list td,.mail-list th{display:block;padding:0;border:0}
  .mail-list .tick{grid-area:tick}.mail-list .tick input{margin:2px 0 0}
  .mail-list .star{display:none}
  .mail-list .who{grid-area:who}.mail-list .avatar{display:none}
  .mail-list .subj{grid-area:subj;margin-top:2px}
  .mail-list .r{grid-area:when;font-size:11px;padding-top:3px}
  .mail-list thead th:nth-child(3){grid-area:count}
  .mail-list tr.unread td:first-child,.mail-list tr.at td:first-child,.mail-list tr.unread.at td:first-child{box-shadow:none}
  .mail-list tr.unread{box-shadow:inset 3px 0 0 var(--signal)}
  .mail-list tr.picked{background:var(--signal-bg)}.mail-list tr.picked td{background:transparent}
  .kbd{display:none}
  .page-head [data-action="mail-print"]{display:none}
}

/* Writing */
.compose{padding:0;overflow:visible;position:relative}
.compose.dropping{box-shadow:inset 0 0 0 3px var(--signal)}
.c-row{display:flex;align-items:center;gap:12px;padding:0 22px;border-bottom:1px solid var(--rule)}
/* A line said above the message (set to send later, changed somewhere else) sits inside the panel like the rows under it. It ran hard against the left edge. */
#c-sched,#c-clash,#c-bounce{margin:0;max-width:none;padding:12px 22px;border-bottom:1px solid var(--rule)}
@media (max-width:700px){#c-sched,#c-clash,#c-bounce{padding:12px 14px}}
.c-row label{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--slate);width:64px;flex-shrink:0}
body.staff .c-row .input,body.staff .c-row select{background:transparent;border:0;padding:13px 0;font-size:14.5px;width:100%;box-shadow:none;border-radius:0}
body.staff .c-row .input:focus,body.staff .c-row select:focus{box-shadow:none;outline:none}
.c-row select.input{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:24px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23566270' stroke-width='2'/%3E%3C/svg%3E") no-repeat right center/16px}
.c-field{position:relative;flex:1;min-width:0}
.c-ccbtn{background:none;border:0;font:inherit;font-size:12px;color:var(--slate);cursor:pointer;padding:6px 0;flex-shrink:0}
.c-ccbtn:hover{color:var(--signal)}
.people{position:absolute;left:0;right:0;top:100%;z-index:20;background:var(--ink);color:var(--paper);border-bottom-left-radius:var(--r-btn);border-top-right-radius:var(--r-btn);padding:6px 0;max-height:260px;overflow:auto;box-shadow:0 10px 28px rgba(19,23,28,.25)}
.person{padding:9px 14px;cursor:pointer;font-size:14px;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.person .small{color:#A7B0BA}
.person.at,.person:hover{background:var(--signal)}
.person.at .small,.person:hover .small{color:var(--paper)}
.toolbar{display:grid;gap:6px;padding:9px 16px 11px;border-bottom:1px solid var(--rule);background:var(--paper)}
.tb-row{display:flex;flex-wrap:wrap;align-items:center;gap:3px}
.toolbar button[data-cmd]{display:inline-flex;align-items:center;justify-content:center;background:none;border:0;font:inherit;font-size:13px;color:var(--ink);height:30px;min-width:30px;padding:0 7px;cursor:pointer;border-bottom-left-radius:var(--r-tag);border-top-right-radius:var(--r-tag);line-height:1}
.toolbar button[data-cmd]:hover{background:var(--white)}
.toolbar button[data-cmd].on{background:var(--ink);color:var(--paper)}
.tb-sep{width:1px;height:20px;background:var(--rule);margin:0 6px}
.tb-pick{font:inherit;font-size:12.5px;color:var(--ink);background:var(--white);border:0;height:30px;padding:0 26px 0 9px;border-bottom-left-radius:var(--r-tag);border-top-right-radius:var(--r-tag);cursor:pointer;width:auto;box-shadow:none;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23566270' stroke-width='2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 7px center;background-size:13px}
.tb-pick:hover{background-color:var(--rule)}
.tb-style{min-width:118px}
.tb-size{min-width:88px}
.tb-colours{display:inline-flex;gap:3px;align-items:center;padding:0 3px}
.swatch{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;padding:0;border:0;cursor:pointer;color:var(--slate);border-bottom-left-radius:5px;border-top-right-radius:5px;box-shadow:inset 0 0 0 1px rgba(18,22,27,.14)}
.swatch:hover{outline:2px solid var(--ink);outline-offset:1px}
.swatch svg{width:12px;height:12px}
.editor img{max-width:100%;height:auto}
.editor .sig table{width:auto}
.editor .sig td{border:0;padding:0}
.linkbox{display:inline-flex;gap:6px;align-items:center;margin-left:6px}
.linkbox .input{padding:7px 10px;font-size:13px;width:260px;background:var(--white)}
.c-attach{margin-left:auto}
.c-attach .btn{display:inline-flex;align-items:center;gap:6px}
.editor{min-height:260px;padding:20px 22px;font-size:15px;line-height:1.6;outline:none;overflow-wrap:anywhere}
.editor:focus{box-shadow:inset 3px 0 0 var(--signal)}
.editor p{margin:0 0 1em}
.editor blockquote{margin:12px 0;padding:2px 0 2px 14px;border-left:2px solid var(--rule);color:var(--slate)}
.editor ul,.editor ol{margin:0 0 1em 1.4em}
.editor h2{font-size:19px;margin:0 0 .5em;text-transform:none;letter-spacing:0}
.editor h3{font-size:16px;margin:0 0 .5em;text-transform:none;letter-spacing:0}
.editor pre{background:var(--paper);padding:10px 12px;overflow-x:auto;font-family:var(--mono);font-size:13px;border-bottom-left-radius:var(--r-tag);border-top-right-radius:var(--r-tag)}
.editor hr{border:0;border-top:1px solid var(--rule);margin:1.2em 0}
.editor table{border-collapse:collapse}
.editor td,.editor th{border:1px solid var(--rule);padding:6px 9px}
.editor a{color:var(--signal)}
.c-attachments{margin:0 22px;padding-top:0;border-top:0}
.c-attachments:empty{display:none}
.attach.chip{flex-direction:row;align-items:center;gap:10px;padding-right:8px}
.attach.chip button{background:none;border:0;color:var(--slate);font-size:18px;line-height:1;cursor:pointer;padding:0 4px}
.attach.chip:hover{background:var(--paper);color:var(--ink)}
.attach.chip:hover .small{color:var(--slate)}
.attach.chip button:hover{color:var(--signal)}
.c-drop{margin:10px 22px 0}
.compose .btn-row{padding:0 22px 20px}
#c-status{color:var(--slate);margin-right:4px}
@media (max-width:700px){.tb-row{gap:2px}.toolbar button[data-cmd]{padding:0 5px;min-width:28px}.tb-sep{margin:0 3px}.tb-style{min-width:102px}.tb-size{min-width:78px}.c-row{padding:0 14px}.c-row label{width:48px}.toolbar{padding:6px 10px}.editor{padding:16px 14px}.c-attachments,.c-drop{margin-left:14px;margin-right:14px}.compose .btn-row{padding:0 14px 16px}.linkbox .input{width:160px}}

/* Printing a conversation: the messages and nothing else. */
@media print{
  .rail,.topbar,.page-head .btn-row,.msg-tools,.note{display:none!important}
  .shell{display:block}.main{padding:0}
  .mail-msg{box-shadow:none;border-bottom:1px solid #000;border-radius:0;page-break-inside:avoid}
  .mail-msg.collapsed .mail-body{display:block}.mail-msg.collapsed header .peek{display:none}
  .mail-msg header{cursor:default}
}


/* A meter on a coloured card: the track cannot be paper and the fill cannot be signal. */
.kpi.signal .bar-meter,.kpi.ink .bar-meter{background:rgba(255,255,255,.22)}
.kpi.signal .bar-meter i,.kpi.ink .bar-meter i{background:var(--paper)}
/* A table narrower than its contents scrolls itself rather than the page. */
.scroll-x{overflow-x:auto}

/* The typed sign-in code: mono figures, tracked, centred in the field. */
.code-in{font-family:var(--mono);font-size:22px;letter-spacing:.28em;text-align:center;text-indent:.28em;font-variant-numeric:tabular-nums}
.code-in::placeholder{color:var(--rule);letter-spacing:.28em}

/* Reading back a password while typing it. The control is a label, not an action:
   mono, slate, quiet — the orange on the page belongs to the sign-in button. */
.pw{position:relative;display:block}
.pw .input{padding-right:78px}
.pw .peek{position:absolute;right:2px;top:2px;bottom:2px;padding:0 14px;background:transparent;border:0;cursor:pointer;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);line-height:1}
.pw .peek:hover{color:var(--signal)}
.pw .peek:focus-visible{outline:2px solid var(--signal);outline-offset:-2px}

/* Buttons in an actions cell are written straight after one another, so there is no
   whitespace between them and they touch — only the corner rounding separated them,
   which read as an accident. The gap is 8px, what .btn-row uses everywhere else, and
   narrower than the 14px inside each button so each still reads as one object. */
.tbl td.actions .btn + .btn{margin-left:8px}

/* The QR for two-step, and the recovery codes that follow it. */
.qr{background:var(--paper);padding:18px;border-bottom-left-radius:var(--r-card);border-top-right-radius:var(--r-card);width:fit-content}
.qr svg{display:block;width:216px;height:216px}
.qr svg rect{fill:transparent}          /* the paper behind it is the quiet zone */
.qr svg path{fill:var(--ink)}
.recovery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.recovery span{background:var(--paper);padding:10px 12px;border-bottom-left-radius:var(--r-tag);border-top-right-radius:var(--r-tag);font-size:15px;letter-spacing:.06em;text-align:center}
@media (max-width:520px){.recovery{grid-template-columns:1fr}}

/* A field whose ending is fixed — the domain on an address. The tail sits inside the
   box in the mono face, quiet, and the input is padded so typing never runs under it. */
.suffixed{position:relative;display:block}
.suffixed .suffix{position:absolute;right:14px;top:0;bottom:0;display:flex;align-items:center;font-family:var(--mono);font-size:14px;color:var(--slate);pointer-events:none;user-select:none}

/* Icons in the topbar. They take the colour around them and sit on the same line as the
   mono label, so the strip reads as one thing rather than a picture next to some words.
   Named .gly rather than .ico: the marketing site already owns .ico at 30px in its own
   ink, and a glyph inheriting the chip's paper colour cannot share that. */
.gly{flex:none;display:block;color:inherit}
.topbar #crumb{display:inline-flex;align-items:center;gap:10px}
.topbar .chip .gly{opacity:.75}
.topbar .chip button{display:inline-flex;align-items:center;gap:7px}
.btn.sm{gap:7px}

/* What an access level opens: everything in the system, ticked or not, so the shape of a
   level is visible at a glance rather than only the parts it happens to include. */
.opens{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.opens li{position:relative;padding-left:24px;font-size:13.5px;line-height:1.45;color:var(--ink)}
.opens li.no{color:var(--slate)}
.opens li::before{position:absolute;left:0;top:1px;font-family:var(--mono);font-size:12px}
.opens li.yes::before{content:'✓';color:var(--signal)}
.opens li.no::before{content:'—';color:var(--rule)}


/* A photograph wears the same shape as the initials it replaces, so a row does not shift
   when someone adds one. Cropped square in the browser before it is ever uploaded. */
img.avatar{object-fit:cover;background:var(--paper)}
/* The quote builder. One question at a time, big enough to answer while holding a
   phone: the options are the targets, not a row of small radio buttons. */
.qprog{height:3px;max-width:680px;background:var(--rule);margin:-8px 0 18px;border-bottom-left-radius:3px;border-top-right-radius:3px;overflow:hidden}
.qprog i{display:block;height:100%;background:var(--signal);transition:width .3s ease}
.kpis.two{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:700px){.kpis.two{grid-template-columns:1fr}}
.qq{font-size:22px;line-height:1.25;margin:0 0 6px}
.qopts{display:grid;gap:8px}
.qopt{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;text-align:left;padding:15px 17px;font:inherit;font-size:15.5px;color:var(--ink);background:var(--paper);border:0;cursor:pointer;border-bottom-left-radius:var(--r-btn);border-top-right-radius:var(--r-btn)}
.qopt:hover{background:var(--rule)}
.qopt.on{background:var(--ink);color:var(--paper)}
.qopt.on:hover{background:var(--ink)}
.row3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:700px){.row3{grid-template-columns:1fr}.qq{font-size:19px}}

/* Every question in its own box, for a conversation that wanders. */
.qbox .qhead{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.qbox .qhead .gly{color:var(--signal);align-self:center}
.qbox.done{box-shadow:inset 3px 0 0 var(--rule)}
.qbox .qq{font-size:17px;margin:0 0 6px}
.qopt .small{display:block;opacity:.75;margin-top:2px}
/* On the one page, the answers sit as chips rather than as a column of slabs: a whole
   conversation has to be scannable without scrolling past it. One at a time keeps the
   big targets, because there is nothing else on the screen to compete with. */
.qbox .qopts{display:flex;flex-wrap:wrap;gap:8px}
.qbox .qopt{width:auto;padding:10px 14px;font-size:14px;gap:8px}
.qbox .qopt .small{display:none}
/* As chips, chosen is shown by the fill alone: a tick would widen each one as it is pressed
   and move every chip after it. One at a time, the slabs are full width and keep theirs. */
.qbox .qopt>.gly{display:none}
.qbox .stack{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.qbox .stack>*+*{margin-top:0}
@media (max-width:700px){.qbox .stack{grid-template-columns:1fr}}

/* The editor, built to look like the call it produces: sections down the left, the open
   section's questions as cards the shape they will be on the day. Wording reads as
   wording — the question is typed on the line it will appear on, not in a labelled box.
   Money is the only thing in a column of its own. */
.qn{max-width:1180px}
.input.sm{padding:8px 11px;font-size:13.5px}
.input.num{width:84px;text-align:right;font-family:var(--mono)}
.qn-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}

.qn-card{padding:18px 20px 16px}
.qn-card+.qn-card{margin-top:12px}
.qn-top{display:grid;grid-template-columns:20px minmax(0,1fr) auto auto;align-items:center;gap:8px}
.qn-grip{display:inline-flex;align-items:center;justify-content:center;width:20px;height:28px;background:none;border:0;color:var(--rule);cursor:grab;padding:0}
.qn-card:hover .qn-grip,.qn-nav:hover .qn-grip,.qn-grip:focus-visible{color:var(--slate)}
.qn-q,.qn-sub,.qn-secname{width:100%;background:none;border:0;padding:3px 4px;font:inherit;color:var(--ink);border-bottom-left-radius:var(--r-btn);border-top-right-radius:var(--r-btn)}
.qn-q{font-size:17px;font-weight:500}
.qn-sub{font-size:13.5px;color:var(--slate);margin:0 0 12px 28px;width:calc(100% - 28px)}
.qn-secname{font-size:20px;font-weight:500;max-width:420px}
.qn-q:hover,.qn-sub:hover,.qn-secname:hover{background:var(--paper)}
.qn-q:focus,.qn-sub:focus,.qn-secname:focus{background:var(--paper);outline:2px solid var(--ink);outline-offset:0}
.qn-q::placeholder,.qn-sub::placeholder,.qn-secname::placeholder{color:var(--slate)}
.qn-type{width:auto;background:var(--paper)}
.qn-sechead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}

.qn .qlayout{grid-template-columns:212px minmax(0,1fr);gap:22px}
.qn-ans,.qn-boxes{display:grid;gap:6px;margin-left:28px}
.qn-a{display:grid;grid-template-columns:20px minmax(0,1.5fr) 72px 68px 68px minmax(0,1fr) 28px;gap:8px;align-items:center}
.qn-b{display:grid;grid-template-columns:20px minmax(0,1.5fr) 104px 62px 28px;gap:8px;align-items:center}
.qn-b .qn-req{justify-content:center;margin:0}
.qn-p{display:grid;grid-template-columns:minmax(0,1fr) 68px 68px 28px;gap:8px;align-items:center}
.qn-a .input,.qn-b .input,.qn-p .input{min-width:0}
.qn-a>.btn,.qn-b>.btn,.qn-p>.btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0}
.qn-a .input.num,.qn-p .input.num{width:100%}
.qn-head{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate)}
.qn-head .r{text-align:right}
.qn-head .gap{padding-left:8px}
.qn-parts{margin:2px 0 6px 0;padding:10px 12px;background:var(--paper);display:grid;gap:6px;border-bottom-left-radius:var(--r-btn);border-top-right-radius:var(--r-btn)}
.qn-area{height:64px;margin-left:28px;background:var(--paper);border-bottom-left-radius:var(--r-btn);border-top-right-radius:var(--r-btn)}
.qn-who{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:14px 0 0 28px}
.qn-who .label{margin-right:2px}

.qn-nav{position:relative;padding-left:4px}
.qn-nav .qnav-name{cursor:pointer}
.qn-nav.drop{background:var(--paper);box-shadow:inset 2px 0 0 var(--signal)}
.drop-before{box-shadow:0 -2px 0 var(--signal)}
.drop-after{box-shadow:0 2px 0 var(--signal)}
@media (max-width:900px){
  .qn .qlayout{grid-template-columns:minmax(0,1fr)}
  .qn .qnav{position:static;flex-direction:row;flex-wrap:wrap;gap:6px}
  .qn .qn-nav{width:auto}
  .qn-a{grid-template-columns:20px minmax(0,1fr) 68px 68px 28px;row-gap:6px}
  .qn-a>:nth-child(2){grid-column:2/-1}
  .qn-a>:nth-child(3){grid-column:2;grid-row:2}
  .qn-a>:nth-child(4){grid-column:3;grid-row:2}
  .qn-a>:nth-child(5){grid-column:4;grid-row:2}
  .qn-a>:nth-child(6){grid-column:2/5;grid-row:3}
  .qn-a>:nth-child(7){grid-column:5;grid-row:2}
  .qn-b{grid-template-columns:20px minmax(0,1fr) 96px 40px 28px;row-gap:6px}
  .qn-p{grid-template-columns:minmax(0,1fr) 62px 62px 28px;row-gap:6px}
  .qn-head{display:none}
  .qn-ans,.qn-boxes,.qn-who,.qn-area{margin-left:0}
  .qn-sub{margin-left:0;width:100%}
  .qn-top{grid-template-columns:20px minmax(0,1fr) 28px;row-gap:8px}
  .qn-top>:nth-child(3){grid-column:1/-1;grid-row:2;width:100%}
  .qn-top>:nth-child(4){grid-column:3;grid-row:1;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0}
  .qn-sechead{flex-wrap:wrap;row-gap:8px}
  .qn-secname{font-size:18px}
}
.chip{font:inherit;font-size:12.5px;padding:7px 12px;border:0;cursor:pointer;background:var(--paper);color:var(--slate);border-bottom-left-radius:var(--r-btn);border-top-right-radius:var(--r-btn)}
.chip.on{background:var(--ink);color:var(--paper)}
.btn#q-save.on{background:var(--signal-dark)}
@media (max-width:700px){.input.num{width:70px}}

/* The board. A card says where it has got to and what it is still short of, because
   the point of looking at it is to find the thing that is stuck. */
.lead .slots{margin-top:8px;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--slate)}
.lead .slots.short{color:var(--signal)}
.lostbin{background:var(--paper);box-shadow:inset 0 0 0 1px var(--rule)}
.slots-table td{vertical-align:middle}
.slots-table tr.needed td{background:var(--signal-bg)}
.slots-table .dot{display:inline-block;width:8px;height:8px;background:var(--signal);border-bottom-left-radius:2px;border-top-right-radius:2px}
.slots-table .gly{color:var(--signal)}
.slots-table .input.sm{min-width:160px}
/* The right-hand column of a table is monospaced, which is right for a figure and
   wrong for a sentence. Words get the reading face back. */
.slots-table .r textarea,.slots-table .r input[type=text],.slots-table .r select{font-family:var(--sans);text-align:left}
.slots-table .r textarea{min-width:280px;line-height:1.5}

/* A field, on one line, thirty times over. */
.fld{display:grid;grid-template-columns:minmax(150px,1.3fr) 146px minmax(110px,1fr) minmax(140px,1.2fr) 66px auto;gap:8px;align-items:center;padding:8px 0;border-top:1px solid var(--rule)}
.fld:first-of-type{border-top:0}
.fld .mono{color:var(--slate);text-align:right;overflow:hidden;text-overflow:ellipsis}
@media (max-width:900px){.fld{grid-template-columns:1fr 1fr;grid-auto-rows:auto}.fld .mono{text-align:left}}

.filecell{display:inline-flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
/* Money: the £ sits before the figure, inside the box, where it is read. */
.suffixed.money{display:inline-block;position:relative;max-width:100%}
.suffixed.money .suffix{left:14px;right:auto;font-family:inherit;font-size:inherit;color:var(--slate);padding:0}
.suffixed.money .input{padding-left:30px;text-align:left}
.suffixed.money:has(.input.sm) .suffix{left:10px}
.suffixed.money:has(.input.sm) .input{padding-left:24px}
.qr-form .suffixed.money{display:block}

/* ---------- Contacts ---------- */
.people-list li{align-items:center}
.people-list .whobox{display:flex;gap:10px;align-items:center;min-width:0}
.people-list .min0{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px}
.people-list .min0 a,.people-list .min0 .small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.people-list .btn-row{flex:none;white-space:nowrap}
.docs-list .min0 .small{white-space:normal}
.docs-list .min0 .tag{vertical-align:2px}

/* ---------- Brand ---------- */
.br{display:grid;grid-template-columns:minmax(0,1fr) 210px;gap:28px;align-items:start}
.br-main{display:grid;gap:18px;min-width:0;grid-row:1}
.br-toc{grid-column:2;grid-row:1;position:sticky;top:22px;background:var(--white);padding:18px 18px 16px;border-bottom-left-radius:var(--r-card);border-top-right-radius:var(--r-card)}
.br-toc ol{list-style:none;margin:10px 0 14px;padding:0;display:grid;gap:2px}
.br-toc a{display:flex;gap:10px;align-items:baseline;border:0;color:var(--slate);font-size:13.5px;padding:5px 8px;margin:0 -8px;border-bottom-left-radius:var(--r-tag);border-top-right-radius:var(--r-tag)}
.br-toc a .mono{font-size:11px;color:var(--on-ink-dim);width:16px}
.br-toc a:hover{color:var(--ink);background:var(--paper)}
.br-toc a.on{color:var(--paper);background:var(--ink)}
.br-toc a.on .mono{color:#A7B0BA}
.br-toc .note{font-size:12.5px;margin:0}
@media (max-width:1180px){.br{grid-template-columns:minmax(0,1fr)}.br-toc{grid-column:1;grid-row:1;position:static}.br-toc ol{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}.br-main{grid-row:2}}

.br-cover{background:var(--signal);color:var(--paper);padding:42px 40px 34px;border-bottom-left-radius:var(--r-img);border-top-right-radius:var(--r-img)}
.br-cover-lock{display:flex;align-items:center;gap:28px;font-weight:600;letter-spacing:.10em;font-size:clamp(34px,5vw,64px);line-height:1}
.br-cover-lock svg{flex:none;width:clamp(56px,7vw,84px);height:auto}
.br-desc{margin:22px 0 0;font-size:16px;color:var(--paper);opacity:.92}

.br-sec{background:var(--white);padding:26px 28px 28px;border-bottom-left-radius:var(--r-card);border-top-right-radius:var(--r-card);scroll-margin-top:18px}
.br-head{display:grid;gap:10px;margin-bottom:18px;justify-items:start}
.br-head .htab{margin:0;font-size:19px;padding:10px 18px 10px 16px}
.br-sec h3{font-size:13px;letter-spacing:.1em;margin:0 0 10px}
.br-sec>h3{margin-top:28px}
.br-sec>.br-gap+h3{margin-top:0}
.br-sec .tbl.mid td{vertical-align:middle}
.br-sec p{max-width:68ch}
.br-lede{font-size:17px;color:var(--ink);max-width:62ch}
.br-gap{margin:22px 0}
.br-sec .two>div>p,.br-sec .two>div>ul{font-size:15px}
.br-flag{border-left:3px solid var(--signal);padding:4px 0 4px 14px;font-size:14px;color:var(--body);margin:16px 0 0}
.br-flag.ink{border-left-color:var(--ink)}
.br-rules{list-style:none;margin:0;padding:0;display:grid;gap:7px;font-size:14.5px}
.br-rules li{position:relative;padding-left:22px;color:var(--body)}
.br-rules li::before{position:absolute;left:0;top:0;font-family:var(--mono);font-size:13px}
.br-rules li.yes::before{content:"✓";color:#1E6B3A}
.br-rules li.no::before{content:"✕";color:var(--signal)}
.br-chips{display:flex;flex-wrap:wrap;gap:6px}
.br-chips .chip{background:var(--paper);color:var(--ink)}
.br-chips .chip:hover{background:var(--rule)}
.br-chips .chip.on{background:var(--ink);color:var(--paper)}
.br-controls{display:grid;align-content:start;justify-items:start;gap:6px;min-width:0}
.br-controls .tbl,.br-controls .br-slider{justify-self:stretch}
.br-controls-row{margin:10px 0 6px}
.br-slider{display:flex;align-items:center;gap:12px;margin:12px 0 4px;flex-wrap:wrap}
.br-slider input[type=range]{flex:1;min-width:140px;accent-color:var(--ink)}
.br-slider .mono{font-size:12.5px;color:var(--slate)}
.br-slider.bad .mono{color:var(--signal)}
.br-check{display:grid;gap:10px}
.br-findings .br-rules{font-size:14px}

/* the name */
.br-etym{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:4px 0 18px}
.br-etym-part,.br-etym-out{display:grid;gap:2px;background:var(--paper);border:0;font:inherit;text-align:left;padding:12px 16px;border-bottom-left-radius:var(--r-btn);border-top-right-radius:var(--r-btn);cursor:pointer}
.br-etym-out{background:var(--ink);color:var(--paper);cursor:default}
.br-etym-out .small{color:#A7B0BA}
.br-word{font-weight:600;font-size:22px;letter-spacing:.04em}
.br-plus{font-family:var(--mono);color:var(--slate);font-size:18px}
.br-join .a,.br-join .b{transition:color .2s ease}
.br-etym[data-lit="tekton"] .br-etym-part[data-part="tekton"],.br-etym[data-lit="cura"] .br-etym-part[data-part="cura"]{background:var(--ink);color:var(--paper)}
.br-etym[data-lit="tekton"] .br-etym-part[data-part="tekton"] .small,.br-etym[data-lit="cura"] .br-etym-part[data-part="cura"] .small{color:#A7B0BA}
.br-etym[data-lit="tekton"] .br-join .a,.br-etym[data-lit="cura"] .br-join .b{color:var(--signal-dark)}
.br-beats{display:flex;gap:6px;margin:4px 0 12px}
.br-beats span{font-family:var(--mono);font-size:15px;padding:8px 12px;background:var(--paper);border-bottom-left-radius:var(--r-tag);border-top-right-radius:var(--r-tag)}
.br-beats .stress{background:var(--ink);color:var(--paper);font-weight:600}
.br-descriptor{background:var(--paper);padding:34px 28px;border-bottom-left-radius:var(--r-card);border-top-right-radius:var(--r-card);margin:0 0 8px;font-size:22px}

/* the mark */
.br-stage-wrap{display:grid;grid-template-columns:minmax(260px,380px) minmax(0,1fr);gap:26px;margin:18px 0 6px;align-items:start}
@media (max-width:900px){.br-stage-wrap{grid-template-columns:minmax(0,1fr)}}
.br-stage{aspect-ratio:1;border-bottom-left-radius:var(--r-img);border-top-right-radius:var(--r-img);display:grid;place-items:center;transition:background .2s ease,color .2s ease;box-shadow:inset 0 0 0 1px var(--rule)}
.br-stage[data-ground="white"]{background:var(--white);color:var(--ink)}
.br-stage[data-ground="paper"]{background:var(--paper);color:var(--ink);box-shadow:none}
.br-stage[data-ground="ink"]{background:var(--ink);color:var(--paper);box-shadow:none}
.br-stage[data-ground="signal"]{background:var(--signal);color:var(--paper);box-shadow:none}
.br-construct{width:88%;height:auto;overflow:visible}
.br-construct .lay-grid line{stroke:#7FB2D6;stroke-width:.25;opacity:.8}
.br-construct .lay-build *{stroke:#2B7BB9;stroke-width:.5;opacity:.95;transition:stroke-width .15s ease,opacity .15s ease}
.br-construct .dash{stroke-dasharray:1.6 1.2}
.br-construct .lay-space rect{stroke:var(--signal);stroke-width:.5}
.br-construct .lay-space .cap{font-family:var(--mono);font-size:4px;fill:var(--signal);letter-spacing:.05em}
.br-stage[data-ground="ink"] .lay-space rect,.br-stage[data-ground="ink"] .lay-space .cap{stroke:var(--signal-dark);fill:var(--signal-dark)}
.br-stage[data-ground="ink"] .lay-space rect{fill:none}
.br-stage[data-ground="signal"] .lay-space rect{stroke:var(--paper)}
.br-stage[data-ground="signal"] .lay-space .cap{fill:var(--paper)}
.br-stage[data-ground="ink"] .lay-build *,.br-stage[data-ground="signal"] .lay-build *{stroke:#9FD0F5}
.br-construct .lay-grid,.br-construct .lay-build,.br-construct .lay-space{opacity:0;transition:opacity .2s ease}
.br-stage.show-grid .lay-grid,.br-stage.show-build .lay-build,.br-stage.show-space .lay-space{opacity:1}
.br-stage[data-part]:not([data-part=""]) .lay-build *{opacity:.2}
.br-stage[data-part="tbox"] [data-part="tbox"],.br-stage[data-part="bar"] [data-part="bar"],.br-stage[data-part="stem"] [data-part="stem"],.br-stage[data-part="blockr"] [data-part="blockr"],.br-stage[data-part="tr"] [data-part="tr"]{opacity:1;stroke-width:1.2;stroke:var(--signal)}
.br-stage[data-part="block"] .the-mark{opacity:.75}
.br-parts tbody tr{cursor:default}
.br-parts tbody tr:hover td{background:var(--paper)}

/* size and space */
.br-size-box{height:190px;display:grid;place-items:center;background:var(--paper);border-bottom-left-radius:var(--r-card);border-top-right-radius:var(--r-card);color:var(--ink);overflow:hidden}
.br-size-box.too-small{box-shadow:inset 0 0 0 2px var(--signal)}
.br-space-box{--gap:24px;position:relative;height:190px;display:grid;place-items:center;background:var(--paper);border-bottom-left-radius:var(--r-card);border-top-right-radius:var(--r-card);color:var(--ink);overflow:hidden}
.br-space-zone{position:absolute;width:144px;height:144px;left:50%;top:50%;transform:translate(-50%,-50%);outline:1px dashed var(--on-ink-dim);outline-offset:0}
.br-space-box::after{content:"";position:absolute;top:18px;bottom:18px;width:3px;background:var(--slate);left:calc(50% + 48px + var(--gap));transition:background .15s ease}
.br-space-box.crossed::after{background:var(--signal)}
.br-space-box.crossed .br-space-zone{outline-color:var(--signal);background:rgba(194,65,12,.07)}
.br-lockup-box{background:var(--paper);padding:34px 30px;border-bottom-left-radius:var(--r-card);border-top-right-radius:var(--r-card);color:var(--ink);overflow-x:auto}
.br-lockup{position:relative;display:inline-flex;align-items:center;gap:24px;font-weight:600;letter-spacing:.10em;font-size:52px;line-height:1}
.br-lockup svg{flex:none}
.br-lockup-box.measure .br-lockup::before{content:"⅓ of the mark · 24px";position:absolute;left:72px;width:24px;top:-22px;font-family:var(--mono);font-size:10px;letter-spacing:.04em;white-space:nowrap;color:var(--signal)}
.br-lockup-box.measure .br-lockup::after{content:"";position:absolute;left:72px;width:24px;top:-6px;bottom:-6px;background:rgba(194,65,12,.18);border-left:1px solid var(--signal);border-right:1px solid var(--signal)}
.br-lockup-box.measure .br-lockup{background:linear-gradient(var(--signal),var(--signal)) 0 50%/100% 1px no-repeat}

/* misuse */
.br-misuse{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:18px 0}
@media (max-width:700px){.br-misuse{grid-template-columns:repeat(2,minmax(0,1fr))}}
.br-mis{display:grid;gap:10px;background:var(--paper);border:0;font:inherit;padding:18px 14px 12px;color:var(--ink);cursor:pointer;text-align:left;border-bottom-left-radius:var(--r-card);border-top-right-radius:var(--r-card);position:relative}
.br-mis:hover{box-shadow:inset 0 0 0 1px var(--rule)}
.br-mis-art{height:110px;display:grid;place-items:center}
.br-mis-svg{width:84px;height:84px;overflow:visible}
.br-mis-cap .label{display:none}
.br-mis.wrong .br-mis-cap .no{display:inline;color:var(--signal)}
.br-mis.right .br-mis-cap .yes{display:inline;color:#1E6B3A}
.br-mis.wrong::after{content:"✕";position:absolute;top:10px;right:12px;font-family:var(--mono);color:var(--signal);font-size:13px}
.br-mis.right::after{content:"✓";position:absolute;top:10px;right:12px;font-family:var(--mono);color:#1E6B3A;font-size:13px}
.br-mis *{transition:transform .35s cubic-bezier(.4,0,.2,1),fill .25s ease,stroke .25s ease,filter .25s ease,gap .35s ease,opacity .25s ease}
.m-stretch{transform-origin:49.5px 49.5px}
.wrong .m-stretch{transform:scaleX(1.4)}
.m-rotate{transform-origin:49.5px 49.5px}
.wrong .m-rotate{transform:rotate(14deg)}
.m-split{fill:transparent}
.wrong .m-split{fill:var(--signal)}
.m-eff-path{fill:currentColor}
.wrong .m-effects{filter:drop-shadow(3px 5px 2px rgba(0,0,0,.45))}
.wrong .m-eff-path{fill:url(#br-grad)}
.br-mis-lockup{display:inline-flex;align-items:center;gap:13px;font-weight:600;letter-spacing:.10em;font-size:22px}
.br-mis-lockup svg{flex:none}
.wrong .m-crowd{gap:1px;letter-spacing:-.02em}
.m-outline{fill:currentColor;stroke:currentColor;stroke-width:0}
.wrong .m-outline{fill:transparent;stroke-width:2.2}
.br-mis-on{display:grid;place-items:center;width:120px;height:104px;background:var(--signal);color:var(--ink);border-bottom-left-radius:var(--r-btn);border-top-right-radius:var(--r-btn)}
.br-mis-on .br-mis-svg{width:70px;height:70px}
.m-fill{fill:transparent}
.wrong .m-fill{fill:var(--white)}
.br-mis-photo{width:150px;height:100px;display:grid;place-items:center;color:var(--paper);background:radial-gradient(circle at 30% 30%,#E8A060,#8A4A1C 45%,#2A1A12 80%);border-bottom-left-radius:var(--r-btn);border-top-right-radius:var(--r-btn);position:relative}
.right .br-mis-photo{background:linear-gradient(90deg,#2A1A12 0 60%,var(--ink) 60%);justify-items:end;padding-right:12px}
.wrong .br-mis-photo svg{color:rgba(242,241,238,.9)}
.m-corners-wrong{opacity:1}
.m-corners-right{opacity:0}
.right .m-corners-wrong{opacity:0}
.right .m-corners-right{opacity:1}

/* colour */
.br-swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px 16px;margin:18px 0 10px}
.br-sw{display:grid;gap:4px;align-content:start}
.br-sw-chip{height:64px;border-bottom-left-radius:var(--r-btn);border-top-right-radius:var(--r-btn);margin-bottom:6px}
.br-sw .small{font-size:13px}
.br-copy-row{display:flex;gap:4px;flex-wrap:wrap}
.br-copy{background:var(--paper);border:0;font-size:11.5px;padding:3px 7px;cursor:pointer;color:var(--ink);border-bottom-left-radius:4px;border-top-right-radius:4px}
.br-copy:hover{background:var(--ink);color:var(--paper)}
.br-contrast{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin:6px 0 24px}
.br-contrast-pick{grid-template-columns:44px minmax(0,1fr);align-items:center;column-gap:12px;row-gap:8px}
.br-contrast-pick .label{margin:0!important}
.br-contrast-pick{display:grid;gap:6px}
.br-contrast-sample{display:grid;gap:6px;padding:24px 22px;border-bottom-left-radius:var(--r-card);border-top-right-radius:var(--r-card)}
.br-ratio{display:flex;align-items:center;gap:12px;margin-top:12px;flex-wrap:wrap}
.br-ratio .mono{font-size:22px}
.br-jobs{margin:8px 0 14px}
.br-jobs>div{display:grid;gap:6px;align-content:start;background:var(--paper);padding:16px;border-bottom-left-radius:var(--r-card);border-top-right-radius:var(--r-card)}
.br-job-demo{height:48px;display:flex;align-items:center}
.br-jobs .br-flag{background:var(--white);padding:8px 12px}

/* type */
.br-weights{display:flex;flex-wrap:wrap;gap:12px 28px;font-size:26px;margin:14px 0 20px;color:var(--ink)}
.br-tester{display:grid;gap:12px;margin-bottom:18px}
.br-type-out{min-height:84px;display:flex;align-items:center;padding:18px 20px;background:var(--paper);border-bottom-left-radius:var(--r-card);border-top-right-radius:var(--r-card);overflow-wrap:anywhere}
.br-scale tr[data-role]{cursor:pointer}
.br-scale tr[data-role]:hover td{background:var(--paper)}
.br-scale tr.on td{background:var(--paper);font-weight:600}
.br-scale tr.on td:first-child{box-shadow:inset 3px 0 0 var(--ink);padding-left:12px}
.br-measure{background:var(--paper);padding:18px 20px;border-bottom-left-radius:var(--r-card);border-top-right-radius:var(--r-card);margin-top:6px;overflow:hidden}
.br-measure p{font-size:17px;line-height:1.62;color:var(--ink);margin:0}

/* setting text — the alignment rule, shown */
.br-align{margin:12px 0 4px}
.br-align-demo{background:var(--paper);padding:18px 20px;margin-top:12px;border-bottom-left-radius:var(--r-card);border-top-right-radius:var(--r-card)}
.br-align-demo p{font-size:16px;line-height:1.62;margin:0;max-width:none}
.br-align-demo[data-align=justify] p{text-align:justify;hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:7 3 3}
.br-align-demo[data-align=left] p{text-align:left}
.br-align-demo[data-align=centre] p{text-align:center}
.br-align-demo[data-align=centre]{box-shadow:inset 3px 0 0 var(--signal)}

/* social images */
.br-posts{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin:14px 0 4px}
.br-posts figure{margin:0;display:grid;gap:8px}
.br-posts canvas{width:100%;height:auto;border-bottom-left-radius:var(--r-btn);border-top-right-radius:var(--r-btn);background:var(--paper)}
.br-sizes{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:18px;margin:14px 0 4px}
.br-sizes>div{display:grid;gap:4px;align-content:start}
.br-sizes b{margin-top:6px}
.br-fr{height:100px;display:flex;align-items:flex-end}
.br-fr i{display:block;background:var(--paper);box-shadow:inset 0 0 0 1px var(--rule);border-bottom-left-radius:var(--r-btn);border-top-right-radius:var(--r-btn);position:relative;overflow:hidden}
.br-fr i.safe::before,.br-fr i.safe::after{content:"";position:absolute;left:0;right:0;background:var(--rule)}
.br-fr i.safe::before{top:0;height:12px}
.br-fr i.safe::after{bottom:0;height:14px}
.br-grounds{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:4px}
.br-gr{padding:14px 14px 12px;display:grid;gap:8px;justify-items:start;border-bottom-left-radius:var(--r-btn);border-top-right-radius:var(--r-btn)}
.br-gr-chip{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:4px 8px;background:var(--signal);color:var(--paper);border-bottom-left-radius:var(--r-tag);border-top-right-radius:var(--r-tag)}
.br-gr.paper{background:var(--paper);box-shadow:inset 0 0 0 1px var(--rule)}
.br-gr.white{background:var(--white);box-shadow:inset 0 0 0 1px var(--rule)}
.br-gr.ink{background:var(--ink);color:var(--paper)}
.br-gr.signal{background:var(--signal);color:var(--paper)}
.br-gr.signal .br-gr-chip{background:var(--ink)}

/* documents */
.br-doc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:26px;margin:14px 0 4px;align-items:start}
@media (max-width:900px){.br-doc{grid-template-columns:minmax(0,1fr)}.br-grounds{grid-template-columns:1fr}}
.br-doc-sheet{overflow:hidden;background:var(--white);border-bottom-left-radius:var(--r-card);border-top-right-radius:var(--r-card)}
.br-doc-sheet .tm-paper{transform:scale(.58);transform-origin:top left;width:172.4%;box-shadow:none;border-radius:0;padding:42px 48px 46px}
.br-doc-sheet{height:330px}


/* corners */
.br-corner{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:26px;margin:16px 0 8px;align-items:center}
@media (max-width:900px){.br-corner{grid-template-columns:minmax(0,1fr)}}
.br-corner-stage{min-height:280px;display:grid;place-items:center;background:var(--paper);border-bottom-left-radius:var(--r-card);border-top-right-radius:var(--r-card);padding:20px}
.br-corner-shape{width:min(100%,340px);background:var(--ink);color:var(--paper);display:grid;place-items:center;font-size:13px;letter-spacing:.06em;text-transform:uppercase;font-weight:500;transition:border-radius .2s ease}
.br-verdict{font-size:14px;margin:10px 0 0;padding-left:22px;position:relative}
.br-verdict::before{position:absolute;left:0;font-family:var(--mono)}
.br-verdict.yes::before{content:"✓";color:#1E6B3A}
.br-verdict.no::before{content:"✕";color:var(--signal)}
.br-rad-demo{display:block;width:100px;background:var(--ink)}
.br-layer{position:relative;height:44px;margin:8px 0 4px;max-width:520px}
.br-layer span{position:absolute;top:0;bottom:0;display:flex;align-items:center;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:0 18px;transition:left .3s ease}
.br-layer .a{left:0;right:0;background:var(--paper);color:var(--slate);border-bottom-left-radius:var(--r-tab);border-top-right-radius:var(--r-tab)}
.br-layer .b{right:0;background:var(--ink);color:var(--paper);border-bottom-left-radius:var(--r-tab);border-top-right-radius:var(--r-tab)}
.br-layer[data-mode="butted"] .a{right:128px;border-top-right-radius:0;border-bottom-right-radius:0}
.br-layer[data-mode="butted"] .b{width:128px;border-bottom-left-radius:0;justify-content:center}

/* imagery */
.br-photo-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:18px 0 4px}
@media (max-width:900px){.br-photo-row{grid-template-columns:minmax(0,1fr)}}
.br-photo-row figure{margin:0;display:grid;gap:10px}
.br-photo{position:relative;aspect-ratio:4/3;background:radial-gradient(ellipse at 45% 20%,#F0B070 0,#C06A28 22%,#5A2A10 52%,#1A0E0A 85%);border-bottom-left-radius:var(--r-img);border-top-right-radius:var(--r-img);overflow:hidden}
.br-photo-panel{position:absolute;left:14px;bottom:14px;right:auto;font-size:14px;font-weight:500;padding:10px 14px;transition:all .25s ease;background:var(--white);color:var(--ink);border-bottom-left-radius:var(--r-btn);border-top-right-radius:var(--r-btn)}
.br-photo[data-type="bare"] .br-photo-panel{background:transparent;color:#F7C9A3;left:24px;bottom:40%;padding:0}
.br-photo-mark{position:absolute;display:grid;place-items:center;color:var(--paper);transition:all .3s ease}
.br-photo[data-mark="beside"] .br-photo-mark{right:0;top:0;bottom:0;width:34%;background:var(--ink)}
.br-photo[data-mark="beside"]{background:radial-gradient(ellipse at 30% 20%,#F0B070 0,#C06A28 22%,#5A2A10 52%,#1A0E0A 85%)}
.br-photo[data-mark="on"] .br-photo-mark{right:24%;top:30%;width:auto;background:transparent;color:rgba(242,241,238,.85)}
.br-ar{display:inline-block;vertical-align:middle;margin-left:14px;height:24px;background:var(--ink);border-bottom-left-radius:4px;border-top-right-radius:4px}

/* voice */
.br-pairs{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin:18px 0 22px}
.br-pair{display:flex;flex-direction:column;gap:8px;text-align:left;border:0;font:inherit;background:var(--paper);padding:18px;cursor:pointer;color:var(--body);font-size:15px;line-height:1.55;border-bottom-left-radius:var(--r-card);border-top-right-radius:var(--r-card);min-height:170px}
.br-pair .yes,.br-pair .br-pair-yes{display:none}
.br-pair .label{align-self:flex-start}
.br-pair .no{color:var(--signal)}
.br-pair.flipped{background:var(--ink);color:var(--paper)}
.br-pair.flipped .no,.br-pair.flipped .br-pair-no{display:none}
.br-pair.flipped .yes,.br-pair.flipped .br-pair-yes{display:block}
.br-pair.flipped .yes{color:#A7B0BA}
.br-pair-hint{margin-top:auto;color:var(--slate)}
.br-pair.flipped .br-pair-hint{visibility:hidden}
.br-pair-no{text-decoration:line-through;text-decoration-color:rgba(194,65,12,.45)}
.br-voice-stats{color:var(--slate)}

/* motion */
.br-motion{display:grid;grid-template-columns:minmax(0,320px) 140px minmax(0,1fr);gap:24px;align-items:center;margin:18px 0 20px}
@media (max-width:900px){.br-motion{grid-template-columns:minmax(0,1fr)}}
.br-draft{position:relative;height:180px}
.br-draft-line{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.br-draft-line path{fill:none;stroke:var(--ink);stroke-width:1;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:0}
.br-draft-fill{position:absolute;inset:0;display:grid;align-content:end;gap:4px;padding:18px 20px;background:var(--paper);border-bottom-left-radius:var(--r-card);border-top-right-radius:var(--r-card)}
.br-draft-mark svg{overflow:visible}
.br-draft-mark .o{fill:none;stroke:var(--ink);stroke-width:1;stroke-dasharray:1;stroke-dashoffset:0}
.br-draft-mark .f{fill:var(--ink);opacity:1}
@media (prefers-reduced-motion:no-preference){
  .br-draft.go .br-draft-line path{animation:br-draw 1.1s cubic-bezier(.4,0,.2,1) both}
  .br-draft.go .br-draft-fill{animation:br-fill .5s ease .95s both}
  .br-draft-mark.go .o{animation:br-draw 1.2s cubic-bezier(.4,0,.2,1) both}
  .br-draft-mark.go .f{animation:br-fill .45s ease 1.1s both}
}
@keyframes br-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes br-fill{from{opacity:0}to{opacity:1}}

/* in use */
.br-credit{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 20px;color:var(--paper);border-bottom-left-radius:var(--r-card);border-top-right-radius:var(--r-card);transition:background .2s ease}
.br-credit[data-on="ink"]{background:var(--ink)}
.br-credit[data-on="signal"]{background:var(--signal)}
.br-credit-lock{display:inline-flex;align-items:center;gap:10px}
.br-credit-lock>span{display:grid;line-height:1.15}
.br-credit-lock .label{color:inherit;opacity:.8;font-size:9.5px}
.br-credit-lock b{letter-spacing:.10em;font-size:13px}
.br-credit .mono{font-size:12px;opacity:.85}
.br-avatars{display:flex;align-items:flex-end;gap:22px;background:var(--paper);padding:22px;border-bottom-left-radius:var(--r-card);border-top-right-radius:var(--r-card)}
.br-av{width:96px;height:96px;display:grid;place-items:center;background:var(--ink);color:var(--paper);border-bottom-left-radius:var(--r-card);border-top-right-radius:var(--r-card)}
.br-fav{display:grid;justify-items:center;gap:6px}
.br-sig{background:var(--white);box-shadow:inset 0 0 0 1px var(--rule);padding:22px 24px;border-bottom-left-radius:var(--r-card);border-top-right-radius:var(--r-card);margin-bottom:8px;overflow-x:auto}
.br-sig .sig{margin-top:0!important}
.br-file-thumb{display:grid;place-items:center;width:34px;height:34px;border-bottom-left-radius:var(--r-tag);border-top-right-radius:var(--r-tag);background:var(--paper)}
.br-file-thumb.inkbg{background:var(--ink)}
.br-file-thumb img{width:22px;height:22px}
.br-code{background:var(--ink);color:#D6DADF;font-family:var(--mono);font-size:12.5px;line-height:1.7;padding:18px 20px;margin:0 0 10px;overflow-x:auto;border-bottom-left-radius:var(--r-card);border-top-right-radius:var(--r-card)}
.br-internal{margin-top:6px}
.br-internal-inner{background:var(--paper);padding:20px 22px;border-bottom-left-radius:var(--r-card);border-top-right-radius:var(--r-card)}
.br-internal-inner .label{display:block;margin-bottom:8px}
.br-internal-inner .tbl td{border-color:var(--rule)}
.br-main>*{min-width:0}
.br-sec .tbl .r{white-space:normal}
.br-parts td.r{font-size:12.5px}
@media (max-width:1100px){.br-stage-wrap{grid-template-columns:minmax(0,1fr)}.br-stage{max-width:420px}}
@media (max-width:600px){
  .br-sec{padding:20px 16px 22px}
  .br-cover{padding:28px 20px 24px}
  .br-cover-lock{gap:16px;font-size:30px}
  .br-cover-lock svg{width:48px}
  .br-lockup{font-size:34px;gap:16px}
  .br-lockup svg{width:48px;height:48px}
  .br-lockup-box.measure .br-lockup::before,.br-lockup-box.measure .br-lockup::after{left:48px;width:16px}
  .br-pairs{grid-template-columns:minmax(0,1fr)}
  .br-misuse{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .br-mis-photo{width:120px}
  .br-files td:nth-child(3){display:none}
  .br-files th:nth-child(2){display:none}
  .br-credit{flex-wrap:wrap}
}

/* ---------- Dashboards ----------
   Four columns, and a panel spans one to four of them. The gap is the one the page's
   other grids use (.two), so a dashboard sits in the same rhythm as every other page. */
.dash-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;align-items:stretch}
.dash-grid>*{min-width:0}
@media (max-width:1100px){.dash-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dash-grid>[style*="span 3"],.dash-grid>[style*="span 4"]{grid-column:span 2!important}}
@media (max-width:700px){.dash-grid{grid-template-columns:minmax(0,1fr)}.dash-grid>*,.dash-grid>[style*="span"]{grid-column:1/-1!important}}
.dash-tabs{margin-bottom:18px}
.dash-tabs .boxtab{border:0;text-decoration:none}
.dash-tab-extra{opacity:.7}
.dash-about{margin:-10px 0 18px;color:var(--slate)}
.dash-live{display:inline-flex;align-items:center;gap:7px}
.live-dot{width:7px;height:7px;background:var(--status);border-radius:50%;box-shadow:0 0 0 0 rgba(47,158,91,.45);animation:live-pulse 2.4s ease-out infinite}
@keyframes live-pulse{0%{box-shadow:0 0 0 0 rgba(47,158,91,.45)}70%{box-shadow:0 0 0 6px rgba(47,158,91,0)}100%{box-shadow:0 0 0 0 rgba(47,158,91,0)}}
@media (prefers-reduced-motion:reduce){.live-dot{animation:none}}
.dpanel .tbl{margin-top:-4px}
.dash-cards{align-items:stretch}
.dash-cards .dpanel{display:flex;flex-direction:column}
.dash-card-foot{margin-top:auto;padding-top:14px}
.dash-welcome{margin-bottom:14px}
.dash-welcome .note{margin:0}
/* Changing the layout: each panel carries its controls above its content. */
.dash-grid.editing .is-editing{box-shadow:inset 0 0 0 1px var(--rule)}
.dash-tools{display:flex;gap:6px;align-items:center;margin:-6px 0 14px;padding-bottom:12px;border-bottom:1px solid var(--rule)}
.dash-tools-end{display:inline-flex;gap:4px;margin-left:auto}
.dash-tools-end .btn.sm{min-width:30px;justify-content:center;padding:7px 8px}
.kpi.ink .dash-tools,.kpi.signal .dash-tools{border-bottom-color:rgba(255,255,255,.18)}
.dash-tools{flex-wrap:nowrap}
@container (max-width:300px){.dash-tool-word{display:none}.dash-tools .btn.sm{padding:7px 8px}}
.dash-tools .input.sm{width:auto;max-width:118px;padding:7px 8px;font-size:12px}
.dash-tools .btn.sm{padding:7px 10px}
/* All dashboards */
.dash-filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:14px}
.dash-filters .input.sm{width:auto;min-width:180px;padding:8px 12px;font-size:13px}
.dash-filters #dcount{margin-left:auto}
.th-sort{background:none;border:0;padding:0;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;cursor:pointer}
.th-sort.on,.th-sort:hover{color:var(--ink)}
/* The panel editor */
.pe-filters{display:grid;gap:8px;margin-bottom:8px}
.pe-filter{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.3fr) auto;gap:8px;align-items:stretch}
.pe .check,.pe .field label.check{font-family:var(--sans);text-transform:none;letter-spacing:0;font-size:14px;color:var(--ink)}
.pe-filter .input.sm{padding:8px 10px;font-size:13px;width:100%}
.pe-checks{gap:6px 14px}
.pe-preview{grid-template-columns:minmax(0,1fr);background:var(--paper);padding:14px;border-bottom-left-radius:var(--r-card);border-top-right-radius:var(--r-card)}
.pe-preview>*{grid-column:span 1!important}
@media (max-width:700px){.pe-filter{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
/* Pinning */
.pin-icons{display:grid;grid-template-columns:repeat(auto-fill,minmax(42px,1fr));gap:6px}
.pin-icon{display:flex;align-items:center;justify-content:center;height:42px;background:var(--paper);border:0;color:var(--ink);cursor:pointer;border-bottom-left-radius:var(--r-btn);border-top-right-radius:var(--r-btn);box-shadow:inset 0 0 0 1px var(--rule)}
.pin-icon:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.pin-icon.on{background:var(--ink);color:var(--paper);box-shadow:none}
.pin-preview{display:flex;align-items:center;gap:14px}
.rail-sample{display:inline-flex;background:var(--signal);color:var(--paper);padding:8px 12px;font-size:14px;font-weight:500;border-bottom-left-radius:var(--r-btn);border-top-right-radius:var(--r-btn);min-width:180px}
.rail-sample .navname{display:flex;align-items:center;gap:11px}

/* ---------- History ---------- */
.hist-list{margin-top:14px}
.hist-entry{display:block!important;padding:12px 0!important}
.hist-line{display:flex;justify-content:space-between;gap:14px;align-items:baseline}
.hist-changes{margin-top:8px}
.hist-changes th,.hist-changes td{padding:6px 10px 6px 0}
.hist-changes th:first-child{width:30%}
.hist-long summary{cursor:pointer}
.hist-long pre{white-space:pre-wrap;font-size:12px;max-height:240px;overflow:auto;background:var(--paper);padding:10px;margin-top:6px}
.dpanel .tbl th.r,.dpanel .tbl td.r{padding-left:16px}
.dash-table .nowrap{white-space:nowrap}
.dash-table td .check{justify-content:center}
.dash-table .c{text-align:center}
.hist-changes{table-layout:fixed}
.hist-changes td{overflow-wrap:anywhere}

/* ---------- Widgets ----------
   Marks are thin and the data is the only loud thing: 2px lines, columns no wider than
   24px with a rounded data end, hairline grid, one accent. Text never takes a series
   colour — a swatch beside it says which is which. */
.w-click{cursor:pointer}
.kpi.w-click:hover,.panel .w-click:hover{filter:brightness(.97)}
.w-scroll{overflow-x:auto}
.w-more{margin-top:10px}
.linkish:hover{color:var(--ink)}
.w-head-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:12px}
.w-head-row h3{margin-bottom:0}
.w-last{color:var(--ink);font-weight:600}
.w-meter-row{display:flex;justify-content:space-between;gap:10px}
/* Text */
.w-text p{margin:0 0 10px;max-width:none}
.w-text p:last-child,.w-text ul:last-child{margin-bottom:0}
.w-text .w-head{font-size:15px;font-weight:600;letter-spacing:0;text-transform:none;margin:4px 0 6px}
.w-bullets{margin:0 0 10px;padding-left:18px}
.w-bullets li{margin:3px 0}
/* Bars */
.w-bars li{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,2fr) auto;align-items:center;gap:12px}
.w-bars .bar-meter{margin-top:0}
.w-bar-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.w-bar-v{text-align:right;min-width:3.5em}
/* Gauge */
.w-gauge{display:flex;flex-direction:column;align-items:center}
.w-gauge svg{width:100%;max-width:220px;display:block;overflow:visible}
.w-gauge-track{fill:none;stroke:var(--paper);stroke-width:10}
.w-gauge-fill{fill:none;stroke:var(--signal);stroke-width:10}
.w-gauge-read{text-align:center;margin-top:-18px}
.w-gauge-value{font-weight:600;font-size:28px;line-height:1.1;letter-spacing:-.01em;color:var(--ink)}
.w-gauge-bar .w-meter{height:12px;margin:10px 0 8px}
/* Pie */
.dpanel{container-type:inline-size}
.w-pie{display:grid;grid-template-columns:148px minmax(0,1fr);align-items:center;gap:18px 24px}
.w-pie svg{width:148px;height:148px;display:block}
@container (max-width:380px){.w-pie{grid-template-columns:minmax(0,1fr)}.w-pie svg{margin:0 auto}}
.w-pie-slices path,.w-pie-slices circle{stroke:var(--white);stroke-width:1.4;stroke-linejoin:round}
.w-pie-hole{fill:var(--white)}
.w-legend{list-style:none;margin:0;padding:0;min-width:0}
.w-legend li{display:grid;grid-template-columns:10px minmax(0,1fr) auto 3.2em;align-items:center;gap:10px;padding:6px 0;border-top:1px solid var(--rule);font-size:14px}
.w-legend li:first-child{border-top:0}
.w-legend-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.w-legend-pct{text-align:right}
.w-swatch{width:10px;height:10px;border-radius:3px}
/* Over time */
.w-chart{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:170px auto;column-gap:10px;row-gap:6px}
.w-y{grid-row:1;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;font-family:var(--mono);font-size:11px;color:var(--slate);margin:-7px 0;font-variant-numeric:tabular-nums}
.w-plot{grid-row:1;grid-column:2;position:relative}
.w-grid i{position:absolute;left:0;right:0;height:1px;background:var(--rule)}
.w-grid i.w-target{background:var(--ink);height:1px}
.w-x{grid-row:2;grid-column:2;display:flex}
.w-xl{flex:1 1 0;min-width:0;text-align:center;font-family:var(--mono);font-size:11px;color:var(--slate);white-space:nowrap;overflow:visible}
.w-xl[data-hide]{visibility:hidden}
.w-cols{position:absolute;inset:0;display:flex;align-items:flex-end;gap:2px}
.w-col{flex:1 1 0;height:100%;display:flex;align-items:flex-end;justify-content:center}
.w-col i{display:block;width:min(24px,72%);border-radius:4px 4px 0 0;min-height:0}
.w-col:hover i{background:var(--signal-dark)}
.w-line{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.w-stroke{fill:none;stroke:var(--signal);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.w-area{fill:var(--signal);opacity:.1}
.w-dot{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--signal);box-shadow:0 0 0 2px var(--white);transform:translate(-50%,-50%)}
.w-dot::after{content:"";position:absolute;inset:-8px}
/* Hover */
.w-tip{position:fixed;z-index:95;pointer-events:none;background:var(--ink);color:var(--paper);font-size:12.5px;padding:7px 10px;border-bottom-left-radius:var(--r-tag);border-top-right-radius:var(--r-tag);max-width:260px}
/* Arranging */
.dash-grip{display:inline-flex;align-items:center;justify-content:center;width:26px;height:30px;background:none;border:0;color:var(--slate);cursor:grab;padding:0}
.dash-grip:hover{color:var(--ink)}
.kpi.ink .dash-grip,.kpi.signal .dash-grip{color:inherit}
.is-editing{position:relative}
.is-editing.dragging{opacity:.45}
.is-editing.drop-before{box-shadow:inset 3px 0 0 var(--signal)!important}
.is-editing.drop-after{box-shadow:inset -3px 0 0 var(--signal)!important}
.dash-resize{position:absolute;top:18px;bottom:18px;right:-9px;width:18px;cursor:ew-resize;touch-action:none;z-index:2}
.dash-resize::after{content:"";position:absolute;top:50%;left:7px;width:4px;height:36px;margin-top:-18px;border-radius:2px;background:var(--rule);transition:background .15s ease}
.dash-resize:hover::after,.resizing .dash-resize::after{background:var(--signal)}
.is-editing.resizing{box-shadow:inset 0 0 0 2px var(--signal)!important}
.is-editing.resizing::before{content:attr(data-span);position:absolute;top:-11px;right:14px;background:var(--signal);color:var(--paper);font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;border-bottom-left-radius:var(--r-tag);border-top-right-radius:var(--r-tag)}
.pe-when{display:flex;gap:8px}
.pe-when .input{min-width:0}
.pe-hint{margin:-6px 0 0}

/* Rows and cards reached from the keyboard show where the keyboard is. */
tr.row-link:focus-visible,.lead:focus-visible,[data-action][role="button"]:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
#dlg-ask{max-width:min(460px,94vw)}

/* ---------- Social planner ---------- */
.sp-month{min-width:140px;text-align:center}
.sp-stats{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr) minmax(0,1.9fr);gap:14px;margin-bottom:18px}
.sp-big{font-size:32px;font-weight:600;line-height:1;margin-top:12px;font-variant-numeric:tabular-nums}
.sp-big small{font-size:14px;font-weight:400;color:var(--slate);margin-left:8px}
.sp-next{display:block;margin-top:12px;color:var(--ink);border:0;text-decoration:none}
.sp-next b{display:block;font-size:19px;font-weight:600}
.sp-next span{display:block;font-size:13.5px;color:var(--slate);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-bars{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:14px}
.sp-bars div{display:grid;grid-template-columns:1fr auto;gap:7px 6px;align-items:start}
.sp-bars i{grid-column:1/-1;display:block;height:8px;background:var(--paper);border-bottom-left-radius:4px;border-top-right-radius:4px;position:relative;overflow:hidden}
.sp-bars i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w);background:var(--ink)}
.sp-bars span{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--slate);line-height:1.35}
.sp-bars em{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--ink)}
.sp-bars .quiet span,.sp-bars .quiet em{color:var(--signal)}
.sp-bars .quiet i::after{background:var(--signal)}
.sp-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:18px;align-items:start}
.sp-cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.sp-dow{margin-bottom:6px}
.sp-dow div{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);padding:0 8px}
.sp-day{background:var(--white);min-height:112px;padding:7px 7px 8px;border-bottom-left-radius:var(--r-btn);border-top-right-radius:var(--r-btn);display:flex;flex-direction:column;gap:6px;transition:box-shadow .12s ease,background .12s ease}
.sp-day.off{background:transparent}
.sp-day.past{background:var(--paper)}
.sp-day.today{box-shadow:inset 0 0 0 2px var(--ink)}
.sp-n{display:flex;align-items:center;justify-content:space-between;font-family:var(--mono);font-size:11px;color:var(--slate);min-height:20px}
.sp-day.today .sp-n span{color:var(--ink);font-weight:600}
.sp-add{border:0;background:transparent;color:var(--slate);font:inherit;font-size:15px;line-height:1;width:22px;height:22px;cursor:pointer;opacity:0;border-bottom-left-radius:5px;border-top-right-radius:5px}
.sp-day:hover .sp-add,.sp-add:focus-visible{opacity:1}
.sp-add:hover{background:var(--paper);color:var(--ink)}
@media (hover:none){.sp-add{opacity:1}}
.sp-over{box-shadow:inset 0 0 0 2px var(--signal)!important;background:var(--signal-bg)!important}
.sp-post{display:block;border:0;text-decoration:none;background:var(--paper);padding:5px;border-bottom-left-radius:7px;border-top-right-radius:7px;color:var(--ink);cursor:grab;min-width:0}
.sp-post:hover{background:var(--rule);color:var(--ink)}
.sp-post.dragging{opacity:.45}
.sp-post b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:11.5px;font-weight:500;line-height:1.3;margin:5px 2px 2px}
.sp-post small{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--slate);margin:0 2px}
.sp-post small::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:5px;vertical-align:1px;box-shadow:inset 0 0 0 1.2px var(--slate)}
.sp-post.posted small::before{background:var(--status);box-shadow:none}
.sp-post.approved small::before{background:var(--ink);box-shadow:none}
.sp-post.dropped{opacity:.5}
.sp-post.dropped b{text-decoration:line-through}
.sp-th{display:block;height:44px;overflow:hidden;border-bottom-left-radius:5px;border-top-right-radius:5px}
.sp-th img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.sp-th.words{display:flex;align-items:flex-end;padding:5px 6px}
.sp-th.words em{font-style:normal;font-size:9px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;line-height:1.15;color:var(--paper);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sp-th.words.light{box-shadow:inset 0 0 0 1px var(--rule)}
.sp-th.words.light em{color:var(--ink)}
.sp-undated{margin-top:14px;background:var(--white);padding:18px 20px;border-bottom-left-radius:var(--r-card);border-top-right-radius:var(--r-card);transition:box-shadow .12s ease}
.sp-undated h3{font-size:13px;letter-spacing:.1em;margin-bottom:12px}
.sp-undated-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
.sp-ideas h3{font-size:13px;letter-spacing:.1em}
.sp-ideas>.note{margin:6px 0 12px}
.sp-idea{background:var(--white);padding:16px 18px;margin-bottom:10px;border-bottom-left-radius:14px;border-top-right-radius:14px;cursor:grab;transition:box-shadow .15s ease,transform .15s ease}
.sp-idea:hover{box-shadow:0 6px 18px rgba(18,22,27,.08)}
.sp-idea.dragging{opacity:.5}
.sp-idea.more{display:none}
.sp-idea .label{display:block;line-height:1.4}
.sp-idea .sp-quiet{color:var(--signal)}
.sp-idea h4{font-size:15px;font-weight:600;line-height:1.3;margin:8px 0 5px}
.sp-idea p{font-size:13px;line-height:1.5;color:var(--body);margin:0 0 12px}
.sp-idea-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sp-link{border:0;background:none;padding:4px 0;font:inherit;font-size:12.5px;color:var(--slate);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.sp-link:hover{color:var(--ink)}
.sp-pillar{margin-left:auto;font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--slate)}
.sp-more{width:100%;justify-content:center}
.sp-how{margin-top:14px}
.sp-how summary{cursor:pointer;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate)}
.sp-how p{margin-top:10px}
@media (max-width:1180px){.sp-grid{grid-template-columns:minmax(0,1fr)}.sp-ideas{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}.sp-ideas>h3,.sp-ideas>.note,.sp-how,.sp-more{grid-column:1/-1}.sp-idea{margin:0}}
@media (max-width:900px){.sp-stats{grid-template-columns:1fr 1fr}.sp-balance{grid-column:1/-1}}
@media (max-width:700px){
  .sp-stats{grid-template-columns:1fr}
  .sp-bars{grid-template-columns:1fr;gap:8px}.sp-bars div{grid-template-columns:130px 1fr auto;align-items:center}.sp-bars i{grid-column:2;order:2}.sp-bars span{order:1}.sp-bars em{order:3}
  .sp-cal{gap:3px}.sp-dow div{padding:0 2px;font-size:9px;letter-spacing:.04em}
  .sp-day{min-height:62px;padding:4px}.sp-post{padding:2px}.sp-post b,.sp-post small{display:none}.sp-th{height:22px}.sp-th.words em{display:none}.sp-add{display:none}
}

/* ---------- Post designer ---------- */
.pk-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-bottom:16px}
.pk-steps button{display:flex;align-items:center;gap:10px;border:0;background:var(--white);color:var(--slate);font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;padding:13px 16px;cursor:pointer;border-bottom-left-radius:var(--r-btn);border-top-right-radius:var(--r-btn);text-align:left}
.pk-steps button b{font-weight:400;color:var(--ink)}
.pk-steps button:hover{color:var(--ink);background:var(--rule)}
.pk-steps button.on{background:var(--ink);color:var(--paper)}
.pk-steps button.on b{color:#F08A4B}
.pk-next{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px}
.pk-next .btn.ghost{background:var(--white)}
.pk-next .btn.ghost:hover{background:var(--ink)}
.pk-saved{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.pk textarea{background:var(--paper);font-size:14.5px;line-height:1.55;padding:12px 14px}
.pk-words{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:start}
.pk-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.pk-tabs .boxtab{background:var(--paper)}
.pk-tabs .boxtab.on{background:var(--ink)}
.pk-ver-foot{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.pk-ver-foot .mono{font-size:11px;color:var(--slate);letter-spacing:.08em;margin-top:10px;white-space:nowrap}
.pk-design{display:grid;grid-template-columns:196px minmax(0,1fr) 300px;gap:14px;align-items:start}
.pk-rail{display:grid;grid-template-columns:1fr 1fr;gap:8px;position:sticky;top:14px}
.pk-lay{border:0;background:var(--white);padding:6px 6px 8px;cursor:pointer;text-align:left;border-bottom-left-radius:12px;border-top-right-radius:12px;box-shadow:inset 0 0 0 2px transparent;transition:box-shadow .12s ease}
.pk-lay:hover{box-shadow:inset 0 0 0 2px var(--rule)}
.pk-lay.on{box-shadow:inset 0 0 0 2px var(--signal)}
.pk-lay-name{display:block;min-height:2.5em;margin-top:7px;font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);line-height:1.25}
.pk-mini{display:block;position:relative;aspect-ratio:1;background:var(--paper);overflow:hidden;border-bottom-left-radius:7px;border-top-right-radius:7px}
.pk-mini i,.pk-mini b{position:absolute;display:block}
.pk-i-pic{background:#B9BEC4;border-bottom-left-radius:4px;border-top-right-radius:4px}
.pk-i-pic.dim{background:#D4D6D8}
.pk-i-bar{height:7%;background:var(--ink)}
.pk-i-bar.big{height:11%}
.pk-i-line{height:4%;background:#9AA0A7}
.pk-i-line.thick{height:6%;background:var(--ink)}
.pk-i-fig{left:12%;top:14%;font-size:24px;font-weight:600;line-height:1;color:var(--ink)}
.pk-i-q{left:10%;top:2%;font-size:36px;font-weight:600;line-height:1;color:var(--signal)}
.pk-i-phone{background:var(--ink);border-radius:5px;box-shadow:inset 0 0 0 3px var(--ink),inset 0 0 0 20px #B9BEC4}
.pk-stage{background:#E6E4DE;padding:26px 22px 18px;display:flex;flex-direction:column;align-items:center;border-bottom-left-radius:var(--r-card);border-top-right-radius:var(--r-card)}
.pk-canvas{width:100%;display:flex;justify-content:center}
.pk-canvas canvas{display:block;width:auto;height:auto;max-width:100%;max-height:min(66vh,620px);box-shadow:0 16px 40px rgba(18,22,27,.16)}
.pk-seg{display:flex;flex-wrap:wrap;gap:4px}
.pk-seg button{border:0;background:var(--paper);color:var(--ink);font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;padding:9px 11px;cursor:pointer;border-bottom-left-radius:7px;border-top-right-radius:7px}
.pk-seg button:hover{background:var(--rule)}
.pk-seg button.on{background:var(--ink);color:var(--paper)}
.pk-sizes{margin-top:20px;justify-content:center}
.pk-sizes button{background:var(--white)}
.pk-size-note{margin-top:8px;text-align:center}
.pk-slides{display:flex;flex-wrap:wrap;gap:5px;margin-top:16px;justify-content:center;align-items:center}
.pk-slides button{border:0;min-width:34px;height:34px;background:var(--white);font-family:var(--mono);font-size:12px;cursor:pointer;border-bottom-left-radius:7px;border-top-right-radius:7px}
.pk-slides button.on{background:var(--ink);color:var(--paper)}
.pk-slides .pk-slide-del{background:none;font-family:var(--sans);font-size:12.5px;color:var(--slate);text-decoration:underline;text-underline-offset:3px;padding:0 8px}
.pk-slide-note{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--signal);margin-bottom:12px}
.pk-controls .field{margin-bottom:16px}
.pk-controls .field:last-child{margin-bottom:0}
.pk-controls .input,.pk-controls textarea{background:var(--paper)}
.pk-pick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.pk-pick button,.pk-up{border:0;padding:0;aspect-ratio:1;overflow:hidden;background:var(--paper);cursor:pointer;border-bottom-left-radius:7px;border-top-right-radius:7px;box-shadow:inset 0 0 0 2px transparent;transition:box-shadow .12s ease}
.pk-pick button img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.pk-pick button:hover{box-shadow:0 0 0 2px var(--rule)}
.pk-pick button.on{box-shadow:0 0 0 2px var(--white),0 0 0 4px var(--signal)}
.pk-up{display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--slate);position:relative}
.pk-up input{position:absolute;inset:0;opacity:0;cursor:pointer}
.pk-up:focus-within{box-shadow:0 0 0 2px var(--ink)}
.pk-up span{font-size:22px;line-height:1}
.pk-up small{font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;margin-top:4px}
.pk-none{font-family:var(--mono);font-size:9.5px!important;letter-spacing:.08em;text-transform:uppercase;color:var(--slate)}
.pk-swatches{display:flex;gap:10px}
.pk-sw{width:38px;height:38px;border:0;cursor:pointer;border-bottom-left-radius:9px;border-top-right-radius:9px;box-shadow:inset 0 0 0 1px var(--rule)}
.pk-sw.on{box-shadow:inset 0 0 0 1px var(--rule),0 0 0 2px var(--white),0 0 0 4px var(--ink)}
.pk-preview{display:grid;grid-template-columns:auto minmax(0,1fr);gap:28px;align-items:start}
.pk-feed{background:#E6E4DE;padding:28px;border-bottom-left-radius:var(--r-card);border-top-right-radius:var(--r-card)}
.pk-phone{width:340px;background:#fff;border-radius:34px;box-shadow:0 0 0 10px var(--ink),0 22px 50px rgba(18,22,27,.22);overflow:hidden;margin:10px}
.pk-ig-top,.pk-fb-top{display:flex;align-items:center;gap:10px;padding:12px 14px;font-size:13.5px}
.pk-fb-top small{display:block;font-size:11.5px;color:#65676B}
.pk-av{width:32px;height:32px;border-radius:50%;background:var(--ink);color:var(--paper);display:grid;place-items:center;flex:none}
.pk-av svg{width:15px;height:15px}
.pk-ig-img img,.pk-fb-img img{display:block;width:100%;height:auto;background:var(--paper)}
.pk-ig-img[data-size="story"],.pk-ig-img[data-size="wide"]{background:#000}
.pk-ig-act{display:flex;gap:14px;padding:11px 14px 4px}
.pk-ig-act svg{width:22px;height:22px;fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linejoin:round}
.pk-ig-cap{padding:4px 14px 18px;font-size:13px;line-height:1.45;word-break:break-word}
.pk-tagged{color:#00376B}
.pk-card-feed{width:420px;background:#fff;box-shadow:0 12px 34px rgba(18,22,27,.12);border-radius:10px;overflow:hidden}
.pk-fb-text{padding:0 14px 12px;font-size:14px;line-height:1.45;word-break:break-word}
.pk-fb-act{display:flex;justify-content:space-around;padding:10px 14px;border-top:1px solid #E4E6EB;font-size:13px;font-weight:500;color:#65676B}
.pk-checks{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:9px}
.pk-checks li{position:relative;padding-left:24px;font-size:14px;line-height:1.45}
.pk-checks li::before{content:"✓";position:absolute;left:0;top:0;font-weight:600;color:#2F7A4B}
.pk-checks li.bad::before{content:"!";color:var(--signal);left:5px}
.pk-post-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-bottom:14px}
.pk-do{list-style:none;counter-reset:do;margin:4px 0 0;padding:0;display:grid;gap:10px}
.pk-do li{counter-increment:do;display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:14px}
.pk-do li span::before{content:counter(do);display:inline-grid;place-items:center;width:22px;height:22px;margin-right:10px;background:var(--paper);font-family:var(--mono);font-size:11px;border-bottom-left-radius:5px;border-top-right-radius:5px}
.pk-share{margin-top:14px;width:100%;justify-content:center}
@media (max-width:1240px){.pk-design{grid-template-columns:minmax(0,1fr) 300px}.pk-rail{grid-column:1/-1;position:static;display:flex;overflow-x:auto;padding-bottom:4px}.pk-lay{flex:0 0 96px}}
@media (max-width:900px){.pk-words,.pk-design,.pk-preview{grid-template-columns:minmax(0,1fr)}.pk-feed{display:flex;justify-content:center;padding:18px}.pk-phone{width:min(340px,86vw)}.pk-card-feed{width:100%}}
@media (max-width:700px){.pk-steps button{padding:10px 8px;font-size:10px;letter-spacing:.06em;gap:6px;flex-direction:column;align-items:flex-start}.pk-stage{padding:16px 10px}.pk-next{position:sticky;bottom:0;background:var(--paper);padding:10px 0}}

/* ---------- Team ---------- */
.tm-nav{display:flex;gap:6px;flex-wrap:wrap;margin:-4px 0 18px}
.tm-nav a{border:0;background:var(--white);color:var(--ink);font-size:13px;font-weight:500;padding:9px 15px;border-bottom-left-radius:var(--r-btn);border-top-right-radius:var(--r-btn)}
.tm-nav a:hover{background:var(--rule);color:var(--ink)}
.tm-nav a.on{background:var(--ink);color:var(--paper)}
.hub-n{display:inline-block;min-width:18px;margin-left:6px;padding:1px 5px;font-size:11px;line-height:16px;text-align:center;background:var(--rule);color:var(--ink)}
.tm-nav a.on .hub-n{background:rgba(255,255,255,.18);color:var(--paper)}
@media (max-width:700px){.hub-nav{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-right:-16px;padding-right:16px}.hub-nav::-webkit-scrollbar{display:none}.hub-nav a{white-space:nowrap;flex:none}}
.tm-tag{display:inline-block;flex:none;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:5px 8px;background:var(--paper);color:var(--slate);white-space:nowrap;border-bottom-left-radius:5px;border-top-right-radius:5px}
.tm-tag.ok{background:#E6EFE7;color:#1E6B3A}.tm-tag.ink{background:var(--ink);color:var(--paper)}.tm-tag.sig{background:var(--signal-bg);color:var(--signal-text)}
.tm-hol{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:14px}
.tm-big{font-size:32px;font-weight:600;line-height:1;margin:12px 0 8px;font-variant-numeric:tabular-nums}
.tm-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:start}
.tm-two.wide-left{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr)}
.tm-row-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.tm-row-head h3{margin:0}
.panel .tm-row-head+.tm-kv,.panel .tm-row-head+ul,.panel .tm-row-head+p{margin-top:12px}
.tm-list,.tm-checks,.tm-steps,.tm-law,.tm-reviews{list-style:none;margin:0;padding:0}
.tm-list li+li,.tm-checks li+li,.tm-steps li+li,.tm-law li+li,.tm-reviews li+li{border-top:1px solid var(--rule-soft)}
.tm-list b,.tm-step,.tm-checks b{display:block;font-weight:600;font-size:14.5px;line-height:1.35}
.tm-list small,.tm-step small,.tm-checks small{display:block;font-size:13px;color:var(--slate);margin-top:2px;line-height:1.4}
.tm-list li{display:flex;align-items:center;gap:12px;padding:11px 0;flex-wrap:wrap}
.tm-list li>a,.tm-list li>span:first-child{flex:1;min-width:0;border:0;color:var(--ink)}
.tm-list li>a:hover b{text-decoration:underline;text-underline-offset:3px}
.tm-tick{display:flex;gap:12px;align-items:flex-start;padding:11px 0;cursor:pointer}
.tm-tick input{width:18px;height:18px;margin-top:2px;accent-color:var(--ink);flex:none}
.tm-law li{display:grid;grid-template-columns:130px 1fr;gap:12px;padding:11px 0;font-size:14px;line-height:1.5}
.tm-law b{font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--signal);padding-top:2px}
.tm-stage{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--signal);margin:20px 0 2px}
.tm-steps li{display:flex;align-items:center;gap:12px;padding:11px 0}
.tm-box{width:22px;height:22px;flex:none;display:grid;place-items:center;font-size:13px;color:var(--paper);box-shadow:inset 0 0 0 1.5px var(--rule);border-bottom-left-radius:var(--r-tag);border-top-right-radius:var(--r-tag);margin:0;appearance:none;-webkit-appearance:none;background:var(--white);cursor:pointer}
span.tm-box{cursor:default}
.tm-box.on,.tm-box:checked{box-shadow:none}
input.tm-box:checked::after{content:"✓";color:var(--paper);font-size:13px}
input.tm-box:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.tm-step{flex:1;min-width:0}
.tm-step a{border:0;color:var(--ink)}
.tm-step a:hover{text-decoration:underline;text-underline-offset:3px}
.tm-steps li.done .tm-step{color:var(--slate)}
.tm-steps li.done .tm-t{text-decoration:line-through;text-decoration-color:var(--on-ink-dim)}
.tm-t{display:block}
.tm-when{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--slate);white-space:nowrap}
.tm-x{border:0;background:none;color:var(--slate);font-size:18px;line-height:1;width:26px;height:26px;cursor:pointer;opacity:.5}
.tm-x:hover{opacity:1;color:var(--ink)}
.tm-kv{grid-template-columns:150px 1fr;gap:10px 14px;font-size:14.5px}
.tm-kv dd{margin:0}
.tm-draw{display:flex;flex-wrap:wrap;gap:8px}
.tm-draw{margin-top:0}
.tm-file{position:relative;overflow:hidden}
.tm-file input{position:absolute;inset:0;opacity:0;cursor:pointer}
.tm-file:focus-within{outline:2px solid var(--signal);outline-offset:2px}
.tm-callout{box-shadow:inset 3px 0 0 var(--signal);margin-bottom:14px}
.tm-plain{margin:8px 0 0;padding-left:18px;display:grid;gap:8px;font-size:14px;line-height:1.5;color:var(--body)}
.tm-pre{white-space:pre-wrap;font-size:14px;line-height:1.55;margin-top:6px}
.tm-reviews li{padding:14px 0}
.tm-reviews p{margin-top:10px;font-size:14.5px;line-height:1.55}
.tm-lesson-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.tm-lesson-card{display:flex;flex-direction:column;gap:6px;border:0;color:var(--ink);min-height:150px;transition:box-shadow .15s ease}
.tm-lesson-card:hover{color:var(--ink);box-shadow:0 8px 22px rgba(18,22,27,.08)}
.tm-lesson-card b{font-size:17px;font-weight:600;line-height:1.3}
.tm-lesson-card small{color:var(--slate);font-size:13px}
.tm-lesson-card .tm-tag{align-self:flex-start;margin-top:auto}
.tm-lesson{display:grid;grid-template-columns:250px minmax(0,1fr);gap:14px;align-items:start}
.tm-toc{position:sticky;top:14px;display:flex;flex-direction:column;gap:2px}
.tm-toc a{display:flex;gap:10px;align-items:baseline;padding:9px 10px;font-size:14px;line-height:1.35;border:0;color:var(--ink);border-bottom-left-radius:8px;border-top-right-radius:8px}
.tm-toc a:hover{background:var(--paper);color:var(--ink)}
.tm-toc a.on{background:var(--ink);color:var(--paper)}
.tm-toc a span{font-family:var(--mono);font-size:11px;color:var(--slate)}
.tm-toc a.on span{color:var(--on-ink-dim)}
.tm-toc a em{font-style:normal;margin-left:auto;color:var(--status)}
.tm-toc a.on em{color:#8FD3A7}
.tm-prose{padding:30px 38px 36px}
.tm-prose .tm-title{font-size:30px;font-weight:600;line-height:1.2;letter-spacing:0;text-transform:none;margin:8px 0 18px}
.tm-prose h2{font-size:20px;font-weight:600;letter-spacing:0;text-transform:none;margin:28px 0 10px;scroll-margin-top:20px}
.tm-prose p,.tm-prose li{font-size:16px;line-height:1.7;color:var(--body);max-width:68ch}
.tm-prose p{margin:0 0 12px}
.tm-prose ul{margin:0 0 14px;padding-left:20px}
.tm-prose li+li{margin-top:6px}
.tm-prose strong{color:var(--ink);font-weight:600}
.tm-opt{clear:both;display:flex;gap:10px;align-items:center;background:var(--white);padding:11px 14px;margin-top:8px;font-size:15px;cursor:pointer;border-bottom-left-radius:8px;border-top-right-radius:8px;box-shadow:inset 0 0 0 2px transparent}
.tm-opt input{accent-color:var(--ink);width:16px;height:16px;flex:none}
.tm-opt:has(input:checked){box-shadow:inset 0 0 0 2px var(--ink)}
.tm-opt.answer{box-shadow:inset 0 0 0 2px var(--status)}
.tm-optedit{display:flex;gap:10px;align-items:center}
.tm-optedit input[type=radio]{accent-color:var(--ink);width:18px;height:18px;flex:none}
.tm-doc-wrap{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:14px;align-items:start}
.tm-doc-side{display:grid;gap:14px;position:sticky;top:14px}
.tm-paper{background:var(--white);padding:56px 64px 60px;box-shadow:0 1px 0 var(--rule);border-top-right-radius:var(--r-card);border-bottom-left-radius:var(--r-card)}
.tm-paper-mark{display:flex;align-items:center;gap:10px;font-weight:600;letter-spacing:.1em;font-size:14px;margin-bottom:34px}
.tm-paper-mark svg{width:24px;height:24px}
.tm-paper h1{font-size:28px;font-weight:600;letter-spacing:0;text-transform:none;line-height:1.2;margin:0 0 24px}
.tm-paper h2{font-size:16px;font-weight:600;letter-spacing:0;text-transform:none;margin:24px 0 8px}
.tm-paper p,.tm-paper li{font-size:15px;line-height:1.65;color:var(--ink-raised);max-width:72ch}
.tm-paper p{margin:0 0 10px}
.tm-paper ul{padding-left:20px;margin:0 0 12px}
.tm-blank{background:var(--signal-bg);color:var(--signal);padding:1px 4px;font-family:var(--mono);font-size:.82em;border-bottom-left-radius:3px;border-top-right-radius:3px}
.tm-doc-edit{width:100%;font-family:var(--mono);font-size:13px;line-height:1.6;background:var(--paper)}
.tm-sigs{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:40px;padding-top:24px;border-top:1px solid var(--rule)}
.tm-sig{font-size:22px!important;font-style:italic;margin:8px 0 2px!important;color:var(--ink)!important}
.tm-sigs small{font-size:12px;color:var(--slate)}
.tm-hash{margin-top:28px!important;font-family:var(--mono);font-size:10px!important;color:var(--slate)!important;word-break:break-all}
.tm-sign-name{font-size:17px}
@media (max-width:1100px){.tm-doc-wrap,.tm-lesson{grid-template-columns:minmax(0,1fr)}.tm-toc,.tm-doc-side{position:static}.tm-toc{flex-direction:row;flex-wrap:wrap}.tm-toc h3{width:100%}}
@media (max-width:900px){.tm-two,.tm-two.wide-left{grid-template-columns:minmax(0,1fr)}.tm-hol{grid-template-columns:1fr 1fr}}
@media (max-width:700px){.tm-prose{padding:22px 18px}.tm-paper{padding:28px 20px}.tm-kv{grid-template-columns:1fr;gap:2px 0}.tm-kv dd{margin-bottom:10px}.tm-law li{grid-template-columns:1fr;gap:4px}.tm-sigs{grid-template-columns:1fr}}
@media print{
  body.staff .rail,body.staff .topbar,body.staff .page-head,body.staff .tm-doc-side,body.staff .toast{display:none!important}
  body.staff .main{padding:0!important;margin:0!important}
  .tm-doc-wrap{display:block}
  .tm-paper{box-shadow:none;padding:0}
  .tm-blank{background:none;color:#000}
}

.tm-headline{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.tm-gap{font:inherit;font-size:14px;color:var(--ink);background:var(--signal-bg);border:0;box-shadow:inset 0 -2px 0 var(--signal);padding:3px 6px;margin:0 2px;max-width:100%;border-top-right-radius:4px;border-bottom-left-radius:4px}
.tm-gap::placeholder{color:var(--signal-text);opacity:1}
.tm-gap:focus{outline:2px solid var(--ink);outline-offset:1px;background:var(--white)}

/* ---------- Before launch (temporary page) ---------- */
.todo-intro{max-width:72ch;margin:-10px 0 18px}
.todo-add{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;margin-bottom:6px}
.todo-add .input{padding:12px 14px;font-size:15px}
@media (max-width:700px){.todo-add{grid-template-columns:minmax(0,1fr);}.todo-add .btn{justify-content:center}}
.todo-list{list-style:none;margin:8px 0 0;padding:0}
.todo{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:14px;padding:14px 0;border-top:1px solid var(--rule)}
.todo-tick{display:flex;align-items:center;height:24px}
.todo-tick input{width:18px;height:18px;accent-color:var(--signal);cursor:pointer}
.todo-body{min-width:0}
.todo-title{background:none;border:0;padding:0;font:inherit;font-size:15px;font-weight:500;color:var(--ink);text-align:left;cursor:pointer}
.todo-title:hover{color:var(--signal)}
.todo-note{margin:4px 0 0;max-width:72ch;white-space:pre-wrap}
.todo-meta{display:flex;align-items:center;gap:10px;margin:8px 0 0;color:var(--slate)}
.todo-meta .tag{font-size:10px;padding:4px 8px}
.todo.done .todo-title{text-decoration:line-through;text-decoration-thickness:2px}
/* Ticked by the proprietor: the brand orange. By anyone else: ink. */
.todo.by-owner .todo-title,.todo.by-owner .todo-meta .small{color:var(--signal)}
.todo.by-owner .todo-tick input{accent-color:var(--signal)}
.todo.by-owner .todo-meta .tag{background:var(--signal);color:var(--paper)}
.todo.by-other .todo-title,.todo.by-other .todo-meta .small{color:var(--ink)}
.todo.by-other .todo-tick input{accent-color:var(--ink)}
.todo.by-other .todo-meta .tag{background:var(--ink);color:var(--paper)}
.todo.done .todo-note{display:none}
.todo-tools .btn.sm{min-width:30px;justify-content:center;padding:7px 8px}
.todo-split{margin-top:14px;color:var(--slate)}
.todo-done-panel{margin-top:14px}
.todo-done-head{display:flex;width:100%;align-items:baseline;justify-content:space-between;gap:12px;background:none;border:0;padding:0;font:inherit;cursor:pointer;text-align:left}
.todo-done-head h3{margin:0}

/* A job's page, in the sections the board sets. */
.jobsec{margin-top:18px}
.jobsec:first-of-type{margin-top:10px}
.jobsec-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 6px;padding-bottom:6px;border-bottom:1px solid var(--rule)}
.jobsec-head .small{font-family:var(--sans);letter-spacing:0;text-transform:none;font-weight:400}
.jobsec.waiting .jobsec-head{border-bottom-color:var(--signal)}
.jobsec .slots-table{margin-top:0}
/* The quote builder: sections down the side, the questions beside them. */
.qlayout{display:grid;grid-template-columns:236px minmax(0,680px);gap:26px;align-items:start}
/* All of them: every section on one page, each with its heading, the list at the side jumping down to it. */
.qsec+.qsec{margin-top:34px}
.qsec{scroll-margin-top:84px}
@media (max-width:900px){.qlayout{grid-template-columns:minmax(0,1fr)}}
.qnav{display:flex;flex-direction:column;gap:2px;position:sticky;top:18px}
.qnav-item{display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;gap:8px;width:100%;background:none;border:0;padding:9px 10px;font:inherit;font-size:14px;color:var(--slate);text-align:left;cursor:pointer;border-bottom-left-radius:var(--r-btn);border-top-right-radius:var(--r-btn)}
.qnav-item:hover{background:var(--white);color:var(--ink)}
.qnav-item.on{background:var(--ink);color:var(--paper)}
.qnav-item.done .qnav-name{color:var(--ink)}
.qnav-item.on .qnav-name,.qnav-item.on .qnav-left{color:var(--paper)}
.qnav-tick{display:flex;align-items:center;justify-content:center;width:22px;color:var(--signal)}
.qnav-item.on .qnav-tick{color:var(--paper)}
.qnav-name{overflow:hidden;text-overflow:ellipsis;font-weight:500}
.qnav-left{white-space:nowrap}
.qsec-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:17px;margin:0 0 2px}
.qsec-head .small{font-weight:400}

/* A column's rules: box, test, value. */
.needs{display:grid;gap:8px;margin-top:8px}
.need{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) auto;gap:8px;align-items:center}
.need .input.sm{width:100%}
.need-head{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--slate)}
@media (max-width:700px){.need{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.need-head{display:none}}


/* A page being fetched: what is already up stays up, dimmed only if the wait is long
   enough to notice. Nothing moves, so it reads as one app rather than a reload. */
#view.waiting{opacity:.55;transition:opacity .16s ease}
@media (prefers-reduced-motion:reduce){#view.waiting{transition:none}}

/* A question that has to be answered, and a name in a sentence that jumps to it. */
.qreq{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--signal);vertical-align:middle;margin-left:8px}
.linky{font:inherit;color:var(--signal);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.linky:hover{color:var(--ink)}
.qn-one{margin-left:28px;max-width:220px}
.qn-one .input{width:100%;background:var(--paper)}
@media (max-width:900px){.qn-one{margin-left:0}}
/* A box holding one value is only as wide as what goes in it. */
.qone-number,.qone-money{max-width:200px;font-family:var(--mono)}
.qone-date,.qone-datetime{max-width:280px}
.qbox .stack .qone{max-width:none}

/* A box whose last save did not get through. The text is still in it. */
.input.unsaved,.unsaved{box-shadow:inset 0 0 0 2px var(--signal)}
.btn-row.nowrap{flex-wrap:nowrap}

/* Two ways of looking at one list — the board and the table — side by side in the head. */
.seg{display:inline-flex;gap:2px}
.seg .btn{border-top-right-radius:0;border-bottom-left-radius:0}
.seg .btn:first-child{border-bottom-left-radius:7px}
.seg .btn:last-child{border-top-right-radius:7px}

/* Work left without a column when one was removed — it should be impossible to miss. */
.panel.warn{border-left:3px solid var(--signal)}
.lostbin.orphans{border-left:3px solid var(--signal)}
.lostbin tr[draggable]{cursor:grab}
.lostbin tr[draggable]:active{cursor:grabbing}

/* A project standing where its column asks for something it has not got — because
   somebody moved it here knowing better, or because the rules changed underneath it. */
.lead .behind{margin-top:6px;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--signal)}

/* An enquiry from the site that nobody has answered yet. */
.lead .tag.fresh{display:inline-block;margin-bottom:6px;background:var(--signal);color:var(--paper)}

/* ---------- a person's page (Team → someone) ----------
   Who they are in four plain statements, then where every part of their page stands and
   whose move it is. Classes are pp- so nothing here collides with the older tm- pieces. */
.pp-todo{list-style:none;margin:0;padding:0}
.pp-todo li{display:grid;grid-template-columns:18px 1fr auto;gap:12px;align-items:baseline;padding:11px 0;border-top:1px solid var(--rule-soft);font-size:14.5px}
.pp-todo li:first-child{border-top:0}
.pp-todo i{width:12px;height:12px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--slate);display:block;transform:translateY(1px)}
.pp-todo a{justify-self:start;color:var(--ink);border-bottom:1px solid #DEDCD6}
.pp-todo .when{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--slate);white-space:nowrap}
.pp-todo .when.soon{color:var(--signal)}
.pp-who{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--slate);margin:18px 0 2px}
.pp-who:first-of-type{margin-top:4px}
@media (max-width:640px){.pp-todo li{grid-template-columns:18px 1fr}.pp-todo .when{grid-column:2}}

/* ---------- Calendar ----------
   The month is the social planner's grid; what sits in it is told apart by weight, not by
   colour. Work is ink. Your own busy time is paper with an ink edge; free time is an
   outline; out of office is ruled across. Dates the app already knows are the quietest
   of all, because they are links to somewhere else rather than things to do here. */
.cal-away{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;margin:0 0 14px;box-shadow:inset 3px 0 0 var(--ink)}
.cal-day.other{background:var(--paper)}
.cal-day.other .sp-n{opacity:.55}
.cal-chip{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 6px;width:100%;text-align:left;border:0;font:inherit;font-size:11.5px;line-height:1.3;padding:4px 6px;background:var(--paper);color:var(--ink);cursor:pointer;border-bottom-left-radius:var(--r-tag);border-top-right-radius:var(--r-tag);min-width:0}
.cal-chip b{font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 1 60px}
.cal-chip .t{font-family:var(--mono);font-size:10px;color:inherit;opacity:.75}
.cal-chip .who,.cal-chip .tagw{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;opacity:.8}
.cal-chip[draggable="true"]{cursor:grab}
.cal-chip.work{background:var(--ink);color:var(--paper)}
.cal-chip.work:hover{background:var(--ink-hi)}
.cal-chip.mine{box-shadow:inset 3px 0 0 var(--ink)}
.cal-chip.mine:hover{background:var(--rule)}
.cal-chip.free{background:var(--white);box-shadow:inset 0 0 0 1px var(--rule)}
.cal-chip.work.free{background:var(--white);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.cal-chip.away{background:repeating-linear-gradient(135deg,var(--paper) 0 5px,var(--rule) 5px 6px);color:var(--ink)}
.cal-chip.away.asked{opacity:.65}
.cal-chip.hidden{background:repeating-linear-gradient(135deg,var(--white) 0 4px,var(--rule) 4px 5px);color:var(--slate);cursor:default}
.cal-chip.from-work{box-shadow:none}
.cal-chip.known{background:transparent;color:var(--slate);padding:2px 6px;box-shadow:inset 0 0 0 1px var(--rule)}
.cal-chip.known:hover{color:var(--ink);background:var(--paper)}
.cal-chip.bank{background:transparent;color:var(--slate);font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;padding:0 2px;cursor:default}
.cal-chip.cont{opacity:.7}
.cal-chip.cont .t{display:none}
.cal-list .cal-list-day{display:grid;grid-template-columns:210px minmax(0,1fr);gap:14px;padding:12px 0;border-top:1px solid var(--rule)}
.cal-list .cal-list-day:first-child{border-top:0;padding-top:2px}
.cal-list .cal-list-day h3{font-size:14px;margin:0;font-weight:500;text-transform:none;letter-spacing:0;padding-top:6px}
.cal-list .cal-list-day.today h3{font-weight:700}
.cal-list-items{display:grid;gap:6px}
.cal-list-items .cal-chip{font-size:13px;padding:7px 10px}
@media (max-width:760px){
  .cal-grid .sp-day{min-height:74px;padding:4px}
  .cal-chip .t,.cal-chip .who{display:none}
  .cal-list .cal-list-day{grid-template-columns:minmax(0,1fr)}
}

/* Who works to whom — the chart in Team and the strip on each person's page. hc- throughout. */
.hc-node{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center;background:var(--paper);color:var(--ink);border:0;padding:11px 16px 11px 11px;min-width:210px;max-width:260px;text-align:left;border-bottom-left-radius:14px;border-top-right-radius:14px;position:relative;z-index:1}
a.hc-node:hover{background:var(--rule)}
.hc-node.me{box-shadow:inset 0 0 0 2px var(--signal)}
.hc-node.out{background:transparent;border:1.5px dashed var(--on-ink-dim);padding:9.5px 14.5px 9.5px 9.5px}
.hc-txt{min-width:0}
.hc-txt b{display:block;font-weight:500;font-size:15px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hc-txt>span{display:block;font-size:13px;color:var(--slate);margin-top:2px;line-height:1.35}
.hc-txt i{display:block;font-style:normal;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--signal);margin-top:4px}
/* the tree: a stem down from whoever is above, a bar across, a stem down to each */
.hc-t{--line:var(--on-ink);display:flex;justify-content:center;list-style:none;margin:0;padding:24px 0 0;position:relative}
.hc-t::before{content:'';position:absolute;top:0;left:50%;height:24px;border-left:2px solid var(--line);transform:translateX(-1px)}
.hc-t>li{position:relative;display:flex;flex-direction:column;align-items:center;padding:24px 8px 0}
.hc-t>li::before,.hc-t>li::after{content:'';position:absolute;top:0;right:50%;width:50%;height:24px;border-top:2px solid var(--line)}
.hc-t>li::after{right:auto;left:50%;border-left:2px solid var(--line);margin-left:-1px}
.hc-t>li:first-child::before,.hc-t>li:last-child::after{border:0 none}
.hc-t>li:last-child::before{border-right:2px solid var(--line);margin-right:-1px;border-top-right-radius:6px}
.hc-t>li:first-child::after{border-top-left-radius:6px}
.hc-t>li:only-child{padding-top:0}
.hc-t>li:only-child::before,.hc-t>li:only-child::after{display:none}
/* on someone's page */
@media (max-width:820px){
  /* the chart becomes one column: each owner, then whoever reports to them, stem to stem */
  .hc-t{flex-direction:column;align-items:center}
  .hc-t>li{padding:24px 0 0}
  .hc-t>li::before{display:none}
  .hc-t>li::after,.hc-t>li:only-child::after{display:block;border:0;border-left:2px solid var(--line);width:0;left:50%;margin-left:-1px}
  .hc-t>li:first-child{padding-top:0}
  .hc-t>li:first-child::after{display:none}
  .hc-node{min-width:0;width:min(280px,100%)}
}

/* A person's page: one card, divided by rules rather than boxes. A heading on the left,
   plain lines on the right; the term in slate, the answer in ink. */
.pp-card{padding:0 26px}
.pp-sec{display:grid;grid-template-columns:180px minmax(0,1fr);gap:8px 28px;padding:22px 0;border-top:1px solid var(--rule-soft)}
.pp-sec:first-child{border-top:0}
.pp-sec-h{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.pp-sec-h h3{margin:3px 0 0}
.pp-sec-h h2{font-size:13px;letter-spacing:.1em;line-height:1.4;margin:3px 0 0}
.pp-sec-h h2 small{font-weight:400;letter-spacing:0;text-transform:none;color:var(--slate);font-size:13px}
.pp-card .warn{color:var(--signal)}
.pp-act{display:inline-flex;gap:16px;margin-left:14px;vertical-align:baseline}
.pp-link{background:none;border:0;padding:0;font:inherit;font-size:14px;color:var(--signal);border-bottom:1px solid currentColor;cursor:pointer;line-height:1.3}
a.pp-link{color:var(--signal)}
.pp-link:hover{color:var(--ink)}
.pp-link.danger{color:var(--signal)}
.pp-more summary{display:flex;gap:14px;align-items:baseline;cursor:pointer;list-style:none;font-size:15px}
.pp-more summary::-webkit-details-marker{display:none}
.pp-more summary::before{content:'+';font-family:var(--mono);color:var(--slate);width:12px}
.pp-more[open] summary::before{content:'−'}
.pp-more summary span{color:var(--slate);font-size:14px}
.pp-more>ul{margin-top:12px}
.pp-card .tm-list li,.pp-card .tm-checks li{padding-left:0}
.pp-card .pp-todo li:first-child{padding-top:0}

/* Team: one line per person. */
.pl-c{font-size:14px;color:var(--ink);min-width:0}
.pl-c .warn{color:var(--signal)}
.pl-c.mono{font-family:var(--mono);font-size:12.5px}
@media (max-width:1100px){
  .pp-sec{grid-template-columns:1fr}
  .pp-sec-h{flex-direction:row;justify-content:space-between;align-items:center;width:100%}
}
@media (max-width:640px){
  .pp-card{padding:0 18px}
  .pp-act{display:flex;margin:4px 0 0}
}

/* Set-up → Projects → Fields: one line per field, the settings of one beside it. */
.fe-wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:18px;align-items:start}
.fe-sec b{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:600}
.fe-sec>span{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--slate)}
.fe-sec .fe-grip{align-self:center}
.fe-row{display:grid;grid-template-columns:10px minmax(0,1fr) auto auto;gap:14px;align-items:center;padding:11px 22px;border-top:1px solid var(--rule-soft);cursor:pointer;outline:0}
.fe-row:hover{background:var(--paper-soft)}
.fe-row:focus-visible{box-shadow:inset 0 0 0 2px var(--signal)}
.fe-row.on{background:var(--signal-bg);box-shadow:inset 3px 0 0 var(--signal)}
.fe-grip{width:10px;height:16px;fill:var(--on-ink-dim);cursor:grab;flex:none;display:block}
.fe-row:hover .fe-grip,.fe-sec:hover .fe-grip,.fe-opt:hover .fe-grip{fill:var(--slate)}
.fe-name{min-width:0}
.fe-name b{display:block;font-weight:500;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fe-name small{display:block;color:var(--slate);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.fe-flags{display:flex;gap:12px;font-size:12.5px;white-space:nowrap}
.fe-type{border-bottom-left-radius:5px;border-top-right-radius:5px;white-space:nowrap;text-align:center}
.fe-empty{margin:0 22px 14px;padding:14px;border:1.5px dashed var(--on-ink);color:var(--slate);font-size:14px;text-align:center}
.fe-add{display:flex;flex-wrap:wrap;gap:10px}
.fe-link{background:none;border:0;padding:0;font:inherit;font-size:14px;color:var(--signal);cursor:pointer;display:inline-flex;align-items:center;gap:6px;justify-self:end}
.fe-link:hover{color:var(--ink)}
.fe-sec .fe-link{font-size:13px;opacity:0;transition:opacity .15s}
.fe-sec:hover .fe-link,.fe-sec .fe-link:focus-visible{opacity:1}
.fe-drop-before{box-shadow:inset 0 2px 0 var(--signal)}
.fe-drop-after{box-shadow:inset 0 -2px 0 var(--signal)}
.fe-drop-in{border-color:var(--signal);color:var(--signal)}
.fe-side{position:sticky;top:18px}
.fe-ed{padding:22px 24px}
.fe-ed h3{margin:0 0 18px}
.fe-f{display:block;margin-bottom:18px}
.fe-f>.label{display:block;margin-bottom:7px}
.fe-f>.input{width:100%}
.fe-f>textarea.input{resize:vertical;min-height:0}
.fe-opts{display:flex;flex-direction:column;gap:6px}
.fe-opt{display:grid;gap:10px;align-items:center}
.fe-opt .input{width:100%}
.fe-x{background:none;border:0;color:var(--slate);font-size:19px;line-height:1;cursor:pointer;padding:2px 4px}
.fe-x:hover{color:var(--signal)}
.req-l{color:var(--signal);margin-left:2px;font-weight:600}
.flist{display:grid;gap:8px}.flist-rows{display:flex;flex-direction:column;gap:6px}
.flist .fe-opt.flist-row{grid-template-columns:auto minmax(0,1.2fr) minmax(0,1fr) auto}.flist-row.dragging{opacity:.4}
.flist-grip{cursor:grab;color:var(--slate);font-size:16px;line-height:1;padding:0 2px;user-select:none}.flist .fe-link{justify-self:start}
.fe-when{display:flex;flex-direction:column;gap:8px}
.fe-when-a{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;font-size:14px}
.fe-when-b{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);gap:8px}
.fe-when-b .input{width:100%;min-width:0}
.fe-foot{display:flex;justify-content:space-between;align-items:center;margin-top:6px;padding-top:16px;border-top:1px solid var(--rule-soft)}
.fe-prev .slots-table td.r{width:230px}.fe-prev .slots-table td.r .input{width:100%;min-width:0!important}.fe-prev .page-head .btn-row{flex-wrap:nowrap}
.fe-prev .jobsec+.jobsec{margin-top:18px}
.fe-cond{color:var(--signal)}
@media (max-width:1100px){.fe-wrap{grid-template-columns:minmax(0,1fr)}.fe-wrap>*{min-width:0}.fe-side{position:static}.fe-flags{display:none}}
@media (max-width:640px){.fe-row{grid-template-columns:10px minmax(0,1fr)}.fe-type{display:none}.fe-sec,.fe-row{padding-left:16px;padding-right:16px}.fe-when-b{grid-template-columns:1fr}}
.fe-sec-plain{cursor:default}
.fe-checks{display:flex;flex-direction:column;gap:10px;font-size:14.5px}
.st-needs .need{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 34px;padding-bottom:10px}.st-needs .need>select:first-child{grid-column:1/-1}.st-needs .need-head{display:none}

/* The client area, run from the project page: pictures and videos on an update, and
   what the client has been asked for. */
.post-files{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px}
.post-file{position:relative;display:inline-flex;align-items:center;gap:8px;background:var(--paper);padding:4px;border-bottom-left-radius:8px;border-top-right-radius:8px;font-size:13px;max-width:220px}
.post-file a{border:0;color:var(--ink);display:inline-flex;align-items:center;gap:8px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.post-file img{display:block;width:72px;height:48px;object-fit:cover;border-bottom-left-radius:var(--r-tag);border-top-right-radius:var(--r-tag)}
.post-vid{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;background:var(--ink);color:var(--paper);padding:3px 6px;margin-left:4px}
.post-file-x{background:none;border:0;color:var(--slate);font-size:17px;line-height:1;cursor:pointer;padding:0 4px}
.post-file-x:hover{color:var(--signal)}
.act-list li.done .check span{color:var(--slate);text-decoration:line-through}

/* Brand colours, in tiers: the three, then the supporting ones by where they are used. */
.br-tiers{margin:4px 0 22px}
.br-tier-h{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);margin:28px 0 12px}
.br-tiers>.br-tier-h:first-child{margin-top:20px}
.br-tier-h span{display:inline-grid;place-items:center;width:22px;height:22px;background:var(--ink);color:var(--paper);font-size:11px;letter-spacing:0;border-bottom-left-radius:var(--r-tag);border-top-right-radius:var(--r-tag)}
.br-tier-note{font-size:14px;color:var(--slate);margin:-6px 0 12px}
.br-prim{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:12px}
.br-prim-c{min-height:190px;padding:18px;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;border-bottom-left-radius:var(--r-img);border-top-right-radius:var(--r-img);box-shadow:inset 0 0 0 1px rgba(18,22,27,.08)}
.br-prim-c b{font-size:24px;font-weight:600;line-height:1.1}
.br-prim-use{font-size:14px;line-height:1.4;opacity:.9}
.br-prim-c .br-copy{background:rgba(255,255,255,.16);color:inherit}
.br-prim-c[style*="F2F1EE"] .br-copy{background:rgba(18,22,27,.07)}
.br-prim-c .br-copy:hover{background:var(--ink);color:var(--paper)}
.br-sup,.br-onink{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 16px}
.br-sup .br-sw-chip{box-shadow:inset 0 0 0 1px var(--rule)}
.br-onink{background:var(--ink);padding:18px;border-bottom-left-radius:var(--r-card);border-top-right-radius:var(--r-card)}
.br-onink b{color:#fff}.br-onink .small{color:var(--on-ink-dim)}
.br-onink .br-sw-chip{box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.br-onink .br-copy{background:var(--ink-raised);color:var(--on-ink)}
.br-onink .br-copy:hover{background:var(--paper);color:var(--ink)}
.br-rest{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.br-rest .br-sw{grid-template-columns:72px minmax(0,1fr);column-gap:14px;align-items:start;background:var(--paper);padding:12px;border-bottom-left-radius:var(--r-btn);border-top-right-radius:var(--r-btn)}
.br-rest .br-sw-chip{grid-row:1/4;height:72px;margin:0}
.br-rest .br-copy{background:var(--white)}
@media (max-width:900px){.br-prim{grid-template-columns:1fr}.br-prim-c{min-height:130px}.br-sup,.br-onink{grid-template-columns:repeat(2,minmax(0,1fr))}.br-rest{grid-template-columns:1fr}}

/* A person's page: who they are on the left, everything about them in cards on the right.
   States are badges and actions are buttons, so neither is mistaken for the other. */
.topbar .chip a#chip-name{color:var(--paper);border:0}
.topbar .chip a#chip-name:hover,.topbar .chip a#chip-name:focus-visible{color:var(--signal-dark)}
.pp-b{display:grid;grid-template-columns:300px minmax(0,1fr);gap:16px;align-items:start}
.pp-ok{display:inline-block;background:var(--status-bg);color:var(--status);font-size:13px;line-height:1.3;padding:3px 8px;border-bottom-left-radius:5px;border-top-right-radius:5px}
@media (max-width:960px){
  .pp-b{grid-template-columns:1fr}
}

/* Deleted fields, at the foot of the list, each with Restore. */
.fe-deleted{border-top:1px solid var(--rule)}
.fe-deleted summary{padding:14px 22px;cursor:pointer;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--slate);list-style:none}
.fe-deleted summary::-webkit-details-marker{display:none}
.fe-deleted summary::before{content:'+';display:inline-block;width:14px}
.fe-deleted[open] summary::before{content:'\2212'}
.fe-deleted summary span{margin-left:6px}
.fe-row.fe-gone{cursor:default;grid-template-columns:10px minmax(0,1fr) auto auto}
.fe-row.fe-gone:hover{background:none}
.fe-row.fe-gone b{color:var(--slate)}
.fe-soft{color:var(--slate)}

/* A client's mark: logo or initials, white with a hairline so it never reads as staff. */
.cmark{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--white);color:var(--ink);box-shadow:inset 0 0 0 1px var(--rule);font-family:var(--mono);letter-spacing:.04em;border-bottom-left-radius:7px;border-top-right-radius:7px;overflow:hidden;vertical-align:middle}
.cmark img{width:100%;height:100%;object-fit:contain;padding:6%;display:block}
.cmark.full{box-shadow:none!important}
.cmark.full img{padding:0;object-fit:cover}
.cm-name{display:flex;align-items:center;gap:12px;min-width:0}
.cm-name b,.cm-name a{min-width:0}
.titled .cmark{border-bottom-left-radius:10px;border-top-right-radius:10px}
.cm-logo{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.cm-alike{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:14px 18px;background:var(--signal-bg);box-shadow:inset 0 0 0 1px var(--tint);border-bottom-left-radius:var(--r-card);border-top-right-radius:var(--r-card);margin-bottom:14px}
.cm-alike + .cm-alike{margin-top:-6px}
.cm-alike p{margin:0;max-width:none}
.lead .lead-client{display:flex;align-items:center;gap:7px}
.lead .lead-client .cmark{border-bottom-left-radius:4px;border-top-right-radius:4px}
@media (max-width:600px){.panel .list li{flex-wrap:wrap}.panel .list li .btn-row.nowrap{flex-wrap:wrap}}

/* Fitting a picture into its frame (app-crop.js) */
.cr-scrim{position:fixed;inset:0;z-index:90;background:rgba(18,22,27,.55);display:flex;align-items:center;justify-content:center;padding:16px}
.cr-dlg{width:min(470px,100%);background:var(--white);padding:22px 24px 20px;border-bottom-left-radius:var(--r-card);border-top-right-radius:var(--r-card);box-shadow:0 24px 60px rgba(18,22,27,.3)}
.cr-dlg h3{font-size:13px;letter-spacing:.1em;margin:0 0 14px}
.cr-stage{position:relative;height:300px;background:var(--ink-raised);overflow:hidden;border-radius:4px;cursor:grab;touch-action:none;user-select:none;outline:none}
.cr-stage:focus-visible{box-shadow:0 0 0 2px var(--signal)}
.cr-stage.held{cursor:grabbing}
.cr-stage img{position:absolute;left:50%;top:50%;max-width:none;pointer-events:none}
.cr-stage.logo{background:repeating-conic-gradient(var(--rule) 0 25%,var(--paper) 0 50%) 0 0/18px 18px}
.cr-frame{position:absolute;left:50%;top:50%;width:220px;height:220px;transform:translate(-50%,-50%);box-shadow:0 0 0 999px rgba(18,22,27,.55);outline:2px solid rgba(255,255,255,.9);border-bottom-left-radius:26px;border-top-right-radius:26px;pointer-events:none}
.cr-stage.logo .cr-frame{box-shadow:0 0 0 999px rgba(255,255,255,.6);outline-color:var(--ink)}
.cr-ground{position:absolute;left:50%;top:50%;width:220px;height:220px;transform:translate(-50%,-50%);background:var(--ground,transparent);border-bottom-left-radius:26px;border-top-right-radius:26px}
.cr-grid{position:absolute;inset:0;background:linear-gradient(90deg,transparent calc(33.33% - .5px),rgba(255,255,255,.3) calc(33.33% - .5px),rgba(255,255,255,.3) calc(33.33% + .5px),transparent calc(33.33% + .5px),transparent calc(66.66% - .5px),rgba(255,255,255,.3) calc(66.66% - .5px),rgba(255,255,255,.3) calc(66.66% + .5px),transparent calc(66.66% + .5px)),linear-gradient(transparent calc(33.33% - .5px),rgba(255,255,255,.3) calc(33.33% - .5px),rgba(255,255,255,.3) calc(33.33% + .5px),transparent calc(33.33% + .5px),transparent calc(66.66% - .5px),rgba(255,255,255,.3) calc(66.66% - .5px),rgba(255,255,255,.3) calc(66.66% + .5px),transparent calc(66.66% + .5px));border-radius:inherit}
.cr-stage.logo .cr-grid{display:none}
.cr-zoom{display:flex;align-items:center;gap:10px;margin:16px 0 6px}
.cr-zoom input{flex:1;accent-color:var(--ink)}
.cr-z{width:30px;height:30px;border:0;background:var(--paper);color:var(--ink);font-size:18px;line-height:1;cursor:pointer;border-bottom-left-radius:var(--r-tag);border-top-right-radius:var(--r-tag)}
.cr-hint{font-size:13px;color:var(--slate);margin:0 0 14px;max-width:none}
.cr-row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.cr-btns{display:flex;gap:8px;margin-left:auto}
.cr-seg{display:flex;gap:6px;flex-wrap:wrap}
.cr-behind{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;flex-basis:100%}
.cr-bl{font-size:13px;font-weight:600;color:var(--slate)}
.cr-seg .chip{display:inline-flex;align-items:center;gap:7px}
.cr-dot{width:12px;height:12px;flex:none;background:var(--c);box-shadow:inset 0 0 0 1px rgba(18,22,27,.35);border-radius:0 4px 0 4px}
.cr-dot-o{background:conic-gradient(#B91C1C,#A16207,#15803D,#0284C7,#6D28D9,#B91C1C)}
.cr-dot-o[style*="--c:#"]{background:var(--c)}
.cr-hex{width:110px;font-family:var(--mono);text-transform:uppercase}
.cr-prev{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--slate)}
.cr-prev canvas{border-bottom-left-radius:7px;border-top-right-radius:7px;background:var(--ink)}

/* A project's plan: the launch date, and the tasks (app-tasks.js) */
.tk-due{display:flex;align-items:flex-end;gap:14px 30px;flex-wrap:wrap;background:var(--white);padding:16px 22px 18px;border-bottom-left-radius:var(--r-card);border-top-right-radius:var(--r-card);margin-bottom:14px}
.tk-due .label{display:block;margin:0 0 6px}
.tk-due .big{font-size:22px;font-weight:600;letter-spacing:-.01em;line-height:1.15}
.tk-due .big.late{color:var(--signal)}
.tk-due .big .muted{color:var(--slate);font-weight:400}
.tk-due .gap{flex:1}
.tk-prog{display:flex;align-items:center;gap:10px;height:26px}
.tk-bar{display:block;height:6px;width:160px;background:var(--paper);border-radius:3px;overflow:hidden}
.tk-bar i{display:block;height:100%;background:var(--ink)}
.tk-panel{margin-bottom:14px}
.tk-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.tk-head h3{margin:0}
.tk-list{list-style:none;margin:0;padding:0}
.tk-row{display:grid;grid-template-columns:20px minmax(0,1fr) 150px 70px 52px;gap:14px;align-items:center;padding:11px 0;border-top:1px solid var(--rule-soft)}
.tk-row:first-child{border-top:0}
.tk-box{width:18px;height:18px;margin:0;accent-color:var(--ink);cursor:pointer}
.tk-t{min-width:0}
.tk-t b,.tk-open{font-weight:500;font-size:15px}
.tk-open{background:none;border:0;padding:0;margin:0;font-family:inherit;color:var(--ink);text-align:left;cursor:pointer}
.tk-open:hover{color:var(--signal)}
.tk-t small{display:block;color:var(--slate);font-size:13px;margin-top:2px}
.tk-row.done .tk-open,.tk-row.done .tk-t b{text-decoration:line-through;color:var(--slate)}
.tk-who{display:flex;align-items:center;gap:8px;font-size:14px;min-width:0}
.tk-d{font-family:var(--mono);font-size:12px;color:var(--slate)}
.tk-d.late{color:var(--signal)}
.tk-flag{text-align:right}
.tk-flag .tag{font-size:10px;padding:4px 8px}
.tk-add{display:grid;grid-template-columns:minmax(0,1fr) 160px 160px auto;gap:8px;margin-top:12px}
.tk-add .input{padding:9px 12px}
@media (max-width:760px){
  .tk-row{grid-template-columns:20px minmax(0,1fr) auto;row-gap:4px}
  .tk-who{grid-column:2}.tk-d{grid-column:3;grid-row:1;text-align:right}.tk-flag{grid-column:3;grid-row:2}
  .tk-add{grid-template-columns:1fr 1fr}.tk-add input[name=title]{grid-column:1/-1}
  .tk-due .gap{display:none}
}

/* Requests (app-requests.js) */
.rq-grid{display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);gap:14px;align-items:start}
.rq-listp{padding:0;overflow:hidden}
.rq-tabs{padding:12px 16px;border-bottom:1px solid var(--rule-soft);margin:0}
.rq-empty{padding:16px}
.rq-list{list-style:none;margin:0;padding:0}
.rq-list li{border-top:1px solid var(--rule-soft)}
.rq-list li:first-child{border-top:0}
.rq-list a{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:12px;align-items:start;padding:14px 16px;color:var(--ink);border:0}
.rq-list a:hover{background:var(--paper-soft)}
.rq-list li.on a{background:var(--signal-bg);box-shadow:inset 3px 0 0 var(--signal)}
.rq-list b{display:block;font-weight:500}
.rq-list small{display:block;color:var(--slate);font-size:13px;margin-top:2px}
.rq-list .tag{margin-top:6px;font-size:10px;padding:4px 8px}
.rq-list .d{font-family:var(--mono);font-size:11px;color:var(--slate);white-space:nowrap;padding-top:3px}
.rq-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.rq-top h2{font-size:22px;line-height:1.25;margin:0;text-transform:none;letter-spacing:0}
.rq-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;font-size:14px;color:var(--slate);margin:8px 0 16px}
.rq-meta b{color:var(--ink);font-weight:500}
.rq-msg{background:var(--paper);padding:14px 16px;border-bottom-left-radius:10px;border-top-right-radius:10px;margin-bottom:10px}
.rq-msg.us{background:var(--white);box-shadow:inset 0 0 0 1px var(--rule)}
.rq-msg .who{font-size:13px;color:var(--slate);margin-bottom:6px}
.rq-msg .body{white-space:pre-wrap}
.rq-time{font-size:13px;color:var(--slate);margin:0 0 10px;max-width:none}
.rq-files{display:flex;flex-wrap:wrap;gap:10px;margin:4px 0 12px}
.rq-file{display:flex;align-items:center;justify-content:center;width:150px;height:100px;overflow:hidden;background:var(--paper);border:0;border-bottom-left-radius:8px;border-top-right-radius:8px;font-family:var(--mono);font-size:11px;color:var(--slate)}
.rq-file img{width:100%;height:100%;object-fit:cover}
.rq-plan{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:14px;margin:14px 0}
.rq-plan .label{margin:0}
.rq-actions{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:10px}
@media (max-width:960px){.rq-grid{grid-template-columns:1fr}}

/* Sites (app-sites.js) */
.st-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--status);margin-right:8px;vertical-align:0}
.st-dot.down{background:var(--signal)}.st-dot.slow{background:var(--slate)}.st-dot.off{background:var(--rule)}
.st-down{color:var(--signal);font-weight:600}
.st-week{display:inline-flex;gap:2px;align-items:flex-end;height:18px}
.st-week i{width:5px;background:var(--status);border-radius:1px}
.st-week i.x{background:var(--signal)}.st-week i.none{background:var(--rule)}
.st-t .tag{font-size:10px;padding:4px 8px}
.tag.st-soon{background:var(--signal-bg);color:var(--signal-text)}
.st-paused td{opacity:.55}

/* Search everything (app-search.js) */
.find-btn{display:inline-flex;align-items:center;gap:10px;margin:-4px 250px -4px auto;width:min(320px,34vw);background:var(--paper);border:0;padding:5px 12px;line-height:1.4;border-bottom-left-radius:8px;border-top-right-radius:8px;color:var(--slate);font-family:var(--sans);font-size:14px;letter-spacing:0;text-transform:none;cursor:pointer;text-align:left}
.find-btn:hover{color:var(--ink)}
.find-btn .find-l{flex:1}
.find-btn kbd,.fd-q kbd,.fd-foot kbd{font-family:var(--mono);font-size:11px;background:var(--white);padding:2px 6px;border-radius:4px;color:var(--slate)}
.fd-q kbd,.fd-foot kbd{background:var(--paper)}
@media (max-width:900px){.find-btn{width:auto;margin:-4px 0;order:1;padding:7px 9px}.menu-btn{order:0}.topbar #crumb{order:2}.find-btn .find-l,.find-btn kbd{display:none}.find-btn svg{width:18px;height:18px}.topbar{gap:10px}}
.fd-scrim{position:fixed;inset:0;z-index:80;background:rgba(18,22,27,.45);display:flex;justify-content:center;align-items:flex-start;padding:10vh 16px 16px}
.fd-box{width:min(720px,100%);max-height:80vh;display:flex;flex-direction:column;background:var(--white);border-bottom-left-radius:var(--r-card);border-top-right-radius:var(--r-card);box-shadow:0 24px 60px rgba(18,22,27,.25);overflow:hidden}
.fd-q{display:flex;align-items:center;gap:12px;padding:16px 22px;border-bottom:1px solid var(--rule-soft);color:var(--slate)}
.fd-q input{flex:1;min-width:0;border:0;outline:0;background:none;font:inherit;font-size:20px;color:var(--ink);padding:4px 0}
.fd-q input::-webkit-search-cancel-button{display:none}
.fd-res{overflow:auto;padding:6px 12px 8px}
.fd-hint{color:var(--slate);font-size:14px;padding:14px 10px;margin:0;max-width:none}
.fd-g h4{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--slate);font-weight:400;margin:12px 10px 6px}
.fd-it{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:12px;align-items:center;padding:8px 10px;border:0;color:var(--ink)}
.fd-it.on,.fd-it:hover{background:var(--signal-bg);box-shadow:inset 3px 0 0 var(--signal)}
.fd-it .t{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fd-it small{display:block;color:var(--slate);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fd-it mark{background:none;color:var(--signal);font-weight:600}
.fd-it .k{font-family:var(--mono);font-size:11px;color:var(--slate)}
.fd-ic{width:30px;height:30px;display:flex;align-items:center;justify-content:center;background:var(--paper);color:var(--slate);border-bottom-left-radius:var(--r-tag);border-top-right-radius:var(--r-tag)}
.fd-foot{display:flex;gap:18px;flex-wrap:wrap;padding:11px 22px;border-top:1px solid var(--rule-soft);font-size:13px;color:var(--slate)}
.fd-more{margin-left:auto}
@media (max-width:600px){.fd-more{display:none}.fd-scrim{padding-top:12px}}
.st-t th{white-space:nowrap}.st-t td .cm-name a{white-space:nowrap}.st-t td .small{font-size:13px;color:var(--slate)}
.tk-head .tk-h{font-size:13px;letter-spacing:.1em;margin:0;line-height:1.4}

/* ---------- The pictures in the training (lesson-scenes.js) ---------- */
.ls{margin:0;background:var(--white);border-bottom-left-radius:14px;border-top-right-radius:14px;box-shadow:inset 0 0 0 1px var(--rule-soft);overflow:hidden}
.ls-stage{position:relative;aspect-ratio:16/9;background:var(--paper-soft)}
.ls-s{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .4s;font-family:var(--sans)}
.ls-s.on{opacity:1}
.ls-cap{display:flex;gap:14px;align-items:baseline;padding:14px 20px 4px;font-size:17px;line-height:1.45;min-height:3.3em}
.ls-count{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--slate);white-space:nowrap}
.ls-ctl{display:flex;align-items:center;gap:8px;padding:4px 20px 16px}
.ls-btn{width:36px;height:36px;border:0;background:var(--paper);color:var(--ink);font-size:17px;cursor:pointer;border-bottom-left-radius:8px;border-top-right-radius:8px}
.ls-btn:hover{background:var(--rule)}
.ls-dots{display:flex;gap:6px;flex:1;justify-content:center}
.ls-dots button{width:26px;height:6px;border:0;border-radius:3px;background:var(--rule);cursor:pointer;padding:0}
.ls-dots button.on{background:var(--ink)}
.ls :focus-visible{outline:2px solid var(--signal);outline-offset:2px}
/* the figures and the pieces */
.ls-p circle,.ls-p path{fill:var(--slate)}
.ls-us circle,.ls-us path{fill:var(--ink)}
.ls-lead circle,.ls-lead path{fill:var(--ink)}.ls-mute circle,.ls-mute path{fill:var(--on-ink-dim)}
.ls-who{font:500 12px var(--mono);letter-spacing:.14em;fill:var(--slate)}
.ls-label{font:600 22px var(--sans);fill:var(--ink)}
.ls-bub path{fill:var(--paper);stroke:none}.ls-bub text{font:600 20px var(--sans);fill:var(--ink)}
.ls-reply path{fill:var(--ink)}.ls-reply text{fill:var(--paper)}
.ls-item rect,.ls-item path,.ls-item circle{fill:var(--paper);stroke:var(--ink);stroke-width:4}
.ls-line{fill:none!important;stroke:var(--ink);stroke-width:4}
.ls-sigfill{fill:var(--signal)!important;stroke:none!important}
.ls-hollow{fill:none!important;stroke:var(--ink);stroke-width:5}
.ls-coin{font:700 26px var(--sans);fill:var(--white)}
.ls-q circle{fill:var(--white);stroke:var(--ink);stroke-width:3}.ls-q text{font:700 24px var(--sans);fill:var(--ink)}
.ls-doc path,.ls-card path{fill:var(--white);stroke:var(--ink);stroke-width:4}
.ls-doc-t{font:700 22px var(--sans);fill:var(--ink)}
.ls-doc-l{font:400 20px var(--sans);fill:var(--ink)}
.ls-doc-sig{fill:none;stroke:var(--signal);stroke-width:8;stroke-dasharray:100;stroke-dashoffset:100}
.ls-ck rect{fill:var(--white);stroke:var(--ink);stroke-width:3}.ls-ck text{font:400 20px var(--sans);fill:var(--ink)}
.ls-tick{fill:none;stroke:var(--signal);stroke-width:4;stroke-dasharray:30;stroke-dashoffset:30}
.ls-b,.ls-w{fill:var(--ink);transform-box:fill-box}
.ls-b{transform-origin:bottom}.ls-w{transform-origin:left}
.ls-win path:first-child{fill:var(--white);stroke:var(--ink);stroke-width:4}.ls-win circle{fill:var(--slate)}
.ls-okmark circle{fill:var(--status)}.ls-okmark path{fill:none;stroke:var(--white);stroke-width:6;stroke-dasharray:40;stroke-dashoffset:40}
.ls-shackle{fill:none;stroke:var(--ink);stroke-width:14}.ls-lbody{fill:var(--ink)}.ls-keyhole{fill:var(--signal)}
.ls-alert path{fill:var(--signal)}.ls-alert text{font:800 64px var(--sans);fill:var(--white)}
.ls-clock circle:first-child{fill:var(--white);stroke:var(--ink);stroke-width:6}
.ls-hand{stroke:var(--ink);stroke-width:7;stroke-linecap:round}.ls-hm{stroke:var(--signal)}
.ls-no text{font:700 64px var(--sans);fill:var(--slate)}.ls-no path{stroke:var(--signal);stroke-width:9;stroke-dasharray:700;stroke-dashoffset:700}
.ls-phone path:first-child{fill:var(--white);stroke:var(--ink);stroke-width:5}
.ls-msg path{fill:var(--paper);stroke:var(--ink);stroke-width:3}.ls-msg text{font:600 19px var(--sans);fill:var(--ink)}
.ls-bad path{stroke:var(--signal);stroke-width:4}
.ls-flag path{fill:var(--signal)}.ls-flag text{font:800 40px var(--sans);fill:var(--white)}
.ls-cam path{fill:var(--ink)}.ls-cam circle{stroke:var(--white)!important}
.ls-flash{fill:var(--white);opacity:0;pointer-events:none}
.ls-print>path{fill:var(--white);stroke:var(--ink);stroke-width:4}
.ls-screen{fill:var(--ink)}
.ls-eye{fill:none;stroke:var(--signal);stroke-width:3;stroke-dasharray:6 6}
.ls-track{stroke:var(--rule);stroke-width:6}
.ls-run{stroke:var(--ink);stroke-width:6;stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
.ls-round circle{stroke:var(--ink);stroke-width:5}.ls-round text{font:700 26px var(--sans);fill:var(--ink)}
.ls-round .ls-rl{font:500 12px var(--mono);letter-spacing:.14em;fill:var(--slate)}
.ls-done circle{stroke:var(--status)}
/* the movement: only on the picture showing */
.ls-s.on .ls-in1{animation:ls-pop .5s cubic-bezier(.3,1.4,.5,1) .5s both}
.ls-s.on .ls-in2{animation:ls-pop .5s cubic-bezier(.3,1.4,.5,1) 1.8s both}
.ls-s.on .ls-in3{animation:ls-fade .5s 1.4s both}
.ls-bub,.ls-okmark,.ls-alert,.ls-flag,.ls-round circle{transform-box:fill-box;transform-origin:center}
@keyframes ls-pop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}
@keyframes ls-fade{from{opacity:0}to{opacity:1}}
@keyframes ls-draw{to{stroke-dashoffset:0}}
.ls-s.on .ls-ltr{animation:ls-ltr 2.4s cubic-bezier(.4,0,.2,1) .4s both}
.ls-s.on .ls-rtl{animation:ls-rtl 2.4s cubic-bezier(.4,0,.2,1) .4s both}
@keyframes ls-ltr{0%{opacity:0;transform:translate(250px,250px) scale(.6)}15%{opacity:1;transform:translate(262px,240px) scale(1.25)}85%{transform:translate(538px,240px) scale(1.25)}100%{opacity:1;transform:translate(538px,250px) scale(1)}}
@keyframes ls-rtl{0%{opacity:0;transform:translate(550px,250px) scale(.6)}15%{opacity:1;transform:translate(538px,240px) scale(1.25)}85%{transform:translate(262px,240px) scale(1.25)}100%{opacity:1;transform:translate(262px,250px) scale(1)}}
.ls-q{opacity:0}
.ls-s.on .ls-q.ls-ltr{animation-name:ls-qltr}.ls-s.on .ls-q.ls-rtl{animation-name:ls-qrtl}
.ls-s.on .ls-q{animation-duration:1.6s;animation-timing-function:ease-in-out;animation-fill-mode:both}
.ls-s.on .ls-q2{animation-delay:1s}.ls-s.on .ls-q3{animation-delay:1.6s}.ls-s.on .ls-q1{animation-delay:.4s}
@keyframes ls-qltr{0%{opacity:0;transform:translate(260px,190px)}20%{opacity:1}80%{opacity:1}100%{opacity:0;transform:translate(540px,150px)}}
@keyframes ls-qrtl{0%{opacity:0;transform:translate(540px,190px)}20%{opacity:1}80%{opacity:1}100%{opacity:0;transform:translate(260px,150px)}}
.ls-s.on .ls-doc{animation:ls-fade .4s .2s both}
.ls-doc-l{opacity:0}
.ls-s.on .ls-l1{animation:ls-write .5s .8s both}.ls-s.on .ls-l2{animation:ls-write .5s 1.3s both}.ls-s.on .ls-l3{animation:ls-write .5s 1.8s both}.ls-s.on .ls-l4{animation:ls-write .5s 2.3s both}.ls-s.on .ls-l5{animation:ls-write .5s 2.8s both}
@keyframes ls-write{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}
.ls-s.on .ls-doc-sig{animation:ls-draw .6s 3.2s forwards}
.ls-s.on .ls-c1 .ls-tick{animation:ls-draw .35s .8s forwards}.ls-s.on .ls-c2 .ls-tick{animation:ls-draw .35s 1.5s forwards}.ls-s.on .ls-c3 .ls-tick{animation:ls-draw .35s 2.2s forwards}.ls-s.on .ls-c4 .ls-tick{animation:ls-draw .35s 2.9s forwards}.ls-s.on .ls-c5 .ls-tick{animation:ls-draw .35s 3.6s forwards}
.ls-b{transform:scaleY(0)}.ls-w{transform:scaleX(0)}
.ls-s.on .ls-b1{animation:ls-grow .5s .5s forwards}.ls-s.on .ls-b2{animation:ls-grow .5s 1s forwards}.ls-s.on .ls-b3{animation:ls-grow .5s 1.5s forwards}.ls-s.on .ls-b4{animation:ls-grow .5s 2s forwards}
@keyframes ls-grow{to{transform:none}}
.ls-s.on .ls-w1{animation:ls-grow .4s .4s forwards}.ls-s.on .ls-w2{animation:ls-grow .4s .7s forwards}.ls-s.on .ls-w3{animation:ls-grow .4s 1s forwards}.ls-s.on .ls-w4{animation:ls-grow .4s 1.3s forwards}
.ls-okmark{opacity:0}.ls-s.on .ls-okmark{animation:ls-pop .4s 1.9s both}.ls-s.on .ls-okmark path{animation:ls-draw .4s 2.2s forwards}
.ls-s.on .ls-shackle{animation:ls-shut .5s cubic-bezier(.5,0,.3,1.4) 1s both}
@keyframes ls-shut{from{transform:translateY(-22px)}to{transform:none}}
.ls-s.on .ls-alert{animation:ls-pulse .9s ease-in-out .3s 3 alternate}
@keyframes ls-pulse{from{transform:scale(1)}to{transform:scale(1.1)}}
.ls-hm{transform-origin:0 0}.ls-s.on .ls-hm{animation:ls-spin 2.4s cubic-bezier(.4,0,.2,1) .4s both}
@keyframes ls-spin{from{transform:rotate(-270deg)}to{transform:none}}
.ls-s.on .ls-no path{animation:ls-draw .6s 1.2s forwards}
.ls-msg{opacity:0}.ls-s.on .ls-msg{animation:ls-drop .5s cubic-bezier(.3,1.3,.5,1) .6s both}
@keyframes ls-drop{from{opacity:0;transform:translate(400px,120px)}to{opacity:1;transform:translate(400px,170px)}}
.ls-flag{opacity:0}.ls-s.on .ls-flag{animation:ls-pop .4s 1.6s both}
.ls-s.on .ls-flash{animation:ls-flash .6s .8s both}
@keyframes ls-flash{0%{opacity:0}30%{opacity:.9}100%{opacity:0}}
.ls-print{opacity:0}.ls-s.on .ls-print{animation:ls-rise .6s cubic-bezier(.2,.8,.3,1) 1.2s both}
@keyframes ls-rise{from{opacity:0;transform:translate(540px,240px)}to{opacity:1;transform:translate(540px,200px)}}
.ls-eye{stroke-dashoffset:120}.ls-s.on .ls-eye{animation:ls-draw 1s .6s forwards}
.ls-s.on .ls-run{animation:ls-draw 2.6s .5s linear forwards}
.ls-round circle{fill:var(--white)}
.ls-s.on .ls-r1 circle{animation:ls-fillr .3s .5s forwards}.ls-s.on .ls-r2 circle{animation:ls-fillr .3s 1.4s forwards}.ls-s.on .ls-r3 circle{animation:ls-fillr .3s 2.3s forwards}.ls-s.on .ls-r4 circle{animation:ls-fillr .3s 3s forwards}.ls-s.on .ls-r5 circle{animation:ls-fillr .3s 3.4s forwards}
@keyframes ls-fillr{to{fill:var(--paper)}}
/* Still, and finished, for anyone who has asked for less movement */
.ls-still .ls-s *,.ls-still .ls-s{animation-duration:.001s!important;animation-delay:0s!important;animation-iteration-count:1!important;transition:none!important}
@media (prefers-reduced-motion:reduce){.ls-s *,.ls-s{animation-duration:.001s!important;animation-delay:0s!important;animation-iteration-count:1!important;transition:none!important}}

/* Training: the index, the lesson in steps, the card to keep, and writing a lesson. */
.tr-group{margin:0 0 28px}
.tr-h{font-size:20px;font-weight:600;margin:0}
.tr-group>.note{margin:4px 0 12px}
.tr-card .tr-sum{font-size:13.5px;color:var(--slate);line-height:1.45}
.tr-lesson{display:grid;grid-template-columns:250px minmax(0,1fr);gap:18px;align-items:start}
.tr-toc{position:sticky;top:16px;padding:16px}
.tr-toc-h{font-size:14px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin:0 0 10px;line-height:1.35}
.tr-toc a{display:flex;gap:10px;padding:7px 8px;border:0;color:var(--ink);font-size:13.5px;line-height:1.35;border-bottom-left-radius:var(--r-tag);border-top-right-radius:var(--r-tag)}
.tr-toc a i{font-style:normal;font-family:var(--mono)}
.tr-toc a.on{font-weight:600}
.tr-toc a:hover{background:var(--paper)}
.tr-toc .tr-all{margin:10px 0 0;padding-top:10px;border-top:1px solid var(--rule);font-size:13px}
.tr-main{padding:22px 28px 26px;max-width:860px}
.tr-steps{display:flex;gap:4px;flex:1}
.tr-steps i{flex:1;height:4px;background:var(--rule);border-radius:2px}
.tr-steps i.d{background:var(--ink)}
.tr-steps i.n{background:var(--signal)}
.tr-kicker{font-size:13px;color:var(--slate);margin:0 0 2px}
.tr-title{font-size:26px;font-weight:600;line-height:1.2;margin:0 0 14px}
.tr-tools{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}
.tr-words{font-size:16px;line-height:1.6;max-width:66ch;margin-top:18px}
.tr-words h2{font-size:18px;margin:18px 0 6px}
.tr-q{border-bottom-left-radius:var(--r-btn);border-top-right-radius:var(--r-btn)}
.tr-q fieldset{border:0;margin:0;padding:0}
.tr-q legend{font-weight:600;line-height:1.4;padding:0}
.tr-opt{display:flex;background:var(--white);cursor:pointer;line-height:1.4;border-bottom-left-radius:8px;border-top-right-radius:8px}
.tr-opt input{margin-top:3px;accent-color:var(--ink)}
.tr-opt:has(input:focus-visible){box-shadow:inset 0 0 0 2px var(--ink)}
.tr-why{margin:10px 0;line-height:1.5}
.tr-nav{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:24px;padding-top:16px;border-top:1px solid var(--rule)}
.tr-pass{font-size:18px;font-weight:600;margin:0 0 16px}
.tr-left{margin:0 0 16px;line-height:1.5}
.tr-card-keep{margin-top:10px;border-bottom-left-radius:var(--r-btn);border-top-right-radius:var(--r-btn)}
.tr-kh{display:flex;justify-content:space-between;align-items:center;gap:10px}
.tr-kh h2{font-size:18px;margin:0}
.tr-task{margin-top:16px;padding:16px 20px;background:var(--paper);border-bottom-left-radius:var(--r-btn);border-top-right-radius:var(--r-btn)}
.tr-task p{margin:6px 0 0;line-height:1.5}
.tr-keep-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
.tr-kt{font-size:17px;margin:4px 0 8px}
.tr-kt a{border:0;color:var(--ink)}
.tr-keep{font-size:14px;line-height:1.5}
.tr-stepedit{border:0;margin:14px 0;padding:16px 18px;background:var(--paper);border-bottom-left-radius:var(--r-btn);border-top-right-radius:var(--r-btn)}
.tr-stepedit legend{float:left;width:100%;margin-bottom:8px}
.tr-sl{padding:12px 14px;margin:0 0 8px;background:var(--white);border-bottom-left-radius:8px;border-top-right-radius:8px}
.tr-slf{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:0 12px}
@media (max-width:900px){
  .tr-lesson{grid-template-columns:1fr}
  .tr-toc{position:static;order:2}
  .tr-main{padding:18px 16px 20px}
  .tr-title{font-size:22px}
  .tr-nav .btn{max-width:100%;white-space:normal;text-align:left}
}
@media print{
  body.staff .rail,body.staff .topbar,.tm-nav,.page-head,.tr-toc,.tr-top,.tr-nav,.tr-tools,.ls,.tr-task,#tr-result,.tr-kh .btn{display:none!important}
  .tr-lesson,.tr-keep-grid{display:block}
  .panel{box-shadow:none!important;padding:0!important}
  .tr-keep{break-inside:avoid;margin-bottom:18px}
}
.tr-offer{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:12px 16px;margin:0 0 16px;background:var(--paper);border-bottom-left-radius:var(--r-btn);border-top-right-radius:var(--r-btn)}
.tr-offer p{margin:0;line-height:1.45;flex:1;min-width:220px}
.tr-words h2,.tr-card-keep h2,.tr-keep h2:not(.tr-kt){font-family:var(--sans);text-transform:none;letter-spacing:0;font-size:16px;font-weight:600;line-height:1.3;margin:16px 0 4px}
.tr-card-keep .tr-kh h2{margin:0}
.tr-card-keep ul,.tr-keep ul{margin:4px 0 8px;padding-left:20px}
.tr-card-keep p,.tr-keep p{margin:0 0 6px}
.tr-stepedit summary{cursor:pointer;display:flex;gap:10px;flex-wrap:wrap;list-style:none}
.tr-stepedit summary::-webkit-details-marker{display:none}
.tr-stepedit summary::before{content:'+';font-family:var(--mono);width:12px}
.tr-stepedit[open] summary::before{content:'–'}
.tr-stepedit summary small{color:var(--slate);font-size:12.5px}
.tr-stepedit[open] summary{margin-bottom:12px}
.tr-side-h{font-size:14px;letter-spacing:.08em;text-transform:uppercase;margin:0 0 10px}
h2.tr-title{font-family:var(--sans);text-transform:none;letter-spacing:0}
.panel .tr-side-h{font-size:13px;letter-spacing:.1em;margin:0 0 12px}

/* The handbook: parts with pictures and graphics, and a bar to choose how to read it. */
.hb{--z:1}
.hb-z1{--z:1.15}
.hb-z2{--z:1.3}
.hb-hero{display:grid;gap:28px;background:var(--white);padding:26px 30px;margin:0 0 16px;border-bottom-left-radius:18px;border-top-right-radius:18px}
h2.hb-hh{font-family:var(--sans);text-transform:none;letter-spacing:0;font-size:calc(28px * var(--z));line-height:1.2;margin:6px 0 10px}
.hb-hero p{margin:0 0 14px;line-height:1.55;color:var(--slate);font-size:calc(15.5px * var(--z));max-width:60ch}
.hb-hero .hb-what{margin:12px 0 0;font-size:14px}
.hb-stats{display:flex;flex-wrap:wrap;gap:12px 28px;margin:0 0 18px}
.hb-stats dt{font-weight:600;line-height:1.1}
.hb-stats dd{margin:2px 0 0;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--slate)}
.hb-bar{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin:0 0 16px;border-bottom-left-radius:var(--r-btn);border-top-right-radius:var(--r-btn);position:sticky;top:8px;z-index:5}
.hb-grp{display:flex;gap:6px;align-items:center}
.hb-l{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;margin-right:2px}
.hb-bar .chip:focus-visible,.hb-find input:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.hb-gap{flex:1}
.hb-find input{border:0;font:inherit;font-size:13px;padding:7px 12px;width:200px;border-bottom-left-radius:var(--r-btn);border-top-right-radius:var(--r-btn)}
.hb-note{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:var(--white);padding:10px 16px;margin:0 0 14px;border-bottom-left-radius:var(--r-btn);border-top-right-radius:var(--r-btn)}
.hb-grid{display:grid;grid-template-columns:250px minmax(0,1fr);gap:18px;align-items:start}
.hb-toc{padding:16px;position:sticky;top:76px;max-height:calc(100vh - 96px);overflow:auto}
.hb-g-h{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--slate);margin:14px 8px 4px}
.hb-g-h:first-child{margin-top:0}
.hb-toc a{display:flex;gap:10px;align-items:center;padding:6px 8px;border:0;color:var(--ink);font-size:13.5px;line-height:1.3;border-bottom-left-radius:var(--r-tag);border-top-right-radius:var(--r-tag)}
.hb-toc a:hover{background:var(--paper)}
.hb-toc a em{margin-left:auto;font-style:normal;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--signal)}
.hb-ic{width:28px;height:28px;flex:none;display:inline-grid;place-items:center;background:var(--paper);border-bottom-left-radius:7px;border-top-right-radius:7px}
.hb-ic svg{width:16px;height:16px;stroke:var(--ink);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hb-sec{background:var(--white);padding:24px 28px;margin:0 0 16px;border-bottom-left-radius:18px;border-top-right-radius:18px;scroll-margin-top:80px}
.hb-sh{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 16px}
.hb-sh .hb-ic{width:36px;height:36px;background:var(--ink)}
.hb-sh .hb-ic svg{stroke:var(--white);width:19px;height:19px}
.hb-sh h2{font-family:var(--sans);text-transform:none;letter-spacing:0;font-size:calc(22px * var(--z));font-weight:600;margin:0;scroll-margin-top:80px}
.hb-sh h2:focus{outline:none}
.hb-sh h2:focus-visible{outline:2px solid var(--signal);outline-offset:4px}
.hb-say{margin-left:auto}
.hb-say.on,.hb-say-all.on{background:var(--signal)!important;color:var(--white)!important}
.hb-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:center;margin:0 0 16px}
.hb-top.nopic{grid-template-columns:1fr}
.hb-short p{font-size:calc(17px * var(--z));line-height:1.55;margin:6px 0 0;max-width:60ch}
.hb-body{font-size:calc(15.5px * var(--z));line-height:1.65}
.hb-body p,.hb-body li{max-width:68ch}
.hb-body ul{padding-left:20px;margin:6px 0 10px}
.hb-rel{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:13.5px;margin-top:14px}
.hb-rel a{background:var(--paper);padding:6px 10px;border:0;color:var(--ink);border-bottom-left-radius:var(--r-tag);border-top-right-radius:var(--r-tag)}
.hb-rel a:hover{background:var(--ink);color:var(--paper)}
.hb-diffbtn{margin-top:4px}
.hb-ins{background:var(--signal-bg);box-shadow:-10px 0 0 var(--signal-bg),inset 3px 0 0 var(--signal);padding-left:10px;margin-left:-10px}
.hb-ins+.hb-ins{margin-top:-1px}
.hb-del{color:var(--slate);text-decoration:line-through;padding-left:10px;margin-left:-10px;box-shadow:inset 3px 0 0 var(--rule)}
.hb-rh{font-family:var(--sans);text-transform:none;letter-spacing:0;font-size:18px;margin:0 0 8px}
/* the graphics */
.hb-g{margin:4px 0 18px;padding:18px 20px;background:var(--paper-soft);border-bottom-left-radius:12px;border-top-right-radius:12px;font-size:calc(14px * var(--z));line-height:1.45}
.hb-notice figcaption{font-size:13.5px;color:var(--slate);margin-top:10px}
.hb-tl{display:grid;grid-template-columns:repeat(28,1fr);gap:3px;align-items:end}
.hb-tl i{height:30px;background:var(--rule);border-radius:3px;transform-origin:bottom}
.hb-tl i.n{background:var(--on-ink-dim)}
.hb-tl i.h{background:var(--signal);height:44px}
.hb-tl i.today{outline:2px solid var(--ink);outline-offset:2px}
.hb-tll{display:grid;grid-template-columns:1fr 2fr 1fr;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate);margin-top:8px}
.hb-tll span:nth-child(2){text-align:center;color:var(--ink)}
.hb-tll span:nth-child(3){text-align:right;color:var(--signal)}
.hb-steps{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));counter-reset:hbs;list-style:none}
.hb-steps li{position:relative;padding-right:12px}
.hb-steps li::before{counter-increment:hbs;content:counter(hbs);display:grid;place-items:center;width:34px;height:34px;background:var(--ink);color:var(--white);font-family:var(--mono);font-size:13px;margin-bottom:10px;border-bottom-left-radius:8px;border-top-right-radius:8px;position:relative;z-index:1}
.hb-steps li:first-child::before{background:var(--signal)}
.hb-steps li::after{content:'';position:absolute;top:16px;left:40px;right:8px;height:2px;background:var(--rule);transform-origin:left}
.hb-steps li:last-child::after{display:none}
.hb-steps b,.hb-cards b,.hb-time b{display:block;margin-bottom:2px}
.hb-time{list-style:none;position:relative;padding-left:44px}
.hb-time li{position:relative;padding:0 0 16px}
.hb-time li:last-child{padding-bottom:0}
.hb-time li::before{content:'';position:absolute;left:-36px;top:3px;width:14px;height:14px;background:var(--white);box-shadow:inset 0 0 0 3px var(--ink);border-radius:50%;z-index:1}
.hb-time li:first-child::before{box-shadow:inset 0 0 0 7px var(--signal)}
.hb-time li::after{content:'';position:absolute;left:-30px;top:17px;bottom:0;width:2px;background:var(--rule);transform-origin:top}
.hb-time li:last-child::after{display:none}
.hb-figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-top:4px}
.hb-figs div{display:flex;flex-direction:column;gap:4px}
.hb-figs dt{font-size:calc(30px * var(--z));font-weight:600;line-height:1.1;color:var(--signal)}
.hb-figs dd{margin:0;color:var(--slate)}
.hb-cards{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.hb-cards li{background:var(--white);padding:14px 16px;box-shadow:inset 3px 0 0 var(--ink);border-top-right-radius:10px}
.hb-cards li:first-child{box-shadow:inset 3px 0 0 var(--signal)}
.hb-cards span,.hb-steps span,.hb-time span{color:var(--ink)}
/* graphics draw themselves in as they come into view; with reduced motion they are simply there */
@media (prefers-reduced-motion:no-preference){
  .hb-g.hb-in .hb-tl i{animation:hb-grow .35s calc(var(--i,0) * 18ms) both}
  .hb-g.hb-in.hb-steps li,.hb-g.hb-in.hb-time li,.hb-g.hb-in.hb-cards li,.hb-g.hb-in.hb-figs div{animation:hb-up .45s both}
  .hb-g.hb-in.hb-steps li:nth-child(2),.hb-g.hb-in.hb-time li:nth-child(2),.hb-g.hb-in.hb-cards li:nth-child(2),.hb-g.hb-in.hb-figs div:nth-child(2){animation-delay:.15s}
  .hb-g.hb-in.hb-steps li:nth-child(3),.hb-g.hb-in.hb-time li:nth-child(3),.hb-g.hb-in.hb-cards li:nth-child(3){animation-delay:.3s}
  .hb-g.hb-in.hb-steps li:nth-child(4),.hb-g.hb-in.hb-cards li:nth-child(4){animation-delay:.45s}
  .hb-g.hb-in.hb-steps li:nth-child(5),.hb-g.hb-in.hb-cards li:nth-child(5){animation-delay:.6s}
  .hb-g.hb-in.hb-cards li:nth-child(6){animation-delay:.75s}
  .hb-g.hb-in.hb-steps li::after{animation:hb-line .5s .3s both}
}
@keyframes hb-grow{from{transform:scaleY(0)}to{transform:none}}
@keyframes hb-up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes hb-line{from{transform:scaleX(0)}to{transform:none}}
/* the editor */
.hb-icons{display:flex;flex-wrap:wrap;gap:6px}
.hb-iconpick{cursor:pointer}
.hb-iconpick input{position:absolute;opacity:0;width:1px;height:1px}
.hb-iconpick .hb-ic{box-shadow:inset 0 0 0 1px var(--rule);background:var(--white)}
.hb-iconpick input:checked+.hb-ic{background:var(--ink)}
.hb-iconpick input:checked+.hb-ic svg{stroke:var(--white)}
.hb-iconpick input:focus-visible+.hb-ic{outline:2px solid var(--signal);outline-offset:2px}
.tr-stepedit summary .hb-ic{width:24px;height:24px;background:var(--white)}
@media (max-width:900px){
  .hb-hero{grid-template-columns:1fr;padding:20px 18px}
  .hb-grid{grid-template-columns:1fr}
  .hb-toc{position:static;max-height:none;order:2}
  .hb-bar{position:static}
  .hb-find,.hb-find input{width:100%}
  .hb-sec{padding:20px 16px}
  .hb-top{grid-template-columns:1fr}
  .hb-say{margin-left:0}
  .hb-steps{grid-template-columns:1fr;gap:12px}
  .hb-steps li{display:grid;grid-template-columns:34px 1fr;column-gap:12px;padding:0}
  .hb-steps li::before{grid-row:span 2;margin:0}
  .hb-steps li::after{display:none}
}
@media print{
  .hb-bar,.hb-toc,.hb-hero,.hb-say,.hb-diffbtn,.hb-rel,.hb .ls,.tr-offer{display:none!important}
  .hb-grid,.hb-top{display:block}
  .hb-sec{break-inside:avoid-page;padding:0 0 12px;box-shadow:none}
  .hb-g{background:none;padding:0}
  .hb-body,.hb-g-h{display:block!important}
}
.tr-stepedit summary{align-items:center}

/* ---------- Motion (motion.js) ----------
   Every movement is quick and over; with reduced motion asked for, nothing here runs. */
@media (prefers-reduced-motion:no-preference){
  /* A new page: each block unfolds from its top edge as it settles, one quickly after another. */
  #view.mo-enter > *, #view.mo-enter > * > .panel, #view.mo-enter .kpis > *, #view.mo-enter .tm-lesson-grid > *, #view.mo-enter .tr-keep-grid > *, #view.mo-enter .hb-parts > .hb-sec{
    animation:mo-open .32s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--mo-i,0) * 25ms);transform-origin:top}
  /* The page's name: the tab rises out of the page edge. */
  #view.mo-enter .htab{animation:mo-tab .46s cubic-bezier(.2,.8,.2,1) both}
  /* Bars and meters fill from nothing. */
  #view.mo-enter .tk-bar i, #view.mo-enter .bar-meter i, #view.mo-enter .rq-plan .tk-bar i{animation:mo-fill .8s .25s cubic-bezier(.2,.8,.2,1) both;transform-origin:left}
  /* Further down, blocks open as they come into view. */
  .mo-below{opacity:0;transform:translateY(14px)}
  .mo-below.mo-seen{opacity:1;transform:none;transition:opacity .45s cubic-bezier(.2,.8,.2,1),transform .45s cubic-bezier(.2,.8,.2,1)}

  /* The rail: one lit block that slides to where you are going. */
  /* (The rail is already placed — sticky beside the page, fixed and slid away on a phone —
     so the lit block can sit inside it without the rail being moved.) */
  .rail.mo-glide a.on{background:transparent}
  .rail.mo-glide a{position:relative;z-index:1}
  .rail-glide{position:absolute;left:0;top:0;z-index:0;background:var(--signal);pointer-events:none;border-bottom-left-radius:var(--r-btn);border-top-right-radius:var(--r-btn);
    transition:transform .34s cubic-bezier(.2,.8,.2,1),width .34s cubic-bezier(.2,.8,.2,1),height .34s cubic-bezier(.2,.8,.2,1),opacity .2s}
  .rail-glide.mo-jump{transition:none}

  /* Figures turn like a counter to their number. */
  .mo-dig{display:inline-block;height:1.1em;overflow:hidden;vertical-align:top;line-height:1.1}
  .mo-dig > span{display:block;width:1ch;white-space:normal;word-spacing:1ch;line-height:1.1;text-align:center;transform:translateY(calc(var(--from) * -1.1em));animation:mo-roll .9s cubic-bezier(.2,.8,.2,1) forwards}
  .mo-rolling .mo-dig:nth-child(2) > span{animation-delay:.06s}
  .mo-rolling .mo-dig:nth-child(3) > span{animation-delay:.12s}
  .mo-rolling .mo-dig:nth-child(4) > span{animation-delay:.18s}
  .mo-rolling .mo-dig:nth-child(n+5) > span{animation-delay:.24s}

  /* Something just added: it arrives with a mark in the corner that fades. */
  .mo-new{animation:mo-arrive .6s cubic-bezier(.2,.8,.2,1) both;position:relative}
  .mo-new::after{content:'';position:absolute;inset:0;pointer-events:none;box-shadow:inset 3px 0 0 var(--signal);background:linear-gradient(90deg,rgba(209,74,18,.12),transparent 60%);animation:mo-mark 1.4s ease-out forwards}

  /* Buttons sink a little as you press. The corners stay where the brand puts them. */
  .btn,.chip{transition:transform .12s cubic-bezier(.2,.8,.2,1),background-color .15s,color .15s}
  .btn:active,.chip:active{transform:scale(.96)}
  .btn:hover{transform:translateY(-1px)}
  .btn:active:hover{transform:scale(.96)}

  /* Cards you can open lift, and a corner bracket draws in at the top right. */
  a.panel,.tm-lesson-card,.kpi.w-click,.hb-rel a{position:relative;transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s}
  a.panel::before,.tm-lesson-card::before{content:'';position:absolute;top:10px;right:10px;width:18px;height:18px;border-top:2px solid var(--signal);border-right:2px solid var(--signal);border-top-right-radius:6px;
    clip-path:inset(0 0 100% 100%);transition:clip-path .28s cubic-bezier(.2,.8,.2,1);pointer-events:none}
  a.panel:hover,.tm-lesson-card:hover{transform:translateY(-3px)}
  a.panel:hover::before,.tm-lesson-card:hover::before,a.panel:focus-visible::before,.tm-lesson-card:focus-visible::before{clip-path:inset(0 0 0 0)}

  /* A window opens out of the button that asked for it (motion.js); the dimming eases in. */
  dialog[open]::backdrop{animation:mo-fade .3s ease both}

  /* A box ticked gives a small push. */
  input.mo-tick{animation:mo-pop .32s cubic-bezier(.3,1.6,.5,1)}

  /* The toast drops in as a tab, and a line beneath it runs down the time it stays. */
  .toast.mo-toast{animation:mo-toast .38s cubic-bezier(.2,.9,.25,1.2) both}
  .toast.mo-toast::after{content:'';position:absolute;left:12px;right:12px;bottom:5px;height:2px;background:currentColor;opacity:.35;transform-origin:left;animation:mo-time var(--mo-ms,2600ms) linear forwards}

  /* Waiting on the server: a short signal line runs along the top of the page. */
  #view{position:relative}
  #view.waiting::before{content:'';position:absolute;top:-10px;left:0;height:3px;width:28%;background:var(--signal);border-radius:2px;animation:mo-sweep .9s cubic-bezier(.45,0,.55,1) infinite;z-index:3}

}
@keyframes mo-open{from{opacity:0;transform:translateY(6px) scaleY(.96)}to{opacity:1;transform:none}}
@keyframes mo-tab{from{clip-path:inset(100% 0 0 0);transform:translateY(8px)}to{clip-path:inset(0 0 0 0);transform:none}}
@keyframes mo-fill{from{transform:scaleX(0)}to{transform:none}}
@keyframes mo-roll{to{transform:translateY(calc(var(--to) * -1.1em))}}
@keyframes mo-arrive{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}
@keyframes mo-mark{0%{opacity:1}70%{opacity:1}100%{opacity:0}}
@keyframes mo-fade{from{opacity:0}to{opacity:1}}
@keyframes mo-pop{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}
@keyframes mo-toast{from{opacity:0;transform:translate(-50%,30px) scaleX(.6)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes mo-time{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@keyframes mo-sweep{0%{transform:translateX(-100%)}100%{transform:translateX(360%)}}

/* Speed (app-speed.js) */
.sp-how{display:flex;width:160px;height:10px;background:var(--paper);border-radius:3px;overflow:hidden}
.sp-how i,.sp-key i{display:block;height:100%}
.sp-mem{background:var(--ink)}
.sp-ahead{background:var(--on-ink-dim)}
.sp-fresh{background:var(--signal)}
.sp-slow{color:var(--signal);font-weight:600}
.sp-key{display:flex;flex-wrap:wrap;gap:6px 18px;margin:12px 0 0}
.sp-key span{display:inline-flex;align-items:center;gap:6px}
.sp-key i{width:12px;height:12px;border-radius:2px}
.sp-t td{vertical-align:middle}
.sp-t th:last-child,.sp-t td:last-child{padding-left:20px}

/* ---------- Chat ---------- */
.ch{display:grid;grid-template-columns:290px minmax(0,1fr);background:var(--white);height:calc(100dvh - 196px);min-height:480px;overflow:hidden;border-bottom-left-radius:var(--r-card);border-top-right-radius:var(--r-card)}
.ch-list{border-right:1px solid var(--rule);display:flex;flex-direction:column;min-height:0;min-width:0}
.ch-find{padding:14px;border-bottom:1px solid var(--rule)}
.ch-find .input{width:100%}
.ch-convs{overflow:auto;min-height:0;flex:1;padding-bottom:10px}
.ch-sect{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--slate);padding:14px 16px 6px}
.ch-conv{display:flex;gap:11px;align-items:center;padding:10px 16px;color:var(--ink);border:0;text-decoration:none}
.ch-conv:hover{background:var(--paper)}
.ch-conv.on{background:var(--paper);box-shadow:inset 3px 0 0 var(--signal)}
.ch-conv:focus-visible{outline:2px solid var(--signal);outline-offset:-2px}
.ch-conv-t{flex:1;min-width:0}
.ch-conv-t b{display:flex;justify-content:space-between;gap:8px;font-size:14px;font-weight:600}
.ch-conv-t b span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ch-conv-t small{font-weight:400;font-family:var(--mono);font-size:10.5px;color:var(--slate);flex:none}
.ch-prev{display:block;font-size:13px;color:var(--slate);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-n{flex:none;background:var(--signal);color:var(--white);font-family:var(--mono);font-size:10.5px;line-height:18px;min-width:18px;text-align:center;padding:0 5px;border-bottom-left-radius:5px;border-top-right-radius:5px}
.ch-av{position:relative;flex:none;display:inline-flex}
.ch-here{position:absolute;right:-3px;bottom:-3px;width:11px;height:11px;border-radius:50%;background:var(--status);border:2px solid var(--white)}
.ch-group{background:var(--signal)!important;color:var(--white)!important;font-family:var(--sans)!important;font-weight:600;font-size:14px!important}
.ch-thread{display:flex;flex-direction:column;min-height:0;min-width:0;position:relative}
.ch-thread.drop::after{content:'Drop to send';position:absolute;inset:10px;display:grid;place-items:center;background:rgba(242,241,238,.92);border:2px dashed var(--signal);font-weight:600;border-bottom-left-radius:var(--r-card);border-top-right-radius:var(--r-card);pointer-events:none}
.ch-none{margin:auto}
.ch-head{display:flex;align-items:center;gap:12px;padding:12px 18px;border-bottom:1px solid var(--rule)}
.ch-head-t{flex:1;min-width:0}
.ch-head-t b{display:block;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-head-t small{display:block;color:var(--slate);font-size:12.5px}
.ch-head-btns{margin:0;flex-wrap:nowrap}
.ch-head-btns .btn{display:inline-flex;align-items:center;gap:6px}
.ch-back{display:none}
.btn.ch-yes{background:var(--status);color:var(--white)}
.btn.ch-no{background:var(--signal);color:var(--white)}
.ch-log{flex:1;overflow:auto;padding:16px 18px 10px;display:flex;flex-direction:column;gap:4px;min-height:0}
.ch-log:focus-visible{outline:2px solid var(--signal);outline-offset:-2px}
.ch-more{text-align:center;margin-bottom:8px}
.ch-first{margin:auto}
.ch-day{text-align:center;margin:14px 0 8px}
.ch-day span{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--slate)}
.ch-sys{align-self:center;font-size:12.5px;color:var(--slate);margin:6px 0;text-align:center}
.ch-callrow{align-self:center;display:flex;align-items:center;gap:10px;font-size:13px;color:var(--slate);background:var(--paper);padding:7px 10px 7px 14px;margin:8px 0;border-bottom-left-radius:10px;border-top-right-radius:10px;max-width:100%}
.ch-callrow.live{background:var(--status-bg);color:var(--status)}
.ch-callrow svg{flex:none}
.ch-m{display:flex;gap:10px;max-width:min(72%,640px);margin-top:10px;position:relative}
.ch-m.joined{margin-top:2px}
.ch-m-av{width:28px;flex:none}
.ch-m-b{min-width:0;display:flex;flex-direction:column;align-items:flex-start}
.ch-who{font-size:12px;color:var(--slate);margin-bottom:3px}
.ch-bub{background:var(--paper);padding:8px 13px;font-size:14.5px;line-height:1.45;overflow-wrap:anywhere;border-bottom-left-radius:14px;border-top-right-radius:14px;display:flex;flex-direction:column;gap:6px;max-width:100%}
.ch-text{white-space:pre-wrap}
.ch-bub a{color:inherit}
.ch-m.me{align-self:flex-end;flex-direction:row-reverse}
.ch-m.me .ch-m-b{align-items:flex-end}
.ch-m.me .ch-bub{background:var(--ink);color:var(--paper)}
.ch-m.pending .ch-bub{opacity:.6}
.ch-m.failed .ch-bub{box-shadow:inset 0 0 0 1.5px var(--signal)}
.ch-gone{font-style:italic;opacity:.7}
.ch-img img{display:block;max-width:min(320px,100%);max-height:260px;border-bottom-left-radius:8px;border-top-right-radius:8px}
.ch-file,.ch-ref{display:flex;gap:10px;align-items:center;background:var(--white);color:var(--ink)!important;padding:8px 11px;text-decoration:none;border:1px solid var(--rule);border-bottom-left-radius:10px;border-top-right-radius:10px;min-width:0}
.ch-file span,.ch-ref span{min-width:0}
.ch-file b,.ch-ref b{display:block;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ch-file small,.ch-ref small{display:block;font-size:12px;color:var(--slate)}
.ch-file svg,.ch-ref svg{flex:none}
.ch-file:hover,.ch-ref:hover{border-color:var(--ink)}
.ch-tools{display:flex;gap:10px;margin-top:3px;opacity:0;transition:opacity .12s}
.ch-m:hover .ch-tools,.ch-m:focus-within .ch-tools{opacity:1}
.ch-tools button,.linkish{font:inherit;font-size:12px;color:var(--slate);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.ch-tools button:hover,.linkish:hover{color:var(--ink)}
.ch-seen{align-self:flex-end;font-size:11.5px;color:var(--slate);margin-top:4px}
.ch-compose{display:flex;gap:8px;align-items:flex-end;padding:12px 18px;border-top:1px solid var(--rule)}
.ch-compose textarea{flex:1;min-width:0;min-height:42px;height:42px;box-sizing:border-box;font:inherit;font-size:14.5px;line-height:1.45;border:0;background:var(--paper);padding:10px 13px;resize:none;max-height:180px;color:var(--ink);border-bottom-left-radius:10px;border-top-right-radius:10px}
.ch-compose textarea:focus{outline:2px solid var(--ink);outline-offset:0}
.ch-attach{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.ch-attach:focus-within{outline:2px solid var(--signal);outline-offset:2px}
.ch-ring{position:fixed;right:24px;bottom:24px;z-index:60;width:340px;max-width:calc(100vw - 24px);background:var(--ink);color:var(--paper);padding:18px;box-shadow:0 18px 50px rgba(0,0,0,.28);border-bottom-left-radius:var(--r-card);border-top-right-radius:var(--r-card)}
.ch-ring-row{display:flex;gap:12px;align-items:center;margin-bottom:14px}
.ch-ring-row b{display:block;font-size:15px}
.ch-ring-row small{display:block;color:var(--on-ink-dim);font-size:12.5px}
.ch-ring-av{display:inline-flex;border-radius:0 12px 0 12px}
.ch-ring-btns{display:flex;gap:8px}
.ch-ring-btns .btn{flex:1;justify-content:center;padding:11px 8px}
.ch-ring .btn.ghost{background:#2A313A;color:var(--paper)}
@media (prefers-reduced-motion:no-preference){
  .ch-ring{animation:ch-ring-in .32s cubic-bezier(.2,.8,.2,1) both}
  .ch-ring-av{animation:ch-pulse 1.4s ease-out infinite}
}
@keyframes ch-ring-in{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
@keyframes ch-pulse{0%{box-shadow:0 0 0 0 rgba(194,65,12,.7)}100%{box-shadow:0 0 0 16px rgba(194,65,12,0)}}
@media (max-width:880px){
  .ch{grid-template-columns:1fr;height:calc(100dvh - 236px);min-height:360px}
  /* In a conversation on a phone, the conversation is the page. */
  #view:has(.ch.is-open) .page-head{display:none}
  .ch.is-open{height:calc(100dvh - 122px)}
  .ch-thread{display:none}
  .ch.is-open .ch-list{display:none}
  .ch.is-open .ch-thread{display:flex}
  .ch-back{display:inline-flex}
  .ch-m{max-width:88%}
  .ch-head{padding:10px 12px;gap:9px}
  .ch-head-btns .btn span{display:none}
  .ch-log{padding:12px}
  .ch-compose{padding:10px 12px}
  .ch-attach span{display:none}
  .ch-ring{left:12px;right:12px;bottom:12px;width:auto}
  .ch-tools{opacity:1}
}

/* ---------- Analytics ---------- */
.an-tabs{display:flex;gap:6px;flex-wrap:wrap}
.an-tabs .chip{text-decoration:none;font-size:13.5px;padding:9px 14px;background:var(--white);color:var(--ink)}
.an-tabs .chip.on{background:var(--ink);color:var(--paper)}
.an-tabs .chip:focus-visible,.an-kpi:focus-visible,.an-row-btn:focus-visible,.an-cell:focus-visible,.an-scroll:focus-visible,.an-figs summary:focus-visible,.an-code summary:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.an-bar{display:flex;flex-wrap:wrap;gap:12px 14px;align-items:flex-end;background:var(--white);padding:14px 16px;margin-bottom:16px;border-bottom-left-radius:var(--r-card);border-top-right-radius:var(--r-card)}
.an-field{display:flex;flex-direction:column;gap:5px;min-width:0}
.an-field label{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--slate)}
.an-field .input{min-width:150px;max-width:280px;font-size:14px;padding:9px 12px}
.an-ask .an-field:first-child .input{min-width:220px}
.an-filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;flex-basis:100%}
.an-filters .btn{display:inline-flex;align-items:center;gap:6px}
.an-chip{display:inline-flex;align-items:center;gap:6px;background:var(--paper);font-size:13px;padding:6px 6px 6px 11px;border-bottom-left-radius:8px;border-top-right-radius:8px}
.an-chip button{display:inline-grid;place-items:center;width:24px;height:24px;border:0;background:transparent;cursor:pointer;border-radius:50%;color:var(--slate)}
.an-chip button:hover{background:var(--white);color:var(--ink)}
.an-chip button:focus-visible{outline:2px solid var(--signal)}
.an-here{margin:0 0 2px auto;display:flex;align-items:center;gap:7px}
.an-dot{width:8px;height:8px;border-radius:50%;background:var(--status)}
.an-kpis{margin-bottom:16px}
a.an-kpi{display:block;color:var(--ink);text-decoration:none;border:0}
a.an-kpi:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.an-kpis .kpi .small{line-height:1.5}
.an-ch{font-weight:600;white-space:nowrap}
.an-ch.good{color:var(--status)}
.an-ch.bad{color:var(--signal)}
.an-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.an-grid>.an-wide{grid-column:1/-1}
.an-panel{min-width:0;margin:0}
.an-panel h2{font-size:15px;font-weight:600;letter-spacing:0;text-transform:none;margin:0 0 2px}
.an-h2b{margin-top:22px!important}
.an-panel>.small,.an-ph .small{margin:0 0 12px}
.an-ph{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.an-ph>div:first-child{flex:1 1 auto;min-width:0}
.an-ph>.an-open,.an-ph>.an-actions{flex:none}
.an-open{font-size:13px;color:var(--ink);white-space:nowrap}
.an-cap{margin:0 0 10px}
.an-panel figure{margin:0}
.an-chart{width:100%;min-height:200px}
.an-chart svg{display:block;max-width:100%;height:auto;overflow:visible}
.an-gl{stroke:var(--rule-soft);stroke-width:1}
.an-ax{font-family:var(--mono);font-size:10.5px;fill:var(--slate)}
.an-hit{cursor:pointer}
.an-hit:hover{opacity:.82}
.an-legend{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;color:var(--slate)}
.an-legend i{display:inline-block;width:11px;height:11px;border-radius:2px;margin-right:7px;vertical-align:-1px}
.an-legend i.dash{height:0;border-top:2px dashed var(--slate);border-radius:0;vertical-align:3px;width:16px}
.an-tip{position:fixed;z-index:80;pointer-events:none;background:var(--ink);color:var(--paper);font-size:12.5px;padding:7px 10px;border-bottom-left-radius:8px;border-top-right-radius:8px;opacity:0;transition:opacity .08s;max-width:320px}
.an-tip.on{opacity:1}
.an-across{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.an-across li{font-size:14px}
.an-across-row,.an-across .an-row-btn{display:grid;grid-template-columns:minmax(90px,38%) minmax(0,1fr) auto;gap:12px;align-items:center}
.an-row-btn{width:100%;border:0;background:transparent;font:inherit;color:inherit;text-align:left;padding:5px 6px;margin:0 -6px;cursor:pointer;border-radius:0 8px 0 8px;box-sizing:content-box}
.an-row-btn:hover{background:var(--paper)}
.an-across-l{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.an-across-t{height:22px;background:var(--rule-soft);position:relative;overflow:hidden;border-bottom-left-radius:5px;border-top-right-radius:5px}
.an-across-t i{position:absolute;inset:0 auto 0 0;border-bottom-left-radius:5px;border-top-right-radius:5px}
.an-across-v{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;min-width:52px}
.an-across-v small{display:block;font-size:11.5px;color:var(--slate)}
.an-funnel{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.an-funnel li{display:grid;grid-template-columns:minmax(90px,30%) minmax(0,1fr) minmax(96px,auto);gap:12px;align-items:center;font-size:14px}
.an-funnel li.won .an-funnel-n{font-weight:600}
.an-funnel-n small{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--status);margin-left:4px}
.an-funnel-v{font-variant-numeric:tabular-nums;white-space:nowrap}
.an-funnel-v small{color:var(--slate);font-size:12px}
.an-foot{margin:12px 0 0}
.an-flag{background:var(--signal-bg);color:var(--signal-text);padding:2px 7px;border-bottom-left-radius:5px;border-top-right-radius:5px;font-weight:600}
.an-notes ol{list-style:none;margin:0;padding:0;counter-reset:n;display:flex;flex-direction:column;gap:12px}
.an-notes li{counter-increment:n;display:grid;grid-template-columns:26px 1fr;gap:6px;font-size:14.5px;line-height:1.5}
.an-notes li::before{content:counter(n,decimal-leading-zero);font-family:var(--mono);font-size:12px;color:var(--signal);padding-top:2px}
.an-notes li>span{grid-column:2}
.an-notes li>a{grid-column:2;font-size:13px;color:var(--ink);justify-self:start}
.an-notes li{grid-template-rows:auto auto}
.an-notes li>span+a{margin-top:-4px}
.an-answer .an-ph{margin-bottom:4px}
.an-actions{margin:0}
.an-actions .btn{display:inline-flex;align-items:center;gap:6px}
.an-about{color:var(--slate);font-size:13.5px;margin:0 0 14px;max-width:760px}
.an-total{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;margin-bottom:14px}
.an-total b{font-size:26px;font-weight:600;font-variant-numeric:tabular-nums}
.an-fig{margin:0 0 20px}
.an-big{padding:18px 0 8px}
.an-big .v{font-size:44px;font-weight:600;line-height:1.1;font-variant-numeric:tabular-nums;margin-bottom:6px}
.an-big.sm{padding:6px 0 0}
.an-big.sm .v{font-size:32px}
.an-sub{margin-top:18px!important;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--slate);font-weight:400;margin:0 0 6px}
.an-scroll{overflow-x:auto;max-width:100%}
.an-tbl{font-variant-numeric:tabular-nums}
.an-tbl tbody th{font-family:var(--sans);font-size:14px;letter-spacing:0;text-transform:none;color:var(--ink);font-weight:500;padding:10px 10px 10px 0;white-space:nowrap}
.an-tbl .r{text-align:right;white-space:nowrap}
.an-tbl thead th.r{text-align:right}
.an-tbl tr.an-before th,.an-tbl tr.an-before td{color:var(--slate)}
.an-tbl tr.an-total th,.an-tbl tr.an-total td{border-top:2px solid var(--ink)}
.an-cell{border:0;background:transparent;font:inherit;color:inherit;cursor:pointer;padding:2px 4px;margin:-2px -4px;border-radius:0 6px 0 6px;text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:3px}
.an-cell:hover{background:var(--paper);text-decoration-color:var(--ink)}
.an-cell.left{text-align:left}
.an-cell.mono{font-family:var(--mono);font-size:13px}
.an-figs{margin-top:12px}
.an-figs summary{cursor:pointer;font-size:13px;color:var(--ink);width:max-content}
.an-figs[open] summary{margin-bottom:8px}
.an-drill{list-style:none;margin:10px 0 16px;padding:0;max-height:55vh;overflow:auto}
.an-drill a{display:flex;justify-content:space-between;gap:14px;padding:10px 4px;border-bottom:1px solid var(--rule);color:var(--ink);text-decoration:none}
.an-drill a:hover{background:var(--paper)}
.an-drill small{display:block;color:var(--slate);font-size:12.5px}
.an-drill .r{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.an-fset{border:0;margin:0 0 10px;padding:0;display:flex;gap:18px;flex-wrap:wrap}
.an-fvals{display:flex;flex-direction:column;gap:4px;max-height:40vh;overflow:auto;margin-top:8px;padding:2px}
.an-code{margin-top:16px}
.an-code summary{cursor:pointer;font-weight:600;font-size:14.5px}
.an-code p{max-width:760px}
.an-snippet{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:10px 0}
.an-snippet code{background:var(--paper);padding:9px 12px;font-size:13px;overflow-wrap:anywhere;border-bottom-left-radius:8px;border-top-right-radius:8px}
.an-snippet .an-words{background:var(--paper);padding:9px 12px;margin:0;font-size:14px;border-bottom-left-radius:8px;border-top-right-radius:8px}
.an-row-tools{margin:0;justify-content:flex-end;flex-wrap:nowrap}
@media (max-width:1100px){.an-grid{grid-template-columns:1fr}.an-answer .an-ph{flex-wrap:wrap}}
@media (max-width:700px){
  .an-bar{padding:12px}
  /* The site's narrow-screen rule stacks table cells; figures stay a table here, and scroll across. */
  .an-tbl tr{display:table-row;padding:0;border:0}
  .an-tbl th,.an-tbl td{display:table-cell;border-bottom:1px solid var(--rule);padding:9px 12px 9px 0}
  .an-tbl thead th{margin:0}
  .an-ph{flex-wrap:wrap}
  .an-field{flex:1 1 140px}
  .an-field .input{min-width:0;max-width:none;width:100%}
  .an-ask .an-field:first-child{flex-basis:100%}
  .an-here{margin-left:0}
  .an-across-row,.an-across .an-row-btn{grid-template-columns:minmax(80px,34%) minmax(0,1fr) auto;gap:8px}
  .an-funnel li{grid-template-columns:minmax(78px,30%) minmax(0,1fr) auto;gap:8px}
  .an-big .v{font-size:36px}
  .an-actions .btn span{display:none}
  .an-actions .btn:last-child span,.an-actions .btn:last-child{display:inline-flex}
}
@media (prefers-reduced-motion:reduce){.an-tip{transition:none}}
.an-fvals .check,.an-fset .check{font-family:var(--sans);text-transform:none;letter-spacing:0;font-size:14px;color:var(--ink)}
/* Project and client references: CB01, CB */
.ref-tag{font-size:13px;font-weight:600;letter-spacing:.04em;padding:5px 9px;border:1.5px solid var(--ink);border-bottom-left-radius:8px;border-top-right-radius:8px;white-space:nowrap;flex:none}
.cb-row{display:grid;gap:10px;padding:12px 0;border-top:1px solid var(--rule)}
.cb-row .cb-days{gap:8px 14px}
.empty-go{margin-top:14px;display:flex;justify-content:center}

/* Mail: why a conversation is in Spam, and what was turned away at the door */
.mail-list .spam-why{display:inline-block;vertical-align:1px;margin-right:6px;padding:2px 7px;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--signal);background:rgba(194,65,12,.08);border-top-right-radius:5px;border-bottom-left-radius:5px}
.refused .tbl{margin-top:12px}

/* ---------- Home ----------
   One question first: what needs me now. A greeting that answers it in a sentence, one
   list with late things at the top, this week beside it, and the other person's changes
   underneath. One orange thing at most: a late row. Headings in plain sentence case, so
   the page reads rather than shouts. */
.hm{max-width:1240px}
.hm-head{margin:4px 0 22px}
.hm-date{margin:0;font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--slate)}
.hm-head h1{margin:8px 0 6px;font-size:clamp(28px,3.2vw,40px);line-height:1.08;letter-spacing:-.02em;font-weight:600;text-transform:none;color:var(--ink)}
.hm-sum{margin:0;font-size:17px;color:var(--body)}
.hm-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:18px;align-items:start}
.hm-main,.hm-side{display:grid;gap:18px;min-width:0}
.hm-card{background:var(--white);padding:20px 22px;border-bottom-left-radius:var(--r-card);border-top-right-radius:var(--r-card)}
.hm-card h2{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 8px;font-size:16px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink)}
.hm-link{font-size:13px;font-weight:500;color:var(--slate);text-decoration:none;border:0}
.hm-link:hover{color:var(--ink)}
.hm-list{list-style:none;margin:0;padding:0}
.hm-row+.hm-row{border-top:1px solid var(--rule-soft)}
.hm-row a{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px 10px;margin:0 -10px;border-radius:10px;color:inherit;text-decoration:none;border:0;transition:background .15s}
.hm-row a:hover{background:var(--paper)}
.hm-ico{width:34px;height:34px;display:grid;place-items:center;background:var(--paper);color:var(--ink)}
.hm-ico svg{width:17px;height:17px}
.hm-t{min-width:0}
.hm-t b{display:block;font-size:15px;font-weight:600;line-height:1.3;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hm-t span{display:block;margin-top:2px;font-size:13.5px;line-height:1.35;color:var(--slate);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hm-when{font-size:13px;color:var(--slate);white-space:nowrap}
.hm-row.late .hm-ico{background:var(--signal-bg);color:var(--signal)}
.hm-row.late .hm-when{color:var(--signal);font-weight:600}
.hm-more{margin:10px 0 0;font-size:13.5px}
.hm-more a{color:var(--ink);font-weight:600}
.hm-clear{display:flex;align-items:center;gap:10px;margin:6px 0 2px;color:var(--body);font-size:15px}
.hm-clear svg{width:18px;height:18px;color:var(--status)}
.hm-note{margin:4px 0 0;font-size:14px;color:var(--slate)}
.hm-day{padding:12px 0 4px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate)}
.hm-day:first-child{padding-top:2px}
.hm-ev a{display:grid;grid-template-columns:58px minmax(0,1fr);gap:10px;padding:7px 8px;margin:0 -8px;border-radius:8px;color:inherit;text-decoration:none;border:0}
.hm-ev a:hover{background:var(--paper)}
.hm-time{font-family:var(--mono);font-size:12px;color:var(--slate);padding-top:2px;white-space:nowrap}
.hm-evt{font-size:14.5px;line-height:1.35;color:var(--ink);min-width:0}
.hm-evt small{display:block;font-size:12.5px;color:var(--slate)}
.hm-since ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.hm-since li{font-size:14.5px;line-height:1.5;color:var(--body)}
.hm-since li b{color:var(--ink)}
.hm-names{color:var(--slate)}
@media (max-width:980px){.hm-grid{grid-template-columns:1fr}}
@media (max-width:560px){
  .hm-card{padding:16px}
  .hm-row a{grid-template-columns:30px minmax(0,1fr);gap:12px}
  .hm-ico{width:30px;height:30px}
  .hm-when{grid-column:2;margin-top:-6px}
}

/* A dashboard's own controls sit behind one More button, so the page leads with its figures. */
.dash-menu{position:relative}
.dash-menu>summary{list-style:none;cursor:pointer}
.dash-menu>summary::-webkit-details-marker{display:none}
.dash-menu-list{position:absolute;right:0;top:calc(100% + 6px);z-index:30;min-width:240px;display:grid;gap:2px;padding:8px;background:var(--white);box-shadow:0 18px 40px -12px rgba(18,22,27,.28),0 0 0 1px rgba(18,22,27,.06)}
.dash-menu-list button{display:flex;align-items:center;gap:8px;padding:9px 10px;border:0;border-radius:8px;background:none;font:inherit;font-size:14px;color:var(--ink);text-align:left;cursor:pointer}
.dash-menu-list button:hover{background:var(--paper)}
.dash-menu-list button.danger{color:var(--signal)}
.dash-menu-list .dash-about{margin:6px 10px 2px;padding-top:8px;border-top:1px solid var(--rule);font-size:12.5px;line-height:1.45}
.seg-mini{display:inline-flex;gap:2px;padding:3px;background:var(--paper)}
.seg-mini button{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border:0;border-radius:99px;background:none;font:inherit;font-size:13px;font-weight:500;color:var(--slate);cursor:pointer}
.seg-mini button b{font-weight:600;font-size:12px}
.seg-mini button[aria-pressed="true"]{background:var(--white);color:var(--ink);box-shadow:0 1px 3px rgba(18,22,27,.12)}
.hm-who{display:inline-block;margin-right:8px;padding:2px 8px;border-radius:99px;background:var(--paper);color:var(--body);font-size:12px;font-weight:500}

/* ---------- A calmer staff area ----------
   The public site shouts on purpose: orange tabs and capitals are the brand, seen once.
   Somewhere you work all day, the same volume on every heading, column and button made
   everything look equally urgent. Here headings are plain words in sentence case, the
   page you are on is marked quietly on the rail, and orange is kept for the one main
   button and for what is late. Status tags stay small capitals: they are labels, not
   headings. */
body.staff .htab{background:none;color:var(--ink);padding:0;border-radius:0;text-transform:none;letter-spacing:-.015em;font-size:clamp(24px,2.3vw,30px);line-height:1.12}
body.staff .page-head .htab,body.staff .br-head .htab{padding:0;font-size:clamp(24px,2.3vw,30px)}
body.staff .main h2{text-transform:none;letter-spacing:-.01em;font-size:clamp(20px,2vw,24px)}
body.staff .main :is(h3,.as-h3){text-transform:none;letter-spacing:0}
body.staff .panel h3{font-size:15.5px;letter-spacing:0;margin-bottom:12px}
body.staff .tbl th{font-family:inherit;font-size:12.5px;font-weight:500;letter-spacing:0;text-transform:none}
body.staff .main .label{font-family:inherit;font-size:12.5px;font-weight:500;letter-spacing:0;text-transform:none}
body.staff .main .btn{text-transform:none;letter-spacing:0;font-size:14px}
body.staff .main .btn.sm{font-size:13.5px}
body.staff .rail a.on{background:rgba(255,255,255,.1);box-shadow:inset 3px 0 0 var(--signal)}
body.staff .rail.mo-glide a.on{box-shadow:none}
body.staff .rail-glide{background:rgba(255,255,255,.1);box-shadow:inset 3px 0 0 var(--signal)}
body.staff .hm-card h2{font-size:16px;letter-spacing:0}
.seg-mini a{display:inline-flex;align-items:center;padding:6px 14px;border:0;border-radius:99px;font-size:13.5px;font-weight:500;color:var(--slate);text-decoration:none}
.seg-mini a[aria-pressed="true"]{background:var(--white);color:var(--ink);box-shadow:0 1px 3px rgba(18,22,27,.12)}
.seg-mini a:hover{color:var(--ink)}
.page-head .seg-mini{background:var(--rule)}

/* Brand shapes for everything added for Home, Inbox and the calmer look: two corners
   rounded, top right and bottom left, the rest square (as the cards, buttons and tags).
   Faces stay round: they are people, not shapes. */
.hm-who,.seg-mini button,.seg-mini a{border-radius:0 var(--r-tag) 0 var(--r-tag)}
.seg-mini{border-radius:0 var(--r-btn) 0 var(--r-btn)}
.hm-row a,.hm-ev a,.dash-menu-list button{border-radius:0 var(--r-btn) 0 var(--r-btn)}
.hm-ico{border-radius:0 10px 0 10px}
.dash-menu-list{border-radius:0 var(--r-card) 0 var(--r-card)}
.fd-it{border-radius:0 var(--r-tag) 0 var(--r-tag)}
.hub-n{border-radius:0 4px 0 4px}

/* Home, the fuller version: start something, four figures at a glance, the work on the go. */
.hm-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px 28px;margin-bottom:20px}
.hm-top .hm-head{margin:0}
.hm-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px}
.hm-tile{display:flex;flex-direction:column;gap:2px;padding:16px 18px 15px;background:var(--white);color:inherit;text-decoration:none;border:0;border-radius:0 var(--r-card) 0 var(--r-card);transition:transform .2s cubic-bezier(.3,.8,.3,1),box-shadow .2s}
.hm-tile:hover{transform:translateY(-3px);box-shadow:0 14px 28px -18px rgba(18,22,27,.45)}
.hm-tile-l{font-size:13px;font-weight:500;color:var(--slate)}
.hm-tile b{font-size:clamp(24px,2.2vw,30px);line-height:1.15;font-weight:600;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.hm-tile-s{font-size:13px;color:var(--slate)}
.hm-tile.warn .hm-tile-s{color:var(--signal);font-weight:600}
.hm-proj-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.hm-proj{display:flex;flex-direction:column;gap:4px;padding:14px 16px 15px;background:var(--paper);color:inherit;text-decoration:none;border:0;border-radius:0 var(--r-btn) 0 var(--r-btn);transition:background .15s,box-shadow .15s}
.hm-proj:hover{background:var(--rule-soft)}
.hm-proj-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:2px}
.hm-stage{font-size:12px;font-weight:600;color:var(--ink);background:var(--white);padding:2px 8px;border-radius:0 var(--r-tag) 0 var(--r-tag)}
.hm-proj .hm-who{background:var(--white);margin:0}
.hm-proj>b{font-size:15px;font-weight:600;color:var(--ink);line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hm-proj-c{font-size:12.5px;color:var(--slate);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hm-proj-n{margin-top:4px;font-size:13.5px;color:var(--body);line-height:1.35}
.hm-proj-n em{font-style:normal;color:var(--slate)}
.hm-proj-n.late em{color:var(--signal);font-weight:600}
.hm-proj-n.quiet{color:var(--slate)}
.hm-bar{display:block;height:4px;margin-top:8px;background:var(--rule);overflow:hidden}
.hm-bar i{display:block;height:100%;background:var(--ink)}
@media (max-width:1100px){.hm-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){.hm-proj-grid{grid-template-columns:1fr}}
@media (max-width:560px){.hm-tiles{gap:10px}.hm-tile{padding:14px}}

/* Home, calmer: one New button, five things at most, the week beside them, and the
   work on the go in one row underneath. What the other person changed is a quiet line
   under the greeting rather than a box. */
.hm-top{align-items:flex-start}
.hm-new{margin-top:26px}
.hm-new .dash-menu-list{min-width:220px}
.hm-since-line{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:2px}
.hm-since-line li{font-size:14px;color:var(--slate);line-height:1.5}
.hm-since-line li b{color:var(--body);font-weight:600}
.hm-since-line .hm-names{color:var(--slate)}
.hm>.hm-projects{margin-top:18px}
.hm>.hm-projects .hm-proj-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){.hm>.hm-projects .hm-proj-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){.hm>.hm-projects .hm-proj-grid{grid-template-columns:1fr}.hm-new{margin-top:0}}

/* The page you are on: back to the solid orange block in the brand shape, as it was.
   The pale fill with an edge line (tried for the calmer look) bent round the corner. */
body.staff .rail a.on,body.staff .rail-glide{background:var(--signal);box-shadow:none}
body.staff .rail.mo-glide a.on{background:transparent}
body.staff .rail a.on{color:var(--paper)}
body.staff .rail a.on .count{background:var(--signal-text);color:var(--paper)}

/* ---------- A project's page ----------
   The head says what it is and who it is for; a row of steps says where it is on the
   board; four facts say what happens next, how the days are going, the fee and the
   launch; tabs hold everything else, one subject at a time. One orange button. */
.pj-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px 24px}
.pj-title{min-width:0}
.pj-title .ref-tag{margin-bottom:8px;display:inline-block}
.pj-title h1{display:block}
.pj-meta{margin:6px 0 0;font-size:14.5px;color:var(--slate)}
.pj-meta a{color:var(--ink);font-weight:500}
.pj-path{list-style:none;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.pj-path::-webkit-scrollbar{display:none}
.pj-path li{flex:1 1 0;min-width:max-content;padding:9px 14px;background:var(--rule);color:#565E6A;font-size:13px;font-weight:500;white-space:nowrap;border-radius:0 var(--r-tag) 0 var(--r-tag)}
.pj-path li.done{color:var(--ink)}
.pj-path li.done span::before{content:"";display:inline-block;width:8px;height:5px;margin:0 8px 2px 0;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg)}
.pj-path li.here{background:var(--ink);color:var(--paper);font-weight:600}
.pj-hl{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:12px;margin-bottom:20px}
.pj-hl-i{display:flex;flex-direction:column;gap:3px;padding:14px 16px;background:var(--white);border-radius:0 var(--r-card) 0 var(--r-card);min-width:0}
.pj-hl-l{font-size:12.5px;font-weight:500;color:var(--slate)}
.pj-hl-i b{font-size:18px;line-height:1.3;font-weight:600;color:var(--ink)}
.pj-hl-i b small{font-size:13px;font-weight:500;color:var(--slate)}
.pj-hl-s{font-size:13px;color:var(--slate)}
.pj-next.late .pj-hl-s{color:var(--signal);font-weight:600}
.pj-bar{display:block;height:4px;margin-top:8px;background:var(--rule);overflow:hidden}
.pj-bar i{display:block;height:100%;background:var(--ink)}
.pj-bar.over i{background:var(--signal)}
.pj-tabs{margin-bottom:16px}
.linkish{text-underline-offset:2px}
.muted{color:var(--slate);font-weight:400}
@media (max-width:980px){.pj-hl{grid-template-columns:repeat(2,minmax(0,1fr))}.pj-next{grid-column:1/-1}}
@media (max-width:560px){.pj-head .btn-row{width:100%}.pj-path li{padding:8px 11px}}
/* The launch and its date live in the four facts at the top of a project, so the plan's own launch strip is not shown twice. */
.pj-body .tk-due{display:none}
.pj-body .tk-h{font-size:17px}
@media (max-width:700px){.pj-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.pj-tabs::-webkit-scrollbar{display:none}.pj-tabs a{flex:none}}

/* The board panel on a project: a ring that fills as the next column's needs are met,
   and one line per need with a filled or empty circle. Taking it off the board (Finished,
   Lost) is behind More. */
.wp-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.wp-ring{width:56px;height:56px;flex:none}
.wp-ring circle{fill:none;stroke-width:6}
.wp-ring-bg{stroke:var(--rule-soft)}
.wp-ring-fg{stroke:var(--ink);stroke-linecap:butt;transition:stroke-dasharray .6s cubic-bezier(.3,.8,.3,1)}
.wp-ring-fg.full{stroke:var(--status)}
.wp-ring text{font-size:15px;font-weight:600;fill:var(--ink);font-family:inherit}
.wp-ring-tick{fill:none;stroke:var(--status);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.wp-say{flex:1;min-width:180px;display:grid;gap:2px}
.wp-l{font-size:12.5px;font-weight:500;color:var(--slate)}
.wp-say b{font-size:17px;font-weight:600;color:var(--ink)}
.wp-list{list-style:none;margin:16px 0 4px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.wp-list li{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--paper);font-size:14px;color:var(--ink);border-radius:0 var(--r-btn) 0 var(--r-btn)}
.wp-list li.met{color:var(--slate)}
.wp-dot{flex:none;width:20px;height:20px;display:grid;place-items:center;border-radius:50%;box-shadow:inset 0 0 0 2px var(--rule-strong);color:#fff}
.wp-list li.met .wp-dot{background:var(--status);box-shadow:none}
.wp-dot svg{width:13px;height:13px}
.wp-t{flex:1;min-width:0}
.wp-list li .btn{margin-left:auto}
.wp .jobsec{margin-top:18px}
.wp .jobsec-head{border-bottom-color:var(--rule)!important}
/* The first task: a drawing and one button, not an empty form. */
.tk-empty{display:flex;align-items:center;gap:18px;padding:6px 0 14px}
.tk-empty svg{width:92px;height:74px;flex:none;fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.tk-empty svg .soft{stroke:var(--on-ink-dim)}
.tk-empty p{margin:0;font-size:14.5px;color:var(--body)}
.tk-empty b{color:var(--ink)}
.tk-adder>summary{list-style:none;cursor:pointer;display:inline-flex}
.tk-adder>summary::-webkit-details-marker{display:none}
.tk-adder[open]>summary{display:none}
body.staff .pj-body .tk-h{font-size:17px;letter-spacing:0}

/* ---------- Empty pages: a small line drawing that says what would be here ----------
   One drawing per kind of page, in the same pencil line as the public site. */
body.staff .empty::before{content:"";display:block;width:104px;height:84px;margin:4px auto 14px;background:no-repeat center/contain;background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20120%2096%22%20fill%3D%22none%22%20stroke%3D%22%2312161B%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%2036l40-16%2040%2016v36L60%2088%2020%2072z%22%2F%3E%3Cpath%20d%3D%22M20%2036l40%2016%2040-16M60%2052v36%22%2F%3E%3Cpath%20stroke%3D%22%23A9AEB5%22%20d%3D%22M40%2028l40%2016%22%2F%3E%3C%2Fsvg%3E")}
body.staff .empty{padding:30px 26px 32px;font-size:14.5px;line-height:1.55;color:var(--body)}
#view[data-page="mail"] .empty::before,#view[data-page="requests"] .empty::before,#view[data-page="chasing"] .empty::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20120%2096%22%20fill%3D%22none%22%20stroke%3D%22%2312161B%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M22%2024h76v50H22z%22%2F%3E%3Cpath%20d%3D%22M22%2026l38%2028%2038-28%22%2F%3E%3Cpath%20stroke%3D%22%23A9AEB5%22%20d%3D%22M10%2040h8M6%2050h12M12%2060h6%22%2F%3E%3C%2Fsvg%3E")}
#view[data-page="chat"] .empty::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20120%2096%22%20fill%3D%22none%22%20stroke%3D%22%2312161B%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M18%2020h52v32H40l-12%2010V52H18z%22%2F%3E%3Cpath%20d%3D%22M58%2044h44v30h-8v10l-12-10H58z%22%2F%3E%3Cpath%20stroke%3D%22%23A9AEB5%22%20d%3D%22M28%2032h32M28%2040h22M68%2056h24M68%2064h16%22%2F%3E%3C%2Fsvg%3E")}
#view[data-page="calendar"] .empty::before,#view[data-page="social"] .empty::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20120%2096%22%20fill%3D%22none%22%20stroke%3D%22%2312161B%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M24%2022h72v60H24z%22%2F%3E%3Cpath%20d%3D%22M24%2036h72M40%2014v14M80%2014v14%22%2F%3E%3Cpath%20stroke%3D%22%23A9AEB5%22%20d%3D%22M34%2048h8M52%2048h8M70%2048h8M34%2062h8M52%2062h8%22%2F%3E%3Cpath%20d%3D%22M68%2058l5%205%209-10%22%2F%3E%3C%2Fsvg%3E")}
#view[data-page="invoices"] .empty::before,#view[data-page="transactions"] .empty::before,#view[data-page="expenses"] .empty::before,#view[data-page="drawings"] .empty::before,#view[data-page="finance"] .empty::before,#view[data-page="recurring"] .empty::before,#view[data-page="renewals"] .empty::before,#view[data-page="quotes"] .empty::before,#view[data-page="quote"] .empty::before,#view[data-page="documents"] .empty::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20120%2096%22%20fill%3D%22none%22%20stroke%3D%22%2312161B%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M34%2012h52v72l-6-5-7%205-7-5-6%205-7-5-7%205-6-5-6%205z%22%2F%3E%3Cpath%20stroke%3D%22%23A9AEB5%22%20d%3D%22M44%2030h32M44%2040h32M44%2050h20%22%2F%3E%3Cpath%20d%3D%22M60%2062v8M56%2064h8%22%2F%3E%3C%2Fsvg%3E")}
#view[data-page="clients"] .empty::before,#view[data-page="contacts"] .empty::before,#view[data-page="team"] .empty::before,#view[data-page="person"] .empty::before,#view[data-page="accounts"] .empty::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20120%2096%22%20fill%3D%22none%22%20stroke%3D%22%2312161B%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2246%22%20cy%3D%2236%22%20r%3D%2212%22%2F%3E%3Cpath%20d%3D%22M24%2080c0-14%2010-24%2022-24s22%2010%2022%2024%22%2F%3E%3Ccircle%20cx%3D%2280%22%20cy%3D%2242%22%20r%3D%229%22%20stroke%3D%22%23A9AEB5%22%2F%3E%3Cpath%20stroke%3D%22%23A9AEB5%22%20d%3D%22M72%2080c0-10%204-18%2012-20%22%2F%3E%3C%2Fsvg%3E")}
#view[data-page="projects"] .empty::before,#view[data-page="pipeline"] .empty::before,#view[data-page="days"] .empty::before,#view[data-page="calls"] .empty::before,#view[data-page="todo"] .empty::before,#view[data-page="home"] .empty::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20120%2096%22%20fill%3D%22none%22%20stroke%3D%22%2312161B%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M34%2014h52v74H34z%22%2F%3E%3Cpath%20d%3D%22M48%2010h24v10H48z%22%2F%3E%3Cpath%20stroke%3D%22%23A9AEB5%22%20d%3D%22M44%2036l5%205%209-10M64%2038h14M44%2056l5%205%209-10M64%2058h14M44%2076h6M64%2076h14%22%2F%3E%3C%2Fsvg%3E")}
#view[data-page="analytics"] .empty::before,#view[data-page="dashboard"] .empty::before,#view[data-page="dashboards"] .empty::before,#view[data-page="speed"] .empty::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20120%2096%22%20fill%3D%22none%22%20stroke%3D%22%2312161B%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M18%2080h84%22%2F%3E%3Cpath%20d%3D%22M28%2072V52M46%2072V36M64%2072V46M82%2072V24%22%2F%3E%3Cpath%20stroke%3D%22%23A9AEB5%22%20d%3D%22M28%2044l18-16%2018%2010%2018-22%22%2F%3E%3C%2Fsvg%3E")}
#view[data-page="sites"] .empty::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20120%2096%22%20fill%3D%22none%22%20stroke%3D%22%2312161B%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M16%2020h88v60H16z%22%2F%3E%3Cpath%20d%3D%22M16%2032h88%22%2F%3E%3Cpath%20stroke%3D%22%23A9AEB5%22%20d%3D%22M24%2026h4M32%2026h4M40%2026h4M28%2044h40M28%2054h28M28%2064h34%22%2F%3E%3Ccircle%20cx%3D%2284%22%20cy%3D%2258%22%20r%3D%2210%22%2F%3E%3C%2Fsvg%3E")}
/* A small empty note inside a panel keeps its words only. */
body.staff .dash-grid .empty::before,body.staff .ch .empty::before,body.staff .empty.ch-none::before,body.staff .stack .empty::before,body.staff .two .empty::before{display:none}

/* States: a coloured dot and the word, in the brand tag shape. */
.st{display:inline-flex;align-items:center;gap:6px;padding:3px 9px 3px 8px;font-size:12.5px;font-weight:500;line-height:1.4;white-space:nowrap;background:var(--paper);color:var(--ink);border-radius:0 var(--r-tag) 0 var(--r-tag)}
.st i{width:7px;height:7px;border-radius:50%;background:var(--on-ink-dim);flex:none}
.st-good i{background:var(--status)}.st-good{background:var(--status-bg);color:var(--status)}
.st-now i{background:var(--ink)}
.st-wait i{background:var(--signal)}.st-wait{background:var(--signal-bg);color:var(--signal-text)}
.st-quiet{color:var(--slate)}

/* Rings: how far through, the same drawing everywhere. */
.ring{flex:none;display:block}
.ring circle{fill:none;stroke-width:4.5}
.ring-bg{stroke:var(--rule)}
.ring-fg{stroke:var(--ink);transition:stroke-dasharray .6s cubic-bezier(.3,.8,.3,1)}
.ring.full .ring-fg{stroke:var(--status)}
.ring text{font-size:11px;font-weight:600;fill:var(--ink);font-family:inherit}
.ring-tick{fill:none;stroke:var(--status);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.ring-say{display:inline-flex;align-items:center;gap:10px;font-size:14px;color:var(--body)}
.ring-say b{color:var(--ink)}
.tk-h{display:flex;align-items:center;gap:12px}
.tk-h .ring-say{gap:0}
.tk-of{font-size:13.5px;font-weight:400;color:var(--slate)}
body.staff .main .tag{font-family:inherit;font-size:12px;font-weight:500;letter-spacing:0;text-transform:none;padding:3px 9px}

/* Page titles carry their glyph in a small ink tile, the rail's shape. */
.ph-ico{display:inline-grid;place-items:center;width:36px;height:36px;margin-right:12px;vertical-align:middle;background:var(--ink);color:var(--paper);border-radius:0 10px 0 10px;flex:none}
.ph-ico svg{width:18px;height:18px}
.page-head>.ph-ico+h1,.page-head .ph-ico+h1{display:inline-block;vertical-align:middle}
.page-head:has(>.ph-ico){justify-content:flex-start}
.page-head:has(>.ph-ico)>.btn-row{margin-left:auto}
.pj-title .ph-ico{display:none}

/* Money in one picture: three figures and one bar split the same way. */
.mb{background:var(--white);padding:18px 22px 20px;margin-bottom:16px;border-radius:0 var(--r-card) 0 var(--r-card)}
.mb-figs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.mb-f{display:grid;gap:2px;padding-left:12px;box-shadow:inset 3px 0 0 var(--rule-strong)}
.mb-f span{font-size:12.5px;font-weight:500;color:var(--slate)}
.mb-f b{font-size:22px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.mb-f.late{box-shadow:inset 3px 0 0 var(--signal)}.mb-f.late b{color:var(--signal)}
.mb-f.wait{box-shadow:inset 3px 0 0 var(--ink)}
.mb-f.paid{box-shadow:inset 3px 0 0 var(--status)}
.mb-bar{display:flex;gap:3px;height:12px;margin-top:16px;overflow:hidden;border-radius:0 6px 0 6px}
.mb-bar i{display:block;min-width:4px}
.mb-bar .late{background:var(--signal)}.mb-bar .wait{background:var(--ink)}.mb-bar .paid{background:var(--status)}.mb-bar .rest{background:var(--rule)}
.mb-key{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:12px;font-size:13.5px;color:var(--slate)}
.mb-key span{display:inline-flex;align-items:center;gap:7px}
.mb-key i{width:10px;height:10px;display:block;border-radius:0 3px 0 3px}
.mb-key .paid i{background:var(--status)}.mb-key .wait i{background:var(--ink)}.mb-key .rest i{background:var(--rule)}
.mb-key b{color:var(--ink);font-weight:600}
.fee-where{margin-bottom:14px}
.fee-where .mb-bar{margin-top:6px}
@media (max-width:640px){.mb-figs{grid-template-columns:1fr}}

/* Projects list: where each one is, as small blocks, and days used as a bar. */
.mpath{display:inline-flex;align-items:center;gap:10px}
.mp{display:inline-flex;gap:2px}
.mp i{width:10px;height:6px;background:var(--rule);display:block}
.mp i.d{background:var(--on-ink-dim)}.mp i.h{background:var(--ink)}
.mdays{display:inline-grid;justify-items:end;gap:4px}
.mdays small{color:var(--slate)}
.mbar{display:block;width:72px;height:4px;background:var(--rule);overflow:hidden}
.mbar i{display:block;height:100%;background:var(--ink)}
.mbar.over i{background:var(--signal)}

/* Days, week by week. */
.wk{margin-bottom:14px}
.wk-bars{display:grid;gap:8px;align-items:end;height:130px;margin-top:8px}
.wk-col{display:grid;grid-template-rows:auto 1fr auto;height:100%;align-items:end;justify-items:center;gap:4px}
.wk-col i{display:block;width:100%;max-width:34px;min-height:2px;background:var(--ink);border-radius:0 6px 0 0;align-self:end}
.wk-v{font-size:12px;font-weight:600;color:var(--ink);min-height:15px}
.wk-l{font-size:11px;color:var(--slate);white-space:nowrap}
@media (max-width:640px){.wk-l{font-size:9.5px}}
.wk-col i.z{background:var(--rule)}

/* ---------- Drawings and logos ----------
   A pencil drawing of what each page is for, drawn in as the page arrives; the client's
   own logo wherever a job is named, so a job is recognised before its name is read. */
.ph-art{flex:0 1 190px;height:64px;width:auto;margin-left:auto;overflow:visible;fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ph-art .s{stroke:var(--on-ink-dim)}
.ph-art path,.ph-art circle{stroke-dasharray:1;stroke-dashoffset:0}
.page-head:has(>.ph-art)>.btn-row{margin-left:18px}
@media (prefers-reduced-motion:no-preference){
  .ph-art path,.ph-art circle{animation:ph-draw 1.1s cubic-bezier(.45,0,.35,1) both}
  .ph-art .s{animation-delay:.35s}
  @keyframes ph-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
}
@media (max-width:760px){.ph-art{display:none}.page-head:has(>.ph-art)>.btn-row{margin-left:auto}}
.pj-id{display:flex;align-items:center;gap:18px;min-width:0}
.pj-id>.cmark{flex:none;border-radius:0 14px 0 14px}
.hm-proj-id{display:flex;align-items:center;gap:10px;min-width:0}
.hm-proj-nm{display:grid;min-width:0}
.hm-proj-nm b{font-size:15px;font-weight:600;color:var(--ink);line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hm-proj .cmark{flex:none;background:var(--white)}
/* ---------- Title blocks ----------
   A first-level page opens with a white title block, like the corner of a drawing: its
   glyph, its name and one line saying what it is for, then the drawing sitting on two
   faint construction lines, then its buttons. */
.page-head.ph-band{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;grid-template-rows:auto auto;column-gap:18px;min-height:118px;padding:20px 26px;margin-bottom:18px;background:var(--white);overflow:hidden;border-radius:0 var(--r-card) 0 var(--r-card)}
.ph-band::before,.ph-band::after{content:"";position:absolute;left:0;right:0;height:1px;background:repeating-linear-gradient(90deg,var(--rule) 0 6px,transparent 6px 12px);pointer-events:none}
.ph-band::before{top:26px}.ph-band::after{bottom:26px}
.ph-band>*{position:relative;z-index:1}
.ph-band>.ph-ico{grid-row:1/3;width:48px;height:48px;margin:0;border-radius:0 12px 0 12px}
.ph-band>.ph-ico svg{width:22px;height:22px}
.ph-band>h1{grid-column:2;grid-row:1;align-self:end}
.ph-band>.ph-sub{grid-column:2;grid-row:2;align-self:start;margin:4px 0 0;font-size:14.5px;line-height:1.45;color:var(--slate)}
.ph-band>.ph-art{grid-column:3;grid-row:1/3}
.ph-band>.btn-row{grid-column:4;grid-row:1/3;margin-left:6px!important}
.ph-band>h1:only-of-type{grid-row:1/3;align-self:center}
.ph-band:not(:has(>.ph-sub))>h1{grid-row:1/3;align-self:center}
@media (max-width:760px){
  .page-head.ph-band{grid-template-columns:auto minmax(0,1fr);row-gap:10px;padding:16px 18px;min-height:0}
  .ph-band>.ph-ico{grid-row:1/2;width:40px;height:40px}
  .ph-band>h1,.ph-band:not(:has(>.ph-sub))>h1{grid-row:1/2!important;align-self:center!important;margin:0}
  .ph-band>.ph-sub{grid-column:1/-1;grid-row:2}
  .ph-band>.btn-row{grid-column:1/-1;grid-row:3}
  .ph-band::before,.ph-band::after{display:none}
}

/* ---------- Home: the desk by the window ---------- */
.hm-hero{position:relative;align-items:flex-start;min-height:190px;padding:26px 30px 28px;background:var(--white);overflow:hidden;border-radius:0 var(--r-card) 0 var(--r-card)}
.hm-hero .hm-head{position:relative;z-index:1;max-width:min(520px,46%)}
.hm-hero .hm-new{position:relative;z-index:2;margin-top:0;margin-left:auto}
.hm-scene{position:absolute;right:130px;bottom:0;height:160px;width:auto;fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.hm-scene .s{stroke:var(--on-ink-dim)}
.hm-scene .guide path{stroke:var(--rule);stroke-dasharray:6 6;stroke-width:1}
.hm-scene .win-sky{stroke:none;fill:var(--signal-bg)}
.hm-scene.afternoon .win-sky{fill:var(--paper)}
.hm-scene.evening .win-sky{fill:#1E242C}
.hm-scene.evening .hill{stroke:var(--slate)}
.hm-scene.evening .frame{stroke:var(--ink)}
.hm-scene .sun{fill:var(--signal);stroke:none}
.hm-scene .moon{fill:var(--paper);stroke:none}
.hm-scene .star{stroke:var(--paper);stroke-width:2.6}
.hm-scene .glow{fill:#F6CDBA;stroke:none;opacity:.55}
.hm-scene .sheet{fill:var(--paper-soft)}
.hm-scene .mark{fill:var(--ink);stroke:none}
.hm-scene .dash{stroke-dasharray:3 3}
.hm-scene .lamp{fill:var(--ink)}
@media (prefers-reduced-motion:no-preference){
  .hm-scene .sun,.hm-scene .moon{animation:hm-rise 1.4s cubic-bezier(.2,.7,.3,1) both}
  @keyframes hm-rise{from{transform:translateY(14px);opacity:0}}
  .hm-scene .star{animation:hm-twinkle 3.6s ease-in-out infinite alternate}
  .hm-scene .star:nth-of-type(2n){animation-delay:1.2s}
  @keyframes hm-twinkle{from{opacity:.35}}
}
@media (max-width:1100px){.hm-scene{right:20px;opacity:.9}.hm-hero .hm-head{max-width:48%}}
@media (max-width:900px){.hm-scene{display:none}.hm-hero .hm-head{max-width:none}.hm-hero{min-height:0;padding:20px}}

/* ---------- Review pass: the fixes ---------- */
/* Title blocks as a row that wraps, whatever else a page keeps in its head. */
.page-head.ph-band{display:flex!important;flex-wrap:wrap;align-items:center;gap:12px 20px}
.ph-t{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:16px;align-items:center;flex:1 1 320px;min-width:0}
.ph-t>.ph-ico{grid-row:1/3;width:48px;height:48px;margin:0;border-radius:0 12px 0 12px}
.ph-t>.ph-ico svg{width:22px;height:22px}
.ph-t>h1{grid-column:2;align-self:end;margin:0}
.ph-t>.ph-sub{grid-column:2;align-self:start;margin:4px 0 0;font-size:14.5px;line-height:1.45;color:var(--slate)}
.ph-t>h1:last-child{grid-row:1/3;align-self:center}
.ph-band>.ph-art{flex:none;height:96px;width:auto;margin:0 0 0 auto;background:var(--white)}
.ph-band>.btn-row,.ph-band>.small,.ph-band>span{margin-left:0!important}
.ph-band>.ph-art+.btn-row{margin-left:0!important}
.ph-band>.ph-t+.btn-row,.ph-band>.ph-t+.small{margin-left:auto!important}
/* The drawings fade in rather than draw: a page that redraws itself never leaves one half drawn. */
.ph-art path,.ph-art circle{animation:none!important;stroke-dashoffset:0!important;stroke-dasharray:none!important}

@media (max-width:760px){.ph-t{flex-basis:100%}.ph-band>.btn-row{margin-left:0!important}}
/* The rail: the page you are on is simply the orange block, with no sliding piece to lose its place. */
body.staff .rail-glide{display:none!important}
body.staff .rail.mo-glide a.on,body.staff .rail a.on{background:var(--signal)!important;color:var(--paper)}
/* Plain words in the staff area: no shouting capitals on labels, tags, column heads or the crumb. */
body.staff .main :is(th,.label,.tag,.small,small,span,b,div,p,button,a,h2,h3,h4,li,td){text-transform:none}
body.staff .main :is(th,.tag){letter-spacing:0}
body.staff .topbar #crumb{font-family:inherit;text-transform:none;letter-spacing:0;font-size:13.5px;font-weight:500;color:var(--slate)}
body.staff .main .hm-date,body.staff .main .hm-day{text-transform:uppercase}
/* Charts in the staff area are ink, with orange kept for what matters (the won column). */
.an-funnel .an-across-t i{background:var(--ink)}
.an-funnel li.won .an-across-t i{background:var(--signal)}
.w-col i{background:var(--ink)}

/* ---------- The board: cards that read at a glance ---------- */
.lead{background:var(--white);padding:12px;box-shadow:0 1px 0 rgba(18,22,27,.06),0 6px 16px -12px rgba(18,22,27,.35);transition:transform .15s,box-shadow .15s}
.lead:hover{transform:translateY(-2px);box-shadow:0 1px 0 rgba(18,22,27,.06),0 12px 22px -14px rgba(18,22,27,.4)}
.lead-top{display:flex;align-items:center;gap:10px;min-width:0}
.lead-top .cmark{flex:none;border-radius:0 8px 0 8px}
.lead-id{display:grid;min-width:0}
.lead-id b{margin:0!important;font-size:14px;line-height:1.3;color:var(--ink)}
.lead-what{font-size:13px;line-height:1.35;color:var(--slate);margin-top:1px}
.pj-two{display:grid;min-width:0}.pj-two small{font-size:13px;color:var(--slate);line-height:1.35}
.pj-meta .pj-what{color:var(--ink);font-weight:500}
.lead-client{font-size:12px;color:var(--slate);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lead-value{margin-top:8px;font-size:13px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.lead-next{display:flex;flex-wrap:wrap;gap:2px 6px;align-items:baseline;margin-top:10px;padding:7px 9px;background:var(--paper);font-size:12.5px;line-height:1.35;color:var(--ink);border-radius:0 var(--r-tag) 0 var(--r-tag)}
.lead-next em{font-style:normal;color:var(--slate)}
.lead-next.late{background:var(--signal-bg)}.lead-next.late em{color:var(--signal-text);font-weight:600}
.lead-next.quiet{color:var(--slate)}
.lead-foot{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:10px;font-size:12px;color:var(--slate)}
.lead-ready{display:inline-flex;align-items:center;gap:6px}
.lead-ready .ring text{display:none}
.lead-ready.is-ready{color:var(--status)}
.lead-behind{color:var(--signal);font-weight:500}
.lead-age{margin-left:auto}
.lead-age.stuck{color:var(--signal);font-weight:600}
.lead .tag.fresh{border-radius:0 var(--r-tag) 0 var(--r-tag)}
.lead.late{box-shadow:inset 3px 0 0 var(--signal),0 6px 16px -12px rgba(18,22,27,.35)}
/* A project's head is a title block too, with the path set into its foot. */
.pj-head{position:relative;padding:22px 26px;margin-bottom:0;background:var(--white);overflow:hidden;align-items:center;border-radius:0 var(--r-card) 0 0}
.pj-head::before{content:"";position:absolute;left:0;right:0;top:24px;height:1px;background:repeating-linear-gradient(90deg,var(--rule) 0 6px,transparent 6px 12px)}
.pj-head>*{position:relative}
.pj-meta .ref-tag{font-size:11.5px;padding:2px 7px;vertical-align:1px}
.pj-path{margin:0 0 16px;padding:0 26px 18px;background:var(--white);border-radius:0 0 0 var(--r-card)}
@media (max-width:560px){.pj-head{padding:18px}.pj-path{padding:0 18px 14px}}
/* Board columns sit a shade darker than the cards on them. */
.col{background:var(--rule)}
.col h3{color:var(--ink);font-size:12.5px;letter-spacing:0}
/* Path steps already passed read as filled on the white head. */
.pj-path li.done{background:var(--paper)}
/* Tables on a phone: each row becomes a small card, first cell as its title, the rest
   wrapping beneath it, figures to the right. The column heads go (the cells say enough). */
@media (max-width:640px){
  body.staff .tbl:not(.mail-list):not(.an-tbl):not(.slots-table) thead{display:none}
  body.staff .tbl:not(.mail-list):not(.an-tbl):not(.slots-table) tbody tr{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;padding:12px 2px;border-bottom:1px solid var(--rule)}
  body.staff .tbl:not(.mail-list):not(.an-tbl):not(.slots-table) tbody td,body.staff .tbl:not(.mail-list):not(.an-tbl):not(.slots-table) tbody th{display:block;padding:0;border:0;font-size:13.5px}
  body.staff .tbl:not(.mail-list):not(.an-tbl):not(.slots-table) tbody tr>:first-child{flex-basis:100%;font-size:14.5px}
  body.staff .tbl:not(.mail-list):not(.an-tbl):not(.slots-table) tbody td.r{margin-left:auto}
  body.staff .tbl:not(.mail-list):not(.an-tbl):not(.slots-table) tbody td:empty{display:none}
}

/* Care plans: the monthly figure as a road, with the three marks along it. */
.cp{padding:22px 24px 26px;margin-bottom:18px}
.cp-top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px 24px}
.cp-now{display:grid;gap:2px}
.cp-now b{font-size:clamp(30px,4vw,40px);font-weight:600;line-height:1.05;color:var(--ink);font-variant-numeric:tabular-nums}
.cp-say{margin:0;font-size:15px;color:var(--slate);max-width:36ch}
.cp-road{margin-top:26px;padding-bottom:4px}
.cp-line{position:relative;height:14px;background:var(--rule);border-radius:0 7px 0 7px}
.cp-fill{position:absolute;inset:0 auto 0 0;background:var(--signal);border-radius:0 7px 0 7px;max-width:100%}
.cp-zone{position:absolute;top:-5px;bottom:-5px;box-shadow:inset 0 0 0 2px var(--ink);border-radius:0 6px 0 6px;min-width:2px}
.cp-zone.hit{box-shadow:inset 0 0 0 2px var(--status)}
.cp-you{position:absolute;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;background:var(--white);box-shadow:0 0 0 4px var(--signal);border-radius:50%}
.cp-marks{position:relative;height:66px;margin-top:12px}
.cp-mark{position:absolute;top:0;display:grid;gap:1px;padding-left:10px;box-shadow:inset 2px 0 0 var(--ink);font-size:13px;color:var(--slate);white-space:nowrap}
.cp-mark b{font-size:13.5px;color:var(--ink);font-weight:600}
.cp-mark.hit{box-shadow:inset 2px 0 0 var(--status)}.cp-mark.hit b{color:var(--status)}
.cp-mark:last-child{transform:translateX(-100%);padding:0 10px 0 0;box-shadow:inset -2px 0 0 var(--ink);text-align:right}
@media (max-width:700px){
  .cp-marks{height:auto;display:grid;gap:10px}
  .cp-mark,.cp-mark:last-child{position:static;transform:none;padding:0 0 0 10px;box-shadow:inset 2px 0 0 var(--ink);text-align:left;white-space:normal}
}

/* Tax year: twelve months of income as bars, costs as rows of bars, and the allowance as a meter. */
.wk-bars.m12{grid-template-columns:repeat(12,minmax(0,1fr));gap:6px}
.wk-bars.m12 .wk-v{font-size:11px}
.xb{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:10px}
.xb li{display:grid;grid-template-columns:minmax(90px,34%) 1fr auto;align-items:center;gap:12px;font-size:14px}
.xb-bar{height:10px;background:var(--rule-soft);border-radius:0 5px 0 5px;overflow:hidden}
.xb-bar i{display:block;height:100%;background:var(--ink);border-radius:0 5px 0 5px}
.xb b{font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink)}
.al{margin:6px 0 16px}
.al-say{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.al-say b{font-size:26px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.al-say span{color:var(--slate);font-size:14px}
.al-bar{height:12px;margin-top:8px;background:var(--rule);border-radius:0 6px 0 6px;overflow:hidden}
.al-bar i{display:block;height:100%;background:var(--ink);border-radius:0 6px 0 6px}
.al.over .al-bar i{background:var(--signal)}
.al.over .al-say b{color:var(--signal)}
/* Team keeps its title in its own wrapper; in the title block the wrapper steps aside. */
.ph-t>.tm-headline{display:contents}
.ph-t>.tm-headline>.ph-ico{grid-row:1/3;width:48px;height:48px;margin:0;border-radius:0 12px 0 12px}
.ph-t>.tm-headline>.ph-ico svg{width:22px;height:22px}
.ph-t>.tm-headline>h1{grid-column:2;align-self:end;margin:0}
.ph-t>.tm-headline>:not(.ph-ico):not(h1){grid-column:2}
/* Care plan stages read as light bands on the road. */
.cp-zone{background:rgba(18,22,27,.06)}

/* ---------- Getting about: seven places, two menus at the top, and records linked ---------- */
/* The top bar: Go to, New, and you. */
.find-btn{margin-right:12px}
.top-menu{position:relative;font-family:var(--sans);letter-spacing:0;text-transform:none}
.top-menu>summary{list-style:none;cursor:pointer}
.top-menu>summary::-webkit-details-marker{display:none}
.top-new{margin-right:150px}
.top-new>summary{display:inline-flex;align-items:center;gap:6px}
.top-new>summary svg{width:15px;height:15px}
.top-menu .dash-menu-list{top:calc(100% + 10px)}
.top-menu .dash-menu-list a,.top-menu .dash-menu-list button{display:flex;align-items:center;gap:8px;padding:9px 10px;border:0;border-radius:8px;background:none;font:inherit;font-size:14px;color:var(--ink);text-align:left;text-decoration:none;cursor:pointer;letter-spacing:0;text-transform:none;width:100%}
.top-menu .dash-menu-list a:hover,.top-menu .dash-menu-list button:hover{background:var(--paper)}
.topbar .chip.top-menu{padding:0}
.topbar .chip>summary{height:100%;display:inline-flex;align-items:center;gap:10px;padding:0 18px;color:var(--paper)}
.topbar .chip>summary::after{content:"";width:7px;height:7px;margin:-4px 0 0 2px;border:solid currentColor;border-width:0 1.6px 1.6px 0;transform:rotate(45deg);opacity:.7}
.topbar .chip[open]>summary::after{transform:rotate(-135deg);margin-top:4px}
.topbar .chip .dash-menu-list{right:0;min-width:200px}
.topbar .chip .dash-menu-list button{color:var(--ink)}
.topbar .chip .dash-menu-list button:hover{color:var(--ink)}
.topbar .chip .dash-menu-list [hidden]{display:none}
@media (max-width:880px){.top-new{margin-right:104px}.topbar .chip>summary{padding:0 12px}}
@media (max-width:560px){.topbar #chip-name{display:none}.top-new{margin-right:64px}}

/* The rail: seven places, and Set-up at its foot. */
.rail .rail-setup{color:var(--on-ink-dim)}
.rail .rail-setup.on{color:#fff}

/* What a record is joined to. */
.lk{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 18px}
.lk-l{font-size:12.5px;font-weight:500;color:var(--slate);margin-right:4px}
.lk-i{display:inline-flex;align-items:center;gap:9px;padding:6px 14px 6px 6px;background:var(--white);color:inherit;text-decoration:none;border:0;border-radius:0 12px 0 12px;box-shadow:0 1px 0 rgba(18,22,27,.04);transition:background .15s ease}
.lk-i:hover{background:var(--ink);color:var(--paper)}
.lk-i:hover .lk-t small{color:var(--on-ink)}.lk-i:hover .lk-t b{color:var(--paper)}
.lk-g{width:28px;height:28px;display:grid;place-items:center;background:var(--paper);color:var(--ink);border-radius:0 8px 0 8px}
.lk-i .cmark{flex:none}
.lk-t{display:grid;line-height:1.2}
.lk-t b{font-size:13.5px;font-weight:600;color:var(--ink);max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lk-t small{font-size:11.5px;color:var(--slate)}

/* Money, at a glance: four pictures, each a way in. */
.mo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.mo-card{display:grid;align-content:start;gap:4px;padding:22px 24px 20px;background:var(--white);color:inherit;text-decoration:none;border:0;border-radius:0 var(--r-card) 0 var(--r-card);transition:box-shadow .15s ease}
.mo-card:hover{box-shadow:inset 0 0 0 2px var(--ink)}
.mo-l{font-size:13px;font-weight:500;color:var(--slate)}
.mo-v{font-size:34px;font-weight:600;line-height:1.1;color:var(--ink);font-variant-numeric:tabular-nums}
.mo-s{font-size:14px;color:var(--slate)}
.mo-s .late{color:var(--signal);font-weight:600}
.mo-card .mb-bar,.mo-card .cp-line,.mo-card .al-bar{display:flex;margin-top:16px}
.mo-card .cp-line{display:block}
.mo-card .cp-zone{top:-4px;bottom:-4px}
.mo-key{margin-top:8px;font-size:13px;color:var(--slate)}
.mo-go{margin-top:14px;font-size:13.5px;font-weight:600;color:var(--ink)}
.mo-card:hover .mo-go{color:var(--signal)}
.mo-card.warn .mo-v{color:var(--signal)}
.al-bar.over i{background:var(--signal)}
@media (max-width:760px){.mo{grid-template-columns:minmax(0,1fr)}}

/* Home on a wide screen: the projects take the right-hand side rather than leaving it empty. */
@media (min-width:1560px){
  .hm{max-width:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,420px);column-gap:18px;align-items:start}
  .hm>*{grid-column:1;min-width:0}
  .hm>.hm-hero{grid-column:1/-1}
  .hm>.hm-projects{grid-column:2;grid-row:2/span 3;margin-top:0}
  .hm-projects .hm-proj-grid{grid-template-columns:minmax(0,1fr)!important}
}
.topbar .chip .dash-menu-list a,.topbar .chip .dash-menu-list button{font-family:var(--sans);letter-spacing:0;text-transform:none}
@media (max-width:900px){.find-btn{flex:none}.top-new{order:3;margin-left:auto}.topbar #crumb{min-width:0;overflow:hidden;white-space:nowrap}}

/* The lockup on the rail keeps the brand's spacing: a third of the mark between mark and name. */
.rail a.lockup{display:inline-flex;justify-content:flex-start;align-self:flex-start;gap:10px;padding:4px 6px;font-size:16px;font-weight:600;letter-spacing:.10em;line-height:1}
.rail a.lockup svg{width:30px;height:30px;flex:none}
.rail a.lockup:hover{background:none;color:var(--paper)}
/* The top bar's menus open over the page, never under it. */
.topbar{z-index:40}

/* A place's tabs: one tile each, on one line, never wrapping. */
.hub-nav{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:10px;margin:-4px 0 18px}
.hub-nav a{display:flex;align-items:center;gap:12px;min-width:0;padding:12px 14px;background:var(--white);color:var(--ink);font-size:15px;font-weight:600;line-height:1.2;text-decoration:none;border:0;border-radius:0 var(--r-card) 0 var(--r-card);transition:background .15s ease,box-shadow .15s ease}
.hub-nav a:hover{box-shadow:inset 0 0 0 2px var(--ink)}
.hub-nav .hub-i{width:38px;height:38px;flex:none;display:grid;place-items:center;background:var(--paper);color:var(--ink);border-radius:0 10px 0 10px}
.hub-nav .hub-i svg{width:18px;height:18px}
.hub-nav .hub-w{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hub-nav .hub-n{margin-left:auto;flex:none;font-weight:600;text-align:center;background:var(--signal);color:#fff;border-radius:0 6px 0 6px}
.hub-nav a.on{background:var(--ink);color:var(--paper);box-shadow:none}
.hub-nav a.on .hub-i{background:var(--signal);color:#fff}
.hub-nav a.on .hub-n{background:rgba(255,255,255,.18)}
.hub-sub{margin:-6px 0 18px}
@media (max-width:1100px){.hub-nav .hub-i{width:32px;height:32px}.hub-nav a{gap:10px;padding:10px 12px;font-size:14px}}
@media (max-width:900px){
  .hub-nav{display:flex;overflow-x:auto;scrollbar-width:none;margin-right:-16px;padding-right:16px}
  .hub-nav::-webkit-scrollbar{display:none}
  .hub-nav a{flex:none}
}
/* A count sits on the tile's corner, so it never takes room from the name. */
.hub-nav a{position:relative}
.hub-nav .hub-n{position:absolute;margin:0}
.hub-nav .hub-n{top:6px;right:6px;box-shadow:none;font-size:11px;line-height:17px;min-width:17px;padding:0 5px}
@media (max-width:900px){.hub-nav{padding-top:0;margin-top:-4px}}

/* ---------- Team: each of us as a card ---------- */
.pc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:16px;margin-bottom:18px}
.pc{display:flex;flex-direction:column;gap:18px;padding:22px 22px 0;background:var(--white);color:var(--ink);text-decoration:none;border:0;border-radius:0 var(--r-card) 0 var(--r-card);transition:box-shadow .15s ease;overflow:hidden}
a.pc:hover{box-shadow:inset 0 0 0 2px var(--ink)}
.pc.off{opacity:.55}
.pc .warn{color:var(--signal)}
.pc-go{font-weight:600;color:var(--ink)}
a.pc:hover .pc-go{color:var(--signal)}
/* Before you employ anyone: a ring, and the list behind it. */
.pc-employ>summary{align-items:center!important;gap:16px!important}
.pc-employ>summary::before{display:none}
.pc-em-t{display:grid;gap:2px}
.pc-em-t b{font-size:15.5px}
.pc-em-t span{font-size:13.5px;color:var(--slate)}
.pc-wait .tm-tag{font-family:var(--sans);letter-spacing:0;text-transform:none;font-size:13px;font-weight:600;padding:3px 10px}
/* ---------- Team: each of us as a staff pass ---------- */
.ps-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.pass{position:relative;display:flex;flex-direction:column;background:var(--white);color:var(--ink);text-decoration:none;border:0;border-radius:0 22px 0 22px;overflow:hidden;box-shadow:0 1px 0 rgba(18,22,27,.05);transition:transform .18s ease,box-shadow .18s ease;font:inherit;text-align:left;padding:0}
a.pass:hover{transform:translateY(-2px);box-shadow:0 14px 30px -18px rgba(18,22,27,.45)}
.pass.off{opacity:.55}
.ps-band{display:flex;justify-content:space-between;gap:10px;background:var(--ink);color:var(--paper);
  background-image:radial-gradient(circle at 100% 0,rgba(255,255,255,.07) 0 60px,transparent 61px),radial-gradient(circle at 88% 120%,rgba(255,255,255,.05) 0 44px,transparent 45px)}
.pass.me .ps-band{background-color:var(--signal)}
.ps-mark{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:600;letter-spacing:.14em}
.ps-mark svg{width:18px;height:18px}
.ps-kind{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase}
.ps-face{display:block;margin:-38px 0 0 20px;line-height:0}
.ps-face .avatar{width:84px!important;height:84px!important;font-size:28px!important;border-radius:0 20px 0 20px;box-shadow:0 0 0 5px var(--white);background:var(--ink);color:var(--paper)}
.pass.me .ps-face .avatar{background:var(--ink)}
.ps-who{display:grid;gap:3px;padding:12px 20px 0}
.ps-who b{font-size:21px;font-weight:600;line-height:1.2}
.ps-who small{font-size:13.5px;color:var(--slate)}
.ps-who small.mono{font-size:12.5px}
.ps-chips{display:flex;flex-wrap:wrap;gap:6px;padding:14px 20px 0}
.ps-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px 5px 8px;font-size:12.5px;font-weight:500;background:var(--paper);border-radius:0 8px 0 8px}
.ps-chip svg{width:14px;height:14px;flex:none}
.ps-chip.good{background:var(--status-bg);color:var(--status)}
.ps-chip.weak{background:var(--signal-bg);color:var(--signal-text)}
.ps-bars{display:grid;gap:10px;padding:16px 20px 18px}
.ps-bar{display:grid;gap:5px}
.ps-bar-l{display:flex;justify-content:space-between;font-size:12.5px;color:var(--slate)}
.ps-bar-l b{font-weight:600;color:var(--ink)}
.ps-bar-t{height:6px;background:var(--rule-soft);border-radius:0 3px 0 3px;overflow:hidden}
.ps-bar-t i{display:block;height:100%;background:var(--ink);border-radius:0 3px 0 3px;min-width:0}
.pass.me .ps-bar-t i{background:var(--signal)}
.ps-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding:12px 20px;background:var(--paper);box-shadow:inset 0 1px 0 var(--rule-soft);font-size:13.5px}
/* The next person: a blank pass. */
.ps-new{cursor:pointer;background:transparent;box-shadow:inset 0 0 0 2px var(--rule-strong)}
.ps-new .ps-band{background:var(--rule);color:var(--slate);background-image:none}
.ps-new .ps-blank{display:grid;place-items:center;width:84px;height:84px;background:var(--white);color:var(--ink);border-radius:0 20px 0 20px;box-shadow:0 0 0 5px var(--paper),inset 0 0 0 2px var(--rule-strong)}
.ps-new .ps-who{padding-bottom:22px}
.ps-new .ps-who small{max-width:30ch}
.ps-new:hover{box-shadow:inset 0 0 0 2px var(--ink)}
.ps-new:hover .ps-band{background:var(--ink);color:var(--paper)}
/* Before you employ anyone, on its own. */
.pc-employ-card{padding:18px 22px}
.pc-employ-card .pp-more>summary{display:flex}
.ps-band{height:96px;align-items:flex-start;padding:16px 20px 0}
.ps-face{margin-top:-46px}
.ps-band{position:relative;overflow:hidden;background-image:none!important}
.ps-band>.ps-mark,.ps-band>.ps-kind{position:relative;z-index:1}
.ps-art{position:absolute;inset:0;width:100%;height:100%;color:#fff;pointer-events:none}
.ps-face{position:relative;z-index:2}
/* The role sits at the band's foot, on a small plate, so the artwork has the top. */
.ps-kind{position:absolute;right:14px;bottom:10px;padding:4px 9px;background:rgba(18,22,27,.55);border-radius:0 7px 0 7px;opacity:1}
.pass.me .ps-kind{background:rgba(18,22,27,.35)}
.ps-new .ps-kind{background:rgba(255,255,255,.6)}
.ps-band>.ps-kind{position:absolute;z-index:1}

/* ---------- Team structure: a drawing on squared paper ---------- */
.sn-wrap{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:18px;align-items:start}
.sn-paper{position:relative;padding:22px 24px 26px;background-color:var(--white);background-image:radial-gradient(circle,var(--rule-strong) 1px,transparent 1.3px);background-size:22px 22px;background-position:11px 11px;border-radius:0 var(--r-card) 0 var(--r-card);min-width:0}
.sn-say{margin:0 0 18px;font-size:14px;color:var(--slate);background:var(--white);display:inline-block;padding-right:8px}
.sn-scroll{overflow-x:auto;padding-bottom:6px}
.sn-chart{flex-direction:column;align-items:center}
/* A person: a small pass. */
.sn{position:relative;display:flex;flex-direction:column;padding:0;background:var(--white);color:var(--ink);font:inherit;text-align:left;border:0;cursor:pointer;border-radius:0 16px 0 16px;overflow:hidden;box-shadow:0 1px 0 rgba(18,22,27,.06),0 0 0 1px var(--rule);transition:transform .15s ease,box-shadow .15s ease}
.sn:hover{transform:translateY(-2px);box-shadow:0 12px 24px -16px rgba(18,22,27,.5),0 0 0 1px var(--rule-strong)}
.sn.on{box-shadow:0 0 0 2px var(--ink),0 12px 24px -16px rgba(18,22,27,.5)}
.sn[draggable="true"]{cursor:grab}
.sn.dragging{opacity:.4}
.sn.drop{box-shadow:0 0 0 3px var(--signal)!important;transform:scale(1.03)}
.sn-band{position:relative;display:block;height:44px;background:var(--ink);color:#fff;overflow:hidden}
.sn.me .sn-band{background:var(--signal)}
.sn.out .sn-band{background:var(--slate)}
.sn-band .ps-art{position:absolute;inset:0;width:100%;height:100%}
.sn-face{position:relative;z-index:1;display:block;margin:-24px 0 0 14px;line-height:0}
.sn-face .avatar{width:46px!important;height:46px!important;font-size:16px!important;border-radius:0 12px 0 12px;box-shadow:0 0 0 3px var(--white);background:var(--ink);color:var(--paper)}
.sn-txt{display:grid;gap:1px;padding:8px 14px 12px}
.sn-txt b{font-size:14.5px;font-weight:600;line-height:1.25}
.sn-txt small{font-size:12.5px;color:var(--slate);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sn-txt i{font-style:normal;font-size:11.5px;font-weight:600;color:var(--signal)}
/* The owners, side by side, standing on the business. */
.sn-plinth{order:1;display:flex;align-items:center;gap:14px;margin:0 0 26px;padding:12px 22px;background:var(--ink);color:var(--paper);border-radius:0 14px 0 14px;font-size:13.5px;position:relative}
.sn-plinth::after{content:"";position:absolute;left:50%;bottom:-26px;height:26px;border-left:2px solid var(--ink)}
.sn-mark{display:inline-flex;align-items:center;gap:7px;font-size:11px;letter-spacing:.14em}
.sn-mark svg{width:18px;height:18px}
/* Lines down from each person to whoever reports to them. */
.sn-t li{list-style:none;display:flex;flex-direction:column;align-items:center;position:relative}
.sn-t{list-style:none;margin:0;padding:24px 0 0;display:flex;position:relative}
.sn-t>li{padding-top:12px}
.sn-t>li::before{content:"";position:absolute;top:0;border-top:2px solid var(--on-ink-dim)}
.sn-t>li:first-child::before{left:50%}.sn-t>li:last-child::before{right:50%}.sn-t>li:only-child::before{display:none}
.sn-t>li::after{content:"";position:absolute;top:0;height:12px;border-left:2px solid var(--on-ink-dim)}
/* The next person: a dashed space on the paper. */
.sn-ghost{order:3;display:flex;align-items:center;gap:14px;margin-top:34px;padding:12px 18px 12px 12px;background:rgba(255,255,255,.8);border:0;border-radius:0 16px 0 16px;box-shadow:inset 0 0 0 2px var(--rule-strong);font:inherit;text-align:left;cursor:pointer;position:relative;color:var(--ink)}
.sn-ghost::before{content:"";position:absolute;top:-22px;left:50%;height:20px;border-left:2px dashed var(--rule-strong)}
.sn-ghost:hover{box-shadow:inset 0 0 0 2px var(--ink)}
.sn-ghost-f{width:44px;height:44px;display:grid;place-items:center;background:var(--paper);border-radius:0 12px 0 12px}
.sn-ghost b{display:block;font-size:14.5px}.sn-ghost small{font-size:12.5px;color:var(--slate)}
/* Shelves: nobody set yet, and freelancers. */
.sn-shelf{margin-top:26px;padding:14px 16px 16px;background:rgba(241,239,234,.85);border-radius:0 14px 0 14px;box-shadow:inset 0 0 0 1px var(--rule)}
.sn-shelf.drop{box-shadow:inset 0 0 0 2px var(--signal)}
.sn-shelf.out{box-shadow:inset 0 0 0 1px var(--rule);border-top:2px dashed var(--rule-strong)}
.sn-shelf-l{display:block;margin-bottom:10px;font-size:12.5px;font-weight:600;color:var(--slate)}
.sn-row{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:14px}
.sn-drop-hint{font-size:13px;color:var(--slate);padding:8px 0}
/* The person pressed, on the right. */
.sn-side{position:sticky;top:18px;padding:18px 18px 20px;background:var(--white);border-radius:0 var(--r-card) 0 var(--r-card)}
.sf-pass .sn{width:100%;cursor:default;box-shadow:none;transform:none}
.sf-pass .sn-band{height:64px}
.sf-pass .sn-face{margin-top:-30px}
.sf-pass .sn-face .avatar{width:60px!important;height:60px!important;font-size:20px!important}
.sf-pass .sn-txt b{font-size:18px}
.sf-list{margin:6px 0 0;display:grid;gap:14px}
.sf-list dt{font-size:12.5px;color:var(--slate);margin-bottom:5px}
.sf-list dd{margin:0;display:flex;flex-wrap:wrap;gap:6px}
.sf-p{display:inline-flex;align-items:center;gap:7px;padding:3px 10px 3px 3px;background:var(--paper);border:0;font:inherit;font-size:13.5px;font-weight:500;cursor:pointer;border-radius:0 9px 0 9px;color:var(--ink)}
.sf-p:hover{background:var(--ink);color:var(--paper)}
.sf-p .avatar{border-radius:0 7px 0 7px}
.sf-chain{font-size:13.5px;color:var(--ink)}
.sf-own{font-size:14px}
.sf-set{display:grid;gap:5px;margin-top:16px;font-size:12.5px;color:var(--slate)}
@media (max-width:1100px){.sn-wrap{grid-template-columns:minmax(0,1fr)}.sn-side{position:static}}
/* The tree's lines: one weight, one colour, with rounded elbows in the brand's way, and a
   small joint where a line leaves someone. The lines meet because the spacing is padding. */
.sn-chart{--ln:var(--rule-strong)}
.sn-plinth{margin-bottom:0}
.sn-plinth::after{display:none}
.sn-plinth::before{content:"";position:absolute;left:50%;bottom:-6px;width:10px;height:10px;margin-left:-5px;background:var(--ink);border-radius:50%}
.sn-t{gap:0;padding-top:22px}
.sn-t::before{content:"";position:absolute;top:0;left:50%;height:22px;border-left:2px solid var(--ln)}
.sn-t::after{content:"";position:absolute;top:-5px;left:50%;width:10px;height:10px;margin-left:-4px;background:var(--ln);border-radius:50%;box-shadow:0 0 0 3px var(--white)}
.sn-t>li{padding:24px 10px 0}
.sn-t>li::before,.sn-t>li::after{content:"";position:absolute;top:0;width:50%;height:24px;border:0 solid var(--ln);border-top-width:2px}
.sn-t>li::before{right:50%;left:auto}
.sn-t>li::after{left:50%;right:auto;border-left-width:2px}
.sn-t>li:first-child::before{border-top-width:0}
.sn-t>li:first-child::after{border-top-left-radius:14px}
.sn-t>li:last-child::after{border-top-width:0;border-left-width:0}
.sn-t>li:last-child::before{border-right-width:2px;border-top-right-radius:14px}
.sn-t>li:only-child::before{border:0}
.sn-t>li:only-child::after{border-top-width:0;border-radius:0}
.sn-t>li:only-child{padding-top:0}
.sn-t>li:only-child::after{height:0}
/* Cards a touch wider, and a person with a team says how many under them. */
.sn{width:208px}
.sn-n{position:absolute;top:8px;right:8px;z-index:2;padding:1px 7px;font-size:11px;font-weight:600;background:rgba(255,255,255,.9);color:var(--ink);border-radius:0 6px 0 6px}
/* The empty shelf only appears while someone is being dragged. */
.sn-shelf.empty{display:none}
body.sn-dragging .sn-shelf.empty{display:block}
/* The chart's tools: card size and zoom. */
.sn-bar{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:10px 18px;margin-bottom:18px}
.sn-bar .sn-say{margin:0;max-width:52ch}
.sn-tools{display:inline-flex;flex-wrap:wrap;gap:8px;align-items:center}
.sn-zoom{display:inline-flex;gap:2px;padding:3px;background:var(--paper);border-radius:99px}
.sn-zoom button{min-width:32px;padding:5px 10px;border:0;border-radius:99px;background:none;font:inherit;font-size:13px;font-weight:600;color:var(--ink);cursor:pointer}
.sn-zoom button:hover{background:var(--white)}
.sn-scroll{overflow:auto}
/* Folding a branch. */
.sn-fold{position:relative;z-index:2;margin-top:-9px;min-width:22px;height:18px;padding:0 6px;border:0;border-radius:0 6px 0 6px;background:var(--white);box-shadow:0 0 0 2px var(--ln);font:inherit;font-size:11.5px;font-weight:700;line-height:18px;color:var(--ink);cursor:pointer}
.sn-fold:hover{box-shadow:0 0 0 2px var(--ink)}
.sn-fold[aria-expanded="false"]{background:var(--ink);color:var(--paper);box-shadow:none}
.sn-fold+.sn-t{padding-top:14px}
.sn-fold+.sn-t::after{display:none}
/* Small cards: no drawing, a thinner band. */
.sn-chart[data-size="small"] .sn{width:164px}
.sn-chart[data-size="small"] .sn-band{height:18px}
.sn-chart[data-size="small"] .sn-band .ps-art,.sn-chart[data-size="small"] .sn-n{display:none}
.sn-chart[data-size="small"] .sn-face{margin:-10px 0 0 10px}
.sn-chart[data-size="small"] .sn-face .avatar{width:34px!important;height:34px!important;font-size:12px!important;border-radius:0 9px 0 9px}
.sn-chart[data-size="small"] .sn-txt{padding:6px 10px 9px}
.sn-chart[data-size="small"] .sn-txt b{font-size:13px}
.sn-chart[data-size="small"] .sn-txt small{font-size:11.5px}
.sn-chart[data-size="small"] .sn-t>li{padding-left:6px;padding-right:6px}
/* Names: a face and a name on one line. */
.sn-chart[data-size="names"] .sn{width:auto;min-width:0;flex-direction:row;align-items:center;border-radius:0 12px 0 12px;box-shadow:inset 3px 0 0 var(--ink),0 0 0 1px var(--rule)}
.sn-chart[data-size="names"] .sn.me{box-shadow:inset 3px 0 0 var(--signal),0 0 0 1px var(--rule)}
.sn-chart[data-size="names"] .sn.on{box-shadow:inset 3px 0 0 var(--ink),0 0 0 2px var(--ink)}
.sn-chart[data-size="names"] .sn-band,.sn-chart[data-size="names"] .sn-n,.sn-chart[data-size="names"] .sn-txt small,.sn-chart[data-size="names"] .sn-txt i{display:none}
.sn-chart[data-size="names"] .sn-face{margin:0}
.sn-chart[data-size="names"] .sn-face .avatar{font-size:10px!important;box-shadow:none;border-radius:0 7px 0 7px}
.sn-chart[data-size="names"] .sn-txt{padding:0}
.sn-chart[data-size="names"] .sn-txt b{white-space:nowrap}
.sn-chart[data-size="names"] .sn-t>li{padding-left:4px;padding-right:4px}
/* From the third level down, a branch runs down the page as a list, so a big team grows
   longer, never wider than its first two levels. */
.sn-t .sn-t{flex-direction:column;align-items:flex-start;gap:0;padding:6px 0 0 26px;margin-left:34px;align-self:flex-start}
.sn-t .sn-t::before{left:-26px;top:-10px;height:auto;bottom:0;border-left:0}
.sn-t .sn-t::after{display:none}
.sn-t .sn-t>li{padding:8px 0 0;align-items:flex-start}
.sn-t .sn-t>li::before{content:"";position:absolute;left:-26px;right:auto;top:-8px;bottom:0;width:0;height:auto;border:0;border-left:2px solid var(--ln);border-radius:0}
.sn-t .sn-t>li:last-child::before{bottom:auto;height:38px;width:18px;border-bottom:2px solid var(--ln);border-bottom-left-radius:12px;border-top:0;border-right:0}
.sn-t .sn-t>li::after{content:"";position:absolute;left:-26px;right:auto;top:30px;width:26px;height:0;border:0;border-top:2px solid var(--ln);border-radius:0}
.sn-t .sn-t>li:last-child::after{display:none}
.sn-t .sn-t>li:only-child{padding-top:8px}
.sn-t .sn-t>li:only-child::before{border-left:2px solid var(--ln);border-bottom:2px solid var(--ln)}
.sn-t .sn-t>li>.sn-fold{margin-left:14px}
.sn-fold+.sn-t .sn-t{padding-top:6px}
.sn-chart[data-size="names"] .sn-t .sn-t>li:last-child::before{height:22px}
.sn-chart[data-size="names"] .sn-t .sn-t>li::after{top:18px}
.sn-chart[data-size="names"] .sn-t .sn-t{margin-left:18px}
.sn-chart[data-size="small"] .sn-t .sn-t>li:last-child::before{height:32px}
.sn-chart[data-size="small"] .sn-t .sn-t>li::after{top:24px}
/* The chart is laid out by snLayout: every card placed exactly, the lines one drawing. */
.sn-chart{display:block;padding:4px 8px 8px;min-width:max-content}
.sn-canvas{position:relative;margin:0 auto}
.sn-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.sn-lines path{fill:none;stroke-width:2;stroke-linecap:round}
.sn-lines .ink{stroke:var(--ink)}
.sn-lines .soft{stroke:var(--rule-strong)}
.sn-lines .dots circle{fill:var(--rule-strong);stroke:var(--white);stroke-width:3}
.sn-cell{position:absolute;left:0;top:0}
.sn-root .sn-plinth{margin:0;white-space:nowrap}
.sn-cell>.sn-fold{position:absolute;left:50%;top:100%;margin:-9px 0 0;transform:translateX(-50%)}
.sn-ghost-cell .sn-ghost{margin:0}
.sn-ghost-cell .sn-ghost::before{display:none}
.sn-chart[data-size="names"] .sn{max-width:190px}
.sn-cell.v>.sn-fold{left:22px}
/* More room as the team grows. */
.sn-chart[data-size="names"] .sn{padding:7px 14px 7px 7px;gap:10px}
.sn-chart[data-size="names"] .sn-face .avatar{width:28px!important;height:28px!important}
.sn-chart[data-size="names"] .sn-txt b{font-size:13.5px}
.sn-chart[data-size="names"] .sn-cell.v>.sn-fold{left:16px}
.sn-scroll{max-height:none}

/* ---------- Training: lessons as cards, your own as a route ---------- */
.tr-hero{background:var(--white);padding:22px 24px 24px;margin:0 0 30px;border-radius:0 var(--r-card) 0 var(--r-card)}
.tr-hero-top{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px 28px;align-items:center}
.tr-hero-ring{display:flex;align-items:center;gap:14px}
.tr-hero-ring b{display:block;font-size:22px;font-weight:600;line-height:1.1}
.tr-hero-ring small{font-size:13px;color:var(--slate)}
.tr-hero-say{margin:0;font-size:14px;color:var(--slate);max-width:60ch}
/* The route: a stop for each of your lessons. */
.tr-route{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));position:relative}
.tr-route li{position:relative;display:flex;justify-content:center}
.tr-route li::before{content:"";position:absolute;top:17px;left:-50%;right:50%;height:3px;background:var(--rule);border-radius:2px}
.tr-route li:first-child::before{display:none}
.tr-route li.done::before,.tr-route li.next::before{background:var(--status)}
.tr-route a{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:8px;max-width:150px;text-align:center;color:var(--slate);text-decoration:none;border:0;font-size:12.5px;line-height:1.3}
.tr-stop{width:36px;height:36px;display:grid;place-items:center;background:var(--white);box-shadow:inset 0 0 0 2px var(--rule-strong);border-radius:0 11px 0 11px;font-family:var(--mono);font-size:12.5px;font-weight:600;color:var(--slate);transition:transform .15s ease}
.tr-stop svg{width:18px;height:18px}
.tr-route a:hover .tr-stop{transform:translateY(-2px);box-shadow:inset 0 0 0 2px var(--ink)}
.tr-route .done .tr-stop{background:var(--status);color:#fff;box-shadow:none}
.tr-route .next .tr-stop{background:var(--signal);color:#fff;box-shadow:0 0 0 5px rgba(194,65,12,.15)}
.tr-route .again .tr-stop{box-shadow:inset 0 0 0 2px var(--signal);color:var(--signal)}
.tr-route .next a,.tr-route .done a{color:var(--ink);font-weight:600}
/* Groups, with how many of yours are done. */
.tr-gh{display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:2px 14px;margin-bottom:14px}
.tr-gh .note{grid-column:1/-1;margin:2px 0 0}
.tr-gc{font-size:13px;font-weight:600;color:var(--slate)}
/* A lesson: a card with its drawing across the top. */
.tr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.tr-lc{display:flex;flex-direction:column;background:var(--white);color:var(--ink);text-decoration:none;border:0;border-radius:0 20px 0 20px;overflow:hidden;box-shadow:0 1px 0 rgba(18,22,27,.05);transition:transform .18s ease,box-shadow .18s ease}
.tr-lc:hover{transform:translateY(-2px);box-shadow:0 14px 30px -18px rgba(18,22,27,.45);color:var(--ink)}
.tr-lc-band{position:relative;display:block;height:84px;background:var(--ink);color:#fff;overflow:hidden}
.tr-lc.done .tr-lc-band{background:var(--status)}
.tr-lc.next .tr-lc-band{background:var(--signal)}
.tr-lc.other .tr-lc-band{background:var(--slate)}
.tr-lc-band .ps-art{position:absolute;inset:0;width:100%;height:100%}
.tr-lc-n{position:absolute;left:16px;top:14px;font-family:var(--mono);font-size:22px;font-weight:600;letter-spacing:.02em}
.tr-lc-ok{position:absolute;left:16px;bottom:12px;width:26px;height:26px;display:grid;place-items:center;background:#fff;color:var(--status);border-radius:0 8px 0 8px}
.tr-lc-ok svg{width:16px;height:16px}
.tr-lc-b{display:grid;gap:6px;padding:16px 18px 0}
.tr-lc-b b{font-size:17px;font-weight:600;line-height:1.3}
.tr-lc-b .tr-sum{font-size:13.5px;line-height:1.5;color:var(--slate)}
.tr-lc-f{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding:16px 18px 16px}
.tr-lc-st{font-size:12.5px;font-weight:600;padding:3px 9px;background:var(--paper);border-radius:0 7px 0 7px}
.tr-lc.done .tr-lc-st{background:var(--status-bg);color:var(--status)}
.tr-lc.next .tr-lc-st{background:var(--signal-bg);color:var(--signal-text)}
.tr-lc.again .tr-lc-st{background:var(--signal-bg);color:var(--signal-text)}
.tr-lc-m{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:var(--slate)}
.tr-lc-m svg{width:13px;height:13px}
.tr-lc.hidden{opacity:.6}
@media (max-width:900px){.tr-hero-top{grid-template-columns:1fr}.tr-route{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:110px;overflow-x:auto;padding-bottom:6px}}
/* A lesson carries its drawing on its own page and on its card to keep. */
.tr-toc{overflow:hidden}
.tr-toc-band{margin:-16px -16px 14px;height:72px}
.tr-toc-band.done{background:var(--status)}
.tr-keep{overflow:hidden}
.tr-keep-band{margin:-20px -22px 16px;height:56px}
@media print{.tr-keep-band,.tr-toc-band{display:none}}
.tr-toc-band .tr-lc-ok{left:auto;right:12px;top:auto;bottom:12px}

/* ---------- A lesson, in the same drawing as the training page ---------- */
.tr-main{border-radius:0 var(--r-card) 0 var(--r-card)}
.tr-top{display:flex;align-items:center;gap:18px;margin:0 0 22px;flex-wrap:wrap}
.tr-sroute{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));flex:1;min-width:240px;max-width:520px}
.tr-sroute li{position:relative;display:flex;justify-content:center}
.tr-sroute li::before{content:"";position:absolute;top:15px;left:-50%;right:50%;height:3px;background:var(--rule);border-radius:2px}
.tr-sroute li:first-child::before{display:none}
.tr-sroute li.done::before,.tr-sroute li.next::before{background:var(--status)}
.tr-sroute a{position:relative;z-index:1;border:0;text-decoration:none}
.tr-sroute .tr-stop{width:32px;height:32px;font-size:12px}
.tr-sroute .tr-stop svg{width:16px;height:16px}
.tr-sroute .done .tr-stop{background:var(--status);color:#fff;box-shadow:none}
.tr-sroute .next .tr-stop{background:var(--signal);color:#fff;box-shadow:0 0 0 5px rgba(194,65,12,.15)}
.tr-sroute a:hover .tr-stop{transform:translateY(-2px)}
.tr-left-t{font-size:13px;font-weight:500;color:var(--slate);white-space:nowrap}
/* The contents down the side: the same stops, small. */
.tr-toc a{align-items:center}
.tr-toc a i{width:24px;height:24px;min-width:24px;display:grid;place-items:center;background:var(--white);box-shadow:inset 0 0 0 2px var(--rule-strong);border-radius:0 7px 0 7px;font-size:11px;font-weight:600;color:var(--slate)}
.tr-toc a i svg{width:13px;height:13px}
.tr-toc a.ok i{background:var(--status);color:#fff;box-shadow:none}
.tr-toc a.on i{background:var(--signal);color:#fff;box-shadow:none}
.tr-toc a.on{background:var(--paper)}
/* A question: a card of its own, the answers as lettered tiles. */
.tr-q{margin-top:26px;padding:20px 22px 22px;background:var(--paper);border-radius:0 var(--r-card) 0 var(--r-card)}
.tr-q-h{display:flex;align-items:center;gap:10px;margin:0 0 10px;font-size:13px;font-weight:600;color:var(--slate)}
.tr-q-i{width:28px;height:28px;display:grid;place-items:center;background:var(--ink);color:var(--paper);font-weight:700;font-size:15px;border-radius:0 8px 0 8px}
.tr-q legend{font-size:18px;margin-bottom:14px}
.tr-opt{position:relative;align-items:center;gap:14px;padding:12px 14px;margin:0 0 8px;border-radius:0 12px 0 12px;box-shadow:inset 0 0 0 1px var(--rule);transition:box-shadow .12s ease,transform .12s ease}
.tr-opt:hover{box-shadow:inset 0 0 0 2px var(--ink)}
.tr-opt input{position:absolute;opacity:0;pointer-events:none}
.tr-opt-l{width:30px;height:30px;flex:none;display:grid;place-items:center;background:var(--paper);font-family:var(--mono);font-size:13px;border-radius:0 9px 0 9px}
.tr-opt:has(input:checked){box-shadow:inset 0 0 0 2px var(--ink)}
.tr-opt:has(input:checked) .tr-opt-l{background:var(--ink);color:var(--paper)}
.tr-opt.right{box-shadow:inset 0 0 0 2px var(--status);background:var(--status-bg)}
.tr-opt.right .tr-opt-l{background:var(--status);color:#fff}
.tr-opt.wrong{box-shadow:inset 0 0 0 2px var(--signal);background:var(--signal-bg)}
.tr-opt.wrong .tr-opt-l{background:var(--signal);color:#fff}
.tr-why{padding:10px 14px;background:var(--white);border-radius:0 10px 0 10px}
.tr-why[hidden]{display:none}
/* The end: passed, and the card to keep. */
.tr-pass{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--status-bg);color:var(--status);border-radius:0 14px 0 14px}
.tr-pass-i{width:34px;height:34px;display:grid;place-items:center;background:var(--status);color:#fff;border-radius:0 10px 0 10px}
.tr-pass-i svg{width:18px;height:18px}
.tr-card-keep{position:relative;overflow:hidden;padding:0 22px 20px;background:var(--white);box-shadow:0 0 0 1px var(--rule),0 14px 30px -22px rgba(18,22,27,.45);border-radius:0 20px 0 20px}
.tr-ck-band{display:block;margin:0 -22px 16px;height:70px}
.tr-ck-mark{position:absolute;right:16px;bottom:12px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;padding:4px 9px;background:rgba(18,22,27,.55);border-radius:0 7px 0 7px}
.tr-card-keep .tr-kh h2{font-size:20px}
.tr-task{border-radius:0 14px 0 14px;box-shadow:inset 3px 0 0 var(--signal)}
@media print{.tr-ck-band{display:none}.tr-card-keep{box-shadow:none;padding:0}}
.tr-opt.right,.tr-opt.right:has(input:checked){box-shadow:inset 0 0 0 2px var(--status);background:var(--status-bg)}
.tr-opt.right .tr-opt-l,.tr-opt.right:has(input:checked) .tr-opt-l{background:var(--status);color:#fff}
.tr-opt.wrong,.tr-opt.wrong:has(input:checked){box-shadow:inset 0 0 0 2px var(--signal);background:var(--signal-bg)}
.tr-opt.wrong .tr-opt-l,.tr-opt.wrong:has(input:checked) .tr-opt-l{background:var(--signal);color:#fff}
.tr-ck-band.done{background:var(--status)}

/* ---------- Handbook: a cover, what is inside, and each part with its drawing ---------- */
.hb-hero{position:relative;overflow:hidden;padding-top:0;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
.hb-hero.nopic{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.hb-cover{grid-column:1/-1;position:relative;display:block;height:96px;margin:0 -30px 4px;background:var(--ink);color:#fff;overflow:hidden}
.hb-cover .ps-art{position:absolute;inset:0;width:100%;height:100%}
.hb-cover-t{position:absolute;left:30px;top:18px;font-size:11px;font-weight:600;letter-spacing:.16em}
.hb-cover-v{position:absolute;left:30px;bottom:16px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;padding:4px 9px;background:var(--signal);border-radius:0 7px 0 7px}
.hb-stats dt{font-size:30px}
.hb-readok{display:inline-flex;align-items:center;gap:10px;padding:8px 14px 8px 8px;background:var(--status-bg);color:var(--status);font-weight:600;font-size:14px;border-radius:0 12px 0 12px}
.hb-readok .tr-pass-i{width:28px;height:28px}
.hb-inside-h{margin:4px 0 10px;font-size:13px;font-weight:600;color:var(--slate)}
.hb-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.hb-tile{position:relative;display:flex;align-items:center;gap:10px;padding:8px 10px 8px 8px;background:var(--paper);color:var(--ink);text-decoration:none;border:0;font-size:13px;font-weight:500;line-height:1.25;border-radius:0 10px 0 10px;transition:background .15s ease,transform .15s ease}
.hb-tile:hover{background:var(--ink);color:var(--paper);transform:translateY(-1px)}
.hb-tile .hb-ic{background:var(--white)}
.hb-tile:hover .hb-ic{background:var(--signal)}
.hb-tile:hover .hb-ic svg{stroke:#fff}
.hb-tile-t{min-width:0}
.hb-tile i{position:absolute;top:6px;right:6px;width:8px;height:8px;border-radius:50%;background:var(--signal)}
/* A part: its drawing across the top, the number on it. */
.hb-sec{position:relative;overflow:hidden;padding-top:0}
.hb-band{position:relative}
.hb-band .ps-art{position:absolute;inset:0;width:100%;height:100%}
.hb-num{left:28px;top:50%;font-family:var(--mono)}
.hb-fresh{position:absolute;right:16px;bottom:10px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;padding:4px 9px;background:rgba(18,22,27,.4);border-radius:0 7px 0 7px}
.hb-sh .hb-ic{margin-top:-2px}
@media (max-width:900px){.hb-hero,.hb-hero.nopic{grid-template-columns:1fr}.hb-cover{margin:0 -30px 4px}}
@media print{.hb-band,.hb-cover,.hb-inside{display:none}}

/* ---------- Onboarding: templates as cards, steps as a route through the stages ---------- */
.ob-hero{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 28px;padding:20px 24px;margin:0 0 20px;background:var(--white);border-radius:0 var(--r-card) 0 var(--r-card)}
.ob-hero h2{margin:0 0 4px;font-size:19px;font-weight:600;text-transform:none;letter-spacing:0;font-family:var(--sans)}
.ob-hero p{margin:0;font-size:14px;color:var(--slate);max-width:62ch}
.ob-key{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12.5px;color:var(--slate)}
.ob-key li{display:inline-flex;align-items:center;gap:6px}
.ob-i{width:24px;height:24px;flex:none;display:grid;place-items:center;background:var(--paper);color:var(--ink);border-radius:0 7px 0 7px}
.ob-i svg{width:13px;height:13px}
.mgr>.ob-i{background:var(--ink);color:var(--paper)}
.ob-grid{display:grid;gap:18px}
.ob-card{background:var(--white);border-radius:0 22px 0 22px;overflow:hidden;box-shadow:0 1px 0 rgba(18,22,27,.05)}
.ob-band{position:relative;display:block;height:64px;background:var(--ink);color:#fff;overflow:hidden}
.ob-band .ps-art{position:absolute;inset:0;width:100%;height:100%}
.ob-kind{position:absolute;left:22px;top:50%;transform:translateY(-50%);font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:4px 9px;background:var(--signal);border-radius:0 7px 0 7px}
.ob-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:16px 22px 4px}
.ob-head h3{margin:0;font-size:19px}
.ob-sub{margin:3px 0 0;font-size:13px;color:var(--slate)}
/* The stages side by side, joined, each with its steps under it. */
.ob-route{list-style:none;margin:0;padding:18px 22px 22px;display:grid;grid-template-columns:repeat(var(--n),minmax(170px,1fr));gap:0 16px;overflow-x:auto}
.ob-route>li{position:relative;display:flex;flex-direction:column;gap:8px}
.ob-route>li::before{content:"";position:absolute;top:15px;left:34px;right:-16px;height:3px;background:var(--rule);border-radius:2px}
.ob-route>li:last-child::before{display:none}
.ob-stop{position:relative;z-index:1;width:32px;height:32px;display:grid;place-items:center;background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:12.5px;font-weight:600;border-radius:0 10px 0 10px}
.ob-stage{font-size:14px}
.ob-steps{list-style:none;margin:2px 0 0;padding:0;display:grid;gap:6px}
.ob-steps li{display:flex;align-items:flex-start;gap:8px;padding:7px 9px 7px 7px;background:var(--paper);font-size:13px;line-height:1.35;border-radius:0 9px 0 9px}
.ob-steps li .ob-i{background:var(--white)}
.ob-steps li.mgr{background:var(--rule-soft)}
.ob-steps li.mgr .ob-i{background:var(--ink);color:var(--paper)}
/* Someone's own onboarding: a ring, then each stage with its steps, ticked as they go. */
.ob-me-head{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.ob-me-head h3{margin:0}
.ob-mroute{list-style:none;margin:0;padding:0 0 0 0;position:relative}
.ob-mroute>li{position:relative;padding:0 0 10px 46px}
.ob-mroute>li::before{content:"";position:absolute;left:15px;top:32px;bottom:-2px;width:3px;background:var(--rule);border-radius:2px}
.ob-mroute>li:last-child::before{display:none}
.ob-mroute>li.done::before{background:var(--status)}
.ob-mhead{display:flex;align-items:center;gap:12px;margin-left:-46px;min-height:32px}
.ob-mhead b{font-size:15px}
.ob-mcount{margin-left:auto;font-size:12.5px;font-weight:600;color:var(--slate)}
.ob-mroute .tr-stop{width:32px;height:32px;font-size:12px}
.ob-mroute .done .tr-stop{background:var(--status);color:#fff;box-shadow:none}
.ob-mroute .next .tr-stop{background:var(--signal);color:#fff;box-shadow:0 0 0 5px rgba(194,65,12,.15)}
.ob-mroute .tr-stop svg{width:16px;height:16px}
.ob-mroute .tm-steps{margin:4px 0 6px}
.ob-mroute .tm-steps li{padding:9px 12px;margin:0 0 6px;background:var(--paper);border-radius:0 10px 0 10px}
.ob-mroute .tm-steps li.done{background:var(--status-bg)}
.tm-box.on,.tm-box:checked{background:var(--status)}

/* ---------- A person's page: face and name as the head, tiles for their pages ---------- */
.pp-lessons{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.pp-lessons .tr-lc-band{height:64px}

/* ---------- The board, calmer: a line of numbered stops, empty columns kept narrow,
   the board summed up above it and the two trays side by side below. ---------- */
.bd-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;margin:0 0 16px}
.bd-stats{display:flex;flex-wrap:wrap;gap:8px}
.bd-stat{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;background:var(--white);font-size:13px;color:var(--slate);border-radius:0 12px 0 12px}
.bd-stat b{font-size:15px;color:var(--ink);font-variant-numeric:tabular-nums;display:inline-flex}
.bd-stat.warn{background:var(--signal-bg);color:var(--signal-text)}.bd-stat.warn b{color:var(--signal-text)}
.bd-stat.good b{color:var(--status)}
.bd-hint{margin:0;font-size:12.5px;color:var(--slate)}
#view .board{display:flex;gap:14px;overflow-x:auto;padding:0 0 10px;align-items:stretch;scrollbar-width:thin;scrollbar-color:var(--rule-strong) transparent}
#view .board::-webkit-scrollbar{height:8px}
#view .board::-webkit-scrollbar-thumb{background:var(--rule-strong);border-radius:8px}
#view .board::-webkit-scrollbar-track{background:transparent}
#view .board .col{position:relative;flex:1 1 220px;min-width:204px;min-height:340px;padding:12px 10px 10px;background:var(--rule);display:flex;flex-direction:column}
#view .board .col.is-empty{flex:0 0 124px;min-width:124px;background:transparent}
#view .board .col:not(:last-child)::after{content:"";position:absolute;top:25px;right:-14px;width:14px;height:2px;background:var(--rule-strong)}
.col-h{display:flex!important;align-items:center;gap:8px;margin:0 2px 10px!important;font-size:13px!important;color:var(--ink)!important}
.col-n{flex:none;display:grid;place-items:center;width:24px;height:24px;font-style:normal;font-family:var(--mono);font-size:11px;background:var(--ink);color:var(--paper);border-radius:0 8px 0 8px}
.col.is-empty .col-n{background:var(--paper);color:var(--slate);box-shadow:inset 0 0 0 1.5px var(--rule-strong)}
.col-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.col-c{margin-left:auto;min-width:22px;padding:1px 7px;text-align:center;font-size:12px;font-variant-numeric:tabular-nums;background:var(--white);border-radius:0 6px 0 6px}
.col.is-empty .col-c{display:none}
.col.is-empty .col-name{color:var(--slate)}
#view .col-sum{margin:-4px 2px 10px;font-size:12.5px}
#view .col-sum .mono{font-family:inherit;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.col-drop{display:none;flex:1;margin:0;place-items:center;text-align:center;font-size:12px;color:var(--slate);border:1.5px dashed var(--rule-strong);border-radius:0 12px 0 12px;min-height:120px}
.col.is-empty .col-drop{display:grid}
.col.drop .col-drop{border-color:var(--signal);color:var(--signal-text);background:var(--signal-bg)}
#view .board .col.drop{outline:2px dashed var(--signal);outline-offset:-2px}
#view .board .lead{margin-bottom:10px;border-radius:0 12px 0 12px}
#view .board .lead:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.lead-top{align-items:flex-start!important}
.lead-behind{display:inline-flex;align-items:center;gap:6px}
.lead-behind i{width:7px;height:7px;border-radius:50%;background:var(--signal)}
.lead-foot{padding-top:10px;border-top:1px solid var(--rule-soft)}
/* The trays: finished and lost, side by side, small until something is in them. */
.trays{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px;margin-top:16px;align-items:start}
#view .board .lead-client{display:block;white-space:normal;overflow:visible}
#view .lostbin.tray{margin:0;padding:14px 16px;background:var(--white);box-shadow:none;border-radius:0 var(--r-card) 0 var(--r-card)}
.tray.is-empty{background:transparent!important;box-shadow:inset 0 0 0 1px var(--rule-strong)!important}
.tray-h{display:flex;align-items:center;gap:12px}
.tray-i{flex:none;display:grid;place-items:center;width:36px;height:36px;background:var(--paper);border-radius:0 10px 0 10px}
.tray:not(.is-empty) .tray-i{background:var(--ink);color:var(--paper)}
.tray-t{display:grid;min-width:0}.tray-t b{font-size:14px}.tray-t .small{color:var(--slate)}
.tray-c{margin-left:auto;font-family:var(--mono);font-size:13px;color:var(--slate)}
.tray-drop{display:none;margin:0}
.tray.drop .tray-drop{display:block;margin-top:12px;padding:14px;text-align:center;font-size:12px;color:var(--signal);border:1.5px dashed var(--signal);border-radius:0 12px 0 12px}
.tray-list{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:6px}
.tray-list li{display:flex;align-items:center;gap:10px;padding:8px 10px;background:var(--paper);border-radius:0 10px 0 10px;cursor:grab}
.tray-list li:active{cursor:grabbing}
.tray-id{display:grid;min-width:0;flex:1}.tray-id b{font-size:13.5px}.tray-id .small{color:var(--slate);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tray-do{display:flex;gap:6px;flex:none}
.tray.orphans{box-shadow:inset 3px 0 0 var(--signal)!important}
@media (max-width:700px){.bd-hint{display:none}.tray-do .btn:first-child{display:none}.bd-stat{padding:6px 10px;font-size:12px}.bd-stat b{font-size:14px}#view .board{scroll-snap-type:x mandatory;margin:0 -16px;padding:0 16px 10px;scroll-padding:0 16px}#view .board{align-items:flex-start}#view .board .col{flex:0 0 82vw;min-height:0;scroll-snap-align:start}.tray-list li{flex-wrap:wrap}.tray-do{width:100%;justify-content:flex-end}#view .board .col.is-empty{flex-basis:124px}.col-drop{min-height:80px}}

/* ---------- Contacts: what to look at first, then the people as cards ---------- */
.ct-look{margin:0 0 18px;padding:16px 18px;background:var(--white);border-radius:0 var(--r-card) 0 var(--r-card);box-shadow:inset 3px 0 0 var(--signal)}
.ct-look-h{display:flex;align-items:center;gap:12px}
.ct-look-h>div{display:grid}.ct-look-h b{font-size:15px}.ct-look-h .small{color:var(--slate)}
.ct-look-i{flex:none;display:grid;place-items:center;width:36px;height:36px;background:var(--signal);color:var(--paper);border-radius:0 10px 0 10px}
.ct-card .ct-id .small{color:var(--slate);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ct-src{font-size:12px;color:var(--slate);white-space:nowrap}
.ct-do{display:flex;gap:6px}
.ct-count{margin:0 0 10px;font-size:13px;font-weight:600;color:var(--slate)}
.ct-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.ct-card{display:flex;flex-direction:column;gap:12px;padding:16px;background:var(--white);color:inherit;text-decoration:none;border-radius:0 var(--r-card) 0 var(--r-card);transition:transform .15s,box-shadow .15s}
.ct-card:hover{transform:translateY(-2px);box-shadow:0 12px 22px -16px rgba(18,22,27,.4)}
.ct-card:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.ct-top{display:flex;align-items:center;gap:12px;min-width:0}
.ct-id{display:grid;min-width:0}.ct-id b{font-size:15px}
.ct-proj{display:flex;flex-wrap:wrap;gap:6px}
.ct-proj span{padding:4px 9px;font-size:12px;background:var(--paper);border-radius:0 8px 0 8px}
.ct-foot{margin-top:auto;padding-top:10px;border-top:1px solid var(--rule-soft);font-size:12px;color:var(--slate)}
@media (max-width:700px){.ct-src{grid-column:2}.ct-do{grid-column:1/-1;justify-content:flex-end}}
.ct-card{border-bottom:0}

/* ---------- Calendar: tiles for the calendars, one bar for the month, a calmer grid ---------- */
.cal-tiles .cal-face{overflow:hidden}
.cal-tiles .cal-face .avatar{width:100%!important;height:100%!important;display:grid;place-items:center;background:transparent;color:inherit;font-weight:600;border-radius:0}
.cal-more{position:relative;min-width:0}
.cal-more>summary{list-style:none;display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--white);font-size:15px;font-weight:600;cursor:pointer;border-radius:0 var(--r-card) 0 var(--r-card)}
.cal-more>summary::-webkit-details-marker{display:none}
.cal-more.on>summary{background:var(--ink);color:var(--paper)}
.cal-more .hub-i{width:38px;height:38px;flex:none;display:grid;place-items:center;background:var(--paper);color:var(--ink);border-radius:0 10px 0 10px}
.cal-more .dash-menu-list{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:20}
.cal-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin:0 0 14px}
.cal-nav{display:flex;align-items:center;gap:8px}
.cal-month{margin:0 6px;min-width:190px;text-align:center;font-size:22px;font-weight:600;letter-spacing:-.01em}
.cal-arrow{display:grid;place-items:center;width:40px;height:40px;background:var(--white);color:var(--ink);border:0!important;border-radius:0 12px 0 12px;transition:background .15s,color .15s}
.cal-arrow:hover{background:var(--ink);color:var(--paper)}
.cal-arrow:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.cal-wrap{padding:14px;background:var(--white);border-radius:0 var(--r-card) 0 var(--r-card)}
.cal-dow{margin-bottom:8px}
.cal-dow div{font-family:inherit!important;font-size:12.5px!important;font-weight:600;letter-spacing:0!important;text-transform:none!important;color:var(--ink)!important;padding:0 10px!important}
.cal-dow div.wkend{color:var(--slate)!important}
.cal-grid{gap:6px}
.cal-grid .sp-day{min-height:112px;padding:8px;gap:4px;background:var(--paper);box-shadow:none;border-radius:0 12px 0 12px}
.cal-grid .sp-day.wkend{background:var(--rule)}
.cal-grid .sp-day.past{background:var(--paper)}
.cal-grid .sp-day.past.wkend{background:var(--rule)}
.cal-grid .sp-day.past .cal-n{color:var(--slate)}
.cal-grid .sp-day.other{background:var(--paper-soft)}
.cal-grid .sp-day.other .sp-n{opacity:.4}
.cal-grid .sp-day:hover{box-shadow:inset 0 0 0 1.5px var(--rule-strong)}
.cal-grid .sp-n{font-family:inherit;min-height:26px}
.cal-n{display:grid;place-items:center;min-width:26px;height:26px;padding:0 4px;font-size:13px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.cal-grid .sp-day.today{box-shadow:inset 0 0 0 2px var(--signal);background:var(--white)}
.cal-grid .sp-day.today .cal-n{background:var(--signal);color:#fff;border-radius:0 8px 0 8px}
.cal-grid .sp-add{width:26px;height:26px;font-size:17px;border-radius:0 8px 0 8px}
.cal-grid .sp-add:hover{background:var(--ink);color:var(--paper)}
.cal-grid .cal-chip{flex-direction:column;align-items:flex-start;gap:1px;font-size:12px;padding:5px 8px;border-radius:0 7px 0 7px}
.cal-grid .cal-chip b{order:-1;width:100%;flex:none}
.cal-grid .cal-chip .t{font-family:inherit;font-size:11px;font-variant-numeric:tabular-nums}
.cal-grid .cal-chip .tagw{display:none}
.cal-grid .cal-chip.bank{padding:2px 2px;font-family:inherit;font-size:11px;letter-spacing:0;text-transform:none;color:var(--signal);font-weight:600}
.cal-grid .cal-chip.mine,.cal-k .cal-chip.mine{background:var(--white);box-shadow:inset 3px 0 0 var(--ink),inset 0 0 0 1px var(--rule-strong)}
.cal-grid .cal-chip.mine:hover{background:var(--white);box-shadow:inset 3px 0 0 var(--ink),inset 0 0 0 1px var(--ink)}
.cal-key{display:flex;flex-wrap:wrap;gap:8px 18px;margin:14px 4px 2px;font-size:12.5px;color:var(--slate)}
.cal-k{display:inline-flex;align-items:center;gap:8px}
.cal-k .cal-chip{display:inline-block;width:22px;height:14px;padding:0;flex:none;cursor:default}
#view .cal-away{margin-bottom:14px;box-shadow:inset 3px 0 0 var(--signal)}
@media (max-width:700px){.cal-grid .cal-chip{position:relative;height:8px;min-height:8px;padding:0;overflow:hidden;font-size:0;border-radius:0 4px 0 4px}.cal-grid .cal-chip>*,.cal-grid .cal-chip b{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.cal-grid .cal-chip.bank{height:auto;font-size:0}.cal-grid .cal-chip.bank::before{content:'';display:block;width:6px;height:6px;border-radius:50%;background:var(--signal)}.cal-month{font-size:18px;min-width:0}.cal-wrap{padding:8px;margin:0 -8px}.cal-grid .sp-day{min-height:68px;padding:4px}.cal-n{font-size:12px;min-width:22px;height:22px}.cal-dow div{padding:0 2px!important;font-size:11px!important}.cal-bar{gap:8px}}
.cal-grid .cal-chip.mine.away{background:repeating-linear-gradient(135deg,var(--white) 0 5px,var(--rule) 5px 6px)}
.cal-grid .cal-chip.mine.free{box-shadow:inset 0 0 0 1px var(--rule-strong)}
/* The name menu keeps its shape when pressed: the corner rule, never the pressed flip. */
.topbar .chip:active,.topbar .chip[open]{transform:none;border-radius:0 var(--r-tab) 0 var(--r-tab)}
.topbar .chip>summary:focus-visible{outline:2px solid var(--signal);outline-offset:-4px;border-radius:0 var(--r-tab) 0 var(--r-tab)}

/* ---------- Calendar: day and week, tools, the opened entry ---------- */
.cal-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.cal-tool{position:relative;display:grid;place-items:center;width:38px;height:38px;padding:0;border:0;background:var(--white);color:var(--ink);cursor:pointer;border-radius:0 12px 0 12px;list-style:none}
.cal-tool::-webkit-details-marker{display:none}
.cal-tool:hover,.cal-tool.on{background:var(--ink);color:var(--paper)}
.cal-tool:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.cal-tool i{position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;padding:0 4px;font:600 10.5px/17px var(--sans);font-style:normal;text-align:center;background:var(--signal);color:#fff;border-radius:0 6px 0 6px}
.cal-layers{position:relative}
.cal-layers .dash-menu-list{right:0;left:auto;min-width:240px}
.cal-layers-h{margin:2px 6px 6px;font-size:12px;font-weight:600;color:var(--slate)}
.cal-layer{display:flex;align-items:center;gap:10px;padding:8px 8px;font-size:14px;cursor:pointer;border-radius:0 8px 0 8px}
.cal-layer:hover{background:var(--paper)}
.cal-layer input{accent-color:var(--ink)}
.cal-layer i{width:12px;height:12px;background:var(--lc);border-radius:0 4px 0 4px}
.cal-quick{position:relative}
.cal-quick .input{width:280px;padding:9px 13px;background:var(--white)}
.cal-quick-say{position:absolute;top:calc(100% + 6px);left:0;z-index:25;width:max-content;max-width:360px;padding:0;font-size:12.5px;color:var(--ink)}
.cal-quick-say:not(:empty){padding:8px 11px;background:var(--white);box-shadow:0 12px 26px -14px rgba(18,22,27,.4),0 0 0 1px rgba(18,22,27,.06);border-radius:0 10px 0 10px}
.cal-bar .seg .btn{white-space:nowrap}

/* The time grid. */
.wk-sum{display:flex;align-items:center;gap:8px;margin:0;padding:12px 16px 0;font-size:13px;color:var(--slate)}
.wk-sum b{color:var(--ink)}
.wk-sum-bar{flex:0 0 140px;height:6px;margin-left:4px;background:var(--paper);border-radius:6px;overflow:hidden}
.wk-sum-bar i{display:block;height:100%;background:var(--ink)}
.wk-top,.wk-adrow,.wk-body{display:grid;grid-template-columns:64px repeat(var(--days),minmax(0,1fr))}
.wk.z2 .wk-top,.wk.z2 .wk-adrow,.wk.z2 .wk-body{grid-template-columns:104px repeat(var(--days),minmax(0,1fr))}
.wk-top{padding:12px 14px 0 0;border-bottom:1px solid var(--rule-soft)}
.wk-gut{display:flex;align-items:flex-end;justify-content:flex-end;gap:10px;padding:0 10px 8px 0;font-size:11px;color:var(--slate)}
.wk-dh{display:flex;flex-direction:column;align-items:center;gap:4px;padding:0 0 10px}
.wk-dh a{display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--ink);text-decoration:none;border:0}
.wk-dh a span{font-size:12px;font-weight:600;color:var(--slate)}
.wk-dh a b{display:grid;place-items:center;min-width:34px;height:34px;padding:0 4px;font-size:18px;font-weight:600;font-variant-numeric:tabular-nums;border-radius:0 10px 0 10px}
.wk-dh a:hover b{background:var(--paper)}
.wk-dh.today a b{background:var(--signal);color:#fff}
.wk-dh.today a span{color:var(--signal)}
.wk-dh.wkend a span{color:var(--slate)}
.wk-load{width:44px;height:4px;background:var(--paper);border-radius:4px;overflow:hidden}
.wk-load i{display:block;height:100%;background:var(--ink)}
.wk-load.full i{background:var(--signal)}
.wk-adrow{padding-right:14px;border-bottom:1px solid var(--rule-soft);min-height:34px}
.wk-adrow .wk-gut{align-items:center;padding-bottom:0}
.wk-ad{display:flex;flex-direction:column;gap:3px;padding:4px 3px;min-width:0;border-left:1px solid var(--rule-soft)}
.wk-ad .cal-chip{font-size:11.5px}
.wk-ad.sp-over{background:var(--signal-bg)}
.wk-scroll{max-height:min(68vh,760px);overflow-y:auto;padding-right:14px;scrollbar-width:thin;scrollbar-color:var(--rule-strong) transparent}
.wk-scroll:focus-visible{outline:2px solid var(--signal);outline-offset:-2px}
.wk-body{position:relative;height:calc(var(--hh) * 24)}
.wk-hours{display:block;padding:0}
.wk-h{position:relative;height:var(--hh)}
.wk-h span,.wk-h em{position:absolute;top:-8px;font-size:11px;font-variant-numeric:tabular-nums;color:var(--slate)}
.wk-h span{right:10px}
.wk-h em{right:52px;font-style:normal;color:var(--slate)}
.wk.z2 .wk-h span{right:10px}.wk.z2 .wk-h em{right:56px}
.wk-col{position:relative;border-left:1px solid var(--rule-soft);background-image:repeating-linear-gradient(to bottom,var(--rule-soft) 0 1px,transparent 1px var(--hh));touch-action:pan-y}
.wk-col.wkend{background-color:var(--paper-soft)}
.wk-col.today{background-color:var(--paper-soft)}
.wk-col[data-wk-add]{cursor:crosshair}
.wk-now{position:absolute;left:-4px;right:0;height:2px;background:var(--signal);z-index:3;pointer-events:none}
.wk-now::before{content:"";position:absolute;left:-2px;top:-4px;width:10px;height:10px;border-radius:50%;background:var(--signal)}
.wk-ev{position:absolute;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-width:0;margin-left:2px;padding:4px 7px;overflow:hidden;border:0;text-align:left;font:inherit;font-size:12px;line-height:1.3;cursor:pointer;background:var(--white);color:var(--ink);box-shadow:inset 3px 0 0 var(--ink),inset 0 0 0 1px var(--rule-strong);border-radius:0 8px 0 8px;transition:box-shadow .12s}
.wk-ev b{width:100%;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wk-ev .wk-t{display:inline-flex;align-items:center;gap:5px;font-size:11px;opacity:.8;font-variant-numeric:tabular-nums}
.wk-ev .wk-l{font-size:11px;opacity:.75;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}
.wk-ev .mk{display:inline-grid}
.wk-ev.short{flex-direction:row;align-items:center;gap:6px}
.wk-ev.short b{width:auto;flex:0 1 auto}
.wk-ev.work{background:var(--ink);color:var(--paper);box-shadow:none}
.wk-ev.free{background:var(--white);box-shadow:inset 0 0 0 1px var(--rule-strong)}
.wk-ev.work.free{color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink);background:var(--white)}
.wk-ev.away{background:repeating-linear-gradient(135deg,var(--white) 0 5px,var(--rule) 5px 6px)}
.wk-ev.outside{background:var(--rule-soft);color:var(--slate);box-shadow:inset 3px 0 0 var(--slate)}
.wk-ev.hidden{background:repeating-linear-gradient(135deg,var(--white) 0 4px,var(--rule) 4px 5px);color:var(--slate);cursor:default}
.wk-ev.guest{box-shadow:inset 3px 0 0 var(--signal),inset 0 0 0 1px var(--rule-strong)}
.wk-ev.declined{opacity:.5;text-decoration:line-through}
.wk-ev.layer{background:color-mix(in srgb,var(--lc) 14%,#fff);color:var(--ink);box-shadow:inset 3px 0 0 var(--lc)}
.wk-ev:hover{box-shadow:inset 3px 0 0 var(--ink),inset 0 0 0 1.5px var(--ink)}
.wk-ev.work:hover{background:var(--ink-hi)}
.wk-ev:focus-visible{outline:2px solid var(--signal);outline-offset:1px;z-index:4}
.wk-ev.dragging{z-index:5;opacity:.9;box-shadow:0 12px 24px -12px rgba(18,22,27,.5)}
.wk-ev[data-wk-move]{cursor:grab}
.wk-grip{position:absolute;left:0;right:0;bottom:0;height:8px;cursor:ns-resize}
.wk-grip::after{content:"";position:absolute;left:50%;bottom:2px;width:16px;height:2px;margin-left:-8px;border-radius:2px;background:currentColor;opacity:0;transition:opacity .12s}
.wk-ev:hover .wk-grip::after{opacity:.5}
.wk-travel{position:absolute;z-index:1;margin-left:2px;display:flex;padding:0 7px 3px;overflow:hidden;font-size:10.5px;color:var(--slate);background:repeating-linear-gradient(135deg,transparent 0 4px,var(--rule) 4px 5px);border-radius:0 8px 0 8px;pointer-events:none}
.wk-sel{position:absolute;left:2px;right:4px;z-index:3;padding:4px 7px;font-size:11.5px;font-weight:600;color:#fff;background:var(--signal);opacity:.9;border-radius:0 8px 0 8px;pointer-events:none}
.wk.one .wk-ev{font-size:13px}.wk.one .wk-ev .wk-t{font-size:12px}
.cal-chip.outside{background:var(--rule-soft);color:var(--slate);box-shadow:inset 3px 0 0 var(--slate)}
.cal-chip.layer{background:color-mix(in srgb,var(--lc) 14%,#fff);color:var(--ink);box-shadow:inset 3px 0 0 var(--lc)}
.cal-chip.guest{box-shadow:inset 3px 0 0 var(--signal),inset 0 0 0 1px var(--rule-strong);background:var(--white)}
.cal-chip.declined{opacity:.5;text-decoration:line-through}
.cal-k .cal-chip.layer{background:var(--lc);box-shadow:none}
.cal-n{text-decoration:none;border:0}
a.cal-n:hover{background:var(--white);border-radius:0 8px 0 8px}

/* The undo line. */
.cal-undo{position:fixed;left:50%;bottom:24px;z-index:90;display:flex;align-items:center;gap:16px;transform:translateX(-50%);padding:12px 14px 12px 18px;background:var(--ink);color:var(--paper);font-size:14px;border-radius:0 14px 0 14px;box-shadow:0 18px 40px -16px rgba(18,22,27,.6)}
.cal-undo button{border:0;background:transparent;color:var(--tint);font:inherit;font-weight:600;cursor:pointer;padding:4px 6px;border-radius:0 6px 0 6px}
.cal-undo button:hover,.cal-undo button:focus-visible{background:rgba(255,255,255,.12);outline:none}

/* One entry, opened. */
.ev-sheet{position:relative;padding-left:16px;box-shadow:inset 4px 0 0 var(--lc,var(--rule-strong))}
.ev-sheet.work{--lc:var(--ink)}
.ev-k{margin:0 0 4px;font-size:12px;font-weight:600;color:var(--slate)}
.ev-sheet h2{margin:0 0 6px}
.ev-when{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;margin:0 0 8px;font-size:15px}
.ev-rep{display:inline-flex;align-items:center;gap:5px;font-size:13px;color:var(--slate)}
.ev-dl{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:12px 0;font-size:14px}
.ev-dl dt{color:var(--slate)}.ev-dl dd{margin:0}
.ev-sub{margin:14px 0 6px;font-size:12.5px;font-weight:600;color:var(--slate)}
.ev-guests ul,.ev-prep-list{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.ev-guests li{display:flex;align-items:center;gap:8px;font-size:14px}
.ev-guests em{margin-left:auto;font-style:normal;font-size:12px;color:var(--slate)}
.ev-dot{width:9px;height:9px;border-radius:50%;background:var(--rule-strong)}
.ev-guests .r-yes .ev-dot{background:var(--status)}.ev-guests .r-no .ev-dot{background:var(--signal)}.ev-guests .r-maybe .ev-dot{background:var(--slate)}
.ev-reply{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:14px 0;padding:10px 12px;background:var(--paper);border-radius:0 12px 0 12px}
.ev-reply span{margin-right:auto;font-weight:600;font-size:14px}
.ev-notes{margin:12px 0;white-space:pre-wrap;font-size:14px}
.ev-prep{margin:14px 0 0;padding:12px 14px;background:var(--paper);border-radius:0 12px 0 12px}
.ev-prep .ev-sub{margin-top:0}
.ev-prep-list li{display:grid;grid-template-columns:120px 1fr;gap:10px;font-size:13.5px}
.ev-prep-list li b{font-weight:600;color:var(--slate)}
.ev-prep-list li.warn b{color:var(--signal)}
.ev-do{margin-top:18px;flex-wrap:wrap}
.ev-do .btn svg{margin-right:6px}

/* Search, free times, settings, keys. */
.cal-results{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:6px;max-height:50vh;overflow:auto}
.cal-results button{display:flex;align-items:center;gap:12px;width:100%;padding:8px 10px;border:0;background:var(--paper);text-align:left;font:inherit;cursor:pointer;border-radius:0 10px 0 10px}
.cal-results button:hover,.cal-results button:focus-visible{background:var(--rule);outline:none}
.cal-results button>span:last-child{display:grid;min-width:0}.cal-results small{color:var(--slate)}
.cal-r-d{display:grid;place-items:center;flex:none;width:42px;height:42px;background:var(--white);border-radius:0 8px 0 8px;line-height:1.05}
.cal-r-d b{font-size:16px}.cal-r-d small{font-size:10.5px}
.cal-slots{display:grid;gap:12px;margin-top:10px;max-height:56vh;overflow:auto}
.cal-slot-day h3{margin:0 0 6px;font-size:14px}
.cal-slot-day div{display:flex;flex-wrap:wrap;gap:6px}
.cal-set{margin-top:18px;padding-top:16px;border-top:1px solid var(--rule)}
.cal-set h3{margin:0 0 6px;font-size:15px}
.linkish{border:0;background:none;padding:0;font:inherit;color:var(--signal);text-decoration:underline;cursor:pointer}
.cal-imps{list-style:none;margin:10px 0;padding:0;display:grid;gap:6px}
.cal-imps li{display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--paper);border-radius:0 10px 0 10px}
.cal-imps li>span{display:grid;flex:1;min-width:0}.cal-imps small{color:var(--slate)}.cal-imps .bad{color:var(--signal)}
.cal-imp-add{display:grid;grid-template-columns:140px 1fr auto;gap:8px}
.cal-set-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:8px 0;font-size:14px}
.cal-set-row .input{width:auto}
.cal-keys{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin:14px 0 0}
.cal-keys dd{margin:0}
.cal-keys kbd{display:inline-block;min-width:26px;padding:3px 7px;text-align:center;font:600 12px var(--mono);background:var(--paper);box-shadow:inset 0 -1px 0 var(--rule-strong);border-radius:0 6px 0 6px}

@media (max-width:1100px){.cal-quick .input{width:200px}}
@media (max-width:700px){
  .cal-tools{width:100%}
  .cal-quick{order:-1;flex:1 1 100%}.cal-quick .input{width:100%}
  .cal-bar .seg{flex:1 1 100%;display:grid;grid-template-columns:repeat(4,1fr)}
  .wk-top,.wk-adrow,.wk-body{grid-template-columns:40px repeat(var(--days),minmax(0,1fr))}
  .wk-h span{right:4px;font-size:10px}.wk-h em{display:none}
  .wk-dh a b{min-width:26px;height:26px;font-size:14px}.wk-dh a span{font-size:10.5px}
  .wk-ev{padding:2px 4px;font-size:10.5px}.wk-ev .wk-t,.wk-ev .wk-l{display:none}
  .wk-scroll{padding-right:6px}.wk-top,.wk-adrow{padding-right:6px}
  .wk-sum{flex-wrap:wrap}.wk-sum-bar{flex-basis:100%;margin:0}
  .cal-imp-add{grid-template-columns:1fr}
  .ev-prep-list li{grid-template-columns:1fr;gap:0}
}

.cal-layers .dash-menu-list{max-height:min(60vh,520px);overflow:auto}
.wk-travel{align-items:center}.wk-travel span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px}
.wk-ev .wk-t{white-space:nowrap}
@media (max-width:700px){.wk-adrow .wk-gut span{font-size:9.5px;line-height:1.1;text-align:right}[data-action="cal-keys"]{display:none}}

/* ---------- Notifications: the settings, and the offer at the foot of the screen ---------- */
.nt-state{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px;margin:12px 0 4px;padding:14px 16px;background:var(--paper);border-radius:0 14px 0 14px}
.nt-state>div{flex:1 1 220px;min-width:0}
.nt-state b{display:block;font-size:15px}
.nt-state p{margin:4px 0 0;font-size:13.5px;color:var(--slate)}
.nt-state.good{box-shadow:inset 3px 0 0 var(--status)}.nt-state.good .nt-ico{background:var(--status);color:#fff}
.nt-state.warn{box-shadow:inset 3px 0 0 var(--signal)}.nt-state.warn .nt-ico{background:var(--signal);color:#fff}
.nt-ico{flex:none;display:grid;place-items:center;width:40px;height:40px;background:var(--white);color:var(--ink);border-radius:0 10px 0 10px}
.nt-h{margin:20px 0 8px;font-size:14px}
.nt-kinds{display:grid;gap:2px}
.nt-kind{display:flex;align-items:center;gap:14px;padding:9px 2px;border-bottom:1px solid var(--rule-soft);cursor:pointer}
.nt-kind>span{display:grid;flex:1;min-width:0}.nt-kind b{font-size:14px;font-weight:600}.nt-kind small{font-size:12.5px;color:var(--slate)}
.nt-switch{appearance:none;-webkit-appearance:none;flex:none;position:relative;width:44px;height:26px;margin:0;border-radius:13px;background:var(--rule-strong);cursor:pointer;transition:background .15s}
.nt-switch::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .15s}
.nt-switch:checked{background:var(--status)}.nt-switch:checked::after{transform:translateX(18px)}
.nt-switch:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.nt-quiet{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;font-size:14px}
.nt-quiet .input{width:auto;padding:6px 8px}
.nt-quiet small{flex-basis:100%;font-size:12.5px;color:var(--slate)}
.nt-devs{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.nt-devs li{display:flex;align-items:center;gap:10px;padding:8px 10px;background:var(--paper);border-radius:0 10px 0 10px}
.nt-devs li>span{display:grid;flex:1;min-width:0}.nt-devs small{color:var(--slate);font-size:12px}
/* The picture of one, drawn the way each phone draws its own. */
.nt-preview{margin:14px 0 0;padding:16px;background:linear-gradient(160deg,var(--slate),var(--ink-raised));border-radius:0 14px 0 14px}
.nt-preview figcaption{margin-top:10px;font-size:11.5px;color:rgba(255,255,255,.9);text-align:center}
.nt-card{display:flex;align-items:flex-start;gap:10px;padding:11px 12px;font-family:-apple-system,system-ui,'Segoe UI',Roboto,sans-serif;font-size:13.5px;line-height:1.3;color:var(--ink)}
.nt-card img{flex:none}
.nt-card b{display:block;font-weight:600}.nt-card p{margin:0}
.nt-preview.ios .nt-card{background:rgba(245,245,245,.86);border-radius:18px;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
.nt-preview.ios .nt-card img{border-radius:9px}
.nt-preview.ios .nt-when{margin-left:auto;font-size:12px;color:var(--slate)}
.nt-preview.droid .nt-card{background:var(--paper);border-radius:22px}
.nt-preview.droid .nt-card img{border-radius:50%;margin-top:2px}
.nt-preview.droid .nt-app{font-size:11.5px;color:var(--slate);margin-bottom:2px}
.nt-offer{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:95;display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;padding:14px;background:var(--ink);color:var(--paper);border-radius:0 16px 0 16px;box-shadow:0 18px 40px -16px rgba(18,22,27,.6)}
.nt-offer>span:nth-child(2){display:grid;flex:1 1 200px}.nt-offer small{color:var(--on-ink);font-size:12.5px}
.nt-offer .nt-ico{background:var(--signal);color:#fff}
.nt-offer .btn.ghost{color:var(--paper);background:transparent}
@media (min-width:720px){.nt-offer{left:auto;right:24px;bottom:24px;max-width:460px}}

/* ---------- Mail, calmer: the places down the side, one line per conversation ---------- */
.mail-search{position:relative;display:inline-flex;align-items:center}
.mail-search svg{position:absolute;left:11px;color:var(--slate);pointer-events:none}
.mail-search .input{width:240px;padding:9px 13px 9px 34px}
.mail-more .dash-menu-list{min-width:220px}
.mail-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:18px;align-items:start}
.mail-nav{position:sticky;top:16px;display:grid;gap:14px;min-width:0}
.mn-group{min-width:0}
.mn-item{max-width:100%;overflow:hidden}
.mn-whose .mn-item.on{background:var(--white);color:var(--ink)}
.mn-whose .mn-item.on .mn-n{background:var(--signal)}
.mn-group{display:grid;gap:2px;grid-template-columns:minmax(0,1fr)}
.mn-h{margin:0 0 4px 10px;font-size:12px;font-weight:600;color:var(--slate)}
/* Shared addresses on Business, one table per business when Bandroom has addresses too. */
.tbl tr.addr-biz th{padding:20px 10px 8px 0;font-family:inherit;font-size:13px;letter-spacing:0;text-transform:none;font-weight:600;color:var(--slate)}
.tbl tr.addr-biz:first-child th{padding-top:8px}
/* Addresses grouped by business (Tektura's, then Bandroom's), and in each the shared ones before the people's. */
.mn-sub{margin:10px 0 2px 10px;font-size:12px;color:var(--slate)}
.mn-item+.mn-sub{margin-top:14px}
.mn-item[data-gap]{margin-top:8px}
.mn-item{display:flex;align-items:center;gap:10px;width:100%;min-height:38px;padding:7px 10px;border:0;background:transparent;font:inherit;font-size:14px;color:var(--ink);text-align:left;cursor:pointer;border-radius:0 10px 0 10px}
.mn-item:hover{background:var(--white)}
.mn-item:focus-visible{outline:2px solid var(--signal);outline-offset:1px}
.mn-item.on{background:var(--ink);color:var(--paper)}
.mn-i{display:grid;place-items:center;width:18px;flex:none;opacity:.8}
.mn-item.on .mn-i{opacity:1}
.mn-w{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mn-n{flex:none;min-width:22px;padding:1px 7px;font-size:12px;font-weight:600;text-align:center;background:var(--signal);color:#fff;border-radius:0 6px 0 6px}
.mn-item.on .mn-n{background:rgba(255,255,255,.18)}
.mn-add{color:var(--slate)}
.mail-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin:2px 0 12px}
.mail-where{margin:0;font-size:20px;font-weight:600}
.mail-quick{display:flex;flex-wrap:wrap;gap:6px}
.mail-quick .chip{background:var(--white);color:var(--ink);font-size:13px;padding:7px 12px}
.mail-quick .chip span{margin-left:4px;font-weight:600;color:var(--signal)}
.mail-quick .chip.on{background:var(--ink);color:var(--paper)}.mail-quick .chip.on span{color:var(--tint)}
.mail-quick .chip:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.mail-panel{padding:0;overflow:hidden}
.mail-list .c-who{width:230px}
.mail-list td{padding:11px 12px;vertical-align:middle;border-bottom:1px solid var(--rule-soft)}
.mail-list .mail-day th{padding:14px 16px 6px;font-size:12px;font-weight:600;color:var(--slate);background:var(--white);border-bottom:1px solid var(--rule-soft);text-align:left}
.mail-list .mail-day:first-child th{padding-top:12px}
.mail-list .tick{padding:0 0 0 14px}
.mail-list .tick input{margin:0;opacity:0;transition:opacity .12s}
.mail-list tr.mail-row:hover .tick input,.mail-list .tick input:focus-visible,.mail-list .tick input:checked,.mail-list.picking .tick input{opacity:1}
.mail-list .whobox{align-items:center}
.mail-list .who b{font-weight:500;color:var(--slate);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.mail-list .subj{min-width:0}
.m-line{display:flex;align-items:center;gap:8px;min-width:0}
.m-line b{font-weight:500;color:var(--ink-hi);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.m-snip{display:block;margin-top:2px;font-size:13px;color:var(--slate);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--signal)}
.m-n{flex:none;font-size:11.5px;color:var(--slate);padding:0 6px;background:var(--paper);border-radius:0 5px 0 5px}
.m-tag{flex:none;max-width:40%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11.5px;font-weight:500;padding:2px 8px;background:var(--paper);color:var(--ink);border-radius:0 6px 0 6px}
.m-draft{color:var(--signal);font-weight:600}
.mail-list tr.unread .who b,.mail-list tr.unread .m-line b{font-weight:650;color:var(--ink)}
.mail-list tr.unread td{background:var(--paper-soft)}
.mail-list tr.unread td:first-child,.mail-list tr.at td:first-child,.mail-list tr.unread.at td:first-child{box-shadow:none}
.mail-list tr.at td{background:var(--paper)}
.mail-list tr.at td:first-child{box-shadow:inset 3px 0 0 var(--ink)!important}
.mail-list tr.picked td{background:var(--signal-bg)}
.mail-list .when{text-align:right;position:relative;white-space:nowrap}
.m-when{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--slate);font-variant-numeric:tabular-nums}
.mail-list tr.unread .m-when{color:var(--ink);font-weight:600}
.m-star{color:var(--signal);display:inline-grid}
.m-star svg{width:13px;height:13px}
.m-acts{position:absolute;right:8px;top:50%;transform:translateY(-50%);display:none;gap:2px;padding-left:10px;background:inherit}
.mail-list tr.mail-row:hover .m-acts,.mail-list tr.mail-row:focus-within .m-acts{display:inline-flex}
.mail-list tr.mail-row:hover .m-when,.mail-list tr.mail-row:focus-within .m-when{visibility:hidden}
.m-act{display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;background:var(--white);color:var(--slate);cursor:pointer;border-radius:0 8px 0 8px}
.m-act svg{width:15px;height:15px}
.m-act:hover{background:var(--ink);color:var(--paper)}
.m-act.on{color:var(--signal)}
.m-act:focus-visible{outline:2px solid var(--signal);outline-offset:1px}
@media (hover:none){.mail-list .tick input{opacity:1}}
.mail-count{margin:10px 2px 0;font-size:13px;color:var(--slate)}
.mail-count .check{display:inline-flex;align-items:center;gap:6px}
.mail-foot{margin-top:10px}
/* One conversation */
.mail-head{display:flex!important;flex-wrap:wrap;align-items:center;gap:12px 14px}
.mail-head>.ph-ico,.mail-head>.ph-art{display:none!important}
.mail-head>h1{flex:1 1 300px;min-width:0;margin:0}
.mail-head>.btn-row{flex:1 1 100%;margin:0!important}
.m-back{display:grid;place-items:center;width:38px;height:38px;background:var(--paper);color:var(--ink);border:0!important;border-radius:0 10px 0 10px}
.m-back:hover{background:var(--ink);color:var(--paper)}
.m-back:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.mail-head .m-ico{padding-left:10px;padding-right:10px}
.mail-head .m-ico svg{width:15px;height:15px}
.mail-head .m-ico.on{color:var(--signal)}
.mail-head .dash-menu-list a,.mail-head .dash-menu-list button{display:flex;align-items:center;gap:8px}
.m-filedrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:-6px 0 14px}
.m-filed{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;font-size:13px;font-weight:500;color:var(--ink);background:var(--white);border:0!important;text-decoration:none;border-radius:0 8px 0 8px}
.m-filed svg{width:14px;height:14px;opacity:.7}
a.m-filed:hover{background:var(--ink);color:var(--paper)}
details.evidence-pick{margin:0 0 14px;padding:12px 16px}
details.evidence-pick>summary{display:flex;align-items:center;gap:6px 12px;font-size:13.5px;font-weight:600;cursor:pointer;list-style:none}
details.evidence-pick>summary::-webkit-details-marker{display:none}
details.evidence-pick>summary::before{content:"";width:7px;height:7px;border:solid currentColor;border-width:0 1.6px 1.6px 0;transform:rotate(-45deg);margin-right:2px;transition:transform .15s}
details.evidence-pick[open]>summary::before{transform:rotate(45deg)}
details.evidence-pick>summary .small{font-weight:400;color:var(--status)}
details.evidence-pick .qn-chips{margin-top:10px}
details.evidence-pick>summary>span:first-child{flex:1 1 200px;min-width:0}
details.evidence-pick>summary{flex-wrap:nowrap}
.mail-msg header .m-addr{color:var(--slate)}
.mail-msg header time{white-space:nowrap}
.m-replybar{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
@media (max-width:1100px){
  .mail-layout{grid-template-columns:minmax(0,1fr);gap:10px}
  .mail-nav{position:static;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px 4px}
  .mail-nav::-webkit-scrollbar{display:none}
  .mn-group{display:flex;gap:6px}.mn-h{display:none}
  .mn-item[data-gap]{margin-top:0}
  .mn-sub,.mn-item+.mn-sub{display:flex;align-items:center;flex:none;margin:0 0 0 4px;padding-left:10px;border-left:1px solid var(--rule)}
  .mn-group+.mn-group{padding-left:8px;border-left:1px solid var(--rule)}
  .mn-item{width:auto;flex:none;max-width:none;background:var(--white)}
  .mn-group{grid-template-columns:none;flex:none;min-width:auto}
  .mn-item{overflow:visible}
  .mn-w{overflow:visible}
}
@media (max-width:700px){
  .mail-search .input{width:100%}.mail-search{flex:1 1 100%}
  .mail-list .c-who{width:auto}.mail-list colgroup,.mail-list .tick{display:none}
  .mail-list tr.mail-row{display:grid;padding:10px 14px;border-bottom:1px solid var(--rule-soft)}
  .mail-list tr.mail-row td{display:block;padding:0;border:0;background:transparent}
  .mail-list tr.mail-row .who{grid-column:1}
  .mail-list tr.mail-row .subj{margin-top:4px}
  .mail-list .whobox .avatar{display:none}
  .mail-list .mail-day{display:block}.mail-list .mail-day th{display:block}
  .m-acts{display:none!important}
  .mail-head .btn-row [data-mode="forward"]{display:none}.mail-list tr.mail-row:hover .m-when{visibility:visible}
}

/* ---------- Mail, at a glance: four tiles over the inbox, people first, apps folded away ---------- */
.mail-glance{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 0 16px}
.mg{display:flex;align-items:center;gap:14px;min-width:0;padding:14px 16px;background:var(--white);color:var(--ink);border:0;font:inherit;text-align:left;cursor:pointer;border-radius:0 var(--r-card) 0 var(--r-card);transition:background .15s,box-shadow .15s}
.mg:hover{box-shadow:inset 0 0 0 2px var(--ink)}
.mg:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.mg-n{flex:none;min-width:30px;font-size:30px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums}
.mg.hot .mg-n{color:var(--signal)}
.mg-t{min-width:0}
.mg-t b{display:block;font-size:15px;font-weight:600}
.mg-t span{display:block;margin-top:2px;font-size:12.5px;color:var(--slate);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mg.on{background:var(--ink);color:var(--paper)}
.mg.on .mg-n{color:var(--signal-dark)}
.mg.on .mg-t span{color:#A7B0BA}
.mail-list .c-tick{width:36px}.mail-list .c-pic{width:58px}.mail-list .c-when{width:118px}
.mail-list td.pic{padding:14px 4px 14px 6px;vertical-align:top}
.mail-list td.subj{padding:13px 12px 13px 8px}
.mail-list td.when{vertical-align:top;padding-top:15px}
.mail-list td.tick{vertical-align:top;padding-top:26px}
.m-pic{width:40px;height:40px;display:grid;place-items:center;background:var(--paper);color:var(--ink);font-size:14px;font-weight:600;border-radius:0 10px 0 10px}
.mail-list td.pic .avatar{border-radius:0 10px 0 10px}
.m-l1{display:flex;align-items:center;gap:8px;min-width:0;font-size:14px}
.m-who{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.mail-list tr.unread .m-who{font-weight:650}
.m-org{color:var(--slate);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.m-box{flex:none;display:inline-flex;align-items:center;gap:5px;margin-left:4px;font-size:12px;color:var(--slate)}
.m-box i{width:7px;height:7px;border-radius:50%}
.mail-list .m-line{margin-top:4px}
.mail-list .m-line b{font-size:15px}
.m-tag-new{background:var(--signal-bg);color:var(--signal-text)}
.m-tag-ink{background:var(--ink);color:#fff}
.m-tag-go{background:var(--status-bg);color:var(--status)}
.mail-list tr.mail-row.auto td{background:var(--paper-soft)}
.mail-bundle td{padding:0!important;background:var(--paper-soft);border-bottom:1px solid var(--rule-soft)}
.m-bundle{display:flex;align-items:center;gap:14px;width:100%;padding:14px 16px 14px 42px;border:0;background:transparent;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.m-bundle:hover{background:var(--paper)}
.m-bundle:focus-visible{outline:2px solid var(--signal);outline-offset:-2px}
.m-pic-apps{flex:none;background:var(--white);color:var(--slate)}
.m-bw{flex:1;min-width:0}
.m-bw b{display:block;font-weight:600}
.m-bwho{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.m-bwho span{font-size:12.5px;padding:3px 9px;background:var(--white);border-radius:0 6px 0 6px}
.m-bn{flex:none;display:flex;align-items:center;gap:12px;font-size:13px;color:var(--slate)}
.m-chev{width:8px;height:8px;border:solid currentColor;border-width:0 1.6px 1.6px 0;transform:rotate(45deg) translateY(-2px);transition:transform .15s}
.mail-bundle.open .m-chev{transform:rotate(-135deg)}
.mn-dot{display:inline-block;width:10px;height:10px;border-radius:50%}
.mn-dot-all{background:conic-gradient(#C2410C 0 33%,var(--ink) 0 66%,var(--status) 0)}
.mn-whose .mn-item.on{box-shadow:inset 3px 0 0 var(--signal)}
.mail-count{display:flex;align-items:center;gap:12px}
.mail-hint{margin-left:auto}
.m-state{background:var(--signal-bg)}
/* Putting off: a few sensible times, as big buttons */
.later-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:14px}
.later{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:12px 14px;background:var(--paper);color:var(--ink);border:0;font:inherit;text-align:left;cursor:pointer;border-radius:0 10px 0 10px}
.later b{font-size:15px;font-weight:600}
.later span{font-size:13px;color:var(--slate)}
.later:hover,.later:focus-visible{background:var(--ink);color:var(--paper);outline:0}
.later:hover span,.later:focus-visible span{color:#A7B0BA}
.later-own{margin-top:16px}
.later-row{display:flex;gap:8px;margin-top:6px}
.later-row .input{flex:1}
/* Sending, with a few seconds to take it back */
.send-undo{position:fixed;left:50%;bottom:24px;z-index:80;transform:translateX(-50%);display:flex;align-items:center;gap:16px;padding:10px 12px 12px 18px;background:var(--ink);color:var(--paper);font-size:14px;overflow:hidden;border-radius:0 12px 0 12px;box-shadow:0 10px 30px rgba(18,22,27,.25)}
.send-undo .btn{background:var(--white);color:var(--ink)}
.send-undo i{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--signal);transform-origin:left;animation-name:mo-time;animation-timing-function:linear;animation-fill-mode:forwards}
@media (max-width:1100px){.mail-glance{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){
  .mail-glance{gap:8px}.mg{padding:12px}.mg-n{font-size:24px;min-width:24px}
  .mail-list tr.mail-row{grid-template-columns:50px minmax(0,1fr) auto}
  .mail-list tr.mail-row .pic{grid-column:1;grid-row:1/3}
  .mail-list tr.mail-row .subj{grid-column:2;grid-row:1;margin:0}
  .mail-list tr.mail-row .when{grid-column:3;grid-row:1;padding-top:2px}
  .m-box,.mail-hint{display:none}
  .m-bundle{padding-left:14px}
  .later-grid{grid-template-columns:1fr}
}

/* ---------- Forms, calmer ----------
   A field is a soft fill with a firm line along its foot (3.9:1 on white, so it is still
   plainly a box to type in), and the whole outline only comes when you are in it. On and
   off is a switch. A short row of choices is one bar. Save and Cancel stay in reach at the
   foot of a long form. Settings set once fold under More options, saying what they are. */
body.staff .input,body.staff textarea,body.staff select{background:var(--paper);box-shadow:inset 0 -2px 0 var(--edge,var(--slate))}
body.staff .input:hover,body.staff textarea:hover,body.staff select:hover{background:var(--rule-soft)}
body.staff .input:focus,body.staff textarea:focus,body.staff select:focus{background:var(--white);box-shadow:inset 0 0 0 2.5px var(--signal)}
body.staff .input[aria-invalid=true],body.staff textarea[aria-invalid=true]{box-shadow:inset 0 0 0 2px var(--signal)}
body.staff .input[readonly]{background:transparent}
.form .field>label,.form .field>.lab{display:flex;align-items:center;gap:8px}
.f-ico{display:inline-grid;place-items:center;width:18px;flex:none;color:var(--slate)}
.form .field.big .input{font-size:22px;font-weight:600;padding:12px 2px;background:transparent;box-shadow:inset 0 -2px 0 var(--rule)}
.form .field.big .input:focus{box-shadow:inset 0 -2.5px 0 var(--signal)}
.form .field.big .input::placeholder{color:var(--slate);font-weight:500}
/* the switch */
.check.switch{display:flex;align-items:center;gap:12px;cursor:pointer;font-size:15px;line-height:1.35}
.check.switch input[type=checkbox]{-webkit-appearance:none;appearance:none;flex:none;position:relative;width:42px;height:24px;margin:0;background:var(--edge,var(--slate));border-radius:0 8px 0 8px;cursor:pointer;transition:background .18s}
.check.switch input[type=checkbox]::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;background:var(--white);border-radius:0 6px 0 6px;transition:transform .18s cubic-bezier(.2,.8,.2,1)}
.check.switch input[type=checkbox]:checked{background:var(--ink)}
.check.switch input[type=checkbox]:checked::after{transform:translateX(18px)}
.check.switch input[type=checkbox]:focus-visible{outline:2.5px solid var(--signal);outline-offset:2px}
.check.switch .f-ico{order:-1}
@media (prefers-reduced-motion:reduce){.check.switch input[type=checkbox],.check.switch input[type=checkbox]::after{transition:none}}
/* a short row of choices is one bar */
.form .pick{display:inline-flex;flex-wrap:wrap;gap:2px;padding:3px;background:var(--paper);box-shadow:inset 0 -2px 0 var(--edge,var(--slate));border-radius:0 var(--r-btn) 0 var(--r-btn);max-width:100%}
.form .pick-o span{min-height:38px;padding:8px 13px;background:transparent;box-shadow:none;border-radius:0 8px 0 8px}
.form .pick-o:hover span{background:var(--white)}
.form .pick-o input:checked+span{background:var(--ink);color:var(--paper)}
.form .pick-o input:checked+span::before{width:10px;height:6px}
/* More options, folded */
.f-more{margin-top:4px;border-top:1px solid var(--rule-soft)}
.f-more>summary{display:flex;align-items:center;gap:12px;padding:14px 0;cursor:pointer;list-style:none;font-weight:600}
.f-more>summary::-webkit-details-marker{display:none}
.f-more>summary::before{content:"";width:7px;height:7px;flex:none;border:solid currentColor;border-width:0 1.6px 1.6px 0;transform:rotate(-45deg);transition:transform .15s}
.f-more[open]>summary::before{transform:rotate(45deg)}
.f-more-s{flex:1;min-width:0;font-weight:400;font-size:13.5px;color:var(--slate);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.f-more[open] .f-more-s{visibility:hidden}
.f-more>summary:focus-visible{outline:2.5px solid var(--signal);outline-offset:2px}
.f-more>.cols{padding-bottom:6px}
/* Save and Cancel stay in reach */
dialog .form>.btn-row{position:sticky;bottom:calc(-1 * clamp(22px,3vw,32px));z-index:3;margin:6px calc(-1 * clamp(22px,3vw,32px)) calc(-1 * clamp(22px,3vw,32px)) !important;padding:14px clamp(22px,3vw,32px) clamp(22px,3vw,32px);background:var(--white);border-top:1px solid var(--rule-soft)}
.form .pick{justify-self:start;width:fit-content}
.form .field.low{align-self:end;padding-bottom:12px}

/* ---------- Clients: the stages as tiles, each client a card ---------- */
.cl-stages{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:0 0 16px}
.cl-st{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0;padding:14px 16px;background:var(--white);color:var(--ink);border:0;font:inherit;text-align:left;cursor:pointer;border-radius:0 var(--r-card) 0 var(--r-card);transition:box-shadow .15s}
.cl-st:hover{box-shadow:inset 0 0 0 2px var(--ink)}
.cl-st:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.cl-n{font-size:28px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums}
.cl-st.none .cl-n{color:var(--slate)}
.cl-l{display:flex;align-items:center;gap:7px;font-weight:600}
.cl-l i{width:9px;height:9px;border-radius:50%}
.cl-bar{display:block;align-self:stretch;height:4px;margin-top:6px;background:var(--paper)}
.cl-bar b{display:block;height:4px}
.cl-st.on{background:var(--ink);color:var(--paper)}
.cl-st.on .cl-bar{background:var(--ink-hi)}
.cl-tools{display:flex;gap:10px;margin:0 0 14px}
.cl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
.cl-card{position:relative;display:flex;flex-direction:column;gap:14px;padding:20px;background:var(--white);color:var(--ink);text-decoration:none;border:0!important;border-radius:0 var(--r-card) 0 var(--r-card);transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .15s}
.cl-card:hover{transform:translateY(-3px);box-shadow:0 12px 26px -18px rgba(18,22,27,.45)}
.cl-card:focus-visible{outline:2.5px solid var(--signal);outline-offset:2px}
.cl-top{display:flex;align-items:center;gap:14px;min-width:0}
.cl-name{flex:1;min-width:0}
.cl-name b{display:block;font-size:18px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cl-name span{display:block;margin-top:2px;font-size:13px;color:var(--slate)}
.cl-tag{align-self:flex-start}
.cl-meta{display:grid;grid-template-columns:auto minmax(0,1fr);gap:7px 14px;margin:0;font-size:14px}
.cl-meta dt{color:var(--slate)}
.cl-meta dd{margin:0;min-width:0;overflow-wrap:anywhere}
.cl-meta dd .small{display:block}
.cl-next{display:flex;align-items:center;gap:10px;padding:10px 12px;font-size:14px;background:var(--paper);border-radius:0 10px 0 10px}
.cl-next svg{color:var(--signal);flex:none}
.cl-foot{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:12px;border-top:1px solid var(--rule-soft);font-size:13px;color:var(--slate)}
.cl-open{font-weight:600;color:var(--ink)}
.cl-new{display:grid;place-items:center;min-height:220px;background:transparent;box-shadow:inset 0 0 0 2px var(--rule);color:var(--slate);font:inherit;font-weight:600;cursor:pointer}
.cl-new span{display:inline-flex;align-items:center;gap:8px}
.cl-new:hover{box-shadow:inset 0 0 0 2px var(--ink);color:var(--ink);transform:none}
@media (max-width:900px){.cl-stages{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.cl-stages{grid-template-columns:repeat(2,minmax(0,1fr))}.cl-grid{grid-template-columns:minmax(0,1fr)}}

/* ---------- Contacts: a short queue of cards with a best guess, then the people ---------- */
.ct-look-h .ct-all{margin-left:auto}
.ct-q{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px;margin-top:14px}
.ct-qi{display:flex;flex-direction:column;gap:10px;padding:14px;background:var(--paper);border-radius:0 12px 0 12px}
.ct-qid{display:flex;align-items:center;gap:10px;min-width:0;color:inherit;text-decoration:none;border:0!important}
.ct-qid>span{display:grid;min-width:0}
.ct-qid b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ct-qid .small{color:var(--slate);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ct-qid:hover b{color:var(--signal)}
.ct-guess{align-self:flex-start;font-size:12px;font-weight:600;padding:3px 9px;border-radius:0 6px 0 6px;background:var(--white);color:var(--slate)}
.ct-g-person{background:var(--status-bg);color:var(--status)}
.ct-g-spam{background:var(--signal-bg);color:var(--signal-text)}
.ct-qi .ct-do{margin-top:auto}
.ct-qi .ct-do .btn{flex:1;justify-content:center}
.ct-card{position:relative}
.ct-link{color:inherit;text-decoration:none;border:0!important}
.ct-link::after{content:"";position:absolute;inset:0}
.ct-link:focus-visible{outline:0}
.ct-card:has(.ct-link:focus-visible){outline:2.5px solid var(--signal);outline-offset:2px}
.ct-mail{color:var(--slate);overflow-wrap:anywhere}
.ct-foot{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ct-acts{position:relative;z-index:1;display:flex;gap:6px}
.ct-act{display:grid;place-items:center;width:34px;height:34px;padding:0;border:0!important;background:var(--paper);color:var(--ink);cursor:pointer;border-radius:0 9px 0 9px}
.ct-act:hover{background:var(--ink);color:var(--paper)}
.ct-act:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
@media (max-width:700px){.ct-look-h{flex-wrap:wrap}.ct-look-h .ct-all{margin-left:48px}}

/* ---------- Quotes: where each one is, at a glance ---------- */
/* Quotes has six tiles where clients has five: one row of six on a desktop, threes and twos below (the shared rules at 900 and 560). */
@media (min-width:901px){.cl-stages.qt-stages{grid-template-columns:repeat(6,minmax(0,1fr))}}
.qt-worth{font-size:12.5px;color:var(--slate)}
.cl-st.on .qt-worth{color:#A7B0BA}
.qt-card{position:relative;display:flex;flex-direction:column;gap:10px;padding:20px;background:var(--white);border-radius:0 var(--r-card) 0 var(--r-card);transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .15s}
.qt-card:hover{transform:translateY(-3px);box-shadow:0 12px 26px -18px rgba(18,22,27,.45)}
.qt-card:has(.qt-link:focus-visible){outline:2.5px solid var(--signal);outline-offset:2px}
.qt-card.no{opacity:.75}
.qt-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.qt-ref{font-size:12.5px;color:var(--slate)}
.qt-link{color:inherit;text-decoration:none;border:0!important}
.qt-link::after{content:"";position:absolute;inset:0}
.qt-link:focus-visible{outline:0}
.qt-name{display:block;font-size:19px;font-weight:600}
.qt-sub{font-size:13.5px;color:var(--slate)}
.qt-client{position:relative;z-index:1;color:var(--ink)}
.qt-price b{display:block;font-size:24px;font-weight:600;letter-spacing:-.01em}
.qt-price .small{display:block;color:var(--slate)}
.qt-none{display:inline-block;font-size:13px;padding:4px 10px;background:var(--paper);border-radius:0 8px 0 8px;color:var(--slate)}
.qt-steps{display:flex;gap:0;list-style:none;margin:4px 0 0;padding:0}
.qt-steps li{flex:1;display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--slate)}
.qt-steps li i{display:block;height:4px;margin-right:4px;background:var(--paper)}
.qt-steps li.done{color:var(--ink);font-weight:600}
.qt-steps li.done i{background:var(--ink)}
.qt-note{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--slate)}
.qt-foot{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:12px;border-top:1px solid var(--rule-soft);font-size:13px;color:var(--slate)}
.qt-del{position:relative;z-index:1;display:grid;place-items:center;width:34px;height:34px;padding:0;border:0;background:var(--paper);color:var(--slate);cursor:pointer;border-radius:0 9px 0 9px}
.qt-del:hover{background:var(--signal-text);color:#fff}
.qt-del:focus-visible{outline:2px solid var(--signal);outline-offset:2px}

/* ---------- Days worked: the month at a glance, and today in one press ---------- */
.dw-sum{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 14px}
.dw-s{display:flex;align-items:baseline;gap:10px;padding:16px 18px;background:var(--white);border-radius:0 var(--r-card) 0 var(--r-card);font-size:14px;color:var(--slate)}
.dw-s .cl-n{color:var(--ink)}
.dw-today{margin:0 0 14px}
.dw-th{display:flex;align-items:baseline;gap:12px;margin-bottom:12px}
.dw-th b{font-size:17px}
.dw-quick{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px}
.dw-q{display:flex;flex-direction:column;gap:10px;padding:12px 14px;background:var(--paper);border-radius:0 12px 0 12px}
.dw-qn{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dw-qb{display:flex;gap:6px}
.dw-qb .btn{flex:1;justify-content:center}
.dw-two{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:14px;align-items:start}
.dw-mh{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.dw-mh h2{margin:0 6px;font-size:18px;min-width:150px;text-align:center}
.dw-mh .small{margin-left:auto}
.dw-mh .ib{display:grid;place-items:center;width:34px;height:34px;padding:0;border:0;background:var(--paper);color:var(--ink);font-size:20px;line-height:1;cursor:pointer;border-radius:0 9px 0 9px}
.dw-mh .ib:hover{background:var(--ink);color:var(--paper)}
.dw-wk,.dw-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.dw-wk span{font-size:12px;font-weight:600;color:var(--slate);text-align:center;padding-bottom:4px}
.dw-c{position:relative;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;min-width:0;padding:7px 8px;background:var(--paper);color:var(--ink);border:0;font:inherit;text-align:left;cursor:pointer;border-radius:0 10px 0 10px;overflow:hidden}
.dw-c.we{background:var(--paper)}
.dw-c.later{color:var(--slate)}
.dw-c:hover{box-shadow:inset 0 0 0 2px var(--ink)}
.dw-c:focus-visible{outline:2px solid var(--signal);outline-offset:1px}
.dw-c.today{box-shadow:inset 0 0 0 2px var(--signal)}
.dw-d{font-size:13px;font-weight:600}
.dw-n{font-size:12px;font-weight:600}
.dw-c.half{background:linear-gradient(to top,var(--signal-bg) 50%,var(--paper) 50%)}
.dw-c.full{background:var(--signal);color:#fff}
.dw-blank{background:transparent;cursor:default}
.dw-key{display:flex;flex-wrap:wrap;gap:16px;margin:12px 0 0;color:var(--slate)}
.dw-key span{display:inline-flex;align-items:center;gap:6px}
.dw-key i{width:14px;height:14px;border-radius:0 4px 0 4px;background:var(--paper)}
.dw-key i.full{background:var(--signal)}
.dw-key i.half{background:linear-gradient(to top,var(--signal-bg) 50%,var(--paper) 50%)}
.dw-bars{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:12px}
.dw-bars li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;align-items:center}
.dw-bars a{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.dw-bar{grid-column:1;height:8px;background:var(--paper)}
.dw-bar b{display:block;height:8px;background:var(--ink)}
.dw-bn{grid-column:2;grid-row:1/3;font-size:20px;font-weight:600}
@media (max-width:900px){.dw-two{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.dw-sum{grid-template-columns:1fr 1fr 1fr}.dw-s{flex-direction:column;gap:4px;padding:12px}.dw-c{padding:4px 5px}.dw-n{display:none}}

/* ---------- Live sites: a status wall ---------- */
.sw-hero{display:flex;align-items:center;gap:18px;margin:0 0 16px;padding:20px 22px;background:var(--white);border-radius:0 var(--r-card) 0 var(--r-card);box-shadow:inset 4px 0 0 var(--status)}
.sw-hero.bad{box-shadow:inset 4px 0 0 var(--signal)}
.sw-pulse{position:relative;flex:none;width:18px;height:18px}
.sw-pulse i,.sw-pulse::before{position:absolute;inset:0;border-radius:50%;background:var(--status);content:""}
.sw-hero.bad .sw-pulse i,.sw-hero.bad .sw-pulse::before{background:var(--signal)}
.sw-pulse::before{animation:sw-ping 2.4s cubic-bezier(0,0,.2,1) infinite;opacity:.5}
@keyframes sw-ping{0%{transform:scale(1);opacity:.5}80%,100%{transform:scale(2.6);opacity:0}}
.sw-say{flex:1;min-width:0}
.sw-say b{display:block;font-size:22px;font-weight:600;letter-spacing:-.01em}
.sw-say span{display:block;margin-top:3px;font-size:14px;color:var(--slate)}
.sw-hb{display:flex;gap:8px}
.sw-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.sw-card{display:flex;flex-direction:column;background:var(--white);overflow:hidden;border-radius:0 var(--r-card) 0 var(--r-card)}
.sw-win{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--paper);border-bottom:1px solid var(--rule)}
.sw-dots{display:flex;gap:5px}
.sw-dots i{width:8px;height:8px;border-radius:50%;background:var(--rule-strong)}
.sw-host{flex:1;min-width:0;padding:5px 10px;background:var(--white);color:var(--ink);font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none;border:0!important;border-radius:0 7px 0 7px}
.sw-host:hover{text-decoration:underline}
.sw-edit{width:30px;height:30px;padding:0;border:0;background:transparent;color:var(--slate);font-size:18px;line-height:1;cursor:pointer;border-radius:0 8px 0 8px}
.sw-edit:hover{background:var(--white);color:var(--ink)}
.sw-body{display:flex;flex-direction:column;gap:14px;padding:16px 18px 18px}
.sw-now{display:flex;align-items:center;gap:10px;font-size:15px}
.sw-now .st-dot{display:none}
.sw-live{flex:none;width:12px;height:12px;border-radius:50%;background:var(--on-ink-dim)}
.sw-card.up .sw-live{background:var(--status);box-shadow:0 0 0 4px var(--status-bg)}
.sw-card.slow .sw-live{background:var(--slate);box-shadow:0 0 0 4px var(--paper)}
.sw-card.down .sw-live{background:var(--signal);box-shadow:0 0 0 4px var(--signal-bg);animation:sw-blink 1.2s steps(2) infinite}
@keyframes sw-blink{50%{opacity:.35}}
.sw-card.off{opacity:.7}
.sw-client{display:flex;align-items:center;gap:8px;font-size:13.5px}
.sw-plan{margin-left:auto;font-size:12px;padding:3px 8px;background:var(--paper);border-radius:0 6px 0 6px}
.sw-week-row{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.sw-week-row .st-week{transform:scale(1.4);transform-origin:right bottom}
.sw-rings{display:flex;gap:18px;padding-top:12px;border-top:1px solid var(--rule-soft)}
.sw-ring{display:flex;align-items:center;gap:8px}
.sw-ring circle{fill:none;stroke-width:4}
.sw-ring .bg{stroke:var(--paper)}
.sw-ring .fg{stroke:var(--status);stroke-linecap:butt}
.sw-ring.soon .fg{stroke:var(--slate)}
.sw-ring.bad .fg{stroke:var(--signal)}
.sw-ring>span{display:grid}
.sw-ring b{font-size:15px}
.sw-ring small{font-size:12px;color:var(--slate)}
.sw-empty{padding:28px}
.sw-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;list-style:none;margin:0;padding:0;counter-reset:sw}
.sw-steps li{display:flex;flex-direction:column;gap:6px;padding:18px;background:var(--paper);border-radius:0 12px 0 12px;font-size:14px;color:var(--slate)}
.sw-steps li b{color:var(--ink);font-size:15px}
.sw-si{display:grid;place-items:center;width:42px;height:42px;margin-bottom:6px;background:var(--ink);color:var(--paper);border-radius:0 10px 0 10px}
@media (prefers-reduced-motion:reduce){.sw-pulse::before,.sw-card.down .sw-live{animation:none}}
@media (max-width:900px){.sw-steps{grid-template-columns:1fr 1fr}.sw-hero{flex-wrap:wrap}.sw-hb{width:100%}}
@media (max-width:560px){.sw-steps{grid-template-columns:1fr}}
.sw-card.down{box-shadow:none;outline:2px solid var(--signal);outline-offset:-2px}
.sw-card.down .sw-win{background:var(--signal-bg);border-bottom-color:var(--tint)}
.sw-client a,.dw-bars a{color:var(--ink)}
.dw-c{aspect-ratio:1/0.66}

/* ---------- Handbook, calmer: no dark bands, one set of contents, a light toolbar ---------- */
.hb-cover,.hb-inside{display:none}
.hb-hero,.hb-hero.nopic{grid-template-columns:minmax(0,1fr);padding-top:26px}
.hb-bar{background:var(--white);color:var(--ink);padding:10px 14px}
.hb-l{color:var(--slate)}
.hb-bar .chip{background:var(--paper);color:var(--ink)}
.hb-bar .chip:hover{background:var(--rule)}
.hb-bar .chip.on,.hb-bar .chip[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.hb-find input{background:var(--paper);color:var(--ink);box-shadow:inset 0 -2px 0 var(--edge,var(--slate))}
.hb-find input::placeholder{color:var(--slate)}
.hb-band{display:flex;align-items:center;gap:10px;height:auto;background:none;color:var(--slate);overflow:visible}
.hb-sec.fresh .hb-band{background:none}
.hb-band .ps-art{display:none}
.hb-num{position:static;transform:none;font-size:13px;font-weight:600;color:var(--slate)}
.hb-band .hb-fresh{position:static}
.hb-band .hb-fresh{background:var(--signal);color:#fff}
.hb-hero .hb-hh{max-width:none}
.hb-band{margin:22px 0 8px}

/* ---------- Tax year: the year as a line, with its deadlines ---------- */
.ty-line{margin:0 0 14px;padding:22px 26px 64px}
.ty-track{position:relative;height:10px;margin:44px 8px 0;background:var(--paper)}
.ty-year{position:absolute;top:0;bottom:0;background:var(--rule)}
.ty-now{position:absolute;left:0;top:0;bottom:0;background:var(--ink)}
.ty-here{position:absolute;top:-34px;transform:translateX(-50%);font-size:12px;white-space:nowrap}
.ty-here b{display:block;padding:3px 8px;background:var(--ink);color:#fff;border-radius:0 6px 0 6px}
.ty-m{position:absolute;top:0;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:3px;font-size:12px;color:var(--slate);white-space:nowrap}
.ty-m i{width:3px;height:18px;margin-top:-4px;background:var(--slate)}
.ty-m b{color:var(--ink);font-size:13px}
.ty-m.hot i{background:var(--signal);width:4px}
.ty-m.hot b{color:var(--signal)}
.ty-m.start{transform:none;align-items:flex-start}
.ty-m.end{transform:translateX(-100%);align-items:flex-end}
.ty-m.end i{align-self:flex-end}
.ty-m.up{top:auto;bottom:0;flex-direction:column-reverse}
.ty-m.up i{margin:0 0 -4px}
.ty-line{padding-top:60px}
@media (max-width:700px){.ty-m span{display:none}.ty-line{padding-bottom:44px}}

/* ---------- Set-up: a list of settings, each a row, in sections you can jump to ---------- */
.set-nav{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.set-nav a{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;background:var(--white);color:var(--ink);font-size:14px;font-weight:600;text-decoration:none;border:0!important;border-radius:0 10px 0 10px}
.set-nav a:hover{box-shadow:inset 0 0 0 2px var(--ink)}
.set-nav a:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.set-nav svg{color:var(--slate)}
.set-wrap{display:grid;gap:16px;max-width:980px}
.set-sec{padding:0!important;overflow:hidden;scroll-margin-top:90px}
.set-head{display:flex;gap:14px;align-items:flex-start;padding:22px 26px 6px}
.set-ico{flex:none;display:grid;place-items:center;width:40px;height:40px;background:var(--ink);color:var(--paper);border-radius:0 10px 0 10px}
.set-head h2{margin:2px 0 0;font-size:20px;font-weight:600;letter-spacing:-.01em;font-family:var(--sans);text-transform:none}
.set-head p{margin:4px 0 0;max-width:68ch;font-size:14px;line-height:1.5;color:var(--slate)}
.set-body{padding:6px 26px 8px}
.set-sub{margin:18px 0 0;padding-bottom:6px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--slate);border-bottom:1px solid var(--rule-soft)}
.set-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:10px 28px;align-items:start;padding:16px 0;border-bottom:1px solid var(--rule-soft)}
.set-row:last-child{border-bottom:0}
.set-say label{display:block;font-weight:600;font-size:15px}
.set-say span{display:block;margin-top:3px;font-size:13.5px;line-height:1.45;color:var(--slate)}
.set-do{min-width:0}
.set-do .input,.set-do textarea{width:100%}
.set-num{display:inline-flex;align-items:center;gap:10px}
.set-num .input{width:110px;font-variant-numeric:tabular-nums}
.set-num>span{font-size:14px;color:var(--slate)}
.set-pair{display:flex;flex-wrap:wrap;gap:12px}
.set-short{width:140px!important}
.set-foot{display:flex;justify-content:flex-end;padding:14px 26px;background:var(--paper-soft);border-top:1px solid var(--rule-soft)}
.set-sws{display:grid;gap:12px}
.set-tags{display:grid;gap:10px}
.set-tag{display:grid;grid-template-columns:minmax(110px,auto) minmax(0,1fr);gap:12px;align-items:center}
.set-tag>span{font-size:13.5px;color:var(--slate)}
.set-hours{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:10px 0;border-bottom:1px dashed var(--rule)}
.set-hours:last-of-type{border-bottom:0}
.cb-days{display:flex;flex-wrap:wrap;gap:4px}
.day-pill{position:relative;cursor:pointer}
.day-pill input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.day-pill span{display:grid;place-items:center;min-width:44px;height:36px;padding:0 8px;font-size:13.5px;font-weight:600;background:var(--paper);color:var(--ink);box-shadow:inset 0 -2px 0 var(--edge,var(--slate));border-radius:0 8px 0 8px}
.day-pill:hover span{background:var(--rule)}
.day-pill input:checked+span{background:var(--ink);color:var(--paper);box-shadow:none}
.day-pill input:focus-visible+span{outline:2.5px solid var(--signal);outline-offset:2px}
.set-time{display:inline-flex;align-items:center;gap:8px;color:var(--slate);font-size:14px}
.set-time .input{width:130px}
.set-shared{margin-top:4px}
@media (max-width:760px){.set-row{grid-template-columns:minmax(0,1fr)}.set-head,.set-body{padding-left:18px;padding-right:18px}.set-foot{padding:12px 18px}}

/* ---------- Project fields: read the list by its shapes; pick a type by its picture ---------- */
.fe-type{display:inline-flex;align-items:center;gap:7px;font-family:var(--sans);font-size:13px;letter-spacing:0;text-transform:none;color:var(--slate);background:none;padding:0;min-width:120px}
.fe-type svg{flex:none;color:var(--ink)}
.fe-flags{color:var(--slate)}
.fe-auto{display:inline-flex;align-items:center;gap:4px;color:var(--signal-text)}
.fe-auto svg{width:14px;height:14px}
.fe-kinds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.fe-kind{display:flex;align-items:center;gap:8px;padding:10px 11px;background:var(--paper);color:var(--ink);border:0;font:inherit;font-size:13.5px;font-weight:500;text-align:left;cursor:pointer;border-radius:0 9px 0 9px}
.fe-kind:hover{box-shadow:inset 0 0 0 2px var(--ink)}
.fe-kind.on{background:var(--ink);color:var(--paper)}
.fe-kind:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.fe-ed .label{font-family:var(--sans);text-transform:none;letter-spacing:0;font-size:14px;font-weight:600;color:var(--ink)}
@media (max-width:640px){.fe-kinds{grid-template-columns:repeat(2,minmax(0,1fr))}}
.set-do textarea{min-height:0}

/* ---------- People, calmer: plain labels, only what is filled in, a clear empty state ---------- */
.tm-kv{display:block;margin:12px 0 0}
.tm-kvr{display:grid;grid-template-columns:150px minmax(0,1fr);gap:14px;padding:11px 0;border-top:1px solid var(--rule-soft)}
.tm-kvr:first-child{border-top:0}
.tm-kv dt{font-family:var(--sans);font-size:14px;letter-spacing:0;text-transform:none;color:var(--slate);padding-top:0}
.tm-kv dd{font-size:15px}
.tm-kv:empty{display:none}
.tm-empty{display:flex;margin-top:12px;padding:18px;background:var(--paper);border-radius:0 12px 0 12px}
.tm-empty p{margin:0;max-width:52ch;font-size:14.5px;line-height:1.5;color:var(--slate)}
.tm-empty-i{display:grid;place-items:center;width:40px;height:40px;background:var(--white);color:var(--ink);border-radius:0 10px 0 10px}
@media (max-width:700px){.tm-kvr{grid-template-columns:1fr;gap:2px}}
.tm-empty{flex-direction:row;align-items:center;gap:14px}
.tm-empty-i{flex:none}
.tm-empty .btn{margin-left:auto}
.tm-two+.panel{margin-top:14px}
.tm-tpl{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px;margin-top:12px}
.tm-tpl-c{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:14px;background:var(--white);color:var(--ink);border:0;box-shadow:inset 0 0 0 1.5px var(--rule);font:inherit;text-align:left;cursor:pointer;border-radius:0 10px 0 10px}
.tm-tpl-c span{font-size:13px;color:var(--slate)}
.tm-tpl-c.fit{box-shadow:inset 0 0 0 2px var(--signal)}
.tm-tpl-c:hover{box-shadow:inset 0 0 0 2px var(--ink)}
.tm-tpl-c:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
@media (max-width:560px){.tm-empty{flex-wrap:wrap}.tm-empty .btn{margin-left:0}}


.pp-cam{position:absolute;right:-8px;bottom:-8px;display:grid;place-items:center;width:30px;height:30px;padding:0;border:0;background:var(--white);color:var(--ink);box-shadow:0 0 0 1.5px var(--rule);cursor:pointer;border-radius:0 8px 0 8px}
.pp-cam:hover{background:var(--ink);color:var(--paper)}
.pp-cam:focus-visible{outline:2px solid var(--signal);outline-offset:2px}

/* ---------- A person's page: their pass across the top, then what is next ---------- */
.pv{position:relative;background:var(--white);border-radius:0 22px 0 22px;overflow:hidden;margin:0 0 14px}
.pv-band{position:relative;height:112px;padding:18px 24px;background:var(--ink);color:var(--paper);overflow:hidden}
.pv.me .pv-band{background:var(--signal)}
.pv.off .pv-band{background:var(--slate)}
.pv-band .ps-art{inset:0 0 0 auto!important;width:60%!important;overflow:hidden;opacity:.6;-webkit-mask-image:linear-gradient(90deg,transparent,#000 30%);mask-image:linear-gradient(90deg,transparent,#000 30%)}
.pv-mark{position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:600;letter-spacing:.14em}
.pv-mark svg{width:18px;height:18px}
.pv-kind{position:absolute;z-index:1;right:18px;top:16px;padding:4px 10px;background:rgba(18,22,27,.45);font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;border-radius:0 7px 0 7px}
.pv.me .pv-kind{background:rgba(18,22,27,.3)}
.pv-body{display:flex;align-items:flex-start;gap:22px;padding:0 24px 22px;margin-top:-52px;position:relative;z-index:2}
.pv-face{position:relative;flex:none;line-height:0}
.pv-face .avatar{font-weight:600;border-radius:0 22px 0 22px;box-shadow:0 0 0 5px var(--white);background:var(--ink);color:var(--paper)}
.pv-face .pp-cam{position:absolute;right:-8px;bottom:-8px}
.pv-who{flex:1;min-width:0;padding-top:66px}
.pv-who h1{margin:0;font-size:30px;line-height:1.15}
.pv-sub{margin:6px 0 0;font-size:15px;color:var(--slate);display:flex;flex-wrap:wrap;align-items:baseline;column-gap:8px;row-gap:2px}
.pv-sub i{font-style:normal;color:var(--rule-strong)}
.pv-sub .mono{font-size:13.5px}
.pv-acts{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;padding-top:70px}
.pv-acts .btn{gap:8px}
.pv.small .pv-band{height:76px;padding-top:14px}
.pv.small .pv-kind{top:12px}
.pv.small .pv-body{margin-top:-34px;padding-bottom:18px}
.pv.small .pv-who{padding-top:44px}
.pv.small .pv-face .avatar{border-radius:0 18px 0 18px}
.pv.small .pv-who h1{font-size:24px}
.pv.small .pv-sub{font-size:14px;margin-top:3px}

/* The cards underneath share one look: a plain heading and a button on the right. */
.pv-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:0 0 14px;align-items:start}
.pv-row>:only-child{grid-column:1/-1}
.pv-top{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
.pv-card{background:var(--white);padding:22px 24px;border-radius:0 var(--r-card) 0 var(--r-card);min-width:0}
.pv-ch{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin:0 0 16px}
body.staff .main .pv-ch h2{margin:0;font-size:18px;font-weight:600;line-height:1.3}
.pv-say{margin:4px 0 0;font-size:14px;color:var(--slate)}
.pv-foot{margin:16px 0 0;font-size:14px}
.pv-foot a{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--rule-strong);text-underline-offset:3px}
.pv-foot a:hover{text-decoration-color:var(--ink)}
.pv-none{color:var(--slate)}
.pv-row>.pv-card,.pv-top>.pv-card{height:100%}

/* What is next. */
.pv-ring{position:relative;display:inline-grid;place-items:center;flex:none;background:none!important;color:var(--ink)!important;border-radius:0!important}
.pv-ring svg{position:absolute;inset:0;width:100%;height:100%}
.pv-ring circle{fill:none;stroke:var(--rule-soft);stroke-width:6}
.pv-ring circle.on{stroke:var(--signal);stroke-linecap:butt}
.pv-ring.ink circle.on{stroke:var(--ink)}
.pv-ring.ok circle.on{stroke:var(--status)}
.pv-ring b{position:relative;font-size:13.5px!important;font-weight:600;font-variant-numeric:tabular-nums}
.pv-todo{list-style:none;margin:0;padding:0}
.pv-todo li{display:flex;align-items:center;gap:14px;padding:13px 0;border-top:1px solid var(--rule-soft)}
.pv-ti{width:40px;height:40px;flex:none;display:grid;place-items:center;background:var(--signal-bg);color:var(--signal-text);border-radius:0 10px 0 10px}
.pv-tt{flex:1;min-width:0;display:grid;gap:2px}
.pv-tt b{font-size:15px;font-weight:600;line-height:1.3}
.pv-tt small{font-size:13.5px;color:var(--slate);line-height:1.4}
.pv-ta{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;flex:none;max-width:48%}
.pv-done{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 0;padding:14px 0 0;border-top:1px solid var(--rule-soft)}
.pv-done li{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 8px;font-size:12.5px;font-weight:500;background:var(--status-bg);color:var(--status);border-radius:0 7px 0 7px}
.pv-done svg{width:13px;height:13px}

/* Facts with pictures. */
.pv-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 22px}
.pv-facts.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.pv-f{display:flex;gap:12px;align-items:flex-start;min-width:0}
.pv-fi{width:34px;height:34px;flex:none;display:grid;place-items:center;background:var(--paper);color:var(--ink);border-radius:0 9px 0 9px}
.pv-fb{min-width:0;display:grid;gap:3px}
.pv-fl{font-size:12.5px;color:var(--slate);line-height:1.3}
.pv-fv{font-size:15px;font-weight:500;line-height:1.35;overflow-wrap:anywhere}
.pv-fv small{display:block;font-size:13px;font-weight:400;color:var(--slate);margin-top:2px}
.pv-fv .mono{font-size:13.5px}
.pv-fa{margin-top:6px;display:flex;gap:6px;flex-wrap:wrap}
.pv-pills{display:flex;flex-wrap:wrap;gap:6px}
.pv-pill{display:inline-flex;align-items:center;gap:7px;padding:3px 10px 3px 3px;background:var(--paper);color:var(--ink);font-size:14px;font-weight:500;text-decoration:none;border-radius:0 8px 0 8px;max-width:100%}
.pv-pill .avatar{border-radius:0 5px 0 5px;flex:none}
a.pv-pill:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.pv-tag{display:inline-block;padding:2px 9px;font-size:13px;font-weight:600;border-radius:0 6px 0 6px;vertical-align:1px}
.pv-tag.ok{background:var(--status-bg);color:var(--status)}
.pv-tag.warn{background:var(--signal-bg);color:var(--signal-text)}
.pv-manage{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;padding-top:16px;border-top:1px solid var(--rule-soft)}

/* Progress, as tiles that open each tab. */
.pv-tiles{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:14px;margin:0 0 14px}
.pv-tile{display:flex;align-items:center;gap:14px;padding:16px 18px;background:var(--white);color:var(--ink);text-decoration:none;border-radius:0 var(--r-card) 0 var(--r-card);transition:box-shadow .15s ease;min-width:0}
.pv-tile:hover{box-shadow:inset 0 0 0 2px var(--ink)}
.pv-tile>span:last-child{display:grid;gap:2px;min-width:0}
.pv-tile b{font-size:15px;font-weight:600}
.pv-tile small{font-size:13px;color:var(--slate)}
.pv-tile.warn small{color:var(--signal-text)}
.pv-plate{width:52px;height:52px;flex:none;display:grid;place-items:center;background:var(--paper);border-radius:0 13px 0 13px}

/* Lists: tasks and what is coming up. */
.pv-list{list-style:none;margin:0;padding:0}
.pv-list li{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 0;border-top:1px solid var(--rule-soft)}
.pv-list li:first-child{border-top:0;padding-top:0}
.pv-list li>a,.pv-list li>span:first-child{display:grid;gap:2px;min-width:0;color:var(--ink);text-decoration:none}
.pv-list li>a:hover b{text-decoration:underline;text-underline-offset:3px}
.pv-list b{font-size:15px;font-weight:500;line-height:1.35}
.pv-list small{font-size:13px;color:var(--slate)}
.pv-when{flex:none;font-size:13px;font-family:var(--mono);color:var(--slate)}
.pv-when.late{color:var(--signal)}

@media (max-width:1100px){.pv-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.pv-facts.three{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.pv-row,.pv-top{grid-template-columns:1fr}.pv-body{flex-wrap:wrap}.pv-acts{width:100%;justify-content:flex-start;padding-top:0}}
@media (max-width:600px){
  .pv-band{height:96px;padding:16px}.pv-kind{top:14px;right:14px}.pv-body{margin-top:-40px;padding:0 16px 18px}.pv-body{flex-direction:column;gap:12px}.pv-who{padding-top:0}.pv-who h1{font-size:24px}
  .pv-face .avatar{width:84px!important;height:84px!important;font-size:28px!important}
  .pv-card{padding:18px 16px}.pv-facts,.pv-facts.three,.pv-tiles{grid-template-columns:1fr}
  .pv-todo li{flex-wrap:wrap}.pv-ta{max-width:none;width:100%;justify-content:flex-start;padding-left:54px}
}

.pv-tile,.pv-pill,.pv-list li>a,.pv-foot a{border-bottom:0}

/* ---------- Tasks: everything to do, on every project ---------- */
.tl-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0 0 14px}
.tl-tile{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:14px;align-items:center;padding:16px 18px;background:var(--white);color:var(--ink);border:0;text-align:left;font:inherit;cursor:pointer;border-radius:0 var(--r-card) 0 var(--r-card)}
.tl-tile b{grid-row:1/3;font-size:30px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums}
.tl-tile span{font-size:15px;font-weight:600}
.tl-tile small{font-size:13px;color:var(--slate)}
.tl-tile:hover{box-shadow:inset 0 0 0 2px var(--ink)}
.tl-tile.on{background:var(--ink);color:var(--paper)}
.tl-tile.on small{color:var(--on-ink-dim)}
.tl-panel{padding:20px 24px}
.tl-add{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1.2fr) 140px 160px auto;gap:10px;margin:0 0 6px;padding-bottom:18px;border-bottom:1px solid var(--rule-soft)}
.tl-group{margin-top:18px}
body.staff .main .tl-group h2{margin:0 0 4px;font-size:13px;font-weight:600;font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--slate)}
body.staff .main .tl-group h2 span{margin-left:6px;color:var(--slate)}
body.staff .main .tl-group.late h2{color:var(--signal)}
.tl-row{grid-template-columns:20px minmax(0,1fr) 150px 80px}
.tl-group .tk-list .tl-row:first-child{border-top:0}
.tl-proj{display:block;margin-top:2px;font-size:13px;color:var(--slate);text-decoration:none;border:0}
.tl-proj:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.tl-none{font-size:13px;color:var(--slate)}
.tl-clear{display:flex;align-items:center;gap:10px;margin:18px 0 4px;color:var(--slate)}
@media (max-width:900px){.tl-add{grid-template-columns:1fr 1fr}.tl-add .input[name=title]{grid-column:1/-1}}
@media (max-width:600px){.tl-tiles{gap:8px}.tl-tile{grid-template-columns:1fr;padding:12px}.tl-tile b{grid-row:auto;font-size:24px;margin-bottom:4px}.tl-tile small{display:none}.tl-panel{padding:16px}.tl-row{grid-template-columns:20px minmax(0,1fr) auto}.tl-row .tk-who{display:none}}

/* ---------- Brand: a home page of chapters, then one chapter at a time ---------- */
.br.br-home-on{display:block}
.br.br-home-on .br-main{display:none}
.br.br-one{grid-template-columns:240px minmax(0,1fr);gap:16px}
.br.br-one .br-sec{display:none}
.br.br-one .br-sec.on{display:block}
.br.br-one .br-toc{grid-column:1;grid-row:1;padding:14px 10px}
.br.br-one .br-main{grid-column:2;grid-row:1}
.br-toc .br-back{display:block;margin:2px 0 8px;padding:6px 10px;color:var(--ink);font-weight:600;font-size:14px;border:0;text-decoration:none}
.br-toc .br-back:hover{background:var(--paper);border-radius:0 9px 0 9px}
body.staff .br-toc ol{margin:0;gap:2px}
body.staff .br-toc a:not(.br-back){display:flex;gap:10px;align-items:baseline;margin:0;padding:8px 10px;color:var(--ink);font-size:14px;border-radius:0 9px 0 9px}
body.staff .br-toc a .mono{font-size:11px;color:var(--slate);width:18px;flex:none}
body.staff .br-toc a.on{background:var(--ink);color:var(--paper)}
body.staff .br-toc a.on .mono{color:var(--tint)}
.br-pn{display:flex;justify-content:space-between;gap:16px;background:var(--white);padding:16px 24px;border-radius:0 var(--r-card) 0 var(--r-card)}
.br-pn a{display:grid;gap:2px;color:var(--ink);text-decoration:none;border:0}
.br-pn a span{font-weight:600;font-size:15px}
.br-pn a small{font-size:13px;color:var(--slate)}
.br-pn a.nx{text-align:right}
.br-pn a:hover span{text-decoration:underline;text-underline-offset:3px}

.br-hero{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:14px;margin:0 0 14px}
.br-home .br-cover{display:flex;flex-direction:column;justify-content:space-between;gap:24px;min-height:260px;padding:30px 34px;border-radius:0 var(--r-img) 0 var(--r-img)}
.br-home .br-cover .label{color:var(--paper);opacity:.85}
.br-home .br-desc{margin:0;font-size:17px}
.br-cover-meta{display:flex;gap:18px;margin:10px 0 0;font-family:var(--mono);font-size:12px;opacity:.85}
.br-grab{background:var(--white);padding:20px 22px;border-radius:0 var(--r-card) 0 var(--r-card)}
body.staff .main .br-grab h2{margin:0 0 8px;font-size:17px}
.br-g{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--rule-soft)}
.br-g:first-of-type{border-top:0}
.br-gi{width:40px;height:40px;flex:none;display:grid;place-items:center;background:var(--paper);color:var(--ink);border-radius:0 10px 0 10px}
.br-gi.br-aa{font-weight:600;font-size:15px}
.br-dot{display:block;width:18px;height:18px;border-radius:0 5px 0 5px}
.br-gt{flex:1;min-width:0;display:grid;gap:1px}
.br-gt b{font-size:14.5px}.br-gt small{font-size:12.5px;color:var(--slate)}
.br-ga{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.br-sw-btn{width:26px;height:26px;padding:0;border:0;cursor:pointer;border-radius:0 7px 0 7px;box-shadow:inset 0 0 0 1px rgba(18,22,27,.12)}
.br-sw-btn:hover{box-shadow:inset 0 0 0 2px var(--ink)}
.br-find{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--white);padding:12px 18px;margin:0 0 14px;border-radius:0 var(--r-card) 0 var(--r-card)}
.br-find .input{flex:1 1 320px}
.br-often{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.br-often .label{margin-right:4px}
body.staff .br-often .chip{text-decoration:none;border:0;padding:7px 12px;background:var(--paper);color:var(--ink);font-size:13px;font-weight:600;border-radius:0 8px 0 8px}
body.staff .br-often .chip:hover{background:var(--ink);color:var(--paper)}
.br-none{margin:0 0 14px;color:var(--slate)}
.br-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.br-card{display:flex;flex-direction:column;background:var(--white);color:var(--ink);text-decoration:none;border:0;border-radius:0 var(--r-card) 0 var(--r-card);overflow:hidden;transition:box-shadow .15s ease,transform .15s ease}
.br-card:hover{box-shadow:inset 0 0 0 2px var(--ink)}
.br-card:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.br-pv{position:relative;display:grid;place-items:center;height:118px;margin:8px 8px 0;background:var(--paper);border-radius:0 12px 0 12px;overflow:hidden}
.br-cb{display:grid;gap:3px;padding:12px 16px 16px}
.br-n{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--signal)}
.br-cb b{font-size:16px;font-weight:600}
.br-cb small{font-size:13px;color:var(--slate);line-height:1.45}
/* the small previews */
.br-pv-text{max-width:160px;text-align:center;font-weight:600;font-size:15px;line-height:1.3}
.br-pv-name{display:flex;gap:6px;font-family:var(--mono);font-size:15px}
.br-pv-name b{padding:6px 9px;background:var(--white);border-radius:0 7px 0 7px}
.br-pv-name b.on{background:var(--ink);color:var(--paper)}
.br-pv-mark{line-height:0;color:var(--ink)}
.br-pv-space{outline:1.5px dashed var(--signal);outline-offset:14px}
.br-pv-tilt{transform:rotate(-14deg)}
.br-pv-x{position:absolute;right:12px;top:8px;color:var(--signal);font-weight:600}
.br-pv-sw{display:flex;gap:6px}
.br-pv-sw i{display:block;border-radius:0 9px 0 9px;box-shadow:inset 0 0 0 1px rgba(18,22,27,.08)}
.br-pv-type b{font-size:42px;font-weight:600}
.br-pv-type span{margin-left:8px;font-family:var(--mono);font-size:20px;color:var(--slate)}
.br-pv-corner{width:110px;height:58px;background:var(--ink);border-radius:0 14px 0 14px}
.br-pv-draw{background:none;border:1.5px dashed var(--ink)}
.br-pv-photo{width:120px;height:70px;background:linear-gradient(135deg,var(--rule-strong),var(--rule-strong));border-radius:0 12px 0 12px}
.br-pv-quote{max-width:180px;text-align:center;font-size:14px;color:var(--body)}
.br-pv-doc{display:grid;gap:5px;align-content:start;width:68px;height:88px;padding:9px;background:var(--white);border-radius:0 8px 0 8px;box-shadow:0 2px 8px rgba(18,22,27,.08)}
.br-pv-doc i{display:block;height:3px;background:var(--rule)}
.br-pv-doc i:first-child{height:6px;width:22px;background:var(--ink)}
.br-pv-doc i:last-child{width:60%}
.br-pv-credit{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;background:var(--ink);color:var(--paper);font-size:11px;border-radius:0 9px 0 9px}
.br-pv-staff{display:flex;align-items:center;gap:10px}
.br-pv-staff b{padding:8px 12px;background:var(--ink);color:var(--paper);font-size:12px;border-radius:0 9px 0 9px}
.br-pv-ring{width:40px;height:40px;border-radius:50%;border:5px solid var(--signal);border-left-color:var(--rule)}
.br-pv-trust{font-size:13px;font-weight:600;color:var(--status);line-height:1.6}
/* the staff chapter's examples */
body.staff .br-demo-tiles{display:flex;flex-wrap:wrap;margin:0 0 4px}
body.staff .br-demo-tiles a{flex:0 0 auto}
.br-demo-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.br-demo-row .tag.status{background:var(--status-bg,#E6EFE7);color:var(--status,#1E6B3A)}
.br-demo-row .tag.signal{background:var(--signal);color:var(--paper)}
/* printing the whole guide */
@media print{.br.br-print .br-home,.br.br-print .br-toc,.br.br-print .br-pn{display:none!important}.br.br-print .br-main,.br.br-print .br-sec{display:block!important}.br.br-print{display:block!important}}
@media (max-width:1100px){.br-cards{grid-template-columns:repeat(3,minmax(0,1fr))}.br-hero{grid-template-columns:1fr}}
@media (max-width:900px){.br.br-one{grid-template-columns:1fr}.br.br-one .br-toc{display:none}.br.br-one .br-main{grid-column:1}.br-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.br-cards{grid-template-columns:1fr 1fr;gap:10px}.br-pv{height:90px}.br-home .br-cover{padding:24px;min-height:0}.br-g{flex-wrap:wrap}.br-ga{width:100%;justify-content:flex-start;padding-left:52px}.br-pn{flex-direction:column}.br-pn a.nx{text-align:left}}

/* Set-up → Projects → Fields: the tabs of a project's page along the top, and on the
   tab picked, its sections as blocks with their fields indented inside, then the
   built-in panels it holds. Everything moves by its handle. */
.fe-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.fe-tab{display:flex;align-items:center;background:var(--white);color:var(--ink);border-top-right-radius:12px;border-bottom-left-radius:12px;transition:background .12s}
.fe-tab>button{display:flex;flex-direction:column;align-items:flex-start;gap:1px;background:none;border:0;color:inherit;font:inherit;text-align:left}
.fe-tab b{font-weight:600;font-size:14.5px}
.fe-tab small{font-size:12px;color:var(--slate)}
.fe-tab:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.fe-tab.on{background:var(--ink);color:var(--paper)}
.fe-tab.on small{color:var(--on-ink-dim)}
.fe-tab.on .fe-grip{fill:var(--on-ink-dim)}
.fe-tab.fe-drop-in{box-shadow:inset 0 0 0 2px var(--signal)}
.fe-tab.fe-drop-left{box-shadow:inset 3px 0 0 var(--signal)}
.fe-tab.fe-drop-right{box-shadow:inset -3px 0 0 var(--signal)}
.fe-tab-add{display:inline-flex;align-items:center;gap:6px;background:none;border:1.5px dashed var(--rule);color:var(--slate);font:inherit;font-size:14px;min-height:52px;cursor:pointer;border-top-right-radius:12px;border-bottom-left-radius:12px}
.fe-tab-add:hover{border-color:var(--ink);color:var(--ink)}

.dz-grip{display:grid;place-items:center;width:28px;height:28px;flex:none;cursor:grab;touch-action:none;border-radius:6px}
.dz-grip:hover{background:var(--paper)}
.fe-tab .dz-grip:hover{background:transparent}
.dz-grip .fe-grip{cursor:grab}
.fe-ghost{position:fixed;left:0;top:0;z-index:1000;pointer-events:none;background:var(--white);box-shadow:0 12px 28px -10px rgba(18,22,27,.45);opacity:.96;margin:0!important}
.fe-dragging{opacity:.3}
body.fe-dragging-now,body.fe-dragging-now *{cursor:grabbing!important;user-select:none!important}
.fe-row,.fe-sec,.fe-part,.fe-tab{user-select:none}

.fe-list{padding:0 0 6px}
.fe-tabhead{display:flex;align-items:flex-end;gap:16px;padding:18px 20px 6px}
.fe-tabname{flex:1;min-width:0}
.fe-tabname .label{display:block;margin-bottom:6px}
.fe-tabname .input{width:100%}
.fe-link.danger{color:var(--slate);padding-bottom:12px}
.fe-link.danger:hover{color:var(--signal)}

.fe-group{margin:14px 16px 0;background:var(--paper-soft);border-top-right-radius:12px;border-bottom-left-radius:12px;padding:0 0 8px}
.fe-group+.fe-group{border-top:0}
.fe-sec{display:grid;gap:6px;align-items:center;padding:8px 14px 8px 6px;cursor:default}
.fe-secname{display:flex;align-items:center;gap:6px;min-width:0;color:var(--slate)}
.fe-sec-in{font:inherit;font-size:15px;font-weight:600;color:var(--ink);background:transparent;border:1.5px solid transparent;border-radius:6px;padding:5px 8px;cursor:text}
.fe-sec-in:hover{border-color:var(--rule)}
.fe-sec-in:focus{outline:0;border-color:var(--ink);background:var(--white)}
.fe-count{font-size:12.5px;color:var(--slate);white-space:nowrap}
.fe-sec.fe-drop-in{box-shadow:inset 0 -2px 0 var(--signal)}
.fe-group.fe-drop-before{box-shadow:0 -3px 0 var(--signal)}
.fe-group.fe-drop-after{box-shadow:0 3px 0 var(--signal)}
/* The fields sit in from their heading, on a line that joins them to it. */
.fe-sec-body{margin:0 12px 0 34px;border-left:2px solid var(--rule);padding-left:10px;display:flex;flex-direction:column;gap:4px}
.fe-sec-body .fe-row{grid-template-columns:28px minmax(0,1fr) auto auto;gap:10px;padding:7px 12px 7px 4px;background:var(--white);border:0;border-top-right-radius:8px;border-bottom-left-radius:8px}
.fe-sec-body .fe-row:hover{box-shadow:inset 0 0 0 1.5px var(--rule)}
.fe-sec-body .fe-row.on{background:var(--signal-bg);box-shadow:inset 3px 0 0 var(--signal)}
.fe-sec-body .fe-row.fe-drop-before{box-shadow:0 -2px 0 var(--signal)}
.fe-sec-body .fe-row.fe-drop-after{box-shadow:0 2px 0 var(--signal)}
.fe-sec-body .fe-empty{margin:0;padding:12px;border:1.5px dashed var(--rule);font-size:13.5px}
.fe-empty.fe-drop-in{border-color:var(--signal);color:var(--signal)}
.fe-add{border-top:0;padding:14px 16px 6px}

.fe-part{display:flex;align-items:center;gap:6px;padding:6px 10px 6px 2px;background:var(--paper);font-size:14.5px;border-top-right-radius:8px;border-bottom-left-radius:8px}
.fe-part.fe-drop-before{box-shadow:0 -2px 0 var(--signal)}
.fe-part.fe-drop-after{box-shadow:0 2px 0 var(--signal)}
.fe-opt{grid-template-columns:28px minmax(0,1fr) 24px}
.fe-opt.fe-drop-before{box-shadow:0 -2px 0 var(--signal)}
.fe-opt.fe-drop-after{box-shadow:0 2px 0 var(--signal)}
#st-list .fe-row{grid-template-columns:28px minmax(0,1fr) auto auto;padding-left:14px}
#st-list .fe-sec{grid-template-columns:28px auto 1fr auto}
.fe-prev-tab{margin:22px 0 8px;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate)}
.fe-prev-tab:first-child{margin-top:0}
@media (max-width:640px){.fe-sec-body{margin-left:16px}.fe-sec-body .fe-row{grid-template-columns:28px minmax(0,1fr)}.fe-group{margin-left:10px;margin-right:10px}}
body.fe-dragging-now #fe-tabs-wrap{position:sticky;top:8px;z-index:30;background:var(--paper);padding:8px 0 0;margin-top:-8px}
.fe-sec-in{flex:0 1 auto;field-sizing:content;min-width:4ch;max-width:100%}
.fe-sec>.fe-count,.fe-sec>span.fe-count{font-family:var(--sans);font-size:12.5px;letter-spacing:0;text-transform:none}

/* A tab is picked up by any part of it; the button at the end of the row adds one. */
.fe-tab{padding-left:0;cursor:grab}
.fe-tab>button{padding:10px 18px;cursor:inherit}
.fe-tab-add{justify-content:center;width:52px;padding:0}
.fe-row,.fe-sec,.fe-part,.fe-tab,.fe-tab *,.fe-opt .dz-grip,.dz-grip{-webkit-user-select:none;user-select:none}
.fe-tabs{-webkit-user-select:none;user-select:none}
.fe-tab{touch-action:none}

/* ---------- Set-up, Projects, Fields: panels in the same list as sections ---------- */
/* A built-in panel is a dark block: it can be moved and cannot be deleted, so it looks
   nothing like a field. */
.fe-panel{display:flex;align-items:center;gap:10px;margin:10px 12px;padding:8px 14px 8px 6px;background:var(--ink);color:var(--paper);border-top-right-radius:12px;border-bottom-left-radius:12px;-webkit-user-select:none;user-select:none}
.fe-panel b{font-size:15px;font-weight:600}
.fe-panel small{font-size:12.5px;opacity:.75}
.fe-panel .fe-grip{fill:currentColor;opacity:.6}
.fe-panel .dz-grip:hover{background:rgba(255,255,255,.14)}
.fe-ptag{margin-left:auto;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;border:1px solid currentColor;padding:1px 7px;opacity:.8;border-top-right-radius:5px;border-bottom-left-radius:5px}
.fe-panel[data-action]{cursor:pointer}
.fe-panel.on{box-shadow:inset 4px 0 0 var(--signal)}
.fe-panel:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.fe-panel.fe-drop-before,.fe-group.fe-drop-before{box-shadow:0 -3px 0 var(--signal)}
.fe-panel.fe-drop-after,.fe-group.fe-drop-after{box-shadow:0 3px 0 var(--signal)}
.fe-panel.fe-dragging,.fe-group.fe-dragging{opacity:.35}
.fe-ghost.fe-panel{margin:0}
/* A section folds away. */
.fe-sec{grid-template-columns:28px 24px minmax(0,1fr) auto auto}
.fe-fold{display:grid;place-items:center;width:24px;height:24px;background:none;border:0;color:var(--slate);cursor:pointer;border-radius:6px;padding:0}
.fe-fold:hover{background:var(--paper);color:var(--ink)}
.fe-fold .fe-chev{transition:transform .15s}
.fe-group.shut .fe-fold .fe-chev{transform:rotate(-90deg)}
.fe-group.shut .fe-sec{padding-bottom:14px}
.fe-sec .fe-x{justify-self:end}
.fe-tabhead .fe-link{margin-bottom:9px}
/* The tab something was just dropped on. */
@keyframes fe-tab-flash{0%,60%{box-shadow:inset 0 0 0 2px var(--signal);background:var(--signal-bg)}100%{box-shadow:inset 0 0 0 2px transparent}}
.fe-tab-flash{animation:fe-tab-flash 1.2s ease-out}
@media (prefers-reduced-motion:reduce){.fe-tab-flash{animation:none;box-shadow:inset 0 0 0 2px var(--signal)}.fe-fold .fe-chev{transition:none}}
/* Where an automatic field fills in from, on hover or focus. */
.fe-info{position:relative;display:inline-grid;place-items:center;width:15px;height:15px;margin-left:5px;border:1px solid currentColor;border-radius:50%;font-family:var(--sans);font-size:10px;font-weight:600;font-style:normal;line-height:1;cursor:help}
.fe-info:focus-visible{outline:2px solid var(--signal);outline-offset:2px}

/* ---------- a project's page: panels and sections in the order set in Set-up ---------- */
.pj-body>*+*{margin-top:14px}
.pj-block>.panel:last-child{margin-bottom:0!important}
/* A section of fields: a panel that folds away. */
.jobsec-p{padding-top:0;padding-bottom:0}
.jobsec-p>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0;padding:16px 0;border:0}
.jobsec-p>summary::-webkit-details-marker{display:none}
.jobsec-p>summary h3{margin:0;display:flex;align-items:center;gap:8px}
.jobsec-p>summary h3::before{content:'';width:8px;height:8px;border-right:2px solid var(--slate);border-bottom:2px solid var(--slate);transform:rotate(-45deg);transition:transform .15s;flex:none;margin-right:2px}
.jobsec-p[open]>summary h3::before{transform:rotate(45deg) translate(-2px,-2px)}
.jobsec-p[open]>summary{border-bottom:1px solid var(--rule)}
.jobsec-p.waiting[open]>summary{border-bottom-color:var(--signal)}
.jobsec-p>summary:focus-visible{outline:2px solid var(--signal);outline-offset:4px}
@media (prefers-reduced-motion:reduce){.jobsec-p>summary h3::before{transition:none}}
/* Several files against one field. */
.filecell{flex-direction:column;align-items:flex-end}
.fileone{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
/* Calls, at the top of the page. */
.pj-calls{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin:-6px 0 16px;padding:10px 16px;background:var(--white);border-top-right-radius:var(--r-card);border-bottom-left-radius:var(--r-card)}
.pj-calls-next{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;margin-right:auto}
.pj-calls-all{flex-basis:auto}
.pj-calls-all[open]{flex-basis:100%}
.pj-calls-all>summary{list-style:none;cursor:pointer;font-size:14px}
.pj-calls-all>summary::-webkit-details-marker{display:none}
.pj-calls-all .tbl{margin-top:8px}
/* Enquiry details. */
.enq-replied{display:inline-flex;align-items:center;gap:5px;font-size:14px;font-weight:600;color:var(--status)}
/* Days: more bars than ten. */
.wk-bars{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
.wk-bars.many{gap:3px}
.wk-bars.many .wk-l{font-size:10px}
/* Payments suggested for invoices. */
.pay-hint{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 14px;margin-top:8px;padding:9px 12px;background:var(--signal-bg);font-size:14px;border-top-right-radius:8px;border-bottom-left-radius:8px}
.pay-differs{display:inline-block;margin-left:8px;font-weight:600;color:var(--signal-text)}
.pay-over{font-weight:600;color:var(--signal-text)}
.pay-note{margin:6px 0 0;font-size:13.5px;color:var(--slate)}
.tx-hint td{padding-top:0!important;border-top:0!important}
.tx-hint .pay-hint{margin-top:0}
.list .inv-li{display:block}
.inv-li-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.jobsec-p[open]{padding-bottom:8px}
.jobsec-p>.slots-table{margin:0}
.jobsec-p>.slots-table tr:last-child td{border-bottom:0}

/* ---------- steps inside a task: Before launch and a project's Tasks panels ---------- */
.st-prog{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--slate)}
.st-bar{display:inline-flex;gap:3px}
.st-bar i{display:block;width:18px;height:6px;background:var(--rule)}
.st-bar i.d{background:var(--status)}
.st-link{background:none;border:0;padding:0;font:inherit;font-size:13px;color:var(--slate);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.st-link:hover{color:var(--ink)}
.st-link:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.st-list{list-style:none;margin:12px 0 2px;padding:0 0 0 14px;border-left:2px solid var(--rule);display:grid;gap:3px;max-width:680px}
.st-list li{display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:10px;align-items:center;padding:7px 10px;background:var(--paper-soft);font-size:14.5px;border-top-right-radius:8px;border-bottom-left-radius:8px}
.st-list input[type=checkbox]{width:16px;height:16px;accent-color:var(--ink);cursor:pointer;margin:0}
.st-t{background:none;border:0;padding:0;font:inherit;color:var(--ink);text-align:left;min-width:0;overflow-wrap:anywhere}
button.st-t{cursor:pointer}
button.st-t:hover{color:var(--signal)}
.st-list li.done .st-t{color:var(--slate);text-decoration:line-through}
.st-who{font-size:12.5px;color:var(--slate);white-space:nowrap}
.st-list li.st-new{display:block;background:none;padding:2px 0 0}
.st-add .input{width:100%;min-width:0}
.todo-meta{flex-wrap:wrap}
.todo-tools{display:inline-flex;align-items:center;gap:6px}
.st-ring{display:inline-grid;margin-right:6px}
/* In a project's Tasks panel the steps sit under the task, across the row. */
.tk-steps-at{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:3px}
.tk-row>.st-list{grid-column:2/-1;margin-top:0}

/* Seven or more tabs in a row (Money): tighter, and without the icon box until the window is wide. */
.hub-nav.many{gap:8px}
.hub-nav.many a{gap:8px;padding:12px 10px;font-size:14.5px}
.hub-nav.many .hub-i{width:30px;height:30px}
@media (max-width:1560px){.hub-nav.many .hub-i{display:none}.hub-nav.many a{justify-content:center;padding:14px 8px}}
@media (max-width:1240px){.hub-nav.many a{font-size:13px;padding:13px 6px}}

/* ---------- checking a payslip: the payslip on the left, what was found on the right ---------- */
dialog:has(.ps-check){width:min(1180px,96vw);max-width:96vw}
.ps-two{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);gap:20px;align-items:start}
.ps-view{background:var(--paper);max-height:72vh;overflow:auto;padding:10px;border-top-right-radius:12px;border-bottom-left-radius:12px}
.ps-view img{display:block;width:100%;height:auto;background:#fff}
.ps-form{display:grid;gap:12px}
.ps-say{margin:0;font-size:14.5px;font-weight:600}
.ps-f{display:grid;gap:5px}
.ps-f .input{width:100%}
.ps-f.unsure .input{box-shadow:inset 0 0 0 2px var(--signal);background:var(--signal-bg)}
.ps-flag{font-size:12.5px;color:var(--signal-text);font-weight:600}
@media (max-width:820px){.ps-two{grid-template-columns:1fr}.ps-view{max-height:46vh}}

/* Back, in the top bar, on a page opened from another. */
.top-back{display:inline-flex;align-items:center;gap:6px;flex:none;background:var(--paper);border:0;color:var(--ink);font:inherit;font-size:13.5px;font-weight:600;padding:7px 12px 7px 9px;cursor:pointer;border-top-right-radius:var(--r-btn);border-bottom-left-radius:var(--r-btn)}
.top-back:hover{box-shadow:inset 0 0 0 2px var(--ink)}
.top-back:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
@media (max-width:900px){.top-back{order:1;padding:7px 9px}.top-back span{display:none}}

/* The questionnaire on paper: only ever seen in print. */
.qn-sheet{display:none}
@media print{
  body.qn-printing>*:not(#qn-sheet){display:none!important}
  body.qn-printing{background:#fff}
  body.qn-printing .qn-sheet{display:block;color:#12161C;font-size:12.5px;line-height:1.45}
  .qn-sheet .tm-paper-mark{margin-bottom:22px}
  .qn-sheet h1{font-size:26px;font-weight:600;letter-spacing:0;text-transform:none;margin:0 0 18px}
  .qn-sheet h2{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;margin:26px 0 4px;padding-bottom:6px;border-bottom:2px solid #12161C;break-after:avoid}
  .qn-sheet h3{font-size:14px;font-weight:600;letter-spacing:0;text-transform:none;margin:0 0 8px}
  .qn-sheet h3 small{font-weight:400;font-size:11.5px;color:#5B6470;margin-left:6px}
  .qs-q{padding:14px 0 4px;break-inside:avoid}
  .qs-top{display:grid;grid-template-columns:2fr 1fr;gap:0 28px;align-items:end}
  .qn-sheet .qs-line{display:flex;align-items:flex-end;gap:10px;margin:0 0 12px;min-height:24px;max-width:none}
  .qs-line span{flex:none;color:#5B6470}
  .qs-line i{flex:1;border-bottom:1px solid #12161C;height:20px}
  .qs-opts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:7px 28px}
  .qs-opts li{display:flex;align-items:flex-start;gap:9px}
  .qs-opts b{flex:none;width:13px;height:13px;border:1.5px solid #12161C;border-radius:50%;margin-top:2px}
  .qs-opts.many b{border-radius:0}
  .qs-write i{display:block;border-bottom:1px solid #12161C;height:28px}
  .qn-sheet{page:qn}
  @page qn{margin:18mm 16mm}
}

/* ---------- Skip to content ----------
   The first thing the Tab key reaches, as on the public pages: off the screen until it
   holds the keyboard, then in the top corner. White, because the menu behind it is dark.
   The page it jumps to takes the keyboard without a line drawn round the whole of it. */
body.staff .skip{position:absolute;left:-999px;top:8px;z-index:1000;background:var(--white);color:var(--ink);padding:10px 16px;border:0}
body.staff .skip:focus{left:8px}
body.staff #view:focus{outline:0}

/* ---------- Review pass: reach, contrast, print ---------- */
/* The search box shows where the keyboard is: the field has no outline of its own. */
.fd-q{border-top-right-radius:var(--r-card)}
.fd-q:focus-within{box-shadow:inset 0 0 0 2.5px var(--signal)}
/* A project's head holds a menu (More), which opens below it: nothing is cut off there. */
.pj-head{overflow:visible}
/* Slate on the rule grey falls just short of readable (4.4:1), so words on it are a shade darker. */
.page-head .seg-mini a,.page-head .seg-mini button,#view .board .col:not(.is-empty) .col-sum{color:#565E6A}
.page-head .seg-mini a[aria-pressed="true"],.page-head .seg-mini button[aria-pressed="true"]{color:var(--ink)}
/* The month's arrows keep their size on the narrowest phones; the month's name gives way. */
.dw-mh .ib{flex:none}
@media (max-width:430px){.dw-mh h2{min-width:0;flex:1 1 auto;font-size:16px}}
/* A finger needs more to press than a pointer does. Only where the pointer is a finger,
   so nothing changes on a computer: buttons and boxes are at least 40px tall, small
   square buttons 40px each way, and a link standing on its own is padded out to match
   (padding on a line of text adds to what can be pressed, not to the height of the line). */
@media (pointer:coarse){
  body.staff .btn.sm,body.staff .chip,body.staff .boxtab,.seg-mini a,.seg-mini button,.menu-btn,.find-btn,.top-back,.top-menu>summary,.tm-nav a,.mn-item,.dq,.hm-ev a,.m-filed,.pv-pill,.sf-p,.sn-zoom button,.hb-rel a,.dash-menu-list a,.dash-menu-list button,.tk-open,.todo-title,.sw-host,.fe-sec-in,body.staff .input.sm,body.staff select.input,.hb-find input,.qn-q,.qn-sub,.qn-secname,.tr-toc a,.sp-link,.fe-link,.st-link{min-height:40px}
  .seg-mini a,.seg-mini button,.tm-nav a,.pv-pill,.sf-p,.hb-rel a,.m-filed,.sw-host,.sp-link,.fe-link,.st-link,.tk-open,.todo-title{display:inline-flex;align-items:center}
  .fe-x,.tm-x,.post-file-x,.sw-edit,.cr-z,.ct-act,.dw-mh .ib,.m-act,.m-back,.qt-del,.todo-tools .btn.sm,.pp-cam,.cal-tool,.cal-arrow,.fe-fold,.qn-grip,.an-chip button,.br-sw-btn,.ls-btn,.sp-add,.find-btn,.top-back,.tk-row .btn.sm,td.actions .btn.sm,.qn-top>.btn,.qn-a>.btn,.qn-b>.btn,.qn-p>.btn{min-width:40px;min-height:40px}
  .todo-tick{min-width:40px;height:40px;justify-content:center}
  .tk-box,.st-list input[type=checkbox],.mail-list .tick input,.todo-tick input{width:24px;height:24px}
  .tk-row{grid-template-columns:24px minmax(0,1fr) auto}
  .st-list li{grid-template-columns:24px minmax(0,1fr) auto}
  #view td>a,#view th>a,#view .list a,.hm-link,.hm-more a,.pv-foot a,.an-open,.msg-tools a,.qt-client,.tr-kt a,.linky,.linkish,.sw-client a,.dw-bars a,.tl-proj{padding-block:11px}
}
/* On a phone a step's words keep the width of the row, and whose it is goes on a line
   under them. Side by side the name took all of it and the words stood one letter to a line. */
@media (max-width:560px){
  .st-list li{grid-template-columns:18px minmax(0,1fr)}
  .st-list li>.st-who{grid-column:2;white-space:normal}
  .st-list li>span:empty{display:none}
}
@media (max-width:560px) and (pointer:coarse){.st-list li{grid-template-columns:24px minmax(0,1fr)}}
/* On paper: only the page. Nothing that floats over it, and nothing left faint because
   it had not yet scrolled into view. */
@media print{
  html:has(body.staff),body.staff{background:#fff}
  .toast,.skip,.nt-offer,.ch-ring,.fd-scrim,.cr-scrim,.cal-undo,.send-undo,.w-tip,.an-tip,.hub-nav,.hub-sub{display:none!important}
  .mo-below{opacity:1!important;transform:none!important}
  .invoice-sheet{break-inside:auto}
  .invoice-sheet .tbl tr{break-inside:avoid}
}

/* ---------- Money: Bank and Year (app-books.js) ----------
   Bank is one queue: a line to answer is a row of date, who, amount and its answers; a
   line already sorted is a quieter row with what it became and Change. Year is the tax
   year on one page: a sentence, the four figures, what is coming, and a card for each
   part of the books. Panels stack 18px apart, as everywhere else in the staff area. */
.bk-lead,.bk-panel,.yr-lead,.yr-dates,.yr-trips{margin-bottom:18px}
.bk-big{font-size:24px;font-weight:600;line-height:1.3;letter-spacing:-.01em;margin:0 0 8px;max-width:34ch}
.bk-lead .note,.yr-lead .note{margin:0;max-width:72ch}
.bk-row,.bk-done{display:grid;grid-template-columns:72px minmax(0,1fr) 104px auto;gap:16px;align-items:center;border-top:1px solid var(--rule)}
.bk-row{padding:14px 0}
.bk-done{padding:10px 0;font-size:14px}
.bk-panel h3+.bk-row,.bk-panel h3+.bk-done{border-top:0;padding-top:4px}
.bk-d{font-family:var(--mono);font-size:13px;color:var(--slate);white-space:nowrap}
.bk-w{min-width:0}
.bk-w b{display:block;font-weight:600}
.bk-w>span{display:block;font-size:13px;color:var(--slate);overflow-wrap:anywhere}
.bk-a{font-family:var(--mono);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.bk-ask{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.bk-done{grid-template-columns:72px minmax(0,1fr) 104px minmax(120px,auto) 64px}
.bk-said{color:var(--status);white-space:nowrap;text-align:right}
.bk-said::before{content:"✓ ";}
.bk-chg{text-align:right;font-size:13px}
.bk-more{margin:12px 0 0}
/* Bandroom's money in the books: a small brass tag, and on the Bank page a button that marks a
   cost as Bandroom's before its heading is pressed. Brass and Bandroom's ink, as its own look has them. */
.tag.brass,body.staff .main .tag.brass{background:#FFC21F;color:#111311}
.bk-br{box-shadow:inset 0 0 0 1px var(--rule);background:var(--white);color:var(--ink);min-width:112px;text-align:center;align-self:stretch}
.bk-br.on{background:#FFC21F;color:#111311;box-shadow:none}
.bk-br.on::before{content:"✓ "}
.yr-lead{display:flex;justify-content:space-between;align-items:center;gap:24px}
.yr-lead .btn{flex:none}
.yr-when{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 24px}
.yr-when b{display:block;font-weight:600}
.yr-when span{display:block;font-size:13px;color:var(--slate);margin-top:2px}
.yr-trip{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 0;border-top:1px solid var(--rule)}
.yr-trips h3+.yr-trip{border-top:0;padding-top:4px}
.yr-trip b{display:block;font-weight:600}
.yr-trip span span{display:block;font-size:13px;color:var(--slate)}
.yr-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.yr-card{display:flex;justify-content:space-between;align-items:center;gap:16px;background:var(--white);padding:18px 20px;border-bottom-left-radius:var(--r-card);border-top-right-radius:var(--r-card);color:var(--ink);border:0;text-decoration:none}
a.yr-card:hover b{color:var(--signal)}
.yr-card b{display:block;font-weight:600}
.yr-card>span>span{display:block;font-size:13px;color:var(--slate);margin-top:2px}
.yr-tag{flex:none;font-size:12px;padding:4px 10px;border-bottom-left-radius:var(--r-tag);border-top-right-radius:var(--r-tag);background:var(--status-bg);color:var(--status);white-space:nowrap}
.yr-tag.o{background:var(--signal-bg);color:var(--signal-text)}
.yr-foot{margin:16px 0 0}
@media (max-width:900px){
  .bk-row{grid-template-columns:64px minmax(0,1fr) auto}
  .bk-ask{grid-column:1/-1;justify-content:flex-start}
  .bk-done{grid-template-columns:64px minmax(0,1fr) auto}
  .bk-said{grid-column:2;text-align:left}
  .bk-chg{grid-column:3}
  .yr-lead{flex-direction:column;align-items:flex-start}
  .yr-when,.yr-grid{grid-template-columns:minmax(0,1fr)}
  .yr-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- Social (app-word.js, app-social.js) ----------
   The list: a sentence on what goes out next, then the weeks ahead as rows, each with
   its day, a thumbnail, what it is and where it has got to. Suggestions sit in the
   empty weeks with a dashed thumbnail. The post: the words on the left, the picture on
   the right, and one bar along the foot. */
.sx-lead,.sx-list{margin-bottom:18px}
.sx-lead{display:flex;justify-content:space-between;align-items:center;gap:24px}
.sx-lead .note{margin:0;max-width:72ch}
.sx-lead .btn{flex:none}
.sx-big{font-size:24px;font-weight:600;line-height:1.3;letter-spacing:-.01em;margin:0 0 8px;max-width:36ch}
.sx-row{display:grid;grid-template-columns:96px 64px minmax(0,1fr) auto auto;gap:18px;align-items:center;padding:14px 0;border-top:1px solid var(--rule)}
.sx-list h3+.sx-row{border-top:0;padding-top:4px}
.sx-row[draggable=true]{cursor:grab}
.sx-row.dragging{opacity:.4}
.sx-row.over{box-shadow:inset 0 2px 0 var(--signal)}
.sx-when{font-family:var(--mono);font-size:13px;color:var(--slate);line-height:1.4}
.sx-when b{display:block;color:var(--ink);font-family:var(--sans);font-size:14px;font-weight:600}
.sx-thl{border:0;display:block}
.sx-th{display:block;width:64px;height:64px;overflow:hidden;padding:8px;font-size:8px;font-weight:700;letter-spacing:.06em;line-height:1.25;text-transform:uppercase;color:var(--paper);border-bottom-left-radius:8px;border-top-right-radius:8px}
.sx-th.light{color:var(--ink);box-shadow:inset 0 0 0 1px var(--rule)}
.sx-th.pic{padding:0}
.sx-th.pic img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.sx-th.ghost{background:none;box-shadow:inset 0 0 0 1.5px var(--rule-strong);color:var(--slate);display:grid;place-items:center;font-size:20px;font-weight:400}
.sx-w{min-width:0;border:0;color:var(--ink)}
a.sx-w:hover b{color:var(--signal)}
.sx-w b{display:block;font-weight:600;overflow-wrap:anywhere}
.sx-w span{display:block;font-size:13px;color:var(--slate);margin-top:2px}
.sx-row.sug .sx-w b{font-weight:500}
.sx-pill{font-size:12px;padding:4px 10px;border-bottom-left-radius:var(--r-tag);border-top-right-radius:var(--r-tag);white-space:nowrap;background:var(--status-bg);color:var(--status)}
.sx-pill.o{background:var(--signal-bg);color:var(--signal-text)}
.sx-pill.g{background:var(--paper);color:var(--slate)}
.sx-act{display:flex;gap:8px;justify-content:flex-end}
.sx-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:14px 0 0;font-size:13px;color:var(--slate)}
.sx-post{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,440px);gap:18px;align-items:start}
.sx-left .field+.field,.sx-left .field+.sx-two,.sx-left .sx-two .field{margin-top:18px}
.sx-left .sx-two .field{margin-top:0}
.sx-left>.sx-two{margin-top:18px}
.sx-left label,.sx-right label{display:block;font-weight:600;font-size:14px;margin-bottom:8px}
.sx-opt{font-weight:400;color:var(--slate)}
.sx-left textarea{width:100%;resize:vertical}
.sx-ok{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-top:8px}
.sx-ok .voice{margin:0!important;font-size:13px}
.sx-ok em{font-style:normal;font-family:var(--mono);font-size:12px;color:var(--slate);white-space:nowrap}
.sx-note{font-size:13px;color:var(--slate);margin:10px 0 0;line-height:1.5}
.sx-chips{display:flex;gap:8px;flex-wrap:wrap}
.sx-chip{border:0;cursor:pointer;padding:10px 16px;min-height:44px;font:inherit;font-size:14px;background:var(--paper);color:var(--ink);border-bottom-left-radius:10px;border-top-right-radius:10px}
.sx-chip:hover{background:var(--rule)}
.sx-chip.on{background:var(--ink);color:var(--paper)}
.sx-own{margin-top:14px}
.sx-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.sx-two .input{width:100%;min-width:0}
.sx-right .pk-canvas canvas{max-height:min(56vh,440px)}
.sx-looks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 8px;margin-top:16px}
.sx-look{border:0;background:none;padding:0;cursor:pointer;display:grid;gap:4px;justify-items:center}
.sx-look .pk-mini{width:100%;box-shadow:inset 0 0 0 1.5px transparent}
.sx-look.on .pk-mini{box-shadow:inset 0 0 0 2px var(--ink)}
.sx-look:hover .pk-mini{box-shadow:inset 0 0 0 1.5px var(--rule-strong)}
.sx-look-n{font-size:11.5px;line-height:1.2;color:var(--slate);text-align:center}
.sx-look.on .sx-look-n{color:var(--ink);font-weight:600}
.sx-grounds{display:flex;gap:8px;margin-top:14px}
.sx-more{margin-top:14px;border-top:1px solid var(--rule);padding-top:12px}
.sx-more>summary{cursor:pointer;font-size:14px;font-weight:600;list-style:none;min-height:32px;display:flex;align-items:center}
.sx-more>summary::before{content:"+";display:inline-block;width:18px;color:var(--slate)}
.sx-more[open]>summary::before{content:"−"}
.sx-more .field{margin-top:12px}
.sx-more .input,.sx-more textarea{background:var(--paper)}
.sx-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:18px}
.sx-bar .pk-saved{flex:1;text-align:center}
.sx-del{color:var(--slate)}
.sx-go{list-style:none;margin:16px 0 0;padding:0}
.sx-go li{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 0;border-top:1px solid var(--rule)}
.sx-go li:first-child{border-top:0}
.sx-go b{display:block}
.sx-go small{display:block;font-size:13px;color:var(--slate)}
@media (max-width:900px){
  .sx-lead{flex-direction:column;align-items:flex-start}
  .sx-row{grid-template-columns:56px minmax(0,1fr);gap:6px 14px;align-items:start}
  .sx-row .sx-when{grid-column:1/-1;display:flex;gap:8px;align-items:baseline}
  .sx-row .sx-when b{display:inline}
  .sx-row .sx-thl,.sx-row>.sx-th{grid-row:span 2}
  .sx-th{width:56px;height:56px}
  .sx-row .sx-pill{justify-self:start}
  .sx-row .sx-pill.g{display:none}
  .sx-row .sx-act{grid-column:1/-1;justify-content:flex-start;margin-top:6px}
  .sx-row .sx-act:empty{display:none}
  .sx-left>.sx-two{grid-template-columns:minmax(0,1fr)}
  .sx-post{grid-template-columns:minmax(0,1fr)}
  .sx-right{order:-1}
  .sx-bar{flex-wrap:wrap}
  .sx-bar .pk-saved{order:3;flex-basis:100%}
}

/* ---------- Phones (700px and under) ----------
   One layer over everything above, so a phone reads the same way on every page:
   - one slim bar along the top: the menu, the page's name, search, New and you;
   - the page's name once, without its picture or the line under it;
   - a page's tabs as a slim row of words, fading at the edges where there are more;
   - a bar along the foot for the five places most used, within reach of a thumb;
   - every press at least 44px tall, and nothing read smaller than 12px;
   - rows whose buttons sat beside the words put the buttons under them instead;
   - the board as a list of stages, empty ones folded to a line. */
.tabbar{display:none}
@media (max-width:700px){
  body.staff{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  /* the bar along the top */
  .topbar{min-height:56px;padding:6px 64px 6px 6px!important;gap:2px;margin-bottom:14px}
  .menu-btn{display:inline-grid!important;place-items:center;width:44px;height:44px;padding:0!important;font-size:0!important;background:none!important;color:var(--ink);flex:none}
  .menu-btn::before{content:"";width:20px;height:14px;background:linear-gradient(currentColor,currentColor) 0 0/100% 2px no-repeat,linear-gradient(currentColor,currentColor) 0 50%/100% 2px no-repeat,linear-gradient(currentColor,currentColor) 0 100%/100% 2px no-repeat}
  .topbar .top-back{order:0;width:44px;height:44px;padding:0;justify-content:center;flex:none}
  .topbar .top-back span{display:none}
  body.staff .topbar #crumb{order:1;flex:1;min-width:0;font-family:var(--sans);font-size:15px;font-weight:600;color:var(--ink);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block}
  .topbar #crumb .gly,.topbar #crumb svg{display:none}
  .find-btn{order:2;width:44px!important;height:44px;margin:0!important;padding:0!important;justify-content:center;background:none}
  .top-new{order:3;margin:0!important}
  .top-new>summary{width:44px;height:44px;padding:0!important;justify-content:center;font-size:0!important;gap:0}
  .top-new>summary svg{width:20px;height:20px}
  .top-new .dash-menu-list{right:-56px}
  .topbar .chip{width:56px}
  .topbar .chip>summary{width:100%;justify-content:center;padding:0!important}
  .topbar .chip>summary::after{display:none}
  /* the page's name, once */
  .page-head.ph-band{padding:14px 16px!important;gap:10px 12px;margin-bottom:12px}
  .page-head .ph-ico,.page-head .ph-sub,.page-head .ph-art{display:none!important}
  .page-head .htab,.ph-band>h1{font-size:22px;padding:0!important;margin:0!important}
  .ph-t{flex-basis:auto!important;display:block!important}
  .page-head:not(.ph-band){margin-bottom:14px}
  /* a page's tabs */
  .hub-nav{display:flex!important;gap:4px;margin:0 -16px 14px!important;padding:0 16px!important;overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,transparent 0,#000 16px,#000 calc(100% - 28px),transparent)}
  .hub-nav::-webkit-scrollbar{display:none}
  .hub-nav a{flex:none;min-height:44px;padding:0 16px!important;gap:6px;font-size:14px;background:var(--white)}
  .hub-nav .hub-i{display:none!important}
  .hub-nav .hub-n{position:static!important;margin-left:6px!important}
  .hub-sub{margin:-4px 0 14px;overflow-x:auto;scrollbar-width:none}
  .hub-sub .seg-mini a{min-height:40px;white-space:nowrap}
  /* figures: two to a row, smaller */
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px;margin-bottom:14px}
  .kpi{padding:14px 16px}
  .kpi .v{font-size:22px}
  .mail-glance{gap:8px!important;margin-bottom:12px}
  .mail-glance .mg{padding:10px 12px!important;min-height:0}
  .mail-glance .mg-t>span{display:none}
  /* presses */
  .btn,.btn.sm{min-height:44px}
  .btn.sm{font-size:13px;padding:10px 14px}
  .linky{padding-block:12px;margin-block:-12px}
  /* text people read is never under 12px */
  .tbl th,.tbl .tag,.lead .next,.platform,.mail-list .r,.c-row label,.qn-head,.lead .slots,.tm-tag,.tm-when,.todo-meta .tag,.need-head,.qreq,.lead .behind,.pp-todo .when,.pp-who,.fe-sec b,.fe-sec>span,.rq-list .tag,.rq-list .d,.rq-file,.st-t .tag,.fd-g h4,.fd-it .k,.ch-sect,.ch-conv-t small,.ch-day span,.an-field label,.an-sub,.hm-day,.hm-date,.pj-meta .ref-tag,.ps-kind,.ob-kind,.col-n,.fe-ptag,.fe-info,.pk-seg button,.pk-saved,.hub-n,.cal-dow div{font-size:12px!important}
  .list li{font-size:15px}
  /* Before launch: the buttons go under the words */
  .todo{grid-template-columns:auto minmax(0,1fr);gap:4px 12px}
  .todo-tools{grid-column:2;display:flex;gap:6px}
  .todo-tools .btn.sm{min-width:44px}
  .todo-tick{height:44px;margin-top:-10px}
  .todo-tick input,body.staff input[type=checkbox]{min-width:22px;min-height:22px}
  .todo-title{padding-block:10px;margin-block:-10px}
  .todo-add{grid-template-columns:minmax(0,1fr)!important}
  /* the board: a list of stages, an empty one folded to its name */
  #view .board{display:block;overflow:visible;padding:0}
  #view .board .col{min-width:0;min-height:0;margin-bottom:10px}
  #view .board .col:not(:last-child)::after{display:none}
  #view .board .col.is-empty{padding:4px 10px;margin-bottom:4px}
  #view .board .col.is-empty .col-h{margin:0!important}
  #view .board .col-h{justify-content:flex-start!important}
  #view .board .col-name{margin:0!important;text-align:left;flex:none}
  #view .board .col.is-empty .col-drop{display:none}
  /* the bar along the foot */
  .tabbar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));position:fixed;left:0;right:0;bottom:0;z-index:45;background:var(--white);box-shadow:0 -1px 0 var(--rule),0 -8px 24px rgba(18,22,27,.06);padding:4px 4px env(safe-area-inset-bottom)}
  .tabbar a{position:relative;display:grid;justify-items:center;align-content:center;gap:4px;min-height:60px;border:0;color:var(--slate);font-size:12.5px;font-weight:500;text-decoration:none}
  .tabbar a svg{width:24px;height:24px}
  .tabbar a.on{color:var(--ink);font-weight:600}
  .tabbar a.on svg{color:var(--signal)}
  .tabbar .count{position:absolute;top:6px;left:calc(50% + 6px);min-width:18px;height:18px;padding:0 5px;font-size:11px;line-height:18px;text-align:center;background:var(--signal);color:#fff;border-radius:0 6px 0 6px}
  .toast{bottom:calc(76px + env(safe-area-inset-bottom))!important}
}

/* ---------- Phones: Today, Everything and the + (app-home.js, app.js) ----------
   Today is one card at a time: a plain question about one thing, two big answers, and
   "Not now". The cards behind peek out underneath; dots say how many. Everything is a
   plain list. The + opens a sheet from the foot. All of it only at phone width. */
.fab{display:none}
@media (max-width:700px){
  .menu-btn,.top-new,.topbar .chip{display:none!important}
  .topbar{padding:6px 8px!important}
  body.ph-own .topbar{display:none}
  .fab{display:grid;place-items:center;position:fixed;right:20px;bottom:calc(84px + env(safe-area-inset-bottom));z-index:46;width:60px;height:60px;border:0;background:var(--ink);color:var(--paper);border-radius:0 20px 0 20px;box-shadow:0 12px 26px -8px rgba(18,22,27,.45);cursor:pointer}
  .fab[hidden]{display:none}
  .td{padding:44px 4px 120px}
  .td-hi h1{font-size:32px;line-height:1.1;letter-spacing:-.02em;font-weight:600;margin:0;text-transform:none;font-family:var(--sans)}
  .td-hi p{font-size:17px;line-height:1.45;color:var(--slate);margin:8px 0 0;min-height:1em}
  .td-hi p:empty{display:none}
  .td-soon{display:flex;align-items:center;gap:12px;margin:22px 0 0;padding:12px 14px;min-height:60px;background:var(--white);border:0;border-radius:0 16px 0 16px;font-size:15px;color:var(--ink);text-decoration:none}
  .td-soon-i{width:36px;height:36px;flex:none;display:grid;place-items:center;background:var(--signal-bg);color:var(--signal);border-radius:0 10px 0 10px}
  .td-soon-t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--slate)}
  .td-soon-t b{color:var(--ink);font-weight:600}
  .td-soon-go{margin-left:auto;font-weight:600;color:var(--signal)}
  .td-stack{position:relative;margin-top:22px}
  .td-card{position:relative;z-index:3;background:var(--white);border-radius:0 26px 0 26px;padding:24px 22px 18px;box-shadow:0 18px 40px -18px rgba(18,22,27,.28);transition:transform .22s ease,opacity .22s ease}
  .td-card.gone{transform:translateX(-110%) rotate(-4deg);opacity:0}
  .td-ghost{position:absolute;left:14px;right:14px;height:40px;bottom:-12px;background:var(--white);opacity:.7;border-radius:0 22px 0 22px;z-index:2}
  .td-ghost.two{left:28px;right:28px;bottom:-24px;opacity:.4;z-index:1}
  .td-who{display:flex;align-items:center;gap:12px;margin-bottom:16px}
  .td-av{width:44px;height:44px;flex:none;border-radius:0 13px 0 13px;display:grid;place-items:center;font-weight:600;font-size:15px}
  .td-who b{display:block;font-size:16px;font-weight:600}
  .td-who small{display:block;font-size:13.5px;color:var(--slate)}
  .td-q{font-size:24px;line-height:1.25;letter-spacing:-.01em;font-weight:600;margin:0}
  .td-q em{font-style:normal;color:var(--signal)}
  .td-d{font-size:15.5px;color:var(--slate);line-height:1.5;margin:10px 0 0}
  .td-acts{display:grid;gap:10px;margin-top:22px}
  .td-b{min-height:54px;border:0;border-radius:0 16px 0 16px;font:inherit;font-size:16.5px;font-weight:600;background:var(--paper);color:var(--ink);cursor:pointer}
  .td-b.p{background:var(--signal);color:#fff}
  .td-b:disabled{opacity:.6}
  .td-more{display:block;margin:12px auto 0;min-height:44px;padding:0 16px;border:0;background:none;font:inherit;font-size:15px;color:var(--slate);cursor:pointer}
  .td-dots{display:flex;justify-content:center;gap:6px;margin-top:40px}
  .td-dots i{width:8px;height:8px;border-radius:50%;background:var(--rule-strong)}
  .td-dots i.on{width:22px;border-radius:4px;background:var(--ink)}
  .td-done{text-align:center;padding-top:36px;color:var(--ink)}
  .td-done svg{display:block;margin:0 auto;color:var(--status)}
  .td-done h2{font-size:28px;letter-spacing:-.02em;margin:18px 0 6px;font-weight:600;text-transform:none;font-family:var(--sans)}
  .td-done p{font-size:17px;color:var(--slate);margin:0;line-height:1.45}
  .ev{padding:44px 4px 120px}
  .ev-h{font-size:32px;letter-spacing:-.02em;font-weight:600;margin:0;text-transform:none;font-family:var(--sans)}
  .ev-find{display:flex;align-items:center;gap:12px;width:100%;height:54px;margin:20px 0 10px;padding:0 16px;border:0;background:var(--white);border-radius:0 16px 0 16px;font:inherit;font-size:16.5px;color:var(--slate);text-align:left;cursor:pointer}
  .ev-list{margin-top:8px}
  .ev-row{display:flex;align-items:center;gap:14px;width:100%;min-height:66px;padding:0 4px;border:0;border-top:1px solid var(--rule);background:none;font:inherit;color:var(--ink);text-align:left;text-decoration:none;cursor:pointer}
  .ev-list .ev-row:first-child{border-top:0}
  .ev-row b{display:block;font-size:17px;font-weight:600}
  .ev-row small{display:block;font-size:14px;color:var(--slate);margin-top:2px}
  .ev-dot{width:9px;height:9px;border-radius:50%;background:var(--signal);margin-left:auto}
  .ev-chev{width:9px;height:9px;margin-left:auto;margin-right:6px;border:solid var(--rule-strong);border-width:0 2px 2px 0;transform:rotate(-45deg);flex:none}
  .ev-dot+.ev-chev{margin-left:8px}
  .ev-you{margin-top:24px;border-top:1px solid var(--rule)}
  .ev-out b{color:var(--signal)}
  dialog.sheet{margin:auto 0 0;max-width:none;width:100%;border-radius:26px 26px 0 0;padding-bottom:env(safe-area-inset-bottom)}
  dialog.sheet .card{border-radius:26px 26px 0 0;padding:12px 20px 28px}
  dialog.sheet .card::before{content:"";display:block;width:42px;height:5px;border-radius:3px;background:var(--rule-strong);margin:0 auto 18px}
  .qa h2{font-size:22px;font-weight:600;margin:0 0 10px;text-transform:none;font-family:var(--sans);letter-spacing:-.01em}
  .qa-opt{display:flex;align-items:center;gap:16px;width:100%;min-height:70px;border:0;border-top:1px solid var(--rule);background:none;font:inherit;font-size:17px;font-weight:600;color:var(--ink);text-align:left;cursor:pointer}
  .qa h2+.qa-opt{border-top:0}
  .qa-opt small{display:block;font-size:14px;font-weight:400;color:var(--slate);margin-top:2px}
  .qa-i{width:46px;height:46px;flex:none;display:grid;place-items:center;background:var(--paper);border-radius:0 14px 0 14px}
  .qa-i.hot{background:var(--signal);color:#fff}
}

/* ---------- Phones: Mail (app-mail.js) ----------
   The list starts near the top: search, then where you are (a button that opens the boxes
   and folders in a sheet), then the four ways to narrow the inbox as a row of chips. Each
   conversation is three lines: who and when, the subject, the first words. Write is a
   round button at the foot. Reading: one way back, the message, and Reply along the foot.
   Writing: the fields, the words, and Send along the foot; formatting folds under Aa. */
.m-places,.c-aa{display:none}
@media (max-width:700px){
  /* the list */
  .page-head:has(#mail-q){display:block;padding:0;background:none;margin-bottom:10px}
  .page-head:has(#mail-q) .htab{display:none}
  .page-head:has(#mail-q) .btn-row{display:block;width:100%;margin:0!important}
  .mail-search{display:flex!important;width:100%;margin:0!important}
  body:has(.m-places) .topbar{display:none}
  .page-head:has(#mail-q){padding-top:30px}
  .mail-search .input{width:100%;min-height:48px;font-size:16px;border-radius:0 14px 0 14px}
  .page-head:has(#mail-q) .mail-more{display:none}
  .page-head [data-action="mail-compose"]{position:fixed;right:20px;bottom:calc(84px + env(safe-area-inset-bottom));z-index:46;width:60px;height:60px;min-height:0;padding:0!important;justify-content:center;font-size:0!important;gap:0;border-radius:0 20px 0 20px;background:var(--ink);color:var(--paper);box-shadow:0 12px 26px -8px rgba(18,22,27,.45)}
  .page-head [data-action="mail-compose"] svg{width:24px;height:24px}
  .m-places{display:flex;align-items:center;gap:10px;min-height:44px;margin:0 0 6px;padding:0 4px;border:0;background:none;font:inherit;font-size:22px;font-weight:600;color:var(--ink);cursor:pointer}
  .m-places svg{width:20px;height:20px;color:var(--slate)}
  .m-places-c{width:8px;height:8px;border:solid var(--slate);border-width:0 2px 2px 0;transform:rotate(45deg);margin:-4px 0 0 2px}
  .mail-nav,.mail-top .mail-where,.mail-count,.mail-hint{display:none!important}
  .mail-glance{display:flex!important;gap:8px!important;overflow-x:auto;scrollbar-width:none;margin:0 -16px 10px!important;padding:0 16px}
  .mail-glance::-webkit-scrollbar{display:none}
  .mail-glance .mg{flex:none;display:inline-flex!important;flex-direction:row-reverse;align-items:center;gap:8px;min-height:40px!important;padding:0 14px!important;border-radius:0 12px 0 12px;font-size:14px}
  .mail-glance .mg-t b{font-weight:600;font-size:14px}
  .mail-glance .mg-t>span{display:none}
  .mail-glance .mg-n{font-size:13px;min-width:0}
  .mail-layout{display:block!important}
  .mail-panel{padding:0 14px!important}
  .mail-list,.mail-list tbody{display:block}
  .mail-list thead,.mail-list colgroup,.mail-list .tick,.mail-list .m-acts,.mail-list .m-org,.mail-list .m-box{display:none!important}
  .mail-list tr.mail-row{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:2px 12px;padding:12px 0;border-top:1px solid var(--rule)}
  .mail-list tr.mail-day{display:block;padding:14px 0 4px}
  .mail-list tr.mail-day th{display:block;padding:0;border:0;font-size:12px}
  .mail-list tr.mail-day+tr.mail-row{border-top:0}
  .mail-list td{display:block;padding:0!important;border:0!important;min-width:0}
  .mail-list td.pic{grid-row:1/4}
  .mail-list td.pic>*{width:44px!important;height:44px!important}
  .mail-list td.subj{grid-column:2/4;display:contents}
  .mail-list .m-l1{grid-column:2;grid-row:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:15.5px}
  .mail-list td.when{grid-column:3;grid-row:1;text-align:right;font-size:13px;color:var(--slate);white-space:nowrap}
  .mail-list .m-line{grid-column:2/4;grid-row:2;min-width:0;display:flex;align-items:center;gap:6px;font-size:15px;overflow:hidden;white-space:nowrap}
  .mail-list .m-line>b{overflow:hidden;text-overflow:ellipsis}
  .mail-list .m-line .m-tag:not(.m-tag-new):not(.m-tag-ink){display:none}
  .mail-list .m-snip{grid-column:2/4;grid-row:3;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:14px;color:var(--slate)}
  .mail-list tr.mail-row:not(.unread) .m-line>b{font-weight:500}
  .mail-list tr.mail-row.unread{box-shadow:none!important;border-left:0!important}
  /* reading */
  .mail-head .m-back,.mail-head .ph-ico{display:none!important}
  .mail-head{display:block!important;padding:4px 4px 0!important;background:none!important}
  .mail-head .htab{font-size:22px!important;line-height:1.25}
  .mail-head .btn-row{display:flex;flex-wrap:nowrap;gap:6px;margin-top:10px;overflow-x:auto;scrollbar-width:none}
  .mail-head .btn-row [data-action="mail-reply"]{display:none}
  .mail-head .btn-row .m-ico{min-width:44px}
  .m-filedrow{margin:0 4px 10px}
  .mail-msg .msg-tools{display:none}
  .m-replybar{position:sticky;bottom:calc(68px + env(safe-area-inset-bottom));z-index:5;display:flex!important;gap:8px;margin:12px -16px 0;padding:10px 16px;background:var(--paper)}
  .m-replybar .btn{flex:1;min-height:50px;justify-content:center;font-size:16px}
  /* writing */
  .compose .c-row{grid-template-columns:72px minmax(0,1fr) auto!important}
  .compose #c-from{font-size:14px;background:none}
  .c-aa{display:flex;align-items:center;gap:8px;min-height:44px;margin:6px 12px;padding:0 12px;border:0;border-radius:0 10px 0 10px;background:var(--paper);font:inherit;font-weight:700;font-size:15px;color:var(--ink);cursor:pointer}
  .c-aa span{font-weight:500;font-size:14px;color:var(--slate)}
  .c-aa[aria-expanded="true"]{background:var(--ink);color:var(--paper)}.c-aa[aria-expanded="true"] span{color:var(--on-ink-dim)}
  .compose .toolbar{display:none!important}
  .compose.show-tb .toolbar{display:block!important}
  .compose .editor{min-height:40vh;padding:16px!important;font-size:16px}
  .compose .editor .sig img{max-width:40px!important;height:auto!important}
  .compose .editor .sig{transform:scale(.85);transform-origin:left top}
  .compose .c-drop{display:none}
  .compose>.btn-row{position:sticky;bottom:calc(68px + env(safe-area-inset-bottom));z-index:5;display:grid!important;grid-template-columns:1fr auto auto;gap:8px;margin:0!important;padding:10px 12px;background:var(--white);box-shadow:0 -1px 0 var(--rule)}
  .compose>.btn-row [data-action="mail-send"]{min-height:50px;font-size:16px;justify-content:center}
  .compose>.btn-row [data-action="mail-save-now"],.compose>.btn-row [data-action="mail-discard"]{display:none}
  .compose>.btn-row [data-action="mail-send-later"]{min-height:50px;font-size:0;gap:0;padding:0 14px}
  .compose>.btn-row [data-action="mail-send-later"] svg{width:22px;height:22px}
  .page-head:has(#c-status) .btn-row{display:none}
  .m-sheet .mail-nav{display:block!important}
  .m-sheet .mn-group{display:grid;gap:0;margin:0}
  .m-sheet .mn-group+.mn-group{padding-left:0;border-left:0}
  .m-sheet .mn-item{display:flex;align-items:center;gap:14px;width:100%;min-height:52px;border:0;border-top:1px solid var(--rule);background:none;font:inherit;font-size:16px;font-weight:500;color:var(--ink);text-align:left}
  .m-sheet .mn-item.on{font-weight:700}
  .m-sheet .mn-n{margin-left:auto;font-size:13px;color:var(--slate)}
  .m-sheet .mn-h{display:block;margin:16px 0 4px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-family:var(--mono);color:var(--slate)}
  .m-sheet .mn-sub,.m-sheet .mn-item+.mn-sub{display:block;margin:12px 0 4px;padding:0;border:0;font-size:13px;color:var(--slate)}
  .m-sheet-more{margin-top:12px}
  dialog.sheet .card{max-height:80vh;overflow-y:auto}
}

/* ---------- Phones: every other page (app.js) ----------
   The same frame on every page: a slim bar with Back on the left (to Everything, or to
   the page you came from), the place's name as a button that opens its pages in a sheet,
   and search. The page's name follows, large and plain, without a card behind it. The
   rows of tabs are in the sheet, so the page starts with what is on it. A table too wide
   for the screen is read a row at a time. */
@media (max-width:700px){
  body.staff .topbar{background:none;min-height:48px;margin:0 -10px 4px;padding:0!important;gap:2px;border-radius:0}
  body.staff .topbar .top-back{display:inline-grid;place-items:center;width:44px;height:44px;border:0;background:none;color:var(--ink);margin:0}
  body.staff .topbar .top-back[hidden]{display:none}
  body.staff .topbar .top-back svg{width:22px;height:22px}
  body.staff .topbar #crumb{flex:0 1 auto;margin-right:auto;font-size:14px;font-weight:500;color:var(--slate);padding:0 8px;letter-spacing:0;text-transform:none}
  body.staff .topbar .top-back[hidden]+#crumb{padding-left:12px}
  body.staff .topbar #crumb[role=button]{display:inline-flex!important;align-items:center;gap:6px;min-height:40px;padding:0 12px 0 14px;background:var(--white);color:var(--ink);border-radius:0 12px 0 12px;cursor:pointer;box-shadow:0 1px 0 var(--rule)}
  body.staff .topbar #crumb[role=button]>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  body.staff .topbar #crumb[role=button]::after{content:"";flex:none;width:7px;height:7px;margin:-4px 2px 0 4px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg)}
  body.staff .topbar .find-btn{width:44px!important;height:44px}
  body.staff .topbar #crumb:not([role=button]){visibility:hidden}
  /* the page's name: plain */
  body.staff .page-head.ph-band{background:none;padding:0 0 4px!important;min-height:0;margin-bottom:14px;border-radius:0;column-gap:12px;overflow:visible}
  body.staff .ph-band::before,body.staff .ph-band::after{display:none}
  body.staff .page-head .htab,body.staff .ph-band>h1,body.staff .page-head>h1{font-size:28px;line-height:1.15;letter-spacing:-.01em}
  /* the place's tabs are in the sheet */
  body.staff:not(:has(.m-places)) #view .hub-nav.hub-auto,body.staff:not(:has(.m-places)) #view .hub-sub{display:none!important}
  /* the sheet */
  .hs .hs-item{border-bottom:0!important;display:flex;align-items:center;gap:14px;min-height:64px;border-top:1px solid var(--rule);font-size:17px;font-weight:600;color:var(--ink);text-decoration:none}
  .hs h2+.hs-item{border-top:0}
  .hs .hs-item.on .qa-i{background:var(--ink);color:var(--paper)}
  .hs .hs-n{margin-left:auto;min-width:24px;height:24px;padding:0 7px;border-radius:0 8px 0 8px;background:var(--signal);color:#fff;font-size:13px;line-height:24px;text-align:center}
  .hs .hs-subs{display:flex;flex-wrap:wrap;gap:6px;margin:-4px 0 12px 60px}
  .hs .hs-subs a{border:0!important;display:inline-flex;align-items:center;min-height:40px;padding:0 14px;background:var(--paper);border-radius:0 10px 0 10px;font-size:14px;color:var(--ink);text-decoration:none}
  .hs .hs-subs a.on{background:var(--ink);color:var(--paper)}
  /* a table, a row at a time */
  #view table.tbl.stk,#view table.tbl.stk tbody,#view table.tbl.stk tfoot{display:block;width:100%;min-width:0}
  #view table.tbl.stk thead{display:none}
  #view table.tbl.stk tr{display:block;padding:12px 0;border-bottom:1px solid var(--rule)}
  #view table.tbl.stk tr>*{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:3px 0;border:0;text-align:right;white-space:normal;font-size:15px}
  #view table.tbl.stk tr>*:first-child{justify-content:flex-start;text-align:left;font-weight:600;padding-bottom:6px}
  #view table.tbl.stk tr>[data-l]::before{content:attr(data-l);flex:1;text-align:left;font-weight:400;color:var(--slate);font-size:14px}
  #view table.tbl.stk tr>*:first-child::before{display:none}
  #view .an-scroll:has(.stk){overflow:visible}
}

/* ---------- Phones: Calendar (app-calendar.js) ----------
   The name, with New and a ⋯ for the tools; whose calendar; how to show it; the dates
   with an arrow at each side; the box that adds in plain words; then the days. Find a
   time, Out of office, Search and Settings are in the ⋯ sheet. In a month, each entry is
   a dot; the day's number opens the day. */
.cal-moreb{display:none!important}
@media (max-width:700px){
  #view[data-page=calendar]{display:flex;flex-wrap:wrap;align-items:center;column-gap:8px}
  #view[data-page=calendar]>*{flex:0 0 100%;min-width:0;order:9}
  #view[data-page=calendar] .page-head{order:0;flex:0 0 100%;display:flex;flex-wrap:nowrap;align-items:center;margin-bottom:10px}
  #view[data-page=calendar] .page-head .btn-row{margin:0 0 0 auto!important;flex-wrap:nowrap;gap:8px;width:auto}
  #view[data-page=calendar] .page-head [data-action=cal-find],#view[data-page=calendar] .page-head [data-action=cal-away]{display:none!important}
  #view[data-page=calendar] .cal-moreb{display:inline-grid!important;place-items:center;width:44px;padding:0!important}
  #view[data-page=calendar] .page-head [data-action=cal-new]{width:44px;padding:0!important;justify-content:center;font-size:0!important;gap:0}
  #view[data-page=calendar] .page-head [data-action=cal-new] svg{width:20px;height:20px}
  #view[data-page=calendar] .cal-tiles{order:1;margin:0 0 10px!important;gap:6px}
  #view .cal-tiles a,#view .cal-tiles summary{min-height:40px!important;padding:0 14px!important;font-size:14px}
  #view .cal-tiles .cal-face{display:none!important}
  #view[data-page=calendar] .cal-away{order:2}
  #view[data-page=calendar] .cal-bar,#view[data-page=calendar] .cal-tools{display:contents}
  #view[data-page=calendar] .cal-tools .seg{order:3;flex:0 0 100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin:0 0 6px;padding:4px;background:var(--white);border-radius:0 14px 0 14px}
  #view[data-page=calendar] .cal-tools .seg .btn{min-height:40px;padding:0 4px!important;justify-content:center;font-size:14px;border-radius:0 10px 0 10px}
  #view[data-page=calendar] .cal-tools .seg .btn.ghost{background:none}
  #view[data-page=calendar] .cal-nav{order:4;flex:0 0 100%;display:flex;align-items:center;justify-content:space-between;gap:8px;margin:4px 0}
  #view[data-page=calendar] .cal-nav .cal-month{flex:1;text-align:center;font-size:19px;margin:0}
  #view[data-page=calendar] .cal-nav .cal-arrow{width:44px;height:44px;display:grid;place-items:center}
  #view[data-page=calendar] .cal-nav .btn{order:5}
  #view[data-page=calendar] .cal-quick{order:5;flex:1 1 0;margin:0 0 12px}
  #view[data-page=calendar] .cal-quick .input{min-height:46px}
  #view[data-page=calendar] .cal-layers{order:6;flex:none;margin:0 0 12px}
  #view[data-page=calendar] .cal-layers .cal-tool{width:46px;height:46px}
  #view[data-page=calendar] .cal-layers .dash-menu-list{right:0;left:auto}
  #view[data-page=calendar] .cal-tool[data-action=cal-search],#view[data-page=calendar] .cal-tool[data-action=cal-settings],#view[data-page=calendar] .cal-tool[data-action=cal-keys]{display:none}
  #view[data-page=calendar] .cal-key{display:none}
  #view[data-page=calendar] .cal-tiles{padding:0!important;-webkit-mask-image:none;mask-image:none}
  #view .cal-grid .cal-day{position:relative;min-height:64px}
  #view .cal-grid .cal-n::after{content:"";position:absolute;inset:0;z-index:1}
  #view .cal-grid .sp-add{display:none}
  #view .cal-grid .cal-chip{display:inline-block;width:8px;height:8px;min-height:0;margin:3px 3px 0 0;padding:0;border:0;border-radius:50%;font-size:0;background:var(--signal);pointer-events:none;vertical-align:top;box-shadow:none}
  #view .cal-grid .cal-chip>*{display:none}
  #view .cal-grid .cal-chip.work{background:var(--ink)}
  #view .cal-grid .cal-chip.cont{opacity:.5}
}

/* ---------- Phones: small presses made bigger ---------- */
@media (max-width:700px){
  #view .dw-c{min-height:42px}
  #view summary{min-height:44px;display:flex;align-items:center}
  #view a[target=_blank]:only-child{display:inline-block;padding:10px 0}
  #view input[role=switch]{min-width:46px;min-height:28px}
  #view label:has(>input[type=checkbox]){min-height:44px;display:inline-flex;align-items:center;gap:10px}
}

/* ---------- Phones: Business (app-word.js) ----------
   A list of its sections, each a row; one opens on its own, with All settings above it. */
.set-all{display:none}
@media (max-width:700px){
  #view .set-nav{display:block!important;background:var(--white);border-radius:0 var(--r-card) 0 var(--r-card);padding:4px 16px;margin:0 0 16px}
  #view .set-nav a{display:flex!important;align-items:center;gap:14px;min-height:56px;padding:0!important;border:0!important;border-top:1px solid var(--rule)!important;background:none!important;font-size:16px;font-weight:600;color:var(--ink);border-radius:0!important}
  #view .set-nav a:first-child{border-top:0!important}
  #view .set-nav a::after{content:"";margin-left:auto;width:8px;height:8px;border:solid var(--slate);border-width:2px 2px 0 0;transform:rotate(45deg)}
  #view[data-page=settings] .set-sec{display:none}
  #view[data-page=settings]:has(.set-sec.here) .set-nav,#view[data-page=settings]:has(.set-sec.here)>.page-head{display:none!important}
  #view[data-page=settings] .set-sec.here{display:block}
  #view[data-page=settings]:has(.set-sec.here)>:not(.set-wrap),#view[data-page=settings]:has(.set-sec.here) .set-wrap>:not(.here){display:none!important}
  #view .set-sec.here .set-all{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin:-6px 0 6px 2px;padding:0 0 0 4px;border:0;background:none;font:inherit;font-size:15px;font-weight:600;color:var(--signal)}
  #view .set-sec.here .set-all::before{content:"";width:8px;height:8px;border:solid currentColor;border-width:0 0 2px 2px;transform:rotate(45deg)}
  #view .set-sec .set-foot{position:sticky;bottom:calc(68px + env(safe-area-inset-bottom));background:var(--white);padding:10px 0;margin-top:8px}
  #view .set-sec .set-foot .btn{width:100%;justify-content:center}
}

/* ---------- Phones: Before launch (app-todo.js) ----------
   Each thing is its tick, its name and three lines of its note; the remove sits at the
   top corner. Moving a thing up or down is left to a bigger screen. */
@media (max-width:700px){
  #view .todo-intro{display:none}
  #view .todo{position:relative;padding-right:40px}
  #view .todo-tools [data-action=todo-move],#view .todo-tools .st-ring{display:none}
  #view .todo-tools{position:absolute;top:2px;right:-6px;grid-column:auto}
  #view .todo-tools [data-action=todo-delete]{min-width:44px;background:none}
  #view .todo-note{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
}

/* ---------- Phones: Clients (app.js) ----------
   Where they stand is a row of chips, the count beside the word; each client a row. */
@media (max-width:700px){
  #view :has(>.cl-st){display:flex!important;flex-wrap:nowrap;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 -16px 14px!important;padding:0 16px!important;grid-template-columns:none!important}
  #view .cl-st{flex:none;display:inline-flex!important;align-items:center;gap:8px;min-height:44px;padding:0 14px!important;border-radius:0 12px 0 12px;width:auto!important}
  #view .cl-st .cl-n{font-size:16px!important;line-height:1}
  #view .cl-st .cl-l{font-size:14px}
  #view .cl-st .cl-bar{display:none!important}
  #view .cl-st{flex-direction:row!important;grid-template:none!important}
  #view .cl-st .cl-n,#view .cl-st .cl-l{display:inline-flex!important;align-items:center;gap:6px;margin:0!important;grid-area:auto!important}
  #view .cl-st.none{opacity:.55}
  #view .cl-card .cl-meta{display:none}
  #view .cl-card{padding:14px 16px!important}
}

/* ---------- The kit (app-phone.js, app-client-page.js) ----------
   The pieces the phone pages and the calmer pages are built from: Back and search, the
   name large, one sentence, one switch, rows that each open something, one button at
   the foot. Plain, white rows on the paper, the brand's two rounded corners. */
.k-page{max-width:none}
.k-page a,.k-page button{text-decoration:none}
.k-nav{display:flex;align-items:center;justify-content:space-between;margin:0 -6px 2px;min-height:48px}
.k-back{display:inline-flex;align-items:center;gap:2px;min-height:44px;padding:0 8px 0 2px;border:0;background:none;font:inherit;font-size:16px;font-weight:500;color:var(--signal);cursor:pointer}
.k-tools{display:flex;align-items:center;gap:2px}
.k-ic{display:inline-grid;place-items:center;width:44px;height:44px;border:0;background:none;color:var(--ink);cursor:pointer;border-radius:0 12px 0 12px}
.k-ic:hover{background:var(--white)}
.k-h1{font-size:30px;line-height:1.12;letter-spacing:-.02em;margin:2px 0 6px;font-weight:600}
.k-sw{display:inline-flex;align-items:center;gap:10px;border:0;background:none;padding:0;font:inherit;color:inherit;cursor:pointer;text-align:left}
.k-sw i{display:grid;place-items:center;width:30px;height:30px;border-radius:0 9px 0 9px;background:var(--white);color:var(--slate);flex:none}
.k-sum{font-size:15.5px;color:var(--slate);margin:0 0 16px;line-height:1.5;max-width:60ch}
.k-sum b{color:var(--ink);font-weight:600}.k-sum b.hot,.k-small b.hot{color:var(--signal-text,#9A3412)}
.k-small{font-size:14px;color:var(--slate);margin:4px 0 0}
.k-seg{display:flex;gap:4px;padding:4px;background:var(--white);border-radius:0 14px 0 14px;margin:0 0 16px;max-width:560px}
.k-seg a{flex:1;min-height:40px;display:flex;align-items:center;justify-content:center;gap:6px;font-size:14.5px;font-weight:500;color:var(--slate);border:0!important;border-radius:0 10px 0 10px;white-space:nowrap;padding:0 6px}
.k-seg a.on{background:var(--ink);color:var(--paper);font-weight:600}
.k-seg a i{font-style:normal;font-size:12px;min-width:18px;height:18px;line-height:18px;text-align:center;border-radius:0 6px 0 6px;background:var(--signal);color:#fff;padding:0 4px}
#view .k-gh{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--mono);font-size:12px!important;line-height:1.4;font-weight:400;letter-spacing:.12em;text-transform:uppercase;color:var(--slate);margin:22px 2px 8px;padding:0;border:0}
#view .k-gh::before,#view .k-gh::after{display:none}
.k-gh a{color:var(--signal);letter-spacing:.06em}
.k-list{background:var(--white);border-radius:0 18px 0 18px;overflow:hidden;margin-bottom:8px}
.k-row{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:14px;align-items:center;width:100%;min-height:68px;padding:10px 18px;border:0;border-top:1px solid var(--rule);background:none;font:inherit;color:var(--ink);text-align:left}
.k-row.nomark{grid-template-columns:minmax(0,1fr) auto}
.k-row:first-child{border-top:0}
.k-row.go{cursor:pointer}
.k-row.go:hover{background:var(--paper-soft,#F7F6F3)}
.k-row.go{grid-template-columns:40px minmax(0,1fr) auto 10px}
.k-row.go.nomark{grid-template-columns:minmax(0,1fr) auto 10px}
.k-row.go::after{content:"";width:8px;height:8px;border:solid var(--rule-strong);border-width:0 2px 2px 0;transform:rotate(-45deg)}
.k-row.dim{opacity:1}
.k-row.dim b,.k-row.dim small{color:var(--slate)}
.k-m{width:40px;height:40px;border-radius:0 11px 0 11px;background:var(--paper);display:grid;place-items:center;font-size:12.5px;font-weight:600;color:var(--ink);flex:none}
.k-t{min-width:0}
.k-t b{display:block;font-size:16px;font-weight:600;line-height:1.3;overflow:hidden;text-overflow:ellipsis}
.k-t small{display:block;font-size:13.5px;color:var(--slate);margin-top:2px;line-height:1.35}
.k-t small.hot{color:var(--signal-text,#9A3412);font-weight:500}
.k-v{text-align:right;font-size:16px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.k-v small{display:block;font-size:12.5px;font-weight:400;color:var(--slate)}
.k-v.hot{color:var(--signal-text,#9A3412)}
.k-card{background:var(--white);border-radius:0 18px 0 18px;padding:16px 18px;margin-bottom:12px}
.k-card.flat{padding:4px 18px}
.k-card .k-gh{margin:0 0 4px}
.k-big{font-size:40px;font-weight:600;letter-spacing:-.02em;line-height:1.05;margin:4px 0 2px;font-variant-numeric:tabular-nums}
.k-line{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:12px 0;border-top:1px solid var(--rule);font-size:15.5px}
.k-card.flat .k-line:first-child{border-top:0}
.k-line span{color:var(--slate)}.k-line b{font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
.k-line.t{border-top:2px solid var(--ink);font-size:17px}.k-line.t span{color:var(--ink);font-weight:600}
.k-next{display:flex;align-items:center;gap:12px;background:var(--ink);color:var(--paper);padding:14px 14px 14px 18px;border-radius:0 18px 0 18px;margin-bottom:12px}
.k-next .t{font-size:13px;font-weight:600;color:var(--on-ink-dim)}
.k-next b{display:block;font-size:17px;font-weight:600;margin-top:3px}
.k-next .k-btn{margin-left:auto}
.k-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border:0;border-radius:0 12px 0 12px;background:var(--white);color:var(--ink);font:inherit;font-size:15px;font-weight:600;cursor:pointer;white-space:nowrap}
.k-btn.p{background:var(--signal);color:#fff}
.k-btn.icon{width:44px;padding:0}
.k-next .k-btn:not(.p){background:rgba(255,255,255,.12);color:var(--paper)}
.k-acts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:8px;max-width:560px}
.k-act{display:grid;justify-items:center;gap:6px;padding:12px 4px 10px;border:0!important;background:var(--white);border-radius:0 14px 0 14px;font:inherit;font-size:13.5px;font-weight:600;color:var(--ink);cursor:pointer}
.k-act span{width:40px;height:40px;border-radius:0 11px 0 11px;background:var(--paper);display:grid;place-items:center}
.k-act.p span{background:var(--signal);color:#fff}
.k-add{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;margin:0 0 8px;border:1.5px dashed var(--rule-strong)!important;border-radius:0 14px 0 14px;background:none;font:inherit;font-size:15px;font-weight:600;color:var(--ink);cursor:pointer}
.k-note{display:flex;gap:8px;align-items:flex-start;font-size:13.5px;color:var(--slate);line-height:1.5;margin:12px 2px}
.k-note svg{flex:none;margin-top:2px}
.k-empty{background:var(--white);border-radius:0 18px 0 18px;padding:20px 18px;margin-bottom:8px;color:var(--slate);font-size:15px;line-height:1.5}
.k-empty p{margin:0}
.k-empty .k-btn{margin-top:12px;background:var(--paper)}
.k-fab{position:fixed;right:20px;bottom:calc(88px + env(safe-area-inset-bottom));z-index:46;height:56px;padding:0 22px 0 18px;display:flex;align-items:center;gap:8px;border:0;border-radius:0 20px 0 20px;background:var(--ink);color:var(--paper);font:inherit;font-size:16px;font-weight:600;box-shadow:0 12px 26px -8px rgba(18,22,27,.45);cursor:pointer}
.qa-opt.danger{color:var(--signal-text,#9A3412)}
body:has(#view .k-page) .topbar{display:none}
@media (min-width:701px){
  body:has(#view .k-page) .topbar{display:flex}
  .k-page>.k-nav{display:none}
  .k-fab{display:none}
}
@media (max-width:700px){
  #view:has(.k-page){padding-bottom:150px}
}

/* ---------- A client (app-client-page.js) ----------
   The name and where they stand; three things at a glance; then the work, the money and
   the mail down the middle, the people and the details at the side. One column on a phone. */
.cp-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px;align-items:center;margin:4px 0 20px}
.cp-head .cm,.cp-head>:first-child{width:64px;height:64px}
.cp-who h1{font-size:34px;line-height:1.1;letter-spacing:-.02em;margin:0 0 6px;font-weight:600}
.cp-who p{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:0;font-size:15px;color:var(--slate)}
.cp-do{display:flex;gap:8px;align-items:center}
.cp-glance{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:6px}
.cp-g{background:var(--white);border-radius:0 18px 0 18px;padding:16px 18px;min-width:0}
.cp-g>span{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--slate)}
.cp-g b{display:block;font-size:22px;font-weight:600;letter-spacing:-.01em;margin:6px 0 2px}
.cp-g small{display:block;font-size:14px;color:var(--slate);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp-g.hot b,.cp-g.hot small{color:var(--signal-text,#9A3412)}
.cp-cols{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:24px;align-items:start}
.cp-person{display:flex;align-items:center;border-top:1px solid var(--rule);padding-right:10px}
.cp-person:first-child{border-top:0}
.cp-p-main{flex:1;min-width:0;display:flex;align-items:center;gap:14px;min-height:68px;padding:10px 0 10px 18px;border:0;background:none;font:inherit;color:var(--ink);text-align:left;cursor:pointer}
.cp-role{font-weight:400;color:var(--slate);font-size:14px}
.cp-reach{display:flex;gap:2px}
.cp-reach .k-ic{color:var(--slate)}
.cp-add{display:flex;align-items:center;gap:8px;width:100%;min-height:52px;padding:0 18px;border:0;border-top:1px solid var(--rule);background:none;font:inherit;font-size:15px;font-weight:600;color:var(--signal);cursor:pointer;text-align:left}
.cp-facts{padding:4px 18px}
.cp-facts .cp-add{padding:0;margin:0}
.cp-f{display:grid;grid-template-columns:110px minmax(0,1fr);gap:12px;padding:12px 0;border-top:1px solid var(--rule);font-size:15px;align-items:baseline}
.cp-facts>.cp-f:first-child{border-top:0}
.cp-f>span{color:var(--slate);font-size:14px}
.cp-f b{font-weight:500;overflow-wrap:anywhere}
.cp-alike{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;background:var(--signal-bg);border-radius:0 16px 0 16px;padding:12px 16px;margin-bottom:14px}
.cp-alike p{margin:0;flex:1;min-width:200px}
.cp-alike span{display:flex;gap:8px}
@media (max-width:900px){
  .cp-cols{grid-template-columns:minmax(0,1fr);gap:0}
}
@media (max-width:700px){
  .cp-head{grid-template-columns:auto minmax(0,1fr);gap:14px;margin-bottom:14px}
  .cp-head .cm,.cp-head>:first-child{width:52px;height:52px}
  .cp-who h1{font-size:26px}
  .cp-who p{font-size:14px;gap:4px 10px}
  .cp-since{display:none}
  .cp-do{grid-column:1/-1}
  .cp-do .k-btn.p{flex:1}
  .cp-do .k-btn:not(.icon){flex:1}
  .cp-glance{grid-template-columns:minmax(0,1fr);gap:0;background:var(--white);border-radius:0 18px 0 18px;overflow:hidden}
  .cp-g{border-radius:0;display:grid;grid-template-columns:88px minmax(0,1fr);grid-template-rows:auto auto;column-gap:12px;padding:12px 18px;border-top:1px solid var(--rule)}
  .cp-g:first-child{border-top:0}
  .cp-g>span{grid-row:1/3;align-self:center}
  .cp-g b{font-size:17px;margin:0}
  .cp-f{grid-template-columns:96px minmax(0,1fr)}
}
.cp-facts>.cp-add:first-child{border-top:0}
/* the kit: a project's place on the board, and a thing to do with its tick */
.k-hero{padding:16px 18px 14px}
.k-track{display:flex;gap:4px;margin:2px 0 10px}
.k-track i{flex:1;height:6px;border-radius:3px;background:var(--rule)}
.k-track i.d{background:var(--ink)}.k-track i.h{background:var(--signal)}
.k-st{display:flex;justify-content:space-between;gap:12px;font-size:14px;color:var(--slate)}
.k-st b{color:var(--ink);font-weight:600}
.k-task{grid-template-columns:40px minmax(0,1fr) 0!important}
.k-task::after{display:none}
.k-tick{display:grid;place-items:center;width:40px;height:44px}
.k-tick input{width:22px;height:22px}
.k-task .k-t{border:0;background:none;font:inherit;color:inherit;text-align:left;padding:4px 0;cursor:pointer;min-height:44px}
.k-sum a{color:inherit;text-decoration:underline;text-underline-offset:3px;border:0}
/* the kit: a page's own tabs, kept under the top, as one row that scrolls */
@media (max-width:700px){
  .k-page>nav:not(.k-seg),.k-page>.seg{display:flex!important;flex-wrap:nowrap!important;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 -16px 14px!important;padding:0 16px!important}
  .k-page>nav:not(.k-seg)>*,.k-page>.seg>*{flex:none}
}
.k-titlerow{display:flex;align-items:center;justify-content:space-between;gap:16px}
.k-dt{display:flex;gap:8px}
@media (max-width:700px){.k-dt{display:none}}
@media (min-width:701px){.k-page .k-sw{pointer-events:none}.k-page .k-sw i{display:none}}

/* ---------- Social (app-social-page.js) ----------
   The next post with one button, then the weeks ahead as rows: a post's picture, its
   name, the day and where; a free week as a quiet suggestion that asks before it does. */
.so-th{display:block;width:44px;height:44px;flex:none;overflow:hidden;padding:5px;font-size:6px;font-weight:700;letter-spacing:.05em;line-height:1.2;text-transform:uppercase;color:var(--paper);border-radius:0 9px 0 9px}
.so-th.light{color:var(--ink);box-shadow:inset 0 0 0 1px var(--rule)}
.so-th.pic{padding:0}.so-th.pic img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.so-th.ghost{background:none;box-shadow:inset 0 0 0 1.5px var(--rule-strong);color:var(--slate);display:grid;place-items:center;font-size:20px;font-weight:400}
.so-row{grid-template-columns:44px minmax(0,1fr) auto 10px!important}
.so-sug .k-t b{font-weight:500}
.so-sug .k-t small{color:var(--slate)}
.so-pill{font-size:12.5px;font-weight:600;padding:4px 10px;border-radius:0 8px 0 8px;background:var(--paper);color:var(--slate);white-space:nowrap}
.so-pill.ok{background:var(--status-bg,#E5F1E8);color:var(--status,#1F6B3A)}
.so-pill.o{background:var(--signal-bg);color:var(--signal-text,#9A3412)}
.so-pill.g{background:none;color:var(--slate);font-weight:500}
.so-next{gap:14px}
.so-next .so-th{width:52px;height:52px;box-shadow:0 0 0 1px rgba(255,255,255,.15)}
.so-next>span{min-width:0}
.so-next b{overflow:hidden;text-overflow:ellipsis}
@media (max-width:700px){.so-next>.so-th{display:none}.so-next b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:normal}.so-pill.g{display:none}.so-row{grid-template-columns:44px minmax(0,1fr) auto 10px!important}.so-sug{grid-template-columns:44px minmax(0,1fr) 10px!important}}

/* ---------- A project (app-project-page.js) ----------
   The name, the client and the stage in one line; the board as a thin strip with the
   stages named under it; four things at a glance; the tabs as one switch. */
.pjg .cp-who p a{color:inherit;border:0;text-decoration:underline;text-underline-offset:3px}
.pjg .cp-who p .ref-tag{font-size:12px}
.pjg-track{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:4px;list-style:none;margin:0 0 16px;padding:0}
.pjg-track li{display:grid;gap:6px;min-width:0}
.pjg-track i{display:block;height:6px;border-radius:3px;background:var(--rule)}
.pjg-track li.d i{background:var(--ink)}.pjg-track li.h i{background:var(--signal)}
.pjg-track span{font-size:12.5px;color:var(--slate);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pjg-track li.h span{color:var(--ink);font-weight:600}
.pjg-glance{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:16px}
.pjg-glance .cp-g b{font-size:20px}
.pjg-glance .cp-g small button,.pjg-glance .cp-g small a{font:inherit;color:var(--signal);background:none;border:0;padding:0;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.pjg-glance .pj-bar{display:block;height:4px;background:var(--rule);border-radius:2px;margin:6px 0 4px}
.pjg-glance .pj-bar i{display:block;height:100%;background:var(--ink);border-radius:2px}
.pjg-tabs{max-width:none;display:inline-flex;margin-bottom:18px}
.pjg-tabs a{flex:none;padding:0 18px}
.pjg .pj-body .panel{border-radius:0 18px 0 18px}
@media (max-width:1100px){.pjg-glance{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* the steps to the next stage, as a plain checklist in two columns */
.pjg .wp-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px;row-gap:0}
.pjg .wp-list li{background:none!important;border:0;border-top:1px solid var(--rule);border-radius:0;padding:10px 2px;min-height:44px}
.pjg .wp-list li:nth-child(-n+2){border-top:0}
.pjg .wp-list li.done .wp-t{color:var(--slate)}
@media (max-width:900px){.pjg .wp-list{grid-template-columns:minmax(0,1fr)}.pjg .wp-list li:nth-child(2){border-top:1px solid var(--rule)}}

/* ---------- A post (app-social.js) ----------
   The post as people will see it: the words, then the picture with one button to change
   it. At the side, four short rows: when, where, what it is about, a link. Post it now
   stays in reach at the foot. The picture sheet shows this post four ways; posting goes
   one place at a time. */
.so-pg{max-width:none}
.so-head h1{font-size:30px;line-height:1.15;letter-spacing:-.02em;margin:2px 0 6px;font-weight:600}
.so-head .k-sum{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.so-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:24px;align-items:start;margin:6px 0 0}
.so-card{background:var(--white);border-radius:0 18px 0 18px;padding:18px}
.so-words{display:block;width:100%;border:0!important;background:none!important;box-shadow:none!important;padding:2px 2px 6px!important;font:inherit;font-size:17px;line-height:1.55;color:var(--ink);resize:none;field-sizing:content;min-height:5.5em;outline:none;border-radius:0}
.so-words:focus{background:var(--paper)!important;border-radius:0 10px 0 10px}
/* A post that has gone out: the words as each place was given them, kept as they went. */
.so-words.so-words-done{min-height:0;white-space:pre-wrap;overflow-wrap:anywhere}
.so-said.so-said-p{font-weight:400;font-size:15px;line-height:1.5}
.so-figs{list-style:none;margin:4px 0 0;padding:0;display:grid}
.so-figs li{display:grid;grid-template-columns:90px minmax(0,1fr) auto;align-items:baseline;gap:12px;padding:10px 0;border-top:1px solid var(--rule-soft);font-size:15px}
.so-figs li:first-child{border-top:0}
.so-figs b{font-weight:600}
.so-figs a{font-size:14px}
.so-fig-n{margin:8px 0 0;font-size:13px;color:var(--slate)}
.so-card .sx-ok{display:flex;justify-content:space-between;gap:12px;align-items:baseline;margin:2px 2px 14px;font-size:13px;color:var(--slate)}
.so-card .sx-ok ul{margin:0!important;padding:0!important;list-style:none}
.so-card .sx-ok em{font-style:normal;font-family:var(--mono);font-size:12px;white-space:nowrap}
.so-pic{position:relative;margin:0}
.so-pic canvas{display:block;width:100%;height:auto;border-radius:0 12px 0 12px;box-shadow:0 1px 0 var(--rule)}
.so-pic-ch{position:absolute;right:12px;bottom:12px;min-height:44px;padding:0 16px;border:0;border-radius:0 12px 0 12px;background:rgba(255,255,255,.94);color:var(--ink);font:inherit;font-size:15px;font-weight:600;cursor:pointer;box-shadow:0 6px 18px -6px rgba(18,22,27,.35)}
.so-need{margin:12px 2px 0;font-size:14px;color:var(--signal-text,#9A3412)}
.so-adv{margin-top:16px;padding-top:14px;border-top:1px solid var(--rule)}
.so-adv .sx-looks{margin-bottom:12px}.so-adv .sx-grounds{margin-bottom:12px}
.so-set{background:var(--white);border-radius:0 18px 0 18px;padding:4px 18px}
.so-f{display:grid;grid-template-columns:72px minmax(0,1fr);gap:14px;padding:14px 0;border-top:1px solid var(--rule);align-items:start}
.so-f:first-child{border-top:0}
.so-l{font-size:14px!important;font-weight:400!important;letter-spacing:0!important;text-transform:none!important;font-family:var(--sans)!important;color:var(--slate);padding-top:10px;margin:0}
.so-said{display:block;font-size:15.5px;font-weight:600;margin:9px 0 8px}
.so-v .sx-two{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:8px}
.so-v .sx-chips{display:flex;flex-wrap:wrap;gap:6px}
.so-v .sx-note{font-size:13px;color:var(--slate);margin:8px 0 0}
.so-bar{display:flex;justify-content:flex-end;gap:8px;margin:18px 0 0}
.so-bar .k-btn.p{min-width:200px;min-height:52px;font-size:16px}
.so-sheet h2{font-size:22px;margin:0 0 4px}
.so-sheet-l{font-size:14.5px;color:var(--slate);margin:0 0 14px;line-height:1.5}
.so-looks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.so-look{display:grid;gap:8px;padding:0;border:0;background:none;font:inherit;font-size:14.5px;font-weight:600;color:var(--ink);cursor:pointer;text-align:center}
.so-look canvas{width:100%;height:auto;border-radius:0 12px 0 12px;box-shadow:0 0 0 1px var(--rule)}
.so-look.on canvas{box-shadow:0 0 0 3px var(--signal)}
.so-more{display:block;width:100%;min-height:48px;margin-top:14px;border:1.5px dashed var(--rule-strong);border-radius:0 12px 0 12px;background:none;font:inherit;font-size:14.5px;font-weight:600;color:var(--ink);cursor:pointer}
.so-steps{display:flex;gap:6px;margin:0 0 16px}.so-steps i{flex:1;height:5px;border-radius:3px;background:var(--rule)}.so-steps i.d{background:var(--ink)}.so-steps i.h{background:var(--signal)}
.so-go{display:flex;align-items:center;justify-content:center;width:100%;min-height:58px;margin:0 0 12px;border:0;border-radius:0 14px 0 14px;background:var(--signal);color:#fff;font:inherit;font-size:17px;font-weight:600;cursor:pointer}
.so-tick{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--rule);font-size:15px}
.so-tick i{width:24px;height:24px;border-radius:50%;background:var(--rule);color:#fff;display:grid;place-items:center;font-style:normal;font-size:13px;flex:none}
.so-tick.d i{background:var(--status,#1F6B3A)}
.so-tick .linky{margin-left:auto}
.so-skip{margin-top:10px;font-size:14px}
.so-link{margin-top:12px}.so-link summary{min-height:44px;display:flex;align-items:center;font-size:14.5px;font-weight:600;cursor:pointer}
@media (min-width:701px){dialog.so-dlg{width:min(560px,92vw)}}
@media (max-width:900px){.so-grid{grid-template-columns:minmax(0,1fr);gap:14px}}
@media (max-width:700px){
  .so-head h1{font-size:26px}
  .so-card{padding:14px}
  .so-f{grid-template-columns:minmax(0,1fr);gap:4px}
  .so-l{padding-top:0;font-size:13px!important;font-weight:400;letter-spacing:0!important;text-transform:none!important;font-family:var(--sans)!important}
  .so-said{margin-top:2px}
  .so-bar{position:fixed;left:0;right:0;bottom:calc(64px + env(safe-area-inset-bottom));z-index:44;margin:0;padding:12px 16px;background:linear-gradient(rgba(242,241,238,0),var(--paper) 35%)}
  .so-bar .k-btn.p{flex:1;min-width:0}
}

/* ---------- Social: the next six weeks, the mix (app-social-page.js) ---------- */
.so-weeks{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-bottom:12px}
.so-wk{display:flex;flex-direction:column;gap:8px;min-width:0;padding:12px;border:0;border-radius:0 16px 0 16px;background:var(--white);font:inherit;color:var(--ink);text-align:left;text-decoration:none;cursor:pointer}
.so-wk:hover{box-shadow:0 0 0 2px var(--rule-strong)}
.so-wk.free{background:none;box-shadow:inset 0 0 0 1.5px var(--rule-strong)}
div.so-wk.free{cursor:default}
.so-wk-d{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate)}
.so-th.big{width:100%;height:auto;aspect-ratio:1/1;font-size:9px;padding:8px}
.so-wk-t{font-size:14px;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.so-wk-s{font-size:12.5px;color:var(--slate)}
.so-wk-s.g{color:var(--status,#1F6B3A);font-weight:600}.so-wk-s.o{color:var(--signal-text,#9A3412);font-weight:600}
.so-wk-more{font-size:12px;color:var(--slate)}
.so-wk-free{display:grid;gap:4px;aspect-ratio:1/1;align-content:start}
.so-wk-free b{font-size:15px}.so-wk-free span{font-size:13px;color:var(--slate);line-height:1.4}
.so-mix{background:var(--white);border-radius:0 18px 0 18px;padding:16px 18px;margin-top:16px}
#view .so-mix h2{font-size:15px;font-weight:600;margin:0 0 10px;font-family:var(--sans);letter-spacing:0;text-transform:none}
.so-mix-c{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 6px}
.so-mix-c span{font-size:13.5px;padding:6px 11px;border-radius:0 9px 0 9px;background:var(--paper)}
.so-mix-c span.lo{background:var(--signal-bg);color:var(--signal-text,#9A3412)}
@media (max-width:1000px){.so-weeks{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:700px){.so-weeks{display:flex;overflow-x:auto;scrollbar-width:none;margin:0 -16px 12px;padding:0 16px;gap:8px}.so-wk{flex:0 0 42%}}

/* ---------- A post: as each place shows it, the description, the checks (app-social.js) ---------- */
.so-pvt{display:inline-flex;gap:4px;padding:4px;background:var(--paper);border-radius:0 12px 0 12px;margin:0 0 12px}
.so-pvt button{min-height:38px;padding:0 14px;border:0;border-radius:0 9px 0 9px;background:none;font:inherit;font-size:14px;font-weight:500;color:var(--slate);cursor:pointer}
.so-pvt button.on{background:var(--ink);color:var(--paper);font-weight:600}
.so-frame{border:1px solid var(--rule);border-radius:0 14px 0 14px;overflow:hidden;background:var(--white)}
.so-fh{display:flex;gap:10px;align-items:center;padding:12px 14px}
.so-av{width:38px;height:38px;border-radius:50%;background:var(--ink);color:var(--paper);display:grid;place-items:center;font-weight:700;font-size:15px;flex:none}
.so-instagram .so-av{width:32px;height:32px;font-size:13px;box-shadow:0 0 0 2px var(--white),0 0 0 4px var(--signal)}
.so-fh b{display:block;font-size:15px}.so-fh small{display:block;font-size:12.5px;color:var(--slate)}
.so-ft{padding:0 14px 10px}
.so-frame .so-words{min-height:3.5em;font-size:15.5px}
.so-frame .so-pic canvas{border-radius:0;box-shadow:none}
.so-frame .so-pic{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.so-fa{display:flex;gap:16px;padding:10px 14px;color:var(--ink)}
.so-fa-t{justify-content:space-around;font-size:14px;color:var(--slate);font-weight:500}
.so-cap{padding:0 14px 12px;font-size:15px}
.so-cap>b{font-size:14.5px}
.so-cap .so-words{margin-top:2px}
.so-fold{font-size:13px;color:var(--slate);margin:6px 0 0;line-height:1.45}
.so-fold q{color:var(--ink)}
.so-under{font-size:13px;color:var(--slate);margin:10px 2px 0}
.so-alt textarea{min-height:76px;font-size:14.5px;line-height:1.5}
.so-checks{background:var(--white);border-radius:0 18px 0 18px;padding:14px 18px;margin-top:12px}
#view .so-checks h2{font-size:15px;font-weight:600;margin:0 0 6px;font-family:var(--sans);letter-spacing:0;text-transform:none}
.so-ck{list-style:none;margin:0;padding:0}
.so-ck li{background:none!important;color:var(--ink)!important;border-radius:0!important;display:flex;gap:10px;align-items:flex-start;padding:7px 0;font-size:14px;line-height:1.45}
.so-ck i{width:20px;height:20px;border-radius:50%;flex:none;display:grid;place-items:center;font-style:normal;font-size:11px;font-weight:700;color:#fff;background:var(--status,#1F6B3A);margin-top:1px}
.so-ck li.w i{background:var(--signal)}
.so-alt-copy{display:block;width:100%;min-height:44px;margin:0 0 10px;border:0;border-radius:0 12px 0 12px;background:var(--paper);font:inherit;font-size:14.5px;font-weight:600;color:var(--ink);cursor:pointer}

/* ---------- A project: the page and its side panel (app-project-page.js) ---------- */
.pjx{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;align-items:start}
.pjx-main{min-width:0}
.pjx-main .pj-body{display:grid;gap:14px}
.pjx-main .pj-body>*{margin:0!important}
.pjx-next{margin-bottom:14px}
.pjx-next .k-btn:first-of-type{margin-left:auto}
.pjx-next.late .t{color:#F2A27A}
.pjx-next.none b{color:#B9C0C7}
.pjx-side{position:sticky;top:16px;display:grid;gap:10px}
.pjx-c{background:var(--white);border-radius:0 18px 0 18px;padding:14px 16px;display:grid;gap:6px}
.pjx-c>b{font-size:20px;font-weight:600;letter-spacing:-.01em}.pjx-c>b small{font-size:14px;font-weight:400;color:var(--slate)}
.pjx-l{font-size:13px;font-weight:600;color:var(--slate)}
.pjx-s{font-size:13.5px;color:var(--slate)}
.pjx-a{border:0;background:none;padding:0;font:inherit;font-size:13.5px;font-weight:600;color:var(--signal);cursor:pointer;text-decoration:none}
.pjx-a:hover{text-decoration:underline;text-underline-offset:3px}
.pjx-ready{grid-template-columns:64px 1fr;align-items:center;gap:14px}
.pjx-ready b{display:block;font-size:17px}.pjx-ready small{display:block;font-size:13.5px;color:var(--slate)}
.pjx-ring .bg{fill:none;stroke:var(--rule);stroke-width:7}.pjx-ring .fg{fill:none;stroke:var(--status,#1F6B3A);stroke-width:7;stroke-linecap:round}
.pjx-ring text{font-size:13px;font-weight:600;fill:var(--ink);font-family:var(--sans)}
.pjx-bar{display:block;height:8px;border-radius:4px;background:var(--rule);overflow:hidden}.pjx-bar i{display:block;height:100%;background:var(--ink);border-radius:4px}
.pjx-bar.over i{background:var(--signal)}
.pjx-stack{display:flex;height:8px;border-radius:4px;background:var(--rule);overflow:hidden}
.pjx-stack i{display:block;height:100%}.pjx-stack i.paid{background:var(--status,#1F6B3A)}.pjx-stack i.billed{background:var(--ink)}
.pjx-key{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12.5px;color:var(--slate)}
.pjx-key i{display:inline-block;width:9px;height:9px;border-radius:2px;background:var(--rule);margin-right:5px;vertical-align:-1px}
.pjx-key i.paid{background:var(--status,#1F6B3A)}.pjx-key i.billed{background:var(--ink)}
.pjx-launch{grid-template-columns:52px 1fr;align-items:center;gap:14px}
.pjx-cal{width:52px;height:56px;border-radius:0 var(--r-btn) 0 var(--r-btn);color:var(--slate);background:var(--paper);display:grid;place-items:center;align-content:center;box-shadow:inset 0 4px 0 var(--signal)}
.pjx-cal small{font-size:12px;font-weight:600;color:var(--slate)}
.pjx-cal b{font-size:20px;line-height:1}
.pjx-launch>span:last-child b{display:block;font-size:16px}.pjx-launch small{display:block;font-size:13.5px;color:var(--slate);margin-top:2px}
.pjx-props{background:var(--white);border-radius:0 18px 0 18px;padding:4px 16px}
.pjx-p{display:grid;grid-template-columns:104px minmax(0,1fr);gap:10px;padding:11px 0;border-top:1px solid var(--rule);font-size:14.5px;align-items:baseline}
.pjx-p:first-child{border-top:0}.pjx-p>span:first-child{color:var(--slate);font-size:13.5px}
.pjx-p a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;border:0}
.pjx-m{color:var(--slate)}
/* the checklist: what is still open; the rest on request */
.pjg .wp:not(.pjx-open) .wp-list li.met{display:none}
.pjg .wp:not(.pjx-open) .wp-list li:not(.met):nth-child(n){border-top:1px solid var(--rule)}
.pjx-more{margin:6px 0 0;border:0;background:none;padding:6px 0;font:inherit;font-size:14px;font-weight:600;color:var(--signal);cursor:pointer}
/* the details: cards in two columns, filled in where they sit; the help shows on focus */
.pjg .jobsec-p .slots-table,.pjg .jobsec-p .slots-table tbody{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px;width:100%}
.pjg .jobsec-p .slots-table tbody{grid-column:1/-1}
.pjg .jobsec-p .slots-table tr{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;padding:10px 0;border-top:1px solid var(--rule)}
.pjg .jobsec-p .slots-table td{display:block;padding:0!important;border:0!important;text-align:left!important;width:auto!important}
.pjg .jobsec-p .slots-table td:first-child:empty{display:none}
.pjg .jobsec-p .slots-table td b{font-size:13px;font-weight:500;color:var(--slate)}
.pjg .jobsec-p .slots-table td .small{display:none;font-size:12.5px;margin-top:2px}
.pjg .jobsec-p .slots-table tr:focus-within td .small{display:block}
.pjg .jobsec-p .slots-table .input{width:100%;min-height:40px;background:var(--paper);border-color:transparent;font-size:15px}
/* every box keeps its inside space, filled in or not, so the words never sit against its edge */
.pjg .jobsec-p .slots-table .input{padding-left:12px;padding-right:12px;font-weight:500}
.pjg .jobsec-p .slots-table .input:focus{background:var(--white);border-color:var(--rule-strong)}
/* what has happened */
.pjx-feed{background:var(--white);border-radius:0 18px 0 18px;padding:16px 18px;margin-top:14px}
#view .pjx-feed h2{font-size:16px;font-weight:600;margin:0 0 10px;font-family:var(--sans);letter-spacing:0;text-transform:none}
.pjx-feed ol{list-style:none;margin:0;padding:0;position:relative}
.pjx-feed ol::before{content:"";position:absolute;left:15px;top:8px;bottom:8px;width:2px;background:var(--rule)}
.pjx-feed li{position:relative;display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:12px;align-items:center;padding:7px 0;font-size:14.5px}
.pjx-dot{width:32px;height:32px;border-radius:50%;background:var(--paper);display:grid;place-items:center;color:var(--slate);position:relative;z-index:1;box-shadow:0 0 0 4px var(--white)}
.pjx-feed li.k-mail .pjx-dot{background:var(--paper-soft);color:var(--ink);box-shadow:0 0 0 4px var(--white),inset 0 0 0 1px var(--rule-strong)}.pjx-feed li.k-money .pjx-dot{background:var(--status-bg);color:var(--status)}
.pjx-feed li.k-day .pjx-dot{background:var(--ink);color:var(--paper)}.pjx-feed li.k-stage .pjx-dot{background:var(--signal-bg);color:var(--signal-text,#9A3412)}
.pjx-feed li a{color:var(--ink);border:0;text-decoration:none}.pjx-feed li a:hover{text-decoration:underline}
/* The project's conversations: one row each, opening in Mail. */
.m-share{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:0 0 14px;font-size:13.5px;color:var(--slate)}
.m-vis{display:inline-flex;align-items:center;gap:6px}
.m-vis .linkish{font-size:inherit;color:var(--ink);border-bottom:1px solid var(--rule-strong)}
.m-vis .linkish:hover{color:var(--signal);border-color:var(--signal)}
.m-seg{display:inline-flex;background:var(--white);border-radius:0 var(--r-btn) 0 var(--r-btn);padding:3px;box-shadow:inset 0 0 0 1px var(--rule)}
.m-seg button{font:inherit;font-size:14px;border:0;background:transparent;color:var(--slate);min-height:40px;padding:0 14px;border-radius:0 var(--r-btn) 0 var(--r-btn);cursor:pointer}
.m-seg button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.m-seg button.on{background:var(--ink);color:var(--paper);font-weight:600}
.m-chat{list-style:none;margin:0 0 18px;padding:18px;display:grid;gap:12px;background:var(--white);border-radius:0 19px 0 19px}
.m-cday{justify-self:center;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--slate);margin:4px 0}
.m-cmsg{display:flex;flex-direction:column;align-items:flex-start;max-width:min(620px,80%)}
.m-cmsg.right{justify-self:end;align-items:flex-end}
.m-cwho{font-size:12px;color:var(--slate);margin:0 4px 4px}
.m-bub{padding:10px 14px;font-size:14.5px;line-height:1.5;border-radius:0 var(--r-tab) 0 var(--r-tab);overflow-wrap:anywhere}
.m-bub.tk{background:var(--ink);color:var(--on-ink)}
.m-bub.me{background:var(--slate);color:var(--white)}
.m-bub.cl{background:var(--signal);color:var(--white)}
.m-cfiles{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.m-cfiles a{font-size:13px;padding:4px 9px;border-radius:0 6px 0 6px;background:rgba(255,255,255,.16);color:inherit;border:0}
.c-newer{max-width:none;background:var(--signal-bg);color:var(--signal-text);padding:12px 16px;border-radius:0 var(--r-card) 0 0;margin:0;font-size:14.5px}
.c-newer b{color:var(--signal-text)}
.c-newer a{color:var(--signal-text);font-weight:600}
.pjx-mail{background:var(--white);border-radius:0 19px 0 19px;padding:22px 24px 10px;margin-top:14px}
.pjm-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:6px}
#view .pjm-h h2{font-size:17px;font-weight:600;margin:0;font-family:var(--sans);letter-spacing:0;text-transform:none}
.pjm-h span{display:flex;gap:14px;align-items:baseline;font-size:14px}
.pjx-mail ol{list-style:none;margin:0;padding:0}
.pjx-mail ol,.pjx-mail li,.pjx-mail .pjm-h{width:100%;max-width:none}
.pjx-mail li{border-top:1px solid var(--rule)}
.pjx-mail li:first-child{border-top:0}
.pjx-mail li a{display:grid;grid-template-columns:minmax(0,170px) minmax(0,1fr) auto;gap:16px;align-items:start;padding:11px 6px;margin:0 -6px;color:var(--ink);border:0;text-decoration:none;border-radius:0 10px 0 10px}
.pjx-mail li a:hover{background:var(--paper)}
.pjm-who{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--slate);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-top:1px}
.pjx-mail li.un .pjm-who{color:var(--ink);font-weight:600}
.pjm-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--signal)}
.pjm-sub{min-width:0;display:grid;gap:2px}
.pjm-sub b{font-size:14.5px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pjx-mail li.un .pjm-sub b{font-weight:600}
.pjm-sub small{font-size:13px;color:var(--slate);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pjm-when{display:grid;justify-items:end;gap:2px;font-size:13px;color:var(--slate);white-space:nowrap;padding-top:1px}
.pjm-when small{font-size:12px}
.pjx-mail .pjx-m{margin:4px 0 10px;font-size:14px}
.pjx-feed time{font-size:13px;color:var(--slate);white-space:nowrap}
@media (max-width:1150px){.pjx{grid-template-columns:minmax(0,1fr) 300px}}
@media (max-width:980px){.pjx{grid-template-columns:minmax(0,1fr)}.pjx-side{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}.pjx-props{grid-column:1/-1}.pjg .jobsec-p .slots-table,.pjg .jobsec-p .slots-table tbody{grid-template-columns:minmax(0,1fr)}}

.pjx-next .k-btn+.k-btn{margin-left:0}
.pjg .tk-steps-at{display:inline-flex;margin:0 0 0 12px;vertical-align:baseline;opacity:0;transition:opacity .15s}.pjg .tk-row:hover .tk-steps-at,.pjg .tk-row:focus-within .tk-steps-at{opacity:1}
.pjx-fill{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:10px;padding:12px 14px;border-radius:0 12px 0 12px;background:var(--paper);font-size:14px;color:var(--slate)}
.pjx-fill b{color:var(--ink)}
.pjx-fill .k-btn{background:var(--ink);color:var(--paper);min-height:40px;flex:none}
.pjg .jobsec-p.pjx-filling .pjx-fill .k-btn{background:var(--white);color:var(--ink)}
.pjx-feed ol,.pjx-feed li{width:100%;max-width:none}
/* on a tab, the tab's own two columns sit one above the other beside the side panel */
.pjx-main .pj-body>.two{grid-template-columns:minmax(0,1fr)!important;gap:14px}
.pjx-main .pj-body>.two>.stack{display:grid;gap:14px}
.pjx-main .pj-body>.two>.stack>*{margin:0!important}
.pjx-side.on-time .pjx-time,.pjx-side.on-money .pjx-money{display:none}

/* ---------- A project: the Time and Money pictures (app-project-page.js) ---------- */
.pjx-chart{background:var(--white);border-radius:0 var(--r-card) 0 var(--r-card);padding:16px 18px 12px}
#view .pjx-chart h2{font-size:16px;font-weight:600;margin:0 0 4px;font-family:var(--sans);letter-spacing:0;text-transform:none}
.pjx-say{font-size:14.5px;color:var(--slate);margin:0 0 10px;line-height:1.5;max-width:62ch}
.pjx-svg{display:block;width:100%;height:auto;overflow:visible}
.pjx-svg .g{stroke:var(--rule);stroke-width:1}
.pjx-svg .ax{font-size:11.5px;fill:var(--slate);font-family:var(--sans)}
.pjx-svg .lab{font-size:12.5px;fill:var(--slate);font-family:var(--sans)}
.pjx-svg .lab.b{fill:var(--ink);font-weight:600;font-size:13.5px}
.pjx-svg .est{stroke:var(--slate);stroke-width:1.5;stroke-dasharray:5 4}
.pjx-svg .mark{stroke:var(--rule-strong);stroke-width:1.5}
.pjx-svg .mark.sig{stroke:var(--signal)}
.pjx-svg .wash{fill:var(--ink);opacity:.08}
.pjx-svg .ln{fill:none;stroke:var(--ink);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.pjx-svg .end{fill:var(--ink);stroke:var(--white);stroke-width:2}
.pjx-svg .hit{fill:transparent}.pjx-svg .hit:hover{fill:rgba(18,22,27,.04)}
.pjx-svg .zero{stroke:var(--rule-strong);stroke-width:1}
.pjx-svg .wf-q{fill:none;stroke:var(--slate);stroke-width:1.5;stroke-dasharray:4 3}
.pjx-svg .wf-in{fill:var(--ink)}.pjx-svg .wf-out{fill:#8A929B}.pjx-svg .wf-gain{fill:#1F6B3A}.pjx-svg .wf-loss{fill:var(--signal)}
.pjx-svg .wf-link{stroke:var(--rule-strong);stroke-width:1;stroke-dasharray:2 3}
.pjx-svg rect:hover{opacity:.85}
.pjx-key2{display:flex;flex-wrap:wrap;gap:6px 16px;margin:8px 0 0;font-size:12.5px;color:var(--slate)}
.pjx-key2 i{display:inline-block;width:14px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px;background:var(--rule)}
.pjx-key2 i.ln{height:2px;background:var(--ink);vertical-align:3px}.pjx-key2 i.est{height:0;border-top:2px dashed var(--slate);vertical-align:3px;background:none}
.pjx-key2 i.sig{width:2px;background:var(--signal)}.pjx-key2 i.mk{width:2px;background:var(--rule-strong)}
.pjx-key2 i.q{background:none;border:1.5px dashed var(--slate);box-sizing:border-box;width:14px;height:10px}.pjx-key2 i.in{background:var(--ink)}.pjx-key2 i.gain{background:#1F6B3A}.pjx-key2 i.out{background:#8A929B}.pjx-key2 i.loss{background:var(--signal)}
#view .pjx-key2 i.q{width:14px!important;height:10px!important;min-width:0!important;min-height:0!important;padding:0!important;display:inline-block!important}

/* ---------- Social: the new looks and moving posts (app-social.js) ---------- */
.pk-mini .pk-i-ink{position:absolute;background:var(--ink);border-radius:0 3px 0 3px}
.pk-mini .pk-i-n{position:absolute;left:12%;font-size:8px;line-height:1;color:var(--signal);font-weight:700}
.pk-mini .pk-i-day{position:absolute;left:12%;top:16%;font-size:22px;line-height:1;color:var(--signal);font-weight:700}
.pk-mini .pk-i-mon{position:absolute;left:12%;top:52%;font-size:10px;line-height:1;color:var(--signal);font-weight:700;letter-spacing:.04em}
#view .so-mv-h,.so-sheet .so-mv-h{font-size:15px;font-weight:600;margin:18px 0 2px;font-family:var(--sans);letter-spacing:0;text-transform:none}
.so-mv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.so-mvb{display:grid;gap:2px;padding:12px 14px;border:0;border-radius:0 12px 0 12px;background:var(--paper);font:inherit;color:var(--ink);text-align:left;cursor:pointer}
.so-mvb b{font-size:15px}.so-mvb small{font-size:13px;color:var(--slate)}
.so-mvb.on{box-shadow:inset 0 0 0 2px var(--signal)}
.so-mv-tag{position:absolute;left:12px;top:12px;padding:6px 10px;border-radius:0 9px 0 9px;background:rgba(18,22,27,.82);color:var(--paper);font-size:12.5px;font-weight:600}
.so-play{position:absolute;left:12px;bottom:12px;width:44px;height:44px;border:0;border-radius:0 12px 0 12px;background:rgba(255,255,255,.94);color:var(--ink);font-size:15px;cursor:pointer}
@media (prefers-reduced-motion:no-preference){.so-play{display:none}}
.so-pic[data-size=story] canvas,.so-pic[data-size=portrait] canvas{width:auto!important;max-width:100%;max-height:72vh;margin:0 auto}
.so-pic[data-size=story],.so-pic[data-size=portrait]{background:var(--paper)}

/* ---------- Saved replies: the ready-made set ---------- */

/* ---------- A sheet of choices on a computer (K.more) ----------
   On a phone these rise from the foot; on a computer they open as the usual panel, with
   the same rows, a little tighter. */
@media (min-width:701px){
  .qa{min-width:min(420px,80vw)}
  .qa h2{font-size:20px;font-weight:600;margin:0 0 8px;text-transform:none;font-family:var(--sans);letter-spacing:-.01em}
  .qa-opt{display:flex;align-items:center;gap:14px;width:100%;min-height:56px;padding:8px 10px;margin:0 -10px;width:calc(100% + 20px);border:0;border-top:1px solid var(--rule);background:none;font:inherit;font-size:15.5px;font-weight:600;color:var(--ink);text-align:left;cursor:pointer;border-radius:0 12px 0 12px}
  .qa h2+.qa-opt{border-top:0}
  .qa-opt:hover{background:var(--paper)}
  .qa-opt:hover+.qa-opt{border-top-color:transparent}
  .qa-opt:focus-visible{outline:2px solid var(--signal);outline-offset:-2px}
  .qa-opt small{display:block;font-size:13.5px;font-weight:400;color:var(--slate);margin-top:2px}
  .qa-i{width:40px;height:40px;flex:none;display:grid;place-items:center;background:var(--paper);border-radius:0 12px 0 12px}
  .qa-i.hot{background:var(--signal);color:#fff}
}

/* ---------- A project: the client's side (app-client-panel.js) ----------
   Their page as a small picture with four checks beside it, then what is asked of them,
   the updates, the people with a switch each, and the files. White cards on the paper,
   the brand's two rounded corners, one quiet button style. */
.cfp{display:grid;gap:16px}
.cfp-card{background:var(--white);border-radius:0 22px 0 22px;padding:22px 24px;scroll-margin-top:20px;transition:box-shadow .3s}
.cfp-card.cfp-flash{box-shadow:0 0 0 3px var(--signal)}
.cfp-h{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 14px}
.cfp-h h3{font-size:17px;font-weight:600;margin:0;text-transform:none;letter-spacing:-.005em;font-family:var(--sans)}
.cfp-h small{font-size:13.5px;color:var(--slate)}
.cfp-acts{display:flex;gap:8px;flex-wrap:wrap}
.cfp-l{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--slate)}
.cfp-b{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;border:0;border-radius:0 12px 0 12px;font:inherit;font-size:14px;font-weight:600;background:var(--paper);color:var(--ink);cursor:pointer;white-space:nowrap;text-decoration:none}
.cfp-b:hover{background:var(--ink);color:var(--paper)}
.cfp-b.p{background:var(--signal);color:#fff}
.cfp-empty{margin:0 0 4px;font-size:14.5px;color:var(--slate)}
.cfp-dots{display:inline-grid;place-items:center;flex:none;width:36px;height:36px;border:0;border-radius:0 10px 0 10px;background:none;color:var(--slate);cursor:pointer}
.cfp-dots:hover{background:var(--paper);color:var(--ink)}
.cfp-chip{font-size:12.5px;font-weight:600;padding:5px 10px;border-radius:0 8px 0 8px;white-space:nowrap;background:var(--paper);color:var(--slate)}
.cfp-chip.w{background:#FDECE2;color:#9A3412}
.cfp-chip.s{background:#FFF4D6;color:#7A5200}
.cfp-chip.d{background:var(--status-bg,#E6EFE7);color:var(--status,#1E6B3A)}
.cfp-warn{margin:0;padding:12px 16px;background:#FDECE2;color:#9A3412;font-size:14.5px;font-weight:600;border-radius:0 12px 0 12px}
.cfp-warn p{margin:0}.cfp-warn .cfp-b{margin-top:10px}

/* the top: their page, and how ready it is */
.cfp-top{display:grid;grid-template-columns:280px minmax(0,1fr);gap:26px;align-items:start}
.cfp-thumb{position:relative;display:block;height:236px;border-radius:0 16px 0 16px;overflow:hidden;background:var(--paper);box-shadow:0 0 0 1px var(--rule),0 18px 36px -24px rgba(18,22,27,.5);text-decoration:none;color:var(--ink)}
.cfp-thumb .pg{display:grid;gap:8px;padding:12px}
.cfp-thumb .hero{display:grid;gap:5px;background:var(--ink);color:var(--paper);border-radius:0 12px 0 12px;padding:12px 14px}
.cfp-thumb .k{font-family:var(--mono);font-size:7px;letter-spacing:.14em;text-transform:uppercase;color:#9AA1AA;min-height:8px}
.cfp-thumb .hero b{font-size:14px;font-weight:600;letter-spacing:-.01em;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cfp-thumb .bars{display:flex;gap:3px;margin-top:8px}
.cfp-thumb .bars i{flex:1;height:4px;border-radius:2px;background:#2A3038}
.cfp-thumb .bars i.on{background:#F97316}
.cfp-thumb .you{background:#fff;border-radius:0 9px 0 9px;padding:8px 10px;font-size:10px;font-weight:600;box-shadow:inset 3px 0 0 var(--signal);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cfp-thumb .cols{display:grid;grid-template-columns:1fr 34%;gap:8px}
.cfp-thumb .cols span{height:120px;background:#fff;border-radius:0 9px 0 9px}
.cfp-thumb .open{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:8px;white-space:nowrap;padding:9px 14px;background:var(--white);border-radius:0 11px 0 11px;font-size:13.5px;font-weight:600;box-shadow:0 8px 20px -8px rgba(0,0,0,.35)}
.cfp-thumb:hover .open{background:var(--ink);color:var(--paper)}
.cfp-ready h2{font-size:23px;font-weight:600;letter-spacing:-.015em;margin:4px 0 4px;text-transform:none;font-family:var(--sans)}
.cfp-ready>p{font-size:15px;color:var(--slate);margin:0 0 10px;max-width:none}
.cfp-steps{list-style:none;margin:0;padding:0;max-width:none}
.cfp-steps li{display:flex;align-items:center;gap:14px;padding:11px 0;border-top:1px solid var(--rule);max-width:none}
.cfp-steps li:first-child{border-top:0}
.cfp-tick{width:26px;height:26px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--status-bg,#E6EFE7);color:var(--status,#1E6B3A)}
.cfp-tick.no{background:none;box-shadow:inset 0 0 0 2px var(--rule-strong);color:transparent}
.cfp-tick.wait{background:#FDECE2;color:#C2410C}
.cfp-steps div{flex:1;min-width:0}
.cfp-steps b{display:block;font-size:15px;font-weight:600}
.cfp-steps small{display:block;font-size:13.5px;color:var(--slate);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cfp-steps a{font-size:14px;font-weight:600;color:var(--signal-text,#9A3412);text-decoration:none;white-space:nowrap}
.cfp-steps a:hover{text-decoration:underline}

/* asked of them */
.cfp-asks{list-style:none;margin:0;padding:0;display:grid;gap:8px;max-width:none}
.cfp-ask{display:flex;align-items:center;gap:12px;padding:12px 12px 12px 14px;background:var(--paper);border-radius:0 14px 0 14px;max-width:none}
.cfp-ask.done{background:none;box-shadow:inset 0 0 0 1px var(--rule)}
.cfp-ask.done b{color:var(--slate);font-weight:500}
.cfp-ask .ic{width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:0 11px 0 11px;background:#fff}
.cfp-ask>div{flex:1;min-width:0}
.cfp-ask b{display:block;font-size:15px;font-weight:600}
.cfp-ask small{font-size:13.5px;color:var(--slate)}
.cfp-note{margin:6px 0 0;font-size:14px;color:var(--body);white-space:pre-wrap;max-width:none}
.cfp-check{position:relative;flex:none;width:24px;height:24px;cursor:pointer}
.cfp-check.none{cursor:default}
.cfp-check input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.cfp-check i{display:grid;place-items:center;width:24px;height:24px;border-radius:0 7px 0 7px;box-shadow:inset 0 0 0 2px var(--rule-strong);color:transparent;background:#fff}
.cfp-check input:checked+i{background:var(--status,#1E6B3A);box-shadow:none;color:#fff}
.cfp-check input:focus-visible+i{outline:2px solid var(--signal);outline-offset:2px}
.cfp-kinds{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:14px}
.cfp-kinds .cfp-l{margin-right:4px}
.cfp-kinds .cfp-b{background:#fff;box-shadow:inset 0 0 0 1px var(--rule)}
.cfp-kinds .cfp-b:hover{background:var(--ink);box-shadow:none}

/* updates */
.cfp-write{display:flex;align-items:center;gap:12px;width:100%;padding:10px 10px 10px 16px;border:0;border-radius:0 14px 0 14px;background:var(--paper);font:inherit;cursor:text;text-align:left}
.cfp-write>span:first-child{flex:1;min-height:44px;display:flex;align-items:center;font-size:15px;color:var(--slate);background:#fff;border-radius:0 10px 0 10px;padding:0 14px}
.cfp-write:hover>span:first-child{box-shadow:inset 0 0 0 1px var(--rule-strong)}
.cfp-ups{list-style:none;margin:6px 0 0;padding:0;max-width:none}
.cfp-up{display:grid;grid-template-columns:64px minmax(0,1fr) auto auto;gap:4px 14px;align-items:start;padding:14px 0;border-top:1px solid var(--rule);max-width:none}
.cfp-up .d{font-family:var(--mono);font-size:12px;color:var(--slate);padding-top:3px}
.cfp-up b{display:block;font-size:15px;font-weight:600}
.cfp-up p{margin:2px 0 0;font-size:14.5px;color:var(--slate);max-width:none;white-space:pre-wrap}
.cfp-up .pics{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.cfp-up .pics a{display:block;width:84px;height:60px;border-radius:0 9px 0 9px;overflow:hidden;background:var(--paper)}
.cfp-up .pics img{width:100%;height:100%;object-fit:cover;display:block}
.cfp-up .pics .vid{display:grid;place-items:center;height:100%;font-size:12px;font-weight:600;background:var(--ink);color:var(--paper)}
.cfp-up .seen{font-size:13px;color:var(--status,#1E6B3A);white-space:nowrap;padding-top:3px}
.cfp-up .seen.no{color:var(--slate)}
.cfp-up-do{display:flex;gap:2px;margin-top:-6px}
.cfp-pin{font-size:11.5px;font-weight:600;padding:2px 7px;margin-right:4px;border-radius:0 6px 0 6px;background:var(--ink);color:var(--paper);vertical-align:2px}

/* people */
.cfp-ppl{list-style:none;margin:0;padding:0;max-width:none}
.cfp-p{display:flex;align-items:center;gap:14px;padding:12px 0;border-top:1px solid var(--rule);max-width:none}
.cfp-p:first-child{border-top:0;padding-top:2px}
.cfp-p>div{flex:1;min-width:0}
.cfp-p b{font-size:15px;font-weight:600}
.cfp-p b a{color:var(--ink);text-decoration:none}
.cfp-p b a:hover{text-decoration:underline}
.cfp-p small{display:block;font-size:13.5px;color:var(--slate);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cfp-p small.q{color:var(--signal-text,#9A3412)}
.cfp-av-a{flex:none;text-decoration:none}
.cfp-sw{position:relative;display:inline-flex;align-items:center;gap:10px;font-size:14px;color:var(--slate);white-space:nowrap;cursor:pointer}
.cfp-sw input{position:absolute;opacity:0;width:40px;height:24px;margin:0;cursor:pointer}
.cfp-sw i{width:40px;height:24px;border-radius:12px;background:var(--rule-strong);position:relative;transition:background .15s}
.cfp-sw i::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:left .15s}
.cfp-sw input:checked+i{background:var(--status,#1E6B3A)}
.cfp-sw input:checked+i::after{left:19px}
.cfp-sw input:focus-visible+i{outline:2px solid var(--signal);outline-offset:2px}
.cfp-sw.on{color:var(--ink)}
.cfp-recent{margin-top:10px;border-top:1px solid var(--rule);padding-top:10px}
.cfp-recent summary{cursor:pointer;font-size:14px;font-weight:600;color:var(--slate)}
.cfp-recent ul{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:4px;max-width:none}
.cfp-recent li{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;color:var(--body);max-width:none}
.cfp-recent .mono{font-size:12px;color:var(--slate)}

/* files */
.cfp-files{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;max-width:none}
.cfp-f{display:flex;align-items:center;gap:4px;padding:10px 6px 10px 10px;border-radius:0 12px 0 12px;background:var(--paper);max-width:none;min-width:0}
.cfp-f-a{display:flex;align-items:center;gap:12px;flex:1;min-width:0;text-decoration:none;color:var(--ink)}
.cfp-f .ty{width:36px;height:42px;flex:none;border-radius:0 8px 0 8px;background:#fff;display:grid;place-items:center;font-family:var(--mono);font-size:10px;color:var(--slate)}
.cfp-f .min0{min-width:0}
.cfp-f b{display:block;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cfp-f-a:hover b{text-decoration:underline}
.cfp-f small{display:block;font-size:12.5px;color:var(--slate)}
.cfp-f small.sh{color:var(--status,#1E6B3A)}
.cfp-f small.wt{color:#9A3412}
.cfp-files>li:last-child{max-width:none}
.cfp-drop{display:grid;place-items:center;text-align:center;height:100%;min-height:62px;border:2px dashed var(--rule-strong);border-radius:0 12px 0 12px;font-size:14px;color:var(--slate);cursor:pointer;padding:8px}
.cfp-drop b{display:block;color:var(--ink)}
.cfp-drop small{font-size:12.5px}
.cfp-drop:hover,.cfp-drop.over{border-color:var(--signal);background:#FDF5F0}

/* By the room the column has, not the window: the side panel takes a share of it. */
.cfp{container-type:inline-size}
@container (max-width:820px){.cfp-top{grid-template-columns:200px minmax(0,1fr);gap:20px}.cfp-thumb{height:200px}}
@container (max-width:640px){.cfp-top{grid-template-columns:minmax(0,1fr)}.cfp-thumb{height:150px;max-width:none}.cfp-thumb .cols{display:none}.cfp-steps small{white-space:normal}}
@media (max-width:700px){
  .cfp-card{padding:18px 16px}
  .cfp-up{grid-template-columns:minmax(0,1fr) auto}
  .cfp-up .d{grid-column:1/-1}
  .cfp-up .seen{grid-column:1}
  .cfp-p{flex-wrap:wrap}
  .cfp-sw span{display:none}
  .cfp-ask{flex-wrap:wrap}
}
.cfp a,.cfp a:hover{border-bottom:0;box-shadow:none}.cfp-steps a:hover,.cfp-p b a:hover{text-decoration:underline}
@container (max-width:520px){
  .cfp-thumb{height:120px}.cfp-thumb .you{display:none}
  .cfp-ask{display:grid;grid-template-columns:24px minmax(0,1fr) 36px;grid-template-areas:"c t d" ". s .";gap:6px 12px;align-items:start}
  .cfp-ask .ic{display:none}
  .cfp-ask .cfp-check{grid-area:c;margin-top:2px}
  .cfp-ask>div{grid-area:t}
  .cfp-ask .cfp-chip{grid-area:s;justify-self:start}
  .cfp-ask .cfp-dots{grid-area:d;margin-top:-6px}
  .cfp-write>span:first-child{font-size:14px}
  .cfp-up .pics a{width:72px;height:52px}
}

/* ---------- Forms, clearer (accessibility pass, 2026-10) ----------
   Every box to type in is a white box with a whole edge you can see (3.6:1 on white,
   over the 3:1 an edge needs), so where it starts and stops is never a guess. The edge
   darkens on hover; in it, it is the orange ring. A row of choices is a row of separate
   buttons, the chosen one filled with a tick. A switch is grey and empty when off, green
   with a tick when on, so off and on differ in more than colour. Quick dates are buttons
   big enough to press. A switch has the row to itself. A missing answer is said in words
   with a mark beside them. Applies to forms and dialogs only: search boxes and the like
   keep their own look. */
:root{--f-edge:#858D96}
body.staff :is(.form,dialog) :is(.input,textarea,select){background:var(--white);box-shadow:inset 0 0 0 1.5px var(--f-edge);border-radius:0 10px 0 10px}
body.staff :is(.form,dialog) :is(.input,textarea,select):hover{background:var(--white);box-shadow:inset 0 0 0 1.5px var(--ink)}
body.staff :is(.form,dialog) :is(.input,textarea,select):focus{background:var(--white);box-shadow:inset 0 0 0 2.5px var(--signal),0 0 0 4px rgba(194,65,12,.14);outline:none}
body.staff :is(.form,dialog) :is(.input,textarea)[aria-invalid=true]{box-shadow:inset 0 0 0 2.5px var(--signal);background:#FFF8F4}
body.staff :is(.form,dialog) .input[readonly]{background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--rule)}
body.staff :is(.form,dialog) :is(.input,textarea)::placeholder{color:#6B737D;opacity:1}
body.staff .form .money-in .pre{color:var(--slate)}
/* the big title field stays a line to write on, with a clearer line */
.form .field.big .input{box-shadow:inset 0 -2px 0 var(--f-edge);border-radius:0;background:transparent}
.form .field.big .input:hover{box-shadow:inset 0 -2px 0 var(--ink);background:transparent}
.form .field.big .input:focus{box-shadow:inset 0 -3px 0 var(--signal);background:transparent}
/* labels and hints */
.form .field>label,.form .field>.lab{font-size:15px;font-weight:600;color:var(--ink)}
.form .field .hint{font-size:14px;line-height:1.45;color:#4F5761;margin-top:-2px}
.form .field>:not(.lab)+.hint{margin-top:2px}
.form .opt-l{font-weight:400;color:#4F5761}
/* a row of choices: separate buttons */
.form .pick{display:flex;flex-wrap:wrap;gap:8px;padding:0;background:none;box-shadow:none;border-radius:0}
.form .pick-o span{min-height:42px;padding:9px 15px;background:var(--white);box-shadow:inset 0 0 0 1.5px var(--f-edge);border-radius:0 10px 0 10px;font-weight:500}
.form .pick-o:hover span{background:var(--white);box-shadow:inset 0 0 0 1.5px var(--ink)}
.form .pick-o input:checked+span{background:var(--ink);color:var(--paper);box-shadow:inset 0 0 0 1.5px var(--ink);font-weight:600}
.form .pick-o input:focus-visible+span{outline:2.5px solid var(--signal);outline-offset:2px}
/* the switch */
.check.switch{min-height:44px;font-size:15px;font-weight:500}
.check.switch input[type=checkbox]{width:48px;height:28px;background:var(--white);box-shadow:inset 0 0 0 1.5px var(--f-edge);border-radius:0 9px 0 9px}
.check.switch input[type=checkbox]::after{top:4px;left:4px;width:20px;height:20px;background:var(--f-edge);border-radius:0 6px 0 6px}
.check.switch input[type=checkbox]:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.check.switch input[type=checkbox]:checked{background:var(--status,#1E6B3A);box-shadow:none}
.check.switch input[type=checkbox]:checked::after{transform:translateX(20px);background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7' fill='none' stroke='%231E6B3A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.form .cols>.field:has(>.check.switch){grid-column:1/-1}
@media (forced-colors:active){.check.switch input[type=checkbox]{border:1px solid CanvasText}.check.switch input[type=checkbox]:checked::after{background:Highlight}}
/* quick dates are buttons */
.dq{min-height:34px;padding:6px 12px;font-size:13.5px;font-weight:600;text-decoration:none;background:var(--white);box-shadow:inset 0 0 0 1.5px var(--rule-strong);border-radius:0 8px 0 8px}
.dq:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.date-in .date-quick{display:flex;gap:6px;flex-wrap:wrap}
/* what is missing, said with a mark as well as colour */
.form .f-err{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:14px;font-weight:600;color:#A3360A}
.form .f-err::before{content:"!";display:grid;place-items:center;width:18px;height:18px;flex:none;border-radius:50%;background:#A3360A;color:#fff;font-size:12px;font-weight:700}
#dlg-err{display:flex;gap:8px;padding:10px 12px;background:#FFF1E9;color:#8A2E08;border-radius:0 10px 0 10px;font-weight:600}
#dlg-err[hidden]{display:none}
/* the foot of a long form shows there is more above it */
dialog .form>.btn-row{box-shadow:0 -10px 18px -14px rgba(18,22,27,.35)}
/* "Add notes" and More options read as things to press */
.more-f{min-height:40px}
.more-f:focus-visible{outline:2.5px solid var(--signal);outline-offset:2px}

/* Phones: the apps and services row in Mail spans the whole card. Each conversation row
   is a grid on a phone, and this row's one cell was falling into the narrow first column,
   one letter to a line. */
@media (max-width:700px){
  .mail-list tr.mail-bundle{display:block;padding:0;box-shadow:none}
  .mail-list tr.mail-bundle td{display:block;width:100%;grid-area:auto}
  .mail-list .m-bundle{gap:12px;padding:14px 12px;align-items:flex-start}
  .mail-list .m-bundle .m-bw b{font-size:15.5px}
  .mail-list .m-bundle .m-bn{flex-direction:column;align-items:flex-end;gap:8px;padding-top:2px}
}
@media (max-width:700px){#view:has(.mail-list){padding-bottom:84px}}

/* ---------- Forms with pictures (2026-10) ----------
   A short row of choices is a row of tiles: a client is their mark, a person their face,
   a kind of thing its drawing. The chosen tile has a dark edge and a tick in its corner.
   A date ahead is the next seven days to tap, with the calendar box beside them for any
   other day. The name of the thing is written large on a line. Money is a big figure. */
.form .pick.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px;width:100%}
.form .pick.tiles .pick-o{display:flex}
.form .pick.tiles .pick-o>span{position:relative;flex:1;display:grid;justify-items:center;align-content:center;gap:8px;min-height:64px;padding:14px 10px 12px;text-align:center;line-height:1.25;background:var(--white);box-shadow:inset 0 0 0 1.5px var(--rule-strong);border-radius:0 14px 0 14px;font-weight:600;font-size:14px}
.form .pick.tiles .pick-o>span::before{display:none!important}
.form .pick.tiles .pick-o:hover>span{box-shadow:inset 0 0 0 1.5px var(--ink);background:var(--white)}
.form .pick.tiles .pick-o input:checked+span{background:#FAF9F7;color:var(--ink);box-shadow:inset 0 0 0 2.5px var(--ink)}
.form .pick.tiles .pick-o input:checked+span::after{content:"";position:absolute;top:7px;right:7px;width:20px;height:20px;border-radius:50%;background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-6.5' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.form .pick.tiles .pick-o input:focus-visible+span{outline:2.5px solid var(--signal);outline-offset:2px}
.form .pick.tiles b{font-weight:600}
.pick-pic{display:grid;place-items:center;min-height:44px;font-style:normal;color:var(--ink)}
.form .pick .pick-pic span{padding:0;min-height:0;gap:0;font-weight:600;line-height:1;box-shadow:none;background:none}
.form .pick .pick-pic .cmark{display:grid;place-items:center;width:44px;height:44px;font-size:14px;background:var(--white);box-shadow:inset 0 0 0 1px var(--rule-strong);border-radius:0 12px 0 12px;overflow:hidden}
.form .pick .pick-pic .cmark img{width:100%;height:100%;object-fit:contain}
.form .pick .pick-pic .avatar{display:grid;place-items:center;border-radius:50%;background:var(--ink);color:var(--paper);overflow:hidden}
.pick-pic .cmark{border-radius:0 12px 0 12px}
/* faces */
.form .pick.faces{display:flex;flex-wrap:wrap;gap:6px 18px;width:100%}
.form .pick.faces .pick-o>span{display:grid;justify-items:center;gap:7px;min-height:0;padding:4px 2px;background:none!important;box-shadow:none!important;font-size:13.5px;font-weight:600;color:var(--slate)}
.form .pick.faces .pick-o>span::before{display:none!important}
.form .pick.faces .pick-pic{min-height:0}
.form .pick.faces .pick-pic .avatar{width:52px!important;height:52px!important;border-radius:50%;font-size:17px!important;box-shadow:0 0 0 3px var(--white),0 0 0 5px var(--rule-strong)}
.form .pick.faces .pick-pic .avatar.both{background:var(--white);color:var(--slate);font-weight:700}
.form .pick.faces .pick-o:hover .avatar{box-shadow:0 0 0 3px var(--white),0 0 0 5px var(--ink)}
.form .pick.faces .pick-o input:checked+span{color:var(--ink)}
.form .pick.faces .pick-o input:checked+span .avatar{box-shadow:0 0 0 3px var(--white),0 0 0 6px var(--ink)}
.form .pick.faces .pick-o input:focus-visible+span{outline:2.5px solid var(--signal);outline-offset:4px;border-radius:12px}
/* days ahead */
.date-ahead{display:grid;gap:10px}
.dstrip{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;max-width:520px}
.dday{display:grid;justify-items:center;gap:1px;padding:8px 0 7px;border:0;border-radius:0 12px 0 12px;background:var(--white);box-shadow:inset 0 0 0 1.5px var(--rule-strong);font:inherit;font-size:12px;color:var(--slate);cursor:pointer}
.dday b{font-size:19px;font-weight:600;color:var(--ink);line-height:1.2}
.dday.we{background:#FAF9F7}
.dday:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.dday.on{background:var(--ink);color:#C9CDD2;box-shadow:none}
.dday.on b{color:#fff}
.dday:focus-visible{outline:2.5px solid var(--signal);outline-offset:2px}
.date-other{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13.5px;color:var(--slate)}
.date-other .input{width:auto;flex:0 1 200px}
.dclear{font:inherit;font-size:13.5px;font-weight:600;color:var(--ink);background:none;border:0;padding:6px 4px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
/* money, big */
.form .money-in .input{font-size:26px;font-weight:600;letter-spacing:-.01em;padding-top:8px;padding-bottom:8px}
.form .money-in .pre{font-size:20px}
@media (max-width:700px){
  .form .pick.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dstrip{gap:4px}.dday b{font-size:17px}
}

/* Long forms, shorter: client tiles sit as one row each of mark and name, the kind
   tiles are tighter, and the folded part is plain to find. */
.form .pick.tiles.clients{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px}
.form .pick.tiles.clients .pick-o>span{grid-template-columns:auto 1fr;justify-items:start;align-items:center;text-align:left;gap:12px;min-height:0;padding:9px 34px 9px 10px}
.form .pick.tiles.clients .pick-pic{min-height:0}
.form .pick.tiles.clients .pick-pic .cmark{width:36px;height:36px;font-size:12.5px}
.form .pick.tiles.clients .pick-o input:checked+span::after{top:50%;transform:translateY(-50%);right:9px}
.form .pick.tiles.pics:not(.clients) .pick-o>span{min-height:0;padding:11px 8px 9px;gap:5px}
.form .pick.tiles.pics:not(.clients) .pick-pic{min-height:30px}
.f-more{margin-top:10px;border:0;background:var(--paper);border-radius:0 14px 0 14px;padding:0 16px}
.f-more>summary{padding:14px 0;font-size:15px}
.f-more[open]{padding-bottom:12px}
.f-more>.cols{padding-top:4px}

/* ---------- Every form in the staff area, one look (2026-10) ----------
   The boxes outside the pop-up forms (Settings, the questionnaire, the project fields,
   the lists you add to, the filters above a table) look the same as inside them: white,
   with a whole edge you can see, darker on hover and the orange ring when you are in it.
   Tick boxes and round buttons are larger, ink when on, with the orange ring on focus.
   Lines that are meant to read as lines (an email's To and Subject, a big title) keep
   their line. */
body.staff :is(.input,textarea,select):not(.c-line,.qn-q,.qn-sub,.qn-secname,.tm-gap){background:var(--white);box-shadow:inset 0 0 0 1.5px var(--f-edge);border-radius:0 10px 0 10px}
body.staff :is(.input,textarea,select):not(.c-line,.qn-q,.qn-sub,.qn-secname,.tm-gap):hover{background:var(--white);box-shadow:inset 0 0 0 1.5px var(--ink)}
body.staff :is(.input,textarea,select):not(.c-line,.qn-q,.qn-sub,.qn-secname,.tm-gap):focus{background:var(--white);box-shadow:inset 0 0 0 2.5px var(--signal),0 0 0 4px rgba(194,65,12,.14);outline:none}
body.staff :is(.input,textarea)[aria-invalid=true]{box-shadow:inset 0 0 0 2.5px var(--signal);background:#FFF8F4}
body.staff .input[readonly]{background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--rule)}
body.staff :is(.input,textarea)::placeholder{color:#6B737D;opacity:1}
body.staff .input.sm{border-radius:0 8px 0 8px}
/* tick boxes and round buttons that are on show */
body.staff label.check>input[type=checkbox]:not([role=switch]),body.staff label.check>input[type=radio],body.staff td input[type=checkbox],body.staff .act-list input[type=checkbox],body.staff .todo input[type=checkbox]{width:20px;height:20px;accent-color:var(--ink);cursor:pointer;flex:none}
body.staff label.check>input:focus-visible,body.staff td input[type=checkbox]:focus-visible{outline:2.5px solid var(--signal);outline-offset:2px}
body.staff label.check{gap:10px;min-height:32px;align-items:center}
/* an email's From, To and Subject read as the lines of a letter */
body.staff .c-row :is(.input,select){background:transparent!important;box-shadow:none!important;border-radius:0}
body.staff .c-row:focus-within{box-shadow:inset 0 -2px 0 var(--signal)}

/* ---------- Drop-downs as pictures (app-picker.js) ----------
   The button is the size of the box it stands in for: a small picture, what it is set to,
   and a chevron. The panel under it is tiles: faces, client marks, drawings, or words. */
.pk-real{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;overflow:hidden}
.pk-btn{display:inline-flex;align-items:center;gap:10px;width:100%;min-height:46px;padding:7px 12px 7px 10px;border:0;background:var(--white);color:var(--ink);font:inherit;font-size:15px;text-align:left;cursor:pointer;box-shadow:inset 0 0 0 1.5px var(--f-edge,#858D96);border-radius:0 10px 0 10px}
.pk-btn.sm{min-height:36px;padding:4px 10px 4px 8px;font-size:13.5px;gap:8px;border-radius:0 8px 0 8px;width:auto}
.pk-btn:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.pk-btn:focus-visible,.pk-btn[aria-expanded=true]{outline:none;box-shadow:inset 0 0 0 2.5px var(--signal),0 0 0 4px rgba(194,65,12,.14)}
.pk-btn:disabled{opacity:.6;cursor:default}
.pk-t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pk-chev{flex:none;width:8px;height:8px;margin:0 4px 3px 4px;border:solid currentColor;border-width:0 1.7px 1.7px 0;transform:rotate(45deg);color:var(--slate)}
.pk-btn[aria-expanded=true] .pk-chev{transform:rotate(-135deg);margin-bottom:-3px}
.pk-pic{flex:none;display:grid;place-items:center;width:28px;height:28px;color:var(--ink)}
.pk-btn.sm .pk-pic{width:22px;height:22px}
.pk-pic .avatar,.pk-pic .cmark{width:28px!important;height:28px!important;font-size:10.5px!important}
.pk-btn.sm .pk-pic .avatar,.pk-btn.sm .pk-pic .cmark{width:22px!important;height:22px!important;font-size:9px!important}
.pk-pic .avatar{border-radius:50%}
.pk-av.any{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--paper);color:var(--slate)}
.pk-av.any svg{width:16px;height:16px}
.pk-panel{position:fixed;z-index:1000;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px;max-height:min(380px,60vh);overflow:auto;padding:8px;background:var(--white);border-radius:0 16px 0 16px;box-shadow:0 18px 44px -14px rgba(18,22,27,.4),0 0 0 1px var(--rule)}
.pk-panel:not(.pics){grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
.pk-o{position:relative;display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 30px 8px 10px;border-radius:0 10px 0 10px;box-shadow:inset 0 0 0 1.5px var(--rule);font-size:14px;font-weight:500;line-height:1.25;cursor:pointer;color:var(--ink)}
.pk-panel.pics .pk-o{flex-direction:column;justify-content:center;text-align:center;gap:6px;padding:12px 8px 10px;min-height:78px}
.pk-o:hover,.pk-o.at{box-shadow:inset 0 0 0 1.5px var(--ink)}
.pk-o.at{outline:2.5px solid var(--signal);outline-offset:1px}
.pk-o.on{box-shadow:inset 0 0 0 2.5px var(--ink);background:#FAF9F7;font-weight:600}
.pk-o.on::after{content:"";position:absolute;top:6px;right:6px;width:18px;height:18px;border-radius:50%;background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-6.5' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
.pk-panel:not(.pics) .pk-o.on::after{top:50%;transform:translateY(-50%)}
.pk-panel.pics .pk-pic{width:34px;height:34px}
.pk-panel.pics .pk-pic svg{width:24px;height:24px}
.pk-panel .pk-pic .avatar,.pk-panel .pk-pic .cmark{width:34px!important;height:34px!important;font-size:12px!important}
@media (max-width:700px){.pk-panel{grid-template-columns:repeat(2,minmax(0,1fr))!important;left:12px!important;right:12px;width:auto!important}}
@media (forced-colors:active){.pk-o.on{outline:2px solid Highlight}}

/* ---------- Set-up, Business: one part at a time, each with its picture (app-setup-pics.js) ---------- */
@media (min-width:701px){
  .set-wrap.sv-one{max-width:1180px}
  .set-wrap.sv-one>.set-sec:not(.sv-on),.set-wrap.sv-one>.set-shared:not(.sv-on){display:none}
  .set-nav a.on{background:var(--ink);color:var(--paper)}
  .set-nav a.on svg{color:var(--paper)}
  .set-sec.has-sv{display:grid;grid-template-columns:minmax(0,1fr) 320px;grid-template-rows:auto 1fr auto;column-gap:8px}
  .set-sec.has-sv>.set-all{display:none}
  .set-sec.has-sv>.set-head{grid-column:1/-1}
  .set-sec.has-sv>.set-body{grid-column:1;grid-row:2}
  .set-sec.has-sv>.sv{grid-column:2;grid-row:2;align-self:start;position:sticky;top:16px;margin:6px 24px 16px 0}
  .set-sec.has-sv>.set-foot{grid-column:1/-1;grid-row:3}
  .set-sec.has-sv .set-row{grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr)}
}
@media (max-width:700px){.sv{margin:0 18px 6px}}
.sv{display:grid;gap:12px;padding:16px;background:var(--paper);border-radius:0 18px 0 18px;font-size:13px;color:var(--slate)}
.sv-cap{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--slate)}
.sv-off{font-family:var(--sans);letter-spacing:0;text-transform:none;font-size:11.5px;font-weight:600;padding:2px 8px;border-radius:0 6px 0 6px;background:var(--white);color:var(--ink)}
.sv .miss{color:#9A3412}
.sv .mono{font-family:var(--mono)}
.sv b{color:var(--ink)}
/* the site */
.sv-site{background:var(--white);border-radius:0 12px 0 12px;overflow:hidden;box-shadow:0 0 0 1px var(--rule)}
.sv-bar{display:flex;align-items:center;gap:5px;height:22px;padding:0 8px;background:var(--rule-soft)}
.sv-bar i{width:6px;height:6px;border-radius:50%;background:var(--rule-strong)}
.sv-bar span{margin-left:6px;font-family:var(--mono);font-size:9.5px}
.sv-site-in{display:grid;gap:7px;padding:12px 14px 16px;background:var(--ink);color:var(--paper)}
.sv-nav{display:flex;align-items:center;gap:6px;margin-bottom:6px}
.sv-nav b{color:#fff;font-size:10px;letter-spacing:.12em;margin-right:auto}
.sv-nav span{width:22px;height:4px;border-radius:2px;background:#3A414A}
.sv-avail{justify-self:start;display:inline-flex;align-items:center;gap:7px;padding:4px 10px;border-radius:0 8px 0 8px;background:#1E242C;color:#fff;font-size:11.5px;font-weight:600}
.sv-avail i{width:7px;height:7px;border-radius:50%;background:#3CCB7F;box-shadow:0 0 0 3px rgba(60,203,127,.2)}
.sv-avail.off{color:#8A929B;font-weight:500;font-style:italic}
.sv-h1{color:#fff;font-size:17px;font-weight:600;line-height:1.15;letter-spacing:-.01em}
.sv-l{height:5px;border-radius:3px;background:#3A414A}.sv-l.s{width:60%}
.sv-btn{justify-self:start;margin-top:4px;padding:5px 10px;font-size:10px;font-weight:600;background:var(--signal);color:#fff;border-radius:0 6px 0 6px}
/* invoice */
.sv-inv{display:grid;gap:9px;padding:14px;background:var(--white);border-radius:0 12px 0 12px;box-shadow:0 0 0 1px var(--rule);color:var(--ink)}
.sv-inv-top{display:flex;gap:10px;align-items:center}
.sv-mark{width:30px;height:30px;flex:none;display:grid;place-items:center;background:var(--ink);color:#fff;font-weight:700;border-radius:0 8px 0 8px}
.sv-inv-top b{display:block;font-size:14px}.sv-inv-top small{display:block;font-size:11.5px;color:var(--slate)}
.sv-inv-who{display:grid;font-size:11.5px;color:var(--slate);line-height:1.45}
.sv-inv-k{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate)}
.sv-inv-rows{display:grid;gap:5px}.sv-inv-rows span{height:6px;border-radius:3px;background:var(--rule-soft)}.sv-inv-rows .s{width:55%}
.sv-inv-pay{display:grid;gap:2px;padding:9px 10px;background:var(--paper);border-radius:0 8px 0 8px;font-size:12px}
.sv-inv-pay b{font-size:12.5px}
.sv-inv-terms{margin:0;font-size:11px;line-height:1.45;color:var(--slate);max-width:none}
/* chasing */
.sv-chase p{margin:6px 0 0;font-size:12.5px;line-height:1.45;max-width:none}
.sv-track{position:relative;height:74px;margin:6px 10px 0 4px}
.sv-track::before{content:"";position:absolute;left:6px;right:6px;top:15px;height:2px;background:var(--rule-strong)}
.sv-track i{position:absolute;top:0;display:grid;justify-items:center;gap:2px;transform:translateX(-50%);font-style:normal;text-align:center}
.sv-track i>svg,.sv-due::before{display:grid;place-items:center;width:30px;height:30px;padding:6px;box-sizing:border-box;border-radius:50%;background:var(--white);box-shadow:0 0 0 1.5px var(--rule-strong);color:var(--ink)}
.sv-due{transform:none!important}
.sv-due::before{content:"";width:14px;height:14px;padding:0;margin:8px 0 6px;background:var(--ink);box-shadow:none}
.sv-track b{font-size:11.5px}.sv-track small{font-size:10.5px}
.sv-rem>svg{background:#FDECE2!important;color:#C2410C!important;box-shadow:none!important}
.sv-call>svg{background:var(--ink)!important;color:#fff!important;box-shadow:none!important}
.sv-chase.off .sv-track{opacity:.45;filter:grayscale(1)}
/* prices */
.sv-figs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.sv-figs div{display:grid;padding:9px 8px;background:var(--white);border-radius:0 10px 0 10px}
.sv-figs b{font-size:17px;letter-spacing:-.01em}.sv-figs small{font-size:11px}
.sv-rings{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.sv-ring{display:flex;align-items:center;gap:8px;padding:6px 8px;background:var(--white);border-radius:0 10px 0 10px}
.sv-ring .bg{fill:none;stroke:var(--rule-soft);stroke-width:6}.sv-ring .fg{fill:none;stroke:var(--signal);stroke-width:6;stroke-linecap:round}
.sv-ring text{font:600 11px var(--sans);fill:var(--ink)}
.sv-ring small{font-size:11.5px;line-height:1.3;color:var(--ink)}
.sv-places{display:flex;flex-wrap:wrap;align-items:center;gap:5px}
.sv-places i{width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--slate)}
.sv-places i.on{background:var(--ink);box-shadow:none}
.sv-places small{flex-basis:100%;font-size:11.5px}
.sv-pay{display:grid;gap:4px}.sv-pay small{font-size:11.5px}
.sv-seg{display:flex;gap:2px;height:24px}
.sv-seg span{display:grid;place-items:center;min-width:0;overflow:hidden;white-space:nowrap;font-size:10.5px;font-weight:600;background:var(--white);color:var(--ink);border-radius:0 5px 0 5px}
.sv-seg .a{background:var(--ink);color:#fff}
.sv-seg .m{background:#D9D6CF}
/* calls */
.sv-week{position:relative;display:grid;grid-template-columns:30px repeat(7,1fr);gap:3px}
.sv-hrs{position:relative;grid-row:1;margin-top:18px}
.sv-hrs span{position:absolute;right:2px;transform:translateY(-50%);font-size:9.5px}
.sv-day{display:grid;grid-template-rows:16px 150px;gap:2px;text-align:center}
.sv-day b{font-size:10.5px;font-weight:600}
.sv-col{position:relative;background:var(--white);border-radius:0 6px 0 6px}
.sv-col i{position:absolute;left:2px;right:2px;background:var(--signal);border-radius:0 4px 0 4px;opacity:.85}
.sv-week.off .sv-col i{background:var(--slate);opacity:.35}
.sv-len{display:flex;gap:2px;height:24px;font-size:10.5px;font-weight:600}
.sv-len span{display:grid;place-items:center;white-space:nowrap;overflow:hidden;border-radius:0 5px 0 5px}
.sv-len .c{background:var(--ink);color:#fff}.sv-len .g{background:var(--white);color:var(--slate)}
.sv-note{margin:0;font-size:12px;line-height:1.45;max-width:none}
/* friday */
.sv-mail{display:grid;gap:10px;padding:12px;background:var(--white);border-radius:0 12px 0 12px;box-shadow:0 0 0 1px var(--rule)}
.sv-mail-h{display:flex;align-items:center;gap:8px;color:var(--ink)}.sv-mail-h small{margin-left:auto;font-size:11px;color:var(--slate)}
.sv-mail-n{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.sv-mail-n div{display:grid;padding:7px;background:var(--paper);border-radius:0 8px 0 8px}
.sv-mail-n b{font-size:16px}.sv-mail-n small{font-size:10.5px}
.sv-mail-l{display:grid;gap:5px}.sv-mail-l span{height:6px;border-radius:3px;background:var(--rule-soft)}.sv-mail-l .s{width:60%}
.sv-mail-f{font-size:11.5px}
.sv-mail.off{opacity:.45;filter:grayscale(1)}
/* social */
.sv-plat{display:flex;align-items:center;gap:10px;padding:8px 10px;background:var(--white);border-radius:0 10px 0 10px}
.sv-pi{width:32px;height:32px;flex:none;display:grid;place-items:center;border-radius:0 9px 0 9px;color:#fff}
.sv-plat.fb .sv-pi{background:#1877F2}.sv-plat.ig .sv-pi{background:linear-gradient(135deg,#F58529,#DD2A7B 55%,#8134AF)}.sv-plat.li .sv-pi{background:#0A66C2}
.sv-plat.none .sv-pi{background:var(--rule-strong)}
.sv-plat b{display:block;font-size:13px}.sv-plat small{display:block;font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sv-plat.none small{color:#9A3412}
.sv-plat>div{min-width:0}
.sv-clock{display:flex;align-items:center;gap:10px;padding:6px 10px;background:var(--white);border-radius:0 10px 0 10px}
.sv-clock .face{fill:var(--white);stroke:var(--ink);stroke-width:2}.sv-clock line{stroke:var(--ink);stroke-width:1.4;stroke-linecap:round}
.sv-clock .hh{stroke-width:2.6}.sv-clock .mm{stroke:var(--signal);stroke-width:1.8}
.sv-clock b{display:block;font-size:16px}.sv-clock small{font-size:11.5px}
.sv-tags{display:grid;gap:6px}
.sv-tags div{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.sv-tags small{flex-basis:100%;font-size:11px;color:var(--ink);font-weight:600}
.sv-tags span{padding:2px 7px;font-size:11px;background:var(--white);border-radius:0 6px 0 6px;color:var(--ink)}
.sv-tags span.none{color:var(--slate);font-style:italic}

/* Set-up, the other parts: pictures where there were words (app-setup-pics2.js) */
.sp-ic{display:inline-grid;place-items:center;width:28px;height:28px;margin-right:10px;vertical-align:middle;background:var(--paper);color:var(--ink);border-radius:0 8px 0 8px;flex:none}
.todo-title{display:inline-flex;align-items:center;text-align:left}
.todo.done .sp-ic{opacity:.55}
.todo-meta .tag.sp-who{display:inline-flex;align-items:center;gap:6px;padding:2px 9px 2px 2px;font-size:11px;background:var(--paper);color:var(--ink);border-radius:0 10px 0 10px}
.todo.by-owner .todo-meta .tag.sp-who,.todo.by-other .todo-meta .tag.sp-who{background:var(--paper);color:var(--ink)}
.sp-who .avatar,.sp-who .sp-any{flex:none}
.sp-any{display:inline-grid;place-items:center;background:var(--ink);color:var(--paper);border-radius:50%}
.todo-note.sp-clamp{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:normal}
.todo-note.sp-clamp.sp-open{display:block;-webkit-line-clamp:unset;white-space:pre-wrap}
.todo-body>.todo-note,.todo-body>.sp-more{margin-left:38px}
.todo-body>.todo-meta{margin-left:38px}
.sp-more{display:block;align-self:flex-start;justify-self:start;text-align:left;background:none;border:0;padding:2px 0;font:inherit;font-size:12px;font-weight:600;color:var(--signal);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.sp-whos{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 6px}
.sp-w{position:relative;display:flex;align-items:center;gap:10px;min-width:150px;padding:9px 16px 13px 9px;background:var(--paper);border:1.5px solid transparent;font:inherit;color:var(--ink);text-align:left;cursor:pointer;border-radius:0 12px 0 12px;overflow:hidden}
.sp-w:hover{border-color:var(--f-edge,#858D96)}
.sp-w.on{background:var(--ink);color:var(--paper)}
.sp-w:focus-visible{outline:2.5px solid var(--signal);outline-offset:2px}
.sp-wt{display:flex;flex-direction:column;line-height:1.2}
.sp-wt b{font-size:14px}
.sp-wt small{font-size:12px;opacity:.75}
.sp-all{display:grid;place-items:center;width:34px;height:34px;background:var(--signal);color:#fff;font-weight:700;font-size:14px;border-radius:0 9px 0 9px}
.sp-share{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(18,22,27,.08)}
.sp-share>i{display:block;height:100%;background:var(--signal)}
.sp-w.on .sp-share{background:rgba(255,255,255,.15)}
.todo.sp-hide{display:none}
/* board columns */
#st-list .fe-row{grid-template-columns:28px 34px minmax(0,1fr) auto auto}
.sp-st{display:grid;place-items:center;width:34px;height:34px;background:var(--white);color:var(--ink);border-radius:0 9px 0 9px}
.fe-row.on .sp-st{background:var(--signal);color:#fff}
.fe-type[data-sp]{display:inline-flex;align-items:center;gap:8px}
.sp-dots{display:inline-flex;gap:3px}
.sp-dots i{width:7px;height:7px;border-radius:50%;background:var(--signal)}
.sp-dots i.none{background:none;box-shadow:inset 0 0 0 1.5px var(--f-edge,#858D96)}
.sp-flow{display:flex;align-items:stretch;gap:0;overflow-x:auto;padding:16px 14px 18px;margin:-1px 0 10px;border-bottom:1px solid var(--rule-soft);scrollbar-width:thin}
.sp-col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:5px;padding:9px 2px 8px;background:var(--paper);border-radius:0 10px 0 10px;cursor:pointer;text-align:center;border:1.5px solid transparent}
.sp-col:hover{border-color:var(--f-edge,#858D96)}
.sp-col.on{background:var(--ink);color:var(--paper)}
.sp-col b{font-size:11px;font-weight:600;line-height:1.15;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp-ci{display:grid;place-items:center;width:30px;height:30px;background:var(--white);color:var(--ink);border-radius:0 9px 0 9px}
.sp-col.on .sp-ci{background:var(--signal);color:#fff}
.sp-cf{display:flex;align-items:center;gap:6px;min-height:13px}
.sp-eye{display:inline-flex;color:var(--status,#1E6B3A)}
.sp-eye.off{color:var(--f-edge,#858D96)}
.sp-col.on .sp-eye{color:var(--paper)}
.sp-col .sp-dots i{width:6px;height:6px}
.sp-arr{flex:0 0 9px;align-self:center;height:2px;background:var(--f-edge,#858D96);position:relative}
.sp-arr::after{content:"";position:absolute;right:-1px;top:-3px;border:4px solid transparent;border-left:5px solid var(--f-edge,#858D96);border-right:0}
.fe-checks .sp-opt{padding:10px 12px;background:var(--paper);border-radius:0 10px 0 10px}
.fe-checks:has(.sp-opt){display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sp-opt .sp-oi{display:inline-grid;place-items:center;width:30px;height:30px;background:var(--white);color:var(--ink);border-radius:0 8px 0 8px}
.sp-opt:has(input:checked) .sp-oi{background:var(--ink);color:var(--paper)}
.sp-opt>span:not(.f-ico){flex:1;font-size:14px}
.sp-opt input{order:2}
/* questionnaire */
.qn .qlayout:has(.sp-qi){grid-template-columns:250px minmax(0,1fr)}
.qnav-item:has(.sp-qi){grid-template-columns:22px 28px minmax(0,1fr) auto}
.sp-qi{display:grid;place-items:center;width:28px;height:28px;background:var(--white);color:var(--ink);border-radius:0 8px 0 8px}
.qnav-item.on .sp-qi{background:var(--signal);color:#fff}
.sp-aw{position:relative;display:block;min-width:0}
.sp-aw>.input{width:100%;padding-left:42px}
.sp-ai{position:absolute;left:5px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:28px;height:28px;background:var(--paper);color:var(--ink);border-radius:0 7px 0 7px;pointer-events:none}
.check.switch.sp-req{gap:10px}
@media (max-width:700px){
  .sp-w{min-width:0;flex:1 1 calc(50% - 10px)}
  .sp-flow{padding:12px}
  .sp-col{flex:0 0 70px}
  .qn .qlayout:has(.sp-qi){grid-template-columns:minmax(0,1fr)}
  .fe-checks:has(.sp-opt){grid-template-columns:1fr}
  #st-list .fe-row{grid-template-columns:28px 34px minmax(0,1fr)}
  .todo-body>.todo-note,.todo-body>.sp-more,.todo-body>.todo-meta{margin-left:0}
  .fe-type[data-sp]{display:none}
}
/* the questionnaire on a phone: place the boxes by what they are, so the picture drop-downs do not push them along */
@media (max-width:900px){
  .qn-top>.pk-real,.qn-a>.pk-real{grid-column:auto;grid-row:auto}
  .qn-top>.pk-btn{grid-column:1/-1;grid-row:2;width:100%}
  .qn-top>.danger{grid-column:3;grid-row:1;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0}
  .qn-a.qn-row>.pk-btn{grid-column:2;grid-row:2;width:auto}
  .qn-a.qn-row>[data-field=lo]{grid-column:3;grid-row:2}
  .qn-a.qn-row>[data-field=hi]{grid-column:4;grid-row:2}
  .qn-a.qn-row>[data-field=part]{grid-column:2/5;grid-row:3}
  .qn-a.qn-row>.danger{grid-column:5;grid-row:2}
}

/* Clients as folders, contacts as business cards, and the new client form (app-cards.js) */
.cl-card.cf{display:flex;flex-direction:column;gap:0;padding:0;background:transparent;border-radius:0;box-shadow:none}
.cl-card.cf:hover{transform:translateY(-3px);box-shadow:none}
.cl-card.cf:hover .cf-body{box-shadow:0 14px 28px -18px rgba(18,22,27,.45)}
.cf-tab{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;height:30px;padding:0 14px 0 12px;background:var(--rule-soft);color:var(--ink);font-size:12.5px;font-weight:600;border-radius:0 10px 0 0}
.cf-body{display:flex;flex-direction:column;flex:1;background:var(--white);border-radius:0 var(--r-card) 0 var(--r-card);border-top-left-radius:0;overflow:hidden;transition:box-shadow .22s}
.cf-band{position:relative;display:block;height:78px;background:var(--rule-soft);overflow:hidden;border-top-right-radius:var(--r-card)}
.cf-big{position:absolute;right:-10px;top:-18px;color:rgba(18,22,27,.07);line-height:0}
.cf-big svg{stroke-width:1.1}
.cf-st{position:absolute;right:16px;top:14px}
.cf-mark{display:block;margin:-42px 0 0 20px;position:relative;line-height:0}
.cf-mark .cmark{width:76px!important;height:76px!important;font-size:24px!important;border-radius:0 18px 0 18px;background:var(--ink);color:var(--paper);box-shadow:0 0 0 5px var(--white)}
.cf-mark .cmark img{border-radius:0 18px 0 18px}
.cf-who{display:grid;gap:3px;padding:12px 20px 0;min-width:0}
.cf-who b{font-size:20px;font-weight:600;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cf-who small{font-size:13.5px;color:var(--slate);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cf-flow{display:flex;align-items:center;padding:16px 20px 0}
.cf-flow i{flex:1;height:3px;background:var(--rule-soft)}
.cf-flow i.done{background:var(--ink)}
.cf-flow b{flex:none;width:11px;height:11px;background:var(--rule-soft);border-radius:0 3px 0 3px}
.cf-flow b.done{background:var(--ink)}
.cf-flow b.now{width:15px;height:15px;background:var(--ink);box-shadow:0 0 0 3px var(--white),0 0 0 4.5px var(--ink);border-radius:0 4px 0 4px}
.cf-flow-l{display:flex;justify-content:space-between;gap:8px;padding:7px 20px 0;font-size:12px;color:var(--slate)}
.cf-flow-l b{color:var(--ink);font-weight:600}
.cf-next{display:flex;align-items:center;gap:8px;margin:14px 20px 0;padding:8px 10px;background:var(--paper);font-size:13px;border-radius:0 8px 0 8px}
.cf-faces{display:flex;align-items:center;gap:10px;padding:14px 20px 16px;font-size:13px;color:var(--slate)}
.cf-faces b{color:var(--ink);font-weight:600}
.cf-faces.none{padding-top:16px}
.cf-fs{display:flex}
.cf-fs .avatar{width:30px!important;height:30px!important;font-size:11px!important;border-radius:0 8px 0 8px;box-shadow:0 0 0 2px var(--white)}
.cf-fs .avatar+.avatar{margin-left:-6px}
.cf-foot{display:flex;justify-content:space-between;gap:10px;margin-top:auto;padding:12px 20px;background:var(--paper);box-shadow:inset 0 1px 0 var(--rule-soft);font-size:13.5px;color:var(--ink)}
.cf-foot b{font-weight:600}
.cl-grid:has(.cf) .cl-new{margin-top:30px;min-height:auto}
/* contacts */
.ct-card.kc{display:grid;grid-template-columns:96px minmax(0,1fr);gap:0;padding:0;overflow:hidden;min-height:176px}
.kc-side{display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px 0 14px;background:var(--ink)}
.kc-side>.avatar,.kc-side>img.avatar{width:64px!important;height:64px!important;font-size:21px!important;border-radius:0 16px 0 16px;background:var(--paper);color:var(--ink);box-shadow:0 0 0 4px rgba(242,241,238,.14)}
.kc-cm{margin-top:auto;line-height:0}
.kc-cm .cmark{border-radius:0 8px 0 8px;background:var(--paper);color:var(--ink)}
.kc-main{display:flex;flex-direction:column;gap:3px;min-width:0;padding:16px 18px 0}
.kc-name b{font-size:18px;font-weight:600}
.kc-name{color:var(--ink);text-decoration:none}
.kc-at{font-size:13px;color:var(--slate)}
.kc-rows{display:grid;gap:6px;margin:10px 0 12px;font-size:13.5px}
.kc-rows>span{display:flex;align-items:center;gap:8px;min-width:0}
.kc-rows>span>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kc-rows svg{flex:none;color:var(--slate)}
.kc-foot{display:flex;align-items:center;gap:10px;margin:auto -18px 0;padding:10px 18px;background:var(--paper)}
.kc-foot .ct-act{background:var(--white)}
.kc-lh{margin-left:auto;font-size:12.5px;color:var(--slate);text-align:right}
/* the new client form: the folder, filled in as you type */
.cn-card{margin:4px 0 18px}
.cn-card .cf-tab{height:28px}
.cn-in{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;padding:14px 18px;background:var(--rule-soft);border-radius:0 var(--r-card) 0 var(--r-card);border-top-left-radius:0;overflow:hidden}
.cn-in .cf-big{right:auto;left:42%;top:-14px}
.cn-in>.cmark{position:relative;width:56px!important;height:56px!important;font-size:18px!important;border-radius:0 14px 0 14px;background:var(--ink);color:var(--paper);box-shadow:0 0 0 4px var(--white)}
.cn-who{position:relative;display:grid;gap:4px;min-width:0}
.cn-who b{font-size:19px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cn-card .ph{color:var(--slate);font-weight:500}
.cn-code{justify-self:start;padding:2px 8px;background:var(--white);font:600 12px var(--mono);letter-spacing:.14em;border-radius:0 6px 0 6px}
.cn-person{position:relative;display:flex;align-items:center;gap:10px;padding:8px 12px 8px 8px;background:var(--white);border-radius:0 10px 0 10px;font-size:13px;max-width:260px;min-width:0}
.cn-person .avatar{border-radius:0 8px 0 8px;flex:none}
.cn-person b{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cn-person small{display:block;color:var(--slate);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cn-person>span{min-width:0}
.cn-person .ph{padding:6px 4px}
@media (max-width:700px){
  .cn-in{grid-template-columns:auto minmax(0,1fr)}
  .cn-person{grid-column:1/-1;max-width:none}
  .ct-card.kc{grid-template-columns:84px minmax(0,1fr)}
}
.cf-flow.none b{background:none;box-shadow:inset 0 0 0 1.5px var(--rule)}.cf-flow.none i{background:repeating-linear-gradient(90deg,var(--rule) 0 4px,transparent 4px 8px);height:1.5px}
.cf-flow.none b{background:none;box-shadow:inset 0 0 0 1.5px var(--rule)}.cf-flow.none i{background:repeating-linear-gradient(90deg,var(--rule) 0 4px,transparent 4px 8px);height:1.5px}
/* payment terms, as tiles */
.dstrip.dterms{grid-template-columns:repeat(5,minmax(0,1fr));max-width:600px;gap:8px;margin-top:6px}
.dterm{position:relative;gap:0;padding:12px 4px 10px}
.dterm b{font-size:22px;line-height:1.1}
.dterm .dt-w{font-size:12px;color:var(--slate)}
.dterm .dt-d{margin-top:7px;padding-top:6px;border-top:1px solid var(--rule-soft);width:78%;text-align:center;font-size:11.5px;color:var(--ink)}
.dterm i{position:absolute;top:-9px;left:50%;transform:translateX(-50%);padding:1px 7px;background:var(--paper);color:var(--ink);font:600 10px var(--mono);letter-spacing:.08em;text-transform:uppercase;border-radius:0 5px 0 5px;box-shadow:inset 0 0 0 1px var(--rule-strong)}
.dday.dterm.on .dt-w{color:#C9CDD2}.dday.dterm.on .dt-d{color:#fff;border-color:rgba(255,255,255,.2)}
@media (max-width:520px){.dstrip.dterms{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* The invoice, clean and complete (app-invoice-doc.js) */
.invoice-sheet.iv{padding:0;overflow:hidden;max-width:860px;color:var(--ink)}
.iv-band{display:flex;gap:10px;align-items:baseline;padding:12px 40px;font-size:14px}
.iv-band b{font-weight:600}
.iv-band.paid{background:var(--status-bg,#E6EFE7);color:var(--status,#1E6B3A)}
.iv-band.late{background:var(--signal-bg,#FBEDE6);color:var(--signal-text,#9A3412)}
.iv-band.void{background:var(--paper);color:var(--slate)}
.iv-top{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;padding:36px 40px 0}
.iv-brand{display:flex;align-items:center;gap:12px}
.iv-mark svg{width:38px;height:38px;display:block}
.iv-word{font-weight:600;letter-spacing:.18em;font-size:18px}
.iv-title{display:grid;justify-items:end;gap:4px}
.iv-title span{font:600 12px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--slate)}
.iv-title b{font-size:26px;font-weight:600;letter-spacing:.02em}
.iv-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.3fr);gap:0;margin:28px 40px 0;background:var(--paper);border-radius:0 14px 0 14px;overflow:hidden}
.iv-meta>div{display:grid;gap:3px;align-content:start;padding:14px 16px;box-shadow:inset -1px 0 0 var(--rule-soft)}
.iv-meta span{font-size:11.5px;color:var(--slate)}
.iv-meta b{font-size:15px;font-weight:600}
.iv-meta small{font-size:12px;color:var(--slate)}
.iv-meta .iv-due{background:var(--ink);color:var(--paper);box-shadow:none}
.iv-meta .iv-due span{color:#C9CDD2}
.iv-meta .iv-due b{font-size:24px;letter-spacing:-.01em}
.iv-parties{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding:28px 40px 6px}
.iv-l{display:block;font:600 11px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--slate);margin-bottom:8px}
.iv-parties p{margin:0;white-space:pre-line;font-size:14px;line-height:1.55;color:var(--body,#3A4048)}
.iv-parties p b{color:var(--ink);font-weight:600}
.iv-lines{padding:18px 40px 0}
.iv-lines .tbl{width:100%}
.iv-lines .tbl thead th{font:600 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--slate);padding:10px 0;border-bottom:1.5px solid var(--ink)}
.iv-lines .tbl td{padding:13px 0;border-bottom:1px solid var(--rule-soft);font-size:14.5px}
.iv-lines .tbl td.r,.iv-lines .tbl th.r{padding-left:14px}
.iv-lines .tbl tfoot td{border:0;padding-top:14px}
.invoice-sheet.iv:not(:has(tr.line)) .iv-lines tfoot{display:none}
.iv-sum{display:grid;justify-items:end;gap:6px;padding:16px 40px 0}
.iv-sum>div{display:flex;justify-content:space-between;gap:30px;min-width:280px;font-size:14px}
.iv-sum>div b{font-weight:600}
.iv-sum .iv-sum-due{padding:12px 16px;background:var(--paper);border-radius:0 10px 0 10px;font-size:16px}
.iv-sum .iv-sum-due b{font-size:20px}
.iv-sum small{font-size:12px;color:var(--slate)}
.iv-pay{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:24px;margin:26px 40px 0;padding:20px;box-shadow:inset 0 0 0 1.5px var(--rule);border-radius:0 14px 0 14px}
.iv-pay-h p{margin:0;font-size:14px;line-height:1.5}
.iv-pay dl{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px}
.iv-pay dl>div{display:grid;gap:2px}
.iv-pay dt{font-size:11.5px;color:var(--slate)}
.iv-pay dd{margin:0;font-size:15px;font-weight:600}
.iv-pay .ref dd{color:var(--ink)}
.iv-missing{margin:0;font-size:13.5px;color:var(--signal-text,#9A3412)}
.iv-notes{padding:22px 40px 0;font-size:13.5px;line-height:1.55;color:var(--body,#3A4048)}
.iv-notes p{margin:0 0 6px;white-space:pre-line}
.iv-notes b{color:var(--ink);font-weight:600;margin-right:4px}
.iv-foot{margin:28px 40px 0;padding:14px 0 24px;border-top:1px solid var(--rule-soft);font-size:12px;color:var(--slate);line-height:1.5}
.iv-foot p{margin:0 0 3px}
.iv-checks{max-width:860px;margin:14px 0;padding:14px 18px;background:var(--white);border-radius:0 var(--r-card) 0 var(--r-card);box-shadow:inset 3px 0 0 var(--signal)}
.iv-checks.all{box-shadow:inset 3px 0 0 var(--status,#1E6B3A)}
.iv-checks-h{display:block;font-weight:600;font-size:14.5px;margin-bottom:10px}
.iv-checks ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.iv-checks li{display:flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;background:var(--paper);color:var(--ink);font-size:13px;border-radius:0 9px 0 9px}
.iv-ck{display:grid;place-items:center;width:22px;height:22px;border-radius:0 6px 0 6px;flex:none}
.iv-ck svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.iv-checks li.iv-yes .iv-ck{background:var(--status,#1E6B3A);color:#fff}
.iv-checks li.iv-no .iv-ck{background:var(--signal);color:#fff}
.iv-checks.all ul{display:none}
.iv-checks.all .iv-checks-h{margin:0}
@media (max-width:760px){
  .iv-top,.iv-parties,.iv-lines,.iv-sum,.iv-notes{padding-left:20px;padding-right:20px}
  .iv-foot{margin-left:20px;margin-right:20px}
  .iv-band{padding-left:20px;padding-right:20px}
  .iv-meta{grid-template-columns:1fr 1fr;margin-left:20px;margin-right:20px}
  .iv-meta .iv-due{grid-column:1/-1}
  .iv-parties{grid-template-columns:1fr}
  .iv-pay{grid-template-columns:1fr;margin-left:20px;margin-right:20px}
  .iv-sum>div{min-width:0;width:100%}
}
@media print{
  .invoice-sheet.iv{max-width:none}
  .iv-meta .iv-due{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .iv-meta,.iv-foot,.iv-sum-due,.iv-band{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* Calls, as pictures (app-calls-pics.js) */
.vc{display:grid;gap:18px}
.vc-leaf{display:grid;justify-items:center;align-content:center;width:56px;height:62px;flex:none;background:var(--white);box-shadow:inset 0 0 0 1.5px var(--rule);border-radius:0 12px 0 12px;font-size:11px;color:var(--slate);line-height:1.15}
.vc-leaf>span:first-child{font:600 10px var(--mono);letter-spacing:.12em;text-transform:uppercase}
.vc-leaf b{font-size:22px;font-weight:600;color:var(--ink)}
.vc-leaf.big{width:96px;height:108px;background:var(--paper);box-shadow:none;border-radius:0 18px 0 18px;font-size:13px}
.vc-leaf.big b{font-size:42px;line-height:1.05}
.vc-next{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:24px;padding:22px 24px;background:var(--white);border-radius:0 var(--r-card) 0 var(--r-card)}
.vc-next-t{display:grid;gap:6px;min-width:0}
.vc-l{font:600 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--slate)}
.vc-next-t>b{font-size:24px;font-weight:600;line-height:1.2}
.vc-time{display:inline-flex;align-items:center;gap:6px;font-size:16px;font-weight:600}
.vc-who{display:inline-flex;align-items:center;gap:8px;justify-self:start;padding:3px 10px 3px 3px;background:var(--paper);border-radius:0 8px 0 8px;font-size:13px;color:var(--ink);text-decoration:none;max-width:100%}
.vc-who span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vc-who .cmark{border-radius:0 6px 0 6px}
.vc-who.none{padding:3px 10px;color:var(--slate)}
a.vc-who:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.vc-acts{display:flex;flex-wrap:wrap;gap:4px;justify-content:flex-end;align-items:center}
.vc-acts .btn{display:inline-flex;align-items:center;gap:7px}
.vc-start{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.vc-tile{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:16px;row-gap:3px;align-items:center;padding:20px 22px;background:var(--white);border:0;font:inherit;color:var(--ink);text-align:left;cursor:pointer;border-radius:0 var(--r-card) 0 var(--r-card);transition:box-shadow .15s}
.vc-tile:hover{box-shadow:inset 0 0 0 2px var(--ink)}
.vc-tile:focus-visible{outline:2.5px solid var(--signal);outline-offset:2px}
.vc-ti{grid-row:1/3;display:grid;place-items:center;width:58px;height:58px;background:var(--ink);color:var(--paper);border-radius:0 14px 0 14px}
.vc-tile b{font-size:17px;font-weight:600}
.vc-tile>span:last-child{font-size:13.5px;color:var(--slate)}
.vc-figs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.vc-figs>div{display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center;padding:14px 18px;background:var(--white);border-radius:0 14px 0 14px}
.vc-fi{grid-row:1/3;display:grid;place-items:center;width:38px;height:38px;background:var(--paper);border-radius:0 10px 0 10px}
.vc-figs b{font-size:22px;font-weight:600;line-height:1.1}
.vc-figs>div>span:last-child{font-size:12.5px;color:var(--slate)}
.vc-sec{padding:20px 22px;background:var(--white);border-radius:0 var(--r-card) 0 var(--r-card)}
.vc-sec h3{margin:0 0 14px}
.vc-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.vc-card{display:flex;gap:14px;padding:14px;background:var(--paper);border-radius:0 14px 0 14px}
.vc-card .vc-leaf{background:var(--white);box-shadow:none}
.vc-ct{display:grid;gap:5px;min-width:0}
.vc-ct .vc-who{background:var(--white)}
.vc-ct .vc-acts{justify-content:flex-start;margin-top:4px}
.vc-ct .vc-acts .btn{padding-left:10px;padding-right:10px;background:var(--white)}
.vc-month+.vc-month{margin-top:18px}
.vc-mk{display:block;font:600 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--slate);margin-bottom:6px}
.vc-month ul{list-style:none;margin:0;padding:0}
.vc-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:start;padding:12px 0;border-top:1px solid var(--rule-soft)}
.vc-row .vc-leaf{width:48px;height:54px}
.vc-row .vc-leaf b{font-size:19px}
.vc-rt{display:grid;gap:5px;min-width:0}
.vc-rt>b{font-size:15px;font-weight:600}
.vc-notes{margin:2px 0 0;font-size:13.5px;color:var(--body,#3A4048);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:70ch}
.vc-facts{display:grid;gap:5px;justify-items:end;font-size:12.5px;color:var(--slate)}
.vc-facts>span{display:inline-flex;align-items:center;gap:6px}
.vc-st.tick{color:var(--status,#1E6B3A)}
.vc-how{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.vc-how>span{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;font-size:13px;line-height:1.45;color:var(--slate);box-shadow:inset 0 0 0 1.5px var(--rule);border-radius:0 12px 0 12px}
.vc-how svg{flex:none;color:var(--ink);margin-top:1px}
@media (max-width:760px){
  .vc-next{grid-template-columns:auto minmax(0,1fr);gap:16px;padding:18px}
  .vc-next .vc-acts{grid-column:1/-1;justify-content:flex-start}
  .vc-leaf.big{width:76px;height:88px}.vc-leaf.big b{font-size:32px}
  .vc-start,.vc-how{grid-template-columns:1fr}
  .vc-figs{grid-template-columns:1fr 1fr 1fr;gap:8px}
  .vc-figs>div{grid-template-columns:1fr;padding:12px;row-gap:2px}.vc-fi{display:none}
  .vc-figs b{font-size:18px}
  .vc-row{grid-template-columns:auto minmax(0,1fr)}
  .vc-facts{grid-column:2;justify-items:start;grid-auto-flow:column;justify-content:start;gap:12px}
}
.vc-row{max-width:none}
a.vc-who{border-bottom:0!important;text-decoration:none!important}

/* Money › Bank, more useful (app-bank-pics.js) */
.bp-pm{display:inline-grid;place-items:center;width:30px;height:30px;flex:none;background:var(--paper);color:var(--ink);font:600 11px var(--mono);letter-spacing:.04em;border-radius:0 8px 0 8px}
.bk-done.bp-m .bk-w{display:flex;align-items:center;gap:10px}
.bk-row.bp-m .bk-w{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:10px;align-items:center}
.bk-row.bp-m .bk-w .bp-pm{grid-row:1/3}
.bp-si2{display:inline-flex;vertical-align:-2px;margin-right:6px}
.bk-said.bp-has::before{content:none}
.bk-done .bk-said:has(.bp-si2)::before{content:none}
.bp-start{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:18px;margin-bottom:18px}
.bp-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.bp-step{position:relative;display:flex;flex-direction:column;gap:6px;padding:18px;background:var(--white);border-radius:0 var(--r-card) 0 var(--r-card)}
.bp-step .btn{align-self:flex-start;margin-top:auto}
.bp-step b{font-size:15.5px;font-weight:600;line-height:1.3}
.bp-step>span:not(.bp-n):not(.bp-si){font-size:13px;color:var(--slate);line-height:1.45;margin-bottom:8px}
.bp-n{position:absolute;top:14px;right:14px;display:grid;place-items:center;width:26px;height:26px;background:var(--paper);font:600 12px var(--mono);border-radius:0 7px 0 7px}
.bp-step.done .bp-n{background:var(--status,#1E6B3A);color:#fff}
.bp-si{display:grid;place-items:center;width:46px;height:46px;background:var(--ink);color:var(--paper);border-radius:0 12px 0 12px;margin-bottom:6px}
.bp-step.done{opacity:.7}
.bp-ghost{padding:16px 18px;background:var(--white);border-radius:0 var(--r-card) 0 var(--r-card);opacity:.6;pointer-events:none}
.bp-gl{display:block;font:600 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--slate);margin-bottom:6px}
.bp-gr{display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:10px;row-gap:2px;align-items:center;padding:9px 0;border-top:1px solid var(--rule-soft);font-size:13.5px;filter:grayscale(1)}
.bp-gs{grid-column:2/-1;display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--slate)}
.bp-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:18px;margin-bottom:18px}
.bp-grid>.panel{margin:0}
.bp-h{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:8px 16px;margin-bottom:14px}
.bp-h h3{margin:0}
.bp-ahead{margin-bottom:18px}
.bp-net{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;font-size:13px;color:var(--slate)}
.bp-net b{font-size:18px;color:var(--ink);font-weight:600}
.bp-line{position:relative;height:56px;margin:4px 8px 6px}
.bp-axis{position:absolute;left:0;right:0;top:20px;height:2px;background:var(--rule)}
.bp-mk{position:absolute;top:10px;width:16px;height:16px;margin-left:-8px;border-radius:0 5px 0 5px;box-shadow:0 0 0 2px var(--white)}
.bp-mk.in{background:var(--ink)}
.bp-mk.out{top:16px;background:var(--white);box-shadow:inset 0 0 0 2px var(--ink),0 0 0 2px var(--white)}
.bp-mk.late{box-shadow:0 0 0 2px var(--white),0 0 0 4px var(--signal)}
.bp-tk{position:absolute;top:34px;transform:translateX(-50%);font:500 11px var(--mono);color:var(--slate);white-space:nowrap}
.bp-tk[style*="left:0"]{transform:none}.bp-tk[style*="left:100%"]{transform:translateX(-100%)}
.bp-list{list-style:none;margin:6px 0 0;padding:0}
.bp-list a{display:grid;grid-template-columns:auto 64px minmax(0,1fr) auto;gap:12px;align-items:center;padding:9px 0;border-top:1px solid var(--rule-soft);color:var(--ink);text-decoration:none;font-size:14px}
.bp-list a:hover .bp-lw{text-decoration:underline}
.bp-dot{width:10px;height:10px;border-radius:0 3px 0 3px}
.bp-dot.in{background:var(--ink)}.bp-dot.out{box-shadow:inset 0 0 0 2px var(--ink)}
.bp-ld{font-size:12.5px;color:var(--slate)}
.bp-lw i{font-style:normal;font-size:12px;color:var(--signal-text,#9A3412);margin-left:6px}
.bp-jw{display:flex;gap:16px;align-items:center}
.bp-jsvg{width:78px;height:98px;flex:none}
.bp-jsvg .glass{fill:var(--paper)}.bp-jsvg .fill{fill:var(--ink)}.bp-jsvg .edge{fill:none;stroke:var(--ink);stroke-width:2}.bp-jsvg .lid{fill:var(--rule-strong,#A7B0BA)}
.bp-jw>div{display:grid;gap:4px}
.bp-jw b{font-size:24px;font-weight:600}
.bp-jw span{font-size:13px;color:var(--slate);line-height:1.45}
.bp-jw a{font-size:13px}
.bp-bars{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:8px}
.bp-bars li{display:grid;grid-template-columns:22px minmax(110px,170px) minmax(0,1fr) 70px;gap:10px;align-items:center;font-size:13.5px}
.bp-bi{display:inline-flex;color:var(--slate)}
.bp-bt{height:10px;background:var(--paper);border-radius:0 3px 0 3px;overflow:hidden}
.bp-bt i{display:block;height:100%;background:var(--ink);border-radius:0 3px 0 3px}
.bp-bv{text-align:right;font-size:13px}
.bp-mh{display:flex;justify-content:space-between;font-size:12.5px;color:var(--slate);margin-bottom:8px}
.bp-key{display:inline-flex;align-items:center;gap:6px}
.bp-key i{display:inline-block;width:10px;height:10px;border-radius:0 3px 0 3px;margin-left:8px}
.bp-key i.in,.bp-pair i.in{background:var(--ink)}
.bp-key i.out,.bp-pair i.out{background:#A7B0BA}
.bp-cols{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;height:120px;align-items:end;border-bottom:1px solid var(--rule)}
.bp-col{display:grid;grid-template-rows:1fr auto;height:100%;justify-items:center}
.bp-pair{display:flex;gap:3px;align-items:flex-end;height:100%}
.bp-pair i{width:12px;min-height:2px;border-radius:0 4px 0 0}
.bp-ml{font:500 11px var(--mono);color:var(--slate);padding-top:6px;transform:translateY(100%);margin-bottom:-4px}
.bp-months{padding-bottom:18px}
.bp-rc{margin-bottom:18px}
.bp-rc.all{box-shadow:inset 3px 0 0 var(--status,#1E6B3A)}
.bp-rn{font-size:13px;color:var(--slate)}
.bp-rl{list-style:none;margin:0 0 10px;padding:0}
.bp-rl li{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:9px 0;border-top:1px solid var(--rule-soft);font-size:14px}
.bp-ri{display:grid;place-items:center;width:30px;height:30px;background:var(--signal-bg,#FBEDE6);color:var(--signal-text,#9A3412);border-radius:0 8px 0 8px}
.bp-rw{display:grid;min-width:0}.bp-rw b{font-weight:600}.bp-rw span{font-size:12.5px;color:var(--slate)}
.bp-rl .btn{display:inline-flex;align-items:center;gap:6px}
@media (max-width:900px){.bp-start,.bp-grid{grid-template-columns:1fr}.bp-steps{grid-template-columns:1fr}}
@media (max-width:600px){.bp-bars li{grid-template-columns:22px minmax(0,1fr) 64px}.bp-bt{grid-column:2/-1;grid-row:2}.bp-rl li{grid-template-columns:auto minmax(0,1fr) auto}.bp-rl .btn{grid-column:2/-1;justify-self:start}}
.bk-w>.bp-pm{display:grid}
.bp-grid{align-items:start}

/* ---------- Writing an email: templates, gaps, and a calmer page ---------- */
/* The writing panel lets a gap's box sit over its edge, rather than clipping it. */
.compose .c-row{min-height:52px}
.compose .c-row label{font-size:12px}
/* Template, formatting on a phone, and files: the things done to an email, in one band
   above the formatting. */
.c-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 22px;border-bottom:1px solid var(--rule);background:var(--white)}
.c-bar-end{margin-left:auto;display:flex;gap:8px;align-items:center}
.c-bar .btn.sm{min-height:40px}
.c-tpl{background:var(--ink);color:var(--paper)}
.c-tpl:hover{background:var(--ink-hi)}
.c-attach{margin-left:0}
.c-proj{display:flex;align-items:center;gap:8px;min-width:0;font-size:14px;color:var(--slate)}
.c-proj span{font-weight:500}
body.staff .c-proj select.input{width:auto;min-width:200px;max-width:340px;min-height:40px;padding:0 36px 0 12px;font-size:14.5px;color:var(--ink);text-overflow:ellipsis}
.compose .toolbar{padding:8px 16px}
.toolbar button[data-cmd]{height:36px;min-width:36px}
.toolbar button[data-cmd]:focus-visible,.c-bar .btn:focus-visible,.c-gap:focus-visible,.tp-opt:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.tb-pick{min-height:36px}
.compose .toolbar .swatch{width:32px;height:32px}
.tp-say .gly,.c-gaps>.gly{flex:none;color:var(--signal)}
/* A gap: a blank something a template could not fill in, which looks like a box to type
   in, with its name and a pen, so it reads as unfinished without relying on the colour. */
.c-gap,.tp-gap{display:inline-flex;align-items:center;justify-content:space-between;gap:8px;min-width:7.5em;padding:0 8px 0 10px;margin:0 1px;background:var(--white);color:var(--slate);font-weight:400;line-height:1.6;white-space:nowrap;vertical-align:baseline;box-shadow:inset 0 0 0 1.5px var(--signal);border-bottom-left-radius:var(--r-tag);border-top-right-radius:var(--r-tag)}
.c-gap .gly,.tp-gap .gly{flex:none;color:var(--signal)}
.c-gap{cursor:pointer;user-select:none}
.c-gap:hover{background:var(--signal-bg);color:var(--signal-text)}
.c-val,.tp-val{padding:1px 5px;margin:0 1px;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--signal);border-bottom-left-radius:var(--r-tag);border-top-right-radius:var(--r-tag);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.c-val{cursor:pointer;user-select:none}
.c-val:hover{background:var(--signal-bg)}
.c-val:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.c-val.is-open{background:var(--signal-bg);box-shadow:inset 0 0 0 2px var(--ink)}
.c-gap.is-open{background:var(--signal-bg);color:var(--signal-text);box-shadow:inset 0 0 0 2px var(--ink)}
/* Pressed, a small box opens under the gap: what is missing, why, and a place to type it. */
.c-fill{position:absolute;z-index:40;background:var(--white);padding:16px 18px 18px;border-bottom-left-radius:var(--r-card);border-top-right-radius:var(--r-card);box-shadow:0 18px 50px -10px rgba(18,22,27,.3),0 0 0 1px var(--rule)}
.c-fill::before{content:"";position:absolute;top:-7px;left:calc(var(--tip,40px) - 7px);width:14px;height:14px;background:var(--white);transform:rotate(45deg);box-shadow:-1px -1px 0 var(--rule)}
.c-fill h3{font-family:var(--sans);font-size:16px;font-weight:600;letter-spacing:0;text-transform:none;margin:0 0 2px}
.c-fill-why{font-size:14px;color:var(--slate);margin:0 0 12px}
.c-fill-row{display:flex;align-items:stretch;background:var(--white);box-shadow:inset 0 0 0 1.5px var(--field-edge);border-bottom-left-radius:var(--r-btn);border-top-right-radius:var(--r-btn)}
.c-fill-row:focus-within{box-shadow:inset 0 0 0 2px var(--ink),0 0 0 4px var(--signal-bg)}
.c-fill-box{flex:1;min-width:0;min-height:46px;padding:0 12px;border:0;background:transparent;font:inherit;font-size:16px;color:var(--ink);outline:none}
.c-fill-box::placeholder{color:var(--slate)}
.c-fill-money{flex:1;display:flex;align-items:center;padding-left:12px;font-size:16px;color:var(--slate)}
.c-fill-money .c-fill-box{padding-left:4px}
.c-fill-save{display:flex;align-items:center;gap:10px;min-height:44px;margin-top:4px;font-size:15px;cursor:pointer}
.c-fill-save input{width:20px;height:20px;accent-color:var(--ink);margin:0}
.c-fill-btns{display:flex;gap:8px;margin-top:10px}
.c-fill-btns .btn.sm{min-height:44px;padding:0 18px}
.c-fill-err{margin:8px 0 0;font-size:14px;color:var(--signal-text);font-weight:500}
.c-gaps{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:14px 22px 0;padding:10px 12px 10px 14px;background:var(--signal-bg);color:var(--signal-text);font-size:14.5px;border-bottom-left-radius:var(--r-btn);border-top-right-radius:var(--r-btn)}
.c-gaps b{font-weight:600}
.c-gaps .btn{margin-left:auto;background:var(--white);color:var(--ink)}
.compose .btn.is-off,.compose .btn.is-off:hover{background:var(--rule-soft);color:var(--slate);box-shadow:none;cursor:not-allowed}

/* Choosing a template: the list on the left, the email as it would be on the right. */
dialog:has(.tp-choose){width:min(1080px,96vw);max-width:96vw}
dialog .card:has(.tp-choose){padding:0;overflow:hidden}
.tp-choose{display:grid;grid-template-columns:minmax(0,370px) minmax(0,1fr);min-height:min(640px,84vh);max-height:88vh}
.tp-side{padding:24px 18px 18px 22px;border-right:1px solid var(--rule);display:flex;flex-direction:column;min-height:0}
#dlg .tp-choose h2{margin:0 0 14px}
.tp-search{position:relative;display:block}
.tp-search .gly{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--slate);pointer-events:none}
.tp-search .input{min-height:48px;padding-left:42px;font-size:16px}
.tp-groups{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 4px}
.tp-groups .chip{min-height:36px;font-size:14px;font-weight:500;color:var(--ink)}
.tp-groups .chip.on{color:var(--paper)}
.tp-list{flex:1;overflow:auto;margin:0 -6px;padding:0 6px 6px}
/* Group names in the template lists: plain words, as headings are across the staff area. */
.tp-sec-h{font-size:13px;font-weight:600;color:var(--slate);margin:16px 6px 6px}
.tp-opt{display:flex;align-items:center;gap:12px;min-height:54px;padding:8px 12px;cursor:pointer;border-bottom-left-radius:var(--r-btn);border-top-right-radius:var(--r-btn)}
.tp-opt:hover{background:var(--paper-soft)}
.tp-opt .gly{flex:none;color:var(--slate)}
.tp-opt span{min-width:0}
.tp-opt b{display:block;font-size:15.5px;font-weight:600}
.tp-opt small{display:block;font-size:13.5px;color:var(--slate);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tp-opt.on{background:var(--paper);box-shadow:inset 0 0 0 2px var(--ink)}
.tp-none{color:var(--slate);font-size:15px;padding:12px 6px}
.tp-main{display:flex;flex-direction:column;gap:14px;padding:24px 26px 22px;background:var(--paper-soft);min-height:0}
.tp-for{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:15px}
.tp-for label{font-weight:500;color:var(--body)}
.tp-for .input{width:auto;min-width:240px;max-width:100%;min-height:44px;font-size:15px;padding:0 40px 0 14px}
.tp-from{margin:0;font-size:14.5px;color:var(--body)}
.tp-from b{color:var(--ink)}
.tp-paper{flex:1;overflow:auto;background:var(--white);padding:20px 22px;font-size:16px;line-height:1.65;border-bottom-left-radius:var(--r-card);border-top-right-radius:var(--r-card);box-shadow:inset 0 0 0 1px var(--rule)}
.tp-paper p{margin:0 0 10px;max-width:none}
.tp-subj{font-weight:600;padding-bottom:12px;margin-bottom:14px;border-bottom:1px solid var(--rule-soft)}
.tp-quiet{font-weight:400;color:var(--slate)}
.tp-say{display:flex;align-items:flex-start;gap:8px;margin:0;font-size:14.5px;color:var(--body)}
.tp-say .gly{margin-top:3px;flex:none}
.tp-say:not(.has-gaps) .gly{color:var(--ink)}
.tp-say.has-gaps{color:var(--signal-text)}
.tp-foot{align-items:center;gap:10px}
.tp-foot .btn{min-height:48px}
.tp-keys{margin-left:auto;font-size:13.5px;color:var(--slate);display:flex;gap:6px;align-items:center}
.tp-keys kbd,.tp-page kbd{font-family:var(--mono);font-size:12px;padding:2px 6px;background:var(--white);color:var(--ink);box-shadow:inset 0 0 0 1px var(--rule-strong);border-bottom-left-radius:var(--r-tag);border-top-right-radius:var(--r-tag)}

/* The Templates tab: the list, and the one open. */
.tp-page{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:16px;align-items:start}
.tp-nav{padding:10px 12px 14px}
.tp-nav .tp-sec-h:first-child{margin-top:6px}
.tp-item{display:flex;align-items:center;gap:8px;min-height:44px;padding:8px 12px;color:var(--ink);font-size:15px;font-weight:500;border:0;border-bottom-left-radius:var(--r-btn);border-top-right-radius:var(--r-btn)}
.tp-item:hover{background:var(--paper-soft)}
.tp-item.on{background:var(--ink);color:var(--paper)}
.tp-item small{margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--slate)}
.tp-item.on small{color:var(--on-ink-dim)}
.tp-item:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.tp-ready{display:grid;gap:6px;margin-top:14px;padding:14px;background:var(--paper);font-size:14px;border-bottom-left-radius:var(--r-btn);border-top-right-radius:var(--r-btn)}
.tp-ready span{color:var(--slate)}
.tp-ready .btn{justify-self:start;margin-top:4px;background:var(--white)}
.tp-edit{padding:24px 26px}
.tp-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.tp-top h2{font-family:var(--sans);font-size:24px;font-weight:600;letter-spacing:-.01em;text-transform:none;margin:0}
.tp-mode{margin-left:auto}
.tp-mode button{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 16px;font-size:14.5px;font-weight:500;color:var(--ink)}
.tp-mode button.on{color:var(--paper)}
.tp-mode button:disabled{color:var(--field-edge);cursor:not-allowed}
.tp-edit .label{display:block;font-size:12px;margin:0 0 6px}
.tp-edit .input{min-height:46px;font-size:16px}
.tp-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,240px);gap:16px;margin-bottom:16px}
.tp-hint{margin:6px 0 16px;font-size:14px;color:var(--slate)}
.tp-editor{box-shadow:inset 0 0 0 1.5px var(--field-edge);background:var(--white);border-bottom-left-radius:var(--r-btn);border-top-right-radius:var(--r-btn)}
.tp-editor:focus-within{box-shadow:inset 0 0 0 2px var(--ink)}
.tp-tb{display:flex;align-items:center;gap:4px;border-top-right-radius:var(--r-btn)}
.tp-ins>summary.btn{background:var(--ink);color:var(--paper);min-height:38px}
.tp-ins .dash-menu-list{left:0;right:auto;max-height:min(420px,60vh);overflow:auto;min-width:260px}
.tp-mh{font-size:13px;font-weight:600;color:var(--slate);padding:10px 10px 4px}
.tp-menu button{min-height:40px;font-size:15px}
.tp-body-ed{min-height:240px;font-size:16px}
.tp-fill{display:inline-flex;align-items:baseline;gap:6px;padding:0 9px;margin:0 1px;background:var(--ink);color:var(--paper);font-weight:500;line-height:1.6;white-space:nowrap;border-bottom-left-radius:var(--r-tag);border-top-right-radius:var(--r-tag)}
.tp-fill small{font-size:12px;font-weight:400;color:var(--on-ink-dim)}
.tp-actions{margin-top:20px;gap:10px}
.tp-edit .tp-for{margin-bottom:14px}
.tp-edit .tp-paper{max-height:none;margin-bottom:12px}
.tp-empty p{color:var(--body)}

@media (max-width:860px){
  .tp-choose{grid-template-columns:minmax(0,1fr);max-height:none}
  #dlg-body:has(.tp-choose){margin:0}
  .tp-side{border-right:0;border-bottom:1px solid var(--rule);padding:20px 16px 12px}
  .tp-list{max-height:34vh}
  .tp-main{padding:18px 16px}
  .tp-paper{max-height:40vh}
  .tp-keys{display:none}
  .tp-page{grid-template-columns:1fr}
  .tp-two{grid-template-columns:1fr}
  .tp-edit{padding:18px 16px}
}
@media (max-width:700px){
  .c-bar{padding:8px 14px}
  .c-bar .c-aa{margin:0}
  .c-proj{order:5;flex-basis:100%}
  body.staff .c-proj select.input{flex:1;max-width:none}
  body.staff .main .compose .c-bar .c-attach .btn{font-size:0;gap:0;padding:0 12px;min-height:44px}
  .compose .c-bar .c-attach .btn svg{width:20px;height:20px}
  .c-gaps{margin:12px 14px 0}
  .pjx-mail li a{grid-template-columns:minmax(0,1fr) auto;gap:4px 12px}
  .pjm-who{grid-column:1/-1}
  .c-fill{position:fixed;z-index:60;left:0!important;right:0;top:auto!important;bottom:calc(68px + env(safe-area-inset-bottom));width:auto!important;padding:20px 16px;border-bottom-left-radius:0}
  .c-fill::before{display:none}
}

/* A conversation's emails are as wide as the page, however long a line in one of them. */
.mail-thread{grid-template-columns:minmax(0,1fr)}

/* ---------- A quote, once answered: the price, and what they told us ---------- */
.qr-price,.qr-answers{margin-top:18px;padding:26px 28px}
.qr-price h2,.qr-answers h2{font-family:var(--sans);font-size:20px;font-weight:600;letter-spacing:-.01em;text-transform:none;margin:0 0 6px}
.qr-price-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:28px;align-items:start}
.qr-big{font-size:44px;font-weight:600;letter-spacing:-.02em;line-height:1.1;margin:4px 0 10px;font-variant-numeric:tabular-nums}
.qr-sub{margin:0 0 6px;font-size:15.5px;color:var(--body);max-width:none}
.qr-form{display:grid;gap:12px;padding:18px 20px;background:var(--paper-soft);border-bottom-left-radius:var(--r-card);border-top-right-radius:var(--r-card)}
.qr-form .field{margin:0}
.qr-form .label{display:block;font-size:13px;font-weight:600;color:var(--ink);margin:0 0 6px}
.qr-form .input{min-height:46px;font-size:16px}
.qr-form .small{margin:-6px 0 0;font-size:14px;color:var(--slate)}
.qr-opt{font-weight:400;color:var(--slate);margin-left:6px}
.qr-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.qr-form .btn-row{margin:4px 0 0}
.qr-form .btn{min-height:44px}
.qr-est{margin-top:22px;padding-top:18px;border-top:1px solid var(--rule)}
.qr-est>p{margin:0 0 10px;font-size:15px;max-width:none}
.qr-days>summary,.qr-sec>summary{display:flex;align-items:center;gap:12px;min-height:48px;cursor:pointer;list-style:none;font-weight:600;font-size:16px}
.qr-days>summary::-webkit-details-marker,.qr-sec>summary::-webkit-details-marker{display:none}
.qr-days>summary::before,.qr-sec>summary::before{content:"";width:9px;height:9px;flex:none;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(-45deg);transition:transform .15s}
.qr-days[open]>summary::before,.qr-sec[open]>summary::before{transform:rotate(45deg)}
.qr-days>summary:focus-visible,.qr-sec>summary:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.qr-days .tbl{margin:6px 0 10px}
.qr-days .tbl th[scope=row]{font-family:var(--sans);font-size:15px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink);text-align:left}
.qr-days .tbl td{font-size:15px;color:var(--ink)}
.qr-days .tbl thead th{font-size:13px;font-weight:600;color:var(--slate);text-align:left}
.qr-days .tbl .r{text-align:right}
.qr-todo{margin:10px 0 14px;padding:14px 16px;background:var(--signal-bg);color:var(--signal-text);border-bottom-left-radius:var(--r-btn);border-top-right-radius:var(--r-btn);font-size:15px}
.qr-todo ul{margin:6px 0 0;padding-left:20px}
.qr-todo li{margin:4px 0}
.qr-todo .linky{color:var(--signal-text);font-weight:600}
.qr-sec{border-top:1px solid var(--rule)}
.qr-sec:last-child{border-bottom:1px solid var(--rule)}
.qr-sec-n{flex:1}
.qr-sec-c{font-size:14px;font-weight:400;color:var(--slate)}
.qr-sec-c b{color:var(--signal-text);font-weight:600}
.qr-dl{margin:0 0 14px;padding-left:21px}
.qr-dl>div{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:4px 24px;padding:10px 0;border-top:1px solid var(--rule-soft)}
.qr-dl dt{font-size:14.5px;color:var(--slate)}
.qr-dl dd{margin:0;font-size:15.5px;color:var(--ink);overflow-wrap:anywhere}
.qr-none{color:var(--slate);font-style:italic}
.qr-sec>.btn{margin:0 0 16px 21px;min-height:40px}
@media (max-width:860px){
  .qr-price,.qr-answers{padding:20px 16px}
  .qr-price-top{grid-template-columns:1fr}
  .qr-big{font-size:36px}
  .qr-two{grid-template-columns:1fr}
  .qr-dl{padding-left:0}
  .qr-dl>div{grid-template-columns:1fr}
  .qr-sec>.btn{margin-left:0}
}
/* our own calendar (app-datepick.js): the browser's popup is swapped for it with a mouse */
@media (pointer:fine){
  body.staff input[type=date]::-webkit-calendar-picker-indicator,body.staff input[type=datetime-local]::-webkit-calendar-picker-indicator{display:none}
  body.staff input.input:is([type=date],[type=datetime-local]):not([disabled]){padding-right:40px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2312161B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='1'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
}
.dp{position:fixed;z-index:60;display:flex;gap:0;background:var(--white);border-radius:0 var(--r-card) 0 var(--r-card);box-shadow:inset 0 0 0 1.5px var(--ink),0 14px 32px rgba(18,22,27,.18);font-family:var(--sans);color:var(--ink)}
.dp-cal{padding:14px 14px 10px;width:300px}
.dp-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 8px}
.dp-t{margin:0;font:600 16px/1.2 var(--sans);letter-spacing:0;text-transform:none}
.dp-nav{display:grid;place-items:center;width:36px;height:36px;border:0;background:var(--white);border-radius:0 var(--r-btn) 0 var(--r-btn);box-shadow:inset 0 0 0 1.5px var(--rule-strong);color:var(--ink);cursor:pointer}
.dp-nav:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.dp table{border-collapse:separate;border-spacing:3px;width:100%;table-layout:fixed}
.dp th{font:600 12px/1 var(--sans);color:var(--slate);padding:4px 0 6px;text-align:center;letter-spacing:0;text-transform:none}
.dp :is(td,th){padding:0;border:0;background:none}
.dp th{padding:4px 0 6px}
.dp-d{display:block;width:100%;height:36px;border:0;padding:0;background:var(--white);border-radius:0 var(--r-btn) 0 var(--r-btn);font:500 14.5px/1 var(--sans);color:var(--ink);cursor:pointer}
.dp-d.we{background:var(--paper-soft)}
.dp-d.off{color:var(--slate)}
.dp-d:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.dp-d.now{box-shadow:inset 0 0 0 1.5px var(--signal);font-weight:700}
.dp-d.on{background:var(--ink);color:var(--white);box-shadow:none;font-weight:700}
.dp-d[aria-disabled=true]{color:#B5BAC0;background:none;cursor:not-allowed;text-decoration:line-through}
.dp :is(.dp-d,.dp-nav,.dp-link,.dp-tm):focus-visible{outline:2.5px solid var(--signal);outline-offset:2px;position:relative;z-index:1}
.dp-foot{display:flex;justify-content:space-between;padding:8px 2px 0;margin-top:6px;border-top:1px solid var(--rule-soft)}
.dp-link{border:0;background:none;padding:6px 4px;font:600 14px/1 var(--sans);color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.dp-time{display:flex;flex-direction:column;width:112px;padding:14px 10px 10px;border-left:1px solid var(--rule-soft)}
.dp-th{margin:0 0 8px;padding:9px 4px 0;font:600 13px/1.2 var(--sans);color:var(--slate);letter-spacing:0;text-transform:none}
.dp-times{display:grid;gap:3px;overflow-y:auto;max-height:262px;padding:2px 4px 2px 2px}
.dp-tm{border:0;padding:9px 8px;background:var(--white);border-radius:0 var(--r-btn) 0 var(--r-btn);font:500 14px/1 var(--sans);color:var(--ink);text-align:left;cursor:pointer}
.dp-tm:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.dp-tm.on{background:var(--ink);color:var(--white)}
@media (prefers-reduced-motion:no-preference){.dp{animation:dp-in .12s ease-out}@keyframes dp-in{from{opacity:0;transform:translateY(-4px)}}}
/* a client's mark that opens their logo and colour */
.mark-btn{display:inline-flex;flex:none;padding:0;border:0;background:none;cursor:pointer;border-radius:0 14px 0 14px}
.mark-btn:hover .cmark{box-shadow:inset 0 0 0 1.5px var(--ink)}
.mark-btn:hover .cmark.tinted{filter:brightness(.97)}
.mark-btn:focus-visible{outline:2.5px solid var(--signal);outline-offset:3px}
.cp-head .mark-btn .cmark,.pj-id .mark-btn .cmark{border-radius:0 14px 0 14px}
.cc .note{margin:0 0 16px}
.cc-top{display:flex;gap:18px;align-items:center;margin-bottom:16px}
.cc-mark .cmark{border-radius:0 14px 0 14px}
.cc-sw{display:grid;grid-template-columns:repeat(6,36px);gap:8px}
.cc-s{width:36px;height:36px;padding:0;border:0;background:var(--c);border-radius:0 var(--r-btn) 0 var(--r-btn);cursor:pointer;position:relative}
.cc-s[aria-checked=true]::after{content:"";position:absolute;inset:-4px;border-radius:0 13px 0 13px;box-shadow:0 0 0 2px var(--ink)}
.cc-s:focus-visible{outline:2.5px solid var(--signal);outline-offset:5px}
.cc-hex{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--slate);margin-bottom:18px}
.cc-hex .input{width:140px;font-family:var(--mono);text-transform:uppercase}
@media (max-width:420px){.cc-top{flex-direction:column;align-items:flex-start}}
/* their colour round their logo */
.cmark.framed{position:relative;box-shadow:none!important}
.cmark.framed::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 var(--mw,2px) var(--mc);pointer-events:none}
.cc-frame{margin:0 0 16px}
/* the rate a quote is priced at */
.qr-rate{border:0;margin:0 0 12px;padding:0;min-width:0}
.qr-rate legend{font-size:13px;font-weight:600;color:var(--ink);margin-bottom:6px;padding:0}
.qr-seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.qr-r{position:relative;display:block;cursor:pointer}
.qr-r input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.qr-r span{display:grid;gap:2px;padding:9px 11px;background:var(--white);box-shadow:inset 0 0 0 1.5px var(--field-edge);border-radius:0 var(--r-btn) 0 var(--r-btn);height:100%}
.qr-r b{font-size:14px;font-weight:600;color:var(--ink)}
.qr-r small{font-size:12.5px;color:var(--slate);line-height:1.3}
.qr-r:hover span{box-shadow:inset 0 0 0 1.5px var(--ink)}
.qr-r input:checked+span{background:var(--ink);box-shadow:none}
.qr-r input:checked+span b{color:var(--white)}
.qr-r input:checked+span small{color:var(--on-ink-dim)}
.qr-r input:focus-visible+span{outline:2.5px solid var(--signal);outline-offset:2px}
.qr-r input:disabled+span{opacity:.55;cursor:not-allowed}
@media (max-width:520px){.qr-seg{grid-template-columns:minmax(0,1fr)}}
/* how quotes are landing */
.qs{margin-bottom:16px}
.qs-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px;margin-bottom:14px}
.qs-head h2{margin:0;font:600 17px/1.3 var(--sans);letter-spacing:0;text-transform:none}
.qs-read{margin:0;font-size:14px;color:var(--slate)}
.qs-figs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.qs-fig{display:grid;align-content:start;gap:2px;padding:14px 16px;background:var(--paper-soft);border-radius:0 var(--r-btn) 0 var(--r-btn)}
.qs-l{font-size:13px;font-weight:600;color:var(--slate)}
.qs-v{font-size:26px;font-weight:600;color:var(--ink);line-height:1.15;font-variant-numeric:tabular-nums}
.qs-s{font-size:13px;color:var(--slate)}
.qs-bar{display:flex;gap:2px;height:8px;margin-top:8px;overflow:hidden;border-radius:0 4px 0 4px}
.qs-bar i{display:block;min-width:0}
.qs-bar .y{background:var(--status)}.qs-bar .n{background:var(--signal)}.qs-bar .e{background:var(--rule)}
.qs-more{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:18px;padding-top:16px;border-top:1px solid var(--rule-soft)}
.qs-h3{margin:0 0 8px;font:600 14px/1.3 var(--sans);color:var(--ink);letter-spacing:0;text-transform:none}
.qs-why{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.qs-why li{display:grid;grid-template-columns:minmax(0,9.5rem) minmax(0,1fr) 2ch;align-items:center;gap:10px;font-size:14px}
.qs-why-bar{height:8px;background:var(--rule-soft);border-radius:0 4px 0 4px;overflow:hidden}
.qs-why-bar i{display:block;height:100%;background:var(--signal)}
.qs-why b{text-align:right;font-variant-numeric:tabular-nums}
.qs-tbl th,.qs-tbl td{font-size:14px}
@media (max-width:900px){.qs-figs{grid-template-columns:repeat(2,minmax(0,1fr))}.qs-more{grid-template-columns:minmax(0,1fr)}}
/* what a job pays a day */
.ear{margin:0 0 14px;padding:14px 16px;background:var(--paper-soft);border-radius:0 var(--r-btn) 0 var(--r-btn)}
.ear-rows{margin:0;display:grid;gap:8px}
.ear-row{display:grid;grid-template-columns:7.5rem minmax(0,1fr);align-items:center;gap:12px}
.ear-row dt{font-size:13px;font-weight:600;color:var(--slate)}
.ear-row dd{margin:0;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;font-size:14px;color:var(--slate)}
.ear-row dd b{color:var(--ink);font-variant-numeric:tabular-nums;font-size:15px}
.ear-bar{display:block;height:10px;background:var(--rule);border-radius:0 5px 0 5px;overflow:hidden}
.ear-bar i{display:block;height:100%}
.ear-bar.ear-q i{background:var(--rule-strong)}
.ear-bar.ear-p i{background:var(--status)}
.ear.over .ear-bar.ear-p i{background:var(--signal)}
.ear-say{margin:10px 0 0;font-size:14px;color:var(--body)}
.ear-mini{display:grid;gap:4px;margin:10px 0 2px}
.mo-card .ear-mini .ear-bar{display:block;height:8px;padding:0;margin:0}
.mo-card .ear-mini .ear-bar i{height:100%}
/* who sends us work */
.rf-head{margin-bottom:14px}.rf-head h2{margin:0 0 4px;font:600 17px/1.3 var(--sans);letter-spacing:0;text-transform:none}.rf-head p{margin:0}
.rf-figs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 16px}
.rf-figs>div{padding:12px 14px;background:var(--paper-soft);border-radius:0 var(--r-btn) 0 var(--r-btn)}
.rf-figs dt{font-size:13px;font-weight:600;color:var(--slate)}
.rf-figs dd{margin:2px 0 0;font-size:22px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.rf-list{list-style:none;margin:0;padding:0}
.rf-row{display:grid;grid-template-columns:minmax(0,13rem) minmax(0,1fr) minmax(0,12rem);gap:16px;align-items:start;padding:14px 0;border-top:1px solid var(--rule-soft)}
.rf-who{display:grid;justify-items:start;gap:2px}.rf-who b{font-size:15px;color:var(--ink)}.rf-who a{text-underline-offset:3px}
.rf-n{display:block;font-size:13px;font-weight:600;color:var(--slate);margin-bottom:6px}
.rf-clients{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.rf-clients a{border:0;display:inline-flex;align-items:center;gap:7px;padding:4px 10px 4px 4px;background:var(--paper-soft);border-radius:0 var(--r-btn) 0 var(--r-btn);color:var(--ink);text-decoration:none;font-size:14px;min-height:34px}
.rf-clients a:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.rf-clients a:focus-visible{outline:2.5px solid var(--signal);outline-offset:2px}
.rf-worth{display:grid;gap:2px;text-align:right}.rf-worth b{font-size:17px;color:var(--ink);font-variant-numeric:tabular-nums}
.rf-bar{display:block;height:8px;margin-top:6px;background:var(--rule-soft);border-radius:0 4px 0 4px;overflow:hidden}
.rf-bar i{display:block;height:100%;background:var(--ink);margin-left:auto}
@media (max-width:800px){.rf-figs{grid-template-columns:repeat(2,minmax(0,1fr))}.rf-row{grid-template-columns:minmax(0,1fr)}.rf-worth{text-align:left}.rf-bar i{margin-left:0}}
/* plans worth moving up */
.up{margin-bottom:16px}
.up h2{margin:0 0 4px;font:600 17px/1.3 var(--sans);letter-spacing:0;text-transform:none}
.up>.small{margin:0 0 10px}
.up-list{list-style:none;margin:0;padding:0}
.up-row{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr) 72px minmax(0,10rem);gap:16px;align-items:center;padding:12px 0;border-top:1px solid var(--rule-soft)}
.up-who{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none;border:0}
.up-who>span{display:grid}.up-who b{color:var(--ink);font-size:15px}
.up-who:hover b{text-decoration:underline;text-underline-offset:3px}
.up-who:focus-visible{outline:2.5px solid var(--signal);outline-offset:3px}
.up-why{margin:0;font-size:14px;color:var(--body)}
.up-months{display:flex;align-items:flex-end;gap:5px;height:34px}
.up-months i{flex:1;min-height:6px;background:var(--field-edge);border-radius:0 3px 0 3px}
.up-months i.over{background:var(--signal)}
.up-next{display:grid;justify-items:end;font-size:13px;font-weight:600;color:var(--slate)}
.up-next b{font-size:18px;color:var(--ink)}
@media (max-width:800px){.up-row{grid-template-columns:minmax(0,1fr) 72px}.up-why,.up-next{grid-column:1/-1;justify-items:start}.up-why{grid-row:2}}
/* a founding client's side of the bargain, on the project */
.pjx-owed h3.pjx-l{margin:0 0 8px;font:600 13px/1.3 var(--sans);color:var(--slate);letter-spacing:0;text-transform:none}
.owed-list{list-style:none;margin:0 0 6px;padding:0;display:grid;gap:4px}
.owed-t{display:flex;align-items:flex-start;gap:10px;padding:6px 0;font-size:14px;color:var(--ink);cursor:pointer;min-height:32px}
.owed-t input{width:18px;height:18px;margin:1px 0 0;flex:none;accent-color:var(--ink)}
.owed-t input:focus-visible{outline:2.5px solid var(--signal);outline-offset:2px}
.owed-t input:checked+span{color:var(--slate);text-decoration:line-through;text-decoration-thickness:1px}
.pjx-owed.late{box-shadow:inset 0 0 0 2px var(--signal)}
.pjx-owed.late .pjx-s{color:var(--signal-text);font-weight:600}
/* the earliest start for a new job */
.cap{margin-bottom:16px}
.cap-top{display:flex;align-items:center;gap:14px;margin-bottom:6px}
.cap-ic{display:grid;place-items:center;width:44px;height:44px;flex:none;background:var(--ink);color:var(--white);border-radius:0 var(--r-btn) 0 var(--r-btn)}
#cap-h{margin:0;font:600 13px/1.3 var(--sans);color:var(--slate);letter-spacing:0;text-transform:none}
.cap-big{margin:2px 0 0;font-size:24px;font-weight:600;color:var(--ink);line-height:1.2}
.cap>.small{margin:4px 0 0}
.cap-jobs{list-style:none;margin:12px 0 0;padding:12px 0 0;border-top:1px solid var(--rule-soft);display:grid;gap:8px}
.cap-jobs li{display:grid;grid-template-columns:minmax(0,14rem) minmax(0,1fr) 5rem;align-items:center;gap:12px;font-size:14px}
.cap-jobs a{justify-self:start;border:0;color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.cap-bar{display:block;height:8px;background:var(--rule);border-radius:0 4px 0 4px;overflow:hidden}
.cap-bar i{display:block;height:100%;background:var(--ink)}
.cap-jobs .small{text-align:right}
.qr-cap{color:var(--ink)}
@media (max-width:600px){.cap-jobs li{grid-template-columns:minmax(0,1fr) 4.5rem}.cap-bar{grid-column:1/-1;grid-row:2}}
/* plans due a check-up */
.rv{margin-bottom:16px;box-shadow:inset 0 0 0 2px var(--ink)}
.rv h2{margin:0 0 4px;font:600 17px/1.3 var(--sans);letter-spacing:0;text-transform:none}
.rv>.small{margin:0 0 10px}
.rv-list{list-style:none;margin:0;padding:0}
.rv-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;padding:12px 0;border-top:1px solid var(--rule-soft)}
.rv-who{display:grid;gap:2px}.rv-who b{font-size:15px}.rv-who a{color:var(--ink);text-underline-offset:3px}
.toast.has-act{pointer-events:auto}
.toast-act{margin-left:10px;padding:4px 10px;border:0;background:var(--paper);color:var(--ink);font:600 13px/1.2 var(--sans);border-radius:0 var(--r-tag) 0 var(--r-tag);cursor:pointer}
.toast-act:focus-visible{outline:2.5px solid var(--signal);outline-offset:2px}

/* the staff area is in sentence case, in its dialogs too */
body.staff dialog .btn,body.staff .cr-dlg .btn{text-transform:none;letter-spacing:0;font-size:14px}
body.staff dialog .btn.sm,body.staff .cr-dlg .btn.sm{font-size:13.5px}

/* ---------- Bandroom (app-bandroom.js) ----------
   The brass band app we run, in our own look: white cards on paper, the corner rule, ink and
   signal. Its own brass shows only in its mark. A report about safeguarding is the one thing
   drawn in ink, so it is seen first. */
.bdm-off{display:grid;gap:18px;padding:26px 28px}
.bdm-off-t{display:flex;gap:18px;align-items:flex-start}
.bdm-off-t h2{font-size:20px;line-height:1.25;margin:2px 0 6px;letter-spacing:0;text-transform:none}
.bdm-off-t p{margin:0;color:var(--slate);max-width:62ch}
.bdm-mark{flex:none;display:block}
.bdm-steps{margin:0;padding:0;list-style:none;counter-reset:bdm;display:grid;gap:10px}
.bdm-steps li{counter-increment:bdm;display:grid;grid-template-columns:34px minmax(0,1fr);column-gap:12px;padding:14px 16px;background:var(--paper);border-top-right-radius:12px;border-bottom-left-radius:12px}
.bdm-steps li::before{content:counter(bdm);grid-row:span 2;display:grid;place-items:center;width:28px;height:28px;background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:13px;border-top-right-radius:8px;border-bottom-left-radius:8px}
.bdm-steps b{font-weight:600}
.bdm-steps span{color:var(--slate);font-size:14px}
.bdm-alerts{display:grid;gap:10px;margin:0 0 16px}
.bdm-alert{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;padding:16px 18px;background:var(--white);border-top-right-radius:var(--r-card);border-bottom-left-radius:var(--r-card);box-shadow:inset 4px 0 0 var(--signal)}
.bdm-alert-i{display:grid;place-items:center;width:38px;height:38px;background:var(--paper);color:var(--signal);border-top-right-radius:10px;border-bottom-left-radius:10px}
.bdm-alert-t{display:grid;gap:2px;min-width:0}
.bdm-alert-t b{font-weight:600;font-size:15.5px}
.bdm-alert-t span{color:var(--slate);font-size:13.5px}
.bdm-alert-b{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:flex-end}
.bdm-alert.hot{background:var(--ink);color:var(--paper);box-shadow:none}
.bdm-alert.hot .bdm-alert-i{background:var(--signal);color:var(--white)}
.bdm-alert.hot .bdm-alert-t span{color:#C2C8CE}
.bdm-alert.hot .linky{color:var(--paper)}
.bdm-needs{margin:0 0 16px}
.bdm-need{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;padding:12px 0;border-top:1px solid var(--rule)}
.bdm-need:first-of-type{border-top:0;padding-top:4px}
.bdm-need-n{min-width:34px;height:34px;display:grid;place-items:center;padding:0 8px;background:var(--paper);font-weight:600;font-variant-numeric:tabular-nums;border-top-right-radius:9px;border-bottom-left-radius:9px}
.bdm-need.hot .bdm-need-n{background:var(--signal);color:var(--white)}
.bdm-need-t{font-size:15px}
.bdm-clear p{margin:0;color:var(--slate)}
.bdm-cards{grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:12px}
.bdm-still{cursor:default}
.bdm-still:hover{box-shadow:none}
.bdm-when{margin:8px 0 0}
@media (max-width:1100px){.bdm-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.bdm-cards{grid-template-columns:minmax(0,1fr)}.bdm-alert{grid-template-columns:auto minmax(0,1fr)}.bdm-alert-b{grid-column:1 / -1;justify-content:flex-start}}
.bdm-money{margin:16px 0}
.bdm-money .bdm-h+.note{margin:-6px 0 10px}
.bdm-chart{display:block;width:100%;max-width:760px;height:auto;margin:6px 0 4px}
.bdm-grid{stroke:var(--rule);stroke-width:1}
.bdm-base{stroke:var(--ink);stroke-width:1.2}
.bdm-col{fill:#A9AFB6}
.bdm-col.now{fill:var(--ink)}
.bdm-col:hover{fill:var(--signal)}
.bdm-lab{font-family:var(--sans);font-size:12px;font-weight:600;fill:var(--ink)}
.bdm-mon{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;fill:var(--slate)}
.bdm-table{margin-top:8px}
.bdm-table summary{cursor:pointer;color:var(--slate);font-size:14px;padding:6px 0}
.bdm-table td.r,.bdm-table th.r{text-align:right;font-variant-numeric:tabular-nums}
.bdm-pos .bdm-po{display:grid;grid-template-columns:110px minmax(0,1fr) auto;align-items:center;gap:14px;padding:12px 0;border-top:1px solid var(--rule)}
.bdm-pos .bdm-h+.bdm-po{border-top:0;padding-top:2px}
.bdm-po-d{font-family:var(--mono);font-size:12px;color:var(--slate)}
.bdm-po-t{display:grid;gap:2px}
.bdm-po-t b{font-weight:600;font-variant-numeric:tabular-nums}
.bdm-po-t span{font-size:13.5px;color:var(--slate)}
.bdm-po-s{font-size:13px;color:var(--slate);padding:5px 10px;background:var(--paper);border-top-right-radius:8px;border-bottom-left-radius:8px}
.bdm-po-s.ok{background:#E3F1E6;color:#1E5631}
.bdm-pos>.note{margin:12px 0 0}
@media (max-width:760px){.bdm-pos .bdm-po{grid-template-columns:minmax(0,1fr) auto}.bdm-po-d{grid-column:1 / -1}}
.bdm-cards.four{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){.bdm-cards.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.bdm-cards.four{grid-template-columns:minmax(0,1fr)}}

/* ---------- The social planner (app-social-page.js) ----------
   Social and Promotion: how the brand posts, what is waiting for a yes, then the weeks ahead
   as a calendar with each post as its own picture. */
.pz{display:grid;gap:16px;min-width:0}
.pz a.pz-card,.pz a.pz-post,.pz a.pz-row,.pz a.pz-th,.pz .pz-rt a,.pz-rv .pz-rv-acts a{border-bottom:0}
.pz a.pz-card:hover,.pz a.pz-post:hover,.pz a.pz-row:hover,.pz .pz-rt a:hover{color:inherit}
.pz-top{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.pz-card{display:flex;flex-direction:column;gap:6px;min-width:0;padding:20px 22px;background:var(--white);color:inherit;text-decoration:none;border-radius:0 var(--r-card) 0 var(--r-card);transition:box-shadow .15s ease}
a.pz-card:hover,a.pz-card:focus-visible{box-shadow:inset 0 0 0 2px var(--ink)}
body.staff .main .pz-k{display:block;margin:0;font-size:13px;line-height:1.35;font-weight:500;color:var(--slate);letter-spacing:0;text-transform:none;font-family:var(--sans)}
.pz-big{margin:0;font-size:20px;font-weight:600;line-height:1.25;color:var(--ink)}
.pz-s{margin:0;font-size:14px;line-height:1.45;color:var(--slate)}
.pz-b{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:12px}
.pz-acc{list-style:none;margin:2px 0 4px;padding:0;display:grid;gap:7px}
.pz-acc li{display:flex;align-items:center;gap:9px;min-width:0;font-size:14px}
.pz-acc li::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--rule-strong)}
.pz-acc li.pz-on::before{background:var(--status)}
.pz-acc li.pz-off::before{background:var(--signal)}
.pz-acc b{flex:none;width:82px;font-weight:600}
.pz-acc span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--slate)}
.pz-acc li.pz-off span{color:var(--signal-text)}
.pz-next-b{display:flex;gap:14px;align-items:center;margin-top:6px}
.pz-next .pz-th{width:84px}
.pz-next-t{display:grid;gap:4px;min-width:0}
.pz-next-t b{font-size:16px;line-height:1.3}
.pz-next-t span{font-size:14px;color:var(--slate)}
.pz-th{display:block;flex:none;line-height:0;background:var(--paper);border-radius:0 10px 0 10px;overflow:hidden;box-shadow:0 0 0 1px var(--rule-soft)}
.pz-cv{display:block;width:100%;height:auto;opacity:0;transition:opacity .25s ease}
.pz-cv.on{opacity:1}
@media (prefers-reduced-motion:reduce){.pz-cv{transition:none}}
.pz-st{justify-self:start;font-style:normal;font-size:12px;font-weight:600;line-height:1.2;padding:4px 8px;border-radius:0 7px 0 7px;background:var(--paper);color:var(--slate);white-space:nowrap}
.pz-st.pz-g{background:var(--status-bg);color:var(--status)}
.pz-st.pz-o{background:var(--signal-bg);color:var(--signal-text)}
.pz-st.pz-ink{background:var(--ink);color:var(--paper)}
/* Waiting for a yes: the one dark band on the page. */
.pz-check{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:22px;padding:18px 18px 18px 24px;background:var(--ink);color:var(--paper);border-radius:0 var(--r-card) 0 var(--r-card)}
body.staff .main .pz-check h2{margin:0 0 4px;font-size:20px;font-weight:600;line-height:1.25;color:var(--white);letter-spacing:0;text-transform:none;font-family:var(--sans)}
.pz-check p{margin:0;font-size:14px;color:var(--on-ink-dim)}
.pz-check-th{display:flex;gap:8px}
.pz-check-th .pz-th{width:58px;background:var(--ink-raised);box-shadow:none}
.pz-check .btn:hover,.pz-check .btn:focus-visible{background:var(--paper);color:var(--ink)}
/* Posts from before today that never went out: listed, each to open, or let go together. */
.pz-missed{display:grid;gap:8px;padding:16px 20px;background:var(--white);border-radius:0 var(--r-card) 0 var(--r-card);box-shadow:inset 4px 0 0 var(--signal)}
body.staff .main .pz-missed h2{margin:0 0 2px;font-size:17px;font-weight:600;line-height:1.3;color:var(--signal-text);letter-spacing:0;text-transform:none;font-family:var(--sans)}
.pz-missed-t p{margin:0;font-size:14px;color:var(--slate)}
.pz-missed .pz-b{padding-top:4px}
/* A series on offer (Bandroom's opening): what it says and its button, beside its posts in order. */
.pz-series{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.45fr);align-items:center;gap:26px;padding:22px 24px;background:var(--white);border-radius:0 var(--r-card) 0 var(--r-card)}
body.staff .main .pz-series h2{margin:0 0 6px;font-size:20px;font-weight:600;line-height:1.25;color:var(--ink);letter-spacing:0;text-transform:none;font-family:var(--sans)}
.pz-series-t > p{margin:0 0 8px;font-size:15px;line-height:1.5}
.pz-series-t > p.pz-s{font-size:14px}
.pz-series-t .pz-b{align-items:center;gap:8px 18px;padding-top:8px}
.pz-series-t .linky{font-size:14px}
.pz-series-l{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
.pz-series-l li{display:grid;align-content:start;gap:4px;min-width:0}
.pz-series-l .pz-th{width:100%;margin-bottom:4px}
.pz-series-l b{font-size:13.5px;font-weight:600;line-height:1.3}
.pz-series-l small{font-size:12.5px;color:var(--slate)}
.pz-igs{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;margin-right:4px}
@media (max-width:1100px){.pz-series{grid-template-columns:minmax(0,1fr);gap:18px}}
@media (max-width:560px){.pz-series{padding:18px 18px 20px}.pz-series-l{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 10px}}
.pz-seg{margin:4px 0 0}
.pz-seg i{font-style:normal;font-size:12px;font-weight:600;margin-left:2px;opacity:.7}
/* The weeks. */
.pz-weeks{display:grid;gap:14px}
.pz-week{padding:14px 14px 16px;background:var(--white);border-radius:0 var(--r-card) 0 var(--r-card)}
.pz-wh{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:0 4px 12px;font-size:15px;font-weight:600;letter-spacing:0;text-transform:none;font-family:var(--sans)}
.pz-wh small{font-size:13px;font-weight:400;color:var(--slate)}
.pz-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.pz-day{display:flex;flex-direction:column;gap:8px;min-width:0;min-height:132px;padding:8px;background:var(--paper-soft);border-radius:0 12px 0 12px;transition:background .12s ease,box-shadow .12s ease}
.pz-day.pz-past{background:none;box-shadow:inset 0 0 0 1px var(--rule-soft)}
/* A day gone by: its pictures faded, its words kept readable. */
.pz-day.pz-past .pz-th,.pz-day.pz-past .pz-free{opacity:.55}
.pz-day.pz-today{box-shadow:inset 0 0 0 2px var(--ink)}
.pz-day.pz-drop{background:var(--signal-bg);box-shadow:inset 0 0 0 2px var(--signal)}
.pz-dn{font-size:12.5px;line-height:1.2;color:var(--slate)}
.pz-dn b{font-weight:600;color:var(--ink)}
.pz-dn i{font-style:normal;font-weight:600;color:var(--signal-text);margin-left:2px}
.pz-post{display:grid;gap:6px;min-width:0;color:inherit;text-decoration:none;border-radius:0 10px 0 10px}
.pz-post[draggable="true"]{cursor:grab}
.pz-post:hover .pz-th,.pz-post:focus-visible .pz-th{box-shadow:0 0 0 2px var(--ink)}
.pz-post:focus-visible{outline:none}
.pz-post.lift{opacity:.4}
.pz-pt{display:grid;gap:4px;min-width:0}
.pz-pt b{font-size:13px;line-height:1.3;font-weight:600;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pz-pt small{font-size:12px;color:var(--slate)}
.pz-free{flex:1;display:grid;align-content:center;justify-items:center;gap:4px;min-height:86px;padding:8px;font-size:13px;text-align:center;color:var(--slate);border:1.5px dashed var(--rule-strong);border-radius:0 10px 0 10px}
.pz-free span{font-weight:600;color:var(--ink)}
.pz-free.pz-left span{color:var(--slate);font-weight:500}
.pz-free .linky{font-size:13px}
.pz-sug{flex:1;display:grid;align-content:center;gap:4px;min-height:86px;padding:10px;font:inherit;text-align:left;color:inherit;background:var(--white);border:1.5px dashed var(--signal);border-radius:0 10px 0 10px;cursor:pointer}
.pz-sug span{font-size:12px;font-weight:600;color:var(--signal-text)}
.pz-sug b{font-size:13px;line-height:1.3;font-weight:600}
.pz-sug:hover,.pz-sug:focus-visible{background:var(--signal-bg)}
.pz-hint{margin:0 4px;font-size:13px;color:var(--slate)}
.pz-more,.pz-mix{padding:16px 20px;background:var(--white);border-radius:0 var(--r-card) 0 var(--r-card)}
.pz-more h3,.pz-mix h3{margin:0 0 8px;font-size:15px;font-weight:600;letter-spacing:0;text-transform:none;font-family:var(--sans)}
.pz-list{display:grid}
.pz-row{display:grid;grid-template-columns:56px minmax(0,1fr) auto;align-items:center;gap:14px;padding:10px 0;color:inherit;text-decoration:none;border-bottom:1px solid var(--rule-soft)}
.pz-row:last-child{border-bottom:0}
.pz-row .pz-th{width:56px}
a.pz-row:hover b,.pz-row a:hover b{text-decoration:underline;text-underline-offset:2px}
.pz-rt{display:grid;gap:3px;min-width:0}
.pz-rt a{color:inherit;text-decoration:none}
.pz-rt b{font-size:14.5px;font-weight:600}
.pz-rt small{font-size:13px;color:var(--slate)}
.pz-rt .pz-figs{color:var(--ink)}
.pz-links{font-size:13.5px;color:var(--slate);text-align:right}
.pz-links a{color:var(--signal-text)}
.pz-list + .pz-hint{margin-top:-4px}
.pz > .pz-list{padding:6px 20px;background:var(--white);border-radius:0 var(--r-card) 0 var(--r-card)}
.pz-mix-c{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 8px;max-width:none}
.pz-mix-c span{padding:5px 10px;font-size:13px;background:var(--paper);border-radius:0 8px 0 8px}
.pz-mix-c span.lo{background:var(--signal-bg);color:var(--signal-text)}
.pz-mix .pz-hint{margin:0}
.pz-empty{padding:30px 24px;text-align:center;color:var(--slate);background:var(--white);border-radius:0 var(--r-card) 0 var(--r-card)}
.pz-empty p{margin:0}
/* Ideas, each as the post it would make, grouped by where they came from. */
.pz-ig{display:grid;gap:12px}
.pz-ig + .pz-ig{margin-top:10px}
body.staff .main .pz-igh{margin:0 4px;font-size:15px;font-weight:600;letter-spacing:0;text-transform:none;font-family:var(--sans)}
.pz-igh small{font-size:13px;font-weight:400;color:var(--slate);margin-left:4px}
.pz-ig:not(.open) .pz-later{display:none}
.pz-igm{justify-self:start;margin:0 4px;font-size:14px}
.pz-ideas{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.pz-idea{display:flex;flex-direction:column;gap:12px;min-width:0;padding:12px 12px 14px;background:var(--white);border-radius:0 var(--r-card) 0 var(--r-card)}
.pz-idea > .pz-th{width:100%}
.pz-it{display:grid;gap:4px;padding:0 4px}
.pz-it h3{margin:0;font-size:15px;line-height:1.3;font-weight:600;letter-spacing:0;text-transform:none;font-family:var(--sans)}
.pz-it p{margin:0;font-size:13.5px;line-height:1.45;color:var(--slate)}
.pz-pil{font-size:12px;color:var(--slate)}
.pz-ib{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding:0 4px}
/* Going through the drafts, one at a time. */
.pz-rv-top{display:flex;align-items:center;justify-content:space-between;gap:16px}
.pz-rv a.pz-rv-back{border-bottom:0}
@media (max-width:760px){.pz-rv-back{display:none!important}}
.pz-rv-head h1{margin:2px 0 6px;font-size:30px;line-height:1.15;font-weight:600;letter-spacing:-.02em}
.pz-dots{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 18px}
.pz-dots i{width:22px;height:4px;border-radius:2px;background:var(--rule-strong)}
.pz-dots i.pz-now{background:var(--ink)}
.pz-dots i.pz-wait{background:var(--rule)}
.pz-dots i.pz-did{background:var(--status)}
.pz-rv .pz-rv-back{background:var(--white)}
.pz-rv-main{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:24px;align-items:start}
.pz-rv-pic{display:grid;place-items:center;gap:12px;margin:0;padding:18px;background:var(--white);border-radius:0 var(--r-card) 0 var(--r-card)}
.pz-rv-pic figcaption{justify-self:stretch;max-width:560px;margin:0 auto;font-size:13.5px;line-height:1.5;color:var(--slate)}
.pz-rv-pic figcaption b{display:block;font-weight:600;color:var(--ink)}
.pz-rv-tabs{display:flex;gap:6px;margin-bottom:-6px}
.pz-rv-tabs button{min-height:36px;padding:0 14px;font:inherit;font-size:14px;font-weight:600;color:var(--ink);background:var(--paper);border:0;border-radius:0 9px 0 9px;cursor:pointer}
.pz-rv-tabs button.on{background:var(--ink);color:var(--paper)}
.pz-rv-pic .pz-cv{width:100%;max-width:560px}
.pz-rv-story .pz-cv{max-width:340px}
.pz-rv-side{display:grid;gap:16px;padding:20px 22px;background:var(--white);border-radius:0 var(--r-card) 0 var(--r-card)}
.pz-rv-dl{display:flex;flex-wrap:wrap;gap:10px 28px;margin:0}
.pz-rv-dl dt{font-size:13px;color:var(--slate)}
.pz-rv-dl dd{margin:2px 0 0;font-size:15px;font-weight:600}
.pz-rv-words{max-height:340px;overflow:auto;padding:14px 16px;font-size:15px;line-height:1.55;white-space:pre-wrap;background:var(--paper-soft);border-radius:0 12px 0 12px}
.pz-rv-side .so-ck{margin:0}
.pz-rv-acts{display:flex;flex-wrap:wrap;gap:8px}
.pz-rv-acts .btn:first-child{min-width:150px;justify-content:center}
.pz-rv-more{display:flex;flex-wrap:wrap;gap:8px 22px;margin:0;font-size:14px}
.pz-done{display:grid;justify-items:center;gap:12px;padding:40px 28px;text-align:center;background:var(--white);border-radius:0 var(--r-card) 0 var(--r-card)}
.pz-done h1{margin:0;font-size:26px;font-weight:600;letter-spacing:-.01em}
.pz-done p{margin:0 0 6px;max-width:52ch;color:var(--slate)}
/* The sheets: a new post, and the accounts. */
.pz-newl{display:grid;gap:8px;margin:4px 0 12px}
.pz-newi{display:grid;grid-template-columns:64px minmax(0,1fr);align-items:center;gap:14px;padding:8px;font:inherit;text-align:left;color:inherit;background:var(--paper);border:0;border-radius:0 12px 0 12px;cursor:pointer}
.pz-newi:hover,.pz-newi:focus-visible{box-shadow:inset 0 0 0 2px var(--ink);outline:none}
.pz-newi .pz-th{width:64px}
.pz-newi b{display:block;font-size:14.5px;font-weight:600;line-height:1.3}
.pz-newi small{display:block;margin-top:2px;font-size:13px;line-height:1.4;color:var(--slate)}
.pz-acc-rows{display:grid;margin:6px 0 10px}
.pz-acc-row{display:grid;grid-template-columns:10px minmax(0,1fr) auto;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--rule-soft)}
.pz-acc-d{width:10px;height:10px;border-radius:50%;background:var(--rule-strong)}
.pz-acc-row.pz-on .pz-acc-d{background:var(--status)}
.pz-acc-row.pz-off .pz-acc-d{background:var(--signal)}
.pz-acc-t b{display:block;font-size:15px}
.pz-acc-t small{display:block;font-size:13.5px;color:var(--slate)}
.pz-acc-row.pz-off small{color:var(--signal-text)}
.pz-acc-go{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 8px}
.pz-note{margin:10px 0;padding:10px 12px;font-size:14px;line-height:1.45;background:var(--signal-bg);color:var(--signal-text);border-radius:0 10px 0 10px}
.pz-accq .pz-hint{margin:0}
@media (max-width:1100px){
  .pz-top{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pz-top .pz-next{grid-column:1 / -1}
  .pz-days{gap:6px}
  .pz-day{padding:6px}
}
@media (max-width:760px){
  .pz-top{grid-template-columns:minmax(0,1fr)}
  .pz-check{grid-template-columns:minmax(0,1fr);gap:14px;padding:18px 20px}
  .pz-check-th{display:none}
  .pz-check .btn{justify-self:start}
  .pz-week{padding:12px}
  .pz-days{grid-template-columns:minmax(0,1fr);gap:6px}
  .pz-day{display:grid;grid-template-columns:58px minmax(0,1fr);align-items:start;gap:8px 10px;min-height:0;padding:10px}
  .pz-day.pz-none{display:none}
  .pz-day > :not(.pz-dn){grid-column:2}
  .pz-dn{grid-column:1;grid-row:1;padding-top:2px}
  .pz-dn b{display:block;font-size:14px}
  .pz-post{grid-template-columns:72px minmax(0,1fr);align-items:center;gap:12px}
  .pz-pt b{font-size:14px}
  .pz-free,.pz-sug{min-height:0;justify-items:start;text-align:left;grid-auto-flow:column;justify-content:start;align-items:center;gap:12px;padding:10px 12px}
  .pz-week:not(:has(.pz-day:not(.pz-none)))::after{content:"Nothing this week.";display:block;padding:2px 4px 4px;font-size:14px;color:var(--slate)}
  .pz-row{grid-template-columns:48px minmax(0,1fr)}
  .pz-row .pz-th{width:48px}
  .pz-row > .pz-st,.pz-links{grid-column:2;justify-self:start;text-align:left}
  .pz-rv-main{grid-template-columns:minmax(0,1fr)}
  .pz-rv-pic{padding:12px}
  .pz-ideas{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
}
@media (max-width:420px){.pz-ideas{grid-template-columns:minmax(0,1fr)}}

/* The post page: where it has got to, and the yes. */
.so-ap{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:12px 0 4px;padding:14px 18px;font-size:14.5px;line-height:1.45;background:var(--white);border-radius:0 var(--r-card) 0 var(--r-card);box-shadow:inset 4px 0 0 var(--ink)}
.so-ap > b{font-weight:600}
.so-ap > span:not(.so-ap-b){flex:1 1 320px;min-width:0;color:var(--slate)}
.so-ap a{color:var(--signal-text)}
.so-ap.ok{box-shadow:inset 4px 0 0 var(--status)}
.so-ap.ok > b{color:var(--status)}
.so-ap.warn{box-shadow:inset 4px 0 0 var(--signal)}
.so-ap-err{flex-basis:100%;color:var(--signal-text)!important}
.so-ap-b{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-left:auto}
.so-ap .k-btn:not(.p){background:var(--paper)}
.so-ap .k-btn:not(.p):hover{background:var(--ink);color:var(--paper)}
.so-av.bdr{background:var(--ink);overflow:hidden}
.so-av.bdr svg{display:block}
/* On Bandroom's pictures the foot carries the seat chart's key; the button sits at the top, where its pictures leave room. */
.so-bandroom .so-pic-ch{top:12px;bottom:auto}
.pk-colour{width:72px;height:44px;padding:4px;cursor:pointer}
.pk-mini .pk-i-seat{position:absolute;width:10%;height:10%;border-radius:50%;background:#2BD67B}
.pk-mini .pk-i-seat:nth-child(3n){background:#FFA51F}
.pk-mini .pk-i-stand{position:absolute;width:12%;height:12%;background:var(--ink);border-radius:6px 6px 0 0}
.pk-mini .pk-i-badge{position:absolute;width:32%;height:32%;background:#FFC21F;border-radius:8px 8px 0 0}
/* A form's More details is a grid item: held to the form's width, so a long line of what the
   folded fields are set to is cut short instead of widening the window. */
.form > .f-more{min-width:0}
/* Dragging is for a mouse: on a touch screen a post moves to another day from its own page. */
@media (hover:none),(max-width:760px){.pz-draghint{display:none}}
/* The accounts' own pictures, to save and upload. */
body.staff .main .pz-acc-h,dialog .pz-acc-h{margin:18px 0 4px;font-size:16px;font-weight:600;letter-spacing:0;text-transform:none;font-family:var(--sans)}
.pz-accp{display:grid;grid-template-columns:110px minmax(0,1fr);grid-template-areas:"p c" "p b";gap:12px 14px;margin-top:10px;align-items:start}
.pz-accp figure{margin:0;display:grid;gap:6px;min-width:0}
.pz-accp canvas{display:block;width:100%;height:auto;border-radius:0 8px 0 8px;box-shadow:0 0 0 1px var(--rule)}
.pz-accp-profile{grid-area:p}.pz-accp-cover{grid-area:c}.pz-accp-banner{grid-area:b}
.pz-accp figcaption{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font-size:13px;color:var(--slate)}
.pz-accp figcaption .linky{font-size:13px}
.pz-sum{margin:0 4px;max-width:none;font-size:15px;color:var(--ink)}

/* The menu made narrow (app.js: railSmall). Wide screens only: on a phone the menu is a drawer. */
.rail-fold{display:flex;align-items:center;gap:11px;width:100%;margin:6px 0 0;padding:8px 12px;background:none;border:0;color:var(--on-ink-dim);font:inherit;font-size:14px;font-weight:500;text-align:left;cursor:pointer;border-bottom-left-radius:var(--r-btn);border-top-right-radius:var(--r-btn)}
.rail-fold svg{flex:none;width:16px;height:16px;margin:0 2px}
.rail-fold:hover{background:#1E242C;color:var(--paper)}
.rail-fold:focus-visible{outline:2px solid var(--paper);outline-offset:-2px}
.rail-tip{position:fixed;z-index:90;transform:translateY(-50%);padding:6px 10px;background:var(--ink);color:var(--paper);font-size:13px;font-weight:500;line-height:1.3;white-space:nowrap;pointer-events:none;box-shadow:0 0 0 1px rgba(255,255,255,.14),0 6px 18px rgba(0,0,0,.25);border-bottom-left-radius:8px;border-top-right-radius:8px}
.rail-tip[hidden]{display:none}
@media (max-width:880px){.rail-fold{display:none}}
@media (min-width:881px){
  .shell{transition:grid-template-columns .2s ease}
  html.rail-small .shell{grid-template-columns:76px minmax(0,1fr)}
  html.rail-small body.staff .rail{padding-left:14px;padding-right:14px;align-items:center;overflow-x:hidden}
  html.rail-small body.staff .rail a.lockup{align-self:center;padding:4px 0}
  html.rail-small body.staff .rail a.lockup span{display:none}
  html.rail-small body.staff .rail a{position:relative;justify-content:center;width:48px;min-height:39px;padding:0}
  html.rail-small body.staff .rail .navname{gap:0}
  html.rail-small body.staff .rail .navname>span:last-child{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  html.rail-small body.staff .rail a .count{position:absolute;top:1px;right:1px;min-width:16px;padding:1px 4px;font-size:9.5px;line-height:13px;text-align:center}
  html.rail-small body.staff .rail .rail-fold{justify-content:center;width:48px;min-height:39px;padding:0}
  html.rail-small body.staff .rail .rail-fold span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  html.rail-small body.staff .rail .rail-fold .fold-chev{transform:scaleX(-1);transform-origin:14.5px 12px}
  html.rail-small body.staff .rail .who{display:none}
}
@media (min-width:881px) and (prefers-reduced-motion:reduce){.shell{transition:none}}


/* ───────── Bandroom's pages ─────────
   Overview, Promotion and Money are drawn in Bandroom's own look (Bandroom/docs/DESIGN.md),
   so its place here feels like its own thing: brass and ink, Archivo wide for headlines and
   big numbers, Atkinson for reading, and the arch (rounded at the top, square at the bottom)
   for every box. app.js sets data-brand on the body. The rail and the top bar stay Tektura's. */
@font-face{font-family:BrHead;src:url(/staff/brand/bandroom/archivo-wide-800.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:BrHead;src:url(/staff/brand/bandroom/archivo-wide-900.woff2) format("woff2");font-weight:900;font-display:swap}
@font-face{font-family:BrText;src:url(/staff/brand/bandroom/atkinson.woff2) format("woff2");font-weight:200 800;font-display:swap}
body.staff[data-brand="bandroom"] #view{
  --br-brass:#FFC21F;--br-brass-tint:#FFF4CF;--br-brass-ink:#7A5200;--br-ink:#111311;--br-muted:#5B5F5C;
  --ink:#111311;--body:#2A2D2B;--slate:#5B5F5C;--rule:#E6E7E2;--rule-soft:#EEEFEA;--rule-strong:#D6D8D2;--paper-soft:#F7F7F3;
  --signal:#111311;--signal-dark:#111311;--signal-bg:#FFF4CF;--signal-text:#7A5200;--tint:#FFE08A;--field-edge:#6F7470;
  --br-arch:22px 22px 0 0;--br-arch-sm:12px 12px 0 0;--br-arch-xs:8px 8px 0 0;
  font-family:BrText,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif
}
body.staff[data-brand="bandroom"] #view :is(h1,h2,.mo-v){font-family:BrHead,"Arial Black",sans-serif;font-weight:800;letter-spacing:-.015em}
/* As in Bandroom: a third-level heading is Atkinson at its heaviest, not the poster type. */
body.staff[data-brand="bandroom"] #view h3{font-family:BrText,sans-serif;font-weight:800;letter-spacing:0}
body.staff[data-brand="bandroom"] #view :is(button,input,select,textarea){font-family:inherit}
/* The arch: Tektura's two-corner rule becomes Bandroom's doorway. Big boxes first, then small. */
body.staff[data-brand="bandroom"] #view :is(.page-head.ph-band,.panel,.mo-card,.pz-card,.pz-series,.pz-week,.pz-mix,.pz-panel,.pz-rv,.pz-post,.card){border-radius:var(--br-arch)}
body.staff[data-brand="bandroom"] #view :is(.btn,.hub-nav a,.k-seg,.seg-mini,.pz-day,.pz-free,.pz-th,.input,select,textarea){border-radius:var(--br-arch-sm)}
body.staff[data-brand="bandroom"] #view :is(.ph-ico,.hub-i,.bdm-need-n,.lo,.tag,.hub-n,.count,.k-seg a,.k-seg button,.seg-mini a){border-radius:var(--br-arch-xs)}
/* The top of each page: a brass block, as Bandroom's own home screen opens. */
body.staff[data-brand="bandroom"] #view .page-head.ph-band{background:var(--br-brass)}
body.staff[data-brand="bandroom"] #view .ph-band::before,body.staff[data-brand="bandroom"] #view .ph-band::after{background:repeating-linear-gradient(90deg,rgba(17,19,17,.22) 0 6px,transparent 6px 12px)}
body.staff[data-brand="bandroom"] #view .ph-band h1{color:var(--br-ink);background:none}
body.staff[data-brand="bandroom"] #view .ph-band .ph-sub{color:var(--br-ink);font-size:16px}
body.staff[data-brand="bandroom"] #view .ph-band .ph-art{background:transparent}
body.staff[data-brand="bandroom"] #view .ph-band .ph-art .s{stroke:rgba(17,19,17,.45)}
/* Bandroom's mark in place of the page's glyph: the semibreve in ink, its brass arch being the block itself. */
body.staff[data-brand="bandroom"] #view .ph-band .ph-ico{background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill-rule='evenodd' fill='%23111311' d='M20.4 51A29.6 19.98 0 1 0 79.6 51A29.6 19.98 0 1 0 20.4 51ZM43.14 61.98A12.95 8.14 -58 1 0 56.86 40.02A12.95 8.14 -58 1 0 43.14 61.98Z'/%3E%3C/svg%3E") center/44px no-repeat;border-radius:0}
body.staff[data-brand="bandroom"] #view .ph-band .ph-ico svg{visibility:hidden}
/* Buttons: ink with white for the main one, an ink outline for the rest. Brass is for surfaces. */
body.staff[data-brand="bandroom"] #view .btn{font-weight:700}
body.staff[data-brand="bandroom"] #view .btn:not(.ghost):not(.linky){background:var(--br-ink);color:#fff}
body.staff[data-brand="bandroom"] #view .btn:not(.ghost):not(.linky):hover{background:#2A2E2A}
body.staff[data-brand="bandroom"] #view .btn.ghost{background:#fff;color:var(--br-ink);box-shadow:inset 0 0 0 2px var(--br-ink)}
body.staff[data-brand="bandroom"] #view .btn.ghost:hover{background:#F3F3EF}
/* Links in running text are ink and underlined, as in Bandroom. Tabs and cards keep their own colours. */
body.staff[data-brand="bandroom"] #view :is(p,li,td,.note,.small,.mo-s) a:not(.btn),body.staff[data-brand="bandroom"] #view .linky{color:var(--br-ink)}
body.staff[data-brand="bandroom"] #view .mo-go{color:var(--br-ink)}
/* The tabs under the top: the page you are on is ink, its glyph on brass. */
body.staff[data-brand="bandroom"] #view .hub-nav a{font-weight:700}
body.staff[data-brand="bandroom"] #view .hub-nav a.on{background:var(--br-ink);color:#fff}
/* No glyphs in tinted squares (DESIGN.md): the glyph stands alone, brass on the ink of the page you are on. */
body.staff[data-brand="bandroom"] #view .hub-nav .hub-i{background:none;width:24px;height:24px}
body.staff[data-brand="bandroom"] #view .hub-nav a.on .hub-i{background:none;color:var(--br-brass)}
body.staff[data-brand="bandroom"] #view .hub-nav .hub-n{background:var(--br-brass);color:var(--br-ink)}
body.staff[data-brand="bandroom"] #view .mo-card:hover{box-shadow:inset 0 0 0 2px var(--br-ink)}
body.staff[data-brand="bandroom"] #view .mo-l{font-weight:700;color:var(--br-muted)}
body.staff[data-brand="bandroom"] #view .bdm-need-n{background:var(--br-brass-tint);color:var(--br-brass-ink)}
body.staff[data-brand="bandroom"] #view .bdm-need.hot .bdm-need-n{background:#FF5A4E;color:var(--br-ink)}
/* Figures read in Atkinson, lined up. */
body.staff[data-brand="bandroom"] #view :is(td,th,b,.mono,code,kbd){font-family:inherit;font-variant-numeric:tabular-nums}
/* The chart's columns in deep brass, as in Bandroom's own staff area. */
body.staff[data-brand="bandroom"] #view .bdm-col,body.staff[data-brand="bandroom"] #view .bdm-col.now{fill:#9C6B00}
body.staff[data-brand="bandroom"] #view .bdm-col:hover{fill:var(--br-ink)}
body.staff[data-brand="bandroom"] #view :is(.bdm-lab,.bdm-mon){font-family:BrText,sans-serif;letter-spacing:0}

/* Bandroom's button in the rail carries its mark and its headline type wherever you are, and
   turns brass while you are in it. */
body.staff .rail a[data-nav="bandroom"]{font-family:BrHead,"Arial Black",sans-serif;font-weight:800;letter-spacing:-.01em}
body.staff .rail a[data-nav="bandroom"] .gly{opacity:1;stroke:none;background:#FFC21F url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill-rule='evenodd' fill='%23111311' d='M20.4 51A29.6 19.98 0 1 0 79.6 51A29.6 19.98 0 1 0 20.4 51ZM43.14 61.98A12.95 8.14 -58 1 0 56.86 40.02A12.95 8.14 -58 1 0 43.14 61.98Z'/%3E%3C/svg%3E") center/13px no-repeat;border-radius:5px 5px 0 0}
body.staff .rail a[data-nav="bandroom"] .gly>*{display:none}
body.staff .rail a[data-nav="bandroom"].on,body.staff .rail.mo-glide a[data-nav="bandroom"].on{background:#FFC21F!important;color:#111311!important;border-radius:12px 12px 0 0}
body.staff .rail a[data-nav="bandroom"].on .gly{background-color:#111311;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill-rule='evenodd' fill='%23FFC21F' d='M20.4 51A29.6 19.98 0 1 0 79.6 51A29.6 19.98 0 1 0 20.4 51ZM43.14 61.98A12.95 8.14 -58 1 0 56.86 40.02A12.95 8.14 -58 1 0 43.14 61.98Z'/%3E%3C/svg%3E")}
body.staff .rail a[data-nav="bandroom"].on .count{background:#111311;color:#FFC21F}
body.staff .rail a[data-nav="bandroom"]:focus-visible{outline:2px solid #FFC21F;outline-offset:2px}
body.staff[data-brand="bandroom"] #view .k-seg a{font-weight:700}
body.staff[data-brand="bandroom"] #view .k-seg a.on{background:var(--br-ink);color:#fff}
body.staff[data-brand="bandroom"] #view .pz-wh small{font-family:BrText,sans-serif;font-weight:400;letter-spacing:0}

/* On a phone the page's name is plain in Tektura's pages; Bandroom's keeps its brass block. */
@media (max-width:700px){
  body.staff[data-brand="bandroom"] #view .page-head.ph-band{background:var(--br-brass);padding:14px 16px!important;border-radius:18px 18px 0 0;gap:12px 14px;align-items:center}
  body.staff[data-brand="bandroom"] #view .ph-band .ph-ico{display:block;width:34px;height:34px;background-size:34px}
  body.staff[data-brand="bandroom"] #view .ph-band h1{font-size:26px;line-height:1.1}
  body.staff[data-brand="bandroom"] #view .ph-band>.btn-row{margin-left:auto!important}
}
/* On ink, the main button is brass with ink words: brass never sits on white as a button, but on ink it is Bandroom's own. */
body.staff[data-brand="bandroom"] #view .pz-check{border-radius:var(--br-arch)}
body.staff[data-brand="bandroom"] #view .pz-check .btn:not(.ghost){background:var(--br-brass);color:var(--br-ink)}
body.staff[data-brand="bandroom"] #view .pz-check .btn:not(.ghost):hover{background:#FFD25A}
@media (max-width:700px){body.staff[data-brand="bandroom"] #view .ph-band>.btn-row{margin-left:0!important;flex-basis:100%}}

/* ───────── Bandroom's brand page (app-bandroom-brand.js) ───────── */
.bb-sec{margin-top:16px;padding:24px 26px}
.bb-sec>h2{margin:0 0 6px;font-size:22px}
.bb-lead{margin:0 0 18px;max-width:72ch;color:var(--slate)}
.bb-h3{margin:22px 0 10px}
.bb-row{margin-top:16px}
.bb-foot{margin:16px 0 0}
.bb-brief{display:grid;gap:18px}
.bb-brief-l{margin:0 0 12px;font-size:16px;max-width:70ch}
.bb-rules{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px 22px}
.bb-rules li{position:relative;padding-left:18px}
.bb-rules li::before{content:"";position:absolute;left:0;top:.45em;width:9px;height:9px;background:#FFC21F;border-radius:3px 3px 0 0}
.bb-jump{display:flex;flex-wrap:wrap;gap:8px}
.bb-jump-b{min-height:40px;padding:0 14px;border:0;background:#F3F3EF;color:#111311;font:inherit;font-weight:700;cursor:pointer;border-radius:12px 12px 0 0}
.bb-jump-b:hover{background:#FFF4CF}
.bb-jump-b:focus-visible{outline:3px solid #1F4FD1;outline-offset:2px}
.bb-files-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 14px}
.bb-files-top select{width:auto;min-width:130px}
.bb-files{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.bb-file{display:flex;flex-direction:column;border:1px solid #E6E7E2;border-radius:16px 16px 0 0;overflow:hidden;background:#fff}
.bb-file-p{height:120px;display:grid;place-items:center;padding:18px}
.bb-file-p img.wide{width:86%;height:auto}
.bb-file-p img.sq{width:72px;height:auto}
.bb-file-t{display:grid;gap:2px;padding:12px 14px 0;flex:1}
.bb-file-b{display:flex;gap:8px;padding:12px 14px 14px}
.bb-two{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px}
.bb-two.tight{margin-top:0}
.bb-box{background:#F3F3EF;padding:16px 18px;border-radius:16px 16px 0 0}
.bb-box h3{margin:0 0 4px}
.bb-box p{margin:0}
.bb-core{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.bb-core-c{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:170px;padding:16px 18px;border:0;text-align:left;font:inherit;cursor:pointer;border-radius:22px 22px 0 0}
.bb-core-c:focus-visible,.bb-sw:focus-visible{outline:3px solid #1F4FD1;outline-offset:2px}
.bb-core-n{margin-top:auto;font-family:BrHead,"Arial Black",sans-serif;font-weight:800;font-size:22px;letter-spacing:-.015em}
.bb-core-x{font-weight:700;font-variant-numeric:tabular-nums}
.bb-core-u{font-size:13px;line-height:1.4;opacity:.85}
.bb-sws{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.bb-sw{display:flex;gap:12px;align-items:flex-start;padding:10px;border:1px solid #E6E7E2;background:#fff;text-align:left;font:inherit;color:inherit;cursor:pointer;border-radius:12px 12px 0 0}
.bb-sw:hover{border-color:#8D918D}
.bb-sw-c{flex:none;width:44px;height:44px;border-radius:9px 9px 0 0}
.bb-sw-t{display:grid;gap:1px;min-width:0}
.bb-hex{font-variant-numeric:tabular-nums;font-size:13px;color:#5B5F5C}
.bb-contrast{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:22px;margin-top:22px;padding-top:20px;border-top:1px solid #E6E7E2}
.bb-contrast h3{margin:0 0 4px}
.bb-lab{display:grid;gap:6px;margin:12px 0 0;font-weight:700}
.bb-contrast-s{display:grid;gap:4px;padding:22px 24px;border-radius:16px 16px 0 0}
.bb-contrast-big{font-family:BrHead,"Arial Black",sans-serif;font-weight:900;font-size:34px;letter-spacing:-.03em;line-height:1}
.bb-contrast-r{margin:10px 0 0}
.bb-try{max-width:460px;margin:0 0 16px}
.bb-type{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.bb-type>div{background:#F3F3EF;padding:18px 20px;border-radius:16px 16px 0 0;min-width:0}
.bb-type-n{display:block;font-size:13px;font-weight:700;color:#5B5F5C}
.bb-type p{margin:2px 0 14px;overflow-wrap:anywhere}
.bb-type-big{font-family:BrHead,"Arial Black",sans-serif;font-weight:900;font-size:40px;line-height:1;letter-spacing:-.03em}
.bb-type-mid{font-family:BrHead,"Arial Black",sans-serif;font-weight:800;font-size:24px;line-height:1.1;letter-spacing:-.02em}
.bb-type-bold{font-weight:800;font-size:22px;line-height:1.25}
.bb-type-reg{font-size:16px;line-height:1.55}
.bb-arch{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;align-items:center}
.bb-arch-stage{display:flex;align-items:flex-end;justify-content:center;height:220px;background:#F3F3EF;padding:20px;border-radius:16px 16px 0 0}
.bb-arch-box{width:min(100%,300px);background:#FFC21F;transition:height .12s ease,border-radius .12s ease}
.bb-arch-say{font-weight:700;margin:10px 0}
.bb-arch input[type=range]{width:100%;accent-color:#111311}
.bb-seats{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:22px;align-items:center}
.bb-seats-p{background:#FFC21F;padding:16px;border-radius:22px 22px 0 0}
.bb-seats-p img{display:block;width:100%;background:#FBE1A0;padding:16px;border-radius:14px 14px 0 0}
.bb-words{display:grid;gap:12px}
.bb-word{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;align-items:start;padding:14px 16px;background:#F3F3EF;border-radius:12px 12px 0 0}
.bb-word .bb-type-n{grid-column:1/-1}
.bb-word p{margin:0;max-width:78ch}
#bb-check{width:100%;max-width:none}
.bb-check-out{margin-top:10px}
.bb-found{margin:0;padding:12px 16px 12px 34px;background:#FFF4CF;border-radius:12px 12px 0 0}
.bb-found li{margin:2px 0}
.bb-ok{margin:0;padding:12px 16px;background:#E5F8EE;color:#0B7A43;font-weight:700;border-radius:12px 12px 0 0}
.bb-acc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3fr);grid-template-rows:auto auto;gap:14px}
.bb-acc figure{margin:0;display:grid;gap:8px}
.bb-acc canvas{display:block;width:100%;height:auto;border-radius:12px 12px 0 0}
.bb-acc-profile canvas{border-radius:50%}
.bb-acc-profile{grid-row:1/3}
.bb-acc figcaption{display:flex;align-items:center;justify-content:space-between;gap:8px;font-weight:700}
.bb-print-ui{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start}
.bb-print-f .input{width:100%}
.bb-print-f .btn-row{margin-top:16px}
.bb-print-p{background:#F3F3EF;padding:18px;display:grid;place-items:center;border-radius:16px 16px 0 0;overflow:hidden}
.bb-poster-wrap{width:100%;display:grid;place-items:center}
.bb-sig-wrap{background:#fff;border:1px solid #E6E7E2;padding:22px;border-radius:12px 12px 0 0;max-width:520px}
@media (max-width:900px){.bb-core{grid-template-columns:1fr 1fr}.bb-two,.bb-type,.bb-arch,.bb-seats,.bb-print-ui,.bb-contrast{grid-template-columns:minmax(0,1fr)}.bb-acc{grid-template-columns:minmax(0,1fr)}.bb-acc-profile{grid-row:auto;max-width:220px}}
@media (max-width:700px){.bb-sec{padding:18px 16px}.bb-core-c{min-height:130px}.bb-type-big{font-size:30px}.bb-word{grid-template-columns:minmax(0,1fr)}}

/* The poster and the flyer: one design, measured in --u, so the A5 is the A4 made smaller. */
.bb-poster{--u:1mm;position:relative;width:calc(210 * var(--u));height:calc(297 * var(--u));padding:calc(16 * var(--u));display:flex;flex-direction:column;overflow:hidden;font-family:BrText,Arial,sans-serif;color:#111311;box-sizing:border-box}
.bb-poster.a5{--u:.7048mm}
.bb-poster.brass{background:#FFC21F}
.bb-poster.white{background:#fff}
.bb-p-lock svg{display:block;height:calc(15 * var(--u));width:auto}
.bb-p-h{font-family:BrHead,"Arial Black",sans-serif;font-weight:900;font-size:calc(17 * var(--u));line-height:.95;letter-spacing:-.035em;margin:calc(12 * var(--u)) 0 calc(7 * var(--u));color:#111311;text-transform:none}
.bb-p-line{font-size:calc(6.2 * var(--u));line-height:1.35;font-weight:700;margin:0 0 calc(8 * var(--u));max-width:calc(160 * var(--u));text-transform:none}
.bb-p-mid{display:grid;grid-template-columns:calc(72 * var(--u)) 1fr;gap:calc(10 * var(--u));align-items:center;margin-top:auto}
.bb-p-seats{padding:calc(7 * var(--u));border-radius:calc(6 * var(--u)) calc(6 * var(--u)) 0 0}
.bb-poster.brass .bb-p-seats{background:#FBE1A0}
.bb-poster.white .bb-p-seats{background:#F3F3EF}
.bb-p-seats svg{display:block;width:100%;height:auto}
.bb-p-pts{list-style:none;margin:0;padding:0;display:grid;gap:calc(5 * var(--u))}
.bb-p-pts li{position:relative;padding-left:calc(8 * var(--u));font-size:calc(6 * var(--u));line-height:1.3;font-weight:700}
.bb-p-pts li::before{content:"";position:absolute;left:0;top:calc(1.6 * var(--u));width:calc(4 * var(--u));height:calc(4 * var(--u));background:#111311;border-radius:calc(1 * var(--u)) calc(1 * var(--u)) 0 0}
.bb-poster.white .bb-p-pts li::before{background:#FFC21F}
.bb-p-foot{display:flex;align-items:center;gap:calc(9 * var(--u));margin-top:calc(10 * var(--u));padding:calc(7 * var(--u));background:#111311;color:#fff;border-radius:calc(6 * var(--u)) calc(6 * var(--u)) 0 0}
.bb-p-qr{flex:none;width:calc(32 * var(--u));height:calc(32 * var(--u));padding:calc(3 * var(--u));background:#fff}
.bb-p-qr svg{display:block;width:100%;height:100%}
.bb-p-cta{display:grid;gap:calc(1.5 * var(--u))}
.bb-poster *{text-transform:none!important}
.bb-p-cta b{font-family:BrHead,"Arial Black",sans-serif;font-weight:800;font-size:calc(8.6 * var(--u));line-height:1.05;letter-spacing:-.02em}
.bb-p-cta span{font-size:calc(6 * var(--u));font-weight:700;color:#FFC21F}
.bb-p-cta small{font-size:calc(4.4 * var(--u));color:#D9DBD5}
/* In the page, the poster is shown small. */
.bb-poster-wrap .bb-poster{transform-origin:top center;zoom:.5}
.bb-poster-wrap .bb-poster.a5{zoom:.7}
@media (max-width:700px){.bb-poster-wrap .bb-poster{zoom:.36}.bb-poster-wrap .bb-poster.a5{zoom:.5}}
/* Printing it: only the sheet goes to the printer. */
.bb-printing-sheet{display:none}
@media print{
  body.bb-printing>*:not(.bb-printing-sheet){display:none!important}
  body.bb-printing{background:#fff!important}
  body.bb-printing .bb-printing-sheet{display:block}
  .bb-printing-sheet .bb-poster{print-color-adjust:exact;-webkit-print-color-adjust:exact;break-after:avoid}
}
.bb-files-top .input{width:auto;max-width:220px}
.bb-contrast .input,.bb-print-f select.input{max-width:320px}
.bb-sig table,.bb-sig td,.bb-sig tr{border:0!important;background:none!important}
.bb-sig td{padding:0!important}
/* The panels' own headings on Bandroom's pages: second in order after the page's name, the size of a card's heading. */
.bdm-h{margin:0 0 12px;font-size:18px;line-height:1.25}
.bb-inline{display:inline-flex;align-items:center;gap:10px;font-size:14px;color:var(--slate)}
.bb-sec>h2:focus{outline:none}
.bb-sec>h2:focus-visible{outline:3px solid #1F4FD1;outline-offset:4px}
/* On a printed sheet the poster is a hair under the page, so no browser spills a blank second page. */
@media print{.bb-printing-sheet .bb-poster{height:calc(296 * var(--u));overflow:hidden}}
/* The focus ring on Bandroom's pages: ink on light grounds, brass on ink. */
body.staff[data-brand="bandroom"] #view :focus-visible{outline-color:#111311}
body.staff[data-brand="bandroom"] #view .pz-check :focus-visible{outline:3px solid #FFC21F;outline-offset:2px}

/* ───────── A client leaving (the Leaving tab, app-project-page.js) ─────────
   A countdown to the day their data has to be gone, the four days that matter on a line,
   and a tile for each thing we hold for them: paper with an orange status while there is
   something to do, ink once its step is ticked. */
.lv{display:grid;gap:14px;container-type:inline-size}
.lv .lv-k{display:block;font-family:var(--mono);font-size:11px;line-height:1.3;letter-spacing:.12em;text-transform:uppercase;color:var(--slate)}
.lv-top{display:grid;grid-template-columns:200px minmax(0,1fr);gap:14px;align-items:stretch}
.lv-count,.lv-when,.lv-hold,.lv-not{background:var(--white);border-radius:0 var(--r-card) 0 var(--r-card)}
.lv-count{padding:18px 20px;display:flex;flex-direction:column;gap:8px}
.lv-n{display:flex;align-items:baseline;gap:8px;font-size:64px;line-height:.95;font-weight:600;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.lv-n small{font-size:15px;font-weight:500;letter-spacing:0;color:var(--slate)}
.lv-s{font-size:13.5px;line-height:1.4;color:var(--slate);margin-top:auto}
.lv-count.soon .lv-n{color:var(--signal)}
.lv-count.late{background:var(--signal)}
.lv-count.late .lv-n,.lv-count.late .lv-n small,.lv-count.late .lv-s{color:var(--white)}
.lv-late{display:inline-block;font-style:normal;background:var(--ink);color:var(--white);padding:4px 9px;border-radius:0 var(--r-tag) 0 var(--r-tag)}
.lv-count.none .lv-n{color:var(--rule-strong)}
.lv-when{padding:18px 20px 16px;display:grid;gap:18px;min-width:0}
#view .lv-h h2{font-family:var(--sans);font-size:20px;line-height:1.25;font-weight:600;letter-spacing:0;text-transform:none;margin:4px 0 2px;color:var(--ink)}
.lv-h p{margin:0;font-size:14px;line-height:1.45;color:var(--slate)}
/* The line: evenly spaced stops, filled up to today. */
.lv-line{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr))}
.lv-line li{position:relative;display:grid;justify-items:center;align-content:start;gap:3px;text-align:center;padding:24px 4px 0;min-width:0}
.lv-line li::before{content:"";position:absolute;top:9px;left:-50%;right:50%;height:2px;background:var(--rule-strong)}
.lv-line li:first-child::before{display:none}
.lv-line li.past::before,.lv-line li.now::before{background:var(--ink)}
.lv-line li i{position:absolute;top:4px;left:50%;width:12px;height:12px;margin-left:-6px;border-radius:50%;box-sizing:border-box;background:var(--white);border:2px solid var(--rule-strong);z-index:1}
.lv-line li.past i{background:var(--ink);border-color:var(--ink)}
.lv-line li.now i{background:var(--signal);border-color:var(--signal);box-shadow:0 0 0 4px var(--signal-bg)}
.lv-line li.end i{border-color:var(--ink)}
.lv-line li.now .lv-k{color:var(--signal-text)}
.lv-line b{font-size:15px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.lv-line small{font-size:12px;color:var(--slate)}
/* The tiles. */
.lv-hold{padding:18px 20px 20px}
#view .lv-hold h3{font-family:var(--sans);font-size:16px;font-weight:600;letter-spacing:0;text-transform:none;margin:0 0 12px;color:var(--ink)}
.lv-tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:10px;row-gap:0}
/* Each tile takes five rows of the grid and shares them with the tiles beside it, so the
   labels, titles, links and statuses of a row line up whatever each one says. */
.lv-tile{display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:0;margin-bottom:10px;padding:14px 16px;background:var(--paper);border-radius:0 14px 0 14px;min-width:0}
.lv-tile:last-child{margin-bottom:0}
.lv-tile .lv-t{margin-top:2px}
.lv-tile .lv-f{margin-top:4px}
.lv-links{align-self:end;padding-top:14px}
.lv-t{font-size:16px;line-height:1.3;font-weight:600;color:var(--ink)}
.lv-f{font-size:13.5px;line-height:1.4;color:var(--slate);overflow-wrap:anywhere}
.lv-foot{margin-top:12px;padding-top:10px;border-top:1px solid var(--rule-strong)}
.lv-tile.done .lv-foot{border-top-color:var(--ink-hi)}
.lv-tile.na .lv-foot,.lv-tile.kept .lv-foot{border-top-color:var(--rule)}
.lv .lv-st{padding:0;margin:0;background:none;border:0}
.lv-st{display:flex;align-items:flex-start;gap:7px;font-size:13px;line-height:1.35;font-weight:600}
.lv-st.todo{color:var(--signal-text)}
.lv-st.todo i{flex:none;width:8px;height:8px;margin-top:4.5px;border-radius:50%;background:var(--signal)}
.lv-st.ok svg{flex:none;width:15px;height:15px;margin:1px 0 0}
.lv-st.na,.lv-st.keep{color:var(--slate);font-weight:500}
.lv-links{display:flex;flex-wrap:wrap;gap:4px 14px}
.lv-go,#view .lv-go{font:inherit;font-size:13px;line-height:1.35;color:var(--ink);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.lv-go:hover,#view .lv-go:hover{color:var(--signal)}
.lv-tile.done{background:var(--ink)}
.lv-tile.done .lv-k{color:var(--on-ink-dim)}
.lv-tile.done .lv-t,.lv-tile.done .lv-st{color:var(--paper)}
.lv-tile.done .lv-f{color:var(--on-ink)}
.lv-tile.done .lv-go,#view .lv-tile.done .lv-go{color:var(--on-ink)}
.lv-tile.done .lv-go:hover,#view .lv-tile.done .lv-go:hover{color:var(--signal-on-raised)}
.lv-tile.na{background:var(--white);box-shadow:inset 0 0 0 1px var(--rule)}
.lv-tile.kept{grid-column:1/-1;background:var(--white);box-shadow:inset 0 0 0 1px var(--rule-strong)}
/* Not leaving: a line to say what the tab is for, and the button that starts it. */
.lv-not{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding:18px 20px}
#view .lv-not h2{font-family:var(--sans);font-size:20px;font-weight:600;letter-spacing:0;text-transform:none;margin:4px 0 6px;color:var(--ink)}
.lv-not p{margin:0;max-width:60ch;font-size:14px;line-height:1.5;color:var(--slate)}
@container (max-width:640px){
  .lv-top{grid-template-columns:minmax(0,1fr)}
  .lv-count{flex-direction:row;flex-wrap:wrap;align-items:baseline;column-gap:16px}
  .lv-count .lv-k{flex-basis:100%}
  .lv-count .lv-s{margin-top:0}
  .lv-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container (max-width:460px){
  .lv-n{font-size:52px}
  .lv-tiles{grid-template-columns:minmax(0,1fr)}
  .lv-not{flex-direction:column;align-items:flex-start}
  /* The line stands up: one day under the next, the line down the left. */
  .lv-line{grid-template-columns:minmax(0,1fr);gap:14px}
  .lv-line li{grid-template-columns:auto 1fr;justify-items:start;text-align:left;padding:0 0 0 26px;column-gap:10px}
  .lv-line li .lv-k{grid-column:1/-1}
  .lv-line li::before{display:none}
  .lv-line li:not(:last-child)::after{content:"";position:absolute;left:5px;top:10px;bottom:-24px;width:2px;background:var(--rule-strong)}
  .lv-line li.run::after{background:var(--ink)}
  .lv-line li i{top:4px;left:0;margin-left:0}
}