/*
  NZ Redact styles. See DESIGN.md for the reasons.
  A text tool: white page, near-black text, light grey for the tool's chrome. Found details are marked with
  highlighter yellow, placeholders in the redacted copy are black redaction bars. One blue for links and the
  main button. One typeface, Atkinson Hyperlegible Next, because it keeps 0 and O, and 1, l and I apart in
  IRD and NHI numbers. Geist Mono only for placeholders and code that people copy.
*/
@font-face {
  font-family: "Atkinson Hyperlegible Next"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/atkinson-hyperlegible-next-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/atkinson-hyperlegible-next-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/atkinson-hyperlegible-next-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/atkinson-hyperlegible-next-latin-ext-700-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face { font-family: "Geist Mono"; src: url("fonts/GeistMono-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --sans: "Atkinson Hyperlegible Next", system-ui, "Segoe UI", Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, Consolas, monospace;

  --page: #ffffff;       /* page and panels */
  --chrome: #f3f3f3;     /* toolbar, tab bar, table header */
  --chrome-hover: #e8e8e8;
  --text: #1b1b1b;
  --muted: #595959;      /* 7:1 on white, 6.4:1 on the chrome grey */
  --line: #d4d4d4;
  --line-soft: #e6e6e6;
  --link: #0b57d0;       /* links and the main button: 6.3:1 on white */
  --link-hover: #0842a0;
  --on-link: #ffffff;
  --mark: #fff176;       /* highlighter yellow on found details */
  --mark-text: #1b1b1b;
  --bar: #000000;        /* redaction bar */
  --bar-text: #ffffff;
  --bar-edge: #000000;
  --ink: #1b1b1b;        /* the Remove this too button */
  --on-ink: #ffffff;
  --done: #146c2e;       /* the "Copied" line */
  --warn: #8a4b00;
  --focus: #0b57d0;
}
:root[data-theme="dark"] {
  --page: #141414;
  --chrome: #222222;
  --chrome-hover: #2e2e2e;
  --text: #ececec;
  --muted: #a8a8a8;
  --line: #3d3d3d;
  --line-soft: #2c2c2c;
  --link: #8ab4f8;
  --link-hover: #aecbfa;
  --on-link: #0b1a33;
  --mark: #6e5d00;       /* a darker yellow, so the light text on it keeps 5:1 */
  --mark-text: #ececec;
  --bar: #d9d9d9;        /* on a near-black page the redaction bar is a solid light block, as dark-mode viewers draw it */
  --bar-text: #000000;
  --bar-edge: #d9d9d9;
  --ink: #ececec;
  --on-ink: #141414;
  --done: #81c995;
  --warn: #f2b84b;
  --focus: #8ab4f8;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { background: var(--page); color: var(--text); font-family: var(--sans); font-size: 1.0625rem; line-height: 1.6; }
a { color: var(--link); text-underline-offset: 2px; }
a:hover { color: var(--link-hover); }
img, svg { display: block; }
button, input, textarea { font: inherit; color: inherit; }
code, pre { font-family: var(--mono); }
::selection { background: #b3d1ff; color: #000000; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 1rem; top: -3rem; z-index: 50; padding: .5rem .75rem; background: var(--page); color: var(--link); border: 1px solid var(--line); }
.skip:focus { top: .75rem; }
.i { width: 1rem; height: 1rem; flex: none; }
.frame { max-width: 76rem; margin: 0 auto; padding-inline: 1.5rem; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 2.25rem; padding: .3rem .8rem;
  border: 1px solid var(--line); border-radius: 4px; background: var(--page); color: var(--text);
  font-size: .9375rem; line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color 120ms ease-out, color 120ms ease-out;
}
.btn:hover { background: var(--chrome-hover); }
.btn:disabled { color: var(--muted); background: var(--chrome); cursor: not-allowed; }
.btn-primary { background: var(--link); border-color: var(--link); color: var(--on-link); }
.btn-primary:hover { background: var(--link-hover); border-color: var(--link-hover); }
.btn-primary:disabled, .btn-primary:disabled:hover { background: var(--chrome); border-color: var(--line); color: var(--muted); }
.btn-primary.is-copied, .btn.is-copied { background: var(--done); border-color: var(--done); color: var(--page); }
.btn-ink { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.btn-ink:hover { background: var(--ink); opacity: .9; }
.kbd { font-family: var(--sans); font-size: .8125rem; }
.icon-btn { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border: 1px solid transparent; border-radius: 4px; background: transparent; color: var(--muted); cursor: pointer; }
.icon-btn:hover { background: var(--chrome-hover); color: var(--text); }
.link-btn { padding: 0; border: 0; background: none; color: var(--link); font: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.link-btn:hover { color: var(--link-hover); }

/* ---------- top bar: the name, what it does, links ---------- */
.top { border-bottom: 1px solid var(--line); }
.top-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 2rem; padding-block: .9rem; }
.top-title { flex: 1 1 26rem; min-width: 0; }
.top h1 { font-size: 1.875rem; line-height: 1.2; font-weight: 700; }
.top-what { max-width: 44rem; color: var(--muted); font-size: 1rem; line-height: 1.45; }
.top-nav { flex: 0 1 auto; display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.25rem; font-size: 1rem; }

/* ---------- the tool ---------- */
.note { margin-top: 1rem; padding: 1rem; border: 1px solid var(--line); }
.app { margin-top: 1.25rem; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--page); }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; padding: .5rem; background: var(--chrome); border-bottom: 1px solid var(--line); }
.tools { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.status { color: var(--warn); font-size: .9375rem; }

/* Plain tabs: the selected one is white and joins the panel below it. */
.tabs { display: flex; gap: .25rem; padding: .5rem .5rem 0; background: var(--chrome); border-bottom: 1px solid var(--line); }
.tabs button {
  position: relative; top: 1px; padding: .45rem 1rem; border: 1px solid transparent; border-bottom: 0; border-radius: 4px 4px 0 0;
  background: transparent; color: var(--muted); font-size: .9375rem; line-height: 1.3; cursor: pointer;
}
.tabs button:hover { color: var(--text); background: var(--chrome-hover); }
.tabs button[aria-selected="true"] { background: var(--page); color: var(--text); border-color: var(--line); font-weight: 700; }

.app-body { display: grid; grid-template-columns: minmax(0, 1fr); }
.app-main { min-width: 0; }
.panel.is-shown { animation: panel-in 120ms ease-out; }
@keyframes panel-in { from { opacity: 0; } }
.panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; padding: .6rem 1rem; border-bottom: 1px solid var(--line-soft); }
.panel-head-split { border-top: 1px solid var(--line-soft); }
.panel-label { font-size: .9375rem; color: var(--text); }

/* Editor: the highlights are drawn in a layer behind a transparent text area. Both layers must use the same
   font, size, spacing and padding, or the highlights drift from their words. */
.editor { position: relative; }
.editor-backdrop, .editor-input { padding: 1rem 1.25rem; font-family: var(--sans); font-weight: 400; font-size: 1.0625rem; line-height: 1.75; letter-spacing: normal; word-spacing: normal; tab-size: 4; font-kerning: normal; }
.editor-backdrop { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.editor-marks { white-space: pre-wrap; overflow-wrap: break-word; color: transparent; }
.editor-marks mark { padding: 0; margin: 0; border: 0; font: inherit; }
.editor-input {
  position: relative; z-index: 1; display: block; width: 100%; min-height: 22rem; border: 0; outline: none; resize: none; overflow: hidden;
  background: transparent; color: var(--text); white-space: pre-wrap; overflow-wrap: break-word; caret-color: var(--text);
}
.editor-input::placeholder { color: var(--muted); opacity: 1; }
.editor:focus-within { box-shadow: inset 0 0 0 2px var(--focus); }
.editor-plain .editor-input { min-height: 8rem; }

mark.hl { color: transparent; background: var(--mark); border-radius: 2px; box-shadow: 0 0 0 1px var(--mark); }
/* A possible name is a guess, so it also gets a dashed underline. */
mark.hl.is-maybe { text-decoration: underline dashed var(--text); text-decoration-thickness: 1px; text-underline-offset: 4px; }
/* Unticked: no highlight, a dotted line so it can still be found. */
mark.hl.is-kept { background: transparent; box-shadow: none; text-decoration: underline dotted var(--muted); text-decoration-thickness: 1px; text-underline-offset: 4px; }

.drop { position: absolute; inset: .5rem; z-index: 2; display: none; place-items: center; align-content: center; gap: .5rem; border: 2px dashed var(--link); background: var(--page); color: var(--text); }
.drop .i { width: 1.5rem; height: 1.5rem; color: var(--link); }
.editor.is-dragging .drop { display: grid; }

.doc { min-height: 22rem; padding: 1rem 1.25rem; font-size: 1.0625rem; line-height: 1.9; white-space: pre-wrap; overflow-wrap: break-word; }
#restored.doc { min-height: 8rem; }
.doc:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--focus); }
.doc-empty, .doc-note { color: var(--muted); font-size: 1rem; white-space: normal; }
.doc-note { margin-top: 1rem; }
/* A placeholder in the redacted copy: a black redaction bar with the placeholder in white. */
.tok { padding: .1em .35em; background: var(--bar); color: var(--bar-text); box-shadow: 0 0 0 1px var(--bar-edge); font-family: var(--mono); font-size: .875em; }
.tok.is-peek { background: var(--mark); color: var(--mark-text); box-shadow: none; font-family: var(--sans); font-size: 1em; }
mark.back { background: var(--mark); color: var(--mark-text); box-shadow: 0 0 0 1px var(--mark); }
.ph { padding: .05em .3em; background: var(--bar); color: var(--bar-text); box-shadow: 0 0 0 1px var(--bar-edge); font-family: var(--mono); font-size: .85em; white-space: nowrap; }

/* ---------- the Found list ---------- */
.found { padding: 1rem 1.25rem 1.25rem; border-top: 1px solid var(--line); }
.found h2 { font-size: 1.125rem; line-height: 1.3; font-weight: 700; }
.found-count { margin-top: .25rem; font-size: 1rem; }
.found-hint { margin-top: .5rem; color: var(--muted); font-size: .9375rem; line-height: 1.45; }
.found-empty { margin-top: 1rem; color: var(--muted); font-size: .9375rem; }
.grp { margin-top: 1.25rem; }
.grp ul { list-style: none; }
.grp-head { padding-bottom: .15rem; font-size: 1rem; font-weight: 400; color: var(--text); }
.hit-row { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: .6rem; padding: .4rem 0; cursor: pointer; }
.hit-check { width: 1.1rem; height: 1.1rem; margin-top: .2rem; accent-color: var(--link); cursor: pointer; }
.hit-body { display: grid; gap: .1rem; min-width: 0; }
.hit-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .6rem; }
.hit-value { font-size: 1rem; overflow-wrap: anywhere; }
.hit-token { font-size: .8125rem; color: var(--muted); }
.maybe, .kept-note { color: var(--muted); font-size: .9375rem; }
.hit-why { color: var(--muted); font-size: .875rem; line-height: 1.4; }
.hit.is-kept .hit-value { color: var(--muted); }
/* Text the visitor added has no checkbox, only a button to take it back out. */
.hit:not(:has(.hit-row)) { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; padding: .4rem 0; }
.take-out { flex: none; display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .6rem; border: 1px solid var(--line); border-radius: 4px; background: var(--page); color: var(--text); font-size: .875rem; cursor: pointer; }
.take-out:hover { background: var(--chrome-hover); }
.take-out .i { width: .875rem; height: .875rem; }
.remove-too { position: absolute; z-index: 3; min-height: 2rem; padding: .25rem .7rem; font-size: .9375rem; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); }
.remove-too .i { width: .9rem; height: .9rem; }

.app-foot { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1.25rem; padding: .6rem 1rem; border-top: 1px solid var(--line); background: var(--chrome); color: var(--muted); font-size: .9375rem; line-height: 1.45; }
.foot-lock { flex: 1 1 20rem; text-align: right; }

/* These rows are always in the page with a fixed height, so a message appearing never pushes anything down. */
.note-row { display: flex; align-items: center; min-height: 2.5rem; padding: 0 1.25rem; border-top: 1px solid var(--line-soft); color: var(--muted); font-size: .9375rem; }
#undo-row:not(:has(.undo-msg:not([hidden]))) { border-top-color: transparent; }
.note-stack { display: grid; align-content: center; gap: .15rem; min-height: 3.75rem; padding-block: .5rem; }
.copy-note { min-height: 1.45em; color: var(--done); }
.undo-msg { display: inline-flex; align-items: center; gap: .4rem; color: var(--text); }
.undo-msg .link-btn { padding: .5rem .25rem; }
#peek { touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
#peek[aria-pressed="true"] { background: var(--chrome-hover); }

/* ---------- the document sections under the tool ---------- */
.doc-section { max-width: 52rem; margin-top: 3rem; }
.doc-section h2 { font-size: 1.375rem; line-height: 1.3; font-weight: 700; }
.doc-section h3 { margin-top: 1.75rem; font-size: 1.125rem; line-height: 1.35; font-weight: 700; }
.doc-section p { margin-top: .75rem; }
.doc-section code { font-size: .875em; }
.how { margin-top: .75rem; padding-left: 1.5rem; list-style: decimal; }
.how li + li { margin-top: .5rem; }
.limits { margin-top: .5rem; padding-left: 1.5rem; list-style: disc; }
.limits li + li { margin-top: .4rem; }

.table-wrap { margin-top: .75rem; overflow-x: auto; }
.spec { width: 100%; border-collapse: collapse; font-size: 1rem; line-height: 1.45; }
.spec th, .spec td { padding: .5rem .75rem; text-align: left; vertical-align: top; border: 1px solid var(--line); }
.spec thead th { background: var(--chrome); font-weight: 700; }
.spec tbody th { font-weight: 400; }
.spec td.eg { white-space: nowrap; }
.spec .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.spec td.bad { color: var(--warn); }
.spec tr.unsupported th, .spec tr.unsupported td { color: var(--muted); }
.results th[scope="row"] { width: 100%; }

.code { margin-top: .75rem; padding: 1rem; overflow-x: auto; border: 1px solid var(--line); border-radius: 4px; background: var(--chrome); font-size: .875rem; line-height: 1.7; }
.code .c { color: var(--muted); }

.foot { margin-top: 3.5rem; border-top: 1px solid var(--line); padding-block: 1.25rem 2rem; color: var(--muted); font-size: .9375rem; }
.foot p + p { margin-top: .35rem; }

/* ---------- the shortcut sheet: opens and closes in 150 ms, opacity and scale only ---------- */
.sheet { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 1rem; background: rgba(0, 0, 0, .35); opacity: 0; transition: opacity 150ms cubic-bezier(.22, 1, .36, 1); pointer-events: none; }
.sheet.is-open { opacity: 1; pointer-events: auto; }
.sheet-card { width: min(32rem, 100%); max-height: 100%; overflow: auto; padding: 1.25rem; border: 1px solid var(--line); border-radius: 6px; background: var(--page); box-shadow: 0 8px 24px rgba(0, 0, 0, .2); transform: scale(.98); opacity: 0; transition: transform 150ms cubic-bezier(.22, 1, .36, 1), opacity 150ms cubic-bezier(.22, 1, .36, 1); outline: none; }
.sheet.is-open .sheet-card { transform: scale(1); opacity: 1; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.sheet-head h2 { font-size: 1.375rem; font-weight: 700; }
.keys { margin-top: .75rem; }
.keys > div { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: .75rem; padding: .6rem 0; border-top: 1px solid var(--line-soft); font-size: 1rem; }
.keys dt { color: var(--text); }
.keys dd { color: var(--muted); }
kbd { display: inline-block; min-width: 1.6em; padding: .05rem .4rem; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; background: var(--chrome); font-family: var(--sans); font-size: .875rem; text-align: center; }
.kbd { display: inline; min-width: 0; padding: 0; border: 0; background: none; }
.sheet-note { margin-top: .75rem; color: var(--muted); font-size: .9375rem; }

/* ---------- wider screens: the Found list sits beside the text ---------- */
@media (min-width: 48rem) {
  .spec tbody th { white-space: nowrap; }
  .results tbody th { white-space: normal; }
}
@media (min-width: 60rem) {
  .app-body { grid-template-columns: minmax(0, 1fr) 22rem; }
  .app-main { border-right: 1px solid var(--line); }
  /* The list never makes the tool taller than the text: it scrolls inside the height the editor sets. */
  .found { border-top: 0; contain: size; overflow-y: auto; overscroll-behavior: contain; }
  /* On a laptop the text area fills the first screen, so the Found list has room too. */
  .panel > .editor:not(.editor-plain) > .editor-input, #redacted.doc { min-height: max(22rem, calc(100vh - 19.5rem)); }
}
/* ---------- phones ---------- */
@media (max-width: 40rem) {
  .frame { padding-inline: 1rem; }
  .top h1 { font-size: 1.75rem; }
  .top-nav { gap: .25rem 1rem; }
  .app { margin-top: 1rem; }
  .toolbar .btn-primary { flex: 1 1 100%; justify-content: center; }
  .kbd { display: none; }
  .tabs { gap: 0; padding: .4rem .4rem 0; }
  .tabs button { flex: 1 1 auto; padding: .45rem .5rem; white-space: nowrap; }
  /* Shorter step names on a phone ("2. Redacted", "3. Put back"); screen readers still hear the full names. */
  .tab-long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .editor-backdrop, .editor-input, .doc { padding: .85rem 1rem; }
  .note-row { padding-inline: 1rem; }
  .note-stack { min-height: 5.5rem; }
  .found { padding-inline: 1rem; }
  .foot-lock { text-align: left; }
  .keys > div { grid-template-columns: 1fr; gap: .25rem; }
  .spec th, .spec td { padding: .45rem .5rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation: none !important; }
  .sheet-card { transform: none; }
}