to get the draw) */
.field.ok input.in,.field.ok textarea.in{border-bottom-color:var(--green-pen)}
.field .in::placeholder,.field .in input::placeholder{color:var(--grey-3)}
.field .in input,.field .in select{flex:1;min-width:0;font:inherit;color:inherit;background:none;border:0;outline:0;padding:0;border-radius:0}
.in input.w4{max-width:4ch}.in input.w6{max-width:6ch}.in input.w8{max-width:8ch}.in input.w12{max-width:12ch} /* a short figure before its unit */
.field .in .unit,.field .in .pre{flex:none;font:500 var(--t-marg)/1 var(--block);letter-spacing:var(--track-marg);text-transform:uppercase;color:var(--grey-2)}
.field .in .gl{color:var(--grey-2)}
.field .hint,.field .msg{font:400 var(--t-caption)/var(--lh-cap) var(--sans);color:var(--grey-2)}
.field .hint b,.field .msg b{color:var(--grey);font-weight:500}
.field .msg{display:none}
/* states: the checker's redline (error) · a checked value (ok, blue pencil tick) · read-only · disabled */
.field.err .in{border-bottom-color:var(--red-pen)}.field.err .in::after{background:var(--red-pen)}
.field.err .msg{display:block;color:var(--red-pen);font:600 var(--t-marg)/var(--lh-cap) var(--block);letter-spacing:.06em;text-transform:uppercase}
.field.err .msg::before{content:"check · "}
.field.ok .in::after{transform:scaleX(1);background:var(--green-pen);opacity:.8} /* the back-check: verified */
.field.ok .msg{display:block;color:var(--green-pen);font:600 var(--t-marg)/var(--lh-cap) var(--block);letter-spacing:.06em;text-transform:uppercase}
.field.ro .in{border-bottom-style:dashed;border-bottom-color:var(--rule)}.field.ro .in::after{display:none}
.field.dis,.field .in:disabled,.field .in[aria-disabled="true"]{color:var(--grey-3)}
.field.dis .in{border-bottom-style:dashed;color:var(--grey-3);cursor:not-allowed}.field.dis .in::after{display:none}.field.dis>label{color:var(--grey-2)}
/* the written field: a textarea on ruled paper — every line a hairline at the text pitch */
textarea.in,.field textarea.in{display:block;resize:vertical;min-height:calc(4*var(--lh-text) + 7*var(--u));line-height:var(--lh-text);padding:0 0 calc(7*var(--u));
background-image:repeating-linear-gradient(to bottom,transparent 0 calc(var(--lh-text) - 1px),var(--rule) calc(var(--lh-text) - 1px) var(--lh-text));background-attachment:local;font-family:var(--sans)}
.field.note textarea.in{font:italic 500 var(--t-text)/var(--lh-text) var(--slab)} /* a written note in the margin's hand */
/* sizes / layout */
.field.sm .in{font-size:var(--t-small);padding:calc(4*var(--u)) 0 calc(5*var(--u))}
.field.inline{grid-template-columns:auto 1fr;align-items:baseline;gap:var(--s-5)}
.form-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(calc(220*var(--u)),1fr));gap:var(--s-9) var(--s-11)}
.form-grid .span-2{grid-column:span 2}.form-grid .span-3{grid-column:span 3}.form-grid .span-all{grid-column:1 / -1}
.fs{border:0;padding:0;margin-left:0;margin-right:0;margin-bottom:0;min-width:0}
.fs-h{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-8);padding-bottom:var(--s-3);margin-bottom:var(--s-8);border-bottom:1px solid var(--hair)}
.fs-h h3,.fs-h legend{font:400 var(--t-head)/var(--lh-text) var(--sans);color:var(--ink);padding:0;float:left}
.fs-h .marg-t{white-space:normal;text-align:right}
/* ── 6 · select & menu — a line with a drawn chevron; the list arrives like footer links ─────── */
.select{position:relative}
.select .in{cursor:pointer;user-select:none;padding-right:calc(18*var(--u))}
.select .in .val{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.select .in .val.ph{color:var(--grey-3)}
.select .in .chev{position:absolute;right:0;top:50%;transform:translateY(-50%);color:var(--grey-2);transition:transform var(--t-fold) var(--ease-out),color var(--t-hover)}
.select.open .in .chev{transform:translateY(-50%) rotate(180deg);color:var(--ink)}
.select.open .in::after{transform:scaleX(1)}
.select .in select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:calc(18*var(--u))}
.select .in select:invalid,.select .in select.ph{color:var(--grey-3)}
.menu{position:absolute;left:0;right:0;top:100%;margin-top:1px;z-index:6;text-align:left;font-weight:400;background:var(--paper);outline:1px solid var(--hair);padding:var(--s-2) 0;
max-height:calc(8*var(--s-10) + 2*var(--s-2));overflow:auto;display:none}
.menu.up{top:auto;bottom:100%;margin:0 0 1px}
.select>.menu{top:100%;margin-top:0} /* fallback when the menu is the field's child: it hangs under the whole field (hint included) — put it inside .in instead */
.select.open .menu,.menu.open{display:block}
.menu .opt{position:relative;display:flex;align-items:center;gap:var(--s-3);height:var(--s-10);padding:0 var(--s-6) 0 var(--s-8);font:400 var(--t-text)/1 var(--sans);color:var(--grey);cursor:pointer;white-space:nowrap;transition:color var(--t-hover);
opacity:0;filter:blur(3px);transform:translateY(calc(3*var(--u)));animation:linkIn var(--t-letter) ease-out both}
.menu .opt:nth-child(1){animation-delay:0s}.menu .opt:nth-child(2){animation-delay:.04s}.menu .opt:nth-child(3){animation-delay:.08s}.menu .opt:nth-child(4){animation-delay:.12s}.menu .opt:nth-child(5){animation-delay:.16s}.menu .opt:nth-child(6){animation-delay:.2s}.menu .opt:nth-child(7){animation-delay:.24s}.menu .opt:nth-child(n+8){animation-delay:.28s}
.menu .opt::before{content:"–";position:absolute;left:var(--s-3);opacity:0;transition:opacity var(--t-hover)}
.menu .opt:hover,.menu .opt.hi,.menu .opt:focus-visible{color:var(--ink);outline:0}
.menu .opt:hover::before,.menu .opt.hi::before,.menu .opt:focus-visible::before{opacity:1}
.menu .opt.on{color:var(--ink);font-weight:500}
.menu .opt.on .gl{margin-left:auto;color:var(--ink)} /* the chosen one carries a drawn tick */
.menu .opt .marg-t{margin-left:auto}
.menu .opt.dis{color:var(--grey-3);cursor:not-allowed}
.menu .opt-h{padding:var(--s-3) var(--s-8) var(--s-1);font:500 var(--t-marg)/1 var(--block);letter-spacing:var(--track-marg);text-transform:uppercase;color:var(--grey-2)}
.menu .rule{height:1px;margin:var(--s-2) var(--s-8);background:var(--rule)}
.menu .none{padding:var(--s-3) var(--s-8);font:italic 500 var(--t-small)/var(--lh-tight) var(--slab);color:var(--grey-2)} /* "Nothing filed under that." */
/* combobox: the value is typed; the list filters */
.select.combo .in input{cursor:text}
/* a menu hung from anything else (a row action, the topbar): position it yourself; .menu.open shows it */
.menu.free{left:auto;right:0;min-width:calc(180*var(--u))}
/* ── 7 · choices — drawn marks: the check draws on, the dot soaks in, the switch throws ──────── */
.check,.radio,.switch{position:relative;display:inline-flex;align-items:center;gap:var(--s-4);font:400 var(--t-text)/var(--lh-tight) var(--sans);color:var(--grey);cursor:pointer;user-select:none}
.check input,.radio input,.switch input{position:absolute;opacity:0;width:0;height:0;margin:0}
.check:hover,.radio:hover,.switch:hover{color:var(--ink)}
.check .box,.radio .box{flex:none;width:calc(14*var(--u));height:calc(14*var(--u));border:1px solid var(--hair);position:relative;transition:border-color var(--t-hover);background:none}
.check:hover .box,.radio:hover .box,.check input:focus-visible+.box,.radio input:focus-visible+.box{border-color:var(--ink)}
.check .box svg{position:absolute;inset:-2px;width:calc(100% + 4px);height:calc(100% + 4px);overflow:visible;fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.check .box path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .3s var(--ease-draw)}
.check input:checked+.box{border-color:var(--ink)}
.check input:checked+.box path{stroke-dashoffset:0} /* the tick is drawn, not stamped */
.check input:indeterminate+.box::after{content:"";position:absolute;left:3px;right:3px;top:50%;height:1px;background:var(--ink)}
.check input:checked~.t,.radio input:checked~.t{color:var(--ink)}
.radio .box{border-radius:50%}
.radio .box::after{content:"";position:absolute;left:50%;top:50%;width:calc(6*var(--u));height:calc(6*var(--u));border-radius:50%;background:var(--ink);transform:translate(-50%,-50%) scale(0);transition:transform .2s var(--ease-out)}
.radio input:checked+.box{border-color:var(--ink)}
.radio input:checked+.box::after{transform:translate(-50%,-50%) scale(1)} /* the dot soaks in */
.switch .track{flex:none;position:relative;width:calc(30*var(--u));height:calc(16*var(--u));border:1px solid var(--hair);transition:border-color var(--t-hover)}
.switch .track::after{content:"";position:absolute;left:calc(2*var(--u));top:calc(2*var(--u));width:calc(10*var(--u));height:calc(10*var(--u));border:1px solid var(--grey-2);background:none;transition:transform var(--t-fold) var(--ease-out),background var(--t-hover),border-color var(--t-hover)}
.switch:hover .track,.switch input:focus-visible+.track{border-color:var(--ink)}
.switch input:checked+.track{border-color:var(--ink)}
.switch input:checked+.track::after{transform:translateX(calc(14*var(--u)));background:var(--ink);border-color:var(--ink)} /* thrown: the knob fills with ink */
.check input:disabled~*,.radio input:disabled~*,.switch input:disabled~*{color:var(--grey-3);cursor:not-allowed}
.check input:disabled+.box,.radio input:disabled+.box,.switch input:disabled+.track{border-style:dashed}
.check.sm,.radio.sm{gap:var(--s-3);font-size:var(--t-small)}
.choices{display:grid;gap:var(--s-4)}
.choices.row{display:flex;flex-wrap:wrap;gap:var(--s-4) var(--s-9)}
.choices .lab{font:600 var(--t-label)/1 var(--block);letter-spacing:var(--track-marg);text-transform:uppercase;color:var(--grey);margin-bottom:var(--s-1)}
/* ── 8 · actions — the ONE action is .act (red pen). Everything else is written or outlined. ─── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-3);padding:calc(7*var(--u)) calc(14*var(--u));min-height:calc(30*var(--u));
font:600 var(--t-button)/1 var(--block);letter-spacing:var(--track-button);text-transform:uppercase;color:var(--ink);background:none;border:1px solid var(--hair);cursor:pointer;white-space:nowrap;
transition:border-color var(--t-hover),color var(--t-hover);text-decoration:none}
.btn:hover,.btn:focus-visible{border-color:var(--ink);outline:0}
.btn:active{border-color:var(--ink);color:var(--grey)}
.btn.quiet{border-color:transparent;color:var(--grey)}.btn.quiet:hover,.btn.quiet:focus-visible{color:var(--ink);border-color:var(--hair)}
.btn.sm{min-height:calc(24*var(--u));padding:calc(4*var(--u)) var(--s-4);font-size:calc(9.5*var(--u))}
.btn:disabled,.btn.dis{color:var(--grey-3);border-style:dashed;cursor:not-allowed}
.btn .gl{width:calc(12*var(--u));height:calc(12*var(--u))}
.act.lg{font-size:calc(12*var(--u))}
.act:disabled{color:var(--grey-3);cursor:not-allowed;text-decoration:none}
.actions{display:flex;align-items:center;gap:var(--s-9);flex-wrap:wrap}
.actions .sp{flex:1}
.actions.end{justify-content:flex-end}
.actions .lnk.caps,.lnk.caps{font:600 var(--t-button)/1 var(--block);letter-spacing:var(--track-button);text-transform:uppercase}
/* ── 9 · tabs & segments ─────────────────────────────────────────────────────────────────────── */
.tabs{display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-9);border-bottom:1px solid var(--hair);position:relative} /* no overflow clip: the underline sits ON the rule */
.tabs a,.tabs button{position:relative;flex:none;padding:0 0 var(--s-3);font:400 var(--t-text)/var(--lh-tight) var(--sans);color:var(--grey);cursor:pointer;background:none;border:0;transition:color var(--t-hover);white-space:nowrap}
.tabs a::after,.tabs button::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:0 50%;transition:transform var(--t-underline) var(--ease-out)}
.tabs a:hover,.tabs button:hover,.tabs a:focus-visible,.tabs button:focus-visible{color:var(--ink);outline:0}
.tabs .on{color:var(--ink);font-weight:500}
.tabs .on::after{transform:scaleX(1)}
.tabs .n{margin-left:var(--s-2);font:500 var(--t-marg)/1 var(--block);letter-spacing:.06em;color:var(--grey-2);font-variant-numeric:tabular-nums}
.tabs .n.pen-red{color:var(--red-pen)}.tabs .n.pen-green{color:var(--green-pen)}
/* segments: label-over-value cells you can press; the chosen one is an alabaster chip (a chip, not a ground) */
.seg{display:inline-flex}
.seg a,.seg button{position:relative;padding:calc(6*var(--u)) var(--s-5);margin-left:-1px;font:600 var(--t-label)/1 var(--block);letter-spacing:var(--track-marg);text-transform:uppercase;color:var(--grey);border:1px solid var(--hair);background:none;cursor:pointer;transition:color var(--t-hover),border-color var(--t-hover),background var(--t-hover);white-space:nowrap}
.seg a:first-child,.seg button:first-child{margin-left:0}
.seg a:hover,.seg button:hover,.seg a:focus-visible,.seg button:focus-visible{color:var(--ink);border-color:var(--ink);z-index:1;outline:0}
.seg .on{color:var(--ink);background:var(--alab);border-color:var(--hair);z-index:0}
.seg.sm a,.seg.sm button{padding:calc(4*var(--u)) var(--s-4);font-size:var(--t-marg)}
/* ── 10 · stamps — the small caps chips a plan set carries: FILED · DRAFT · REV · SIGNED ──────── */
.stamp{display:inline-flex;align-items:center;gap:var(--s-2);padding:calc(3*var(--u)) calc(6*var(--u)) calc(2*var(--u));border:1px solid var(--hair);
font:600 var(--t-marg)/1 var(--block);letter-spacing:var(--track-marg);text-transform:uppercase;color:var(--grey);white-space:nowrap;vertical-align:middle}
.stamp.ink{color:var(--ink);border-color:var(--ink)}
.stamp.alab{background:var(--alab);border-color:transparent;color:var(--ink)}
.stamp.pen-red{color:var(--red-pen);border-color:var(--red-pen)} /* the checker's stamp — counts against the 1 % */
.stamp.pen-blue{color:var(--blue-pencil);border-color:var(--blue-pencil)}
.stamp.pen-green{color:var(--green-pen);border-color:var(--green-pen)} /* the back-check: CHECKED · CLOSED · VERIFIED */
.stamp.tilt{transform:rotate(-4deg)}
.stamp.dot::before{content:"";width:calc(5*var(--u));height:calc(5*var(--u));border-radius:50%;background:currentColor;flex:none}
.stamp .gl{width:calc(10*var(--u));height:calc(10*var(--u))}
.stamps{display:inline-flex;gap:var(--s-2);flex-wrap:wrap;vertical-align:middle}
/* ── 11 · notices — a note in the margin, with a hairline. Red = the checker. Blue = drafting. ─── */
.notice{position:relative;padding:var(--s-1) 0 var(--s-1) var(--s-6);border-left:1px solid var(--hair);font:400 var(--t-small)/var(--lh-text) var(--sans);color:var(--grey);max-width:60ch}
.notice b{color:var(--ink);font-weight:500}
.notice .lab{display:block;margin-bottom:var(--s-1);font:600 var(--t-marg)/1 var(--block);letter-spacing:var(--track-marg);text-transform:uppercase;color:var(--grey-2)}
.notice.red{border-left-color:var(--red-pen)}.notice.red .lab{color:var(--red-pen)}
.notice.blue{border-left-color:var(--blue-pencil)}.notice.blue .lab{color:var(--blue-pencil)}
.notice.green{border-left-color:var(--green-pen)}.notice.green .lab{color:var(--green-pen)}
.notice.ink{border-left-color:var(--ink)}
.notice .lnk{margin-left:var(--s-4)}
.notice .x{position:absolute;right:0;top:var(--s-1);color:var(--grey-2);cursor:pointer;font:400 var(--t-text)/1 var(--sans);transition:color var(--t-hover);background:none;border:0}
.notice .x:hover{color:var(--ink)}
.notice.has-x{padding-right:var(--s-8)}
.notice.bleed-in{animation:fadeUp var(--t-word) var(--ease-out) both}
/* ── 12 · pager, kpis, meter, empty ─────────────────────────────────────────────────────────── */
.pager{display:flex;align-items:center;gap:var(--s-6);font:500 var(--t-marg)/1 var(--block);letter-spacing:var(--track-marg);text-transform:uppercase;color:var(--grey-2);white-space:nowrap}
.pager b{color:var(--grey);font-weight:600}
.pager .pp{display:inline-flex;gap:var(--s-4)}
.pager .pp a{position:relative;color:var(--grey-2);font-variant-numeric:tabular-nums;cursor:pointer;transition:color var(--t-hover);padding:0 var(--s-1)}
.pager .pp a::after{content:"";position:absolute;left:0;right:0;bottom:calc(-3*var(--u));height:1px;background:currentColor;transform:scaleX(0);transform-origin:0 50%;transition:transform var(--t-underline)}
.pager .pp a:hover,.pager .pp a.on{color:var(--ink)}
.pager .pp a.on::after,.pager .pp a:hover::after{transform:scaleX(1)}
.pager .lnk.caps{font-size:var(--t-marg);letter-spacing:var(--track-marg)}
.pager .sp{flex:1}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(calc(160*var(--u)),1fr));border-left:1px dashed var(--rule)}
.kpi{padding:var(--s-1) var(--s-8) var(--s-4);border-right:1px dashed var(--rule);min-width:0}
.kpi .lab{font:500 var(--t-marg)/1 var(--block);letter-spacing:var(--track-marg);text-transform:uppercase;color:var(--grey-2);white-space:nowrap}
.kpi .v{margin-top:var(--s-3);font:800 var(--t-h2)/1.08 var(--slab);letter-spacing:var(--track-display);color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.kpi .v.pen-red{color:var(--red-pen)}.kpi .v.pen-blue{color:var(--blue-pencil)}.kpi .v.pen-green{color:var(--green-pen)}
.kpi .v small{font:500 var(--t-label)/1 var(--block);letter-spacing:var(--track-marg);text-transform:uppercase;color:var(--grey-2);margin-left:var(--s-2)}
.kpi .d{margin-top:var(--s-2);font:400 var(--t-caption)/var(--lh-cap) var(--sans);color:var(--grey)}
.kpi .d b{color:var(--ink);font-weight:500}
.kpi .d .pen-red,.kpi .d .pen-blue,.kpi .d .pen-green{font-weight:500}
.meter{position:relative;height:1px;background:var(--hair);width:100%}
.meter i{position:absolute;left:0;top:-1px;height:2px;width:100%;background:var(--ink);transform:scaleX(var(--p,0));transform-origin:0 50%;transition:transform var(--t-dim) ease-out} /* the dimension string extends */
.meter.pen-blue i{background:var(--blue-pencil)}.meter.pen-red i{background:var(--red-pen)}.meter.pen-green i{background:var(--green-pen)}
.meter-row{display:flex;align-items:center;gap:var(--s-5)}
.meter-row .meter{flex:1}
.meter-row .n{font:500 var(--t-marg)/1 var(--block);letter-spacing:.06em;color:var(--grey);font-variant-numeric:tabular-nums;min-width:calc(30*var(--u));text-align:right}
.empty{padding:var(--s-12) 0;text-align:center}
.empty .note{font-size:var(--t-head);color:var(--grey)}
.empty .text-s{margin-top:var(--s-3)}
.empty .lnk{margin-top:var(--s-5)}
/* ── 13 · the schedule, made interactive: sortable heads, selected rows, row actions ─────────── */
.schedule th.sort{cursor:pointer;user-select:none;transition:color var(--t-hover);white-space:nowrap}
.schedule th.sort:hover{color:var(--ink)}
.schedule th.sort::after{content:"";display:inline-block;width:0;margin-left:var(--s-2);opacity:0;transition:opacity var(--t-hover)}
.schedule th.sort.asc,.schedule th.sort.desc{color:var(--ink)}
.schedule th.sort.asc::after{content:"↑";width:auto;opacity:1}
.schedule th.sort.desc::after{content:"↓";width:auto;opacity:1}
.schedule th.n,.schedule td.n{text-align:right}
.schedule th.sel,.schedule td.sel{width:calc(24*var(--u));padding-right:var(--s-2)}
.schedule tbody tr{transition:background var(--t-hover),color var(--t-hover)}
.schedule tbody tr:hover td{color:var(--ink)}
.schedule tbody tr.sel td{color:var(--ink)} /* the chosen row is DRAWN, not tinted (Rev E, §15.15): a hair tick on the margin, like the rail's current sheet */
.schedule tbody tr.sel td:first-child{padding-left:var(--s-2);position:relative}
.schedule tbody tr.sel td:first-child::before{content:"";position:absolute;left:calc(-8*var(--u));top:calc(7*var(--u));bottom:calc(7*var(--u));width:1px;background:var(--ink)}
.schedule tbody tr.sel td b,.schedule tbody tr.sel td .lnk{font-weight:500}
.schedule.sel-chip tbody tr.sel td{background:var(--alab)} /* the former chip (Rev B) — kept for comparison */
.schedule.sel-chip tbody tr.sel td:first-child::before{display:none}
.schedule.sel-hatch tbody tr.sel td{background:repeating-linear-gradient(135deg,var(--rule) 0 1px,transparent 1px calc(7*var(--u)))} /* poché — a drafting hatch */
.schedule.sel-hatch tbody tr.sel td:first-child::before{display:none}
.schedule td .lnk{font-size:inherit;line-height:inherit;color:inherit}
.schedule td .stamp{vertical-align:baseline}
.schedule .row-act{white-space:nowrap;text-align:right}
.schedule .row-act>*{opacity:0;transition:opacity var(--t-hover)}
.schedule tbody tr:hover .row-act>*,.schedule tbody tr:focus-within .row-act>*,.schedule tr.sel .row-act>*{opacity:1}
.schedule.dense{font-size:var(--t-caption)}.schedule.dense td{padding:calc(4*var(--u)) var(--s-4) calc(4*var(--u)) 0}
.schedule th .check,.schedule td .check{vertical-align:middle;gap:0}
.schedule-wrap{overflow-x:auto;padding-left:calc(8*var(--u));margin-left:calc(-8*var(--u))} /* room for the chosen row's margin tick inside the scroll box */
.schedule tfoot td{border-bottom:0;border-top:1px solid var(--hair);padding-top:var(--s-3);color:var(--grey-2);font:500 var(--t-marg)/1 var(--block);letter-spacing:var(--track-marg);text-transform:uppercase}
.schedule tfoot td b{color:var(--grey);font-weight:600}
.schedule tfoot .n{font-family:var(--sans);font-size:var(--t-small);letter-spacing:0;text-transform:none;color:var(--ink);font-weight:500}
/* ── 13b · Rev E · the running head (in trial, §15.14) ───────────────────────────────────────────
The head spans the sheet: the lockup sits OVER the rail column (.head-l tracks --rail-w and folds with it), the crumbs over the work,
the machine's word at the right, and in the empty middle a low ink FRIEZE — a distant horizon in the panorama hand, cut, its ends
fading into the head. The rail starts under the head, so the head's rule crosses the rail's rule: head above, rail beside — two
things, not one tinted L. Head tint = --head-bg (paper-3 by default; the template's ?head=2|3|0 sets it). ?flathead = Rev D layout. */
.sheet{flex:1;min-width:0;display:flex;flex-direction:column;position:relative}
.body{flex:1;min-height:0;display:flex;position:relative}
.app.plated .rail-h{display:none}
.app.plated .topbar{padding-left:0}
.app.plated.bound .topbar{background:var(--head-bg,var(--frame-2))}
.app:not(.plated) .head-l{display:none}
.head-l{flex:none;width:var(--rail-w);height:100%;display:flex;align-items:center;padding-left:var(--s-6);white-space:nowrap;position:relative;
transition:width var(--t-fold) var(--ease-out)}
.head-l .lockup{gap:var(--s-5)}
.head-l .t{display:inline-block;transition:opacity .2s var(--ease-out),filter .2s var(--ease-out),transform .2s var(--ease-out)}
.app.folded .head-l{width:var(--rail-c)}
.app.folded .head-l .t{opacity:0;filter:blur(3px);transform:translateX(calc(-3*var(--u)));pointer-events:none;transition-duration:.14s}
.app.plated .topbar .crumbs{padding-left:var(--s-8)}
.frieze{flex:1;align-self:stretch;min-width:0;margin:0 var(--s-6) 0 var(--s-9);pointer-events:none;
background:var(--frieze,url(assets/friezes/ink-frieze-X-strip.png)) right bottom/auto calc(var(--frieze-z,1)*100%) no-repeat;opacity:var(--frieze-a,.85); /* --frieze-z (Rev L round 6, ?fz=): >1 = bottom-anchored, top cropped */
-webkit-mask-image:linear-gradient(90deg,transparent,#000 calc(80*var(--u)),#000 calc(100% - 40*var(--u)),transparent);
mask-image:linear-gradient(90deg,transparent,#000 calc(80*var(--u)),#000 calc(100% - 40*var(--u)),transparent)}
.app.plated .topbar .sp{display:none}
/* the desk's voice (in trial, §15.16): the machine's REPLY is set in the machine's own hand — Besley italic, the "Calculating." voice —
so the desk visibly speaks; the WORKING log stays Public Sans (a record). ?voice=sans restores. */
.app.voiced :is(.desk,.plate-dark) .reply{font:italic 500 calc(14*var(--u))/calc(21*var(--u)) var(--slab);color:var(--alab);letter-spacing:.002em}
.app.voiced :is(.desk,.plate-dark) .reply b{font-weight:500;color:var(--paper)}
/* ── 13c · Rev H trial (§15.24) · the neutral display hand: on the platform, Besley's slab reads period; the wordmark keeps it, the rest goes to Public Sans ── */
.app.neutral .work-h h1{font:600 calc(30*var(--u))/1.1 var(--sans);letter-spacing:-.012em}
.app.neutral .kpi .v{font:600 calc(24*var(--u))/1.08 var(--sans);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.app.neutral .kpi .v small{font-family:var(--block)}
.app.neutral .status .w{font-family:var(--sans)}
.app.neutral :is(.desk,.plate-dark) .reply{font:400 var(--t-text)/calc(20*var(--u)) var(--sans);letter-spacing:0}
.app.neutral .cell.sheet .v{font-family:var(--sans);font-weight:600}
.app.neutral .stamp.tilt{transform:none}
/* ── 13d · Rev H trial (§15.25) · THE MACHINE TYPES: on the platform the machine has its own hand — a monospace, typed — wherever it speaks or counts;
people write (Besley italic) and read (Public Sans). .app.typed: the word in the head and on the desk, the WORKING log, the reply, the KPI values,
the schedule's numerals and the rail's counts. Never the human's fields, never labels (Barlow files), never the wordmark. ────────────────────── */
.app.typed .status .w{font:400 var(--t-small)/1 var(--mono);letter-spacing:-.01em}
.app.typed .log{font:400 var(--t-reply)/calc(19*var(--u)) var(--mono);letter-spacing:-.01em}
.app.typed .log li b{font-weight:500}
.app.typed :is(.desk,.plate-dark) .reply{font:400 var(--t-reply)/calc(19*var(--u)) var(--mono);letter-spacing:-.01em;color:var(--alab)}
.app.typed .kpi .v{font:500 calc(24*var(--u))/1.08 var(--mono);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.app.typed .kpi .v small{font-family:var(--block)}
.app.typed .schedule td.n,.app.typed .schedule tfoot .n{font-family:var(--mono);font-size:var(--t-small);letter-spacing:-.01em}
.app.typed .rail-a .n{font-family:var(--mono);letter-spacing:0;font-size:calc(10*var(--u))}
.app.typed .kpis .d,.app.typed .kpi .d{font-variant-numeric:tabular-nums}
.app.typed .stamp.tilt{transform:none}
.app.typed .work-h h1{font:600 calc(30*var(--u))/1.1 var(--sans);letter-spacing:-.012em} /* with a typed machine, the human's display goes plain too (as .neutral) */
.app.typed .cell.sheet .v{font-family:var(--mono);font-weight:500}
/* the head plots itself (typed only): the plate is the machine's own drawing — a plotter sweep with its head, after the rail's glyphs have drawn (1.1s) so the two motions are sequential, not a second hero */
.app.typed .frieze{position:relative;clip-path:inset(0 100% 0 0);animation:plot var(--t-draw-long) linear both;animation-delay:1.1s}
.app.typed .frieze::after{content:"";position:absolute;top:0;bottom:0;left:0;width:1px;background:var(--ink);opacity:0;animation:head var(--t-draw-long) linear both;animation-delay:1.1s}
@media (prefers-reduced-motion:reduce){.app.typed .frieze,.app.typed .frieze::after{animation-duration:1ms;animation-delay:0s}}
/* Rev I trial (§15.28): when the machine PLOTS the plate (plot.js, ?plot), the frieze holds a canvas and the wipe stands down */
.frieze.plotting,.app.typed .frieze.plotting{clip-path:none;animation:none;position:relative;opacity:1}
.app.typed .frieze.plotting::after{display:none}
.frieze.plotting canvas.plotcv{position:absolute;inset:0;width:100%;height:100%;opacity:var(--frieze-a,.85)}
/* ── 13e · Rev I trial (§15.26) · ONE ACCENT — the machine's light. On the platform the three pens (red checker · blue pencil · green back-check)
collapse into ONE high-chroma blue: `.app.one` re-points the pen tokens at --accent, so every mark that was a pen — the eyebrow, the one action,
the checker's counts and stamps, the notices' labels, the field lines, the KPI values, the SVG redlines — is now the accent, and nothing else changes.
Status semantics (change it · how drawn · checked) then live in the WORDS and the marks (× · ✓ · the stamp text), not in three hues.
`.app.lit` lets the accent onto the desk in its lit value (the desk was pen-free because the old pens failed on it — the lit accent is 6.46:1):
the machine's word when it lights, the burst, the current line of its work, the ASK, the thrown switch. The head's word lights in the accent too. */
.app.one{--red-pen:var(--accent);--blue-pencil:var(--accent);--green-pen:var(--accent);--red:var(--accent);--blue:var(--accent);--green:var(--accent);
--color-action:var(--accent);--color-guide:var(--accent);--color-verified:var(--accent)}
.app.one .field:focus-within .in::after,.app.one .field .in:focus::after,.app.one .field.focus .in::after{background:var(--accent-hi,var(--accent))} /* focus draws in the accent: the machine is listening */
/* Rev J (§15.36): --accent-hi — the accent's STROKE value on paper (≥3:1, non-text): the sky was AA-bound as 10u caps and never popped, so its large marks and lines take a brighter value while text keeps --accent (AA). Unset = --accent. */
.app.one :is(.kpi .v.pen-red,.kpi .v.pen-blue,.kpi .v.pen-green){color:var(--accent-hi,var(--accent))}
.app.one :is(.notice.red,.notice.blue,.notice.green){border-left-color:var(--accent-hi,var(--accent))}
.app.one :is(.meter.pen-blue,.meter.pen-red,.meter.pen-green) i{background:var(--accent-hi,var(--accent))}
.app.one :is(.stamp.pen-red,.stamp.pen-blue,.stamp.pen-green){border-color:var(--accent-hi,var(--accent))}
.app.one .pen:not(.t){stroke:var(--accent-hi,var(--accent))}
/* Rev J (§15.36, trial): .app.loud — the accent as the CURRENT idiom too: the rail's tick and the tab's underline, the chosen row's tick, a 2u notice rule, in the stroke value. Off by default (?loud). Counts against the ≤3 % — measure before adopting. */
.app.loud .rail-a.on::before,.app.loud .tabs .on::after,.app.loud .schedule tbody tr.sel td:first-child::before{background:var(--accent-hi,var(--accent))}
.app.loud .rail-a.on::before,.app.loud .schedule tbody tr.sel td:first-child::before{width:2px}
.app.loud :is(.notice.red,.notice.blue,.notice.green){border-left-width:2px}
.app.one .field input.in:focus,.app.one .field textarea.in:focus{border-bottom-color:var(--accent)}
.app.lit .topbar .status .w .lit,.app.lit .status .w .lit{color:var(--accent)}
.app.lit :is(.desk,.plate-dark) .status .w .lit,.app.lit :is(.desk,.plate-dark) .w .lit{color:var(--accent-lit)}
.app.lit :is(.desk,.plate-dark) .log li.now{color:var(--accent-lit)}
.app.lit :is(.desk,.plate-dark) .ask button,.app.lit :is(.desk,.plate-dark) .ask .act{color:var(--accent-lit)}
.app.lit :is(.desk,.plate-dark) .switch input:checked+.track{border-color:var(--accent-lit)}.app.lit :is(.desk,.plate-dark) .switch input:checked+.track::after{background:var(--accent-lit);border-color:var(--accent-lit)}
.app.lit :is(.desk,.plate-dark) .field:focus-within .in::after{background:var(--accent-lit)}
.app.lit :is(.desk,.plate-dark) .lnk.on{color:var(--accent-lit)}
/* ── 14 · responsive: the leaf collapses; the rail becomes a folded strip; the desk folds ─────── */
@media (max-width:1100px){.work{padding-left:var(--s-11);padding-right:var(--s-11)}}
@media (max-width:900px){
.app:not(.static){--rail-w:56px} /* the rail is folded below 900 — add .folded too so AED.tips reads the labels */
.app:not(.static) .rail .t,.app:not(.static) .rail .n{opacity:0;filter:blur(3px);pointer-events:none}
.app:not(.static) .rail-a,.app:not(.static) .fold{padding:0 0 0 calc(20*var(--u))}
.app:not(.static) .rail-gh{color:transparent}.app:not(.static) .rail-gh::before{opacity:1;right:var(--s-8)}
.app:not(.static) .fold .gl{transform:rotate(180deg)}
.app:not(.static) .rail-f .who{padding:0 0 0 var(--s-6)}
.app:not(.static) .desk{position:absolute;right:0;top:0;bottom:0;box-shadow:none}
.app:not(.static) .work{padding:var(--s-8) var(--s-8) var(--s-12)}
.app:not(.static) .form-grid{grid-template-columns:1fr}
.app:not(.static) .form-grid .span-2,.app:not(.static) .form-grid .span-3{grid-column:auto}
.app:not(.static) .kpis{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){.app:not(.static) .desk{width:100%}.app:not(.static) .desk>*{width:100%}.app:not(.static).desk-folded .desk{width:0}}
/* ── 15 · still (proof shots: html.still / ?still) and reduced motion: everything lands instantly ── */
html.still *,html.still *::before,html.still *::after{transition-duration:0s!important;animation-duration:1ms!important;animation-delay:0s!important}
html.still .w .lit{animation:none;opacity:0}
html.still .gl.dr path{stroke-dashoffset:0}
/* ── 15 · reduced motion: the folds and draws land instantly ─────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
.rail,.desk,.rail .t,.desk .t,.fold .gl,.select .chev,.switch .track::after,.check .box path,.radio .box::after,.meter i,.field .in::after,.tabs a::after,.tabs button::after,.rail-a .t::after{transition-duration:1ms!important}
.menu .opt,.log li.go .ch,.notice.bleed-in{animation-duration:1ms!important;animation-delay:0s!important}
}
/* ═══════════════════════════════════════════════════════════════════════════════════════════
AEDONYX · PAPER & INK — mylar.css Issue 9 · Rev K (in trial)
THE MYLAR LAYER — the plan set redrawn on drafting film: soft geometry + the film itself.
Rev J moved the palette (§15.29 film) but nothing else: every corner was still 90°, so the set
read as the same rigid drawing in a cooler ink. This layer answers the user's direction —
"make it modern with soft edges and curves for better functionality … keep the plan aesthetic,
no AI slop" — with two moves and nothing else:
1 · RADIUS — four tokens (--r-1 … --r-pill), modest, applied to the things a hand touches
(buttons, fields, chips, tiles, menus — and, in Rev K, the desk's edge; Rev L squared it). The furniture that MAKES it a
plan set is untouched: the dashed grid, the rules, the marginalia, the
friezes, the pens, the three hands.
2 · THE FILM — the sheet stops being flat grey and becomes MYLAR: a soft raking sheen across
the paper and a barely-there grain, and panels that sit on it as FROSTED PLATES (the paper
mixed toward white, a hairline, a radius) — film over film. No blur, no shadow, no glow,
no new hue: only the paper, white, and the tokens.
GATED. Everything is under `.mylar` — the platform template puts it on AND on #app
(?rigid removes it), the plan set on . With the class absent this file changes nothing.
Load order: … → aedonyx.css → platform.css → mylar.css → forge.css (styles.css does it).
Vocabulary added: --r-1 --r-2 --r-3 --r-pill · --film-plate --film-plate-2 --film-sheen
--film-grain --film-tick · Rev L: .mylar.eased (§2), the mylar frame (§1)
═══════════════════════════════════════════════════════════════════════════════════════════ */
/* ── 0 · the tokens ──────────────────────────────────────────────────────────────────────────
Declared on .mylar itself so BOTH carriers ( and .app) hold them, and repeated wherever
--u may be re-set (a .frame, a .leaf, a card at 0.62px) so every radius recomputes with the unit. */
.mylar,.mylar .frame,.mylar .leaf,.mylar [data-u]{
--r-1:calc(4*var(--u)); /* chips, small stamps, the checkbox, the initials cell */
--r-2:calc(8*var(--u)); /* buttons, fields, notices, menus, tips */
--r-3:calc(12*var(--u)); /* tiles, KPI cells, panels, plates (the desk's edge was r-3 in Rev K — square since Rev L, §2) */
--r-pill:999px; /* segmented controls, stamps, ticks, meters, the switch */
/* the film's own materials — paper toward white, never a new hue (§ law 1) */
--film-plate:color-mix(in srgb,var(--paper) 55%,white); /* a frosted plate ON the film — the KPI tile, the rail's current sheet */
--film-plate-2:color-mix(in srgb,var(--paper) 78%,white); /* a whisper — a notice, an empty field */
--film-tick:rgba(var(--ink-rgb),.035); /* the chosen row's plate: the film pressed, not a chip */
/* the sheen: a raking light across a sheet of mylar. One low-alpha white pass, no colour. */
--film-sheen:linear-gradient(112deg,rgba(255,255,255,.55) 0%,transparent 38%,transparent 68%,rgba(255,255,255,.32) 100%);
/* the grain: fractal noise, desaturated, ~4 % — the tooth of the film. Behind everything; the ink hairlines stay crisp. */
--film-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='.042'/%3E%3C/svg%3E");
}
/* ── 1 · THE FILM — the sheet reads as drafting film, not flat grey ──────────────────────────
The platform: the shell carries it, so the sheen is fixed to the SHEET and does not scroll with
the work (a sheet under a lamp does not move). The rail and head keep their own tints on top.
The plan set: every .frame is a sheet of film. */
.mylar .app{background-image:var(--film-grain);background-size:calc(160*var(--u)) calc(160*var(--u));background-repeat:repeat}
.mylar .main{background-image:var(--film-sheen);background-size:cover;background-repeat:no-repeat} /* the raking light belongs to the SHEET being worked; the rail is a second sheet and keeps its own tint */
.mylar .frame{background-image:var(--film-grain),var(--film-sheen);background-size:calc(160*var(--u)) calc(160*var(--u)),cover;background-repeat:repeat,no-repeat}
/* the bound margin is a second sheet of the same film — the grain carries across, the sheen does not (it is one lamp) */
.mylar .app.bound .rail,.mylar .app.bound .topbar{background-image:var(--film-grain);background-size:calc(160*var(--u)) calc(160*var(--u))}
/* Rev L: THE MYLAR FRAME — the rail is the film a half step down (--paper-3, ≈ΔL 1 in OKLCH), the head IS the film. The user on the
Rev H/L tints (paper-2, then paper-2 + 5 % obsidian): "what colour grey is that — too dark, ridiculous". Nothing on the sheet is darker
than the sheet needs to be; the rail's edge is the dashed rule, its current item a lifted sheet (§11). The template's ?frame= still overrides. */
.mylar .app.bound{--frame:var(--paper-3);--frame-2:var(--paper)}
/* Rev L round 6 — THE HEAD'S WASH (the user: "can the header actually be a different colour for the cool mylar palette? … don't make it too
dark but maybe some sort of gradient would work here … and no gold"). The running head is the film under a raking light: one soft wash of
the film's own deeper step (the paper pulled a few % toward the ink in OKLCH — same hue 247, no new colour, no gold) fading to the paper,
layered under the grain. --head-wash is set by the template (?head=wash|wash-x|wash-b|sheen|cool, ?headk=
its depth); none = flat. */
.mylar .app.plated.bound .topbar{background-color:var(--head-bg,var(--frame-2));background-image:var(--film-grain),var(--head-wash,none);
background-size:calc(160*var(--u)) calc(160*var(--u)),100% 100%;background-repeat:repeat,no-repeat}
/* ── 2 · the shell's edge — the desk is SQUARE ───────────────────────────────────────────────
Rev K eased the desk's two left corners (r-3); Rev L squares them again — the user: the curved
corners "look incorrect". The desk is a slab the paper butts against, not a plate lying on it: its
edge is cut, not moulded, like the topbar's rule and the rail's rule. The desk's soft edges live
INSIDE it (§15: the reply's plate, the door's trough, the buttons). `.mylar.eased` restores the
curve for comparison (?eased). */
.mylar .desk{border-radius:0}
.mylar.eased .desk{border-radius:var(--r-3) 0 0 var(--r-3)}
@media (max-width:600px){.mylar .app:not(.static) .desk{border-radius:0}} /* full width: nothing to ease against */
/* ── 3 · actions — .btn keeps its hairline outline and gains a radius + a hair more hit area ── */
.mylar .btn{border-radius:var(--r-2);min-height:calc(32*var(--u));padding:calc(8*var(--u)) calc(16*var(--u))}
.mylar .btn.sm{border-radius:calc(6*var(--u));min-height:calc(26*var(--u));padding:calc(5*var(--u)) calc(11*var(--u))}
/* the ONE action stays written — never a box, never a fill. It only grows its target and rounds its focus ring. */
.mylar .act{padding:calc(6*var(--u)) 0;border-radius:var(--r-1)}
.mylar .lnk,.mylar .lnk.caps{border-radius:var(--r-1)} /* for the focus ring only — no box is drawn */
.mylar .fold{border-radius:var(--r-2)}
.mylar .notice .x{border-radius:var(--r-1)}
/* ── 4 · segments — a pill of label-over-value cells; the chosen one a soft inner pill ─────────────
Was: abutting rectangles sharing a 1px border (margin-left:-1px). Now: ONE hairline pill holds
them and the chosen cell is an alabaster chip inside it — the same chip, eased. */
.mylar .seg{border:1px solid var(--hair);border-radius:var(--r-pill);padding:calc(2*var(--u));gap:calc(2*var(--u))}
.mylar .seg a,.mylar .seg button{border:0;margin-left:0;border-radius:var(--r-pill);padding:calc(7*var(--u)) calc(15*var(--u))}
.mylar .seg a:hover,.mylar .seg button:hover,.mylar .seg a:focus-visible,.mylar .seg button:focus-visible{border-color:transparent}
.mylar .seg .on{border-color:transparent;background:var(--alab)}
.mylar .seg.sm{padding:calc(2*var(--u))}
.mylar .seg.sm a,.mylar .seg.sm button{padding:calc(5*var(--u)) calc(11*var(--u))}
/* ── 5 · tabs — the underline stays, with rounded ends ───────────────────────────────────────
CHOSEN over a pill: (a) the drawn underline is the system's own motion (--t-underline, "the
underline draws"), (b) in the work a .tabs row sits directly above a .seg row — two pill rows
stacked would read as one control repeated. Tabs switch a VIEW (a stroke); segments choose a
MODE (a chip). The rule underneath is never clipped — no overflow is introduced here. */
.mylar .tabs a,.mylar .tabs button{padding:0 0 calc(10*var(--u))}
.mylar .tabs a::after,.mylar .tabs button::after{height:calc(2*var(--u));bottom:calc(-1*var(--u));border-radius:var(--r-pill)}
/* ── 6 · stamps — the plan set's chips go pill ───────────────────────────────────────────────── */
.mylar .stamp{border-radius:var(--r-pill);padding:calc(3.5*var(--u)) calc(8*var(--u)) calc(2.5*var(--u))}
/* ── 7 · notices — a note in the margin: NO bar, NO plate (Rev L) ────────────────────────────
Rev K gave the note an inset 2u bar with pill caps on a whisper of plate; the user: "don't use it under
check and drafting — I don't want it at all". A coloured side stripe is also impeccable's BAN 1. So the
note is marginalia again, and only marginalia: the LABEL (CHECK · DRAFTING · CHECKED, in the pen or the
accent) says what kind of note it is; the text is the note. No rule, no ground, no radius. */
.mylar .notice{border-left:0;border-radius:0;padding:var(--s-1) 0;background:none}
.mylar .notice::before{display:none}
.mylar .notice.has-x{padding-right:calc(26*var(--u))}
.mylar .notice .x{right:0;top:var(--s-1)}
.mylar :is(.desk,.plate-dark) .notice{background:none}
/* ── 8 · KPIs — the dashed egg-crate stays (Rev L) ────────────────────────────────────────────
Rev K made the four KPIs frosted tiles (a hairline, r-3, paper toward white); the user: "I liked the dash
hairline separating them beforehand". They were right — the dashed rules ARE the plan set (law 3), and
four rounded plates in a row is the card grid impeccable warns against. platform.css §12 draws them. */
/* ── 9 · fields — written on the paper, now written in a shallow trough ───────────────────────
The field is still a LABEL AND A LINE (§7b) — never a box. The line's ends turn up by r-1, which
is what "rounded ends" means on a rule; the focus stroke draws inside that trough at 2u with
round caps. Every state (err · ok · ro · dis · the desk) keeps driving border-bottom-color, so
nothing about the states changes. */
.mylar .field .in{border-radius:0 0 var(--r-1) var(--r-1);padding:calc(8*var(--u)) 0 calc(8*var(--u))}
.mylar .field .in::after{left:var(--r-1);right:var(--r-1);height:calc(2*var(--u));border-radius:var(--r-pill)}
.mylar .field.sm .in{padding:calc(5*var(--u)) 0 calc(6*var(--u))}
.mylar textarea.in,.mylar .field textarea.in{border-radius:0 0 var(--r-1) var(--r-1);padding-top:0;padding-bottom:calc(8*var(--u))} /* Rev L: padding-top 0 — the trough's 8u top pad had pushed the WRITTEN NOTE's lines down while its ruled background stayed put, so every rule struck through the words */
.mylar .field .hint,.mylar .field .msg{padding-top:calc(1*var(--u))}
/* the select's list: a rounded plate of paper with a hairline (outline follows the radius) */
.mylar .menu{border-radius:var(--r-2);padding:calc(5*var(--u)) 0}
.mylar .menu .opt{padding-left:calc(18*var(--u))}
.mylar .menu .opt::before{left:calc(7*var(--u))}
.mylar .menu.up{border-radius:var(--r-2)}
.mylar .select .in .menu{margin-top:calc(3*var(--u))}
.mylar .select .in .menu.up{margin:0 0 calc(3*var(--u))}
/* the floating rail tip is a small note, not a tooltip box */
.mylar .tip.float{border-radius:var(--r-2);padding:calc(6*var(--u)) calc(10*var(--u))}
/* ── 10 · choices — the drawn marks keep drawing; only their frames ease ──────────────────────
The tick still draws on and the dot still soaks in. The switch was the one square control left
(§15.8): its track becomes a pill and its knob a disc, which is what a throw wants to be. */
.mylar .check .box{border-radius:var(--r-1)}
.mylar .switch .track{border-radius:var(--r-pill);width:calc(32*var(--u))}
.mylar .switch .track::after{border-radius:50%}
.mylar .switch input:checked+.track::after{transform:translateX(calc(16*var(--u)))}
.mylar .rail-f .who .ini{border-radius:var(--r-1)}
/* ── 11 · the rail — the current sheet is a soft pill, no tick (Rev L) ────────────────────────
The pill is the FILM PLATE — the sheet you are reading, lifted off the bound margin — and it says
"you are here" ALONE: Rev L removes the margin tick (Rev K had moved it to x = 0; the user does not
want a hairline stripe beside anything).
The rail's overflow:hidden is respected: nothing is drawn outside the nav's 6u inset. */
.mylar .rail-nav{padding-left:calc(6*var(--u));padding-right:calc(6*var(--u))}
.mylar .rail-a{border-radius:var(--r-2);height:calc(32*var(--u))}
.mylar .rail-a.on{background:var(--film-plate)}
.mylar .rail-a.on::before{display:none} /* Rev L: NO margin tick (the user: "don't use that left hairline border on the rail") — the lifted sheet is the current item */
.mylar .app.folded .rail-a,.mylar .app.folded .fold{padding-left:calc(14*var(--u))}
.mylar .rail-gh{padding-left:calc(14*var(--u))}
.mylar .rail-gh::before{left:calc(14*var(--u))}
.mylar .app.folded .rail-gh::before{right:calc(14*var(--u))}
.mylar .rail-f .who{padding-left:calc(14*var(--u))}
.mylar .fold{padding-left:calc(14*var(--u))}
.mylar .topbar .fold{padding-left:0;border-radius:var(--r-1)}
@media (max-width:900px){
.mylar .app:not(.static) .rail-a,.mylar .app:not(.static) .fold{padding-left:calc(14*var(--u))}
.mylar .app:not(.static) .rail-f .who{padding-left:calc(14*var(--u))}
}
/* ── 12 · the schedule — the chosen row is a pressed film (Rev L: no tick) ────────────────────
The row carries the faintest plate (3.5 % ink) with its ends eased, so a selected row reads as a
row and not as an alabaster chip (the idiom Rev E retired); the checked box and the ink text do the
rest. The Rev E margin tick is gone (the user: no left hairline in the table). */
.mylar .schedule tbody tr.sel td{background:var(--film-tick)}
.mylar .schedule tbody tr.sel td:first-child{border-radius:var(--r-2) 0 0 var(--r-2)}
.mylar .schedule tbody tr.sel td:last-child{border-radius:0 var(--r-2) var(--r-2) 0}
.mylar .schedule tbody tr.sel td:first-child::before{display:none} /* Rev L: NO margin tick in the table either — the pressed film is the selection */
.mylar .schedule.sel-chip tbody tr.sel td{background:var(--alab)}
.mylar .schedule.sel-hatch tbody tr.sel td{background:repeating-linear-gradient(135deg,var(--rule) 0 1px,transparent 1px calc(7*var(--u)))}
/* ── 13 · pager, meter, empty ─────────────────────────────────────────────────────────────── */
.mylar .pager .pp a{padding:calc(3*var(--u)) calc(6*var(--u));border-radius:var(--r-1)}
.mylar .pager .pp a::after{left:calc(6*var(--u));right:calc(6*var(--u));height:calc(2*var(--u));bottom:calc(-1*var(--u));border-radius:var(--r-pill)}
.mylar .meter,.mylar .meter i{border-radius:var(--r-pill)}
/* nothing filed: a soft, dashed field waiting to be drawn in — the plan set's own empty cell */
.mylar .empty{border:1px dashed var(--rule);border-radius:var(--r-3);background:var(--film-plate-2);padding:calc(40*var(--u)) var(--s-8)}
/* ── 14 · plates ─────────────────────────────────────────────────────────────────────────────
.tile is deliberately NOT rounded: its dashed right/bottom borders ARE the leaf grid (§5, law 3);
easing each cell would break the continuous rules that make the page a plan. */
.mylar .plate-dark{border-radius:var(--r-3)}
.mylar .plate-alab{border-radius:var(--r-2)}
.mylar .fig .rule{border-radius:var(--r-pill)}
/* ── 15 · the desk's own soft edges ──────────────────────────────────────────────────────────
The machine's reply lands on a plate of its own surface — a 4 % paper wash, rounded — so the
REPLY reads as something said rather than more log. No blur, no glow; contrast is unchanged
(alabaster on the desk 13.4 : 1 → 13.1 : 1, still AAA). */
.mylar :is(.desk,.plate-dark) .reply{background:rgba(var(--paper-rgb),.045);border-radius:var(--r-2);padding:calc(9*var(--u)) calc(11*var(--u));margin-top:calc(6*var(--u))}
.mylar :is(.desk,.plate-dark) .btn{border-radius:var(--r-2)}
/* ── 16 · the door — a written line, eased. Still not a box, still not a chat window (law 8) ──
The user asked for "a rounded input field with rounded ends": on this system that is the same
trough the written field takes, plus room for the hand. The line turns up at both ends, the whole
row gets a target, and on focus the stroke thickens to 2u in ink with round caps. NOT a filled
pill — a filled input would make the machine's affordance the loudest object on the sheet. */
.mylar .ask{position:relative;border-radius:0 0 var(--r-2) var(--r-2);padding:calc(6*var(--u)) 0 calc(9*var(--u))}
.mylar .ask::after{content:"";position:absolute;left:var(--r-2);right:var(--r-2);bottom:calc(-1*var(--u));height:calc(2*var(--u));border-radius:var(--r-pill);background:var(--ink);transform:scaleX(0);transform-origin:0 50%;transition:transform var(--t-underline) var(--ease-out);pointer-events:none}
.mylar .ask:focus-within::after{transform:scaleX(1)}
.mylar :is(.desk,.plate-dark) .ask::after{background:var(--paper)}
.mylar .app.lit :is(.desk,.plate-dark) .ask::after{background:var(--accent-lit)}
.mylar .ask button,.mylar .ask .act{border-radius:var(--r-1);padding:calc(4*var(--u)) 0}
/* ── 17 · the drawn scrollbar keeps its 3u gutter and takes a cap ────────────────────────────── */
.mylar::-webkit-scrollbar-thumb,.mylar ::-webkit-scrollbar-thumb{border-radius:var(--r-pill)}
/* ── 18 · reduced motion: the door's stroke lands instantly (everything else already does) ───── */
@media (prefers-reduced-motion:reduce){.mylar .ask::after{transition-duration:1ms!important}}
.mylar.still .ask::after,.still .mylar .ask::after{transition-duration:0s!important} /* ?still / html.still: the proof shot lands it */
/* ── 19 · (Rev L round 1 put press / hover / arrive micro-interactions here; the user: "they don't make much sense — get rid of them".
Removed. Motion on the platform is the rail's draw-on, the machine's own motions, functional exits, and the strike (AED.motes). §10.) ── */
/* ═══════════════════════════════════════════════════════════════════════════════════════════
AEDONYX · PAPER & INK — forge.css Issue 9 · Rev K (in trial)
THE FORGE: the desk as the machine at work. Class-gated on `.app.forge` — with the class absent
NOTHING below applies and the desk is exactly the surface platform.css draws. Built into
styles.css by build-cd.py (concatenated after platform.css and mylar.css).
The user's direction, verbatim: "For the desk component, this is meant to be a different surface.
It's supposed to represent the machine working, like the Forge. We have the colors right; we need
it to look more terminal-esque at the bottom with glowing gold accents and fire."
What it does, and nothing more:
1 · the foot becomes a TERMINAL PROMPT — mono, a gold `❯` glyph, a gold caret, and a blinking
gold block cursor while the line is empty (the door, still one line — never a chat window)
2 · a GOLD GLOW on the things that are already lit — the machine's word, the current line of its
work, the prompt. Heat, not bloom: one soft text-shadow, ≤ .45 alpha, no blur on the type
3 · FIRE at the foot — the mouth (a bloom over the bottom quarter, hottest at the middle of the
bottom edge), a hot hairline along the very edge with a halo, and five embers drifting up
through it. All pointer-events none, all BEHIND the type, all landed by `html.still` and
`prefers-reduced-motion`
4 · the work log picks up a `›` gutter — the machine echoing its own commands
Laws it leans on (§1): the desk is the ONE dark surface (law 1) and the only place a light is
permitted — "nothing glows on paper" is untouched; every selector here starts `.app.forge .desk`
(never `.plate-dark`: a dark plate on a sheet is not a forge). The pens stay off the desk (§3,
the on-ink table); the fire is the desk's own lit colour, never a pen. Contrast on the desk is
unchanged or better: the gold #F59E0B is 8.2 : 1 on #0E1A25 (§15.36); the heat only ever sits
behind type at ≤ .09 alpha where type actually is; no text colour is altered by this file.
Variant: `.app.forge.forge-thin` — the same terminal and glow with only the hot hairline and its
halo at the foot: no bloom, no embers. For anyone who wants the heat implied, not shown.
═══════════════════════════════════════════════════════════════════════════════════════════ */
/* ── 0 · the fire's colours ───────────────────────────────────────────────────────────────────
ONE hue family, three values: the desk's gold, a deep ember orange, a dark ember for the bottom
of the fire. No new hues. `--forge` defaults to the decided gold (§15.36) and follows
`--accent-lit` whenever the desk is lit (`?lit=gold` → the same #F59E0B), so the fire and the
machine's lit word are one colour. ── */
.app.forge{--forge:#F59E0B;--forge-deep:#D4640A;--forge-dark:#A02E05}
.app.forge.lit{--forge:var(--accent-lit)} /* lit: the fire takes the desk's accent */
/* ── 1 · z-order: the fire is behind everything the machine says ──────────────────────────────
`.desk` is already a stacking context (position:relative, z-index:3 — platform.css §4), so all of
this is local: nothing can reach the rail or the paper. The three regions lift to 1, the heat
sits at 0, the embers at −1 inside the foot. ── */
.app.forge .desk-h,.app.forge .desk-f{z-index:1}
.app.forge .desk-b{position:relative;z-index:1}
/* ── 2 · THE MOUTH — the heat and the hot edge ────────────────────────────────────────────────
`.desk::after` (its ::before is the desk's left hairline) is the heat field: it fills the bottom
quarter of the desk, hottest at the middle of the bottom edge and cooling upward and outward, with
the hot hairline as its topmost background layer. Static — nothing here animates, nothing to
land, and `pointer-events:none` keeps it out of the way of the door. ── */
.app.forge .desk::after{content:"";position:absolute;left:0;right:0;bottom:0;height:calc(220*var(--u));
z-index:0;pointer-events:none;
background:
/* the hot edge: 1u along the very bottom, gold at the middle, ember orange toward the ends */
linear-gradient(90deg,color-mix(in srgb,var(--forge-dark) 45%,transparent),var(--forge) 42%,var(--forge) 58%,color-mix(in srgb,var(--forge-deep) 45%,transparent)) bottom left/100% max(1px,calc(1*var(--u))) no-repeat,
/* the mouth: the fire is hottest at the middle of the edge, not evenly along it */
radial-gradient(ellipse calc(112*var(--u)) calc(116*var(--u)) at 50% 100%,
color-mix(in srgb,var(--forge) 19%,transparent) 0,
color-mix(in srgb,var(--forge-deep) 15%,transparent) 32%,
color-mix(in srgb,var(--forge-deep) 6%,transparent) 62%,
transparent 88%),
/* the heat rising off it, across the width */
linear-gradient(0deg,color-mix(in srgb,var(--forge-deep) 5%,transparent) 0,
color-mix(in srgb,var(--forge-deep) 3.5%,transparent) 26%,
color-mix(in srgb,var(--forge) 2%,transparent) 58%,
transparent 100%)}
/* the halo above the hot edge — an INSET shadow on the desk itself, so it is clipped by the desk
(and by mylar's rounded edge) and can never spill onto the paper the way an outer shadow would. */
.app.forge .desk{box-shadow:inset 0 calc(-20*var(--u)) calc(20*var(--u)) calc(-10*var(--u)) color-mix(in srgb,var(--forge) 15%,transparent)}
.app.forge.desk-folded .desk{box-shadow:none} /* folded to 0: nothing leaks */
/* the thin cut: the edge and its halo only */
.app.forge.forge-thin .desk::after{background:linear-gradient(90deg,color-mix(in srgb,var(--forge-dark) 45%,transparent),var(--forge) 42%,var(--forge) 58%,color-mix(in srgb,var(--forge-deep) 45%,transparent)) bottom left/100% max(1px,calc(1*var(--u))) no-repeat}
/* ── 3 · THE EMBERS — five sparks drifting up out of the mouth ────────────────────────────────
One pseudo, five radial-gradient layers, one animation: each layer travels a different distance
over the same 9 s, so they enter and leave at different moments (the stagger) and sway ±3 % as
they rise. Every layer starts below the box and ends above it, so the loop's restart is never
seen. A mask fades them in just off the hot edge and out well before the top — they die as they
rise, which is what an ember does. ── */
.app.forge .desk .desk-f::after{content:"";position:absolute;left:0;right:0;bottom:0;height:calc(210*var(--u));
z-index:-1;pointer-events:none;
background-repeat:no-repeat;
background-image:
radial-gradient(circle,color-mix(in srgb,var(--forge) 90%,transparent) 0 32%,color-mix(in srgb,var(--forge-deep) 45%,transparent) 58%,transparent 74%),
radial-gradient(circle,color-mix(in srgb,var(--forge) 72%,transparent) 0 34%,color-mix(in srgb,var(--forge-deep) 34%,transparent) 60%,transparent 76%),
radial-gradient(circle,color-mix(in srgb,var(--forge) 62%,transparent) 0 30%,color-mix(in srgb,var(--forge-deep) 40%,transparent) 56%,transparent 72%),
radial-gradient(circle,color-mix(in srgb,var(--forge) 82%,transparent) 0 34%,color-mix(in srgb,var(--forge-deep) 36%,transparent) 60%,transparent 76%),
radial-gradient(circle,color-mix(in srgb,var(--forge-deep) 78%,transparent) 0 32%,color-mix(in srgb,var(--forge-dark) 40%,transparent) 58%,transparent 74%);
background-size:calc(2*var(--u)) calc(2*var(--u)),calc(1.5*var(--u)) calc(1.5*var(--u)),calc(2.5*var(--u)) calc(2.5*var(--u)),calc(1.5*var(--u)) calc(1.5*var(--u)),calc(2*var(--u)) calc(2*var(--u));
background-position:17% 51%,35% 74%,64% 97%,77% 62%,30% 120%; /* the landed frame (mid-drift) */
-webkit-mask-image:linear-gradient(0deg,rgba(0,0,0,0) 0,rgba(0,0,0,.95) 13%,rgba(0,0,0,.6) 50%,rgba(0,0,0,0) 90%);
mask-image:linear-gradient(0deg,rgba(0,0,0,0) 0,rgba(0,0,0,.95) 13%,rgba(0,0,0,.6) 50%,rgba(0,0,0,0) 90%);
animation:forgeEmbers 9s linear infinite}
@keyframes forgeEmbers{
0% {background-position:14% 106%,38% 152%,61% 198%,80% 128%,27% 244%}
50% {background-position:17% 51%, 35% 74%, 64% 97%, 77% 62%, 30% 120%}
100%{background-position:13% -4%, 39% -4%, 60% -4%, 81% -4%, 26% -4%}}
.app.forge.forge-thin .desk .desk-f::after{display:none}
/* .forge-hot (?forge=hot): the same fire, hotter — the mouth and the rise at roughly double alpha, the halo deeper. For the comparison; the default is the K1 reference. */
.app.forge.forge-hot .desk::after{opacity:1;filter:saturate(1.15) brightness(1.25)}
.app.forge.forge-hot .desk{box-shadow:inset 0 calc(-28*var(--u)) calc(28*var(--u)) calc(-12*var(--u)) color-mix(in srgb,var(--forge) 26%,transparent)}
.app.forge.forge-hot .desk .desk-f::after{opacity:1.35}
/* ── 4 · THE TERMINAL at the foot ─────────────────────────────────────────────────────────────
The door becomes a prompt line: a solid rule above it (a dashed rule is paper; a terminal is ruled
solid), the machine's own hand in what is typed, a gold `❯` in the gutter, a gold caret, and a
blinking block cursor while the line is empty. Still the door — one line, one ASK (law 8).
The burst leaves this line (see §6 below) so the prompt reads as a prompt. ── */
.app.forge .desk .desk-f::before{background:var(--rule-on-ink)} /* solid, not dashed */
.app.forge .desk .desk-f .ask{position:relative;z-index:1;border-bottom:0;align-items:center;gap:var(--s-3)}
/* the prompt glyph — the gutter of the line */
.app.forge .desk .desk-f .ask::before{content:"\276F";flex:none;
font:500 var(--t-reply)/1 var(--mono);color:var(--forge);
text-shadow:0 0 calc(6*var(--u)) color-mix(in srgb,var(--forge) 45%,transparent)}
/* what is typed — the machine's hand, its caret lit; the line fades at its right edge rather than
cutting, so a long placeholder reads as a line that continues (mono is wider than the sans it
replaces, and the desk is only 300u) */
.app.forge .desk .desk-f .ask input{font:400 var(--t-reply)/var(--lh-reply) var(--mono);letter-spacing:-.012em;
caret-color:var(--forge);padding-left:calc(16*var(--u));
-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 20*var(--u)),transparent);
mask-image:linear-gradient(90deg,#000 calc(100% - 20*var(--u)),transparent)}
/* the placeholder lifts one step, grey-2 → grey-3: the heat behind the prompt line raises the
ground from #0E1A25 to ≈#362920 at its hottest, which would take grey-2 from 5.06 : 1 to 4.05 : 1.
grey-3 holds 6.0 : 1 there and 7.45 : 1 on the flat desk — nothing on the desk loses a grade. */
.app.forge .desk .desk-f .ask input::placeholder{letter-spacing:-.012em;color:var(--grey-3)}
/* the block cursor — painted INTO the input's own gutter (not a pseudo: mylar owns `.ask::after` as
the focus underline, and the cursor belongs where the text begins anyway). It holds the line
while nothing is typed and hands over to the real gold caret the moment the line is focused. */
.app.forge .desk .desk-f .ask input:placeholder-shown{
background-image:radial-gradient(closest-side,color-mix(in srgb,var(--forge) 36%,transparent),transparent),
linear-gradient(var(--forge),var(--forge));
background-position:calc(-8.5*var(--u)) 50%,0 50%;
background-repeat:no-repeat;
background-size:calc(24*var(--u)) calc(24*var(--u)),calc(7*var(--u)) calc(14*var(--u));
animation:forgeCaret 1.1s linear infinite}
@keyframes forgeCaret{
0%,49% {background-size:calc(24*var(--u)) calc(24*var(--u)),calc(7*var(--u)) calc(14*var(--u))}
50%,100%{background-size:0 0,0 calc(14*var(--u))}}
.app.forge .desk .desk-f .ask input:focus{background-image:none;animation-name:none}
/* the ASK — mono caps, the one hot word on the line (on the desk the pens do not apply, §3) */
.app.forge .desk .desk-f .ask button,.app.forge .desk .desk-f .ask .act{
font:500 var(--t-button)/1 var(--mono);letter-spacing:.1em;color:var(--forge);
text-shadow:0 0 calc(5*var(--u)) color-mix(in srgb,var(--forge) 28%,transparent)}
/* ── 5 · THE GLOW — heat on what is already lit ───────────────────────────────────────────────
Only where the desk is lit (`.app.lit`, ?lit): the machine's word when it lights, and the current
line of its work. One text-shadow each, ≤ .45 alpha — a filament, not a bloom. The burst is
never touched (law 5: the mark does not glow). ── */
.app.forge.lit .desk .status .w .lit,.app.forge.lit .desk .w .lit{
text-shadow:0 0 calc(7*var(--u)) color-mix(in srgb,var(--forge) 42%,transparent)}
.app.forge.lit .desk .log li.now{
text-shadow:0 0 calc(7*var(--u)) color-mix(in srgb,var(--forge) 30%,transparent)}
/* ── 6 · the desk's small print ───────────────────────────────────────────────────────────────
The log is the machine echoing itself, so the written note's dash becomes a prompt gutter, and the
line it is working on carries that gutter in the fire's colour.
The door's burst leaves the prompt line: the same mark is already on the desk's head 3 lines above
(law 5 puts one burst beside the machine's word), and at 300u the prompt cannot carry both a mark
and a prompt glyph without the placeholder losing half its words. `?forge=0` puts it back. ── */
.app.forge .desk .log li::before{content:"\203A"}
.app.forge.lit .desk .log li.now::before{color:var(--forge)}
.app.forge .desk .desk-f .ask canvas{display:none}
/* ── 7 · landed: `html.still` (proof shots) and reduced motion ────────────────────────────────
platform.css §15 forces `animation-duration:1ms!important` on every element and pseudo, which
would leave an infinite animation cycling under a capture — so the NAME is cleared instead (the
!important on the duration cannot fight that) and each element falls back to its declared static
frame: the embers to mid-drift, the block cursor solid. ── */
html.still .app.forge .desk .desk-f::after,html.still .app.forge .desk .desk-f .ask input:placeholder-shown{animation-name:none}
@media (prefers-reduced-motion:reduce){
.app.forge .desk .desk-f::after,.app.forge .desk .desk-f .ask input:placeholder-shown{animation-name:none}}
/* (the cursor rule is written on `input:placeholder-shown`, so both overrides carry that pseudo-class
too — a media query adds no specificity and a bare `input` selector would lose to it.) */
/* ═══════════════════════════════════════════════════════════════════════════════════════════
AEDONYX · PAPER & INK — gilt.css Issue 9 · Rev L (in trial)
THE GILT — the machine's gold, on the paper, in whispers. Class-gated on `.app.gilt` — with the
class absent NOTHING below applies. Built into styles.css by build-cd.py (after forge.css).
Rev L round 1 also put a 5 % obsidian wash on the rail, a gilt hairline under the running head and
gilt/ink "current" ticks here; the user scrapped all three ("that gold hairline looks so stupid" · the
rail "too dark" · "don't use that left hairline border — I don't want it at all"). Round 2 keeps only
what the machine itself touches on the paper — three marks and one transient — and nothing structural:
· the METER's fill — the gauge is the machine's measure, drawn in its own metal
· the head's WORD when it lights — the same light as the desk's word, one machine, one light
· the PLOTTER's pen head (the template passes --gilt to plot.js)
· the SPARK off the ONE action (`AED.motes`, bound by the template)
Law: gold is the desk's colour and the mark's gilt, never paper text (§15.35 — 1.9 : 1 on film). Here
it is only ever a 2u line or a grain, in `--gilt` = the gold pulled 14 % toward the ink so a line reads
(≈#D48C10, 2.5 : 1 as a stroke). Nothing here changes a text colour, a ground, or a rule of the frame.
═══════════════════════════════════════════════════════════════════════════════════════════ */
.app.gilt{
--gold:var(--forge,#F59E0B); /* the forge's gold (forge.css); #F59E0B without it */
--gilt:color-mix(in srgb,var(--gold) 86%,var(--ink))} /* ≈#D48C10 — a gilt LINE on film, 2.5 : 1 */
.app.gilt.lit{--gold:var(--accent-lit)} /* lit: the gilt follows the desk's own light, as the forge does */
/* the meter — paper only; on the desk the meter stays paper on ink. `.meter-ink` (?meter=ink) keeps the ink. */
.app.gilt:not(.meter-ink) .main .meter i{background:var(--gilt)}
.app.gilt:not(.meter-ink) .main :is(.meter.pen-blue,.meter.pen-red,.meter.pen-green) i{background:var(--gilt)}
/* the head's word — the lit sweep is transient and the base word is grey-3 already: a glint, not text. `.word-sky` keeps the accent. */
.app.gilt.lit:not(.word-sky) .topbar .status .w .lit{color:var(--gilt)}
/* AEDONYX · PAPER & INK — instrument.css Rev M · in trial (§15.40)
THE FOCUS INSTRUMENT — the rail's current sheet is HELD by a piece of the machine (instrument.js builds it from
assets/instrument//: head · arm slice · foot · ring · dial). Class-gated: .app.inst (the template's ?inst=loupe|reticle|
frame · ?inst=0 off). Under it the film pill and the drawn underline of the current item stand down — the head's window IS the
current mark, the arm IS the underline (add .inst-pill to keep the pill). Nothing here has colour: the instrument carries its own
material; the rail stays the film. The head travels with --instr-t (set per move by instrument.js, distance-scaled), the width
with --t-fold — the same duration and ease as the rail's fold, so the foot tracks the item's end and docks behind the head. */
.app.inst .rail-nav{position:relative}
/* the head fills the rail: 54u tall (its glass ≈ 40u), so under the instrument the folded rail is 64u wide with the glyph centred in it, the pitch opens to 42u
(the head overhangs 6u into each neighbour's box, 7u clear of their glyphs) and the label steps 12u right of the glyph */
.app.inst{--rail-c:64px}
.app.inst .rail-a{gap:calc(24*var(--u));height:calc(42*var(--u))}
.app.inst.folded .rail-a,.app.inst.folded .fold{padding-left:calc(24*var(--u))}
.mylar .app.inst.folded .rail-a,.mylar .app.inst.folded .fold{padding-left:calc(18*var(--u))}
@media (max-width:900px){.app.inst:not(.static){--rail-w:64px}.app.inst:not(.static) .rail-a,.app.inst:not(.static) .fold{padding-left:calc(24*var(--u))}.mylar .app.inst:not(.static) .rail-a,.mylar .app.inst:not(.static) .fold{padding-left:calc(18*var(--u))}}
.app.inst .rail-a.on::before{display:none} /* the margin tick (rigid) — the head marks the sheet */
.app.inst:not(.inst-pill) .rail-a.on{background:none} /* the mylar pill — the head holds the sheet instead */
.app.inst .rail-a.on .t::after{transform:scaleX(0)} /* the arm reaches under the label — no second underline */
.app.inst .rail-a.on:hover .t::after,.app.inst .rail-a.on:focus-visible .t::after{transform:scaleX(0)} /* …and hovering the held sheet draws none either */
/* ABOVE the film: the render carries no ground shadow of its own (build-instrument.py drops it) — the sheet takes a real cast shadow from the
instrument's alpha silhouette (through the window too: the ring shadows the film around the glyph). Two layers: the soft ambient throw and the
tight contact. While it travels it LIFTS — the throw lengthens and softens, the body rises 1.5u — and it sets down as it lands. */
.instr{position:absolute;left:0;top:0;pointer-events:none;z-index:3;opacity:0;
--instr-sh:drop-shadow(0 calc(3*var(--u)) calc(5*var(--u)) rgba(var(--ink-rgb),.30)) drop-shadow(0 calc(1*var(--u)) calc(1.5*var(--u)) rgba(var(--ink-rgb),.24));
--instr-sh-lift:drop-shadow(0 calc(9*var(--u)) calc(13*var(--u)) rgba(var(--ink-rgb),.24)) drop-shadow(0 calc(2*var(--u)) calc(3*var(--u)) rgba(var(--ink-rgb),.16));
filter:var(--instr-sh);
transition:top var(--instr-t,.4s) var(--ease-out),width var(--t-fold) var(--ease-out),opacity .35s var(--ease-out),filter .28s var(--ease-out),translate .28s var(--ease-out)}
.instr.on{opacity:1}
.instr.moving{filter:var(--instr-sh-lift);translate:0 calc(-1.5*var(--u))}
.instr>*{position:absolute;top:0;height:100%}
.instr-head{left:0;z-index:2}
.instr-head img{position:absolute;left:0;top:0;height:100%;width:auto;display:block;user-select:none}
.instr-head .instr-base{z-index:2} /* the render paints OVER the lens: its ring and bore edge cut the glass exactly */
.instr-arm{z-index:0;min-width:0;background:none 0 0/100% 100% no-repeat} /* the slice, stretched — its width is what remains between head and foot (0 when docked) */
.instr-foot{right:0;z-index:1;background:none 0 0/100% 100% no-repeat} /* caps the arm; slides behind the head when the rail folds */
.instr-part{will-change:transform;z-index:3}
/* THE LENS — the window is glass: whatever lies under it shows magnified (.instr-mag = the glyph column, moved per frame by instrument.js).
Ground = the rail's own colour (set by JS); the glass = a specular at the light, a rim shadow where the ring bites, a hair of bright edge. */
.instr-lens{position:absolute;display:none;border-radius:50%;overflow:hidden;z-index:1;contain:strict;transform:translateZ(0)}
.instr-lens .instr-mag{position:absolute;left:0;top:0;width:0;height:0;transform-origin:0 0;will-change:transform,filter}
.instr-lens .instr-mag .gl{position:absolute;max-width:none;stroke-width:1.15} /* aedonyx.css svg{max-width:100%} would clamp them to the mag's zero width */
.instr-lens .instr-glass{position:absolute;inset:0;border-radius:50%;pointer-events:none;
background:radial-gradient(ellipse 46% 34% at 34% 26%,rgba(255,255,255,.62) 0,rgba(255,255,255,.22) 40%,rgba(255,255,255,0) 100%),
radial-gradient(circle at 50% 50%,rgba(var(--ink-rgb),0) 58%,rgba(var(--ink-rgb),.06) 76%,rgba(var(--ink-rgb),.20) 100%);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.45),inset 0 calc(2.5*var(--u)) calc(4*var(--u)) rgba(var(--ink-rgb),.38),inset 0 calc(-1*var(--u)) calc(2*var(--u)) rgba(255,255,255,.35)} /* the sheet sits at the BOTTOM of the bore: the ring's shadow falls onto it from the top */
/* still / reduced motion: the head lands, the parts stay */
html.still .instr,.app.still .instr{transition:none!important;opacity:1;filter:var(--instr-sh)}
@media (prefers-reduced-motion:reduce){.instr{transition:opacity .35s var(--ease-out)}.instr.moving{filter:var(--instr-sh);translate:none}}