/* Outrun Rewards page. Loaded after noir-light.css, scoped to body.noir; delete the <link> to remove it.
   Dark tokens come from noir.css and light tokens from noir-light.css (html[data-theme=light] body.noir), so most rules just use the tokens.
   Only spots that need a different shade carry a light rule at the end. Small orange text in light mode is #B83D0B / #9A3412 (see noir-light.css).
   No inline styles anywhere: the live CSP is style-src 'self'. */

/* ---------- framed panels, as on the billing page ---------- */
body.noir[data-route=rewards] .panel{border:1px solid var(--line-2);background:var(--frame);padding:28px}
body.noir[data-route=rewards] .rw-panel+.rw-panel{margin-top:24px}
body.noir .rw-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
body.noir .rw-head{flex-wrap:wrap;align-items:flex-end;gap:14px 32px}
body.noir .rw-head p{margin-top:6px}
body.noir .rw-off{margin:0;color:var(--muted);font-size:14px}

/* ---------- tasks: progress ---------- */
body.noir .rw-progress{display:grid;gap:10px;min-width:min(100%,240px)}
body.noir .rw-progress-text{font-family:var(--mono);font-size:12px;letter-spacing:.02em;color:var(--muted);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
body.noir .rw-bar{display:block;height:2px;background:var(--line-2)}
body.noir .rw-bar-fill{display:block;height:100%;background:var(--orange);transform-origin:0 50%;transform:scaleX(0);transition:transform .5s var(--ease)}
body.noir .rw-bar-fill[data-step="1"]{transform:scaleX(.1)}body.noir .rw-bar-fill[data-step="2"]{transform:scaleX(.2)}
body.noir .rw-bar-fill[data-step="3"]{transform:scaleX(.3)}body.noir .rw-bar-fill[data-step="4"]{transform:scaleX(.4)}
body.noir .rw-bar-fill[data-step="5"]{transform:scaleX(.5)}body.noir .rw-bar-fill[data-step="6"]{transform:scaleX(.6)}
body.noir .rw-bar-fill[data-step="7"]{transform:scaleX(.7)}body.noir .rw-bar-fill[data-step="8"]{transform:scaleX(.8)}
body.noir .rw-bar-fill[data-step="9"]{transform:scaleX(.9)}body.noir .rw-bar-fill[data-step="10"]{transform:scaleX(1)}

/* ---------- tasks: rows ---------- */
body.noir .rw-list{list-style:none;margin:22px 0 0;padding:0;border-top:1px solid var(--line-2)}
body.noir .rw-row{position:relative;display:grid;grid-template-columns:32px minmax(0,1fr);grid-template-areas:"mark main" ". meta" ". actions";gap:10px 16px;align-items:start;padding:18px 0;border-bottom:1px solid var(--line);outline-offset:-2px}
body.noir .rw-row:last-child{border-bottom:0;padding-bottom:0}
body.noir .rw-mark{grid-area:mark;display:grid;place-items:center;width:32px;height:32px;border:1px solid var(--line-2);font-family:var(--mono);font-size:12px;font-weight:600;color:var(--muted)}
body.noir .rw-mark svg{width:15px;height:15px;stroke-width:2}
body.noir .rw-main{grid-area:main;display:grid;gap:3px;min-width:0;padding-top:1px}
body.noir .rw-main strong{font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--text)}
body.noir .rw-main span{font-size:13px;line-height:1.5;color:var(--muted);max-width:62ch}
body.noir .rw-meta{grid-area:meta;display:flex;align-items:baseline;gap:6px 16px;flex-wrap:wrap}
body.noir .rw-amount{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}
body.noir .rw-state{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
body.noir .rw-actions{grid-area:actions;display:flex;flex-wrap:wrap;gap:8px}
body.noir .rw-actions:empty{display:none}
body.noir .rw-actions .button{margin:0}

/* ready: orange frame on the mark, a quiet orange wash on the row */
body.noir .rw-row[data-status=ready]{margin-inline:-14px;padding-inline:14px;background:rgba(255,85,0,.06);box-shadow:inset 2px 0 0 var(--orange);border-bottom-color:transparent}
body.noir .rw-row[data-status=ready] .rw-mark{border-color:var(--orange);color:var(--orange);background:rgba(255,85,0,.08)}
body.noir .rw-row[data-status=ready] .rw-state{color:var(--orange)}
/* claimed: filled orange mark, quieter text */
body.noir .rw-row[data-status=claimed] .rw-mark{background:var(--orange);border-color:var(--orange);color:#0A0A0A}
body.noir .rw-row[data-status=claimed] .rw-main strong,body.noir .rw-row[data-status=claimed] .rw-amount{color:var(--muted)}
body.noir .rw-row.is-new{animation:rw-new 1.1s var(--ease) both}
@keyframes rw-new{from{background:rgba(255,85,0,.2)}to{background:rgba(255,85,0,0)}}

/* below 1200px the progress line sits under the title, full width */
@media (max-width:1199px){
  body.noir .rw-progress{width:100%}
  body.noir .rw-progress-text{text-align:left}
}
/* tablet and up: meta sits at the right of the title, actions under the text */
@media (min-width:768px){
  body.noir .rw-row{grid-template-columns:32px minmax(0,1fr) auto;grid-template-areas:"mark main meta" ". actions actions";column-gap:20px}
  body.noir .rw-meta{flex-direction:column;align-items:flex-end;gap:6px;text-align:right}
}
/* wide: one line per task, columns that line up from row to row */
@media (min-width:1200px){
  body.noir .rw-row{grid-template-columns:32px minmax(0,1fr) 60px 116px 344px;grid-template-areas:"mark main amount state actions";align-items:center;column-gap:20px}
  body.noir .rw-meta{display:contents}
  body.noir .rw-amount{grid-area:amount;text-align:right}
  body.noir .rw-state{grid-area:state}
  body.noir .rw-actions{justify-content:flex-end}
  body.noir .rw-row[data-status=ready]{margin-inline:-14px}
}

/* ---------- invite friends ---------- */
body.noir .rw-link{display:flex;gap:10px;margin-top:22px}
body.noir .rw-link input{flex:1;min-width:0;height:46px;padding:0 14px;font-family:var(--mono);font-size:13.5px}
body.noir .rw-copy{min-width:118px;min-height:46px;flex:none}
body.noir .rw-copy .rw-ic-done,body.noir .rw-copy.is-copied .rw-ic-copy{display:none}
body.noir .rw-copy.is-copied .rw-ic-done{display:inline-block}
body.noir .rw-copy.is-copied{border-color:var(--orange)}
body.noir .rw-counts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:26px 0 0;border-top:1px solid var(--line-2)}
body.noir .rw-counts>div{padding:18px 20px 0;border-left:1px solid var(--line)}
body.noir .rw-counts>div:first-child{padding-left:0;border-left:0}
body.noir .rw-counts dt{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
body.noir .rw-counts dd{margin:8px 0 0;font-family:var(--sans);font-size:30px;font-weight:600;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
body.noir .rw-counts small{display:block;margin-top:8px;font-size:12px;line-height:1.4;color:var(--dim)}

/* ---------- daily check-in (existing block, in a framed panel) ---------- */
body.noir[data-route=rewards] .table-wrap{--tw-cover:var(--frame)}
body.noir #rw-checkin .billing-total{margin-top:4px}

/* ---------- follow ---------- */
body.noir .rw-follow{display:flex;flex-wrap:wrap;gap:10px}

/* ---------- mobile ---------- */
@media (max-width:767px){
  body.noir[data-route=rewards] .panel{padding:20px}
  body.noir .rw-head{align-items:flex-start}
  body.noir .rw-row[data-status=ready]{margin-inline:-12px;padding-inline:12px}
  body.noir .rw-actions .button{flex:1 1 auto;min-height:44px;justify-content:center}
  body.noir .rw-link{flex-direction:column}
  body.noir .rw-copy{width:100%}
  body.noir .rw-counts{grid-template-columns:1fr}
  body.noir .rw-counts>div,body.noir .rw-counts>div:first-child{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"dt dd" "note dd";column-gap:16px;align-items:center;padding:14px 0;border-left:0}
  body.noir .rw-counts>div+div{border-top:1px solid var(--line)}
  body.noir .rw-counts dt{grid-area:dt}
  body.noir .rw-counts dd{grid-area:dd;margin:0;font-size:24px}
  body.noir .rw-counts small{grid-area:note;margin-top:4px}
}

/* ---------- light theme: tokens do most of it; these need a deeper orange for small text on a tint ---------- */
html[data-theme=light] body.noir .rw-row[data-status=ready]{background:rgba(255,85,0,.07)}
html[data-theme=light] body.noir .rw-row[data-status=ready] .rw-mark{color:var(--orange-deep);background:rgba(255,85,0,.1)}
html[data-theme=light] body.noir .rw-row[data-status=ready] .rw-state{color:var(--orange-deep)}
html[data-theme=light] body.noir .rw-row[data-status=claimed] .rw-mark{color:#0A0A0A}
/* the page-title dot: brand orange is 2.9:1 on paper, so it takes the small-text shade here (5.1:1) */
html[data-theme=light] body.noir[data-route=rewards] .heading h1 .dot{color:var(--orange-text)}
html[data-theme=light] body.noir .rw-bar{background:rgba(10,10,10,.14)}
html[data-theme=light] body.noir .rw-copy.is-copied{color:var(--orange-deep)}
html[data-theme=light] body.noir .rw-link input{background:#FFFFFF}
@media (prefers-reduced-motion:reduce){
  body.noir .rw-row.is-new{animation:none}
  body.noir .rw-bar-fill{transition:none}
}

/* Toasts (whole dashboard): refresh.css uses var(--raised), which the Noir dark theme makes a 3.5% tint, so page text
   showed through the toast. Solid in dark too; light mode already sets its own (noir-light.css). At ship, move this into noir.css. */
html:not([data-theme=light]) body.noir #toast{background:#171716;border:1px solid rgba(245,243,238,.18);box-shadow:0 20px 60px -20px rgba(0,0,0,.9)}