/* Sistema Editorial Stackling SE-1 · componentes compartilhados do protótipo
   Tokens: ../02-design-system/tokens.json (espelhados aqui para o protótipo abrir sozinho). */
@font-face{font-family:"Archivo";src:url(assets/Archivo-100_900.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:block}
@font-face{font-family:"JetBrains Mono";src:url(assets/JetBrainsMono-400.woff2) format("woff2");font-display:swap}
:root{
  --paper:#ffffff;--paper-2:#eceef2;--ink:#0e1430;--ink-2:#3a4058;--mute:#8a90a2;
  --night:#070b1a;--night-2:#0d1530;--field:#062996;--on-dark:#eef0f6;--mute-dark:#8b93a3;
  --accent:#003fdd;--accent-deep:#062996;--accent-light:#4c82ff;--select:#e3eafc;--select-dark:rgba(0,63,221,.42);--rule:#d9dce5;
  --sans:"Archivo",system-ui,sans-serif;--mono:"JetBrains Mono",ui-monospace,monospace;
  --ease:cubic-bezier(.2,.7,.1,1);
  --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:2px}
.dark :focus-visible{outline-color:var(--accent-light)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- tipografia ---------- */
.t-display{font-weight:900;font-stretch:66%;text-transform:uppercase;line-height:.88;letter-spacing:-.005em;margin:0}
.t-display-wide{font-weight:900;font-stretch:118%;text-transform:uppercase;line-height:.9;letter-spacing:-.02em;margin:0}
.t-h1{font-weight:760;line-height:1.03;letter-spacing:-.028em;margin:0}
.t-h2{font-weight:740;line-height:1.05;letter-spacing:-.024em;margin:0}
.t-lead{font-weight:420;line-height:1.22;letter-spacing:-.012em;margin:0}
.t-body{font-weight:400;line-height:1.3;letter-spacing:-.006em;margin:0}
.t-body b,.t-body strong,.t-lead b{font-weight:620}
.lead-in{color:var(--mute);font-weight:420}
.dark .lead-in{color:var(--mute-dark)}
.acc{color:var(--accent)}
.dark .acc{color:var(--accent-light)}

/* ---------- C-05 seleção de texto (assinatura) ---------- */
.sel{white-space:nowrap;background:var(--select);-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:.02em .08em;margin:0 -.04em}
.dark .sel{background:var(--select-dark)}
.sel::before,.sel::after{content:"";display:inline-block;width:.26em;height:1.18em;vertical-align:-.24em;position:relative;
  background:linear-gradient(var(--accent),var(--accent)) center/.075em 100% no-repeat}
.sel::before{margin:0 -.13em 0 -.13em;background:radial-gradient(circle at 50% .1em,var(--accent) .1em,transparent .108em),linear-gradient(var(--accent),var(--accent)) center/.075em 100% no-repeat}
.sel::after{margin:0 -.13em 0 -.13em;background:radial-gradient(circle at 50% calc(100% - .1em),var(--accent) .1em,transparent .108em),linear-gradient(var(--accent),var(--accent)) center/.075em 100% no-repeat}
.dark .sel::before{background:radial-gradient(circle at 50% .1em,var(--accent-light) .1em,transparent .108em),linear-gradient(var(--accent-light),var(--accent-light)) center/.075em 100% no-repeat}
.dark .sel::after{background:radial-gradient(circle at 50% calc(100% - .1em),var(--accent-light) .1em,transparent .108em),linear-gradient(var(--accent-light),var(--accent-light)) center/.075em 100% no-repeat}
.sel.acc-text{color:var(--accent)}
.sel.multi{white-space:normal}

/* ---------- C-06 bloco de destaque por linha ---------- */
.blk{background:linear-gradient(var(--accent),var(--accent)) 0 54%/100% 74% no-repeat;color:var(--on-dark);-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .08em;margin:0}

/* ---------- C-07 anotação à mão ---------- */
.mark{position:relative;white-space:nowrap}
.mark>svg{position:absolute;overflow:visible;pointer-events:none;fill:none;stroke:var(--accent);stroke-linecap:round;stroke-linejoin:round}
.dark .mark>svg{stroke:var(--accent-light)}
.mark.circle>svg{left:-12%;top:-22%;width:124%;height:150%;transform:rotate(-4deg)}
.mark.under>svg{left:-2%;bottom:-.26em;width:104%;height:.32em}
.mark svg path{stroke-dasharray:none;stroke-dashoffset:0}
.draw .mark svg path{stroke-dasharray:1;stroke-dashoffset:1;animation:draw .6s var(--ease) forwards}
.draw .mark svg path+path{animation-delay:.22s}
/* termina com dasharray none: com pathLength=1 + non-scaling-stroke o tracejado fragmenta o traço parado */
@keyframes draw{0%{stroke-dasharray:1;stroke-dashoffset:1}99%{stroke-dasharray:1;stroke-dashoffset:0}100%{stroke-dasharray:none;stroke-dashoffset:0}}
.arrow{position:absolute;fill:none;stroke:var(--accent);stroke-linecap:round;stroke-linejoin:round;overflow:visible;pointer-events:none}
.dark .arrow{stroke:var(--accent-light)}

/* ---------- C-10 pílula ---------- */
.pill{display:inline-flex;align-items:center;gap:.6em;border-radius:999px;font-weight:560;white-space:nowrap}
.pill .dot{width:.55em;height:.55em;border-radius:50%;background:var(--accent)}

/* ---------- C-11 lista ✳ ---------- */
.star-list{list-style:none;margin:0;padding:0}
.star-list li{padding-left:1.25em}
.star-list li::before{content:"✳";display:inline-block;width:1.25em;margin-left:-1.25em;color:var(--mute);font-weight:300}

/* ---------- C-13 grão ---------- */
.grain::after{content:"";position:absolute;inset:0;background:var(--grain);mix-blend-mode:soft-light;opacity:.09;pointer-events:none;z-index:30}

/* ---------- botões web ---------- */
.btn{display:inline-flex;align-items:center;gap:.6em;font:620 16px/1 var(--sans);padding:16px 22px;border-radius:999px;border:0;cursor:pointer;text-decoration:none;transition:transform .2s var(--ease),background .2s}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--accent);color:#fff}
.btn-ghost{background:transparent;color:inherit;box-shadow:inset 0 0 0 1.5px currentColor}
.link-u{font:620 16px var(--sans);text-decoration:none;border-bottom:1.5px solid currentColor;padding-bottom:2px}

/* toast (ações desativadas) */
#toast{visibility:hidden;position:fixed;left:50%;bottom:24px;transform:translate(-50%,140%);background:var(--ink);color:var(--on-dark);font:500 15px/1.35 var(--sans);padding:14px 18px;border-radius:14px;max-width:min(92vw,520px);z-index:99;transition:transform .35s var(--ease);box-shadow:0 10px 30px rgba(7,11,26,.25)}
#toast.on{visibility:visible;transform:translate(-50%,0)}

/* overlay de grade/regras (modo avaliação) */
.guides-on .guide{display:block}
.guide{display:none;position:absolute;pointer-events:none;z-index:40}
.rule-tag{display:none;position:absolute;z-index:41;font:600 15px var(--mono);background:#ffea00;color:#111;padding:4px 7px;border-radius:4px;white-space:nowrap}
.guides-on .rule-tag{display:block}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.draw .mark svg path{stroke-dasharray:none;stroke-dashoffset:0}}