/* Compliance QC Tools: shared components. Status tags, results, citation links,
   Regulatory Basis panel and timeline. Markup comes from assets/js/core/ (citations.js,
   ui.js, timeline.js). Status colors: good = compliant / on time, bad = late / deficient,
   warn wash = flagged for review. Color is never the only signal: every status has words. */

/* ---------- Status tags (square labels, not pills) ---------- */
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.03em; line-height: 1.2;
  padding: 3px 8px; border-radius: 2px; border: 1px solid transparent; white-space: nowrap;
  background: var(--wash); color: var(--ink);
}
.tag.good { background: var(--good-wash); color: var(--good); }
.tag.bad { background: var(--bad-wash); color: var(--bad); }
.tag.warn { background: var(--warn-wash); color: var(--ink); border-color: var(--gold); }
.tag.draft { background: var(--panel); color: var(--ink-2); border-color: var(--ink-2); }
.tag.sample { background: var(--panel); color: var(--title); border-color: var(--title); }

/* ---------- Key results ---------- */
.keyfacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.keyfact { background: var(--wash); border-radius: 2px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; min-width: 0; border-top: 2px solid var(--gold); }
.keyfact .k { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-2); }
.keyfact .v { font-size: 18px; font-weight: 600; color: var(--ink); line-height: 1.25; }
.keyfact .c { font-size: 12px; }
.keyfact .cite { white-space: normal; overflow-wrap: anywhere; }

/* Results table: a normal table when its box is wide enough, stacked rows when narrow.
   A container query, so the table stacks by the space it has (the results panel is
   narrower than the window on desktop), not by the window width. */
.tablewrap { container-type: inline-size; }
.results-table td .tag { margin-top: 2px; white-space: normal; }
.results-table .daytype { display: block; color: var(--ink-2); font-size: 13px; white-space: normal; }
.results-table .cite { white-space: normal; }
@container (max-width: 599px) {
  .stack-table, .stack-table tbody, .stack-table tr, .stack-table th, .stack-table td { display: block; width: 100%; }
  .stack-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .stack-table tr { padding: 12px 14px; border-bottom: 1px solid var(--rule); }
  .stack-table tbody tr:last-child { border-bottom: 0; }
  .stack-table th, .stack-table td { padding: 2px 0; border: 0; }
  .stack-table td[data-label]::before { content: attr(data-label) ": "; color: var(--ink-2); font-size: 13px; }
  .stack-table tbody th { font-size: 15px; padding-bottom: 4px; }
}

/* ---------- Citation links ---------- */
.cite { color: var(--accent); font-size: 13px; font-weight: 500; white-space: nowrap; }
.cite .ext { display: inline-block; width: 8px; height: 8px; margin-left: 3px; vertical-align: 1px; }
.cite .ext path { fill: none; stroke: currentColor; stroke-width: 1.6; }
.cites { display: inline; }
.cites .sep { color: var(--ink-2); }
.cite .url { display: none; }

/* ---------- Regulatory Basis (collapsible) ---------- */
.basis { border: 1px solid var(--rule); border-radius: 2px; background: var(--panel); }
.basis h2 { font-size: inherit; margin: 0; }
.basis-toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 56px; padding: 12px clamp(16px, 2.4vw, 24px);
  font: 700 clamp(18px, 2.2vw, 21px)/1.25 var(--font); color: var(--title); text-align: left;
  background: var(--panel); border: 0; border-radius: 0; cursor: pointer;
}
.basis-toggle:hover { background: var(--wash); }
.basis-toggle .count { font-size: 13px; font-weight: 500; color: var(--ink-2); margin-left: 8px; }
.basis-toggle .chev { flex: none; width: 14px; height: 14px; transition: transform 0.15s; }
.basis-toggle .chev path { fill: none; stroke: var(--ink-2); stroke-width: 2; }
.basis-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }
.basis-body { padding: 0 clamp(16px, 2.4vw, 24px) clamp(16px, 2.4vw, 24px); display: flex; flex-direction: column; gap: 12px; }
.basis-body[hidden] { display: none; }
.basis-intro { font-size: 14px; color: var(--ink-2); }
.basis-table th:first-child, .basis-table td:first-child { width: 24%; }
.basis-table th:last-child, .basis-table td:last-child { width: 28%; }
.basis-table td .cite { white-space: normal; }
.basis-table .rule { max-width: 60ch; }
.basis-table .exam { display: flex; flex-direction: column; gap: 4px; }
.basis-table .exam .cite { font-size: 12.5px; font-weight: 400; }
.basis-table .src { display: block; color: var(--ink-2); font-size: 12.5px; margin-top: 2px; }
@container (max-width: 599px) {
  /* Stacked rows: every cell takes the full width. */
  .basis-table th:first-child, .basis-table td:first-child,
  .basis-table th:last-child, .basis-table td:last-child { width: 100%; }
  .basis-table td[data-label="Examiner reference"] { padding-top: 6px; }
}

/* ---------- Timeline ----------
   Vertical list by default (phone, tablet, print). Horizontal when the timeline panel is
   at least 900px wide (desktop). Marker shapes differ by status so color is not the only cue:
   deadline = filled square, earliest date = open diamond, waiting period = band, informational = open circle. */
.timeline { container-type: inline-size; container-name: tl; display: flex; flex-direction: column; gap: 16px; }
.tl-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--ink-2); margin: 0; padding: 0; list-style: none; }
.tl-legend li { display: inline-flex; align-items: center; gap: 8px; }

.shape { flex: none; display: inline-block; width: 12px; height: 12px; margin-top: 5px; }
.shape.deadline { background: var(--accent); }
.shape.earliest { border: 2px solid var(--accent); transform: rotate(45deg) scale(0.85); background: var(--panel); }
.shape.waiting { width: 18px; height: 10px; margin-top: 6px; background: var(--band); border: 1px solid var(--accent); }
.shape.info { border: 2px solid var(--ink-2); border-radius: 50%; background: var(--panel); }

.tl-scroll { min-width: 0; }
.tl { list-style: none; margin: 0; padding: 0; position: relative; }

/* Vertical (default) */
.tl > li { position: relative; display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 4px 16px; padding: 0 0 18px; }
.tl > li::before { content: ""; position: absolute; left: 121px; top: 6px; bottom: -6px; width: 1px; background: var(--rule); }
.tl > li:last-child::before { display: none; }
.tl-date { font-size: 14px; font-weight: 600; color: var(--ink); text-align: right; line-height: 1.35; padding-right: 10px; }
.tl-date .wd { display: block; font-weight: 400; font-size: 12.5px; color: var(--ink-2); }
.tl-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.tl-item { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 0 10px; align-items: start; }
.tl-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tl-label { font-weight: 600; font-size: 15px; line-height: 1.35; }
.tl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 13px; color: var(--ink-2); }
.tl-note { font-size: 13.5px; color: var(--ink-2); line-height: 1.45; }
.tl > li.tl-empty { display: none; }
.tl-span .tl-date { color: var(--ink-2); font-weight: 500; }
.tl-span .tl-label { font-weight: 500; }
.tl details { font-size: 12px; color: var(--ink-2); }
.tl summary { cursor: pointer; position: relative; display: inline-flex; align-items: center; min-height: 22px; color: var(--accent); }
/* Compact link, full 44px touch target: the hit area extends past the text without taking space. */
.tl summary::after { content: ""; position: absolute; inset: -11px -4px; }
.tl details ol { margin: 4px 0 0; padding-left: 20px; }

@media (max-width: 479px) {
  .tl > li { grid-template-columns: 104px minmax(0, 1fr); gap: 4px 12px; }
  .tl > li::before { left: 98px; }
  .tl-date { font-size: 13px; padding-right: 12px; }
}

/* Horizontal (desktop). Only when timeline.js marks the timeline .tl-across (few enough dates to
   fit side by side); with more dates the vertical list is used at every width. */
@container tl (min-width: 900px) {
  .tl-across .tl-scroll { overflow-x: auto; padding-bottom: 6px; }
  /* timeline.js sets --col on each date and --c1 / --c2 / --row on each waiting period
     (waiting periods that share a column get separate rows above the dates). */
  .tl-across .tl {
    display: grid; grid-auto-rows: auto;
    grid-auto-columns: minmax(108px, 1fr); column-gap: 0; row-gap: 8px;
  }
  .tl-across .tl > li { grid-row: var(--row); grid-column: var(--col); display: flex; flex-direction: column; gap: 10px; padding: 0 10px 4px 0; }
  /* Narrow columns: the shape sits above the text so labels get the full column width. */
  .tl-across .tl-item { grid-template-columns: minmax(0, 1fr); gap: 6px 0; }
  .tl-across .tl-item .shape { margin-top: 0; }
  .tl-across .tl-label { font-size: 13px; }
  .tl-across .tl .tag { white-space: normal; }
  .tl-across .tl .cite { font-size: 12px; white-space: normal; overflow-wrap: anywhere; }
  .tl-across .tl-span .tl-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tl-across .tl > li.tl-empty { display: flex; }
  .tl-across .tl > li::before { left: 0; right: 0; top: 46px; bottom: auto; width: auto; height: 2px; background: var(--rule); display: block; }
  .tl-across .tl > li:last-child::before { right: auto; width: 24px; }
  .tl-across .tl-date { text-align: left; padding: 0 0 22px; }
  .tl-across .tl-items { position: relative; }
  .tl-across .tl > li.tl-span { grid-row: var(--row); grid-column: var(--c1) / var(--c2); padding: 0 14px 0 0; display: block; }
  .tl-across .tl > li.tl-span::before { display: none; }
  .tl-across .tl-span .tl-date { display: none; }
  .tl-across .tl-span .tl-items { background: var(--band); border: 1px solid var(--accent); border-radius: 2px; padding: 6px 10px; }
  .tl-across .tl-span .tl-item { grid-template-columns: minmax(0, 1fr); }
  .tl-across .tl-span .shape { display: none; }
  .tl-across .tl-span .tl-meta { color: var(--ink); }
}

/* Print-only timeline table (hidden on screen; print.css shows it). */
.tl-table { display: none; }

/* Calendars used: settings and closures behind every business-day count (decision 29). */
.calendars { display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; }
.calendars h3 { font-size: 14px; margin-bottom: 2px; }
.calendars p { color: var(--ink-2); }
.calendars p.cal { color: var(--ink); font-weight: 600; margin-top: 6px; }
.calendars p.cal:first-of-type { margin-top: 0; }

/* Regulatory Basis extras: a status tag beside the title, CFPB guidance on its own line. */
.basis-toggle .tag { margin-left: 10px; vertical-align: 2px; font-size: 11.5px; }
.basis-table .guidance { margin-top: 6px; }
.basis-table .guidance .cite { font-size: 12.5px; }

/* ---------- Tool input groups (trid.html and later tools) ---------- */
.group { display: flex; flex-direction: column; gap: 14px; padding-top: 18px; border-top: 1px solid var(--rule); min-width: 0; }
.group:first-of-type { border-top: 0; padding-top: 0; }
.group > h3 { font-size: 15px; font-weight: 700; color: var(--title); }
.group-help { font-size: 13px; color: var(--ink-2); line-height: 1.45; margin-top: -8px; }
/* Follow-up questions shown because of an earlier answer: a wash panel, no side stripe. */
.sub-fields { display: flex; flex-direction: column; gap: 14px; background: var(--wash); border-radius: 2px; padding: 12px; min-width: 0; }
.field .check { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 15px; font-weight: 400; cursor: pointer; }
.field .check input { width: 18px; height: 18px; min-height: 0; margin: 0; accent-color: var(--accent); }

/* A value the tool works out from the answers (shown next to the inputs, not asked). */
.derived { border: 1px solid var(--rule); border-radius: 2px; background: var(--panel); padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.derived .k { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-2); }
.derived .v { font-size: 16px; font-weight: 600; }
.derived .why { color: var(--ink-2); font-size: 13.5px; line-height: 1.45; }
.derived .cite { white-space: normal; }

/* Date lists (bank closures, days open) */
.add-row { display: flex; gap: 8px; }
.add-row input { flex: 1 1 auto; min-width: 0; }
.add-row .btn { flex: none; }
.date-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14.5px; }
.date-list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--wash); }
.date-list .btn { min-height: 44px; padding: 8px 12px; font-size: 13.5px; font-weight: 500; }

/* Results table: section rows, test text, notes and the counting detail. */
.results-table tr.group-row th { background: var(--band); color: var(--title); font-size: 13px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; padding-block: 7px; }
.results-table .test-text { display: block; font-size: 13.5px; margin-top: 4px; line-height: 1.45; }
.results-table .row-notes { margin: 6px 0 0; padding-left: 18px; font-size: 13px; color: var(--ink-2); line-height: 1.45; }
.results-table .row-notes li + li { margin-top: 3px; }
.results-table .second-line { display: block; font-size: 13px; color: var(--ink-2); margin-top: 2px; white-space: normal; }
.results-table .guidance-cites { display: block; margin-top: 4px; font-size: 12.5px; color: var(--ink-2); }
.results-table details { font-size: 12px; color: var(--ink-2); margin-top: 6px; }
.results-table summary { cursor: pointer; position: relative; display: inline-flex; align-items: center; min-height: 22px; color: var(--accent); }
.results-table summary::after { content: ""; position: absolute; inset: -11px -4px; }
.results-table details ol { margin: 4px 0 0; padding-left: 20px; }
.results-table tr.not-applicable th { font-weight: 500; color: var(--ink-2); }
.messages { display: flex; flex-direction: column; gap: 8px; }
.messages ul { margin: 0; padding-left: 18px; }
@container (max-width: 599px) {
  .results-table tr.group-row { padding: 0; }
  .results-table tr.group-row th { padding: 7px 14px; }
}

/* Print controls beside the Print button (trid.html) */
.print-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px 16px; }
.print-controls .check { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 14px; cursor: pointer; }
.print-controls .check input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.results-table .gc-see { display: none; }
.calendars .cal-compact { display: none; }