/**
 * css/shell/screens.css
 * Shared building blocks for the shell's settings screens (Format, Display,
 * Listen, Library): cards, setting rows, switches, sliders, segmented
 * controls, steppers, swatches and the primary action button.
 *
 * Kept in one place so the four screens can't drift into four dialects of the
 * same row. Screen-specific rules live in that screen's own stylesheet and
 * should only ever *extend* what is here.
 *
 * Colour convention, taken from the design: a row's leading icon is purple
 * (it identifies the setting), while anything that means "on", "chosen" or
 * "do it" is green.
 *
 * Dependencies: css/shell/tokens.css.
 */

/* ============================================================
   SCREEN HEADINGS
   ============================================================ */
.ts-card {
  background: var(--ts-surface);
  border: 1px solid var(--ts-border);
  border-radius: var(--ts-radius);
  margin-bottom: 0.75rem;
  overflow: hidden;
}

.ts-card-title {
  padding: 0.875rem 1rem 0.625rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ts-text);
}

.ts-card-note {
  padding: 0 1rem 0.875rem;
  font-size: 0.75rem;
  color: var(--ts-text-faint);
  text-align: center;
}

/* ============================================================
   SETTING ROW
   ============================================================ */
.ts-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  min-height: 3.5rem;
  box-sizing: border-box;
}
.ts-row + .ts-row,
.ts-card-title + .ts-row { border-top: 1px solid var(--ts-border-soft); }

.ts-row-icon {
  flex: none;
  width: 1.5rem; height: 1.5rem;
  color: var(--ts-icon);
}
.ts-row-icon svg { width: 100%; height: 100%; }

.ts-row-body {
  flex: 1 1 auto;
  min-width: 0;
}
.ts-row-label {
  display: block;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ts-text);
}
.ts-row-sub {
  display: block;
  margin-top: 0.125rem;
  font-size: 0.8125rem;
  color: var(--ts-text-dim);
}

/* Right-hand value, optionally with a chevron for rows that open something. */
.ts-row-value {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  max-width: 55%;
  font-size: 0.9375rem;
  color: var(--ts-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ts-row-value svg { width: 1rem; height: 1rem; flex: none; color: var(--ts-text-dim); }

/* A row that is itself tappable (opens a picker, a panel, a modal). */
button.ts-row {
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
button.ts-row:active { background: var(--ts-surface-2); }

/* A row whose control needs the full width sits under its own label. */
.ts-row-stack {
  display: block;
  padding: 0.875rem 1rem;
}
.ts-row-stack + .ts-row,
.ts-row + .ts-row-stack { border-top: 1px solid var(--ts-border-soft); }

/* ============================================================
   SWITCH
   ============================================================ */
.ts-switch {
  flex: none;
  position: relative;
  width: 3.25rem; height: 1.875rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--ts-surface-3);
  cursor: pointer;
  transition: background 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.ts-switch::after {
  content: "";
  position: absolute;
  top: 0.1875rem; left: 0.1875rem;
  width: 1.5rem; height: 1.5rem;
  border-radius: 999px;
  background: #ffffff;
  transition: transform 0.15s ease;
}
.ts-switch[aria-checked="true"] { background: var(--ts-accent); }
.ts-switch[aria-checked="true"]::after { transform: translateX(1.375rem); }

/* ============================================================
   SLIDER
   ============================================================ */
.ts-slider-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.ts-slider-cap {
  flex: none;
  font-size: 0.8125rem;
  color: var(--ts-text-dim);
}
.ts-slider {
  flex: 1 1 auto;
  min-width: 0;
  height: 1.5rem;
  margin: 0;
  padding: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.ts-slider::-webkit-slider-runnable-track {
  height: 0.25rem;
  border-radius: 999px;
  background: var(--ts-track);
}
.ts-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1.125rem; height: 1.125rem;
  margin-top: -0.4375rem;   /* centres the thumb on the 4px track */
  border: 0;
  border-radius: 999px;
  background: var(--ts-icon);
}
.ts-slider::-moz-range-track {
  height: 0.25rem;
  border-radius: 999px;
  background: var(--ts-track);
}
.ts-slider::-moz-range-thumb {
  width: 1.125rem; height: 1.125rem;
  border: 0;
  border-radius: 999px;
  background: var(--ts-icon);
}
.ts-slider-value {
  flex: none;
  min-width: 3.5rem;
  font-size: 0.9375rem;
  color: var(--ts-text);
  text-align: right;
}

/* ============================================================
   STEPPER  (− value +)
   ============================================================ */
.ts-stepper {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.ts-stepper-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem; height: 2.25rem;
  padding: 0;
  border: 1px solid var(--ts-border);
  border-radius: 0.5rem;
  background: var(--ts-surface-2);
  color: var(--ts-text);
  font-size: 1.125rem;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ts-stepper-btn:active { background: var(--ts-surface-3); }
.ts-stepper-btn:disabled { opacity: 0.4; cursor: default; }
.ts-stepper-value {
  min-width: 3.75rem;
  font-size: 0.9375rem;
  color: var(--ts-text);
  text-align: center;
}

/* ============================================================
   SEGMENTED CONTROL
   ============================================================ */
.ts-segmented {
  display: flex;
  flex: none;
  border: 1px solid var(--ts-border);
  border-radius: 0.5rem;
  overflow: hidden;
}
.ts-seg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3125rem;
  padding: 0.5rem 0.625rem;
  border: 0;
  background: var(--ts-surface-2);
  color: var(--ts-text);
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ts-seg + .ts-seg { border-left: 1px solid var(--ts-border); }
.ts-seg svg { width: 1rem; height: 1rem; }
.ts-seg.active {
  background: var(--ts-accent);
  color: var(--ts-accent-ink);
  font-weight: 700;
}

/* A segmented control that spans the row rather than hugging its content. */
.ts-segmented-wide { flex: 1 1 auto; }
.ts-segmented-wide .ts-seg { flex: 1 1 0; }

/* ============================================================
   COLOUR SWATCHES
   ============================================================ */
.ts-swatches {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.5rem;
  margin-top: 0.625rem;
}
.ts-swatch {
  position: relative;
  height: 3.25rem;
  padding: 0;
  border: 1px solid var(--ts-border);
  border-radius: 0.625rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ts-swatch.selected {
  border-color: var(--ts-accent);
  box-shadow: 0 0 0 1px var(--ts-accent);
}
.ts-swatch.selected::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 1.25rem; height: 1.25rem;
  margin: -0.625rem 0 0 -0.625rem;
  border-radius: 999px;
  background: var(--ts-accent) center / 0.75rem 0.75rem no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2305130b' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9 17.5 20 6.5'/%3E%3C/svg%3E");
}

/* ============================================================
   BUTTONS
   ============================================================ */
.ts-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  margin: 0.25rem 0 0.5rem;
  padding: 1rem;
  border: 0;
  border-radius: 0.75rem;
  background: var(--ts-accent);
  color: var(--ts-accent-ink);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ts-cta:active { filter: brightness(0.94); }
.ts-cta svg { width: 1.25rem; height: 1.25rem; }
.ts-cta:disabled { opacity: 0.45; cursor: default; }

.ts-linkbtn {
  display: block;
  width: 100%;
  margin-bottom: 0.5rem;
  padding: 0.625rem;
  border: 0;
  background: transparent;
  color: var(--ts-accent-text);
  font-size: 0.9375rem;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.ts-ghostbtn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.875rem;
  border: 1px solid var(--ts-border);
  border-radius: 0.625rem;
  background: transparent;
  color: var(--ts-text);
  font-size: 0.9375rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ts-ghostbtn:active { background: var(--ts-surface-2); }
.ts-ghostbtn svg { width: 1.125rem; height: 1.125rem; color: var(--ts-icon); }

/* ============================================================
   READING-PAGE PREVIEW (Format + Display both show one)
   ============================================================ */
.ts-preview {
  margin: 0 1rem 1rem;
  padding: 0.875rem 1rem;
  border-radius: 0.625rem;
  background: var(--ts-page);
  color: var(--ts-page-ink);
  font-size: 1rem;
  line-height: 1.5;
}
.ts-preview p { margin: 0 0 0.625rem; }
.ts-preview p:last-child { margin-bottom: 0; }

/* ============================================================
   ROW VARIANTS
   ============================================================ */

/* A row whose control is a slider: the label stops growing so the track gets
   the space instead. Without this the label and the value squeeze the slider
   down to a stub on a narrow phone. */
/* 7.25rem is sized to hold "Letter spacing" on one line at 360px, the
   narrowest phone worth supporting; below that the label would wrap to two
   lines and make the row taller than its neighbours. */
.ts-row-slider .ts-row-body { flex: 0 0 7.25rem; }
.ts-row-slider .ts-row-label { white-space: nowrap; }
.ts-row-slider .ts-slider { flex: 1 1 auto; min-width: 3rem; }
.ts-row-slider .ts-slider-value { min-width: 3.25rem; }

/* Icon + label line above a full-width control inside .ts-row-stack. */
.ts-stack-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.125rem;
}

/* The UA's `[hidden] { display: none }` loses to any component rule that sets
   a display (every button and card here does), so hiding by attribute needs
   to be stated once, with weight, for the whole shell. */
body.ts-shell [hidden] { display: none !important; }

/* ============================================================
   ACTION SHEET
   A bottom sheet of actions. Used by the library row kebab and by the app
   bar menu, so it lives here rather than in either screen.
   ============================================================ */
.ts-sheet {
  position: fixed;
  inset: 0;
  z-index: 9200;
  display: flex;
  align-items: flex-end;
  background: rgba(0, 0, 0, 0.55);
}
.ts-sheet-panel {
  width: 100%;
  padding: 1rem 1rem calc(env(safe-area-inset-bottom, 0px) + 1.5rem);
  border-radius: 1rem 1rem 0 0;
  background: var(--ts-surface);
  border-top: 1px solid var(--ts-border);
}
.ts-sheet-title {
  margin-bottom: 0.75rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ts-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ts-sheet-action {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.9375rem 0.5rem;
  border: 0;
  border-top: 1px solid var(--ts-border-soft);
  background: transparent;
  color: var(--ts-text);
  font-size: 1rem;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.ts-sheet-action svg { width: 1.25rem; height: 1.25rem; color: var(--ts-icon); }
.ts-sheet-action.is-danger { color: var(--ts-danger); }
.ts-sheet-action.is-danger svg { color: var(--ts-danger); }


/* Section label inside an action sheet. */
.ts-sheet-section {
  padding: 0.875rem 0.5rem 0.375rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ts-text-faint);
}
.ts-sheet-section + .ts-sheet-action { border-top: 0; }

/* The app bar menu is longer than a row menu, so it scrolls rather than
   pushing its own actions off the bottom of the screen. */
.ts-menu-panel {
  max-height: 82vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Three lines, whatever the pending size and spacing are. The preview has to
   show what line spacing looks like, which needs more than one line — but its
   height must not run away with the screen when someone picks 30px text at
   3.0 spacing, which is exactly when they most need the controls below it to
   still be reachable. */
.ts-preview {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}