/* Canon prototype. Fictional data only. Every word on screen is the word Codex ships. */
:root{
  --paper:#F4F1EA; --card:#FFFDF8; --ink:#1B1A17; --muted:#6B665C; --line:#DDD6C8;
  --stamp:#E8553D; --stamp-ink:#fff; --sage:#2F5D50; --sage-soft:#E3EBE5; --hi:rgba(232,85,61,.18);
  --display:'Bricolage Grotesque',system-ui,sans-serif; --body:'Instrument Sans',system-ui,sans-serif; --mono:'IBM Plex Mono',ui-monospace,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#151412; --card:#1F1D1A; --ink:#F2EEE6; --muted:#A39E93; --line:#34312C; --sage:#8DBBA9; --sage-soft:#22302B; --hi:rgba(232,85,61,.28);}}
:root[data-theme="dark"]{--paper:#151412; --card:#1F1D1A; --ink:#F2EEE6; --muted:#A39E93; --line:#34312C; --sage:#8DBBA9; --sage-soft:#22302B; --hi:rgba(232,85,61,.28);}
*{box-sizing:border-box} html,body{margin:0}
body{background:var(--paper);color:var(--ink);font:16px/1.45 var(--body);-webkit-font-smoothing:antialiased}
.app{max-width:420px;margin:0 auto;min-height:100vh;padding:20px 16px 96px;position:relative}
h1,h2,h3{font-family:var(--display);letter-spacing:-.02em;margin:0}
h1{font-size:34px;line-height:1.05;font-weight:800} h2{font-size:22px;font-weight:700} h3{font-size:17px;font-weight:700}
p{margin:0} .muted{color:var(--muted)} .small{font-size:13px}
button{font:inherit;color:inherit;cursor:pointer} :focus-visible{outline:3px solid var(--stamp);outline-offset:2px;border-radius:8px}
.top{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px}
.mark{font-family:var(--display);font-weight:800;font-size:24px}.mark i{color:var(--stamp);font-style:normal}
.back{background:none;border:0;padding:8px 0;font-weight:600}
.screen{display:none;animation:in .25s ease} .screen.on{display:block}
@keyframes in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* One box */
.box{background:var(--card);border:1.5px solid var(--ink);border-radius:20px;padding:14px;margin:20px 0 10px;box-shadow:4px 4px 0 var(--ink)}
.box textarea{width:100%;border:0;background:none;resize:none;font:18px/1.35 var(--body);color:var(--ink);min-height:56px}
.box textarea:focus{outline:none}
.ways{display:flex;gap:8px;margin-top:8px}
.way{flex:1;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:10px 4px;font-size:13px;font-weight:600;display:flex;flex-direction:column;align-items:center;gap:2px}
.way b{font-size:18px}
.go{width:100%;margin-top:10px;background:var(--ink);color:var(--paper);border:0;border-radius:12px;padding:14px;font-weight:600}
.try{background:none;border:0;padding:6px 0;color:var(--sage);font-weight:600;font-size:14px;text-align:left}
section{margin-top:28px} .label{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.doing{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px;display:flex;gap:12px;align-items:center;width:100%;text-align:left;margin-bottom:8px}
.ring{width:40px;height:40px;flex:none;border-radius:50%;background:conic-gradient(var(--stamp) calc(var(--p)*1%),var(--line) 0);display:grid;place-items:center}
.ring::after{content:"";width:30px;height:30px;border-radius:50%;background:var(--card)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:8px 12px;font-size:14px;font-weight:500}
.chip.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
/* Reading: the machine's perception, shown */
.doc{background:#FBFAF6;color:#222;border-radius:6px;padding:18px 16px;font:12px/1.5 var(--mono);position:relative;box-shadow:0 10px 30px rgba(0,0,0,.12);transform:rotate(-1deg);margin:8px 4px 20px}
.doc .row{display:flex;justify-content:space-between;position:relative;padding:2px 4px;border-radius:4px;transition:background .3s,box-shadow .3s}
.doc .row.seen{background:var(--hi);box-shadow:inset 0 0 0 1.5px var(--stamp)}
.doc .row.flash{background:rgba(232,85,61,.4)}
.doc hr{border:0;border-top:1px dashed #bbb;margin:8px 0}
.found{list-style:none;padding:0;margin:0}
.found li{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);opacity:0;transform:translateY(4px);transition:.3s}
.found li.on{opacity:1;transform:none} .found li span:first-child{color:var(--stamp);font-weight:700}
/* Skill */
.meta{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 14px}
.tag{font-size:12px;font-weight:600;padding:4px 8px;border-radius:6px;background:var(--sage-soft);color:var(--sage)}
.tag.warn{background:transparent;border:1px dashed var(--muted);color:var(--muted)}
.bar{height:6px;background:var(--line);border-radius:3px;overflow:hidden;margin:14px 0 18px}.bar i{display:block;height:100%;background:var(--stamp);width:0;transition:width .35s}
.facts{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:12px 14px;margin-bottom:16px}
.facts div{display:flex;justify-content:space-between;padding:4px 0;font-size:15px}.facts b{font-weight:600}
.step{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px;margin-bottom:10px;transition:.25s}
.step.done{opacity:.62}.step.done .t{text-decoration:line-through}
.step .head{display:flex;gap:12px;align-items:flex-start}
.tick{flex:none;width:30px;height:30px;border-radius:50%;border:2px solid var(--ink);background:none;display:grid;place-items:center;font-weight:800;color:transparent}
.step.done .tick{background:var(--stamp);border-color:var(--stamp);color:var(--stamp-ink);animation:stamp .3s}
@keyframes stamp{0%{transform:scale(1.4) rotate(-12deg)}100%{transform:none}}
.t{font-weight:600} .step .why{font-size:14px;color:var(--muted);margin-top:4px}
.acts{display:flex;gap:6px;margin:10px 0 0 42px;flex-wrap:wrap}
.act{background:none;border:1px solid var(--line);border-radius:999px;padding:6px 10px;font-size:13px;font-weight:600}
.reveal{margin:10px 0 0 42px;font-size:14px;background:var(--paper);border-radius:10px;padding:10px 12px;display:none}
.reveal.on{display:block}.reveal code{font-family:var(--mono);background:var(--hi);padding:1px 4px;border-radius:3px}
/* Done */
.sorted{font-family:var(--display);font-weight:800;font-size:64px;color:var(--stamp);transform:rotate(-6deg);border:5px solid var(--stamp);border-radius:14px;display:inline-block;padding:0 18px;margin:30px 0 20px;animation:stamp .4s}
.list{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.list button{display:flex;justify-content:space-between;width:100%;padding:14px;border:0;border-bottom:1px solid var(--line);background:none;text-align:left}
.list button:last-child{border-bottom:0}
.lv{font-size:12px;color:var(--muted)}
.secondary{width:100%;background:none;border:1.5px solid var(--ink);border-radius:12px;padding:13px;font-weight:600;margin-top:8px}
/* Make */
.draft .step{border-style:dashed}
input.field{width:100%;font:16px var(--body);padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink)}
.edit{font-weight:600;margin:3px 0 0;flex:1}.edit:focus{outline:none;border-bottom:1.5px solid var(--stamp)}
/* Things, sheets, depth, life */
.need{display:inline-block;color:var(--ink);background:none;border:0;border-bottom:1.5px dotted var(--stamp);padding:0;font-weight:600}
.needs{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 14px}.needs .need{border:1px solid var(--line);border-radius:999px;padding:6px 10px;background:var(--card)}
.sheet{position:fixed;left:0;right:0;bottom:0;max-width:420px;margin:0 auto;background:var(--card);border-radius:20px 20px 0 0;border:1px solid var(--line);padding:18px 16px 28px;transform:translateY(110%);transition:transform .25s;z-index:5;box-shadow:0 -10px 30px rgba(0,0,0,.15)}
.sheet.on{transform:none}.sheet .pic{height:96px;border-radius:12px;background:var(--paper);display:grid;place-items:center;font-size:44px;margin:12px 0}
.seg{display:flex;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:3px;margin:4px 0 14px}
.seg button{flex:1;border:0;background:none;padding:8px 4px;border-radius:9px;font-size:13px;font-weight:600;color:var(--muted)}.seg button.on{background:var(--ink);color:var(--paper)}
.jit{display:none;margin:10px 0 0 42px;border:1px solid var(--line);border-radius:12px;overflow:hidden;font-size:13px}
.jit.on{display:block}.jit .cap{padding:6px 10px;background:var(--paper);color:var(--muted);display:flex;justify-content:space-between}
.jit .fig{height:90px;display:grid;place-items:center;font:12px var(--mono);color:var(--muted);background:repeating-linear-gradient(45deg,transparent 0 8px,var(--line) 8px 9px)}
.step.overview{background:var(--sage-soft);border-color:transparent}.step.overview .t{color:var(--sage)}
body.d-overview #billy .step:not(.overview){display:none}
body.d-steps #billy .why,body.d-steps #billy .jit{display:none!important}
.happened{width:100%;display:flex;justify-content:space-between;align-items:center;background:var(--stamp);color:var(--stamp-ink);border:0;border-radius:16px;padding:14px 16px;font-weight:700;margin-top:18px}
.rec{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px;margin-top:10px}
.rec .k{display:flex;justify-content:space-between;font-size:14px;padding:3px 0}.rec .k span{color:var(--muted)}
.kind{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--stamp)}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-top:6px}
.cal div{aspect-ratio:1;border-radius:8px;background:var(--card);border:1px solid var(--line);font-size:11px;padding:3px;position:relative}
.cal div i{position:absolute;left:4px;right:4px;bottom:4px;height:5px;border-radius:3px}
.cal .pay i{background:var(--sage)}.cal .out i{background:var(--stamp)}.cal .tight{background:var(--hi)}
.clash{margin-top:10px;font-size:14px;border-left:3px solid var(--stamp);padding:6px 10px;background:var(--card);border-radius:0 10px 10px 0}
.q{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin-bottom:8px}
.q .n{font-size:12px;color:var(--muted);font-weight:600}.q p{margin-top:3px;font-size:15px}
.legend{display:flex;gap:14px;font-size:12px;color:var(--muted);margin-top:6px}.legend b{display:inline-block;width:10px;height:5px;border-radius:2px;margin-right:4px;vertical-align:middle}
/* Nav */
nav.tabs{position:fixed;bottom:0;left:0;right:0;background:var(--paper);border-top:1px solid var(--line);display:flex;justify-content:center;gap:0;padding:8px 0 calc(8px + env(safe-area-inset-bottom))}
nav.tabs button{background:none;border:0;padding:6px 26px;font-size:13px;font-weight:600;color:var(--muted)}
nav.tabs button.on{color:var(--ink)}
.toast{position:fixed;left:50%;bottom:80px;transform:translateX(-50%);background:var(--ink);color:var(--paper);padding:10px 14px;border-radius:10px;font-size:14px;display:none}
.toast.on{display:flex;gap:14px}.toast button{background:none;border:0;color:var(--stamp);font-weight:700}
.note{font-size:12px;color:var(--muted);text-align:center;margin-top:30px}

.sr{position:absolute;left:-9999px}
.center{text-align:center}.center .go{max-width:420px}
.big{font-size:18px}
.way{cursor:pointer}
.photo{position:relative;margin:10px 0 18px;border-radius:10px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.12);background:#fff}
.photo img{display:block;width:100%}
.hl{position:absolute;border:2px solid var(--stamp);background:var(--hi);border-radius:4px;opacity:0;transition:opacity .3s}
.hl.on{opacity:1}.hl.flash{background:rgba(232,85,61,.45)}
.found li.miss span:first-child{color:var(--muted)}
.facts button{background:none;border:0;padding:0;font:inherit;text-align:right;font-weight:600;color:var(--ink);border-bottom:1.5px dotted var(--stamp)}
.facts .how{font-size:11px;color:var(--muted);font-weight:500;display:block}
.crop{display:block;width:100%;border-radius:8px;margin-top:4px}
.jit a{color:var(--sage);font-weight:600}
.step .mk{margin:10px 0 0 42px}
.note-left{margin-top:14px}
.link-danger{background:none;border:0;color:var(--stamp);font-weight:600;padding:8px 0}
#skillList,#kept{margin-top:4px}
.chips{margin:14px 0}
.drop{position:fixed;inset:12px;border:3px dashed var(--stamp);border-radius:20px;background:rgba(244,241,234,.92);display:none;place-items:center;font:700 28px var(--display);z-index:9}
.drop.on{display:grid}
.err{color:var(--stamp);font-size:14px;margin-top:8px}
body.d-overview #steps .step:not(.overview){display:none}
body.d-steps #steps .why,body.d-steps #steps .jit,body.d-steps #steps .acts{display:none!important}
.pad{padding:12px 14px;margin:0}

.make-actions{display:flex;gap:8px;align-items:stretch;margin-top:10px}.make-actions .go{flex:2;margin:0}.make-actions .pdf{flex:1}
.make-step .num{flex:none;width:26px;height:26px;border-radius:50%;background:var(--paper);display:grid;place-items:center;font-weight:700;font-size:13px}
.make-step .grow{flex:1}.edit{outline:none;border-bottom:1.5px dashed transparent}.edit:focus{border-bottom-color:var(--stamp)}
.quote{font:12px/1.4 var(--mono);color:var(--muted);margin-top:6px;border-left:3px solid var(--hi);padding-left:8px}
.dropped{margin:10px 0;font-size:14px}.dropped summary{cursor:pointer;color:var(--muted)}
.rec.made h2{margin:4px 0 6px}
#openMake{margin-top:16px}