/* Southport Signal: w7.css, the rebuild kit (DISPLAY.md §3, §4, §6, §7; package S0).
 *
 * Every rebuilt page is built from three objects (the list row, the company case,
 * the evidence line) and the small pieces they share: the kicker, the call line
 * and its dial, the Start here card, the after-call sheet, the sample mark, the
 * freshness line, the one-line notes and the end line. This file styles those
 * and nothing page-specific; each page's own rules live in its w7-<page>.css.
 *
 * Rules kept: no shadows on panels (hairlines and tints carry hierarchy; the
 * after-call sheet is the one floating layer here); the phone number is the
 * largest text on any call block (Rajdhani 700 through --font-num, tabular
 * figures); nothing a rep reads on a phone is under 12px; one accent per row;
 * no red walls; motion only through the tokens' easing and durations. Every
 * colour is a token from tokens.css, so the three modes come free.
 *
 * The row is ONE markup for both widths. In a `.w7list` narrower than 560px it
 * takes the phone shape (kicker, name, meta, sentence, team line, the number
 * with a 48px dial); wider, or with `.w7desk`, the desk shape (name and meta on
 * one line, the sentence, the kicker as the source line, the number in a 172px
 * right column). The case keeps DISPLAY's section order in the DOM at every
 * width; on a wide screen What they run and Records take the right column. */

/* ------------------------------------------------------------------ base */
.w7row,.w7card,.w7case,.w7hd,.w7sech,.w7gh,.w7nl,.w7end,.w7fresh,.w7sheet,.w7bulk,.w7legend-sample{font-family:var(--font-ui);color:var(--ink);font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased}
.w7row *,.w7card *,.w7case *{box-sizing:border-box}
.w7row q,.w7card q,.w7case q,.w7sheet q{quotes:"\201C" "\201D"}
.w7i{width:17px;height:17px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.w7num,.w7tn,.w7n,.w7ph,.w7rk{font-family:var(--font-num);font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.01em}
.w7id{display:none}

/* ------------------------------------------------------------ the kicker */
.w7kick{display:flex;align-items:flex-start;gap:7px;font-size:12.5px;font-weight:650;letter-spacing:.01em;color:var(--mute);min-width:0;line-height:1.35}
.w7kick .w7g{width:18px;height:18px;flex:none;display:grid;place-items:center;margin-top:-1px}
.w7kick .w7kt{white-space:normal;min-width:0}
.w7kick .w7when{color:var(--mute);font-weight:550}
.w7k-found{color:var(--found)} .w7k-team{color:var(--team)} .w7k-svc{color:var(--svc)} .w7k-hand{color:var(--hand)}
.w7k-follow{color:var(--ink2)} .w7k-guard{color:var(--guard)} .w7k-sample{color:var(--sample)}

/* the source label, coloured by family (DISPLAY §5.3) */
.w7src{font-weight:650}
.w7src-fed,.w7src-fl{color:var(--found)} .w7src-ours{color:var(--ink2)} .w7src-notes{color:var(--team)} .w7src-notes.w7src-svc{color:var(--svc)} .w7src-read{color:var(--found)}

/* ------------------------------------------------------------ the header */
.w7hd{margin:0 0 6px}
.w7dateline{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.w7dateline img{height:12px;width:auto}
.w7h1{font-size:25px;line-height:1.2;letter-spacing:-.4px;margin:6px 0 2px;font-weight:700;color:var(--ink)}
.w7sub{font-size:15.5px;color:var(--ink2);margin:0}
.w7sub a{font-weight:650;color:var(--blue);text-decoration:none}
.w7chips{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 2px}
.w7chip{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 13px;border:1px solid var(--line);border-radius:18px;background:var(--card);color:var(--ink);font-size:14px;font-weight:600;white-space:nowrap;text-decoration:none;cursor:pointer;font-family:var(--font-ui)}
.w7chip .w7n{font-size:18px;line-height:1}
.w7chip.on{border-color:var(--found-line);background:var(--found-tint);color:var(--found)}
@media (min-width:821px){.w7h1{font-size:26px}}

/* ----------------------------------------------------------- section labels */
.w7sech{display:flex;align-items:baseline;gap:8px;margin:22px 2px 8px;font-size:12.5px;font-weight:750;letter-spacing:.07em;text-transform:uppercase;color:var(--ink2)}
.w7sech .w7n{font-size:16px;letter-spacing:0;color:var(--ink)}
.w7sech .w7aside,.w7gh .w7aside{margin-left:auto;font-size:12.5px;font-weight:550;letter-spacing:0;text-transform:none;color:var(--mute)}
.w7gh{display:flex;align-items:baseline;gap:8px;padding:10px 16px 8px;background:var(--surf2);border-bottom:1px solid var(--line2);font-size:12px;font-weight:750;letter-spacing:.07em;text-transform:uppercase;color:var(--ink2)}
.w7gh .w7n{font-size:15px;letter-spacing:0;color:var(--ink)}
.w7list *+.w7gh{border-top:1px solid var(--line)}

/* ---------------------------------------------------------------- the list */
.w7list{container:w7list / inline-size;background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden}
html[data-theme="road"] .w7list{border-color:var(--rule)}

/* ------------------------------------------------------ the row, phone shape */
.w7row{position:relative;padding:12px 16px 2px;cursor:pointer;outline:none}
.w7row+.w7row{border-top:1px solid var(--line2)}
.w7row:focus-visible{box-shadow:inset 0 0 0 2px var(--accent-2)}
.w7row.sel{background:var(--sel)}
.w7row.sel:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--blue)}
.w7nm{display:flex;align-items:baseline;gap:8px;margin-top:5px;flex-wrap:wrap}
.w7nm .w7name{font-size:17px;line-height:1.3;font-weight:700;color:var(--ink);min-width:0;overflow-wrap:anywhere}
.w7rk{font-size:16px;color:var(--mute);min-width:12px}
.w7rm{font-size:13.5px;color:var(--mute);line-height:1.4}
.w7nm>.w7rm{flex-basis:100%;margin-top:1px}
.w7rt{font-size:15px;line-height:1.45;margin:6px 0 4px;color:var(--ink)}
.w7rq{font-size:15px;line-height:1.45;margin:6px 0 4px;color:var(--ink);padding-left:10px;border-left:3px solid var(--line)}
.w7tl{font-size:13px;color:var(--mute);margin:2px 0 6px;line-height:1.4}
.w7tl b{color:var(--ink2);font-weight:650}
.w7acts{display:flex;gap:8px;flex-wrap:wrap;padding:0 0 12px}
.w7row .w7call{border-top:1px solid var(--line2)}
.w7row:not(.w7hascall) .w7rt,.w7row:not(.w7hascall) .w7rq{margin-bottom:12px}
.w7selbox{display:inline-flex;align-items:center;min-height:24px;margin-bottom:4px}
.w7sel{width:18px;height:18px;accent-color:var(--blue);margin:0}
.w7mk{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 8px;border-radius:11px;font-size:12px;font-weight:650;white-space:nowrap;background:var(--team-tint);color:var(--ink2);border:1px solid var(--line);vertical-align:1px}
.w7mk-fam{background:var(--found-tint);color:var(--found);border-color:var(--found-line)}
.w7mk-lease{background:var(--guard-tint);color:var(--guard);border-color:var(--guard-line)}
.w7stat{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;color:var(--ink2);font-weight:550;white-space:nowrap}
.w7stat:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--green);flex:none}
.w7stat[data-stage="quiet"]:before{background:var(--mute)} .w7stat[data-stage="hot"]:before{background:var(--amber)}
.w7stat[data-stage="new"]:before{background:var(--blue)} .w7stat[data-stage="customer"]:before{background:var(--navy)}
html[data-theme="dark"] .w7stat[data-stage="customer"]:before{background:var(--ink2)}

/* ------------------------------------------------------ the row, desk shape */
@container w7list (min-width: 560px){
  .w7row{display:grid;grid-template-columns:minmax(0,1fr) 172px;gap:1px 14px;padding:8px 14px 8px 18px;align-items:start}
  .w7row.sel:before{width:3px}
  .w7selbox{grid-column:1;grid-row:1;margin:0 0 2px}
  .w7kick{order:3;grid-column:1;font-size:12.5px;margin:2px 0 0}
  .w7kick .w7g{width:15px;height:15px}
  .w7kick .w7i{width:15px;height:15px}
  .w7nm{order:1;grid-column:1;margin-top:0;flex-wrap:nowrap;align-items:center;min-width:0}
  .w7nm .w7name{font-size:15px;white-space:nowrap;flex:none}
  .w7nm>.w7rm{flex-basis:auto;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;font-size:13px}
  .w7rt,.w7rq{order:2;grid-column:1;font-size:14px;line-height:1.4;margin:2px 0}
  .w7rq{padding-left:8px}
  .w7tl{order:2;grid-column:1;margin:0}
  .w7samples{order:2;grid-column:1}
  .w7row:not(.w7hascall) .w7rt,.w7row:not(.w7hascall) .w7rq{margin-bottom:2px}
  .w7row .w7call{grid-column:2;grid-row:1 / span 4;border-top:0;padding:0;justify-content:flex-end;text-align:right;align-self:center}
  .w7row .w7call .w7wl{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .w7row .w7call .w7tn{font-size:21px;line-height:1.15}
  .w7row .w7dial{display:none}
  .w7acts{grid-column:2;grid-row:4;justify-content:flex-end;padding:2px 0 0;gap:6px}
  .w7acts .w7btn{min-height:34px;font-size:13px;padding:0 11px;border-radius:8px}
}
/* `.w7desk` is a hint only: the row takes the desk shape by the list's width
   (the container query above), so a desk list squeezed onto a phone reads as phone rows. */

/* ----------------------------------------------------------- the call line */
.w7call{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0 12px}
.w7call .w7who{min-width:0}
.w7wl{font-size:13.5px;color:var(--mute);line-height:1.35}
.w7wl b{color:var(--ink2);font-weight:650}
.w7tn{display:block;font-size:32px;line-height:1.1;color:var(--ink);white-space:nowrap;text-decoration:none}
.w7tn:hover{color:var(--blue)}
.w7tip{font-size:13px;color:var(--mute);margin-top:3px;line-height:1.35}
.w7nophone{display:block;font-family:var(--font-num);font-weight:600;font-size:17px;color:var(--faint);margin-top:2px}
.w7dial{width:52px;height:52px;border-radius:50%;background:var(--dial);color:#fff;display:grid;place-items:center;flex:none;text-decoration:none}
.w7dial .w7i{width:23px;height:23px;stroke:#fff}
.w7call-row .w7tn{font-size:26px}
.w7call-row .w7dial{width:48px;height:48px}
.w7call-row .w7dial .w7i{width:21px;height:21px}
.w7call-case .w7tn{font-size:32px}
.w7call-pane .w7tn{font-size:34px}
@container w7case (min-width:700px){.w7call-case .w7tn{font-size:34px}}
.w7ph{font-size:16px;color:var(--ink2);white-space:nowrap;text-decoration:none}
.w7alt .w7ph:hover{color:var(--blue)}

/* --------------------------------------------------------------- buttons */
.w7btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:0 15px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--ink);font:650 14.5px/1 var(--font-ui);white-space:nowrap;cursor:pointer;text-decoration:none;transition:background var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
.w7btn:hover{background:var(--surf2);border-color:var(--rule2)}
.w7btn:disabled{opacity:.5;cursor:default}
.w7btn-sm{min-height:40px;font-size:14px;padding:0 13px}
.w7btn-xs{min-height:34px;font-size:13px;padding:0 11px;border-radius:8px}
.w7btn.w7pri{background:var(--blue);border-color:var(--blue);color:#fff}
.w7btn.w7pri:hover{background:var(--bluedk);border-color:var(--bluedk)}
.w7btn.w7go{background:var(--dial);border-color:var(--dial);color:#fff}
.w7btn.w7go .w7i{stroke:#fff}
.w7btn.w7quiet{color:var(--mute)}
.w7btn .w7i{width:17px;height:17px}
.w7link{font-weight:650;color:var(--blue);text-decoration:none}
.w7link:hover{text-decoration:underline}
html[data-theme="dark"] .w7btn.w7pri{background:#286fc0;border-color:#286fc0;color:#fff}
html[data-theme="road"] .w7btn{border-color:var(--rule)}

/* -------------------------------------------------- the one-line notes */
.w7nl{display:flex;gap:10px;align-items:flex-start;margin:10px 0 0;padding:11px 13px;border:1px dashed var(--rule2);border-radius:12px;font-size:14px;line-height:1.45;color:var(--ink2)}
.w7nl .w7i{width:18px;height:18px;flex:none;margin-top:1px;color:var(--mute)}
.w7nl.w7guard{border-color:var(--guard-line);background:var(--guard-tint)}
.w7nl.w7guard .w7i{color:var(--guard)}
.w7nl b{color:var(--ink)}
.w7nl.w7checked .w7i{color:var(--svc)}

/* ---------------------------------------------- the end line, freshness */
.w7end{margin:22px 2px 0;font-size:15px;color:var(--ink2)}
.w7end b{color:var(--ink)}
.w7fresh{font-size:12.5px;color:var(--mute);margin-top:6px;line-height:1.5}
.w7fresh a{font-weight:600;color:var(--blue);text-decoration:none}

/* ---------------------------------------------------- evidence lines */
.w7ev{list-style:none;margin:0;padding:0}
.w7evl{display:grid;grid-template-columns:24px minmax(0,1fr);gap:0 9px;padding:9px 0}
.w7ev li+li{border-top:1px solid var(--line2)}
.w7m{grid-row:span 2;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font:700 12px/1 var(--font-ui);margin-top:1px;background:var(--found);color:#fff}
.w7m-note{background:var(--card);color:var(--team);border:1.5px solid var(--team)}
.w7m-read{background:var(--card);color:var(--found);border:1.5px dashed var(--found)}
.w7m-guard{background:var(--guard);color:#fff}
.w7m-sample{background:var(--card);color:var(--sample);border:1.5px dashed var(--sample)}
.w7m-sample .w7i{width:13px;height:13px}
html[data-theme="dark"] .w7m{color:#04121C}
html[data-theme="dark"] .w7m-note,html[data-theme="dark"] .w7m-read,html[data-theme="dark"] .w7m-sample{color:inherit;background:var(--card)}
html[data-theme="dark"] .w7m-note{color:var(--team)} html[data-theme="dark"] .w7m-read{color:var(--found)} html[data-theme="dark"] .w7m-sample{color:var(--sample)}
.w7evl .w7t{font-size:14.5px;line-height:1.45;color:var(--ink)}
.w7evl .w7s{font-size:12.5px;color:var(--mute);margin-top:2px;line-height:1.4}
.w7more{padding:9px 0 2px;font-size:13.5px;color:var(--mute);list-style:none}
.w7more .w7link,.w7more a{font-weight:650}
.w7more-d{display:none}
@media (min-width:821px){.w7id{display:inline}.w7more-t:has(+.w7more-d){display:none}.w7more-d{display:inline}}
sup.w7c{display:inline-grid;place-items:center;min-width:17px;height:17px;padding:0 4px;margin-left:2px;border-radius:9px;background:var(--found-tint);color:var(--found);font:700 12px/1 var(--font-ui);vertical-align:1px;line-height:1}
sup.w7c-note{background:var(--team-tint);color:var(--team)} sup.w7c-guard{background:var(--guard-tint);color:var(--guard)} sup.w7c-read{background:var(--found-tint);color:var(--found)}
.w7guardbox sup.w7c-guard{background:var(--card)}

/* ------------------------------------------------------- what to say */
.w7say{margin-top:10px;padding:12px 14px;border-radius:12px;background:var(--surf2);border:1px solid var(--line)}
.w7say .w7lb{display:block;font-size:12.5px;font-weight:750;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2);margin-bottom:4px}
.w7say p{margin:0;font-size:15px;line-height:1.5;color:var(--ink)}
.w7say .w7by{font-size:12.5px;color:var(--mute);margin-top:6px}
.w7conf{list-style:none;margin:10px 0 0;padding:10px 0 0;border-top:1px solid var(--line2)}
.w7conf li{font-size:13px;color:var(--mute);line-height:1.45;padding:2px 0}
.w7conf li b{color:var(--ink2);font-weight:650}

/* ----------------------------------------------------------- the case */
.w7case{min-width:0}
.w7backlink{display:inline-flex;align-items:center;gap:4px;font-size:15px;font-weight:650;color:var(--ink);text-decoration:none;min-height:44px;margin:-8px 0 0 -4px}
.w7backlink .w7i{width:20px;height:20px}
.w7kicker{font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.w7case h1.w7cname{font-size:28px;line-height:1.15;letter-spacing:-.4px;margin:6px 0 3px;font-weight:700;color:var(--ink)}
.w7aka{font-size:14px;color:var(--ink2);line-height:1.45}
.w7metaline{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;margin-top:7px;font-size:13.5px;color:var(--mute)}
.w7sum{font-size:16.5px;line-height:1.45;margin:12px 0 0;color:var(--ink)}
.w7ch-acts{padding:12px 0 0}
.w7csec{margin-top:20px;min-width:0}
.w7csec>h2{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:750;letter-spacing:.07em;text-transform:uppercase;color:var(--ink2);margin:0 0 8px;font-family:var(--font-ui)}
.w7csec>h2 .w7q{width:22px;height:22px;border-radius:6px;background:var(--navy);color:#fff;display:grid;place-items:center;font:700 12.5px/1 var(--font-ui);letter-spacing:0;flex:none}
html[data-theme="dark"] .w7csec>h2 .w7q{background:var(--ink2);color:#04121C}
.w7csec>h2 .w7aside{margin-left:auto;font-size:12.5px;font-weight:550;letter-spacing:0;text-transform:none;color:var(--mute)}
.w7panel{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;min-width:0}
.w7panel+.w7panel{margin-top:10px}
.w7panel .w7call{border-top:0;padding-top:2px}
html[data-theme="road"] .w7panel{border-color:var(--rule)}
.w7callout{display:flex;gap:10px;align-items:flex-start;margin:4px 0 2px;padding:10px 12px;border-radius:10px;background:var(--found-tint);border:1px solid var(--found-line);font-size:14px;line-height:1.45;color:var(--ink)}
.w7callout .w7i{width:18px;height:18px;flex:none;color:var(--found);margin-top:1px}
.w7alt{font-size:13.5px;color:var(--mute);line-height:1.45;margin-top:8px}
.w7alt b{color:var(--ink2);font-weight:650}
.w7guardbox{border:1px solid var(--guard-line);background:var(--guard-tint);border-radius:12px;padding:12px 14px}
.w7lead{display:flex;gap:9px;font-size:15.5px;line-height:1.45;color:var(--ink);font-weight:600}
.w7lead .w7i{width:19px;height:19px;flex:none;color:var(--guard);margin-top:2px}
.w7guardbox .w7ev li{border-color:var(--guard-line)}
.w7runline{font-size:15px;line-height:1.5;margin:0 0 10px;color:var(--ink)}
.w7runline b{font-weight:650}
.w7ove .w7runline{margin:0}
.w7match{margin-top:10px;border-color:var(--found-line);background:var(--found-tint)}
.w7match .w7runline{margin:6px 0 4px}
.w7match .w7acts{padding:10px 0 0}
.w7why-empty,.w7told-empty,.w7runs-empty{margin-top:0}
.w7recs{list-style:none;margin:0;padding:0}
.w7recs li{display:flex;justify-content:space-between;gap:10px;padding:8px 0;font-size:14px;line-height:1.35}
.w7recs li+li{border-top:1px solid var(--line2)}
.w7recs li span:last-child{color:var(--mute);white-space:nowrap;text-align:right}
@media (max-width:560px){.w7recs li{display:block}.w7recs li span{display:block;text-align:left}.w7recs li span:last-child{margin-top:2px;font-size:13px;white-space:normal}}
.w7cand{margin-top:10px;padding:10px 12px;border:1px dashed var(--rule2);border-radius:10px;font-size:13.5px;color:var(--ink2);line-height:1.45}
.w7cand .w7acts{padding:8px 0 0}
.w7records .w7acts{padding:10px 0 0}

/* charts: inline, token-coloured, never without the numbers in words */
.w7makebar{display:flex;height:14px;border-radius:7px;overflow:hidden;background:var(--line2)}
.w7makebar i{display:block;height:100%}
.w7makebar i+i{box-shadow:inset 1px 0 0 var(--card)}
.w7legend{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:6px;font-size:12.5px;color:var(--mute)}
.w7legend span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.w7legend span:before{content:"";width:9px;height:9px;border-radius:2px;background:var(--c,var(--others))}
.w7years{display:flex;align-items:flex-end;gap:3px;height:54px;margin-top:12px}
.w7years i{flex:1;background:var(--others);border-radius:2px 2px 0 0;min-height:2px}
.w7years i.w7due{background:var(--age)} .w7years i.w7new{background:var(--newunit)}
.w7yax{display:flex;gap:3px;margin-top:3px}
.w7yax span{flex:1;text-align:center;font-size:12px;color:var(--mute);font-variant-numeric:tabular-nums}
.w7ownbar{display:flex;height:10px;border-radius:5px;overflow:hidden;margin:6px 0 2px;background:var(--line2)}
.w7ownbar i{display:block;height:100%}
.w7sublb{font-size:13px;color:var(--mute);margin-top:12px;font-weight:600}

/* the full case on a wide screen: DISPLAY §4.4's two columns, DOM order kept.
   Container queries, not media queries: the case lays out by its own width, so
   a case inside a narrow column on a desk reads as the phone case. */
.w7case{container:w7case / inline-size}
@container w7case (max-width:699px){.w7desk-only{display:none}}
@container w7case (min-width:1060px){
  .w7case:not(.w7compact) .w7cbody{display:grid;grid-template-columns:minmax(0,1fr) 540px;gap:0 24px;align-items:start;grid-template-areas:"who run" "why run" "told recs" "guard recs" "say recs" "cur cur"}
  .w7case:not(.w7compact) .w7s-who{grid-area:who} .w7case:not(.w7compact) .w7s-why{grid-area:why}
  .w7case:not(.w7compact) .w7s-run{grid-area:run} .w7case:not(.w7compact) .w7s-told{grid-area:told}
  .w7case:not(.w7compact) .w7s-guard{grid-area:guard} .w7case:not(.w7compact) .w7s-say{grid-area:say}
  .w7case:not(.w7compact) .w7s-recs{grid-area:recs} .w7case:not(.w7compact) .w7s-cur{grid-area:cur}
  .w7case:not(.w7compact) h1.w7cname{font-size:32px}
  .w7case:not(.w7compact) .w7sum{font-size:18px}
  .w7case:not(.w7compact) .w7ch{display:grid;grid-template-columns:minmax(0,860px) auto;gap:0 24px;align-items:start}
  .w7case:not(.w7compact) .w7ch>*{grid-column:1}
  .w7case:not(.w7compact) .w7ch .w7ch-acts{grid-column:2;grid-row:2 / span 3;padding-top:20px}
}

/* the compact case: the sticky desk pane (DISPLAY §4.2) */
.w7compact{background:var(--card);border:1px solid var(--line);border-radius:14px}
.w7compact .w7ph{padding:16px 20px 12px;border-bottom:1px solid var(--line2)}
.w7compact .w7ph .w7cname{font-size:24px;line-height:1.2;letter-spacing:-.3px;margin:6px 0 2px;font-weight:700;font-family:var(--font-ui)}
.w7compact .w7ph .w7metaline{gap:4px 10px;margin-top:2px}
.w7case .w7metaline,.w7case .w7metaline>span{font-family:var(--font-ui);letter-spacing:0}
.w7case .w7metaline>span:not(.w7stat){font-size:13.5px;font-weight:400}
.w7compact .w7ph .w7id{display:inline}
.w7compact .w7open{font-size:13.5px;font-weight:650;color:var(--blue);text-decoration:none;font-family:var(--font-ui)}
.w7compact .w7pb{padding:4px 20px 18px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 22px}
.w7compact .w7csec{margin-top:16px;grid-column:1 / -1}
.w7compact .w7s-run,.w7compact .w7s-told{grid-column:auto}
.w7compact .w7panel{border:0;padding:0;background:transparent;border-radius:0}
.w7compact .w7panel+.w7panel{margin-top:8px}
.w7compact .w7who-panel .w7call{padding-top:2px}
.w7compact .w7s-cur{grid-column:1 / -1}
.w7compact .w7legend-sample{margin-top:8px}
@container w7case (max-width:600px){.w7compact .w7pb{grid-template-columns:minmax(0,1fr)}.w7compact .w7s-run,.w7compact .w7s-told{grid-column:1 / -1}}

/* ---------------------------------------------- the outcome set, once */
.w7ob-lb{font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin:12px 0 6px}
.w7ob,.w7og,.w6d .k4acts.w7ob,.w7obwrap .k4acts.w7ob,.w7sheet .k4acts.w7og{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.w7ob .k4b,.w7og .k4b,.w7sheet .k4b{min-height:44px;padding:0 6px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--ink);font:650 14px/1 var(--font-ui);cursor:pointer;white-space:nowrap}
.w7ob .k4b:hover,.w7og .k4b:hover{background:var(--surf2);border-color:var(--rule2)}
.w7ob .k4b[aria-pressed="false"],.w7og .k4b[aria-pressed="false"]{background:var(--card);color:var(--ink)}
.w7ob .k4b:disabled,.w7og .k4b:disabled{opacity:.5;cursor:default}
.w7ob .k4open{display:none}
.w7about{display:flex;gap:8px;align-items:flex-start;font-size:13px;color:var(--mute);margin-top:8px;line-height:1.45}
.w7about .w7i,.w7about>svg{width:16px;height:16px;flex:none;color:var(--dial);margin-top:1px}
.w7about b{color:var(--ink2);font-weight:650}
.w7about a{color:var(--blue);text-decoration:none;font-weight:600}
.w6d .w7ob{margin:0}
.w6d .w7ob .k4b{font-family:var(--font-ui);font-weight:650}
@media (max-width:480px){.w7ob,.w6d .k4acts.w7ob,.w7obwrap .k4acts.w7ob{grid-template-columns:1fr 1fr}}

/* ------------------------------------------------- the after-call sheet */
.w7sheetwrap{position:fixed;inset:0;z-index:60}
.w7scrim{position:absolute;inset:0;background:rgba(16,28,38,.38)}
.w7sheetwrap .w7sheet{position:absolute;left:0;right:0;bottom:0;animation:w7-rise var(--dur-2) var(--ease) both}
.w7sheetwrap.closing .w7sheet{animation:w7-sink var(--dur-2) var(--ease) forwards}
.w7sheetwrap.closing .w7scrim{animation:sig-fade-out var(--dur-2) var(--ease) forwards}
.w7sheet{background:var(--card);border-radius:18px 18px 0 0;padding:10px 16px calc(26px + env(safe-area-inset-bottom));box-shadow:var(--shadow-float);max-width:640px;margin:0 auto}
.w7grab{width:40px;height:5px;border-radius:3px;background:var(--line);margin:0 auto 12px}
.w7back4{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.w7sheet h3{font-size:21px;line-height:1.25;margin:4px 0 4px;font-weight:700;color:var(--ink);font-family:var(--font-ui)}
.w7sheet p{font-size:14.5px;color:var(--mute);margin:0 0 14px}
.w7sheet .w7og{grid-template-columns:1fr 1fr;gap:10px}
.w7sheet .w7og .k4b{min-height:56px;font-size:16px}
.w7aboutpick{margin-top:10px}
.w7aboutpick .w7lb{font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin-bottom:6px}
.w7aboutpick .w7chips{margin:0}
.w7aboutpick .w7chip{min-height:40px;font-size:13.5px;white-space:normal;text-align:left}
.w7aboutpick .w7chip .w7n{font-size:15px}
@keyframes w7-rise{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
@keyframes w7-sink{from{transform:none;opacity:1}to{transform:translateY(24px);opacity:0}}

/* ---------------------------------------------------------- the sample */
.w7sample{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;color:var(--sample);letter-spacing:.02em;white-space:nowrap}
.w7sample-x{font-weight:550;white-space:normal}
.is-sample{border-left:3px dashed var(--sample)!important;padding-left:12px}
.w7row.is-sample{border-left:3px dashed var(--sample);padding-left:13px}
.w7row.is-sample.sel:before{display:none}
.w7evl.is-sample{border-left:0!important;padding-left:0}
.w7evl.is-sample .w7t{color:var(--ink2)}
.w7samples{margin:4px 0 8px;display:grid;gap:6px}
.w7sampleitem{padding:6px 0 6px 10px;border-left:3px dashed var(--sample);font-size:13.5px;line-height:1.4;color:var(--ink2)}
.w7sampleitem .w7t{display:block}
.w7sampleitem .w7s{display:block;font-size:12.5px;color:var(--mute);margin-top:1px}
.w7legend-sample{display:flex;gap:8px;align-items:flex-start;margin:10px 0 0;padding:8px 12px;border:1px dashed var(--sample-line);border-radius:10px;background:var(--sample-tint);font-size:13px;line-height:1.4;color:var(--ink2)}
.w7legend-sample .w7i{color:var(--sample);width:16px;height:16px;margin-top:1px}
@media (max-width:480px){.w7row .w7sample-x,.w7evl .w7sample-x{display:none}}

/* ---------------------------------------------------- the Start here card */
.w7card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px 4px}
.w7card.w7start{border-color:var(--found-line)}
.w7card .w7co{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:8px 0 1px}
.w7card .w7co b{font-size:19px;line-height:1.25;font-weight:700;color:var(--ink)}
.w7card .w7claim{font-size:16px;line-height:1.45;margin:8px 0 12px;color:var(--ink)}
.w7card .w7call{border-top:1px solid var(--line2)}
.w7why{margin:0 -16px}
.w7whys{display:flex;align-items:center;justify-content:space-between;min-height:46px;border-top:1px solid var(--line2);padding:0 16px;color:var(--blue);font-size:15px;font-weight:650;cursor:pointer;list-style:none}
.w7whys::-webkit-details-marker{display:none}
.w7whys .w7i{width:18px;height:18px;transition:transform var(--dur-1) var(--ease)}
.w7why[open]>.w7whys .w7i{transform:rotate(90deg)}
.w7whyb{padding:4px 16px 14px}
html[data-theme="road"] .w7card{border-color:var(--rule)}

/* --------------------------------------------- the bulk bar, the meter */
.w7bulk{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:10px;background:var(--navy);color:#fff;font-size:14px;flex-wrap:wrap}
html[data-theme="dark"] .w7bulk{background:var(--surf2);color:var(--ink);border:1px solid var(--line)}
.w7bulk .w7who{display:flex;gap:14px;flex-wrap:wrap;opacity:.95}
.w7bulk .w7who span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.w7bulk .w7note2{margin-left:auto;font-size:12.5px;opacity:.85;max-width:330px;line-height:1.35}
.w7bulk .w7btn{min-height:36px}
.w7bulk .w7onnavy{background:transparent;border-color:rgba(255,255,255,.4);color:#fff}
html[data-theme="dark"] .w7bulk .w7onnavy{border-color:var(--rule2);color:var(--ink)}
.w7av{width:36px;height:36px;border-radius:50%;background:var(--bluetint);color:var(--blue);display:inline-grid;place-items:center;font-size:12.5px;font-weight:700;letter-spacing:.02em;flex:none}
.w7av-sm{width:26px;height:26px;font-size:10.5px}
.w7meter{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;color:var(--ink2);white-space:nowrap}
.w7meter i{width:8px;height:8px;border-radius:50%;background:var(--mute)}
.w7meter.w7met i{background:var(--green)}

/* ------------------------------------------------------------ road mode */
html[data-theme="road"] .w7call .w7tn{font-size:36px}
html[data-theme="road"] .w7call-row .w7tn{font-size:29px}
html[data-theme="road"] .w7card .w7claim,html[data-theme="road"] .w7rt,html[data-theme="road"] .w7rq{font-size:17px}
html[data-theme="road"] .w7kick,html[data-theme="road"] .w7rm{font-size:13.5px}
@container w7list (min-width: 560px){html[data-theme="road"] .w7row .w7call .w7tn{font-size:23px}html[data-theme="road"] .w7rt,html[data-theme="road"] .w7rq{font-size:15px}}

/* ---------------------------------------------------- reduced motion */
@media (prefers-reduced-motion:reduce){.w7sheetwrap .w7sheet,.w7sheetwrap.closing .w7sheet,.w7sheetwrap.closing .w7scrim{animation-duration:1ms}}

/* ------------------------------------------------ #/styleguide specimens */
/* Frames for the admin-only styleguide only; no product page uses these. */
.w7sgphone{max-width:390px;padding:14px 16px;background:var(--page);border:1px solid var(--line);border-radius:14px}
.w7sgdesk{max-width:1100px}
.w7sgnote{margin:-4px 0 12px;max-width:900px;font-size:12.5px;line-height:1.5;color:var(--mute)}
.w7sgwide{max-width:1400px;padding:16px 20px;background:var(--page);border:1px solid var(--line);border-radius:14px}
.w7sgsheet .w7sheet{position:static;box-shadow:none;border:1px solid var(--line);border-radius:18px;max-width:none}
.w7sgpanewrap{max-width:720px}
.w7sgglyphs .w7sgglyph{display:inline-flex;flex-direction:column;align-items:center;gap:4px;min-width:56px;font-size:12px;color:var(--mute)}
.w7sgglyphs .w7i{width:20px;height:20px}
.w7sg .w6sgbody{gap:18px}
.w7sg .w6sglb{font-size:12px;color:var(--mute);letter-spacing:.06em;line-height:1.4}
.w7case .w7kick,.w7case .w7kick .w7kt,.w7legend-sample span{font-family:var(--font-ui)}
.w7legend-sample span{font-weight:500}
.w7sgglyphs small{font-size:12px}
/* the case meta line's " · " separators; the gap carries the spacing */
.w7metaline .w7sep{font-style:normal;color:var(--faint);margin:0 -4px}
.w7metaline .w7id .w7sep{margin:0 8px 0 0}

/* INV: "On our lot" under What to say (DISPLAY-API §2.4 in_stock). */
.w7lot { margin-top: 10px; }
.w7lot .w7lb { display: block; font-size: 12.5px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; color: var(--ink2); margin-bottom: 4px; }

/* Gate: ui.js avatar() paints an inline colour; the rebuild's avatar is always the light
   blue chip (the mockups), and the initials must stay readable on it. */
.w7av { background: var(--bluetint) !important; color: var(--blue); }