/* Outrun Noir: dashboard LIGHT theme. Loaded after noir.css; everything is scoped to html[data-theme=light] body.noir,
   so dark stays exactly as it was and removing this <link> removes light mode. The theme is set before first paint by noir.js.
   Palette matches the docs' light theme: cream paper, ink type, hairlines, one orange. Code blocks stay dark (as in the docs).
   Orange #FF5500 is kept for fills, borders and icons; small orange TEXT uses #B83D0B (4.6:1 or better on every light surface, 5.1:1 on the page) or #9A3412 on tinted fills;
   focus rings use #E04A00 (3.3:1 or better). */

html[data-theme=light]{color-scheme:light;background:#F5F3EE}
html[data-theme=light] body.noir{
  --bg:#F5F3EE;--surface:#F5F3EE;--panel:transparent;--raised:rgba(10,10,10,.035);--frame:#EFEDE8;--code:#FBFAF7;
  --line:rgba(10,10,10,.12);--line-2:rgba(10,10,10,.22);
  --text:#0A0A0A;--muted:rgba(10,10,10,.70);--dim:rgba(10,10,10,.60);
  --accent:#FF5500;--orange:#FF5500;--accent-hi:#B83D0B;--focus:#E04A00;--orange-text:#B83D0B;--orange-deep:#9A3412;
  --soft:#F8E4D8;--soft-line:rgba(255,85,0,.45);
  --ok:#2B6420;--warn:#7A4E00;--bad:#B42318;
  --pop:#FBFAF7;--pop-shadow:0 24px 60px -28px rgba(10,10,10,.35);
  background:#F5F3EE;color:var(--text);
}
html[data-theme=light] body.noir ::placeholder{color:rgba(10,10,10,.58)}

/* paper grain: same noise as dark, printed in ink instead of light */
html[data-theme=light] body.noir::after{opacity:.045;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- shell ---------- */
html[data-theme=light] body.noir .sidebar{background:#EFEDE8;border-right-color:var(--line);scrollbar-color:#cfccc3 transparent}
html[data-theme=light] body.noir .workspace-label,html[data-theme=light] body.noir .nav-label,html[data-theme=light] body.noir .sidebar-bottom p{color:var(--dim)}
html[data-theme=light] body.noir .sidebar-bottom .sidebar-bot:hover{border-color:rgba(255,85,0,.55)}
html[data-theme=light] body.noir .topbar{background:rgba(245,243,238,.86)}
html[data-theme=light] body.noir .search-trigger:hover,html[data-theme=light] body.noir .auth-back:hover{border-color:rgba(10,10,10,.45)}
html[data-theme=light] body.noir .search-trigger kbd{background:none;border-color:var(--line-2);color:var(--dim)}
html[data-theme=light] body.noir footer{color:var(--dim)}
@media (max-width:767px){
  html[data-theme=light] body.noir .sidebar{box-shadow:24px 0 60px -10px rgba(10,10,10,.22)}
  html[data-theme=light] body.noir .sidebar.open~.workspace::before{background:rgba(10,10,10,.32)}
}

/* account menu, model picker, command palette, dialogs, toast, tour: solid paper, hairline, soft ink shadow */
html[data-theme=light] body.noir .account-panel{background:var(--pop);border-color:var(--line-2);box-shadow:var(--pop-shadow)}
html[data-theme=light] body.noir .account-panel::after{background:linear-gradient(90deg,transparent,rgba(255,85,0,.6),transparent)}
html[data-theme=light] body.noir dialog{background:var(--pop);border-color:var(--line-2);color:var(--text);box-shadow:0 40px 90px -40px rgba(10,10,10,.45)}
html[data-theme=light] body.noir dialog::backdrop{background:rgba(10,10,10,.30)}
html[data-theme=light] body.noir .command-result:hover,html[data-theme=light] body.noir .command-result:focus-visible{background:var(--raised)}
html[data-theme=light] body.noir #toast{background:var(--pop);color:var(--text);border:1px solid var(--line-2);box-shadow:0 20px 50px -24px rgba(10,10,10,.4)}
html[data-theme=light] body.noir .model-select-popup{background:var(--pop);border-color:var(--line-2);box-shadow:var(--pop-shadow)}
html[data-theme=light] body.noir .model-select-trigger:hover{border-color:rgba(255,85,0,.55)}
html[data-theme=light] body.noir .model-select-option:hover,html[data-theme=light] body.noir .model-select-option:focus-visible{outline-color:rgba(10,10,10,.3)}
html[data-theme=light] body.noir .model-select-option[aria-selected="true"]{color:var(--orange-deep);background:var(--soft)}
html[data-theme=light] body.noir .tour-card,html[data-theme=light] body.noir .tour-arrow{background:var(--pop);border-color:var(--line-2);box-shadow:var(--pop-shadow)}
html[data-theme=light] body.noir .tour-spotlight{box-shadow:0 0 0 100vmax rgba(10,10,10,.42)}
html[data-theme=light] body.noir .guided-tour.is-transitioning .tour-blocker{background:rgba(10,10,10,.42)}
html[data-theme=light] body.noir .tour-card .tour-count,html[data-theme=light] body.noir .tour-count{color:var(--orange-text)}

/* ---------- announcement bar (kept): warm paper strip, ink type, orange gift ---------- */
html[data-theme=light] body.noir .signup-announcement{background:linear-gradient(90deg,#F6E7DC,#F9EDE4 50%,#F6E7DC);border-bottom-color:rgba(255,85,0,.28)}
html[data-theme=light] body.noir .announce-msg a{color:var(--orange-deep);text-decoration-color:rgba(154,52,18,.45)}
html[data-theme=light] body.noir .announce-dot:not([aria-current="true"])::before{background:rgba(10,10,10,.28)}

/* ---------- buttons ---------- */
html[data-theme=light] body.noir .button.primary,html[data-theme=light] body.noir .primary{color:#0A0A0A}
html[data-theme=light] body.noir .button.primary:hover,html[data-theme=light] body.noir .primary:hover{background:#0A0A0A;border-color:#0A0A0A;color:#F5F3EE}
html[data-theme=light] body.noir .button.primary:disabled,html[data-theme=light] body.noir .primary:disabled{background:#F2CDB8;border-color:#F2CDB8;color:rgba(10,10,10,.7)}
html[data-theme=light] body.noir .go{background:rgba(10,10,10,.06)}
html[data-theme=light] body.noir .button:hover .go{background:rgba(10,10,10,.1)}
html[data-theme=light] body.noir .primary:hover .go{background:rgba(245,243,238,.16)}
html[data-theme=light] body.noir .danger,html[data-theme=light] body.noir .button.danger{color:var(--bad)}
html[data-theme=light] body.noir .button.danger{border-color:rgba(180,35,24,.4)}
html[data-theme=light] body.noir .button.danger:hover{background:rgba(180,35,24,.06);border-color:rgba(180,35,24,.7)}

/* ---------- forms ---------- */
html[data-theme=light] body.noir select,html[data-theme=light] body.noir input,html[data-theme=light] body.noir textarea,html[data-theme=light] body.noir .input{background:#FFFFFF;border-color:var(--line-2);color:var(--text)}
html[data-theme=light] body.noir input:where(:not([type=checkbox],[type=radio])):hover,html[data-theme=light] body.noir select:hover,html[data-theme=light] body.noir textarea:hover{border-color:rgba(10,10,10,.42)}
html[data-theme=light] body.noir select:focus,html[data-theme=light] body.noir input:focus,html[data-theme=light] body.noir textarea:focus{border-color:var(--focus);outline:1px solid var(--focus);box-shadow:0 0 0 3px rgba(255,85,0,.16)}
/* focus rings: a slightly deeper orange so the ring keeps 3:1 against cream and white (#FF5500 is 2.9:1) */
html[data-theme=light] body.noir :focus-visible,html[data-theme=light] body.noir .conversation-open:focus-visible,html[data-theme=light] body.noir .history-toggle input:focus-visible+.history-switch,html[data-theme=light] body.noir #play-area .chat-composer textarea:focus-visible{outline-color:var(--focus)}
html[data-theme=light] body.noir #play-area .chat-composer textarea:focus{border-color:var(--focus)}
html[data-theme=light] body.noir input[type=date]{color-scheme:light}
html[data-theme=light] body.noir .chat-composer{background:rgba(10,10,10,.025)}
html[data-theme=light] body.noir #play-area .chat-composer textarea{background:#FFFFFF}
/* the empty-chat mark ships with cream lettering: show the ink copy (same geometry, from logo-ink.svg) */
html[data-theme=light] body.noir .chat-empty img[src$="/mark.svg"]{object-fit:none;object-position:-9999px 0;background:url(/account/assets/logo-ink.svg) 0 50%/auto 100% no-repeat}
html[data-theme=light] body.noir .key-secret{border-color:var(--line-2)}
html[data-theme=light] body.noir .history-toggle input:checked+.history-switch{background:var(--soft)}
html[data-theme=light] body.noir .signin-code{color:var(--text)}

/* ---------- overview ---------- */
html[data-theme=light] body.noir .balance-panel{background:radial-gradient(70% 90% at 92% 0%,rgba(255,85,0,.11),transparent 62%)}
html[data-theme=light] body.noir .balance-panel::after{border-color:var(--line)}
html[data-theme=light] body.noir .balance-foot{background:none}
html[data-theme=light] body.noir .gauge .g-arc{stroke:rgba(10,10,10,.28)}
html[data-theme=light] body.noir .gauge .g-tick{stroke:rgba(10,10,10,.42)}
html[data-theme=light] body.noir .check-row .step-dot{border-color:rgba(10,10,10,.3)}
html[data-theme=light] body.noir .check-row.is-next .step-dot,html[data-theme=light] body.noir .check-row.is-next>a,html[data-theme=light] body.noir .checklist-count{color:var(--orange-text)}
html[data-theme=light] body.noir .stat small{color:var(--dim)}
html[data-theme=light] body.noir .chart-bar{fill:rgba(255,85,0,.6)}
html[data-theme=light] body.noir .chart-bar:hover{fill:rgba(255,85,0,.9)}
html[data-theme=light] body.noir .chart-bar.is-latest{fill:#FF5500}
html[data-theme=light] body.noir .chart-grid{stroke:rgba(10,10,10,.12)}
html[data-theme=light] body.noir .chart-grid.chart-base{stroke:rgba(10,10,10,.35)}

/* icon tiles and symbols: orange frame and glyph on a light orange tint */
html[data-theme=light] body.noir .icon-tile{background:rgba(255,85,0,.07);border-color:rgba(255,85,0,.55)}
html[data-theme=light] body.noir .guide-symbol{background:rgba(255,85,0,.07)!important;border-color:rgba(255,85,0,.55)!important}
html[data-theme=light] body.noir .guide-link:hover .guide-symbol,html[data-theme=light] body.noir .quick-link:hover .icon-tile{background:rgba(255,85,0,.14)!important;border-color:var(--orange)!important}
html[data-theme=light] body.noir :is(.setup-step,.key-icon,.support-empty-icon,.welcome-gift,.resource-symbol,.reward-check){background:rgba(255,85,0,.07)!important;border:1px solid rgba(255,85,0,.55)!important;color:var(--orange)}
html[data-theme=light] body.noir .setup-step{color:var(--orange-deep)}
html[data-theme=light] body.noir .support-option>svg:first-child,html[data-theme=light] body.noir .reload-hint svg,html[data-theme=light] body.noir .chip-note svg,html[data-theme=light] body.noir .selected-model-strip>svg{color:var(--orange)}

/* ---------- tables, model rows ---------- */
html[data-theme=light] body.noir th,html[data-theme=light] body.noir table th{background:rgba(10,10,10,.035);color:var(--dim)}
html[data-theme=light] body.noir td{border-top-color:transparent}
html[data-theme=light] body.noir .model-row code{color:var(--muted)}

/* ---------- status pills (kept rounded) ---------- */
html[data-theme=light] body.noir .status{color:var(--ok);border-color:rgba(43,100,32,.32);background:rgba(43,100,32,.08)}
html[data-theme=light] body.noir .status:is(.fail,.failed,.closed,.error,.cancelled,.expired){color:var(--bad);border-color:rgba(180,35,24,.3);background:rgba(180,35,24,.07)}
html[data-theme=light] body.noir .status:is(.waiting,.new,.pending,.creating,.created,.open,.crediting){color:var(--warn);border-color:rgba(122,78,0,.3);background:rgba(184,128,20,.1)}
html[data-theme=light] body.noir .status.inactive{color:var(--muted);border-color:var(--line-2);background:transparent}
html[data-theme=light] body.noir .connection-success{color:var(--ok)}
html[data-theme=light] body.noir .bill-breakdown>div:last-child{background:rgba(43,100,32,.06)}

/* ---------- notices ---------- */
html[data-theme=light] body.noir .notice{color:var(--muted)}
html[data-theme=light] body.noir .notice a{color:var(--orange-text)}
html[data-theme=light] body.noir .form-error{color:var(--bad)}
html[data-theme=light] body.noir .empty{background:none}

/* ---------- selected / active states ---------- */
html[data-theme=light] body.noir .preset{color:var(--text)}
html[data-theme=light] body.noir .preset:hover{border-color:rgba(255,85,0,.6)}
html[data-theme=light] body.noir .preset.active,html[data-theme=light] body.noir .preset[aria-pressed=true]{background:rgba(255,85,0,.09);border-color:var(--orange);color:var(--text)}
html[data-theme=light] body.noir .tab.active{color:var(--text);background:var(--soft);border-color:var(--soft-line)}
html[data-theme=light] body.noir .selected-model-strip{background:rgba(255,85,0,.06)}
html[data-theme=light] body.noir .selected-model-strip small,html[data-theme=light] body.noir .chip-note{color:var(--orange-deep)}
html[data-theme=light] body.noir .history-filter.active{border-color:rgba(255,85,0,.6);background:var(--soft);color:var(--orange-deep)}
html[data-theme=light] body.noir .history-kind,html[data-theme=light] body.noir .reward-congrats small,html[data-theme=light] body.noir main>.account-identity .account-tip{color:var(--orange-text)}
html[data-theme=light] body.noir .conversation-open:hover{color:var(--orange-text)}
html[data-theme=light] body.noir .setup-prerequisite:hover,html[data-theme=light] body.noir .setup-tools .guide-link:hover,html[data-theme=light] body.noir .support-option:hover{border-color:rgba(255,85,0,.5)}
html[data-theme=light] body.noir .support-option:hover{background:var(--raised)}
html[data-theme=light] body.noir .reward-congrats{background:var(--pop);border-color:rgba(255,85,0,.45);box-shadow:var(--pop-shadow)}
html[data-theme=light] body.noir .media-status{color:var(--dim)}
html[data-theme=light] body.noir .media-status h3{color:var(--text)}
html[data-theme=light] body.noir .endpoint{color:var(--text)}
html[data-theme=light] body.noir .endpoint b{color:var(--orange-text)}
html[data-theme=light] body.noir .web-toggle[aria-checked="true"]{color:var(--orange-deep)}
html[data-theme=light] body.noir .login .eyebrow{color:var(--orange-text)}
html[data-theme=light] body.noir .skeleton{background:rgba(10,10,10,.06)}
html[data-theme=light] body.noir #preview-label{background:#F6E7DC;color:var(--text);border-bottom-color:rgba(255,85,0,.3)}

/* ---------- code blocks stay dark, as in the docs ---------- */
html[data-theme=light] body.noir .code-wrap{
  --text:#F5F3EE;--muted:rgba(245,243,238,.66);--dim:rgba(245,243,238,.56);--line:rgba(245,243,238,.09);--line-2:rgba(245,243,238,.15);--raised:rgba(245,243,238,.035);
  background:#0A0A0A;border-color:#0A0A0A;color:#F5F3EE;color-scheme:dark}
html[data-theme=light] body.noir .code-wrap pre{color:#F5F3EE}

/* ---------- sign-in screen ---------- */
html[data-theme=light] body.noir .login .panel{background:var(--pop)}
html[data-theme=light] body.noir.auth-screen .workspace::before{background-image:url(/account/assets/art/hands-light.png);opacity:.5}
