/* Leyline 2.0 mockups v1.4 · Ahensya Design System v1.4.0 (tokens.css imported verbatim) */
@import url("assets/fonts/fonts.css");
@import url("assets/tokens.css");
:root{--ink:#272A2E;--mid:#51555B;--line:#74787D;--accent-b:#33465B;--support:#6D7E8F;--wash:#D6DDE5}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--ground);color:var(--ink-graphite);font:400 14px/1.55 var(--font-ui);-webkit-font-smoothing:antialiased}
.frame{width:1440px;height:900px;overflow:hidden;position:relative;background:var(--ground)}
.frame.m390{width:390px;height:844px}
/* type: DS scale. Mono label 10px is the smallest text on screen (accessibility.md: 8.5px is print-only) */
.mono{font:400 10px/1.4 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--graphite-mid)}
.mono.ink{color:var(--ink-graphite)}
.t1{font:500 28px/1.1 var(--font-display);letter-spacing:-.01em}
.t1 em{font-style:italic;font-weight:400}
.h2{font:600 17px/1.3 var(--font-ui);letter-spacing:-.005em}
.h3{font:600 15px/1.35 var(--font-ui)}
.body{font:400 15px/1.6 var(--font-ui)}
.small{font:400 12.5px/1.6 var(--font-ui);color:var(--graphite-mid)}
.small.ink{color:var(--ink-graphite)}
.cap{font:400 11px/1.45 var(--font-ui);letter-spacing:.01em;color:var(--graphite-mid)}
.num{font:400 13px var(--font-mono)}
a,.lk{color:var(--accent-blue);text-decoration:none}
/* header */
.top{height:60px;display:flex;align-items:center;padding:0 64px;border-bottom:.75px solid var(--grid);gap:32px;background:var(--ground)}
.brand{display:flex;align-items:baseline;gap:10px}
.brand b{font:500 24px/1 var(--font-display);letter-spacing:-.01em}
.brand span{font:400 10px/1 var(--font-mono);letter-spacing:.16em;color:var(--graphite-mid)}
.nav{display:flex;gap:4px}
.nav a{font:500 13.5px/1 var(--font-ui);color:var(--graphite-mid);padding:22px 12px 21px}
.nav a.on{color:var(--ink-graphite);box-shadow:inset 0 -1.5px 0 var(--accent-blue)}
.sp{flex:1}
.kbd{display:flex;align-items:center;gap:10px;width:300px;height:34px;border:.75px solid var(--grid);background:var(--panel);padding:0 12px;color:var(--graphite-mid);font-size:13px}
.kbd i{margin-left:auto;font:400 10px var(--font-mono);border:.75px solid var(--grid);padding:2px 5px;font-style:normal}
.nav2{display:flex;gap:20px;align-items:center}.nav2 a{font:400 13px var(--font-ui);color:var(--graphite-mid)}
.nav2 a.me{color:var(--ink-graphite)}
.caret{display:inline-block;width:6px;height:6px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);margin-left:7px}
/* buttons: DS apps.py .btn (DM Mono 11px, .14em, uppercase, square). p = Accent Blue fill, o = 1px Accent Blue outline, l = text link */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:36px;padding:0 18px;font:400 11px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;border:0;background:var(--accent-blue);color:var(--hi)}
.btn.o{background:transparent;color:var(--accent-blue);box-shadow:inset 0 0 0 1px var(--accent-blue)}
.btn.l{background:transparent;color:var(--accent-blue);padding:0 4px}
.btn.s{height:30px;padding:0 12px}
.btn.off{background:transparent;color:var(--graphite-mid);box-shadow:inset 0 0 0 .75px var(--grid)}
.cost{font:400 10px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--graphite-mid);border:.75px solid var(--grid);padding:5px 6px;white-space:nowrap}
.chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 9px;border:.75px solid var(--grid);background:var(--panel);font:400 10px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--graphite-mid);white-space:nowrap}
.chip.on{background:var(--blue-wash);border-color:var(--support-blue);color:var(--ink-graphite)}
.chip.t{text-transform:none;letter-spacing:0;font:500 12px var(--font-ui);height:28px}
.chip.q{text-transform:none;letter-spacing:0;font:400 12.5px var(--font-ui);color:var(--ink-graphite);height:auto;padding:7px 10px}
.tag{font:400 10px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--graphite-mid);border:.75px solid var(--grid);padding:4px 6px;white-space:nowrap}
.panel{background:var(--panel);border:.75px solid var(--grid)}
.sheet{background:var(--hi);border:.75px solid var(--grid)}
.inp{height:40px;border:.75px solid var(--graphite-line);background:var(--hi);display:flex;align-items:center;padding:0 12px;font-size:14px;color:var(--graphite-mid)}
.lab{font-size:12.5px;font-weight:600;margin:14px 0 6px}
/* notice: Sheet ground + 1.5px key rule in Accent Blue (no wash; wash is the selected fill) */
.note{font-size:13px;color:var(--ink-graphite);background:var(--hi);border:.75px solid var(--grid);box-shadow:inset 1.5px 0 0 var(--accent-blue);padding:12px 16px}
.ex{position:absolute;right:16px;bottom:12px;font:400 10px var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--graphite-mid);border:.75px solid var(--grid);padding:4px 7px;background:var(--panel);z-index:9}
.m390 .ex{top:18px;left:96px;right:auto;bottom:auto}
.frame:not(.m390) .tray{padding-right:150px}
footer{padding-right:150px!important}
.ill{--ill-core:var(--ill-deco-core);--ill-detail:var(--ill-deco-detail);--ill-rough:var(--ill-deco-rough);--ill-wall:var(--ill-deco-wall);--ill-poche:var(--ill-deco-poche);--ill-plant:var(--ill-deco-plant);--ill-accent:var(--ill-deco-accent)}
.ill svg,.ghost svg{width:100%;height:100%;display:block}
.figcap{font:400 10px/1.4 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--graphite-mid);margin-top:8px}
.ld{display:flex;align-items:center;justify-content:center}.ld svg{width:100%;height:100%;display:block}
.still svg *{animation:none!important}
.i48{display:inline-block;width:48px;height:48px;flex:none;--ill-core:#51555B;--ill-detail:#B4B6B9;--ill-accent:#8496A9;--ill-plant:#4E7D70}
.i48 svg{width:48px;height:48px}
.bar{height:6px;display:flex;gap:2px}
.bar i{flex:1;background:var(--accent-blue)}
.bar i.no,.hatch{background:repeating-linear-gradient(135deg,var(--grid) 0 1px,transparent 1px 4px);box-shadow:inset 0 0 0 .75px var(--grid)}
.hatch{display:inline-block;width:44px;height:6px}
.box{width:15px;height:15px;border:.75px solid var(--graphite-line);display:inline-block;flex:none;background:var(--hi)}
.box.on{background:var(--accent-blue);box-shadow:inset 0 0 0 3px var(--hi)}
.box.na{border-color:var(--grid);background:var(--panel)}
table{border-collapse:collapse;width:100%}
th{font:400 10px/1.3 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--graphite-mid);text-align:left;padding:9px 12px;border-bottom:.75px solid var(--graphite-line);font-weight:400}
td{padding:11px 12px;border-bottom:.75px solid var(--grid);vertical-align:top;font-size:13px}
.step{display:inline-flex;align-items:center;gap:7px;font:400 10px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--graphite-mid)}
.step i{width:8px;height:8px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--graphite-line);display:inline-block}
.step.done{color:var(--ink-graphite)}.step.done i{background:var(--ink-graphite);box-shadow:none}
.step.now{color:var(--ink-graphite)}.step.now i{box-shadow:inset 0 0 0 1px var(--accent-blue);background:linear-gradient(90deg,var(--accent-blue) 50%,transparent 50%)}
.tray{position:absolute;left:0;right:0;bottom:0;background:var(--panel);border-top:.75px solid var(--graphite-line);display:flex;align-items:center;gap:10px;padding:12px 64px}
.pick{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 6px 0 10px;border:.75px solid var(--grid);background:var(--hi);font:500 12.5px var(--font-ui)}
.pick b{font:400 13px var(--font-mono);color:var(--graphite-mid);width:18px;text-align:center;font-weight:400}
.slot{display:inline-flex;height:30px;width:120px;border:.75px dashed var(--grid)}
.diff{box-shadow:inset 1.5px 0 0 var(--support-blue);background:var(--hi)}
.nk{color:var(--graphite-mid);font-style:italic}
.scrim{position:absolute;inset:0;background:rgba(39,42,46,.32)}
.dlg{position:absolute;background:var(--hi);border:.75px solid var(--graphite-line);padding:24px 26px}
.grid-bg{background-image:linear-gradient(var(--grid) .5px,transparent .5px),linear-gradient(90deg,var(--grid) .5px,transparent .5px);background-size:40px 40px;background-color:var(--panel)}
pre.code{font:400 12px/1.65 var(--font-mono);background:var(--panel);border:.75px solid var(--grid);padding:12px 14px;white-space:pre;color:var(--ink-graphite)}

/* danger (J4): --ds-error #9A3D37 from the Ahensya DS app kit (_css/ahensya-ds-app.css, app layer; not yet a DS v1.4.0 token). Text and fills only, always with a text label. */
:root{--ds-error:#9A3D37}
.btn.dg{background:var(--ds-error);color:var(--hi)}
.btn.dl{background:transparent;color:var(--ds-error);padding:0 4px}
.dlg.dgr{box-shadow:inset 0 3px 0 var(--ds-error)}