/*
  Engaged Views — brand stylesheet
  Small and confident: a tool, not a campaign.
  System font stack only. No CDN, no webfonts, no icon font.

  Loads AFTER base.css and targets the real markup in index.html / sources/index.html
  (the "ev-" prefixed classes cto owns). Structure: tokens -> base -> layout ->
  header -> controls -> previews/shelf -> sources table -> about/footer.

  Hard rule (cto, OPS.md): never set width/height on .ev-shelf__thumb or
  font-size/line-height on .ev-shelf__title. Those numbers are the product.
*/

:root {
  /* ---- color: neutral ink & paper, one accent ---- */
  /* Deliberately not red — the preview surfaces must never read as YouTube. */
  --color-bg: #fafafa;
  --color-surface: #ffffff;
  --color-surface-sunken: #f2f2f0;
  --color-border: #e0e0dc;
  --color-border-strong: #c9c9c3;

  --color-ink: #16181c;
  --color-ink-soft: #4b4f56;
  --color-ink-faint: #7a7e85;

  --color-accent: #2f5d50;       /* deep pine — confident, not corporate blue, not YT red */
  --color-accent-strong: #204239;
  --color-accent-soft: #e4ede9;

  --color-focus: #1c6ef2;        /* focus ring only: kept distinct from brand accent for clarity */

  /* "sourced" vs "approximate" evidence flags */
  --color-sourced-ink: #204239;
  --color-sourced-bg: #e4ede9;
  --color-approx-ink: #7a4a12;
  --color-approx-bg: #faf0e1;

  /* form error — muted brick, kept well away from YouTube red */
  --color-error-ink: #7a3b34;
  --color-error-bg: #f6ece9;

  /* placeholder "shelf" chrome — visually neutral, not a YouTube imitation */
  --color-chrome-bg: #eceeef;
  --color-chrome-line: #d7dadd;

  /* ---- type ---- */
  --font-sans:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
    "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  --font-mono:
    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* modular scale, ~1.2 ratio, rounded to sane rem steps */
  --text-xs: 0.75rem;    /* 12px — captions, source citations */
  --text-sm: 0.875rem;   /* 14px — labels, secondary copy */
  --text-base: 1rem;     /* 16px — body */
  --text-md: 1.125rem;   /* 18px — emphasized body */
  --text-lg: 1.375rem;   /* 22px — section headings */
  --text-xl: 1.75rem;    /* 28px — page title */
  --text-2xl: 2.25rem;   /* 36px — wordmark, hero */
  --text-3xl: clamp(2.5rem, 2rem + 2vw, 3.375rem); /* 40–54px — the one hero title on the page */

  --leading-tight: 1.2;
  --leading-normal: 1.5;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-bold: 700;

  /* ---- spacing: 4px base grid ---- */
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.5rem;   /* 24px */
  --space-6: 2rem;     /* 32px */
  --space-7: 3rem;     /* 48px */
  --space-8: 4rem;     /* 64px */

  /* ---- shape ---- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* ---- motion ---- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --duration-fast: 120ms;

  /* ---- content measure ---- */
  --measure: 68ch;
  --page-max: 1120px;
}

/* ---------------------------------------------------------------------- */
/* Base                                                                    */
/* ---------------------------------------------------------------------- */

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

body {
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  max-width: 100%;
}

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

::selection {
  background: var(--color-accent-soft);
  color: var(--color-accent-strong);
}

.ev-skip-link {
  background: var(--color-ink);
  color: #fff;
  border-radius: 0 0 var(--radius-sm) 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-decoration: none;
}

h1, h2, h3 {
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
  color: var(--color-ink);
}

.ev-link {
  color: var(--color-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.ev-link:hover {
  color: var(--color-accent-strong);
}

/* No border: the sources tables carry several of these per cell, and a border
   on each turns a dense table into a wall of boxes. Background alone is
   enough to read as "quoted code" against the surrounding prose. */
.ev-code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--color-surface-sunken);
  border-radius: var(--radius-sm);
  padding: 0.05em 0.35em;
  overflow-wrap: anywhere;   /* fetch URLs and long selectors have no spaces to wrap on */
}

.ev-approx {
  color: var(--color-approx-ink);
}

/* ---------------------------------------------------------------------- */
/* Page shell                                                             */
/* ---------------------------------------------------------------------- */

.ev-header,
.ev-main,
.ev-footer {
  max-width: var(--page-max);
  margin: 0 auto;
}

.ev-header {
  padding-top: var(--space-7);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-border);
}

.ev-wordmark {
  margin: 0 0 var(--space-4);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.ev-header .ev-wordmark a {
  color: inherit;
  text-decoration: none;
}

.ev-title {
  margin: 0 0 var(--space-3);
  font-size: var(--text-3xl);
  letter-spacing: -0.02em;
}

.ev-promise {
  margin: 0;
  max-width: var(--measure);
  font-size: var(--text-md);
  color: var(--color-ink-soft);
}

.ev-main {
  padding-top: var(--space-6);
  padding-bottom: var(--space-7);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.ev-footer {
  padding-top: var(--space-5);
  padding-bottom: var(--space-6);
  border-top: 1px solid var(--color-border);
}

.ev-footer__line {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
}

.ev-footer__note {
  color: var(--color-ink-faint);
}

/* ---------------------------------------------------------------------- */
/* App: input + previews                                                  */
/* ---------------------------------------------------------------------- */

.ev-app {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}

@media (max-width: 860px) {
  .ev-app {
    grid-template-columns: 1fr;
  }
}

/* ---- controls (left column) ---- */

.ev-controls {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

@media (min-width: 861px) {
  .ev-controls {
    position: sticky;
    top: var(--space-5);
  }
}

.ev-controls__heading {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-ink-faint);
}

.ev-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.ev-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-ink);
}

.ev-title-input {
  width: 100%;
  resize: vertical;
  padding: var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-ink);
  font-family: inherit;
  font-size: var(--text-base);
}

.ev-title-input:hover {
  border-color: var(--color-ink-faint);
}

.ev-char-count {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
  text-align: right;
}

.ev-dropzone {
  display: block;
  padding: var(--space-5) var(--space-4);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-standard),
    background var(--duration-fast) var(--ease-standard);
}

.ev-dropzone:hover,
.ev-dropzone--dragover {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
  color: var(--color-accent-strong);
}

.ev-file-input {
  width: 1px;
  height: 1px;
  opacity: 0;
  position: absolute;
}

.ev-file-name {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
  word-break: break-all;
}

.ev-file-name--error {
  color: var(--color-error-ink);
  background: var(--color-error-bg);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
}

.ev-clear-button {
  align-self: flex-start;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-ink);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard);
}

.ev-clear-button:hover {
  background: var(--color-surface-sunken);
}

.ev-privacy-note {
  margin: 0;
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--color-ink-faint);
}

/* ---- previews (right column) ---- */

.ev-previews {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.ev-previews__heading {
  margin: 0;
  font-size: var(--text-lg);
}

.ev-previews__note {
  margin: calc(var(--space-2) * -1) 0 0;
  max-width: var(--measure);
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
}

.ev-noscript {
  padding: var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-approx-bg);
  color: var(--color-approx-ink);
  font-size: var(--text-sm);
}

/* Columns are derived from the widest real surface (560px, desktop-search's row
   layout), not an arbitrary minmax — D11. min(560px, 100%) means: give a full
   card its true width when there's room for it, otherwise collapse to one
   column rather than half-fitting two. Never shrinks the content itself. */
/* cto 2026-08-28, structural fix — designer please restyle freely, but keep the
   single column. auto-fit produced TWO ~355px tracks inside a ~735px column,
   while the widest shelf these cards must hold is 560px, so every card
   overflowed. Two 560px cards never fit side by side at our 1120px page max,
   so the honest layout is one column. */
.ev-surfaces {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: start;
}

.ev-surface {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  /* The card is the scroll container. A 560px preview in a 400px card scrolls
     the CARD sideways, so the preview keeps its true size and the PAGE never
     scrolls. This is D11 in one declaration. */
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.ev-surface__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.ev-surface__name {
  margin: 0;
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
}

.ev-surface__dims {
  margin: 0;
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  color: var(--color-ink-faint);
}

.ev-surface__note {
  margin: 0;
  max-width: 46ch;
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--color-ink-faint);
}

.ev-surface__flag {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
}

.ev-surface__flag--sourced {
  background: var(--color-sourced-bg);
  color: var(--color-sourced-ink);
}

.ev-surface__flag--approx {
  background: var(--color-approx-bg);
  color: var(--color-approx-ink);
}

.ev-surface__flag .ev-approx {
  font-weight: var(--weight-bold);
  color: inherit;
}

/* ---- the shelf mock itself ---- */
/* .ev-shelf__thumb width/height and .ev-shelf__title font-size/line-height are set
   inline by app.js from sourced numbers — never overridden here. */

/* base.css already caps .ev-shelf at max-width:100% of its card. When a shelf's
   true sourced width (up to 560px) is wider than the card, that clamp would
   otherwise crush its fixed-width children — instead it becomes a scroll
   track, so the content is still shown at full, honest pixel size (D11:
   the page accommodates the content, never the reverse). */
.ev-shelf {
  padding: var(--space-3);
  background: var(--color-chrome-bg);
  border: 1px solid var(--color-chrome-line);
  border-radius: var(--radius-md);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-strong) transparent;
}

.ev-shelf::-webkit-scrollbar {
  height: 6px;
}

.ev-shelf::-webkit-scrollbar-thumb {
  background: var(--color-border-strong);
  border-radius: 999px;
}

.ev-shelf::-webkit-scrollbar-track {
  background: transparent;
}

.ev-shelf__thumb {
  border-radius: var(--radius-sm);
  background: var(--color-border);
}

/* base.css sets min-width:0 on the row layout's meta column so flexbox can
   shrink it — but shrinking title text to a sliver is the same "accommodate
   the page" failure D11 forbids for the thumb. Give it a floor so a tight
   card scrolls (thumb intact, title legible) instead of squeezing text. */
.ev-shelf--row .ev-shelf__meta {
  min-width: 150px;
}

.ev-shelf__placeholder {
  color: var(--color-ink-faint);
  background: transparent;
}

.ev-shelf__title {
  color: var(--color-ink);
}

.ev-shelf__title--empty {
  color: var(--color-ink-faint);
}

.ev-shelf__bar {
  background: var(--color-border);
  border-radius: var(--radius-sm);
}

/* ---------------------------------------------------------------------- */
/* Sources (on-page section, and the standalone /sources/ page)           */
/* ---------------------------------------------------------------------- */

.ev-sources {
  padding: var(--space-5) var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.ev-sources__heading {
  margin: 0 0 var(--space-2);
  font-size: var(--text-lg);
}

.ev-sources__intro {
  max-width: var(--measure);
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
}

.ev-check-date {
  font-weight: var(--weight-medium);
  color: var(--color-ink);
}

.ev-sources__table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--space-4);
  font-size: var(--text-sm);
}

.ev-sources__caption {
  text-align: left;
  margin-bottom: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-ink-faint);
}

.ev-source-head th {
  padding: var(--space-3);
  border-bottom: 2px solid var(--color-border-strong);
  text-align: left;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-ink-faint);
}

.ev-source-row {
  border-bottom: 1px solid var(--color-border);
}

.ev-source-row:hover {
  background: var(--color-surface-sunken);
}

.ev-source-cell {
  padding: var(--space-4) var(--space-3);
  vertical-align: top;
  line-height: var(--leading-normal);
  color: var(--color-ink-soft);
}

.ev-source-cell--name {
  color: var(--color-ink);
  font-weight: var(--weight-medium);
}

.ev-source-cell--dims {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  color: var(--color-ink);
}

.ev-source-cell--title {
  color: var(--color-ink-faint);
}

.ev-source-cell--src {
  min-width: 22ch;
}

.ev-source-cell__sub {
  display: block;
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--color-ink-faint);
  white-space: normal;   /* defensive: never inherit nowrap from a cell ancestor */
}

/* Below ~640px a 4-column citation table can't reflow to fit without breaking
   words mid-URL/code. Contain the overflow to the table, not the page. */
@media (max-width: 640px) {
  .ev-sources__table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

.ev-unsourced {
  margin-top: var(--space-5);
  padding: var(--space-4) var(--space-5);
  background: var(--color-approx-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.ev-unsourced__heading {
  margin: 0 0 var(--space-3);
  font-size: var(--text-md);
  color: var(--color-approx-ink);
}

.ev-unsourced__list {
  margin: 0;
  padding-left: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.ev-unsourced__item {
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
  line-height: var(--leading-normal);
}

.ev-unsourced__label {
  color: var(--color-ink);
}

/* ---------------------------------------------------------------------- */
/* About                                                                   */
/* ---------------------------------------------------------------------- */

.ev-about {
  padding: var(--space-5) var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.ev-about__heading {
  margin: 0 0 var(--space-3);
  font-size: var(--text-lg);
}

.ev-about__body {
  max-width: var(--measure);
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
}

.ev-about__contact strong {
  color: var(--color-ink);
}

.ev-about > :last-child,
.ev-sources > :last-child {
  margin-bottom: 0;
}