/* ============================================================================
   MACHINE VIEW — the plain twin of every page (/machine, /machine/work, …), for AI
   agents and crawlers (2026-10-27, after basement.studio/ai).
   The pages are generated at release by the release repo's scripts/machine.mjs from what
   each human page renders; this file is their only style. The Info page's ink (#151515),
   the paper as text, the site red for the mark, the current tab and the hashes. One
   monospace column; the mark is the SMD logo in half blocks (assets/machine/mark.txt, made by
   _ref/machine/make-mark.mjs). The Human | Machine switch sits at the foot, as on the site.
   ========================================================================== */
:root{--ink:#151515;--paper:#FCFBF8;--red:#F61515;--dim:rgba(252,251,248,.45);--line:rgba(252,251,248,.14);
  --mono:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace;}
*{box-sizing:border-box;}
html{background:var(--ink);color:var(--paper);-webkit-text-size-adjust:100%;}
body.machine{margin:0;font:400 15px/1.65 var(--mono);letter-spacing:0;}
::selection{background:var(--red);color:var(--paper);}
a{color:inherit;text-decoration:underline;text-decoration-color:rgba(252,251,248,.35);text-underline-offset:3px;transition:color .15s ease,text-decoration-color .15s ease;}
a:hover,a:focus-visible{color:var(--red);text-decoration-color:var(--red);outline:none;}

.m-skip{position:absolute;left:16px;top:-80px;padding:6px 10px;background:var(--paper);color:var(--ink);text-decoration:none;z-index:9;}
.m-skip:focus{top:16px;}

.m-page{width:100%;max-width:840px;margin:0 auto;padding:120px 20px 0;}

/* the mark: SMD in half blocks, the site red; it prints row by row, as a terminal would */
.m-mark{margin:0 0 56px;color:var(--red);font:400 clamp(6px,1.5vw,12px)/1 var(--mono);letter-spacing:0;white-space:pre;overflow:hidden;user-select:none;
  text-shadow:.06em 0 currentColor,0 .06em currentColor;   /* closes the hairline seams the font leaves between blocks */
  animation:m-print 1.2s steps(24,end) both;}
@keyframes m-print{from{clip-path:inset(0 0 100% 0);}to{clip-path:inset(0 0 0 0);}}

.m-nav{display:flex;flex-wrap:wrap;gap:4px 18px;margin:0 0 32px;text-transform:uppercase;}
.m-nav a{text-decoration:none;padding:1px 4px;margin:0 -4px;}
.m-nav a[aria-current="page"]{background:var(--red);color:var(--paper);}
.m-sub{margin:0 0 56px;text-transform:uppercase;}
.m-dim,.m-sub .m-dim{color:var(--dim);}

/* the page: headings keep their hashes, lists their dashes; a rule draws each second-level heading */
.m-body,.m-index{max-width:72ch;}
.m-body p,.m-body ul,.m-body blockquote{margin:0 0 1.1em;}
.m-h{font:inherit;font-weight:600;margin:2.6em 0 1em;}
h2.m-h{font-size:22px;line-height:1.3;margin-top:0;}
h3.m-h{display:flex;gap:1ch;align-items:baseline;}
h3.m-h::after{content:"";flex:1;border-top:1px solid var(--line);transform:translateY(-.3em);}
.m-hash{color:var(--red);font-weight:400;}
.m-body ul,.m-index ul{list-style:none;padding:0;}
.m-body li,.m-index li{position:relative;padding-left:2ch;}
.m-body li::before,.m-index li::before{content:"-";position:absolute;left:0;color:var(--dim);}
.m-body blockquote{padding-left:2ch;border-left:1px solid var(--red);color:var(--paper);}
.m-body hr{border:0;border-top:1px dashed var(--line);margin:2em 0;}
.m-body b{font-weight:600;}
.m-img,.m-fig{color:var(--dim);}
.m-index{margin-top:4em;}

/* the fact sheet under the title: key ........ value, the dots fill to a fixed column (basement's showcase pages) */
.m-facts{margin:0 0 3.2em;max-width:72ch;}
.m-kv{display:grid;grid-template-columns:16ch 1fr;margin:0 0 .35em;}
.m-kv dt{position:relative;overflow:hidden;white-space:nowrap;color:var(--dim);text-transform:uppercase;padding-right:1ch;}
.m-kv dt::after{content:" ............................................";color:rgba(252,251,248,.25);}
.m-kv dd{margin:0;padding-left:1ch;min-width:0;overflow-wrap:anywhere;}
/* the way out, and the end of the file */
.m-end{margin:4em 0 0;text-transform:uppercase;}

/* the switch, at the foot: the same pair as the site footer, Machine on */
.m-mode{display:flex;justify-content:center;gap:2px;margin:120px auto 0;padding:0 0 48px;}
.m-mode__opt{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;text-decoration:none;text-transform:uppercase;color:var(--dim);}
.m-mode__opt.is-on{background:var(--paper);color:var(--ink);}
a.m-mode__opt:hover,a.m-mode__opt:focus-visible{color:var(--paper);background:rgba(252,251,248,.1);}
.m-ic{width:13px;height:13px;flex:none;overflow:visible;fill:none;stroke:currentColor;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;}

@media (max-width:640px){
  body.machine{font-size:13px;}
  .m-page{padding:72px 16px 0;}
  .m-mark{margin-bottom:36px;}
  h2.m-h{font-size:18px;}
}
@media (prefers-reduced-motion:reduce){.m-mark{animation:none;}}