/* Shared shell only. Colours belong to the author's six semantic tokens. */
:root{--ui:"Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;--bar-height:calc(3.5rem + var(--browser-safe-top,env(safe-area-inset-top)))}
html{scroll-padding-top:calc(var(--bar-height) + 1rem)}
section[id],[data-step][id]{scroll-margin-top:calc(var(--bar-height) + 1rem)}
.skip-link{position:fixed;top:.5rem;left:.5rem;z-index:1000;padding:.75rem;background:var(--bg);color:var(--ink);transform:translateY(-200%)}
.skip-link:focus{transform:none}
.topbar{position:sticky;top:0;z-index:100;display:flex;align-items:center;flex-wrap:nowrap;gap:.8rem;box-sizing:border-box;height:var(--bar-height);padding:var(--browser-safe-top,env(safe-area-inset-top)) max(1rem,env(safe-area-inset-right)) 0 max(1rem,env(safe-area-inset-left));border-bottom:1px solid var(--line);background:var(--bg);color:var(--ink);font:500 .92rem/1 var(--ui)}
.topbar .home{font-family:var(--ui);font-weight:600;text-decoration:none;white-space:nowrap;color:var(--ink)}
.topnav{display:flex;align-items:center;gap:1rem;min-width:0;overflow-x:auto;white-space:nowrap;scrollbar-width:none;height:100%}
.topnav::-webkit-scrollbar{display:none}
.topnav a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink-2);text-decoration:none}
.topnav a:hover,.topnav a[aria-current="true"]{color:var(--accent)}
.topbar .spacer{flex:1}
.topbar .editions{display:flex;gap:.15rem;flex:none}
.topbar .chip{display:grid;place-items:center;min-height:44px;min-width:2rem;color:var(--ink-2);text-decoration:none;font-weight:600}
.topbar .chip[aria-current="page"]{color:var(--ink);text-decoration:underline;text-underline-offset:.25em}
.topbar .icon-btn{display:grid;place-items:center;flex:none;box-sizing:border-box;width:44px;height:44px;padding:0;border:1px solid var(--line);border-radius:50%;background:var(--surface);color:var(--ink);cursor:pointer}
.topbar .icon-btn svg{display:block}
.topbar .icon-btn svg[hidden]{display:none}
.topbar a:focus-visible,.topbar button:focus-visible,.share-row a:focus-visible,.share-row button:focus-visible,.site-footer a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.site-footer{display:flex;flex-wrap:wrap;gap:.6rem 1.3rem;max-width:70rem;margin:4rem auto 0;padding:1.5rem max(1.25rem,env(safe-area-inset-right)) max(2rem,env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--bg);color:var(--ink-2);font:.9rem/1.6 var(--ui)}
.site-footer a{color:var(--ink);text-underline-offset:.2em}
/* cutremurul-din-1977 share_block CSS, mapped onto this contract's tokens. */
.share{padding:1.2rem 0 0;max-width:100%;scroll-margin-top:calc(var(--bar-height) + 1rem);font-family:var(--ui)}
.share-row{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center}
.share-row .lab{font-size:.95rem;color:var(--ink-2);margin-right:.2rem}
.share-row a,.share-row button{display:inline-grid;place-items:center;flex:none;width:2.75rem;height:2.75rem;padding:0;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--ink-2);text-decoration:none;cursor:pointer;transition:color .15s,border-color .15s,background .15s}
.share-row a:hover,.share-row button:hover,.share-row a:focus-visible,.share-row button:focus-visible{color:var(--accent);border-color:var(--accent);background:var(--surface)}
.share-row [hidden]{display:none}
.share-status{font-size:.95rem;color:var(--ink-2);min-height:1.2em;margin:.4rem 0 0}
.share-field{box-sizing:border-box;width:100%;margin-top:.5rem;padding:.6rem;border:1px solid var(--line);border-radius:.5rem;background:var(--surface);color:var(--ink);font:inherit;font-size:.9rem}
.rail{background:var(--surface);border:1px solid var(--line);border-radius:999px;font-family:var(--ui)}
[hidden]{display:none!important}
@media(max-width:480px){.topbar{gap:.3rem;padding-left:.65rem;padding-right:.65rem}.topbar .home{font-size:.78rem}.topnav{gap:.7rem}.share-row .lab{flex-basis:100%}}
@media(prefers-reduced-motion:reduce){.share-row a,.share-row button{transition:none}}
@media print{.topbar,.rail,.share,.skip-link,#to-top{display:none!important}}

/* reading-rail v2: dots in the gutter beside the column, labels never over the text */
.rail{display:none}
@media(min-width:1100px){
.rail{--col:min(70rem,calc(100vw - 4rem));--gut:1.25rem;display:flex;flex-direction:column;position:fixed;top:50%;left:calc(50% + var(--col)/2 + var(--gut));transform:translateY(-50%);z-index:40;margin:0;padding:.4rem 0;max-height:calc(100vh - 7rem)}
.rail::before{content:"";position:absolute;left:calc(.875rem - .5px);top:1.1rem;bottom:1.1rem;width:1px;background:var(--line)}
.rail-dot{position:relative;display:flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;text-decoration:none;border-radius:50%}
.rail-dot .dot{width:7px;height:7px;border-radius:50%;background:var(--ink-2);box-shadow:0 0 0 3px var(--bg);transition:transform .2s,background .2s,box-shadow .2s;flex:none}
.rail-dot:hover .dot,.rail-dot:focus-visible .dot{background:var(--accent);transform:scale(1.25)}
.rail-dot[aria-current=true] .dot{background:var(--accent);transform:scale(1.45);box-shadow:0 0 0 3px var(--bg),0 0 0 4.5px color-mix(in srgb,var(--accent) 38%,transparent)}
.rail-dot:focus-visible{outline:2px solid var(--accent);outline-offset:-1px}
/* narrow gutter: a label is a hover/focus tooltip only, never left on over the text */
.rail-label{position:absolute;right:calc(100% + .3rem);top:50%;transform:translate(6px,-50%);padding:.22rem .65rem;border:1px solid var(--line);border-radius:.5rem;background:var(--bg);color:var(--ink);box-shadow:0 6px 20px color-mix(in srgb,var(--ink) 14%,transparent);font-size:.82rem;font-weight:600;line-height:1.3;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s,transform .15s}
.rail-dot:hover .rail-label,.rail-dot:focus-visible .rail-label{opacity:1;transform:translate(0,-50%)}
}
/* wide gutter: labels sit outside the column and still appear only on hover or focus */
@media(min-width:1400px){
.rail-label{right:auto;left:calc(100% + .15rem);max-width:calc(50vw - var(--col)/2 - var(--gut) - 3.25rem);overflow:hidden;text-overflow:ellipsis;padding:.1rem .2rem;border-color:transparent;background:transparent;box-shadow:none;color:var(--ink-2);transform:translate(-4px,-50%)}
.rail-dot:hover .rail-label,.rail-dot:focus-visible .rail-label{color:var(--accent)}
}
@media(prefers-reduced-motion:reduce){.rail .dot,.rail-label{transition:none}}
@media(forced-colors:active){.rail::before{background:CanvasText}.rail-dot .dot{background:CanvasText;box-shadow:none}.rail-dot[aria-current=true] .dot{background:Highlight}.rail-label{border-color:CanvasText}}