/*! LawHairs《法毛》 | HTML5 Boilerplate layout | MIT */

/* ==========================================================================
   Base styles
   HTML5 Boilerplate normally ships normalize.css here. Bootstrap Reboot is
   loaded ahead of this file and does the same job, so normalize is omitted
   rather than stacked on top of it.
   ========================================================================== */

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

/* ==========================================================================
   Design tokens
   ========================================================================== */

:root {
  /* CDN family first, local mirror second, then system CJK sans. */
  --sans: "Noto Sans TC", "Noto Sans TC Local", "PingFang TC",
          "Microsoft JhengHei", "Hiragino Sans TC", sans-serif;
  /* Line numbers need tabular figures to stay aligned across rows. */
  --num: ui-monospace, Consolas, "Cascadia Mono", monospace;

  /* Type scale. Body never below 16px, secondary never below 12px, headings
     stepped so the visual hierarchy matches the h1/h2/h3 outline. */
  --fs-body: 1rem;        /* 16px */
  --fs-small: .8125rem;   /* 13px — clear of the 12px floor */
  --fs-h1: 2rem;          /* 32px */
  --fs-h2: 1.5rem;        /* 24px */
  --fs-h3: 1.25rem;       /* 20px */

  /* WCAG 1.4.12 text spacing, applied rather than merely tolerated. */
  --lh: 1.8;              /* >= 1.5x font size */
  --para-gap: 2em;        /* >= 2x font size */
  --tracking: .12em;      /* >= 0.12x font size */
  --word-gap: .16em;      /* >= 0.16x font size */

  --diff-add-bg: #e9f7ee; --diff-add-hl: #b3e4c5;
  --diff-del-bg: #fdeef0; --diff-del-hl: #f5c2cb;
  /* Gutters scale with Bootstrap's breakpoints; the text sizes no longer do,
     because 16px is a floor rather than a starting point. */
  --diff-font: var(--fs-body); --lnum-font: var(--fs-small); --lnum-w: 3rem;
  --code-pad: .5rem;      --editor-h: 10rem;
}

/* Row numbers must share the text cell's line box or they drift line by line;
   a bare multiplier would resolve differently against each cell's size. */
:root { --diff-lh: calc(var(--diff-font) * var(--lh)); }

[data-bs-theme="dark"] {
  --diff-add-bg: rgba(63, 185, 80, .14); --diff-add-hl: rgba(63, 185, 80, .42);
  --diff-del-bg: rgba(248, 81, 73, .14); --diff-del-hl: rgba(248, 81, 73, .42);
}

/* ==========================================================================
   Typography
   ========================================================================== */

/* WCAG 1.4.12 baselines applied to running text. Word spacing is inert for
   unspaced CJK but governs the Latin runs (article numbers, years). */
body {
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: var(--lh);
  letter-spacing: var(--tracking);
  word-spacing: var(--word-gap);
}

p { margin-bottom: var(--para-gap); }

/* .navbar-brand pins 1.25rem; an element selector alone loses to it. */
h1, .h1, h1.navbar-brand { font-size: var(--fs-h1); line-height: 1.3; }
h2, .h2 { font-size: var(--fs-h2); line-height: 1.35; }
h3, .h3 { font-size: var(--fs-h3); line-height: 1.4; }

/* Controls opt out of the wide tracking: at button sizes it pushes labels
   apart far enough to wrap, which costs more legibility than it buys. */
.btn, .form-select, .form-control, .badge, .dropdown-item, .accordion-button,
.navbar .btn, label { letter-spacing: normal; word-spacing: normal; }

.small, small, .form-text { font-size: var(--fs-small); }

.mono { font-family: var(--sans); }

textarea.mono {
  font-size: var(--diff-font);
  min-height: var(--editor-h);
  resize: vertical;
  line-height: var(--lh);
}

/* ==========================================================================
   Diff table
   ========================================================================== */

table.diff { width: 100%; table-layout: fixed; border-collapse: collapse; }
.diff col.lnum-col { width: var(--lnum-w); }
.diff td { vertical-align: top; }

.diff .lnum {
  font-family: var(--num);
  font-variant-numeric: tabular-nums;
  font-size: var(--lnum-font);
  line-height: var(--diff-lh);
  color: var(--bs-secondary-color);
  text-align: right;
  padding: .05rem .45rem 0 .2rem;
  user-select: none;
  border-right: 1px solid var(--bs-border-color);
  background: var(--bs-tertiary-bg);
}

.diff .code {
  font-family: var(--sans);
  font-size: var(--diff-font);
  line-height: var(--diff-lh);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  padding: .05rem var(--code-pad);
}

.diff .code:empty::after { content: "\00a0"; }
.diff td.cdel { background: var(--diff-del-bg); }
.diff td.cins { background: var(--diff-add-bg); }
.diff td.cdel .ihl { background: var(--diff-del-hl); border-radius: 2px; }
.diff td.cins .ihl { background: var(--diff-add-hl); border-radius: 2px; }

.diff td.gap {
  background: repeating-linear-gradient(45deg, transparent 0 5px,
                                        var(--bs-border-color) 5px 6px);
  opacity: .45;
}

.diff tr.active-hunk td { box-shadow: inset 3px 0 0 var(--bs-primary); }
.diff tr.active-hunk td:first-child { box-shadow: inset 3px 0 0 var(--bs-primary); }

.diff tr.sep td {
  text-align: center;
  font-size: var(--lnum-font);
  color: var(--bs-secondary-color);
  background: var(--bs-tertiary-bg);
  padding: .15rem;
  user-select: none;
  border-block: 1px dashed var(--bs-border-color);
}

.diff thead th {
  font-size: var(--diff-font);
  font-weight: 600;
  padding: .35rem var(--code-pad);
  background: var(--bs-secondary-bg);
  border-bottom: 1px solid var(--bs-border-color);
  position: sticky;
  top: 0;
  z-index: 1;
}

.diff-card {
  border: 1px solid var(--bs-border-color);
  border-radius: .5rem;
  overflow: hidden;
}

/* ==========================================================================
   Toolbar and version picker
   ========================================================================== */

.navbar .btn { --bs-btn-padding-y: .32rem; }

#navCounter {
  min-width: 3.2rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Over a hundred versions will not fit on screen, so the menu scrolls and each
   statute collapses into its own accordion section. */
.doc-menu {
  width: 100%;
  min-width: min(26rem, 92vw);
  max-height: min(60vh, 30rem);
  overflow-y: auto;
  padding: 0;
}

.doc-menu .accordion-button {
  padding: .6rem .75rem;
  font-size: var(--fs-body);
  font-weight: 600;
}

.doc-menu .accordion-button:not(.collapsed) { box-shadow: none; }
.doc-menu .accordion-body { padding: 0; }

.doc-menu .dropdown-item {
  padding: .45rem .75rem .45rem 1.5rem;
  font-size: .9375rem;
  white-space: normal;
}

.doc-menu .dropdown-item.active { font-weight: 600; }
.doc-menu .doc-count { font-size: var(--fs-small); font-weight: 400; }

/* ==========================================================================
   Back-to-top control
   ========================================================================== */

#scrollTop {
  position: fixed;
  right: 1.25rem;
  bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
  z-index: 1030;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  /* Bootstrap retints link colours per theme, so the icon keeps its contrast
     against the disc in both light and dark mode. */
  color: var(--bs-link-color);
  background: var(--bs-body-bg);
  border: 0;
  border-radius: 50%;
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .2);
  /* visibility (not just opacity) also drops it out of the tab order. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(.5rem);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}

#scrollTop.is-visible { opacity: 1; visibility: visible; transform: none; }
#scrollTop .bi { font-size: 1.75rem; line-height: 1; }
#scrollTop:hover { color: var(--bs-link-hover-color); transform: translateY(-.125rem); }
#scrollTop:active { transform: translateY(0) scale(.94); }
#scrollTop:focus-visible { outline: .25rem solid rgba(13, 110, 253, .35); outline-offset: 2px; }

/* scrollToTop() focuses the navbar so assistive tech resumes from the top.
   It is a container, not a control (tabindex -1 keeps it off the tab order),
   so the browser's default ring around the whole bar would just look broken. */
#top:focus { outline: none; }

/* ==========================================================================
   Utilities
   Bootstrap already supplies .visually-hidden, .visually-hidden-focusable and
   .d-none, so only the H5BP helpers it lacks are defined here.
   ========================================================================== */

.hidden,
[hidden] { display: none !important; }

.invisible { visibility: hidden; }

.clearfix::before,
.clearfix::after { content: ""; display: table; }
.clearfix::after { clear: both; }

/* ==========================================================================
   Media queries
   ========================================================================== */

/* Below sm the toolbar would wrap into three rows; keep it scrollable in one
   line instead so the diff itself is never pushed off-screen. */
@media (max-width: 575.98px) {
  .navbar .container-fluid { flex-wrap: nowrap; overflow-x: auto; }
}

@media (min-width: 768px)  { :root { --lnum-w: 3.2rem; --code-pad: .6rem; --editor-h: 11rem; } }
@media (min-width: 992px)  { :root { --lnum-w: 3.4rem; --code-pad: .7rem; --editor-h: 12rem; } }
@media (min-width: 1200px) { :root { --diff-font: 1.0625rem; --lnum-w: 3.7rem; --code-pad: .8rem; --editor-h: 14rem; } }
@media (min-width: 1400px) { :root { --diff-font: 1.125rem; --lnum-font: .875rem; --lnum-w: 4rem; --code-pad: .9rem; --editor-h: 16rem; } }

@media (prefers-reduced-motion: reduce) {
  #scrollTop,
  #scrollTop:hover,
  #scrollTop:active {
    transition: opacity .2s ease, visibility .2s;
    transform: none;
  }
}

/* ==========================================================================
   Print styles
   Diverges from stock H5BP, which forces every background to white. That would
   erase the only thing a printed diff exists to show, so the add/delete tints
   are kept and backed up with a glyph in the margin for monochrome output.
   ========================================================================== */

@media print {
  *,
  *::before,
  *::after {
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a,
  a:visited { text-decoration: underline; }
  a[href]::after { content: " (" attr(href) ")"; }
  /* Bootstrap-internal and same-page links would add noise, not context. */
  a[href^="#"]::after,
  a[href^="javascript:"]::after { content: ""; }

  /* Controls have no meaning on paper. */
  .navbar,
  #versionBar,
  #inputs,
  #scrollTop,
  .form-check,
  .visually-hidden-focusable { display: none !important; }

  .diff-card { border: 0; }
  .diff thead th { position: static; }

  .diff td.cdel,
  .diff td.cins,
  .diff td.cdel .ihl,
  .diff td.cins .ihl {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Monochrome fallback: mark changed rows so they survive a greyscale printer. */
  .diff td.cdel::before { content: "− "; font-weight: 700; }
  .diff td.cins::before { content: "+ "; font-weight: 700; }

  /* Keep an article and its first lines together where the printer allows. */
  .diff tr { page-break-inside: avoid; break-inside: avoid; }

  @page { margin: 1.5cm; }
}