/* Shadeland show tool - styles
   Uses the tokens already declared in styles.css. No new brand colours: yellow stays an
   accent and never carries text, per OS/Brand/colours.md.

   Sized for two surfaces on purpose. The stand is laptops, so the capture grid goes to
   two columns from 640px up. The quoting fortnight is phones, so every tappable thing
   stays at --tap and the schedule collapses to one column with the address and the
   phone number as real links. */

/* Every var() carries a fallback on purpose. These tokens are declared in styles.css,
   and a stylesheet that silently loses its tap-target size because the other file did not
   load is exactly the bug nobody notices until a rep cannot hit a button on a stand. */
.show-head{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:10px 16px;border-bottom:1px solid var(--line, #D3E4EF);background:var(--white, #FFFFFF);
  position:sticky;top:0;z-index:15;
}
.show-tabs{display:flex;gap:4px;overflow-x:auto;flex:1;min-width:0}
.stab{
  background:none;border:0;border-bottom:3px solid transparent;
  padding:10px 12px;min-height:var(--tap, 48px);font:inherit;font-size:15px;font-weight:600;
  color:var(--muted, #5C7387);cursor:pointer;white-space:nowrap;
}
.stab[aria-selected="true"]{color:var(--navy, #235774);border-bottom-color:var(--blue, #27AAE1)}
.stab:focus-visible{outline:2px solid var(--blue, #27AAE1);outline-offset:-2px}

/* The pill the whole crew gets drilled on: it does not count until this is green. */
.sync{
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  font-size:13px;font-weight:600;padding:6px 12px;border-radius:999px;
  background:var(--paper, #F2F8FC);border:1px solid var(--line, #D3E4EF);color:var(--muted, #5C7387);
}
.sync.ok{background:#E3F4EA;border-color:var(--ok, #1B7F4B);color:var(--ok, #1B7F4B)}
.sync.pending{background:#FFF3D6;border-color:var(--warn, #8A5A00);color:var(--warn, #8A5A00)}
.sync.off{background:#FBE6E6;border-color:#A32020;color:#A32020}

.spanel{display:flex;flex-direction:column;gap:14px;padding:14px 16px 90px}
.hide{display:none !important}

.card{background:var(--white, #FFFFFF);border:1px solid var(--line, #D3E4EF);border-radius:var(--radius, 12px);box-shadow:var(--shadow, 0 1px 3px rgba(27,46,58,.10), 0 4px 16px rgba(27,46,58,.06))}
.card-h{padding:13px 16px;border-bottom:1px solid var(--line, #D3E4EF);display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.card-h h2{font-family:Anton,Impact,sans-serif;font-weight:400;font-size:19px;letter-spacing:.4px;text-transform:uppercase;margin:0}
.card-h .sub{font-size:13px;color:var(--muted, #5C7387);margin-left:auto}
.card-b{padding:16px}

/* ---------- form ---------- */
.grid{display:grid;gap:14px;grid-template-columns:1fr}
@media (min-width:640px){.grid{grid-template-columns:1fr 1fr}.grid .full{grid-column:1/-1}}
label.f{display:flex;flex-direction:column;gap:5px}
label.f>span,.lab{font-size:13px;font-weight:600;letter-spacing:.3px;color:var(--muted, #5C7387)}
label.f>span b,.lab b{color:#A32020}
label.f.check{flex-direction:row;align-items:center;gap:10px}
label.f.check input{width:22px;height:22px;flex:none}
label.f.check span{font-weight:500;color:var(--ink, #1B2E3A);font-size:15px}

input[type=text],input[type=tel],input[type=email],select,textarea{
  width:100%;min-height:var(--tap, 48px);padding:11px 12px;font:inherit;
  background:var(--white, #FFFFFF);color:var(--ink, #1B2E3A);
  border:1px solid var(--line, #D3E4EF);border-radius:8px;
}
textarea{min-height:88px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--blue, #27AAE1);outline-offset:-1px;border-color:var(--blue, #27AAE1)}
input.err{border-color:#A32020;background:#FBE6E6}
.hint{font-size:13px;color:var(--muted, #5C7387)}
.warnt{color:var(--warn, #8A5A00)}
.privacy{font-size:13px;color:var(--muted, #5C7387);margin:14px 0 0}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  padding:10px 14px;min-height:var(--tap, 48px);border:1px solid var(--line, #D3E4EF);border-radius:999px;
  background:var(--white, #FFFFFF);font:inherit;font-size:15px;font-weight:500;cursor:pointer;color:var(--ink, #1B2E3A);
}
.chip small{opacity:.55;font-size:12px}
.chip[aria-pressed="true"]{background:var(--navy, #235774);border-color:var(--navy, #235774);color:var(--white, #FFFFFF)}
.chip[aria-pressed="true"] small{opacity:.8}
.chip:focus-visible{outline:2px solid var(--blue, #27AAE1);outline-offset:2px}

.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:16px}
.btn{
  background:var(--navy, #235774);color:var(--white, #FFFFFF);border:0;border-radius:8px;
  padding:13px 22px;min-height:var(--tap, 48px);font:inherit;font-size:16px;font-weight:600;cursor:pointer;
}
.btn:hover{background:var(--navy90, #2E6486)}
.btn.ghost{background:var(--white, #FFFFFF);color:var(--ink, #1B2E3A);border:1px solid var(--line, #D3E4EF)}
.btn.sm{padding:9px 14px;font-size:14px;min-height:40px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn:focus-visible{outline:2px solid var(--blue, #27AAE1);outline-offset:2px}

.note{padding:12px 14px;border-radius:8px;font-size:15px;border:1px solid;margin-top:14px}
.note.ok{background:#E3F4EA;border-color:var(--ok, #1B7F4B)}
.note.warn{background:#FFF3D6;border-color:var(--warn, #8A5A00)}
.note.bad{background:#FBE6E6;border-color:#A32020}

/* ---------- slots ---------- */
.sday{border:1px solid var(--line, #D3E4EF);border-radius:10px;overflow:hidden;margin-bottom:12px;background:var(--white, #FFFFFF)}
.sday h4{
  margin:0;padding:10px 13px;background:var(--paper, #F2F8FC);font-size:14px;font-weight:600;
  display:flex;gap:9px;align-items:baseline;flex-wrap:wrap;
}
.sday h4 .who{font-family:Anton,Impact,sans-serif;font-weight:400;font-size:16px;letter-spacing:.4px;text-transform:uppercase}
.sday h4 .area{margin-left:auto;font-weight:500;font-size:13px;color:var(--muted, #5C7387);text-align:right}
.dayhead{font-family:Anton,Impact,sans-serif;font-weight:400;font-size:17px;letter-spacing:.4px;
  text-transform:uppercase;margin:18px 0 8px;color:var(--navy, #235774)}
.dayhead:first-child{margin-top:0}

.slotlist{display:flex;flex-wrap:wrap;gap:8px;padding:12px 13px}
.slot{
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:104px;min-height:var(--tap, 48px);
  padding:10px 13px;border:1px solid var(--line, #D3E4EF);border-radius:8px;background:var(--white, #FFFFFF);
  font:inherit;font-size:15px;font-weight:600;cursor:pointer;font-variant-numeric:tabular-nums;color:var(--ink, #1B2E3A);
}
.slot small{font-weight:500;font-size:12px;color:var(--muted, #5C7387)}
.slot:hover{border-color:var(--blue, #27AAE1)}
.slot:disabled{opacity:.5}
.slot:focus-visible{outline:2px solid var(--blue, #27AAE1);outline-offset:2px}

/* ---------- visits and callbacks ---------- */
.visits{list-style:none;margin:0;padding:6px 13px 12px}
.visits li{
  display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline;
  padding:11px 0;border-bottom:1px solid var(--line, #D3E4EF);
}
.visits li:last-child{border-bottom:0}
.visits .t{font-weight:700;font-variant-numeric:tabular-nums;min-width:74px}
.visits .n{font-weight:600}
.visits .p{font-size:13px;color:var(--muted, #5C7387);flex-basis:100%}
.visits a{min-height:36px;display:inline-flex;align-items:center;font-weight:600;color:var(--navy, #235774)}
.visits a.map::before{content:"\1F4CD";margin-right:5px}
.visits a.tel::before{content:"\1F4DE";margin-right:5px}
.empty{color:var(--muted, #5C7387);font-size:15px;padding:10px 13px;margin:0}

/* ---------- numbers ---------- */
.tiles{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.tile{background:var(--white, #FFFFFF);border:1px solid var(--line, #D3E4EF);border-radius:var(--radius, 12px);padding:14px 16px;box-shadow:var(--shadow, 0 1px 3px rgba(27,46,58,.10), 0 4px 16px rgba(27,46,58,.06))}
.tile .n{font-family:Anton,Impact,sans-serif;font-size:34px;line-height:1;color:var(--navy, #235774)}
.tile .l{font-size:13px;letter-spacing:.4px;text-transform:uppercase;color:var(--muted, #5C7387);margin-top:6px}
.bars{display:flex;flex-direction:column;gap:9px}
.barrow{display:grid;grid-template-columns:minmax(90px,1fr) 2fr 44px;gap:10px;align-items:center;font-size:14px}
.barrow .track{height:20px;background:var(--paper, #F2F8FC);border:1px solid var(--line, #D3E4EF);border-radius:4px;overflow:hidden}
.barrow .fill{display:block;height:100%;background:var(--blue, #27AAE1)}
.barrow .v{text-align:right;font-variant-numeric:tabular-nums;font-weight:700}

/* ---------- price finder and estimate ----------
   The number is the point, so it is the biggest thing on the card. Everything else on
   that card exists to qualify it: the size, whether it is the nearest band up, and
   whether GST is in or out. A rep should never have to explain what the figure means. */
.seg{display:inline-flex;border:1px solid var(--line, #D3E4EF);border-radius:8px;overflow:hidden}
.segb{
  background:var(--white, #FFFFFF);border:0;border-right:1px solid var(--line, #D3E4EF);
  padding:11px 16px;min-height:var(--tap, 48px);font:inherit;font-size:15px;font-weight:600;
  cursor:pointer;color:var(--ink, #1B2E3A);
}
.segb:last-child{border-right:0}
.segb[aria-pressed="true"]{background:var(--blue, #27AAE1);color:#04222F}
.segb:focus-visible{outline:2px solid var(--blue, #27AAE1);outline-offset:-2px}

.pricebig{font-family:Anton,Impact,sans-serif;font-size:40px;line-height:1;color:var(--navy, #235774)}
.pricebig .gstnote{font-family:inherit;font-size:14px;font-weight:600;color:var(--muted, #5C7387);margin-left:8px}
.priceline{font-size:14px;color:var(--muted, #5C7387);margin-top:6px}

/* Yellow is an accent and never carries text, so the band is yellow and the words on it
   are dark ink. OS/Brand/colours.md. */
.freepelmet{
  margin-top:10px;padding:9px 12px;border-radius:6px;
  background:var(--yellow, #FFDD00);color:#3A2E00;font-weight:700;font-size:14px;letter-spacing:.3px;
}

.estlist{list-style:none;margin:0;padding:0}
.estlist li{
  display:grid;grid-template-columns:1fr auto 32px;gap:10px;align-items:baseline;
  padding:11px 0;border-bottom:1px solid var(--line, #D3E4EF);
}
.estlist li .n small{color:var(--muted, #5C7387);font-weight:500}
.estlist li .v{font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap}
.estlist li.free .v{color:var(--ok, #1B7F4B)}
.estlist .x{
  background:none;border:0;font-size:22px;line-height:1;color:var(--muted, #5C7387);
  cursor:pointer;min-height:32px;padding:0;
}
.estlist .x:hover{color:#A32020}
.esttotal{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  margin-top:14px;padding-top:14px;border-top:2px solid var(--navy, #235774);font-size:16px;font-weight:600;
}
.esttotal b{font-family:Anton,Impact,sans-serif;font-weight:400;font-size:30px;color:var(--navy, #235774)}
.estsave{margin-top:6px;font-size:14px;font-weight:600;color:var(--ok, #1B7F4B)}

/* ---------- comparing the range ----------
   Three options side by side is a table on a laptop and a disaster on a phone, so it is a
   stack of rows at every width. Every var() carries a fallback: the harness showed tap
   targets silently collapsing when a variable was missing, which is how a rep ends up
   unable to press anything. */
.cmpwrap{margin-top:14px;border:1px solid var(--line, #D3E4EF);border-radius:10px;overflow:hidden}
.cmphead{
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;
  padding:11px 14px;background:var(--wash, #F2F8FC);border-bottom:1px solid var(--line, #D3E4EF);
  font-size:14px;color:var(--navy, #235774)
}
.cmpsize{color:var(--muted, #5C7387);font-size:13px}

.cmprow{
  padding:13px 14px;border-bottom:1px solid var(--line, #D3E4EF);
  display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:start
}
.cmprow:last-of-type{border-bottom:0}
.cmprow.muted{opacity:.45}
.cmprow.out{background:var(--wash, #F2F8FC)}

/* The tick and the name are one target, so a thumb on a stand cannot miss it. */
.cmptick{display:flex;align-items:center;gap:10px;cursor:pointer;min-height:44px}
.cmptick input{width:22px;height:22px;accent-color:var(--navy, #235774);flex:0 0 auto}
.cmpn{font-weight:700;color:var(--navy, #235774);font-size:16px}

.cmpv{text-align:right;font-weight:700;font-size:20px;color:var(--ink, #1B2E3A);white-space:nowrap}
.cmpv small{display:block;font-size:11px;font-weight:600;color:var(--muted, #5C7387);letter-spacing:.3px}

.cmpb{grid-column:1 / -1;font-size:13px;color:var(--muted, #5C7387);line-height:1.45;padding-left:32px}
.cmpnote{grid-column:1 / -1;font-size:13px;color:var(--muted, #5C7387);padding-left:32px}
.cmpfree{
  grid-column:1 / -1;margin:6px 0 0 32px;padding:7px 10px;border-radius:6px;
  background:var(--yellow, #FFDD00);color:#3A2E00;font-size:13px;font-weight:700
}
.cmprow.out .cmpx{grid-column:1 / -1;font-size:14px;color:var(--muted, #5C7387)}
.cmprow.out .cmpn{color:var(--muted, #5C7387)}

.cmpextras{
  padding:10px 14px;font-size:13px;color:var(--muted, #5C7387);
  background:var(--wash, #F2F8FC);border-top:1px solid var(--line, #D3E4EF)
}
.cmpwrap .row{padding:0 14px 14px}

/* Extra openings, blinds only. Indented so they read as belonging to the first one. */
.grid.opening{margin-top:10px;padding-left:12px;border-left:3px solid var(--line, #D3E4EF)}

@media (max-width:480px){
  .cmpv{font-size:18px}
  .cmpb,.cmpnote,.cmpfree{padding-left:0;margin-left:0}
}

/* WHAT ARE THEY AFTER. Ten products wrapped as ragged pills was 465px, the tallest single
   thing on the capture form and a fifth of its whole height. Two even columns of tiles
   takes it to about 300px without hiding a single option, and every target gets WIDER than
   it was rather than narrower: a half-width tile beats a pill sized to its own text when
   the thumb is moving and the hall is busy. The minutes drop to their own line because the
   visit length is a separate fact from the product, not a suffix to its name.
   Fallbacks on every var(), same reason as everywhere else in this file. */
.chips.prodgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.chips.prodgrid .chip{
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  gap:1px;padding:8px 10px;border-radius:10px;text-align:left;line-height:1.2;
  min-height:var(--tap, 48px);
}
.chips.prodgrid .chip small{display:block;font-size:12px;opacity:.55}
@media (min-width:640px){.chips.prodgrid{grid-template-columns:repeat(3,1fr)}}

/* TOWN CANDIDATES. A partial town is refused (Graeme, 22/09/2026), so the near misses are
   offered as real buttons the rep can thumb. Buttons, not links: an <a href="#"> sits
   inside the field's <label>, where a real tap gets swallowed by label activation and the
   rep taps a name and nothing happens. Found 22/09/2026 when the test clicked one and the
   field did not change. 44px tall so it is a tap target, not a decoration.
   The tokens here were --brand, --card and the wrong --line/--ink fallbacks, none of which
   this app declares: the hover border rendered TEAL #0B7285, a colour that is not in
   OS/Brand/colours.md at all. Fixed 22/09/2026 to the real tokens and the real fallbacks.
   THE COMMENT ABOVE CLOSED TWICE, 23/09/2026. A stray close-comment marker on the first
   paragraph ended it early - do not write one here either, which is how this fix broke on
   its own first run - so the three lines that followed were parsed as a selector and CSS error
   recovery ATE THE WHOLE .townpick RULE up to the next brace. The buttons rendered as 21px
   native grey nubs with no 44px target - the exact tap failure the comment above is the
   post-mortem of. The guarding test could never fail: it ran after clicking a candidate, by
   which point the hint had repainted and the button it looked for no longer existed. */
.townpick{display:inline-block;min-height:44px;margin:4px 6px 0 0;padding:8px 12px;
  border:1px solid var(--line, #D3E4EF);border-radius:8px;background:var(--white, #FFFFFF);
  color:var(--ink, #1B2E3A);font:inherit;font-size:14px;cursor:pointer}
.townpick:hover{border-color:var(--blue, #27AAE1)}

/* ---------- THE ROSTER TAB, added 22/09/2026 ----------
   Reference, not workflow, so it reuses the .sday / .visits shapes the schedule already
   uses rather than inventing a fifth way to draw a list. Today's day gets a blue edge so a
   rep glancing at it between customers lands on their own line without reading four days.
   Every var() carries a fallback, same rule as the rest of this file. */
.sday.rtoday{border-color:var(--blue, #27AAE1);border-left-width:4px}
.sday.rtoday h4{background:#E8F5FC}
.sday.rtoday h4 .area{color:var(--navy, #235774);font-weight:700}
.visits li.roff{opacity:.5}
.visits li .n em{font-style:normal;font-weight:500;color:var(--warn, #8A5A00)}

/* ---------- PICKING A TIME, rebuilt 22/09/2026 ----------
   The details card collapses to one line once the lead is saved, so the times get the screen
   instead of hanging off the bottom of a full-length form. Days are the top level because a
   rep is choosing a TIME, not a colleague. Every var() carries a fallback. */
.csum{
  display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;
  background:var(--paper, #F2F8FC);border:1px solid var(--line, #D3E4EF);
  border-left:4px solid var(--blue, #27AAE1);border-radius:var(--radius, 12px);padding:12px 16px;
}
.csum-n{font-weight:700;color:var(--navy, #235774);font-size:16px}
.csum-d{font-size:14px;color:var(--muted, #5C7387)}
.csum #c-edit{margin-left:auto}

.dayrow{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;margin-bottom:12px}
.daychip{
  flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-start;gap:1px;
  min-height:var(--tap, 48px);padding:8px 14px;border-radius:10px;cursor:pointer;
  border:1px solid var(--line, #D3E4EF);background:var(--white, #FFFFFF);
  font:inherit;font-size:15px;font-weight:600;color:var(--ink, #1B2E3A);white-space:nowrap;
}
.daychip small{font-size:12px;font-weight:500;color:var(--muted, #5C7387)}
.daychip[aria-pressed="true"]{background:var(--navy, #235774);border-color:var(--navy, #235774);color:var(--white, #FFFFFF)}
.daychip[aria-pressed="true"] small{color:#BFDCEA}
.daychip:focus-visible{outline:2px solid var(--blue, #27AAE1);outline-offset:2px}

/* The time is the thing being chosen, so it is the biggest thing on the button. */
.timegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px}
.tslot{
  display:flex;flex-direction:column;align-items:flex-start;gap:1px;
  min-height:var(--tap, 48px);padding:9px 12px;border-radius:10px;cursor:pointer;
  border:1px solid var(--line, #D3E4EF);background:var(--white, #FFFFFF);font:inherit;
}
.tslot .t{font-size:17px;font-weight:700;color:var(--navy, #235774);font-variant-numeric:tabular-nums}
.tslot .r{font-size:12px;font-weight:600;color:var(--ink, #1B2E3A)}
.tslot .d{font-size:11px;color:var(--muted, #5C7387)}
.tslot:hover{border-color:var(--blue, #27AAE1)}
.tslot:disabled{opacity:.5}
.tslot:focus-visible{outline:2px solid var(--blue, #27AAE1);outline-offset:2px}

/* The openings, summarised above the estimate. One line answering "what are we pricing" before
   the money starts, instead of four sizes read back one at a time off separate rows. */
.openings{
  margin:0 0 12px;padding:9px 12px;border-radius:8px;
  background:var(--paper, #F2F8FC);border:1px solid var(--line, #D3E4EF);
  font-size:14px;color:var(--muted, #5C7387);line-height:1.5;
}
.openings b{color:var(--navy, #235774);margin-right:6px}


/* ---------- A BOOKED VISIT, OPENED UP. Graeme 23/09/2026 ----------
   "ability to click on the person and it provide all there details", and the product beside
   the name rather than on a muted line underneath it. The row is a button spanning the full
   width so there is no hunting for the tap target, and the detail underneath carries
   everything the desk holds on that customer plus the two actions that change the run.
   Every var() carries a fallback, same rule as the rest of this file. */
.visits .vrow{display:flex;align-items:center;gap:10px;width:100%;min-height:52px;
  padding:8px 0;background:none;border:0;font:inherit;text-align:left;cursor:pointer;
  color:var(--ink, #1B2E3A)}
.visits .vrow .n{font-weight:600;flex:1;display:flex;flex-direction:column;line-height:1.3}
/* The product, with the name. Four words that tell a rep the whole job. */
.visits .vrow .np{font-size:13px;font-weight:500;color:var(--muted, #5C7387)}
.visits .vrow .chev{color:var(--muted, #5C7387);transition:transform .15s}
.visits .vrow[aria-expanded="true"] .chev{transform:rotate(180deg)}
.visits .vdet{padding:2px 0 12px}
.visits .vdet dl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:0 0 10px;
  font-size:14px;line-height:1.45}
.visits .vdet dt{color:var(--muted, #5C7387);white-space:nowrap}
.visits .vdet dd{margin:0;color:var(--ink, #1B2E3A)}
.visits .vdet .row{border:0;background:none;box-shadow:none;padding:0;margin:0}
/* 44px even on .sm here: these are tapped standing in a driveway. */
.visits .vdet .btn.sm,.visits .vdet a.btn{min-height:44px}
.visits .vdet a.btn::before{content:none}
/* Cancelling is the only destructive thing a rep can do on this screen, so it looks it. */
.btn.ghost.danger{color:var(--bad, #A3231F);border-color:var(--bad, #A3231F)}
.visits .vmsg:empty{display:none}
.visits .vmsg{padding-top:8px}

/* THE CHASE LIST, Graeme 25/09/2026. The old Callbacks tab showed one status out of three,
   so captured-only and estimate-only leads had no home anywhere in the app. These two rules
   are what the reason heading and the product-beside-the-name need; .np was previously
   scoped to .visits .vrow .np and the chase rows are plain li, not buttons. */
.dayhead .why{font-size:12px;font-weight:500;color:var(--muted,#5C7387);margin-left:8px}
.visits li > .n > .np{display:block;font-size:13px;font-weight:500;color:var(--muted,#5C7387)}
.visits li > .q{display:block;font-size:13px;font-weight:600;color:var(--ink,#123);margin-top:2px}
.visits li > .q.none{font-weight:500;color:var(--muted,#5C7387)}

/* THE CURATED CHASE ROWS, Graeme 27/09/2026. A tick that a rep can hit with a thumb in a
   driveway, so the target is 30px and the whole row reads at arm's length. */
.chase{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.crow{display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:start;
  background:var(--card,#fff);border:1px solid var(--line,#dfe8ee);border-radius:9px;padding:11px 13px}
.crow.sev-urgent{border-left:4px solid #b3341f}
.crow.sev-warn{border-left:4px solid #FFDD00}
.crow.cdone{opacity:.5}
.crow.cdone .n{text-decoration:line-through;text-decoration-thickness:1px}
.ctick{appearance:none;-webkit-appearance:none;flex:none;width:30px;height:30px;margin:0;padding:0;
  border:1.5px solid var(--muted,#5C7387);border-radius:8px;background:transparent;cursor:pointer;position:relative}
.ctick[aria-pressed="true"]{background:#1f7a5a;border-color:#1f7a5a}
.ctick[aria-pressed="true"]::after{content:"";position:absolute;left:10px;top:5px;width:6px;height:12px;
  border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.ctick:disabled{opacity:.45;cursor:progress}
.cbody{min-width:0;display:flex;flex-direction:column;gap:3px}
.cbody .n{font-weight:600;font-size:15px}
.ckind{display:inline-block;margin-left:7px;font-size:10px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted,#5C7387);border:1px solid var(--line,#dfe8ee);
  border-radius:99px;padding:1px 7px;vertical-align:1px}
.cdet{font-size:12.5px;color:var(--muted,#5C7387)}
.ctask{font-size:13px;line-height:1.45;margin-top:3px}
.csaid{font-size:12.5px;color:var(--muted,#5C7387);font-style:italic}
.crow-c{display:flex;gap:6px 14px;flex-wrap:wrap;font-size:12.5px;margin-top:4px}
.crow-c .p{color:var(--muted,#5C7387);overflow-wrap:anywhere}
.cwho{font-size:11.5px;color:#1f7a5a;font-weight:500;margin-top:3px}