/* Bill tracker — reader styles v2 (legislative text + amendment markup).
   Layout uses Tailwind utilities in the templates; this file owns the
   document-text rendering, the insertion/deletion markup, the collapsible
   panels and the contents sidebar. Cloudflare-safe versioned filename. */

:root {
  --ink:      #1b1b1f;
  --ink-soft: #4a4a52;     /* AA on white */
  --rule:     #e2e4e8;
  --accent:   #c94907;
  --accent-d: #9a3a07;
  --ins:      #145c32;     /* inserted text */
  --ins-bg:   #dff3e6;
  --ins-edge: #2f9e63;
  --del:      #8a1717;     /* deleted text */
  --del-bg:   #fbe3e3;
  --del-edge: #d06666;
  --warn-bg:  #fff4e5;
  --warn-edge:#e8a04a;
  --warn-ink: #7a4408;
}

/* ── page-level warnings banner ──────────────────────────────────── */
.warnbanner {
  border: 1px solid var(--warn-edge);
  background: var(--warn-bg);
  border-radius: 10px;
  padding: .9rem 1.1rem;
  margin: 1rem 0 1.5rem;
  color: var(--warn-ink);
  font-size: .92rem;
}
.warnbanner h2 { font-size: 1rem; margin: 0 0 .35rem; color: var(--warn-ink); display: flex; align-items: center; gap: .45rem; }
.warnbanner ul { margin: .25rem 0 0; padding: 0; list-style: none; }
.warnbanner li { padding: .15rem 0; line-height: 1.45; }
.warnbanner a { color: var(--accent-d); font-weight: 600; text-decoration: underline; }
.warnbanner .why { color: var(--warn-ink); }

/* ── clause spine ───────────────────────────────────────────────── */
.clause { scroll-margin-top: 5rem; }
.clause + .clause { margin-top: 2.5rem; padding-top: 1.75rem; border-top: 1px solid var(--rule); }
.clause-head { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.clause-num { font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; font-size: 1.05rem; }
.clause-title { font-weight: 700; letter-spacing: -0.005em; }

/* warning chip on a clause heading */
.warn-chip {
  display: inline-flex; align-items: center; gap: .3rem;
  background: var(--warn-bg); color: var(--warn-ink);
  border: 1px solid var(--warn-edge); border-radius: 999px;
  padding: .1rem .55rem; font-size: .72rem; font-weight: 700;
}

/* provision rows — shared layout for Bill text and amended text.
   Label sits in a reserved left gutter (absolute), so wrapped lines and
   inline <ins>/<del> never collide with or overlap the numbering. */
.prov { position: relative; padding-left: 2.5rem; margin: .4rem 0; line-height: 1.55; }
.prov .lbl {
  position: absolute; left: 0; top: 0; width: 2.1rem;
  color: var(--ink-soft); font-variant-numeric: tabular-nums; font-weight: 600;
}
.bill-text { margin-top: .6rem; color: var(--ink); }
.bill-text > p { margin: .4rem 0; }
/* quoted = text the Bill is inserting (a new section/paragraph). Set it apart
   so a whole-provision insertion reads clearly from the clause text alone. */
.bill-text .prov.quoted {
  border-left: 3px solid #d2b58a; background: #fbf7f1;
  border-radius: 0 5px 5px 0; padding-top: .2rem; padding-bottom: .2rem;
}
.bill-text .prov.quoted .lbl { color: #8a5a1e; }
.bill-text .prov.quoted strong { color: #6a4413; }

/* ── collapsible panels (native <details>) ──────────────────────── */
.panel { border: 1px solid var(--rule); border-radius: 10px; margin-top: 1rem; background: #fff; overflow: hidden; }
.panel > summary {
  cursor: pointer; list-style: none; user-select: none;
  padding: .8rem 1rem; min-height: 2.9rem;
  display: flex; align-items: center; gap: .6rem; font-size: .95rem; font-weight: 600;
}
.panel > summary::-webkit-details-marker { display: none; }
.panel > summary .chev {
  flex: 0 0 auto; width: 1.1rem; height: 1.1rem; color: var(--accent);
  transition: transform .18s ease;
}
.panel[open] > summary .chev { transform: rotate(90deg); }
.panel > summary:hover { background: #fafafa; }
.panel-effect > summary { background: #fff6f0; color: #5a2606; }
.panel-effect > summary:hover { background: #ffefe4; }
.panel-notes  > summary { background: #f3f6fb; color: #20324a; }
.panel-notes  > summary:hover { background: #eaf0f8; }
.panel[open] > summary { border-bottom: 1px solid var(--rule); }
.panel-body { padding: 1rem 1.1rem 1.15rem; }
.panel .meta { font-size: .82rem; color: var(--ink-soft); margin-bottom: .7rem; }
.panel .meta a { color: var(--accent-d); font-weight: 600; }
.panel .meta a:hover { text-decoration: underline; }

/* ── the amended section: a distinct, shaded "statute" box ───────── */
.amended {
  background: #f7f9fc;
  border: 1px solid #dde3ec;
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  padding: .85rem 1rem 1rem 1.1rem;
  font-family: Georgia, "Times New Roman", serif;   /* set the statute text apart from the Bill */
  color: #20242c;
}
.amended .as-amended-label {
  font-family: "Tofino", system-ui, sans-serif;
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink-soft); margin-bottom: .5rem;
}
.amended .prov { margin: .45rem 0; }
.amended .prov .lbl { color: #555; }

/* the diff legend */
.difflegend {
  font-family: "Tofino", system-ui, sans-serif; font-size: .75rem; color: var(--ink-soft);
  display: flex; gap: 1rem; align-items: center; margin: 0 0 .6rem; flex-wrap: wrap;
}
.difflegend .swatch { padding: 0 .3rem; border-radius: 3px; font-weight: 600; }
.difflegend .sw-ins { background: var(--ins-bg); color: var(--ins); text-decoration: underline; }
.difflegend .sw-del { background: var(--del-bg); color: var(--del); text-decoration: line-through; }

/* insertion / deletion markup — colour + underline/strike (never colour alone) */
ins { text-decoration: underline; text-decoration-thickness: 2px; background: var(--ins-bg); color: var(--ins); padding: 0 2px; border-radius: 2px; }
del { text-decoration: line-through; background: var(--del-bg); color: var(--del); padding: 0 2px; border-radius: 2px; }
.prov.ins { background: var(--ins-bg); border-left: 3px solid var(--ins-edge); border-radius: 4px; padding-top: .3rem; padding-bottom: .3rem; margin-left: -.3rem; padding-left: 2.8rem; }
.prov.ins .lbl { left: .3rem; color: var(--ins); }
.prov.ins ins { background: transparent; }     /* whole block already tinted */
.prov.del { background: var(--del-bg); border-left: 3px solid var(--del-edge); border-radius: 4px; padding-top: .3rem; padding-bottom: .3rem; margin-left: -.3rem; padding-left: 2.8rem; text-decoration: line-through; }
.prov.del .lbl { left: .3rem; color: var(--del); }

/* "for checking" box inside an effect panel */
.flagbox {
  font-family: "Tofino", system-ui, sans-serif;
  margin-top: .8rem; font-size: .85rem; color: var(--warn-ink);
  background: var(--warn-bg); border: 1px solid var(--warn-edge); border-radius: 8px; padding: .65rem .8rem;
}
.flagbox strong { color: #6a3a06; }

/* explanatory notes — government's own words */
.en-note { white-space: pre-wrap; font-size: .92rem; color: #2a2a2e; line-height: 1.55; }

/* tags */
.tag { display: inline-flex; align-items: center; border-radius: 999px; padding: .1rem .55rem; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.tag-amend { background: #ffe6d6; color: #8a3206; }
.tag-new   { background: #e7ecfb; color: #2a3a86; }

/* ── contents sidebar — demarcated panel, roomier ───────────────── */
.toc {
  position: sticky; top: 1.25rem; max-height: calc(100vh - 2.5rem); overflow-y: auto;
  background: #f7f8fa; border: 1px solid var(--rule); border-radius: 10px;
  padding: .85rem .9rem; font-size: .85rem;
}
.toc-part { font-weight: 700; color: var(--ink); text-transform: uppercase; font-size: .72rem; letter-spacing: .05em; margin: 0 0 .5rem; padding-bottom: .45rem; border-bottom: 1px solid var(--rule); }
.toc a { display: flex; gap: .45rem; padding: .32rem .35rem; margin: .05rem 0; color: var(--ink-soft); text-decoration: none; line-height: 1.4; border-radius: 6px; }
.toc a .n { color: var(--accent); font-weight: 700; font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.toc a:hover { background: #eef1f5; color: var(--ink); }
.toc a.amends { color: var(--ink); }
.toc a.haswarn .n::after { content: " ⚠"; color: var(--warn-edge); }

@media (max-width: 1023px) {
  .toc { position: static; max-height: none; margin-bottom: 1.5rem; }
}
@media print {
  .toc, .no-print { display: none !important; }
  .panel { border: none; }
  .panel > summary { display: none; }
  .panel-body { padding: 0; }
  .amended { background: #fff; }
}