/* Foldamer's local overrides. Loaded AFTER the shared shell, never before.
 *
 * Everything here is either (a) a component the network shell does not define
 * because only Foldamer needs it, or (b) the skip link, which belongs to the
 * page rather than the design system. Nothing here redefines a shared token:
 * the tokens have one home and it is not this repository.
 *
 * Every colour is a var(). A hex in this file is a token that escaped the
 * design system and will not follow it to 2.1 -- a test in test_web.py fails
 * on one appearing in the template, and the same rule applies here.
 */

/* --- Skip link ----------------------------------------------------------
 * First focusable element on every page. Off-screen until focused, then it
 * lands in the top-left corner as a real control. Not display:none: a hidden
 * element is not focusable, which defeats the entire point.
 */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 10;
  background: var(--surface-2); color: var(--chalk);
  padding: var(--s-3) var(--s-4); border: 1px solid var(--line-lit);
  border-radius: var(--radius); font-family: var(--sans); font-size: var(--t-sm);
}
.skip:focus { left: var(--s-4); top: var(--s-4); }

/* --- Agent lockup in the nav -------------------------------------------- */
.agent-mark { display: flex; align-items: baseline; gap: var(--s-2); }
.agent-mark .parent { font-family: var(--sans); font-size: var(--t-xs); color: var(--chalk-faint); letter-spacing: .04em; }
.agent-mark .agent-name { font-family: var(--serif); font-size: var(--t-md); font-weight: 600; color: var(--chalk); }

/* --- The screening form -------------------------------------------------- */
.screen-form { margin-top: var(--s-6); }
.screen-form .field { max-width: 640px; }
.screen-form .options { display: flex; flex-wrap: wrap; gap: var(--s-5); margin-top: var(--s-4); }
.screen-form .options label {
  font-family: var(--sans); font-size: var(--t-sm); color: var(--chalk-muted);
  display: inline-flex; align-items: center; gap: var(--s-2);
}

/* --- What each dimension is, on the empty state -------------------------- */
.dimgrid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  margin-top: var(--s-6);
}
.dim { background: var(--surface); padding: var(--s-4); }
.dim h3 { font-size: var(--t-base); font-weight: 600; margin: 0 0 var(--s-1); }
.dim p { font-size: var(--t-sm); color: var(--chalk-muted); margin: 0; line-height: 1.5; max-width: none; }
.dim .src { font-family: var(--mono); font-size: var(--t-xs); color: var(--chalk-faint); display: block; margin-top: var(--s-2); }

/* --- One scored dimension ------------------------------------------------
 * Ruled, not boxed. Three columns on a wide screen, stacked below 860px so
 * nothing scrolls sideways on a phone.
 */
.dimrow {
  display: grid; grid-template-columns: 200px 1fr 130px;
  gap: var(--s-5); align-items: start;
  padding: var(--s-4) 0; border-bottom: 1px solid var(--line);
}
.dimrow:last-child { border-bottom: 0; }
.dimrow h3 { font-family: var(--sans); font-size: var(--t-sm); font-weight: 600; margin: 0; }
.dimrow .statement { font-size: var(--t-sm); color: var(--chalk-muted); margin: 0; line-height: 1.55; max-width: none; }
.dimrow .evidence, .dimrow .calibration, .dimrow .provenance {
  font-size: var(--t-xs); color: var(--chalk-faint); margin: var(--s-2) 0 0; line-height: 1.5; max-width: none;
}
.dimrow .score { text-align: right; }

/* --- The sequence, shown back --------------------------------------------- */
.seq {
  font-family: var(--mono); font-size: var(--t-sm); background: var(--surface-2);
  padding: var(--s-3); border-radius: var(--radius);
  word-break: break-all; max-width: 420px; line-height: 1.6;
}
.seq .detail { color: var(--chalk-faint); }

.result-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s-6); flex-wrap: wrap; }

/* --- Notices -------------------------------------------------------------
 * A full border, never a side stripe. The one permitted side stripe in this
 * system is .verdict's, and it is permitted because it encodes the tier.
 */
.notice {
  border: 1px solid var(--line-lit); border-radius: var(--radius);
  padding: var(--s-3) var(--s-4); margin-top: var(--s-4);
  font-size: var(--t-sm); color: var(--chalk-muted);
}
.notice[data-kind="error"] { border-color: var(--tier-3); color: var(--chalk); }

.narrative-box {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--s-4); margin-top: var(--s-4);
  font-size: var(--t-sm); line-height: 1.6; color: var(--chalk-muted);
  white-space: pre-wrap; max-width: var(--measure);
}

/* --- Tables that are wider than a phone ----------------------------------
 * The one place horizontal scroll is allowed, and it is scoped to the table
 * rather than the page.
 */
.table-scroll { overflow-x: auto; margin-top: var(--s-4); }

/* --- Working state --------------------------------------------------------
 * An uncached screening was measured at 35.6 s. SC 4.1.3 is not optional at
 * that duration: something must announce that work started and finished.
 */
.working { font-family: var(--mono); font-size: var(--t-xs); color: var(--chalk-faint); margin-top: var(--s-3); }

@media (max-width: 860px) {
  .dimrow { grid-template-columns: 1fr; gap: var(--s-2); }
  .dimrow .score { text-align: left; }
  .screen-form .field { flex-wrap: wrap; }
}

/* --- Labels that are announced but not shown -----------------------------
 * Not display:none and not hidden: both remove the element from the
 * accessibility tree, which is the opposite of what a label is for.
 */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}