/* ============================================================================
   FirmClock — Base: reset, typography, focus, motif primitives
   ========================================================================= */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6.5rem;
  /* Safety net only — the layout is verified free of horizontal overflow.
     It must sit on <html>, not <body>: on <body> it makes the body its own
     scroll container (overflow-y resolves to auto) instead of propagating
     to the viewport. */
  overflow-x: hidden;
}

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--fg-primary);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--tracking-normal);
  font-feature-settings: "kern" 1, "liga" 1, "cv05" 1, "ss01" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
table { border-collapse: collapse; width: 100%; }

a {
  color: inherit;
  text-decoration: none;
  text-underline-offset: 0.22em;
  text-decoration-thickness: from-font;
}

/* --- Numerals: tabular wherever figures must align ----------------------- */
.tnum,
table,
input,
.metric { font-variant-numeric: tabular-nums; }

/* --- Typographic roles ---------------------------------------------------- */
.display-1,
.display-2,
.display-3 {
  font-family: var(--font-display);
  font-weight: 380;
  font-optical-sizing: auto;
  color: var(--fg-primary);
  text-wrap: balance;
}
.display-1 {
  font-size: var(--fs-display-1);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
}
.display-2 {
  font-size: var(--fs-display-2);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-display);
}
.display-3 {
  font-size: var(--fs-display-3);
  line-height: 1.2;
  letter-spacing: var(--tracking-tight);
}

.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--fg-secondary);
  letter-spacing: var(--tracking-normal);
  max-width: 58ch;
  text-wrap: pretty;
}

.prose p { max-width: var(--measure); color: var(--fg-secondary); text-wrap: pretty; }
.prose p + p { margin-top: var(--s-5); }

/* The eyebrow doubles as a position marker on the Interval Rule. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-metric);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--tracking-label-wide);
  text-transform: uppercase;
  color: var(--fg-muted);
}
.eyebrow::before {
  content: "";
  width: 9px;
  height: 10px;
  flex: none;
  border-left: 1px solid var(--fg-accent);
  border-top: 1px solid var(--fg-accent);
  border-bottom: 1px solid var(--fg-accent);
}
.eyebrow__index { color: var(--fg-accent); }

.label {
  font-family: var(--font-metric);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg-muted);
  font-weight: 500;
}

.metric {
  font-family: var(--font-metric);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* --- Accessibility -------------------------------------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: var(--s-3);
  left: var(--s-3);
  z-index: 200;
  transform: translateY(-180%);
  background: var(--ink-900);
  color: var(--paper-050);
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-sm);
  font-size: var(--fs-body-sm);
  font-weight: 500;
  transition: transform var(--dur-fast) var(--ease-out);
}
.skip-link:focus-visible { transform: translateY(0); }

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}
:focus:not(:focus-visible) { outline: none; }

::selection {
  background: var(--accent-200);
  color: var(--ink-900);
}
.on-ink ::selection {
  background: var(--accent-700);
  color: var(--paper-050);
}

/* ============================================================================
   THE INTERVAL RULE — the signature motif
   ----------------------------------------------------------------------------
   Time is drawn as a calibrated measure. A hairline baseline carries minor
   ticks at quarter-hour intervals and taller major ticks on the hour. Work
   recorded against that measure appears as a BAND, and every band state is
   distinguished by FORM as well as colour:

     recorded   open band, hairline outline, no end caps
     submitted  solid band, one leading end cap
     approved   solid band, end caps at both terminals
     missing    dashed hatch span with an open bracket

   The same geometry recurs in the hero, the dividers, the workflow spine,
   the reporting bars, the focus states and the footer terminal.
   ========================================================================= */

.rule {
  display: block;          /* the motif is used on <span>; it must be a box */
  position: relative;
  height: var(--tick-major-h);
  width: 100%;
  background-image:
    repeating-linear-gradient(to right,
      var(--tick-color) 0 var(--tick-w),
      transparent var(--tick-w) var(--tick-gap)),
    repeating-linear-gradient(to right,
      var(--tick-major-color) 0 var(--tick-w),
      transparent var(--tick-w) calc(var(--tick-gap) * 4));
  background-size:
    100% var(--tick-minor-h),
    100% var(--tick-major-h);
  background-position: left bottom, left bottom;
  background-repeat: repeat-x, repeat-x;
  border-bottom: 1px solid var(--line-soft);
}

.rule--fade {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}
.rule--dense { --tick-gap: 6px; }
.rule--tall { height: 14px; --tick-major-h: 14px; --tick-minor-h: 7px; }

.divider {
  position: relative;
  padding-inline: var(--gutter);
  padding-block-end: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
}
.divider .rule { max-width: var(--wide-max); margin-inline: auto; }

/* --- Bands ---------------------------------------------------------------- */
.band {
  position: relative;
  display: block;
  height: var(--band-h);
  border-radius: 1px;
  color: var(--fg-primary);
}
.band--recorded {
  background: var(--band-recorded-fill);
  box-shadow: inset 0 0 0 1px var(--band-recorded-line);
}
.band--submitted { background: var(--band-submitted-fill); }
.band--approved { background: var(--band-approved-fill); }
.band--missing {
  background: repeating-linear-gradient(
    -45deg,
    var(--band-missing-line) 0 1px,
    transparent 1px 5px
  );
  box-shadow: inset 0 0 0 1px var(--flag-300);
}

/* End caps: the structural signal of state. */
.band--submitted::before,
.band--approved::before,
.band--approved::after {
  content: "";
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 1px;
  background: currentColor;
}
.band--submitted::before,
.band--approved::before { left: 0; }
.band--approved::after { right: 0; }

/* --- Legend key ----------------------------------------------------------- */
.key {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-6);
  align-items: center;
}
.key__item {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-metric);
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.key__swatch { width: 22px; height: 8px; flex: none; }
/* Standalone hatch swatch — the legend must not depend on chart-internal rules. */
.key__swatch--hatch {
  background: repeating-linear-gradient(-45deg, var(--ink-300) 0 1px, transparent 1px 5px);
  box-shadow: inset 0 0 0 1px var(--ink-200);
}
.on-ink .key__swatch--hatch {
  background: repeating-linear-gradient(-45deg, #7C8F93 0 1px, transparent 1px 5px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

/* --- Reduced motion ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}