/* Amendifier. A drafter's desk: two sheets of legislation side by side on a cool grey-green ground, the
   principal Act with tracked changes on the left and the amending Bill on the right. Legislative text in
   Times New Roman, as Australian and New Zealand legislation is printed; the interface in a plain sans.
   One accent, deep eucalyptus green; omissions in red, insertions in green. */
:root {
  --ground: #eef0ed;
  --paper: #ffffff;
  --ink: #161c1a;
  --muted: #5d6965;
  --line: #d6dcd8;
  --accent: #1f4f45;
  --accent-ink: #ffffff;
  --accent-soft: #e2ece8;
  --del: #b42318; --del-bg: #fde8e6;
  --ins: #146c3a; --ins-bg: #dcf3e4;
  --warn: #7a5200; --warn-bg: #fbf0d9;
  --shadow: 0 1px 2px rgba(22, 28, 26, 0.06), 0 4px 18px rgba(22, 28, 26, 0.06);
  --font-lex: "Times New Roman", Times, "Liberation Serif", "Nimbus Roman", serif;
  --font-ui: "IBM Plex Sans", "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: Consolas, "Liberation Mono", monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #101614; --paper: #1a2220; --ink: #e4ebe8; --muted: #9baba5; --line: #2d3935;
    --accent: #8fcab8; --accent-ink: #0f1513; --accent-soft: #1d3530;
    --del: #ff9b8f; --del-bg: #3d1f1b; --ins: #8fe0ad; --ins-bg: #173326; --warn: #f0c46a; --warn-bg: #33290f;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ground: #101614; --paper: #1a2220; --ink: #e4ebe8; --muted: #9baba5; --line: #2d3935;
  --accent: #8fcab8; --accent-ink: #0f1513; --accent-soft: #1d3530;
  --del: #ff9b8f; --del-bg: #3d1f1b; --ins: #8fe0ad; --ins-bg: #173326; --warn: #f0c46a; --warn-bg: #33290f;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 14.5px/1.5 var(--font-ui); }
h1, h2, h3, p { margin: 0; }
a { color: var(--accent); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.mono { font-family: var(--font-mono); font-size: 0.92em; }

/* ---------------------------------------------------------------- top bar */
.bar { background: var(--paper); border-bottom: 1px solid var(--line); position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; }
.bar-in { max-width: 1680px; margin: 0 auto; padding-block: 10px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); display: flex; flex-wrap: wrap; align-items: end; gap: 10px 28px; }
.brand { display: flex; align-items: center; gap: 10px; margin-right: auto; padding-bottom: 2px; }
.logo { width: 26px; height: 26px; border-radius: 6px; background: var(--accent); position: relative; flex: none; }
.logo::before, .logo::after { content: ""; position: absolute; left: 6px; right: 6px; height: 2px; background: var(--accent-ink); top: 8px; box-shadow: 0 5px 0 var(--accent-ink); }
.logo::after { top: 18px; right: 11px; box-shadow: none; background: #e9b8a8; }
h1 { font: 700 21px/1.1 var(--font-lex); letter-spacing: 0.005em; }
.tag { font-size: 12.5px; color: var(--muted); }
.controls { display: flex; flex-wrap: wrap; align-items: end; gap: 10px 12px; flex: 1 1 640px; justify-content: flex-end; }
.ctl { display: grid; gap: 3px; min-width: 0; }
.ctl.grow { flex: 1 1 220px; max-width: 360px; }
.ctl-l { font: 600 11px var(--font-ui); text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); }
input[type="text"], select { font: inherit; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 6px; padding: 6px 9px; width: 100%; min-width: 0; }
select { max-width: 280px; }
input[type="text"]:focus, select:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.btn { font: 500 14px var(--font-ui); cursor: pointer; border: 1px solid var(--accent); color: var(--accent); background: transparent; border-radius: 6px; padding: 6px 12px; white-space: nowrap; }
.btn:hover:not(:disabled) { background: var(--accent-soft); }
.btn:disabled { opacity: 0.45; cursor: default; }
.btn.primary { background: var(--accent); color: var(--accent-ink); font-weight: 600; padding: 7px 16px; }
.btn.primary:hover { filter: brightness(1.1); background: var(--accent); }
.btn.quiet { border-color: var(--line); color: var(--ink); font-size: 13px; padding: 4px 10px; }
.linkbtn { font: inherit; color: var(--accent); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }

/* ---------------------------------------------------------------- the two sheets */
.desk { --l: 1fr; --r: 1fr; max-width: 1680px; margin: 0 auto; padding-block: 16px 8px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); display: grid; grid-template-columns: minmax(0, var(--l)) 14px minmax(0, var(--r)); gap: 0 2px; }
.splitter { cursor: col-resize; position: relative; touch-action: none; margin-top: 38px; border-radius: 4px; }
.splitter::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: var(--line); border-radius: 1px; }
.splitter::after { content: ""; position: absolute; top: 40%; left: 50%; width: 6px; height: 36px; margin-left: -3px; border-radius: 3px; background: var(--muted); opacity: 0.5; }
.splitter:hover::before, .splitter:focus-visible::before, .splitter.dragging::before { background: var(--accent); width: 3px; }
body.dragging { cursor: col-resize; user-select: none; }
/* a pane opened in its own window, or moved out of this one */
body.solo-act .pane-bill, body.solo-bill .pane-act, body.popped-act .pane-act, body.popped-bill .pane-bill,
body.solo-act .splitter, body.solo-bill .splitter, body.popped-act .splitter, body.popped-bill .splitter { display: none; }
body.solo-act .desk, body.solo-bill .desk, body.popped-act .desk, body.popped-bill .desk { grid-template-columns: minmax(0, 1fr); max-width: none; }
body.solo-act .popout, body.solo-bill .popout, body.popped-act .popout, body.popped-bill .popout { display: none; }
body.solo-act .more, body.solo-bill .more, body.solo-act .foot, body.solo-bill .foot, body.solo-act .caution, body.solo-bill .caution { display: none; }
body.solo-act .sheet, body.solo-bill .sheet { height: calc(100vh - 150px); }
body.solo-bill .ctl.ex, body.solo-bill .ctl.grow { display: none; }
.away { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 13px; background: var(--accent-soft); padding: 7px 12px; border-radius: 6px; margin-bottom: 10px; order: -1; }
.away[hidden] { display: none; }
@media (max-width: 900px) { .desk { grid-template-columns: minmax(0, 1fr); gap: 16px; } .splitter { display: none; } .popout { display: none; } }
.sheet-wrap { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sheet-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 10px; min-height: 30px; }
h2 { font: 600 15px var(--font-ui); }
h2 .sub { font-weight: 400; color: var(--muted); }
.tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.counts { font-size: 12.5px; color: var(--muted); }
.counts del, .counts ins { text-decoration: none; padding: 0 4px; border-radius: 3px; }
.counts del { color: var(--del); background: var(--del-bg); }
.counts ins { color: var(--ins); background: var(--ins-bg); }
.sheet { background: var(--paper); border: 1px solid var(--line); border-radius: 4px; box-shadow: var(--shadow); height: calc(100vh - 190px); min-height: 420px; overflow: auto; }
@media (max-width: 900px) { .sheet { height: auto; min-height: 320px; max-height: 75vh; } }
.lex { font-family: var(--font-lex); font-size: 16px; line-height: 1.45; }
.editor { white-space: pre-wrap; overflow-wrap: anywhere; padding: 26px clamp(16px, 3.4vw, 46px) 60px; min-height: 100%; outline: none; caret-color: var(--ink); tab-size: 4; }
.editor.is-empty::before { content: attr(data-placeholder); color: var(--muted); font: 15px/1.6 var(--font-ui); display: block; max-width: 52ch; }
.editor .ln { padding-left: 0; }
.editor .h-unit { font-weight: 700; font-size: 1.08em; margin-top: 0.5em; }
.editor .h-sec { font-weight: 700; margin-top: 0.35em; }
.editor .d0 { padding-left: 2.2em; text-indent: -2.2em; }
.editor .d1 { padding-left: 4.4em; text-indent: -2.2em; }
.editor .d2 { padding-left: 6.6em; text-indent: -2.2em; }
.editor .d3 { padding-left: 8.8em; text-indent: -2.2em; }
.editor .note { padding-left: 2.2em; font-size: 0.92em; }
.editor del { color: var(--del); background: var(--del-bg); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.editor ins { color: var(--ins); background: var(--ins-bg); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.detected { font-size: 12.5px; color: var(--muted); }
.detected:empty { display: none; }
.where-row { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 13px; background: var(--warn-bg); padding: 8px 10px; border-radius: 6px; }
.where-row[hidden] { display: none; }
.where-row input { flex: 1 1 200px; max-width: 360px; }
.check { font-size: 12.5px; padding: 2px 9px; border-radius: 999px; }
.check:empty { display: none; }
.check.ok { background: var(--ins-bg); color: var(--ins); }
.check.bad { background: var(--del-bg); color: var(--del); }
.stale { font-size: 13px; background: var(--warn-bg); padding: 6px 10px; border-radius: 6px; }

/* ---------------------------------------------------------------- the Bill */
.bill { padding: 30px clamp(16px, 3.4vw, 50px) 60px; }
.bill .empty { font: 15px/1.6 var(--font-ui); color: var(--muted); max-width: 52ch; }
.b-cover { text-align: center; display: grid; gap: 10px; padding-bottom: 18px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.b-juris { font-size: 15px; letter-spacing: 0.04em; }
.b-title { font-size: 22px; font-weight: 700; line-height: 1.25; }
.b-long { text-align: left; }
.b-enact { margin: 14px 0 10px; }
.b-part { font-size: 17px; font-weight: 700; margin: 22px 0 8px; }
.b-sched { font-size: 18px; font-weight: 700; margin: 26px 0 6px; }
.b-actline { font-style: italic; font-weight: 700; margin: 12px 0 6px; }
.b-sec { font-weight: 700; margin: 14px 0 4px; }
.b-p { margin: 4px 0; }
.b-sub { display: grid; grid-template-columns: 2.6em minmax(0, 1fr); margin: 4px 0; }
.b-sub.d1 { padding-left: 2.6em; }
.b-sub.one { display: block; padding-left: 2.6em; }
.b-sub.note { display: block; font-size: 0.93em; margin-top: 12px; }
/* the Act form (WA): title page, contents page, then the Act's first page */
.b-titlepage { text-align: center; display: grid; gap: 14px; padding: 48px 0 56px; }
.b-titlepage .b-title { font-size: 26px; }
.b-pagebreak { border-top: 1px dashed var(--line); margin: 22px -8px; }
.b-contents { display: grid; gap: 10px; }
.b-contents .b-juris, .b-contents .b-title { text-align: center; }
.b-contents-h { text-align: center; font-weight: 700; font-size: 18px; margin-top: 10px; }
.b-contents table { border-collapse: collapse; margin: 4px auto 0; }
.b-contents td { padding: 1px 0; vertical-align: top; }
.b-contents td:first-child { width: 3.2em; }
.b-cover.act-form { border-bottom: 0; padding-bottom: 0; }
.b-number { font-weight: 700; justify-self: center; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); padding: 6px 2.4em; }
.b-cover.act-form .b-long { font-weight: 700; margin-top: 6px; }
.b-assent { text-align: right; }
.b-p.para { padding-left: 4.2em; text-indent: -2.4em; }
.b-sub.note .b-body { padding-left: 2.6em; font-weight: 700; }
.b-item { margin: 12px 0 0; }
.b-item-h { font-weight: 700; display: grid; grid-template-columns: 3em minmax(0, 1fr); }
.b-item-i { padding-left: 3em; margin-top: 2px; }
.b-body { padding-left: 3em; margin: 4px 0 0; }
.b-sub .b-body { padding-left: 0; }
.b-body div { padding-left: calc(var(--d, 0) * 1.6em + 1.6em); text-indent: -1.6em; }
.b-src { display: block; font: 11.5px var(--font-ui); color: var(--muted); padding-left: 3em; margin-top: 2px; }
.b-sub .b-src { padding-left: 0; }
.b-src a { color: inherit; }
.term { font-weight: 700; font-style: italic; }
.flags { display: grid; gap: 6px; }
.flags:empty { display: none; }
.flag { font-size: 13px; padding: 7px 11px; border-radius: 6px; background: var(--accent-soft); }
.flag.warn { background: var(--warn-bg); }
.flag b { font-weight: 600; }

/* ---------------------------------------------------------------- below the desk */
.caution { max-width: 1680px; margin: 10px auto 0; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); font-size: 13.5px; color: var(--muted); }
.caution strong { color: var(--warn); }
.more { max-width: 1680px; margin: 18px auto 0; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); display: grid; gap: 8px; }
details { background: var(--paper); border: 1px solid var(--line); border-radius: 6px; min-width: 0; }
summary { cursor: pointer; padding: 10px 14px; font: 600 14.5px var(--font-ui); }
.det { padding: 2px 16px 16px; display: grid; gap: 12px; min-width: 0; }
.body { max-width: 80ch; }
.conv { margin: 0; padding-left: 1.1em; display: grid; gap: 6px; max-width: 86ch; }
.conv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 18px 26px; }
.conv-grid > div { display: grid; gap: 8px; align-content: start; min-width: 0; }
.conv-grid h3 { font: 600 15px var(--font-ui); }
.lexs { font-family: var(--font-lex); font-size: 1.06em; }
.ex-summary { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.stat { display: grid; }
.stat b { font: 700 24px/1.1 var(--font-lex); font-variant-numeric: tabular-nums; }
.stat span { font-size: 12.5px; color: var(--muted); }
.ex-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 6px; }
.ex-table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 640px; }
.ex-table th { font: 600 11px var(--font-ui); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.ex-table td { padding: 8px 12px; border-top: 1px solid var(--line); vertical-align: top; }
.ex-table td:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ex-table .prov { font-weight: 500; }
.ex-table .act { color: var(--muted); font-size: 12.5px; }
.pill { display: inline-block; font: 500 12px var(--font-ui); padding: 1px 8px; border-radius: 999px; white-space: nowrap; }
.pill.identical { background: var(--ins-bg); color: var(--ins); }
.pill.same { background: var(--accent-soft); color: var(--accent); }
.pill.wrong { background: var(--del-bg); color: var(--del); }
.pill.held { background: var(--warn-bg); color: var(--warn); font-size: 11px; }
.ex-table button { font: inherit; color: var(--accent); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.ex-detail td { background: var(--ground); }
.ex-detail .two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 760px) { .ex-detail .two { grid-template-columns: 1fr; } }
.ex-detail pre { font: 14px/1.45 var(--font-lex); white-space: pre-wrap; margin: 4px 0 0; }
.ex-detail .note { color: var(--muted); font-size: 12.5px; margin-top: 8px; }
.ex-detail .links { font-size: 12.5px; margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.foot { max-width: 1680px; margin: 22px auto 0; padding-block: 14px 40px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); border-top: 1px solid var(--line); display: grid; gap: 4px; color: var(--muted); font-size: 12.5px; }
@media (max-width: 560px) { .controls { justify-content: stretch; } .ctl { flex: 1 1 140px; } select { max-width: none; } .btn.primary { flex: 1 1 100%; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
.b-table-wrap { overflow-x: auto; margin: 6px 0; }
.b-table { border-collapse: collapse; font-size: 0.92em; min-width: 420px; }
.b-table th, .b-table td { border: 1px solid var(--line); padding: 4px 8px; text-align: left; vertical-align: top; }
.b-table th { font-weight: 700; }
@media (max-width: 900px) { .bar { position: static; } }
/* the two directions */
.go { display: flex; flex-wrap: wrap; gap: 8px; }
.go .btn { padding: 7px 14px; }
.go .btn:not(.primary) { font-weight: 500; background: var(--paper); }
/* the amending Act pane can be edited or pasted into */
.bill { outline: none; min-height: 100%; }
.bill:focus { box-shadow: inset 0 0 0 2px var(--accent-soft); }
.bill.plain { white-space: pre-wrap; font-size: 15px; }
.ex-info { font-size: 13px; background: var(--accent-soft); padding: 7px 11px; border-radius: 6px; display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: baseline; }
.ex-info[hidden] { display: none; }
.ex-info .lic { flex-basis: 100%; color: var(--muted); font-size: 11.5px; }
dialog.confirm { border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); max-width: min(460px, calc(100vw - 32px)); padding: 18px 20px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25); }
dialog.confirm::backdrop { background: rgba(16, 22, 20, 0.45); }
.confirm form { display: grid; gap: 10px; }
.confirm-h { font-weight: 600; font-size: 16px; }
.confirm-b { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }