/* ============================================================
   Guidant Power — Base Styles
   Reset · typography · layout utilities · page-level patterns
   ============================================================ */

/* ----- Reset ----- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  height: 100%;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-primary);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--guidant-navy); text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg { display: block; }
button { font-family: var(--font-body); }
select { font-family: var(--font-body); }
input, textarea { font-family: var(--font-body); }

/* ----- Typography scale ----- */
h1 { font-size: 28px; font-weight: 700; }
h2 { font-size: 22px; font-weight: 700; }
h3 { font-size: 18px; font-weight: 700; }
h4 { font-size: 16px; font-weight: 700; }

/* ----- Typography utilities ----- */
.mono         { font-family: var(--font-mono); }
.text-secondary { color: var(--text-secondary); }
.text-sm      { font-size: 12px; }
.text-xs      { font-size: 11px; }
.font-bold    { font-weight: 700; }
.font-medium  { font-weight: 500; }
.nowrap       { white-space: nowrap; }

/* ----- Visibility ----- */
.hidden { display: none !important; }
/* Visible to a screen reader, not on screen. For a control whose purpose is obvious in context but
   which still needs a programmatic name — the dashboard's site pickers, whose only visible label is
   the option they currently show. */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ----- Spacing helpers ----- */
.mt-1 { margin-top:  4px; } .mt-2 { margin-top:  8px; }
.mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; }
.mt-6 { margin-top: 24px; } .mt-8 { margin-top: 32px; }
.mb-1 { margin-bottom:  4px; } .mb-2 { margin-bottom:  8px; }
.mb-3 { margin-bottom: 12px; } .mb-4 { margin-bottom: 16px; }
.mb-6 { margin-bottom: 24px; }

/* ----- Grid helpers ----- */
.grid-2   { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-3   { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.grid-4   { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.grid-kpi { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }

/* ----- App layout ----- */
.app-body {
  padding-top:  var(--topbar-height);
  padding-left: var(--sidebar-width);
  min-height: 100vh;
  transition: padding-left 0.25s;
}
.app-body.sidebar-collapsed { padding-left: var(--sidebar-collapsed-width); }
.page-content { padding: 24px; }

/* ----- Parent link -----
   One link to the page above, sitting where the breadcrumb trail used to (layout/parts.templ
   §ParentLink). Deliberately quiet: it is an exit, not a destination, and it must not compete with
   the page title 8px beneath it. The arrow shifts left on hover — the only motion, because the
   direction is the whole message. */
.parent-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--text-secondary);
  text-decoration: none;
}
.parent-link:hover { color: var(--guidant-navy); }
.parent-link-arrow { transition: transform 0.15s; }
.parent-link:hover .parent-link-arrow { transform: translateX(-2px); }

/* ----- Page header ----- */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 16px;
}
.page-title    { font-size: 22px; font-weight: 700; color: var(--guidant-navy); line-height: 1.2; }
.page-subtitle { font-size: 13px; color: var(--text-secondary); margin-top: 3px; }
.page-actions  { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }

/* ----- Internal (Guidant-side) ribbon ----- */
.internal-ribbon {
  background: var(--guidant-ink);
  color: var(--guidant-yellow);
  text-align: center;
  padding: 8px 24px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  margin: -24px -24px 24px;
}

/* ----- Future-tagged elements ----- */
.future-item { opacity: 0.45; pointer-events: none; cursor: not-allowed; }
.future-tag {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--wash-warning);
  color: var(--ink-warning);
  border: 1px dashed var(--edge-warning);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-left: 6px;
  vertical-align: middle;
}

/* ----- Empty state ----- */
.empty-state { text-align: center; padding: 60px 20px; }
.empty-state-icon  { font-size: 40px; margin-bottom: 12px; }
.empty-state-title { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.empty-state-body  { font-size: 13px; color: var(--text-secondary); }

/* ----- Skeleton loader ----- */
.skeleton {
  background: linear-gradient(90deg, var(--surface-muted) 25%, var(--skeleton-sheen) 50%, var(--surface-muted) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
  height: 14px;
}
@keyframes shimmer { to { background-position: -200% 0; } }

/* ----- Compliance banners ----- */
.compliance-banner {
  border-radius: var(--radius-md);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  font-size: 14px;
  font-weight: 500;
}
.compliance-banner.current   { background: var(--wash-mist); border: 1px solid var(--color-current);   color: var(--ink-steel); }
.compliance-banner.coming-due{ background: var(--wash-amber); border: 1px solid var(--color-coming-due); color: var(--ink-amber); }
.compliance-banner.scheduled { background: var(--wash-green); border: 1px solid var(--color-scheduled);  color: var(--ink-green); }
.compliance-banner.past-due  { background: var(--wash-red); border: 1px solid var(--color-past-due);  color: var(--color-past-due); }
.compliance-banner.delinquent{ background: var(--wash-crimson); border: 1px solid var(--color-delinquent); color: var(--color-delinquent); }

/* ----- The record section -----
   One block holding a finding, its recommendation and the customer's remediation, separated by
   rules (findings/page.templ §ONE RECORD, THREE BLOCKS).

   IT USED TO BE TWO, and they were styled to look unlike each other on purpose: a muted card badged
   "Record layer — Guidant-authored · read-only" above a white one with a navy border badged
   "Remediation — customer-owned". The ownership boundary is real and enforced in code; it is not
   something a customer has to be taught in order to read one recommendation. Both badges and the
   second card went on 2026-08-07, and .record-badge / .editable-section / .editable-badge went with
   them. */
.record-section {
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-bottom: 12px;
}
/* A block's heading row: its name and its chips. .record-line-end pushes one item to the far right
   and is used by the FINDING's date alone — the remediation's action used to sit there too, and
   moved to the left of the heading on 2026-08-09 (see .record-line-btn below). */
.record-line { display: flex; align-items: center; gap: 8px; }
.record-line-end { margin-left: auto; }

/* The remediation block is CLICKABLE ALONG ITS WHOLE AREA (2026-08-09), and it is a real <button> so
   that focus and keyboard activation come from the element rather than from script. The action moved
   from a labelled button at the right-hand end to an icon at the LEFT, in front of the block's name —
   the reader meets the affordance before the thing it acts on.

   It wraps the HEADING ROW AND THE ATTRIBUTION BENEATH IT, not just the row. Highlighting the label
   line alone read as a stray band across the middle of a block, and the attribution is the same
   record — a hover that stops halfway down it looks like a rendering fault rather than a target.

   The negative margin lets the hover surface reach the section's padding on all four sides, so the
   highlight spans the block's full width rather than stopping at the text. Its 16px matches
   .record-section's padding exactly; a smaller value leaves a visible margin of un-highlighted
   background down each edge. */
.record-line-btn {
  display: block; width: calc(100% + 32px);
  background: none; border: 0; border-radius: 6px;
  padding: 8px 16px; margin: -8px -16px;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
/* --tint-blue at low alpha over --surface-muted, rather than --surface: the section this sits in is
   #F4F4F4 and --surface is #F5F7FA, so the original hover was a one-point shift that was invisible
   on anything but a good monitor. This reads at a glance and still stays quiet enough for a surface
   the reader is not being asked to look at. */
.record-line-btn:hover { background: rgba(27, 50, 94, 0.07); }
.record-line-btn:focus-visible { outline: 2px solid var(--guidant-navy); outline-offset: 1px; }
.record-line-icon { flex: 0 0 14px; color: var(--text-secondary); display: inline-flex; }

/* Finding and Recommendation carry no action, so their heading would start 22px left of the
   remediation's and the three would not line up. This is that 22px: the icon's 14px plus the 8px
   gap. It is deliberately not applied to the remediation heading, which gets its offset from the
   icon actually being there. */
.record-line-indent { padding-left: 22px; }

/* The explanatory paragraph under each heading — the observation, the recommendation, the
   attribution. Indented by the same 22px so the sentence starts under the word that names it rather
   than under the icon column, which is what made the three blocks read as differently aligned. It
   applies inside the remediation button too, where the heading's offset comes from the icon. */
.record-text { padding-left: 22px; margin-top: 4px; }
.record-rule { border: none; border-top: 1px solid var(--border); margin: 12px 0; }

/* ----- Step forms (stepper) ----- */
.stepper {
  display: flex;
  align-items: center;
  margin-bottom: 32px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.step-item { display: flex; align-items: center; }
.step-circle {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
  flex-shrink: 0;
}
.step-circle.done   { background: var(--guidant-navy); color: white; }
.step-circle.active { background: var(--guidant-yellow); color: var(--guidant-navy); }
.step-circle.todo   { background: var(--surface-muted); color: var(--text-secondary); border: 1px solid var(--border); }
.step-label         { font-size: 12px; margin-left: 6px; white-space: nowrap; color: var(--text-secondary); }
.step-label.active  { font-weight: 700; color: var(--guidant-navy); }
.step-label.done    { color: var(--guidant-navy); }
.step-connector     { flex: 1; height: 2px; background: var(--border); margin: 0 8px; min-width: 16px; }

/* ----- Map ----- */
.map-outer {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--map-water);
  border: 1px solid var(--border);
}
.map-outer .us-map-img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
}
.map-legend {
  position: absolute;
  bottom: 16px; left: 16px;
  background: white;
  border-radius: var(--radius-md);
  padding: 12px 16px;
  box-shadow: var(--shadow-md);
  font-size: 12px;
  z-index: 10;
}
.map-legend-title { font-weight: 700; margin-bottom: 8px; }
.legend-item { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.legend-item:last-child { margin-bottom: 0; }
.legend-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.site-popup {
  position: absolute;
  background: white;
  border-radius: var(--radius-md);
  padding: 14px 16px;
  width: 230px;
  box-shadow: var(--shadow-md);
  z-index: 20;
  border: 1px solid var(--border);
}
.site-popup-close {
  position: absolute; top: 8px; right: 10px;
  background: none; border: none; cursor: pointer;
  font-size: 18px; color: var(--text-secondary); line-height: 1;
}

/* ----- Doc viewer ----- */
.doc-viewer-layout { display: flex; gap: 16px; height: calc(100vh - 210px); min-height: 480px; }
.doc-canvas {
  flex: 1;
  background: var(--doc-canvas);
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.doc-page {
  width: 520px; max-width: 88%;
  background: white;
  box-shadow: 0 4px 24px rgba(0,0,0,0.35);
  padding: 48px 56px;
  overflow: hidden;
  font-size: 11px;
  line-height: 1.6;
}
.doc-toolbar {
  position: absolute; bottom: 14px; left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.72);
  border-radius: 20px;
  display: flex; align-items: center; gap: 8px;
  padding: 7px 16px;
}
.doc-toolbar button {
  background: none; border: none; color: white;
  cursor: pointer; font-size: 15px; padding: 2px 6px;
  border-radius: 4px;
}
.doc-toolbar button:hover { background: rgba(255,255,255,0.15); }
.doc-toolbar span { color: rgba(255,255,255,0.75); font-size: 12px; white-space: nowrap; }
.doc-panel { width: 256px; display: flex; flex-direction: column; overflow: hidden; }
.doc-panel-inner { flex: 1; overflow-y: auto; }
/* The file being read, in the list of the job's other files. The sidebar has no heading above it,
   so the selected row is what tells a reader which of these the canvas is showing — bold alone was
   too quiet for that, being the same weight difference the rest of the app uses for emphasis. The
   secondary line has to be lightened too, or its --text-secondary grey lands on the navy. */
.doc-panel-current, .doc-panel-current:hover {
  background: var(--guidant-navy);
  color: white;
}
.doc-panel-current .text-secondary { color: rgba(255,255,255,0.75); }
/* The real deliverable, framed same-origin from /files/{id} — see internal/feature/reports/viewer.go.
   It fills .doc-canvas, so the dark backdrop shows only where the document does not reach. */
.doc-frame { width: 100%; height: 100%; border: 0; background: white; }

/* ----- Field action (mobile-first) ----- */
.field-action-wrap { max-width: 420px; margin: 0 auto; }
.field-action-header {
  background: var(--guidant-navy);
  color: white;
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  margin-bottom: 20px;
}
.field-action-header .asset-tag { font-family: var(--font-mono); font-size: 12px; opacity: 0.7; margin-bottom: 4px; }
.field-action-header h2 { font-size: 18px; margin-bottom: 4px; }
.field-action-header .location { font-size: 13px; opacity: 0.75; }
.field-btn {
  width: 100%;
  padding: 20px 24px;
  border-radius: var(--radius-md);
  border: none;
  font-size: 17px; font-weight: 700;
  cursor: pointer;
  text-align: left;
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 12px;
  transition: filter 0.15s, transform 0.1s;
}
.field-btn:hover  { filter: brightness(0.96); }
.field-btn:active { transform: scale(0.98); }
.field-btn-icon { font-size: 28px; flex-shrink: 0; }

/* ----- Responsive ----- */
@media (max-width: 1100px) {
  .grid-kpi { grid-template-columns: repeat(3, 1fr); }
  .grid-4   { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .grid-2, .grid-3, .grid-4, .grid-kpi { grid-template-columns: 1fr; }
  .page-header { flex-direction: column; }
  .doc-viewer-layout { flex-direction: column; height: auto; }
  .doc-panel { width: 100%; height: 300px; }
}