@import url("https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@300;400;500;600;700&family=Source+Serif+4:opsz,wght@8..60,500;8..60,600&display=swap");

/* Legal Toolbox — own identity: cool tint + bordered card (VT uses lilac, no card here). */
:root{
  --vlt-page:#EAF0EF;        /* cool green-grey page ground (vs VT lilac) */
  --paper:#F3F5F8; --panel:#FFFFFF; --ink:#1B212C; --muted:#4D5566; --ink-faint:#838DA0;
  --border:#DDE2E9; --border-soft:#EDF0F4;
  --figure:"Libre Franklin","Helvetica Neue",Arial,sans-serif;
  --accent:#1F5F5B; --accent-bg:#E8F1F0;
  --classify:#2E6E9E; --classify-bg:#E7F0F5;
  --history:#9C6B2E;
}
.vlt-app{
  /* Full-bleed breakout (mirrors the Variation Toolbox): escape the theme's
     narrow content column, centre on the true viewport, capped at 1336px
     (= the 1280px page-shell content plus the card's own 28px+28px padding) so
     the card matches the Variation Toolbox width instead of ballooning to 80vw.
     margin-left uses max() (not transform) to stay centred at any width. */
  position:relative; left:50%; width:80vw; max-width:1336px; margin-left:max(-40vw,-668px);
  margin-top:24px; margin-bottom:24px;
  color:var(--ink);
  font-family:"Libre Franklin",-apple-system,sans-serif; font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
  color-scheme:light;
}
.vlt-app .page-shell{
  max-width:1336px; margin:0 auto; background:var(--paper);
  border:1px solid var(--border); border-radius:16px;
  box-shadow:0 1px 2px rgba(27,33,44,.04), 0 8px 30px rgba(27,33,44,.05);
  padding:0 28px 40px;
}
/* the chapter badge now holds an article range ("Art. 5–27") — keep it on one line */
.vlt-app .chap__n{ white-space:nowrap; }

/* ==== Variation-Toolbox frame tokens (ported + scoped from legal-toolbox-preview.html) ==== */
.vlt-app *{box-sizing:border-box}
.vlt-app .mono{font-family:var(--figure); font-variant-numeric:tabular-nums;}

/* ---- masthead ---- */
.vlt-app header.app-header{padding:26px 0 18px; border-bottom:1px solid var(--border); position:relative;}
.vlt-app .app-header__actions{position:absolute; top:22px; right:0; display:flex; gap:8px;}
.vlt-app .app-header__home,.vlt-app .app-header__guide{
  display:inline-flex; align-items:center; gap:6px; padding:7px 12px; font:inherit; font-size:13px;
  color:var(--muted); background:var(--panel); border:1px solid var(--border); border-radius:8px; cursor:pointer;
}
.vlt-app .app-header__home:hover,.vlt-app .app-header__guide:hover{color:var(--ink); border-color:var(--ink);}
.vlt-app .app-header__history{
  display:inline-flex; align-items:center; gap:6px; padding:7px 12px; font:inherit; font-size:13px;
  color:var(--history); background:var(--panel); cursor:pointer; border-radius:8px;
  border:1px solid color-mix(in srgb,var(--history) 40%,var(--border));
}
.vlt-app .app-header__history:hover{border-color:var(--history);}
.vlt-app .app-header__vt{
  display:inline-flex; align-items:center; gap:6px; padding:7px 12px; font:inherit; font-size:13px; text-decoration:none;
  color:var(--classify); background:var(--panel); cursor:pointer; border-radius:8px;
  border:1px solid color-mix(in srgb,var(--classify) 40%,var(--border));
}
.vlt-app .app-header__vt:hover{border-color:var(--classify);}
.vlt-app .app-header h1{font-family:"Source Serif 4",serif; font-weight:600; font-size:27px; margin:0 0 6px; text-wrap:balance;}
.vlt-app .app-header__copyright{margin:0 0 12px; font-size:12px; color:var(--muted);}
.vlt-app .app-header__copyright a{color:var(--muted);}
.vlt-app .app-header p.lede{margin:0; color:var(--muted); font-size:14px; line-height:1.55;}
.vlt-app .app-header p.lede strong{color:var(--ink);}

/* ---- top tool-bar (nav pills) ---- */
.vlt-app .tool-bar{display:flex; gap:8px; margin:16px 0 0;}
.vlt-app .tool-bar__btn{
  --tc:#888; --tbg:#F2F2F2; flex:0 1 240px; min-width:150px; display:flex; flex-direction:column;
  align-items:flex-start; gap:2px; text-align:left; padding:9px 13px; cursor:pointer; background:var(--tbg);
  border:1px solid color-mix(in srgb,var(--tc) 26%,var(--tbg)); border-radius:10px; font-family:inherit;
  transition:filter .15s,border-color .15s,box-shadow .15s;
}
.vlt-app .tool-bar__btn:hover{filter:brightness(1.035);}
.vlt-app .tool-bar__btn[aria-current="true"]{border-color:var(--tc); box-shadow:0 0 0 1px var(--tc);}
.vlt-app .tool-bar__name{font-size:12.5px; font-weight:600; color:var(--tc-text,var(--tc)); line-height:1.25;}
.vlt-app .tool-bar__btn[aria-current="true"] .tool-bar__name{font-weight:700;}
.vlt-app .tool-bar__meta{font-family:var(--figure); font-size:9.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-faint);}

/* ---- two-column layout ---- */
.vlt-app .layout{display:grid; grid-template-columns:288px 1fr; column-gap:28px; align-items:start;}
.vlt-app .layout.is-collapsed{grid-template-columns:1fr;}
.vlt-app .layout.is-collapsed .browse-col{display:none;}
.vlt-app .browse-col{margin:24px 0; border:1px solid var(--border); border-radius:10px; background:var(--panel); overflow:hidden;}
.vlt-app .browse-head{display:flex; align-items:center; justify-content:space-between; padding:14px 14px 0;}
.vlt-app .browse-head span{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);}
.vlt-app .browse-head button{font:inherit; font-size:12px; color:var(--muted); background:none; border:1px solid var(--border); border-radius:7px; padding:3px 9px; cursor:pointer;}
.vlt-app .browse-tree{padding:14px 12px 16px; display:flex; flex-direction:column; gap:6px;}
.vlt-app .search{width:100%; padding:10px 12px; font:inherit; font-size:13px; color:var(--ink); background:var(--panel); border:1px solid var(--border); border-radius:9px; margin-bottom:4px;}
.vlt-app .search::placeholder{color:var(--ink-faint);}
.vlt-app .searchhint{font-size:11px; color:var(--ink-faint); padding:0 2px 6px;}

.vlt-app .chap{width:100%; text-align:left; font:inherit; background:#F2F4F7; border:1.5px solid var(--border-soft); border-radius:9px; padding:9px 12px; cursor:pointer; color:var(--ink); display:flex; align-items:center; gap:10px;}
.vlt-app .chap:hover{border-color:var(--border);}
.vlt-app .chap__rom{flex-shrink:0; font-family:var(--figure); font-size:11px; font-weight:700; color:var(--muted); min-width:34px;}
.vlt-app .chap__t{flex:1; font-size:12.5px; line-height:1.3;}
.vlt-app .chap__n{flex-shrink:0; font-family:var(--figure); font-variant-numeric:tabular-nums; font-size:10.5px; color:var(--ink-faint); border:1px solid var(--border); border-radius:999px; padding:1px 7px;}
.vlt-app .chap--active{border-color:var(--ac,var(--accent)); background:var(--ac-bg,var(--accent-bg));}
.vlt-app .chap--active .chap__rom{color:var(--ac,var(--accent));}
.vlt-app .chap--active .chap__t{font-weight:600; color:var(--ac,var(--accent));}
.vlt-app .chap--active .chap__n{color:var(--ac,var(--accent)); border-color:color-mix(in srgb,var(--ac,var(--accent)) 35%,transparent);}

/* ---- detail column ---- */
.vlt-app .detail{padding:24px 0;}
.vlt-app .doc-title{font-family:"Source Serif 4",serif; font-weight:600; font-size:26px; margin:0 0 5px; color:var(--accent);}
.vlt-app .doc-eyebrow{font-family:var(--figure); font-size:12px; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); margin:0 0 8px;}
.vlt-app .doc-subject{margin:0; font-size:14.5px; color:var(--ink); line-height:1.5;}
.vlt-app .doc-repeal{margin:7px 0 0; font-size:12.5px; color:var(--muted);}
.vlt-app .doc-repeal b{color:var(--history);}

.vlt-app .detail-bar{display:flex; align-items:center; gap:12px; margin:18px 0 12px; flex-wrap:wrap;}
.vlt-app .filter{flex:1 1 300px; padding:11px 13px; font:inherit; font-size:13px; background:var(--panel); border:1px solid var(--border); border-radius:9px;}
.vlt-app .filter::placeholder{color:var(--ink-faint);}
.vlt-app .lang{display:inline-flex; border:1px solid var(--border); border-radius:9px; overflow:hidden; background:var(--panel);}
.vlt-app .lang button{font:inherit; font-size:12.5px; font-weight:600; padding:8px 14px; background:var(--panel); color:var(--muted); border:0; border-left:1px solid var(--border); cursor:pointer;}
.vlt-app .lang button:first-child{border-left:0;}
.vlt-app .lang button[aria-pressed="true"]{background:var(--accent-bg); color:var(--accent);}

.vlt-app .chap-head{display:flex; align-items:baseline; gap:10px; margin:16px 0 12px; padding-bottom:10px; border-bottom:1px solid var(--border);}
.vlt-app .chap-head h3{font-family:"Source Serif 4",serif; font-weight:600; font-size:17px; color:var(--ink); margin:0;}
.vlt-app .chap-head .cnt{font-family:var(--figure); font-size:12px; color:var(--ink-faint);}

/* recitals collapsible */
.vlt-app .recitals{border:1px solid var(--border); border-radius:10px; background:var(--panel); margin-bottom:14px; overflow:hidden;}
.vlt-app .recitals summary{list-style:none; cursor:pointer; padding:12px 16px; display:flex; align-items:center; gap:10px; font-weight:600; font-size:13px;}
.vlt-app .recitals summary::-webkit-details-marker{display:none;}
.vlt-app .recitals .badge{font-family:var(--figure); font-size:11px; font-weight:600; color:var(--history); background:#F5EEE0; border-radius:999px; padding:2px 9px;}
.vlt-app .recitals .chev{margin-left:auto; color:var(--ink-faint); transition:transform .15s;}
.vlt-app .recitals[open] .chev{transform:rotate(90deg);}
.vlt-app .recitals .body{padding:0 16px 14px; font-size:13px; color:var(--muted); line-height:1.55; border-top:1px solid var(--border-soft);}
.vlt-app .recitals .body p{margin:12px 0 0;}

/* article accordion */
.vlt-app .art{border:1px solid var(--border); border-radius:10px; background:var(--panel); margin-bottom:8px; overflow:hidden;}
.vlt-app .art__head{width:100%; display:flex; align-items:center; gap:13px; padding:13px 16px; background:var(--panel); border:0; cursor:pointer; text-align:left; font:inherit;}
.vlt-app .art__num{flex-shrink:0; min-width:30px; height:30px; padding:0 8px; border-radius:999px; display:grid; place-items:center; font-family:var(--figure); font-size:12px; font-weight:600; color:var(--accent); background:var(--accent-bg);}
.vlt-app .art__label{display:flex; flex-direction:column; gap:1px; min-width:0;}
.vlt-app .art__label .a{font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-faint); font-family:var(--figure);}
.vlt-app .art__label .h{font-size:14px; font-weight:600; color:var(--ink); line-height:1.3;}
.vlt-app .art__chev{margin-left:auto; color:var(--ink-faint); transition:transform .15s;}
.vlt-app .art.is-open .art__chev{transform:rotate(90deg);}
.vlt-app .art__body{padding:2px 18px 16px; border-top:1px solid var(--border-soft);}
.vlt-app .art:not(.is-open) .art__body{display:none;}

.vlt-app .para{margin:11px 0 0; font-size:13.5px; line-height:1.62; color:var(--ink);}
.vlt-app .para--sub{margin-left:22px; color:var(--muted);}
.vlt-app .muted-note{margin:11px 0 0; font-size:12.5px; color:var(--ink-faint); font-style:italic;}
.vlt-app .cols{display:grid; grid-template-columns:1fr 1fr; gap:0 26px;}
.vlt-app .cols .col-h{font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-faint); font-family:var(--figure); padding-bottom:6px; border-bottom:1px solid var(--border-soft); margin-top:12px;}
.vlt-app .cols .col-h.de{color:var(--classify);}

.vlt-app .placeholder{border:1px dashed var(--border); border-radius:12px; background:var(--panel); padding:28px; margin-top:22px;}
.vlt-app .placeholder h2{font-family:"Source Serif 4",serif; font-weight:600; margin:0 0 8px; font-size:19px; color:var(--classify);}
.vlt-app .placeholder p{margin:0; color:var(--muted); max-width:70ch;}
.vlt-app .mockup-note{margin:22px 0 0; padding:12px 16px; background:#FFF; border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:8px; font-size:12.5px; color:var(--muted);}
.vlt-app .mockup-note b{color:var(--ink);}

/* footer colophon */
.vlt-app .app-colophon {
  margin: 0;
  padding: 18px 0 4px;
  border-top: 1px solid var(--border-soft);
  text-align: center;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--ink-faint);
}
.vlt-app .app-colophon__sep { opacity: 0.55; margin: 0 3px; }
.vlt-app .app-colophon__ver { font-family: var(--figure); font-variant-numeric: tabular-nums; }

[hidden]{display:none!important;}

/* Legislative-history modal + timeline */
.vlt-app{scroll-margin-top:24px;}
.vlt-modal-backdrop{position:fixed; inset:0; z-index:9999; background:rgba(20,26,38,.42);
  display:flex; align-items:center; justify-content:center; padding:20px; overflow:auto;}
.vlt-modal{font-family:"Libre Franklin",-apple-system,sans-serif; background:var(--panel); width:100%; max-width:520px;
  max-height:85vh; display:flex; flex-direction:column;
  border:1px solid var(--border); border-radius:16px; box-shadow:0 24px 60px rgba(20,26,38,.28); overflow:hidden;}
.vlt-modal__head{flex:0 0 auto; display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  padding:20px 22px 14px; border-bottom:1px solid var(--border);}
.vlt-modal__title{font-family:"Source Serif 4",serif; font-weight:600; font-size:19px; margin:0; color:var(--ink);}
.vlt-modal__sub{font-size:12px; color:var(--muted); margin:3px 0 0;}
.vlt-modal__close{border:none; background:transparent; color:var(--ink-faint); font-size:22px; line-height:1; cursor:pointer; padding:2px 4px;}
.vlt-modal__close:hover{color:var(--ink);}
.vlt-modal__body{flex:1 1 auto; min-height:0; overflow-y:auto; padding:18px 22px 22px;}
.vlt-tl__empty{margin:0; font-size:13px; color:var(--muted);}
.vlt-tl{list-style:none; margin:0; padding:0;}
.vlt-tl__item{position:relative; padding:0 0 20px 26px;}
.vlt-tl__item:last-child{padding-bottom:0;}
.vlt-tl__item::before{content:""; position:absolute; left:5px; top:16px; bottom:-2px; width:2px; background:var(--border);}
.vlt-tl__item:last-child::before{display:none;}
.vlt-tl__dot{position:absolute; left:0; top:3px; width:12px; height:12px; border-radius:50%;
  background:var(--panel); border:2px solid var(--ink-faint);}
.vlt-tl__item--current .vlt-tl__dot{border-color:var(--history); background:var(--history);}
.vlt-tl__date{font-family:var(--figure); font-variant-numeric:tabular-nums; font-size:11.5px; letter-spacing:.03em;
  color:var(--ink-faint); margin:0 0 2px;}
.vlt-tl__row{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.vlt-tl__label{font-size:14px; font-weight:600; color:var(--ink);}
.vlt-tl__badge{font-family:var(--figure); font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  border-radius:999px; padding:2px 8px; color:var(--history); background:#F5EEE0;}
.vlt-tl__badge--adopted{color:var(--accent); background:var(--accent-bg);}
.vlt-tl__badge--amendment,.vlt-tl__badge--corrigendum{color:var(--classify); background:var(--classify-bg);}
.vlt-tl__current{font-family:var(--figure); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  color:#fff; background:var(--history); border-radius:999px; padding:2px 8px;}
.vlt-tl__note{font-size:12.5px; color:var(--muted); margin:4px 0 0; line-height:1.5;}
.vlt-tl__link{display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:600;
  color:var(--classify); text-decoration:none; margin-top:6px;}
.vlt-tl__link:hover{text-decoration:underline;}

@media (max-width:860px){ .vlt-app .layout{grid-template-columns:1fr;} .vlt-app .cols{grid-template-columns:1fr;} }