/* ==========================================================================
   HL-SG-001 REV A: Hammer Labs identity and interface standard, as CSS.
   Single source of truth. Loaded by the Astro layout and by every standalone
   widget under /widgets/ so an embedded panel and the page around it agree.

   Palette proportions from the standard: paper 60, ink 25, graphite 10,
   drafting blue 4, hammer orange 1. Orange marks exactly one thing per view.
   ========================================================================== */

:root {
  color-scheme: light;

  --paper:    #F7F5F0;  /* substrate */
  --sheet:    #FFFFFF;  /* a drawing laid on the substrate */
  --ink:      #16222E;  /* text, object edges */
  --graphite: #4A5868;  /* secondary text, detail edges */
  --blue:     #2D5B8E;  /* structure: links, reference lines, annotation */
  --orange:   #E8590C;  /* the finding, the anomaly, the action. One per view. */

  --hair:     #D8D3C8;  /* construction and container lines */
  --hair-2:   #EDEAE2;  /* interior rules inside a bounded block */
  --field:    #B9C2CC;  /* input borders */
  --link-under: #B9C2CC;

  --sans:  Archivo, "Helvetica Neue", Arial, sans-serif;
  --serif: "Source Serif 4", Georgia, serif;
  --mono:  "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* 8px module */
  --s1: 8px; --s2: 16px; --s3: 24px; --s5: 40px; --s8: 64px;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; background: var(--paper); }
body {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--orange); color: var(--paper); }

a { color: var(--blue); text-decoration: none; border-bottom: 1px solid var(--link-under); }
a:hover { color: var(--orange); border-bottom-color: var(--orange); }

/* --- type roles: the grotesque states, the serif explains, the mono measures - */

h1, h2, h3, h4 {
  font-family: var(--sans);
  color: var(--ink);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
h1 { font-weight: 800; font-size: clamp(30px, 4.2vw, 44px); line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 var(--s2); }
h2 { font-weight: 700; font-size: clamp(24px, 3vw, 34px); line-height: 1.1;  margin: 2em 0 0.4em; }
h3 { font-weight: 700; font-size: 20px; line-height: 1.25; margin: 1.8em 0 0.4em; }
h4 { font-weight: 600; font-size: 16px; margin: 1.6em 0 0.3em; }

.mono, .label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--graphite);
}

/* Section numbers, per the standard: orange ordinal, ink heading, baseline aligned. */
.sec {
  display: flex; align-items: baseline; gap: 20px;
  margin: 0 0 12px;
}
.sec .n { font-family: var(--mono); font-size: 13px; letter-spacing: 0.1em; color: var(--orange); }
.sec h2 { margin: 0; }

/* --- containers: hairlines, not shadows. Radius 0 to 2px, never more. ------- */

.panel { border: 1px solid var(--hair); background: var(--sheet); padding: var(--s3) 28px; }
.panel--paper { background: var(--paper); }
.bound { border: 1px solid var(--ink); }

/* --- controls --------------------------------------------------------------- */

.btn {
  display: inline-block;
  font-family: var(--sans); font-weight: 600; font-size: 14px;
  padding: 11px 22px; cursor: pointer;
  background: var(--ink); color: var(--paper);
  border: 1px solid var(--ink); border-radius: 0;
  text-decoration: none;
}
.btn:hover { background: var(--blue); border-color: var(--blue); color: var(--paper); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: transparent; border-color: var(--orange); color: var(--orange); }
.btn--bare {
  background: transparent; color: var(--blue); border: none; padding: 11px 6px;
  text-decoration: underline; text-underline-offset: 3px;
}
.btn--bare:hover { background: transparent; color: var(--orange); }
:where(a, button, input, select, [tabindex]):focus-visible {
  outline: 2px solid var(--orange); outline-offset: 2px;
}

input, select {
  border: 1px solid var(--field); background: var(--sheet); border-radius: 0;
  padding: 10px 12px; font-family: var(--mono); font-size: 14px; color: var(--ink);
}
input:focus, select:focus { border-color: var(--blue); outline: none; }

/* --- badges: bordered, mono, uppercase. Orange is a count of findings. ------ */

.badge {
  display: inline-block;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
  border: 1px solid var(--ink); padding: 4px 10px; color: var(--ink);
  text-decoration: none;
}
.badge--ref  { border-color: var(--blue);   color: var(--blue); }
.badge--find { border-color: var(--orange); background: var(--orange); color: var(--paper); }

/* --- tables: data is the interface ----------------------------------------- */

table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 1.4em 0; border: 1px solid var(--ink); }
thead th {
  font-family: var(--mono); font-weight: 500; font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--graphite);
  border-bottom: 1.5px solid var(--ink); padding: 10px 16px; text-align: left;
}
tbody td { border-bottom: 1px solid var(--hair-2); padding: 11px 16px; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--paper); }
/* numeric columns are mono and right-aligned; a failure gets orange and a sign */
td.num, th.num { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
.fail { color: var(--orange); font-weight: 600; }
.pass { color: var(--blue); }

/* --- code ------------------------------------------------------------------- */

code { font-family: var(--mono); font-size: 0.86em; background: var(--paper); border: 1px solid var(--hair); padding: 0.06em 0.3em; }
pre { background: var(--sheet); border: 1px solid var(--hair); padding: 16px 18px; overflow: auto; font-size: 13.5px; line-height: 1.6; }
pre code { background: none; border: none; padding: 0; }

hr { border: none; border-top: 1px solid var(--hair); margin: var(--s5) 0; }

/* --- rules of the sheet ------------------------------------------------------ */

.rule-heavy { border-top: 2px solid var(--ink); }
.rule-hair  { border-top: 1px solid var(--hair); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}