/*
  Page chrome: the eye chart (empty state), its collapsed header row (photos in), the engine
  status row, the footer and the drop overlay.

  - Every chart row is a 3-column grid: [gutter | centered text | acuity label]. The left gutter
    mirrors the label column so the text stays optically centered on the page.
  - Row sizes are computed from the row's own width (container units), minus both gutters,
    so each row keeps its line count at any width. Below 480 px the labels go and the
    gutters collapse to zero.
  - Rules that keep the direction (app/CLAUDE.md, "Design"): no borders, no radii, no
    shadows, no gradients, no accent color here. Red/green live only in results.css.
*/

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

[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-plain);
  font-size: 1rem;
  line-height: 1.5;
}

a {
  color: inherit;
  text-underline-offset: 3px;
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: var(--s4);
  top: -64px;
  padding: var(--s2) var(--s3);
  background: var(--ink);
  color: var(--paper);
  z-index: 10;
}

.skip-link:focus {
  top: var(--s3);
}

.svg-defs {
  position: absolute;
}

/* ---------- The chart ---------- */

.chart {
  width: min(100% - 2 * var(--s4), var(--chart-width));
  margin-inline: auto;
  padding-top: clamp(var(--s6), 9vh, 104px);
}

.chart-rows {
  container-type: inline-size;
  /* Usable text width of a row: the column minus both gutters. */
  --row-text-width: calc(100cqi - 2 * var(--acuity-gutter));
}

.chart-facts {
  margin: 0;
  padding: 0;
  list-style: none;
}

.chart-row {
  display: grid;
  grid-template-columns: var(--acuity-gutter) minmax(0, 1fr) var(--acuity-gutter);
  align-items: baseline;
  padding-block: 0.42em;
}

.chart-row > :first-child {
  grid-column: 2;
}

.chart-text {
  margin: 0;
  font-family: var(--font-chart);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: var(--chart-tracking);
  /* Tracking adds space after the last letter; mirror it before the first to stay centered. */
  padding-left: var(--chart-tracking);
  text-align: center;
  text-transform: uppercase;
  text-wrap: balance;
}

.acuity {
  grid-column: 3;
  justify-self: end;
  color: var(--ink-gray);
  font-family: var(--font-plain);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* Row 1, the "big E": the glasses glyph. */
.chart-row-1 {
  align-items: center;
  padding-block: 0 0.2em;
}

.chart-glasses {
  justify-self: center;
  width: min(300px, 46cqi);
  height: auto;
  color: var(--ink);
}

.chart-row-2 {
  font-size: clamp(26px, var(--row-text-width) / 11.2, 60px);
  padding-block: 0.32em 0.38em;
}

.chart-row-2 .chart-text {
  font-size: 1em;
}

.chart-row-3 {
  font-size: clamp(17px, var(--row-text-width) / 23.4, 29px);
  cursor: pointer;
}

.chart-cell {
  display: grid;
  justify-items: center;
  gap: var(--s3);
}

.chart-row-4 {
  font-size: clamp(15px, var(--row-text-width) / 29, 23px);
  padding-top: 0.9em;
}

.chart-row-5 { font-size: clamp(14px, var(--row-text-width) / 34, 20px); }
.chart-row-6 { font-size: clamp(13px, var(--row-text-width) / 40, 16.5px); padding-top: 0.9em; }
.chart-row-7 { font-size: clamp(12.5px, var(--row-text-width) / 44, 15px); }
.chart-row-8 { font-size: clamp(12px, var(--row-text-width) / 48, 13.75px); }
.chart-row-9 { font-size: clamp(11.5px, var(--row-text-width) / 52, 12.75px); }
.chart-row-10 { font-size: clamp(11px, var(--row-text-width) / 56, 11.75px); }
.chart-row-11 { font-size: 11px; }

/* The one solid control: a black rectangle with white chart letters. */
.chart-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  margin-top: var(--s2);
  padding: 0 28px 0 calc(28px + var(--chart-tracking));
  background: var(--ink);
  border: 0;
  border-radius: 0;
  color: var(--paper);
  font-family: var(--font-chart);
  font-size: 17px;
  letter-spacing: var(--chart-tracking);
  text-transform: uppercase;
  cursor: pointer;
}

.chart-button:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.chart-button:disabled {
  background: var(--ink-gray);
  text-decoration: none;
  cursor: default;
}

/* Text-only actions (Add photos, Download all, Try again): an underlined chart line. */
.text-action {
  min-height: 44px;
  padding: 0 var(--s1);
  background: none;
  border: 0;
  color: var(--ink);
  font-family: var(--font-chart);
  font-size: 14px;
  letter-spacing: var(--chart-tracking);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  text-transform: uppercase;
  cursor: pointer;
}

.text-action:disabled {
  color: var(--ink-gray);
  cursor: default;
}

.sublabel {
  max-width: 44ch;
  margin: 0;
  color: var(--ink-gray);
  font-family: var(--font-plain);
  font-size: 13px;
  line-height: 1.45;
  text-align: center;
}

/* ---------- Collapsed: photos are in, the chart becomes one header row ---------- */

.chart-header {
  display: none;
}

.chart[data-state="has-photos"] {
  width: min(100% - 2 * var(--s4), var(--sheet-width));
  padding-top: var(--s4);
}

.chart[data-state="has-photos"] .chart-rows {
  display: none;
}

.chart[data-state="has-photos"] .chart-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2) var(--s5);
}

.chart-brand {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin: 0 auto 0 0;
  font-family: var(--font-chart);
  font-size: 22px;
  letter-spacing: var(--chart-tracking);
  text-transform: uppercase;
}

.chart-brand-glyph {
  width: 52px;
  height: auto;
}

/* ---------- Engine status: the bottom-most, tiniest row ---------- */

.engine-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s1) var(--s3);
  min-height: 44px;
  margin-top: var(--s5);
  color: var(--ink-gray);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.engine-status-bar {
  position: relative;
  flex: 0 1 140px;
  height: 2px;
  overflow: hidden;
  background: var(--ink-hairline);
}

.engine-status-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: var(--ink);
}

.engine-status[data-tone="ready"] .engine-status-bar,
.engine-status[data-tone="error"] .engine-status-bar {
  display: none;
}

.engine-status[data-tone="error"] {
  color: var(--ink);
}

.chart[data-state="has-photos"] .engine-status {
  justify-content: flex-start;
  margin-top: 0;
}

/* With photos in, the status only speaks up while loading or on error. */
.chart[data-state="has-photos"] .engine-status[data-tone="ready"] {
  display: none;
}

/* ---------- Footer and drop overlay ---------- */

.site-footer {
  width: min(100% - 2 * var(--s4), var(--chart-width));
  margin: var(--s7) auto 0;
  padding-bottom: var(--s6);
  color: var(--ink-gray);
  font-size: 12px;
  text-align: center;
}

.site-footer p {
  margin: 0;
}

.drag-overlay {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: var(--s5);
  background: var(--paper);
  pointer-events: none;
}

.drag-overlay p {
  margin: 0;
  font-family: var(--font-chart);
  font-size: clamp(24px, 5vw, 48px);
  letter-spacing: var(--chart-tracking);
  text-align: center;
  text-transform: uppercase;
}

/* Narrow: brand on its own line, the two text actions together on the line below. */
@media (max-width: 639px) {
  .chart[data-state="has-photos"] .chart-header {
    gap: 0 var(--s5);
  }

  .chart-brand {
    flex-basis: 100%;
    min-height: 44px;
  }
}

@media (max-width: 479px) {
  :root {
    --acuity-gutter: 0px;
  }

  .acuity {
    display: none;
  }

  .chart-brand {
    font-size: 18px;
  }

  .chart-brand-glyph {
    width: 40px;
  }
}

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

/* Work-in-progress row: the one row set in a box so it reads as a sign, not a chart line. Remove with the row in index.html once the trained model ships. */
.wip-row .chart-text { display: inline-block; padding: 0.35em 0.7em; border: 2px solid var(--ink); }