/* ReachSpot account surface, table first.
   Countdown items 5, 13, 14, 15, 19.
   Colour rule: lime lives on dark, deep green lives on cream. brand.css bans
   lime on cream at 1.01:1, so the open row uses #3D6B12 and the shell keeps the
   neon. One signal per screen: the open row is the only cream surface. */

:root{
  --rs-ink:#05130D; --rs-panel:#0C2016; --rs-panel-2:#12291C;
  --rs-cream:#F4F0E6; --rs-signal:#D8FF47; --rs-signal-hot:#E6FF7A;
  --rs-deep:#3D6B12; --rs-muted:#8FA396; --rs-dim:#6F8378;
  --rs-warn:#E8A33D; --rs-stop:#8C3B0C;
  --rs-line:rgba(244,240,230,.10); --rs-hair:rgba(244,240,230,.06);
  --rs-edge:rgba(244,240,230,.20);
  --rs-disp:"Archivo","Helvetica Neue",Arial,sans-serif;
  --rs-ui:"Schibsted Grotesk","Helvetica Neue",Arial,sans-serif;
  --rs-mono:"DM Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
body{margin:0;background:var(--rs-ink);color:var(--rs-cream);
  font:14px/1.55 var(--rs-ui);-webkit-font-smoothing:antialiased;
  overflow-x:hidden;overflow-x:clip}
a{color:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- head ---------- */
.acct-head{display:flex;align-items:center;gap:14px;padding:14px 20px;
  background:var(--rs-panel);border-bottom:1px solid var(--rs-line);flex-wrap:wrap}
.acct-head .who{min-width:0}
.acct-head .eyebrow{margin:0 0 2px;font:700 9.5px/1 var(--rs-ui);letter-spacing:.18em;
  text-transform:uppercase;color:var(--rs-signal)}
.acct-head h1{margin:0;font:700 18px/1.15 var(--rs-disp);letter-spacing:-.03em}
.acct-head .profile-line{margin:3px 0 0;font:400 12.5px/1.4 var(--rs-mono);color:var(--rs-muted)}
.acct-actions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.acct-actions .primary{display:inline-flex;align-items:center;min-height:38px;padding:0 14px;
  border-radius:9px;border:1px solid var(--rs-edge);background:transparent;color:var(--rs-cream);
  font:600 12.5px/1 var(--rs-ui);text-decoration:none;cursor:pointer;font-family:var(--rs-ui)}
.acct-actions .primary:hover{background:var(--rs-panel-2)}
.acct-actions .primary.go{background:var(--rs-signal);border-color:var(--rs-signal);color:var(--rs-ink)}
.acct-actions .primary.go:hover{background:var(--rs-signal-hot)}

/* ---------- filters ---------- */
.product-filters{display:flex;gap:4px;padding:10px 16px;border-bottom:1px solid var(--rs-line);
  overflow-x:auto}
.product-filters:empty{display:none}
.product-filters button{padding:8px 13px;border-radius:8px;border:1px solid transparent;
  background:none;color:var(--rs-muted);font:500 13px/1 var(--rs-ui);white-space:nowrap;cursor:pointer}
.product-filters button[aria-pressed="true"]{background:rgba(216,255,71,.10);
  color:var(--rs-cream);border-color:rgba(216,255,71,.28)}
.product-filters button b{margin-left:6px;font:600 11px/1 var(--rs-mono);color:var(--rs-dim)}
.product-filters button[aria-pressed="true"] b{color:var(--rs-signal)}

/* ---------- layout ---------- */
.acct-body{display:grid;grid-template-columns:minmax(0,1fr) 264px}
.acct-main{min-width:0;border-right:1px solid var(--rs-hair)}

/* ---------- table ---------- */
.thead,.trow{display:grid;
  grid-template-columns:12px minmax(140px,1.1fr) minmax(0,2fr) 92px 84px 104px 62px;
  gap:14px;align-items:center;padding:0 20px}
.thead{height:34px;border-bottom:1px solid var(--rs-line);
  font:500 9.5px/1 var(--rs-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--rs-dim)}
.thead .r{text-align:right}
.trow{height:52px;border-bottom:1px solid var(--rs-hair);cursor:pointer;
  border-left:2px solid transparent;padding-left:18px;background:none;width:100%;
  text-align:left;font:inherit;color:inherit}
.trow:hover{background:#0A1B12}
.trow:focus-visible{outline:2px solid var(--rs-signal);outline-offset:-2px}
.trow[aria-expanded="true"]{background:var(--rs-panel);border-left-color:var(--rs-signal)}
.tdot{width:7px;height:7px;border-radius:2px;background:var(--rs-signal);transform:rotate(45deg)}
.tdot.warn{background:var(--rs-warn)} .tdot.mute{background:var(--rs-dim)}
.tfn{font-weight:600;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tev{color:#9DB0A4;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tnum{font:400 12.5px/1 var(--rs-mono);text-align:right;white-space:nowrap}
.tnum.dim{color:var(--rs-muted)}
.tmode{font:500 10.5px/1 var(--rs-mono);color:var(--rs-muted);display:inline-flex;
  align-items:center;gap:6px;white-space:nowrap}
.tmode i{width:5px;height:5px;border-radius:50%;background:var(--rs-signal);flex:none}
.tmode.enquiry i{background:var(--rs-signal)}
.tmode.invitation i{background:var(--rs-warn)}
.tmode.closed i{background:var(--rs-dim)}
.tpc{font:600 12.5px/1 var(--rs-mono);color:var(--rs-signal);text-align:right}
.tpc.mute{color:var(--rs-dim)}
.trow.is-saved .tfn:after{content:"saved";margin-left:8px;font:500 9.5px/1 var(--rs-mono);
  letter-spacing:.1em;text-transform:uppercase;color:var(--rs-deep);background:rgba(216,255,71,.16);
  padding:3px 5px;border-radius:4px;vertical-align:1px}
.trow.is-dismissed{opacity:.45}

/* ---------- the one open row ---------- */
.detail{background:var(--rs-cream);color:var(--rs-ink);padding:22px 24px 20px;
  border-bottom:1px solid var(--rs-line)}
.detail h2{margin:0 0 6px;font:700 21px/1.2 var(--rs-disp);letter-spacing:-.025em;max-width:56ch}
.dmeta{margin:0 0 16px;color:#5C6B60;font:400 12.5px/1.5 var(--rs-mono)}
.dgrid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:26px}
.dlab{margin:0 0 8px;font:700 9.5px/1 var(--rs-ui);letter-spacing:.16em;text-transform:uppercase;
  color:var(--rs-deep)}
.dreasons{margin:0;padding:0;list-style:none}
.dreasons li{position:relative;padding:4px 0 4px 18px;font-size:13.5px;line-height:1.6;color:#3F4A44}
.dreasons li:before{content:"";position:absolute;left:0;top:11px;width:7px;height:7px;
  background:var(--rs-deep)}
.dchecks{margin:0;padding:0;list-style:none}
.dchecks li{display:flex;justify-content:space-between;gap:14px;padding:5px 0;
  border-bottom:1px dotted rgba(5,19,13,.16);font-size:12.5px;color:#3F4A44}
.dchecks b{font:500 12.5px/1 var(--rs-mono);color:var(--rs-deep)}
.dchecks b.no{color:var(--rs-stop)}
.dwarn{margin:14px 0 0;padding:11px 14px;border-left:2px solid var(--rs-stop);
  background:rgba(140,59,12,.07);font-size:12.5px;line-height:1.55;color:#3F4A44}
.match-actions{display:flex;align-items:center;gap:10px;margin-top:18px;padding-top:16px;
  border-top:1px solid rgba(5,19,13,.12);flex-wrap:wrap}
.match-actions button{padding:9px 15px;border-radius:9px;border:1px solid rgba(5,19,13,.22);
  background:transparent;color:var(--rs-ink);font:600 12.5px/1 var(--rs-ui);cursor:pointer;
  font-family:var(--rs-ui)}
.match-actions button[data-signal="saved"]{background:var(--rs-deep);border-color:var(--rs-deep);
  color:var(--rs-cream)}
.match-actions button[disabled]{opacity:.5;cursor:default}
.match-actions select{padding:9px 12px;border-radius:9px;border:1px solid rgba(5,19,13,.22);
  background:transparent;color:var(--rs-ink);font:600 12.5px/1 var(--rs-ui);font-family:var(--rs-ui)}
.match-actions .status{font-size:12px;color:#5C6B60}
.dlink{margin-left:auto;color:var(--rs-deep);font:600 12.5px/1 var(--rs-ui);text-decoration:none;
  white-space:nowrap}
.dlink:hover{text-decoration:underline}
.dnolink{margin-left:auto;color:var(--rs-stop);font:600 12px/1 var(--rs-ui)}
.dchecked{width:100%;margin:9px 0 0;font:400 11px/1.5 var(--rs-mono);color:#5C6B60;word-break:break-word}
.dchecked b{color:var(--rs-deep);font-weight:500}
.dchecked.no b{color:var(--rs-stop)}

/* ---------- right rail ---------- */
.acct-side{min-width:0}
.side-h{height:34px;display:flex;align-items:center;padding:0 18px;
  border-bottom:1px solid var(--rs-line);font:500 9.5px/1 var(--rs-mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--rs-dim)}
.side-h + .side-h{border-top:1px solid var(--rs-line)}
.crow{display:flex;gap:12px;padding:12px 18px;border-bottom:1px solid var(--rs-hair)}
.crow .d{flex:none;width:46px;font:500 11px/1.35 var(--rs-mono);color:var(--rs-signal)}
.crow.soon .d{color:var(--rs-warn)}
.crow .t{font-size:12.5px;font-weight:600;line-height:1.35;min-width:0}
.crow .t span{display:block;font-weight:400;font-size:11.5px;color:var(--rs-muted);margin-top:2px}
.side-note{padding:14px 18px;font-size:11.5px;line-height:1.6;color:var(--rs-muted)}
.side-note b{display:block;color:var(--rs-cream);font:600 11.5px/1.5 var(--rs-ui);margin-top:8px}
.side-note b:first-child{margin-top:0}

/* ---------- empty and errors ---------- */
.empty{padding:38px 20px;color:var(--rs-muted);font-size:14px;line-height:1.7;max-width:56ch}
.empty strong{color:var(--rs-cream);font-weight:600}
.empty a{color:var(--rs-signal)}

/* ---------- watchlists, unchanged behaviour ---------- */
.watchlists{padding:34px 20px 60px;border-top:1px solid var(--rs-line)}
.watchlists .eyebrow{margin:0 0 6px;font:700 9.5px/1 var(--rs-ui);letter-spacing:.18em;
  text-transform:uppercase;color:var(--rs-signal)}
.watchlists h2{margin:0 0 6px;font:700 22px/1.15 var(--rs-disp);letter-spacing:-.03em}
.watchlists > header > p{margin:0 0 22px;max-width:70ch;color:var(--rs-muted);font-size:13px}
.watchlist-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px}
.watchlist-panel{background:var(--rs-panel);border:1px solid var(--rs-line);border-radius:13px;
  padding:20px}
.watchlist-panel h3{margin:0 0 6px;font:700 16px/1.2 var(--rs-disp);letter-spacing:-.02em}
.watchlist-panel > p{margin:0 0 16px;color:var(--rs-muted);font-size:12.5px}
.watch-form{display:grid;gap:10px}
.watch-form label{display:grid;gap:5px;font:500 11px/1 var(--rs-mono);letter-spacing:.1em;
  text-transform:uppercase;color:var(--rs-muted)}
.watch-form input,.watch-form select,.watch-import textarea,.watch-import input,
.watch-import select{padding:10px 12px;border-radius:8px;border:1px solid var(--rs-edge);
  background:var(--rs-ink);color:var(--rs-cream);font:400 13px/1.4 var(--rs-ui)}
.watch-form .primary{min-height:40px;padding:0 14px;border-radius:9px;border:1px solid var(--rs-signal);
  background:var(--rs-signal);color:var(--rs-ink);font:600 12.5px/1 var(--rs-ui);cursor:pointer}
.watch-import{margin-top:14px}
.watch-import summary{cursor:pointer;font:600 12px/1 var(--rs-ui);color:var(--rs-muted);
  padding:8px 0;min-height:34px;display:flex;align-items:center}
.watch-import label{display:grid;gap:5px;margin:10px 0;font:500 11px/1 var(--rs-mono);
  letter-spacing:.1em;text-transform:uppercase;color:var(--rs-muted)}
.watch-status{margin-top:12px;font-size:12.5px;color:var(--rs-muted)}
.watch-entries{margin-top:12px;display:grid;gap:8px}

@media (max-width:1000px){
  .acct-body{grid-template-columns:minmax(0,1fr)}
  .acct-main{border-right:0}
  .acct-side{border-top:1px solid var(--rs-line)}
}
@media (max-width:760px){
  .thead{display:none}
  .trow{grid-template-columns:12px minmax(0,1fr) 66px;grid-template-rows:auto auto;
    height:auto;padding:12px 16px 12px 14px;gap:4px 12px;align-items:start}
  .trow .tev{grid-column:2/4;white-space:normal}
  .trow .tnum,.trow .tmode{display:none}
  .dgrid{grid-template-columns:minmax(0,1fr);gap:18px}
  .detail{padding:18px 16px}
  .dlink,.dnolink{margin-left:0;width:100%}
  .acct-head{padding:12px 14px}
  .acct-actions{width:100%;margin-left:0}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* [hidden] is one attribute selector and loses to any class rule that sets
   display, so an element the code believes is hidden keeps rendering and
   keeps its place in the tab order. tests/hidden-attribute.test.mjs now
   fails the build when a guard is missing. */
.primary[hidden]{display:none}