/* system/apps/text-size/styles.css
 *
 * Split out of index.html's shared <style> block (Sept 2026) -- see
 * start-here.md's "Each app owns its own styles.css" note for why.
 */

.text-size-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}

.text-size-slider-label {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--ink);
}

.text-size-readout {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--brand);
  min-width: 4ch;
  text-align: right;
}

/* Default range inputs render a tiny (~13px on iOS) thumb -- fine for
   a volume control, too fiddly for something meant to be dragged
   while eyeballing live text-size changes. `appearance:none` on both
   the input and its thumb/track pseudo-elements strips the native
   look entirely so a much larger custom thumb (34px, roughly the size
   of the app-badge glyphs it sits near) can replace it -- each
   vendor's thumb pseudo-element has to be written as its own separate
   rule (WebKit and Firefox don't share one), and a rule either
   browser doesn't recognize is just skipped, not applied with
   defaults, so listing both is required, not redundant. */
.text-size-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 64px; /* tall enough that the thumb has room to sit centered on the track */
  margin: 0 0 18px;
  background: transparent;
  cursor: pointer;
}

.text-size-slider::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: var(--line);
}
.text-size-slider::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: var(--line);
}

.text-size-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 64px;
  height: 64px;
  margin-top: -29px; /* centers the 64px thumb on the 6px track (WebKit doesn't do this automatically) */
  border-radius: 50%;
  background: var(--brand);
  border: 4px solid #fff;
  box-shadow: 0 2px 8px rgba(22, 41, 107, 0.35);
}
.text-size-slider::-moz-range-thumb {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--brand);
  border: 4px solid #fff;
  box-shadow: 0 2px 8px rgba(22, 41, 107, 0.35);
}

.text-size-slider:active::-webkit-slider-thumb { background: var(--brand-deep); }
.text-size-slider:active::-moz-range-thumb { background: var(--brand-deep); }

.text-size-preview {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 16px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  margin-bottom: 14px;
}

/* Deliberately their OWN classes rather than reused production ones
   (.sub, .log .name, bare <p> inside .app-shell, etc.) -- this panel
   sits inside the real #app-shell, so borrowing a shared class or
   even just a plain <p> tag risks silently picking up some other rule
   meant for a different context elsewhere in the stylesheet (found
   the hard way, back when all this CSS lived in one file: .app-shell
   p's mono styling was hijacking every plain <p> in here, including
   one wearing .sub, since a class+tag selector outranks a single
   class regardless of source order). Self-contained rules mean this
   preview always shows what it says it shows, independent of whatever
   else changes elsewhere. */
.text-size-preview-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-lg);
  color: var(--ink);
}
.text-size-preview-name {
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: var(--fs-lg);
  color: var(--ink);
}
.text-size-preview-body {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  color: var(--ink);
}
.text-size-preview-body-sm {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--slate);
}
.text-size-preview-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink);
}
.text-size-preview-caption {
  font-family: var(--font-sans);
  font-size: var(--fs-2xs);
  color: var(--slate-light);
}

.text-size-sample-btn {
  padding: 9px 16px;
  border-radius: 999px;
  border: 1.5px solid var(--brand);
  background: var(--brand);
  color: #fff;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-xs);
  cursor: default;
}

.text-size-note {
  font-family: var(--font-sans);
  font-size: var(--fs-3xs);
  color: var(--slate-light);
  line-height: 1.6;
  margin: 0;
}

/* Same rule as apps/chat, apps/notes, apps/keyboard-test, and
   manage-repo-files's commit-message field (each in their own
   styles.css now) -- floored at real 16px so this demo field actually
   proves the claim in the note below it, instead of just describing a
   floor it doesn't itself have. */
.text-size-field-demo {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-sans);
  font-size: max(16px, var(--fs-md));
  padding: 8px 10px;
  border-radius: 8px;
  border: 1.5px solid var(--line);
  margin-bottom: 10px;
}

/* New-style entry (main.js, Oct 14 2026): the NewShell content area is not
   scrolled by the shell, so this wrapper fits it and scrolls itself. The old
   app.js never emits this class. */
.text-size--shell {
  box-sizing: border-box;
  height: 100%;
  overflow-y: auto;
  padding: 12px;
}