/**
 * css/shell/display.css
 * Display screen specifics: the document-overview stat tiles, the
 * Original/Enhanced preview header, and the Bionic strength block that nests
 * under its own toggle row.
 *
 * Dependencies: css/shell/tokens.css, css/shell/screens.css.
 */

/* ============================================================
   DOCUMENT OVERVIEW — four stat tiles
   ============================================================ */
.ts-stats {
  display: flex;
  align-items: stretch;
  padding: 0.875rem 0.25rem;
}

.ts-stat {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0 0.25rem;
  text-align: center;
}
.ts-stat + .ts-stat { border-left: 1px solid var(--ts-border-soft); }

.ts-stat-icon {
  width: 1.25rem; height: 1.25rem;
  color: var(--ts-text-dim);
}
.ts-stat-icon svg { width: 100%; height: 100%; }

.ts-stat-value {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--ts-text);
  line-height: 1.2;
  /* Long counts (46,421) must shrink rather than push the tile wider and
     break the four-across row. */
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ts-stat-label {
  font-size: 0.6875rem;
  line-height: 1.25;
  color: var(--ts-text-dim);
}

/* The enhanced-reading estimate is the payoff figure, so it carries the
   accent the rest of the app uses for "this is the improvement". */
.ts-stat.is-highlight .ts-stat-icon,
.ts-stat.is-highlight .ts-stat-value,
.ts-stat.is-highlight .ts-stat-label { color: var(--ts-accent-text); }

/* ============================================================
   PREVIEW HEADER — title with a segmented control on the right
   ============================================================ */
.ts-card-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem 0.75rem;
}
.ts-card-head .ts-card-title {
  flex: 1 1 auto;
  padding: 0;
}

/* The preview box reflects the pending modes, so it needs its own dark and
   dyslexic looks — the app's classes are scoped to #outputContent. */
.ts-preview.is-dark {
  background: #14161a;
  color: #e8eaed;
}
.ts-preview.is-dyslexic,
.ts-preview.is-dyslexic strong {
  font-family: 'OpenDyslexic', 'Comic Sans MS', sans-serif;
}

/* ============================================================
   BIONIC STRENGTH — nested under the Bionic Reading row
   ============================================================ */
.ts-substack {
  margin: 0 1rem 0.875rem;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--ts-border-soft);
  border-radius: 0.625rem;
  background: var(--ts-surface-2);
}
.ts-substack-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 0.25rem;
}
.ts-substack-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ts-text);
}
.ts-substack-value {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ts-text);
}

/* ============================================================
   FITTING THE SCREEN — see the matching block in format.css.
   ============================================================ */
#tsScreenDisplay .ts-row { min-height: 2.75rem; padding: 0.5rem 0.875rem; }
#tsScreenDisplay .ts-row-label { font-size: 0.875rem; }
#tsScreenDisplay .ts-row-icon { width: 1.25rem; height: 1.25rem; }
#tsScreenDisplay .ts-card { margin-bottom: 0.5rem; }
#tsScreenDisplay .ts-card-title { padding: 0.625rem 0.875rem 0.375rem; }
#tsScreenDisplay .ts-card { margin-bottom: 0.375rem; }
#tsScreenDisplay { padding-bottom: calc(var(--ts-bottom-reserve) + 0.5rem); }

/* The four stat tiles are a readout, not a control — no touch target to
   protect — so this is the cheapest height on the screen to give back. */
#tsScreenDisplay .ts-stats { padding: 0.625rem 0.25rem; }
#tsScreenDisplay .ts-stat { gap: 0.125rem; }
#tsScreenDisplay .ts-stat-icon { width: 1rem; height: 1rem; }
#tsScreenDisplay .ts-stat-value { font-size: 0.9375rem; }
/* Two lines is enough to see bionic bolding and the dark/dyslexic treatments
   — this preview is a sample of the styling, not something to read. */
#tsScreenDisplay .ts-preview { -webkit-line-clamp: 2; margin-bottom: 0.75rem; }
#tsScreenDisplay .ts-card-head { padding: 0.625rem 0.875rem 0.5rem; }
#tsScreenDisplay .ts-card { margin-bottom: 0.25rem; }
#tsScreenDisplay .ts-row-sub { font-size: 0.75rem; line-height: 1.3; }
/* Last of it. Only the switch is the tap target on these rows (the click
   handler matches .ts-switch[data-mode], not the row), so the row itself can
   be tighter without shrinking anything anyone has to hit. */
#tsScreenDisplay .ts-row { min-height: 2.5rem; padding: 0.4375rem 0.875rem; }
#tsScreenDisplay .ts-card-title { padding: 0.5rem 0.875rem 0.25rem; }
#tsScreenDisplay .ts-preview { padding: 0.625rem 0.875rem; }