/* arq-base: the base classes every arquestra.dev asset shares, on top of arq-tokens.css (load that first).
   The page frame, the header with its top-right corner (language switch, the asset's symbol under it), and the small
   pieces the assets repeat: .mono labels, .link, .card, .btn, .cta (the one call to action, coral), .tag, .dot (a light).
   The header's markup comes from arq-asset.js. Pages keep only what is theirs, and vary a piece with a scoped selector
   (".next .cta"), never by redefining it here. */
[hidden]{display:none!important}
html,body{height:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-weight:300}
*{box-sizing:border-box}
button,select,input{font:inherit;color:inherit}
.app{max-width:1440px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:calc(var(--gap) + 2px) var(--gap)}
.mono{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase}
/* header: the crumb and the links on the first row, then the title, then the intro; top right the language switch with
   the asset's symbol under it, at exactly its width, so it never moves with the text */
header{display:grid;grid-template-columns:minmax(0,1fr) auto auto;column-gap:18px;align-items:center}
#eb{grid-column:1;grid-row:1}
header .hr{grid-column:2;grid-row:1}
#h1{grid-column:1/3;grid-row:2}
#sub{grid-column:1/3;grid-row:3}
header .corner{grid-column:3;grid-row:1/span 3;align-self:start;display:flex;flex-direction:column;align-items:stretch;gap:8px;width:max-content}
header .corner .lsw{color:var(--muted)}
header .corner .sym{display:block;width:0;min-width:100%;height:auto}   /* as wide as the language switch, never wider */
@media (max-width:700px){header .hr{grid-column:1/-1;grid-row:4;margin-top:6px}}
.eb{color:var(--blue)}
h1{font-weight:200;font-size:var(--fs-h1);line-height:1.05;letter-spacing:-.03em;margin:2px 0 0;text-wrap:balance}
.sub{color:var(--muted);margin:2px 0 0;line-height:1.4;font-size:var(--fs-body)}
.hr{display:flex;gap:12px;align-items:center;flex-wrap:wrap;color:var(--muted)}
.link{background:none;border:0;border-bottom:1px solid var(--soft);padding:2px 0;cursor:pointer;color:var(--ink);text-decoration:none}
.link:hover{border-color:var(--ink)}
.lsw{display:inline-flex;border:1px solid currentColor;border-radius:999px;overflow:hidden}
.lsw button{background:transparent;border:0;padding:4px 9px;cursor:pointer;font:500 11px var(--mono);letter-spacing:.12em}
.lsw button[aria-pressed="true"]{background:var(--blue);color:var(--paper)}
.embed header{display:none}
/* pieces */
.card{background:var(--card);border:1px solid var(--line);border-radius:6px;box-shadow:var(--shadow);padding:var(--pad)}
.btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:transparent;border-radius:4px;padding:7px 10px;cursor:pointer;font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--ink);align-self:flex-start}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--off);flex:none}
.dot.red{background:var(--red)}.dot.amber{background:var(--amber)}.dot.green{background:var(--green)}
.tag{display:inline-block;padding:2px 6px;border:1px solid currentColor;border-radius:3px}
.tag.me{color:var(--coral)}
.cta{background:var(--coral);color:#0F1214;border:0;border-radius:4px;padding:10px 14px;cursor:pointer;font:500 11px var(--mono);letter-spacing:.14em}
.cta:disabled{background:var(--soft);color:var(--muted);cursor:not-allowed}