/* DocCheck · site-owned layer.
   The design system canon (node.css) is synced and never edited here
   (STD-010.2). This file holds the self-hosted fonts (STD-003.3) and the
   layout of the tool itself, which is not part of the canon. */

@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/ibmplexmono-400.woff2") format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/ibmplexmono-500.woff2") format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/ibmplexmono-600.woff2") format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/spacegrotesk.woff2") format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/spacegrotesk.woff2") format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/spacegrotesk.woff2") format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/spacegrotesk.woff2") format('woff2'); }

/* J-LAB accent, the five variables together (STD-010.4, hue 48).
   The canon sets these in an inline :root per page. They live here instead
   because STD-021.1 requires style-src 'self' and a static surface has no
   nonce to give an inline block. Same values, same five variables, one
   surface. Noted in the README as a delta. */
:root {
  --accent:      oklch(0.76 0.15 48);
  --accent-2:    oklch(0.65 0.18 25);
  --accent-h:    48;
  --accent-glow: oklch(0.76 0.15 var(--accent-h) / 0.32);
  --accent-soft: oklch(0.76 0.15 var(--accent-h) / 0.14);
}

/* ============================ LANDING EXTRAS ============================ */

.dc-section {
  position: relative; z-index: 1;
  padding: clamp(28px, 4vw, 56px) var(--gutter-x);
  border-top: 1px solid var(--line-soft);
}
.section-label {
  display: flex; align-items: center; gap: 10px;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 20px;
}
.section-label span[data-ico] { width: 16px; height: 16px; display: inline-block; }
.section-label svg { width: 16px; height: 16px; }

.dc-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 3vw, 40px); }
.trust h3 {
  font-family: "Space Grotesk", sans-serif; font-size: 17px; font-weight: 600;
  margin: 0 0 12px; color: var(--fg); letter-spacing: -0.01em;
}
.trust ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.trust li {
  font-size: 13.5px; line-height: 1.55; color: var(--fg-2);
  padding-left: 18px; position: relative; text-wrap: pretty;
}
.trust li::before {
  content: ''; position: absolute; left: 0; top: 8px;
  width: 7px; height: 1px; background: var(--accent);
}

.dc-finding {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 11px 0; border-bottom: 1px dashed var(--line-soft);
}
.dc-finding:last-child { border-bottom: 0; }
.dc-finding b { display: block; font-family: "Space Grotesk", sans-serif; font-size: 13.5px; font-weight: 600; color: var(--fg); line-height: 1.35; }
.dc-finding p { margin: 4px 0 0; font-size: 11.5px; color: var(--dim); line-height: 1.45; }
.dc-lvl {
  flex: 0 0 44px; font-size: 9.5px; letter-spacing: 0.12em; padding: 3px 0;
  text-align: center; border: 1px solid var(--line); color: var(--mid); border-radius: 2px;
}
.dc-high .dc-lvl { color: var(--accent-2); border-color: var(--accent-2); }
.dc-med  .dc-lvl { color: var(--accent); border-color: var(--accent); }
.dc-ok   .dc-lvl { color: var(--mid); }

/* ============================ THE TOOL ============================ */

body.dc-app { display: flex; flex-direction: column; min-height: 100dvh; }

/* `hidden` must win over a class that sets display. Several elements here are
   flex or grid containers toggled with the attribute, and without this the
   mode toggle stayed visible on Word and Excel, which have no page geometry
   for it to act on. */
[hidden] { display: none !important; }

.tool-head {
  position: relative; z-index: 1;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  padding: clamp(18px, 2.4vw, 30px) var(--gutter-x) 14px;
}
.tool-title {
  font-family: "Space Grotesk", sans-serif; font-weight: 600;
  font-size: clamp(22px, 2.6vw, 34px); line-height: 1.08; letter-spacing: -0.02em;
  margin: 6px 0 0; color: var(--fg); overflow-wrap: anywhere;
}
.tool-lead { margin: 8px 0 0; font-size: 13px; color: var(--fg-2); max-width: 54ch; }
.tool-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.tool-actions .btn { padding: 10px 15px; font-size: 11.5px; }
.tool-actions .btn[disabled] { opacity: 0.4; pointer-events: none; }

.tool-meta {
  position: relative; z-index: 1;
  padding: 0 var(--gutter-x) 14px;
  font-size: 11px; color: var(--dim); letter-spacing: 0.06em;
  border-bottom: 1px solid var(--line-soft);
}
.tool-meta.dc-busy { color: var(--accent); }
.dc-claim { color: var(--accent); }

.dc-work { position: relative; z-index: 1; flex: 1 1 auto; display: block; padding: 0; }
.dc-work.dc-dragging { outline: 1px dashed var(--accent); outline-offset: -10px; }

.dc-empty { padding: clamp(24px, 5vw, 64px) var(--gutter-x); max-width: 640px; }
.dc-plain { margin: 4px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; }
.dc-plain li { font-size: 12px; color: var(--dim); line-height: 1.5; padding-left: 14px; position: relative; }
.dc-plain li::before { content: ''; position: absolute; left: 0; top: 8px; width: 6px; height: 1px; background: var(--line); }

/* three panes, as the reference laid them out */
.dc-panes {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr) 340px;
  border-top: 1px solid var(--line-soft);
  min-height: 60vh;
}

.dc-rail {
  border-right: 1px solid var(--line-soft);
  max-height: calc(100dvh - 120px); overflow-y: auto;
  padding: 12px 10px 40px;
}
.dc-panehead {
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--dim); margin: 0 0 10px; padding: 0 4px;
  display: flex; justify-content: space-between;
}
.dc-panehead b { color: var(--fg-2); font-weight: 500; }

.dc-railitem {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 7px 5px; background: transparent; border: 0;
  border-bottom: 1px solid var(--line-soft);
  border-left: 2px solid transparent;
  cursor: pointer; text-align: left; color: inherit;
  transition: background .12s, border-color .12s;
}
.dc-railitem:hover { background: var(--bg-2); }
.dc-railitem.on { background: var(--bg-2); border-left-color: var(--accent); }
.dc-thumb {
  flex: 0 0 30px; height: 39px; background: var(--bg-3);
  border: 1px solid var(--line); overflow: hidden; display: block;
}
.dc-thumb .dc-page { width: 100%; height: 100%; display: block; }
.dc-railmeta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dc-railnum { font-size: 9.5px; color: var(--mid); }
.dc-raillabel {
  font-size: 10px; color: var(--dim); line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dc-flags { display: flex; gap: 3px; flex: 0 0 auto; }
.dc-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--line); display: block; }
.dc-dot.dc-redaction-failed { background: var(--accent-2); box-shadow: 0 0 6px var(--accent-2); }
.dc-dot.dc-hidden-text { background: var(--accent); box-shadow: 0 0 6px var(--accent); }
.dc-dot.dc-redactions { background: var(--mid); }
.dc-dot.dc-no-text-layer { background: transparent; border: 1px solid var(--line); }

.dc-viewer { display: flex; flex-direction: column; min-width: 0; }
.dc-viewhead {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 16px; border-bottom: 1px solid var(--line-soft);
  font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mid);
}
.dc-viewmodes { display: inline-flex; border: 1px solid var(--line); border-radius: 3px; overflow: hidden; }
.dc-mode {
  font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: 0.08em;
  padding: 4px 10px; background: transparent; color: var(--dim); border: 0; cursor: pointer;
  text-transform: uppercase;
}
.dc-mode.on { background: var(--accent); color: var(--bg); }
.dc-mode:not(.on):hover { color: var(--fg-2); }

.dc-stage {
  flex: 1 1 auto; overflow: auto; padding: 22px;
  display: flex; justify-content: center; align-items: flex-start;
  max-height: calc(100dvh - 170px);
}
.dc-page {
  width: min(100%, 640px); height: auto; display: block;
  box-shadow: 0 24px 60px -30px #000; border: 1px solid var(--line);
}
.dc-paper { fill: oklch(0.97 0.004 85); }
.dc-image { fill: oklch(0.86 0.004 240); }
.dc-text { fill: #111; font-family: "Space Grotesk", system-ui, sans-serif; white-space: pre; }
.dc-text-hidden { fill: oklch(0.55 0.19 25); font-weight: 600; }
.dc-fill { }
.dc-mark { fill: #000; }
.dc-mark.dc-mark-open { fill: #000; fill-opacity: 0.14; }
.dc-outline { fill: none; stroke-width: 1; }
.dc-outline-failed { stroke: oklch(0.55 0.19 25); stroke-dasharray: 3 2; }
.dc-outline-ok { stroke: oklch(0.55 0.02 240); stroke-dasharray: 2 3; }
.dc-outline-hidden { stroke: oklch(0.62 0.17 48); stroke-dasharray: 2 2; }
.dc-viewnote {
  margin: 0; padding: 10px 16px 16px; font-size: 10.5px; color: var(--dim);
  line-height: 1.5; border-top: 1px solid var(--line-soft);
}

.dc-findings {
  border-left: 1px solid var(--line-soft);
  max-height: calc(100dvh - 120px); overflow-y: auto;
  padding: 14px 16px 60px;
}
.dc-block { margin: 0 0 22px; }
.dc-blockhead {
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--dim); margin: 0 0 10px; padding-bottom: 7px;
  border-bottom: 1px solid var(--line-soft);
}
.dc-block-high .dc-blockhead { color: var(--accent-2); border-bottom-color: var(--accent-2); }
.dc-block-med .dc-blockhead { color: var(--accent); border-bottom-color: var(--line); }

.dc-item { padding: 9px 0; border-bottom: 1px dashed var(--line-soft); }
.dc-item:last-child { border-bottom: 0; }
.dc-quote {
  margin: 6px 0 0; padding: 8px 10px; background: var(--bg-2);
  border-left: 2px solid var(--accent-2);
  font-family: "IBM Plex Mono", monospace; font-size: 11.5px; line-height: 1.5;
  color: var(--fg); overflow-wrap: anywhere;
}
.dc-break { word-break: break-all; }
.dc-why { margin: 5px 0 0; font-size: 10px; color: var(--dim); letter-spacing: 0.04em; }
.dc-warn { color: var(--accent); }
.dc-p { margin: 0 0 8px; font-size: 12.5px; line-height: 1.55; color: var(--fg-2); }

.dc-jump {
  background: transparent; border: 1px solid var(--line); border-radius: 2px;
  color: var(--fg-2); font-size: 10px; letter-spacing: 0.08em; padding: 3px 8px;
  cursor: pointer; text-transform: uppercase;
}
.dc-jump:hover { border-color: var(--accent); color: var(--accent); }

.dc-kv { display: flex; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--line-soft); align-items: baseline; }
.dc-kv:last-child { border-bottom: 0; }
.dc-k { flex: 0 0 96px; font-size: 10px; color: var(--dim); text-transform: uppercase; letter-spacing: 0.08em; }
.dc-v { flex: 1 1 auto; font-size: 12px; color: var(--fg-2); overflow-wrap: anywhere; }

/* ---- document strip and exports (phase 2) ---- */

.dc-strip, .dc-exports {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  padding: 8px var(--gutter-x);
  border-bottom: 1px solid var(--line-soft);
}
.dc-striphead {
  font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--dim); margin-right: 4px;
}
.dc-doctab {
  background: transparent; border: 1px solid var(--line); border-radius: 2px;
  color: var(--fg-2); font-size: 10.5px; padding: 4px 9px; cursor: pointer;
  max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dc-doctab:hover { border-color: var(--accent); color: var(--accent); }
.dc-doctab.on { background: var(--accent); color: var(--bg); border-color: var(--accent); }

/* ---- right pane tabs ---- */

.dc-tabs {
  display: flex; gap: 0; border-bottom: 1px solid var(--line-soft);
  margin: -14px -16px 14px; padding: 0 16px;
}
.dc-tab {
  background: transparent; border: 0; border-bottom: 2px solid transparent;
  color: var(--dim); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 11px 12px; cursor: pointer;
}
.dc-tab:hover { color: var(--fg-2); }
.dc-tab.on { color: var(--accent); border-bottom-color: var(--accent); }

/* ---- strings ---- */

.dc-controls { display: flex; flex-direction: column; gap: 9px; margin-bottom: 16px; }
.dc-search {
  width: 100%; background: var(--bg-2); border: 1px solid var(--line); border-radius: 2px;
  color: var(--fg); font-size: 12px; padding: 8px 10px;
}
.dc-search:focus { outline: none; border-color: var(--accent); }
.dc-search::placeholder { color: var(--dim); }
.dc-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.dc-chip {
  background: transparent; border: 1px solid var(--line); border-radius: 2px;
  color: var(--dim); font-size: 9.5px; letter-spacing: 0.06em; padding: 3px 7px; cursor: pointer;
}
.dc-chip:hover { color: var(--fg-2); }
.dc-chip.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }

.dc-strrow {
  display: flex; align-items: baseline; gap: 9px;
  padding: 7px 0; border-bottom: 1px dashed var(--line-soft);
}
.dc-strrow:last-child { border-bottom: 0; }
.dc-strtype {
  flex: 0 0 62px; font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--dim);
}
.dc-strval { flex: 1 1 auto; font-size: 12px; color: var(--fg); overflow-wrap: anywhere; }
.dc-strcount { flex: 0 0 auto; font-size: 10px; color: var(--mid); }

/* ---- tags: the journalist's own marks ---- */

.dc-tagbar {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 9px 16px; border-top: 1px solid var(--line-soft);
}
.dc-taglabel {
  font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--dim); margin-right: 3px;
}
.dc-tagbtn {
  background: transparent; border: 1px solid var(--line); border-radius: 2px;
  color: var(--dim); font-size: 9.5px; letter-spacing: 0.06em; padding: 3px 8px; cursor: pointer;
}
.dc-tagbtn:hover { color: var(--fg-2); border-color: var(--mid); }
.dc-tagbtn.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.dc-dot.dc-tagged { background: var(--accent); }
.dc-dot.dc-hidden-content { background: var(--accent); box-shadow: 0 0 6px var(--accent); }

/* ---- Word and Excel have no page geometry ---- */

.dc-thumb-flat { background: var(--bg-2); }
.dc-textview {
  width: min(100%, 640px); background: oklch(0.97 0.004 85); color: #111;
  border: 1px solid var(--line); box-shadow: 0 24px 60px -30px #000;
  padding: 34px 38px; min-height: 320px;
}
.dc-bodytext {
  margin: 0 0 14px; font-size: 12.5px; line-height: 1.65;
  font-family: "Space Grotesk", system-ui, sans-serif; color: #111;
  overflow-wrap: anywhere;
}
.dc-bodyhidden {
  color: oklch(0.45 0.19 25); border-left: 2px dashed oklch(0.55 0.19 25);
  padding-left: 10px;
}
.dc-bodyhidden .dc-why { color: oklch(0.45 0.05 25); display: block; margin-top: 4px; }
.dc-quote-del { text-decoration: line-through; opacity: 0.85; }
.dc-revbar { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }

/* ============================ RESPONSIVE ============================ */

@media (max-width: 1180px) {
  .dc-panes { grid-template-columns: 170px minmax(0, 1fr) 300px; }
}
@media (max-width: 980px) {
  .dc-panes { grid-template-columns: 1fr; }
  .dc-rail, .dc-findings { max-height: none; border: 0; border-bottom: 1px solid var(--line-soft); }
  .dc-rail { display: flex; gap: 8px; overflow-x: auto; padding: 10px; }
  .dc-rail .dc-panehead { display: none; }
  #railitems { display: flex; gap: 8px; }
  .dc-railitem { width: auto; flex-direction: column; border-bottom: 0; border-left: 0; border-top: 2px solid transparent; }
  .dc-railitem.on { border-top-color: var(--accent); }
  .dc-raillabel { display: none; }
  .dc-stage { max-height: none; }
  .dc-two { grid-template-columns: 1fr; }
  .features { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  main { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .bg-sweep, .bg-grid, .mote, .live-dot { animation: none !important; }
  * { transition-duration: 0.01ms !important; }
}

/* ===================== THE ANSWER ==================================
   Everything below this tool's title used to arrive at once: a page
   viewer, a findings list, a strings tab, a structure dump. Four panels
   competing, and the one sentence that answers the question was a line
   inside the third one. This block is that sentence, given the room it
   is worth. It reads top to bottom: what this is, then what to do.
   Colours come from the canon (STD-010); nothing here defines its own. */

.dc-answer {
  padding: 22px var(--gutter-x) 20px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--bg-2);
}
.dc-answer[hidden] { display: none; }

.dc-a-head {
  display: flex; gap: 14px; align-items: baseline;
  max-width: 78ch;
}
.dc-a-lvl {
  flex: 0 0 auto; font-family: "Space Mono", monospace;
  font-size: 9.5px; letter-spacing: 0.14em; padding: 4px 7px;
  border: 1px solid var(--line); color: var(--mid); border-radius: 2px;
  position: relative; top: -3px;
}
.dc-a-high .dc-a-lvl { color: var(--accent-2); border-color: var(--accent-2); }
.dc-a-med  .dc-a-lvl { color: var(--accent);   border-color: var(--accent); }
.dc-a-ok   .dc-a-lvl { color: var(--mid); }

.dc-a-line {
  margin: 0; font-family: "Space Grotesk", sans-serif;
  font-size: clamp(17px, 2.1vw, 22px); font-weight: 600;
  line-height: 1.28; color: var(--fg);
}
.dc-a-high .dc-a-line { color: var(--accent-2); }

.dc-a-prov {
  margin: 12px 0 0; max-width: 78ch;
  font-size: 12.5px; line-height: 1.55; color: var(--fg-2);
}
.dc-a-prov b { color: var(--fg); font-weight: 600; }

.dc-a-next { margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.dc-a-next .dc-jump { font-size: 11px; }

.dc-a-quiet {
  margin: 12px 0 0; font-family: "Space Mono", monospace;
  font-size: 10.5px; letter-spacing: 0.04em; color: var(--dim);
}

@media (max-width: 720px) {
  .dc-answer { padding: 16px var(--gutter-x) 14px; }
  .dc-a-head { flex-direction: column; gap: 8px; }
  .dc-a-lvl { top: 0; align-self: flex-start; }
}