/* Constitutii 1866-1991: legal ledger — numbered paragraphs, margin rules. */
:root{
  --paper:#f4efe2; --paper-2:#ece4d1; --ink:#23201a; --muted:#6b6353;
  --rule:#d8cdae; --accent:#20344d; --keep:#1d3fbf; --keep-bg:#dfe6fb;
  --break:#a33327; --break-bg:#f7e3de; --gold:#c8a24a;
  --card:#faf6ea; --focus:#0f5fd0; --topbar-h:3rem;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --body:"Source Serif 4",Georgia,"Times New Roman",serif;
}
:root[data-theme="dark"]{
  --paper:#16130e; --paper-2:#1e1a13; --ink:#ece4d1; --muted:#b3a98f;
  --rule:#3d3627; --accent:#9db4dd; --keep:#9db9ff; --keep-bg:#232c4d;
  --break:#f0a295; --break-bg:#40201a; --gold:#c8a24a;
  --card:#1e1a13; --focus:#8ab4ff;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]):not([data-theme="dark"]){
    --paper:#16130e; --paper-2:#1e1a13; --ink:#ece4d1; --muted:#b3a98f;
    --rule:#3d3627; --accent:#9db4dd; --keep:#9db9ff; --keep-bg:#232c4d;
    --break:#f0a295; --break-bg:#40201a; --gold:#c8a24a;
    --card:#1e1a13; --focus:#8ab4ff;
  }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:1.075rem; line-height:1.65;
}
.wrap{max-width:44rem; margin:0 auto; padding:0 1.25rem}
section{scroll-margin-top:calc(var(--topbar-h) + .75rem)}
h1,h2,h3,h4{font-family:var(--serif); line-height:1.18; text-wrap:balance}
h2{font-size:1.65rem; margin:0 0 .75rem}
h3{font-size:1.25rem}
a{color:var(--accent)}
:focus-visible{outline:.16rem solid var(--focus); outline-offset:.14rem; border-radius:.2rem}
.skip{position:absolute; left:-999px; top:0; background:var(--ink); color:var(--paper); padding:.6rem 1rem; z-index:60}
.skip:focus{left:.5rem; top:.5rem}

/* ---------------------------------------------------------- top bar */
.topbar{
  position:sticky; top:0; z-index:50; min-height:var(--topbar-h);
  display:flex; align-items:center; gap:.8rem; padding:0 .9rem;
  background:var(--paper); border-bottom:.14rem solid var(--rule);
  white-space:nowrap;
}
.topbar .home{font-family:var(--serif); font-weight:700; text-decoration:none; color:var(--ink); flex:none}
.topnav{display:flex; gap:.9rem; overflow-x:auto; scrollbar-width:none; flex:1 1 auto; min-width:0}
.topnav::-webkit-scrollbar{display:none}
.topnav a{text-decoration:none; color:var(--ink); font-size:.95rem; flex:none}
@media (max-width:44rem){
  .topbar{gap:.6rem; padding:0 .6rem}
  .topnav{gap:.7rem;
    -webkit-mask-image:linear-gradient(to right,#000 0 calc(100% - 1.6rem),transparent 100%);
    mask-image:linear-gradient(to right,#000 0 calc(100% - 1.6rem),transparent 100%)}
  .topnav a{font-size:.85rem}
  .langmenu summary .lang-full{display:none}
  .langmenu summary .lang-short{display:inline}
}
.topnav a[aria-current]{text-decoration:underline; text-underline-offset:.25rem}
.topbar .spacer{flex:none}
.langmenu{position:relative; flex:none}
.langmenu summary{cursor:pointer; list-style:none; font-size:.9rem; display:flex; align-items:center; gap:.25rem; min-height:2.75rem}
.langmenu .lang-short{display:none}
.langmenu summary::-webkit-details-marker{display:none}
.langmenu ul{position:absolute; right:0; top:calc(100% + .2rem); margin:0; padding:.3rem 0; list-style:none; background:var(--card); border:1px solid var(--rule); border-radius:.5rem; min-width:8rem}
.langmenu li a{display:block; padding:.55rem .9rem; text-decoration:none; color:var(--ink)}
.icon-btn{
  flex:none; width:2.75rem; height:2.75rem; border-radius:50%;
  border:1px solid var(--rule); background:transparent; color:var(--ink);
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
}
.icon-btn svg[hidden]{display:none}
.icon-btn svg{display:block}

/* ---------------------------------------------------------- rail */
.rail{
  position:fixed; right:.7rem; top:50%; transform:translateY(-50%); z-index:40;
  display:flex; flex-direction:column; gap:.55rem;
}
.rail-dot{display:flex; align-items:center; justify-content:flex-end; gap:.4rem; text-decoration:none; min-height:2rem}
.rail-label{font-size:.72rem; color:var(--muted)}
.rail .dot{width:.55rem; height:.55rem; border-radius:50%; border:.12rem solid var(--muted); flex:none}
.rail-dot.active .dot{background:var(--gold); border-color:var(--gold)}
@media (max-width:70rem){.rail{display:none}}

/* ---------------------------------------------------------- hero */
.hero{max-width:60rem; margin:0 auto; padding:2.2rem 1.25rem 1rem}
.kicker{font-size:.85rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:0 0 .5rem}
.hero h1{font-size:clamp(2rem,5vw,3.1rem); margin:0 0 .7rem; font-weight:600}
.deck{font-size:1.25rem; line-height:1.5; max-width:38rem; margin:0 0 .6rem}
.byline{color:var(--muted); font-size:.95rem; margin:0 0 1.2rem}
.ledger-strip{border:1px solid var(--rule); border-radius:.4rem; background:var(--card); padding:1rem 1.2rem; margin:0 0 1.2rem}
.ledger-years{display:flex; justify-content:space-between; font-family:var(--serif); font-size:clamp(1.2rem,4vw,2rem); font-weight:600}
.tricolour{height:.3rem; margin-top:.7rem; border-radius:.15rem;
  background:linear-gradient(to right,#1a3f9e 0 33.3%,#c8a24a 33.3% 66.6%,#a33327 66.6% 100%)}
.hero-side{max-width:44rem}
.hero-side p{margin:0 0 .8rem}

/* ---------------------------------------------------------- share */
.share{border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); padding:.9rem 0; margin:1.2rem 0 0; max-width:44rem; scroll-margin-top:4.75rem}
.share-label{font-weight:700; margin:0 0 .6rem}
.share-row{display:flex; flex-wrap:wrap; gap:.6rem}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  min-height:3rem; min-width:3rem; padding:.55rem 1.1rem; border-radius:.5rem;
  border:.1rem solid var(--accent); background:var(--accent); color:#fff;
  font:inherit; font-size:1rem; text-decoration:none; cursor:pointer;
}
:root[data-theme="dark"] .btn{color:#141310}
.btn.ghost{background:transparent; color:var(--accent)}
:root[data-theme="dark"] .btn.ghost{color:var(--accent); border-color:var(--accent)}
.share-note{margin:.5rem 0 0; min-height:1.4em; color:var(--muted)}

/* ---------------------------------------------------------- sections */
.timeline,.comp,.threads,.method,.sources-sec{padding:2rem 0}
.section-intro{max-width:44rem}
.section-intro p{margin:0 0 .8rem}
.plink{font-size:.8em; text-decoration:none; opacity:.55; min-width:2.75rem; min-height:2.75rem; display:inline-flex; align-items:center; justify-content:center}
.plink:hover{opacity:1}

/* ---------------------------------------------------------- timeline */
.tcards{list-style:none; margin:1.2rem 0 0; padding:0; display:grid; gap:.9rem; grid-template-columns:1fr}
@media (min-width:56rem){.tcards{grid-template-columns:1fr 1fr}}
.tcard{
  border:1px solid var(--rule); border-left:.35rem solid var(--gold);
  border-radius:.4rem; background:var(--card); padding:.9rem 1rem;
  counter-increment:ledger;
}
.tyear{
  font-family:var(--serif); font-size:1.7rem; font-weight:600; color:var(--ink);
  background:none; border:0; padding:.3rem .2rem; cursor:pointer; text-decoration:underline;
  text-decoration-color:var(--gold); text-underline-offset:.25rem; min-height:2.75rem;
}
.tname{font-weight:700; margin:.2rem 0 .3rem}
.tdesc{margin:0; color:var(--ink); font-size:1rem}
.out-scope{border-left:.3rem solid var(--break); padding:.4rem 0 .4rem .9rem; color:var(--muted); max-width:44rem}

/* ---------------------------------------------------------- comparator */
.picker fieldset{border:1px solid var(--rule); border-radius:.5rem; margin:0 0 .9rem; padding:.7rem .9rem 1rem}
.picker legend{font-family:var(--serif); font-weight:700; padding:0 .5rem}
.opts{display:grid; gap:.5rem}
.opts.themes{grid-template-columns:1fr}
@media (min-width:44rem){.opts.themes{grid-template-columns:repeat(3,1fr)}}
.opts.consts{grid-template-columns:repeat(2,1fr)}
@media (min-width:44rem){.opts.consts{grid-template-columns:repeat(3,1fr)}}
.opts label{display:block; cursor:pointer}
.opts input{position:absolute; opacity:0; pointer-events:none}
.opts .opt{
  display:block; border:1px solid var(--rule); border-radius:.45rem; background:var(--card);
  padding:.6rem .8rem; min-height:2.75rem;
}
.opts .opt strong{display:block; font-family:var(--serif); font-size:1.05rem}
.opts .opt small{display:block; color:var(--muted); font-size:.85rem; line-height:1.4}
.opts input:checked + .opt{border-color:var(--accent); box-shadow:inset 0 0 0 .1rem var(--accent)}
.opts input:focus-visible + .opt{outline:.16rem solid var(--focus); outline-offset:.14rem}
.picker-actions{margin:.2rem 0 0}
.legend{max-width:44rem}
mark{padding:.05em .15em; border-radius:.2em}
mark.keep{background:var(--keep-bg); color:inherit; border-bottom:.14em solid var(--keep)}
mark.break{background:var(--break-bg); color:inherit; border-bottom:.14em dashed var(--break)}
.result-wrap{margin-top:1.2rem}
.result-title{margin:0 0 .6rem}
.same-note{color:var(--muted)}
.verdict{border:1px solid var(--rule); border-left:.35rem solid var(--gold); background:var(--card); border-radius:.4rem; padding:.8rem 1rem; max-width:60rem}
.verdict-tag{font-family:var(--serif); font-weight:700; display:block; margin-bottom:.2rem}
.verdict-continuitate{border-left-color:var(--keep)}
.verdict-ruptura{border-left-color:var(--break)}
.cols{display:grid; gap:1rem; margin-top:1rem; grid-template-columns:1fr}
@media (min-width:56rem){.cols{grid-template-columns:1fr 1fr}}
.ledger{
  border:1px solid var(--rule); border-radius:.4rem; background:var(--card);
  padding:1rem 1.1rem; position:relative;
}
.ledger::before{
  content:""; position:absolute; top:0; bottom:0; left:2.2rem; width:1px; background:var(--rule);
}
.ledger h4{font-size:1.15rem; margin:0 0 .5rem; padding-left:2.8rem}
.ledger .art-ref{font-size:.85rem; color:var(--muted); margin:0 0 .5rem; padding-left:2.8rem}
.ledger blockquote{margin:0 0 .7rem; padding:0 0 0 2.8rem; font-size:1.02rem}
.ledger blockquote p{margin:0 0 .5rem}
.ledger .formula{font-weight:700; padding-left:2.8rem; margin:.4rem 0}
.ledger .gloss{padding-left:2.8rem; margin:.3rem 0 0; font-size:.98rem}
.gloss-tag{font-weight:700}
.no-js-pairs .pairs{margin-top:1.4rem}
.no-js-pairs details{border:1px solid var(--rule); border-radius:.4rem; background:var(--card); margin-bottom:.5rem; padding:.5rem .9rem}
.no-js-pairs summary{cursor:pointer; font-weight:700; min-height:2.75rem; display:flex; align-items:center}
.js .no-js-pairs{display:none}
.js-only[hidden]{display:none}

/* ---------------------------------------------------------- threads */
.thread-list{list-style:none; margin:1.2rem 0 0; padding:0; display:grid; gap:.9rem; counter-reset:fir}
@media (min-width:56rem){.thread-list{grid-template-columns:1fr 1fr}}
.thread-list li{border:1px solid var(--rule); border-radius:.4rem; background:var(--card); padding:.9rem 1rem}
.thread-list li::before{counter-increment:fir; content:"§" counter(fir); font-family:var(--serif); color:var(--gold); font-weight:700}
.thread-list h3{margin:.2rem 0 .4rem; font-size:1.15rem}
.thread-list p{margin:0; font-size:.98rem}

/* ---------------------------------------------------------- method, sources, footer */
.method .wrap p{max-width:44rem}
.sources{list-style:none; margin:1rem 0 0; padding:0; display:grid; gap:.7rem}
.sources li{border-top:1px solid var(--rule); padding-top:.6rem; font-size:.98rem; overflow-wrap:anywhere}
.fine{color:var(--muted); font-size:.95rem; max-width:44rem}
footer{border-top:.14rem solid var(--rule); margin-top:2rem; padding:1.4rem 1.25rem 2.4rem; text-align:center}
footer p{margin:.3rem 0; color:var(--muted); font-size:.95rem}
.totop{font-family:var(--serif)}
.missing{padding:3rem 0}
.ecode{font-family:var(--serif); font-size:3rem; color:var(--gold); margin:0}
.langlist{list-style:none; padding:0; display:flex; gap:1rem; justify-content:center}

@media print{
  .topbar,.rail,.picker,.share,.js-only,.totop{display:none}
  .no-js-pairs{display:block}
  body{font-size:11pt}
}