/* OwnOutright shared design system — used by every product on this origin. */
@font-face{font-family:"Bricolage Grotesque"; src:url("fonts/bricolage.woff2") format("woff2"); font-weight:600 750; font-display:swap}
@font-face{font-family:"Figtree"; src:url("fonts/figtree.woff2") format("woff2"); font-weight:400 700; font-display:swap}
@font-face{font-family:"JetBrains Mono"; src:url("fonts/jetbrains-mono.woff2") format("woff2"); font-weight:400 600; font-display:swap}

:root{
  color-scheme:light;
  /* OwnOutright brand palette (Logo Package v3): Primary Blue #1768FF, Deep Navy #001E7D, Soft Gray #F4F5F8, White */
  --ground:#F4F5F8; --surface:#FFFFFF; --sunk:#EEF1F7; --ink:#001E7D; --ink-2:#1A2F6E; --ink-3:#5A6A9A;
  --line:#E2E5F0; --line-2:#CDD3E6; --accent:#1768FF; --accent-hover:#0E52D9; --accent-ink:#FFFFFF; --accent-soft:#EAF0FF;
  --mark:#F59E0B; --mark-ink:#451A03; --slab:#001E7D; --slab-ink:#E6EDFF; --slab-head:#8DB4FF; --slab-dim:#9AA8D6;
  --warn-bg:#FFFBEB; --warn-ink:#92400E; --crit-bg:#FEF2F2; --crit-ink:#B91C1C; --ok-bg:#F0FDF4; --ok-ink:#15803D; --focus:#1768FF;
  --scrim:rgba(0,30,125,.45);
  --display:"Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --ui:"Figtree", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
  --r:10px; --r-sm:7px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --ground:#050C2E; --surface:#0B1640; --sunk:#111F52; --ink:#EAF0FF; --ink-2:#B8C4EA; --ink-3:#8593C2;
    --line:#1C2B66; --line-2:#2A3A7A; --accent:#5B93FF; --accent-hover:#7DA9FF; --accent-ink:#021047; --accent-soft:#132A6E;
    --mark:#FBBF24; --mark-ink:#291400; --slab:#020824; --slab-ink:#E6EDFF; --slab-head:#8DB4FF; --slab-dim:#7F8DBE;
    --warn-bg:#2F2208; --warn-ink:#FCD34D; --crit-bg:#3B1016; --crit-ink:#FCA5A5; --ok-bg:#0B2E1C; --ok-ink:#86EFAC; --focus:#8DB4FF; --scrim:rgba(0,0,0,.65);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --ground:#050C2E; --surface:#0B1640; --sunk:#111F52; --ink:#EAF0FF; --ink-2:#B8C4EA; --ink-3:#8593C2;
  --line:#1C2B66; --line-2:#2A3A7A; --accent:#5B93FF; --accent-hover:#7DA9FF; --accent-ink:#021047; --accent-soft:#132A6E;
  --mark:#FBBF24; --mark-ink:#291400; --slab:#020824; --slab-ink:#E6EDFF; --slab-head:#8DB4FF; --slab-dim:#7F8DBE;
  --warn-bg:#2F2208; --warn-ink:#FCD34D; --crit-bg:#3B1016; --crit-ink:#FCA5A5; --ok-bg:#0B2E1C; --ok-ink:#86EFAC; --focus:#8DB4FF; --scrim:rgba(0,0,0,.65);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{background:var(--ground); color:var(--ink); font:15px/1.5 var(--ui); margin:0}
img,svg,video{max-width:100%}
[hidden]{display:none!important}
.page{padding-inline:max(16px, env(safe-area-inset-left), min(2.4vw,32px)); max-width:1520px; margin:0 auto}
button,input,select,textarea{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--focus); outline-offset:2px}
h1,h2,h3,h4{text-wrap:balance; margin:0}
p{margin:0}
.skip{position:absolute; left:-999px; top:8px; background:var(--surface); padding:8px 12px; border-radius:var(--r-sm); z-index:60}
.skip:focus{left:16px}

/* Top bar */
.top{display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding-block:max(12px, env(safe-area-inset-top)) 12px; border-bottom:1px solid var(--line)}
.brand{display:flex; align-items:baseline; gap:10px; margin-right:auto}
.brand .maker{font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3)}
.brand .name{font-family:var(--display); font-weight:750; font-size:22px; letter-spacing:-.01em}
.works{font-size:13px; color:var(--ink-2); display:flex; gap:6px; align-items:center; flex-wrap:wrap}
.works b{font-weight:600; color:var(--ink)}
.banner{display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-top:12px; padding:9px 14px; border-radius:var(--r-sm); background:var(--accent-soft); font-size:14px}
.banner.warn{background:var(--warn-bg); color:var(--warn-ink)}

/* Shell */
.shell{display:grid; grid-template-columns:240px minmax(0,1fr) minmax(0,1.05fr); gap:28px; padding-block:18px 48px; align-items:start}
.shell:not([data-view="workflow"]) .out{display:none}
.shell:not([data-view="workflow"]) .work{grid-column:2 / -1; max-width:980px}

/* Rail */
.rail{display:flex; flex-direction:column; gap:18px; position:sticky; top:12px}
.profile-btn{display:flex; flex-direction:column; align-items:flex-start; gap:2px; text-align:left; width:100%; padding:12px 14px; border:1px solid var(--line-2); background:var(--surface); border-radius:var(--r); cursor:pointer}
.profile-btn:hover{border-color:var(--accent)}
.profile-btn .k{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); font-weight:700}
.profile-btn .v{font-weight:600}
.profile-btn .s{font-size:12px; color:var(--ink-3)}
.profile-btn[aria-current="page"]{border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent)}
.stage h3{font-family:var(--ui); font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); font-weight:700; margin-bottom:4px; display:flex; gap:8px; align-items:center}
.stage h3 span{font-family:var(--mono); font-weight:400; letter-spacing:0}
.stage ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.job,.navlink{display:flex; justify-content:space-between; align-items:center; gap:8px; width:100%; text-align:left; padding:7px 10px; margin-left:-10px; border:0; background:none; border-radius:var(--r-sm); cursor:pointer; font-weight:500; width:calc(100% + 10px)}
.job:hover,.navlink:hover{background:var(--sunk)}
.job[aria-current="page"],.navlink[aria-current="page"]{background:var(--accent-soft); color:var(--accent); font-weight:700}
.job.locked{color:var(--ink-3); cursor:default; font-weight:400}
.job.locked:hover{background:none}
.job .tag{font-size:10.5px; letter-spacing:.04em; color:var(--ink-3); white-space:nowrap}
.rail-data{display:flex; flex-direction:column; border-top:1px solid var(--line); padding-top:12px}
.navlink .meta{display:flex; gap:6px; align-items:center; font-size:12px; font-weight:600}
.count{font-family:var(--mono); font-size:12px; color:var(--ink-3)}
.due{background:var(--crit-bg); color:var(--crit-ink); border-radius:99px; padding:1px 7px; font-size:11px; font-weight:700}
.dot{width:8px; height:8px; border-radius:50%; background:var(--mark); box-shadow:0 0 0 2px var(--surface)}
.rail-foot{font-size:12px; color:var(--ink-3)}

/* Headings & generic */
.eyebrow{font-size:12px; letter-spacing:.09em; text-transform:uppercase; font-weight:700; color:var(--accent)}
.page-head{display:flex; flex-direction:column; gap:6px; margin-bottom:20px}
.page-head h1{font-family:var(--display); font-weight:750; font-size:clamp(28px,3.2vw,38px); line-height:1.05; letter-spacing:-.02em}
.page-head p{color:var(--ink-2); max-width:62ch}
.sample{display:flex; gap:10px; align-items:center; flex-wrap:wrap; font-size:13px; color:var(--warn-ink); background:var(--warn-bg); padding:7px 12px; border-radius:var(--r-sm); margin-top:6px; align-self:flex-start}
.linkbtn{border:0; background:none; padding:0; color:inherit; text-decoration:underline; text-underline-offset:2px; cursor:pointer; font-weight:600}
.linkbtn.danger{color:var(--crit-ink)}
.note{font-size:12.5px; color:var(--ink-3)}

.grid{display:grid; grid-template-columns:1fr 1fr; gap:14px 16px}
.field{display:flex; flex-direction:column; gap:5px; min-width:0}
.field.wide{grid-column:1/-1}
.field label{font-weight:600; font-size:13.5px}
.field label .opt{font-weight:400; color:var(--ink-3)}
.field .hint{font-size:12.5px; color:var(--ink-3)}
input[type=text],input[type=date],select,textarea{width:100%; min-width:0; background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-sm); padding:9px 11px; line-height:1.4}
textarea{resize:vertical; min-height:78px}
input[type=text]:hover,input[type=date]:hover,select:hover,textarea:hover{border-color:var(--ink-3)}
input[type=text]:focus,input[type=date]:focus,select:focus,textarea:focus{border-color:var(--accent); outline:2px solid var(--accent-soft); outline-offset:0}
.invalid{border-color:var(--crit-ink)!important}

fieldset{border:0; padding:0; margin:22px 0 0; min-width:0}
legend{font-weight:700; font-size:13.5px; margin-bottom:8px; padding:0}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{position:relative}
.chip input{position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; width:100%; height:100%}
.chip span{display:inline-flex; align-items:center; gap:7px; padding:7px 13px; border:1px solid var(--line-2); border-radius:99px; background:var(--surface); font-size:14px; font-weight:500; user-select:none; -webkit-user-select:none}
.chip input:checked + span{border-color:var(--accent); background:var(--accent-soft); color:var(--accent); font-weight:700}
.chip input:focus-visible + span{outline:2px solid var(--focus); outline-offset:2px}
.chip.box span::before{content:""; width:14px; height:14px; border:1.5px solid var(--ink-3); border-radius:4px; flex:none}
.chip.box input:checked + span::before{border-color:var(--accent); background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 7.2l2.6 2.6L11 4.4' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}

.build-row{display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-top:24px}
.actions{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:var(--r-sm); padding:9px 14px; font-weight:600; border:1px solid var(--line-2); background:var(--surface); cursor:pointer; text-decoration:none; color:var(--ink); font-size:14px; white-space:nowrap}
.btn:hover{border-color:var(--ink-3)}
.btn.primary{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.btn.primary:hover{background:var(--accent-hover); border-color:var(--accent-hover)}
.btn.big{padding:13px 22px; font-size:15.5px; font-weight:700; letter-spacing:.01em}
.btn.sm{padding:6px 11px; font-size:13px}
.err{color:var(--crit-ink); font-size:13.5px; font-weight:600}

/* Output column */
.out{position:sticky; top:12px; min-width:0; display:flex; flex-direction:column; gap:14px; max-height:calc(100vh - 24px); overflow:auto; padding-right:4px; overscroll-behavior:contain}
.out > *{flex-shrink:0}
.empty{border:1.5px dashed var(--line-2); border-radius:var(--r); padding:28px 22px; color:var(--ink-2)}
.empty h2{font-family:var(--display); font-size:21px; font-weight:750; color:var(--ink); margin-bottom:8px}
.empty ol{margin:0; padding-left:20px; display:flex; flex-direction:column; gap:4px}
.result-head h2{font-family:var(--display); font-weight:750; font-size:22px; letter-spacing:-.01em}
.result-head .meta{font-size:12.5px; color:var(--ink-3)}
.stale{font-size:13px; background:var(--warn-bg); color:var(--warn-ink); padding:7px 12px; border-radius:var(--r-sm); display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.send-to{display:flex; gap:6px 10px; flex-wrap:wrap; align-items:center; font-size:13px; color:var(--ink-3)}
.send-to a{color:var(--ink-2); font-weight:600; text-decoration:none; border-bottom:1px solid var(--line-2)}
.send-to a:hover{color:var(--accent); border-color:var(--accent)}

.slab{background:var(--slab); color:var(--slab-ink); border-radius:var(--r); padding:18px 18px 20px; font:13px/1.62 var(--mono); white-space:pre-wrap; overflow-wrap:anywhere; margin:0; max-height:46vh; overflow:auto}
.slab .h{color:var(--slab-head); font-weight:600; letter-spacing:.04em}

details.why{border-top:1px solid var(--line); padding-top:10px}
details.why summary{cursor:pointer; font-weight:600; font-size:14px}
.why dl{display:grid; grid-template-columns:max-content 1fr; gap:6px 14px; margin:12px 0 0; font-size:13.5px}
.why dt{font-family:var(--mono); font-size:12px; font-weight:600; color:var(--accent); padding-top:1px}
.why dd{margin:0; color:var(--ink-2)}

.panel{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:14px 16px; display:flex; flex-direction:column; gap:10px}
.panel h3{font-family:var(--display); font-size:17px; font-weight:750}
.panel > p{font-size:13.5px; color:var(--ink-2)}
.panel.lead{border-color:var(--accent); box-shadow:inset 3px 0 0 var(--accent)}
.panel .chips{gap:6px}
.panel .chip span{font-size:13px; padding:5px 11px}
.repair-out .slab{max-height:none; font-size:12.5px; padding:12px 14px}

.pieces{display:flex; flex-direction:column; gap:10px}
.pieces-head{display:flex; justify-content:space-between; align-items:baseline; gap:10px; flex-wrap:wrap}
.pieces-head h3{font-family:var(--display); font-size:19px; font-weight:750}
.piece{border:1px solid var(--line); background:var(--surface); border-radius:var(--r)}
.piece header{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:8px 10px 8px 14px; border-bottom:1px solid var(--line)}
.piece h4{font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); font-weight:700}
.piece-body{padding:12px 14px; white-space:pre-wrap; overflow-wrap:anywhere; font-size:14.5px}
.savebox{display:flex; flex-direction:column; gap:12px; background:var(--sunk); border-radius:var(--r); padding:14px 16px}
.savebox h4{font-family:var(--display); font-size:17px; font-weight:750}
.saved{display:flex; gap:10px; flex-wrap:wrap; align-items:baseline; background:var(--accent-soft); padding:12px 14px; border-radius:var(--r); font-size:14px}
.saved b{color:var(--accent)}

.suite{display:flex; gap:10px; align-items:baseline; flex-wrap:wrap; font-size:13.5px; color:var(--ink-2); border-top:1px solid var(--line); padding-top:12px}
.suite a,.suite .linkbtn{color:var(--accent); font-weight:700; text-decoration:none}
.suite a:hover{text-decoration:underline}

/* Customers */
.toolbar{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:6px}
.clist{list-style:none; margin:0; padding:0}
.crow{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.7fr) minmax(0,1.3fr) minmax(0,.8fr) auto; gap:8px 18px; align-items:center; padding:14px 0; border-top:1px solid var(--line)}
.crow:last-child{border-bottom:1px solid var(--line)}
.c-main h3{font-size:16px; font-weight:700}
.c-main p{font-size:13.5px; color:var(--ink-3)}
.k{display:block; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); font-weight:700}
.c-next{font-size:14px}
.pill{display:inline-block; font-size:12.5px; font-weight:600; padding:3px 10px; border-radius:99px; background:var(--sunk); color:var(--ink-2)}
.pill.example{background:var(--warn-bg); color:var(--warn-ink); margin-left:6px; font-size:11px; padding:1px 7px; vertical-align:2px}
.state{display:inline-flex; font-size:12.5px; font-weight:700; padding:3px 10px; border-radius:99px; background:var(--sunk); color:var(--ink-2); font-variant-numeric:tabular-nums; white-space:nowrap}
.st-overdue{background:var(--crit-bg); color:var(--crit-ink)}
.st-today{background:var(--warn-bg); color:var(--warn-ink)}
.st-done{background:var(--ok-bg); color:var(--ok-ink)}
.c-actions{display:flex; gap:6px; justify-content:flex-end; flex-wrap:wrap}
.c-log{grid-column:1/-1; font-size:13.5px}
.c-log summary{cursor:pointer; color:var(--ink-3); font-weight:600; width:max-content}
.c-log ol{list-style:none; margin:8px 0 10px; padding:0 0 0 14px; border-left:2px solid var(--line); display:flex; flex-direction:column; gap:8px}
.c-log li span{color:var(--ink-3); font-size:12.5px; display:block}
.seg{display:inline-flex; border:1px solid var(--line-2); border-radius:var(--r-sm); overflow:hidden; background:var(--surface)}
.seg label{position:relative}
.seg input{position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; width:100%; height:100%}
.seg span{display:block; padding:7px 14px; font-size:13.5px; font-weight:600; color:var(--ink-2)}
.seg input:checked + span{background:var(--accent-soft); color:var(--accent)}
.seg input:focus-visible + span{outline:2px solid var(--focus); outline-offset:-2px}
.empty-list{padding:28px 0; color:var(--ink-2); border-top:1px solid var(--line)}

/* Device page */
.dev-row{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px 28px; padding-block:20px; border-top:1px solid var(--line); align-items:start}
.dev-row h2{font-family:var(--display); font-size:20px; font-weight:750; margin-bottom:4px}
.dev-row p{color:var(--ink-2); max-width:60ch}
.dev-row p + p{margin-top:6px}
.dev-row .status{font-weight:600; color:var(--ink)}
.stack{display:flex; flex-direction:column; gap:8px; min-width:190px}
.prod-list{list-style:none; margin:10px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:8px}
.prod-list li{display:flex; justify-content:space-between; gap:8px; align-items:center; padding:9px 12px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface); font-weight:600; font-size:14px}
.prod-list li span{font-size:12px; font-weight:600; color:var(--ink-3)}
.prod-list li.on span{color:var(--accent)}

/* Sheet */
.sheet{position:fixed; inset:0; background:var(--scrim); display:grid; place-items:center; padding:16px; z-index:70}
.sheet-panel{background:var(--surface); color:var(--ink); border-radius:14px; padding:22px; width:min(460px,100%); max-height:calc(100vh - 32px); overflow:auto; display:flex; flex-direction:column; gap:14px; box-shadow:0 20px 60px rgba(0,0,0,.25)}
.sheet-panel h2{font-family:var(--display); font-size:22px; font-weight:750}
.sheet-panel p{color:var(--ink-2)}
.qrbox{display:grid; place-items:center}
.qrbox svg{width:min(300px,100%); height:auto; border-radius:8px}
.scan{position:relative; border-radius:var(--r); overflow:hidden; background:#000; aspect-ratio:1; max-width:100%}
.scan video{width:100%; height:100%; object-fit:cover; display:block}
.scan-frame{position:absolute; inset:16%; border:3px solid rgba(255,255,255,.85); border-radius:14px}
.kv{display:grid; grid-template-columns:max-content 1fr; gap:4px 12px; font-size:14px; margin:0}
.kv dt{color:var(--ink-3)}
.kv dd{margin:0; overflow-wrap:anywhere}

/* Mobile tab bar */
.tabs{display:none}
.toast{position:fixed; left:50%; bottom:24px; transform:translateX(-50%); background:var(--ink); color:var(--ground); padding:10px 16px; border-radius:var(--r-sm); font-weight:600; font-size:14px; width:max-content; max-width:calc(100% - 32px); z-index:80; box-shadow:0 6px 24px rgba(0,0,0,.18)}

@media (max-width:1180px){
  .shell{grid-template-columns:220px minmax(0,1fr)}
  .out{grid-column:2; position:static; max-height:none; overflow:visible; padding-right:0}
  .shell:not([data-view="workflow"]) .work{grid-column:2}
}
@media (max-width:1000px){
  .crow{grid-template-columns:minmax(0,1fr) auto}
  .c-stage,.c-next,.c-actions{grid-column:1/-1}
  .c-when{grid-row:1; grid-column:2}
  .c-actions{justify-content:flex-start}
}
@media (max-width:820px){
  body{font-size:16px}
  .works{display:none}
  .brand .name{font-size:20px}
  .shell{grid-template-columns:minmax(0,1fr); gap:22px; padding-block:12px calc(96px + env(safe-area-inset-bottom))}
  .out,.shell:not([data-view="workflow"]) .work{grid-column:auto}
  .rail{position:static}
  .shell[data-mview="jobs"] .work, .shell[data-mview="jobs"] .out{display:none}
  .shell:not([data-mview="jobs"]) .rail{display:none}
  .grid{grid-template-columns:1fr}
  input[type=text],input[type=date],select,textarea{font-size:16px; padding:11px 12px}
  .job,.navlink{padding:12px 10px; font-size:16px}
  .btn.big{width:100%}
  .slab{max-height:none}
  .dev-row{grid-template-columns:minmax(0,1fr)}
  .stack{min-width:0; flex-direction:row; flex-wrap:wrap}
  .sheet{place-items:end center; padding:0}
  .sheet-panel{border-radius:16px 16px 0 0; width:100%; padding-bottom:calc(22px + env(safe-area-inset-bottom))}
  .tabs{display:grid; grid-template-columns:repeat(5,1fr); position:fixed; left:0; right:0; bottom:0; background:var(--surface); border-top:1px solid var(--line); padding:6px 6px calc(6px + env(safe-area-inset-bottom)); z-index:40}
  .tabs button{border:0; background:none; padding:7px 2px; border-radius:var(--r-sm); font-weight:600; font-size:11.5px; color:var(--ink-3); display:flex; flex-direction:column; align-items:center; gap:3px; cursor:pointer; position:relative}
  .tabs button svg{width:22px; height:22px}
  .tabs button[aria-current="page"]{color:var(--accent); background:var(--accent-soft)}
  .tabs .dot{position:absolute; top:6px; left:calc(50% + 8px)}
  .toast{bottom:calc(84px + env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion: no-preference){
  .btn,.job,.navlink,.chip span,input,select,textarea{transition:background-color .15s, border-color .15s, color .15s}
}

/* Activation (license key) */
.activate{max-width:560px; margin:40px auto 64px; display:flex; flex-direction:column; gap:16px}
.activate textarea{font-family:var(--mono); font-size:13px; min-height:92px}
.activate-alt{border-top:1px solid var(--line); padding-top:16px; display:flex; flex-direction:column; gap:8px; color:var(--ink-2); font-size:14px}
.activate-alt a{color:var(--accent); font-weight:600}
.activate-alt b{color:var(--ink)}