/**
 * css/shell/format.css
 * Format screen specifics: hosting the app's real font picker inside a
 * setting row, and the document-alignment classes.
 *
 * Two things here are worth knowing:
 *
 * 1. The Font row contains the ACTUAL #bodyFontPicker widget (moved once, on
 *    first show — see js/shell/screen-format.js). Rebuilding a searchable
 *    1,900-font list in the shell would mean two implementations of the same
 *    thing; restyling the real one to look like a row value means there stays
 *    exactly one. Its dropdown is absolutely positioned inside the widget, so
 *    the card that holds it must not clip.
 *
 * 2. Document-wide alignment is the one genuinely NEW behaviour in the shell.
 *    The app's own align buttons act on a text SELECTION (alignSelectedText
 *    refuses without one), but the design's Alignment control means the whole
 *    document — so it is a class on #outputContent, applied here in CSS.
 *
 * Dependencies: css/shell/tokens.css, css/shell/screens.css.
 */

/* The Typography card must not clip the font picker's dropdown. */
#tsFormatTypography { overflow: visible; }

/* ---- the hosted font picker ------------------------------------------- */
.ts-fontpicker-host {
  flex: none;
  width: auto;
  max-width: 62%;
}
.ts-fontpicker-host .font-picker { width: auto; }

/* Make the app's trigger read as this screen's row value: no box, no border,
   name + chevron, aligned right. */
.ts-fontpicker-host .font-picker-trigger {
  width: auto;
  max-width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ts-text);
  font-size: 0.9375rem;
  gap: 0.375rem;
}
.ts-fontpicker-host .font-picker-trigger:hover,
.ts-fontpicker-host .font-picker-trigger.open { border: 0; background: transparent; }
.ts-fontpicker-host .font-picker-trigger-text { text-align: right; }
.ts-fontpicker-host .font-picker-trigger-text.placeholder { color: var(--ts-text-dim); }
.ts-fontpicker-host .font-picker-arrow { color: var(--ts-text-dim); font-size: 0.75rem; }

/* The dropdown is anchored to the trigger, which now sits at the right edge —
   pin it to the row instead so it can use the full width on a phone. */
.ts-fontpicker-host .font-picker-dropdown {
  right: 0;
  left: auto;
  width: 17rem;
  max-width: calc(100vw - 3rem);
  max-height: 60vh;
}

/* ---- page-colour swatches --------------------------------------------- */
/* The colours themselves are inline (they come from the app's tint table);
   only the "no tint" swatch needs a border so white-on-white stays visible. */
.ts-swatch[data-tint="none"] { border-color: var(--ts-text-faint); }

/* ---- document alignment ------------------------------------------------ */
/* Scoped to the block elements the reader actually renders, so the class can
   never fight per-selection alignment the user applied to a single paragraph
   (that lands as an inline style, which wins over these rules). */
#outputContent.ts-align-left    p, #outputContent.ts-align-left    li,
#outputContent.ts-align-left    h1, #outputContent.ts-align-left    h2,
#outputContent.ts-align-left    h3 { text-align: left; }

#outputContent.ts-align-center  p, #outputContent.ts-align-center  li,
#outputContent.ts-align-center  h1, #outputContent.ts-align-center  h2,
#outputContent.ts-align-center  h3 { text-align: center; }

#outputContent.ts-align-right   p, #outputContent.ts-align-right   li,
#outputContent.ts-align-right   h1, #outputContent.ts-align-right   h2,
#outputContent.ts-align-right   h3 { text-align: right; }

#outputContent.ts-align-justify p, #outputContent.ts-align-justify li {
  text-align: justify;
  /* Justified text on a narrow phone column opens rivers without hyphens. */
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* Seven swatches (the app's six tints plus "no tint") rather than the six of
   the original design — dropping one of the app's existing reading overlays
   to make the grid tidier would be a feature regression. */
#tsPageColours { grid-template-columns: repeat(7, 1fr); gap: 0.375rem; }
#tsPageColours .ts-swatch { height: 2.75rem; }

/* ============================================================
   CUSTOM COLOURS — the app's own Customize panel as an overlay

   "Custom colours" opens the real #customizePanel (heading/body colours,
   per-role fonts and sizes) rather than a shell copy of it. The panel already
   ships a sheet header with a Done button for exactly this presentation; the
   surrounding row's other tools are hidden so only the panel shows.
   ============================================================ */
body.ts-shell.ts-customize-open #alignCustomizeRow {
  display: block !important;
}
body.ts-shell.ts-customize-open #textAlignGroup,
body.ts-shell.ts-customize-open #textFormatGroup,
body.ts-shell.ts-customize-open #focusToolsBar,
body.ts-shell.ts-customize-open #customizeHeader { display: none !important; }

body.ts-shell.ts-customize-open #customizePanel {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 8500;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: var(--ts-bg);
}
body.ts-shell.ts-customize-open #customizeContent.open {
  height: 100%;
  max-height: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: calc(env(safe-area-inset-top, 0px) + 0.75rem) var(--ts-pad)
           calc(var(--ts-bottom-reserve) + 1rem);
}

/* ============================================================
   FITTING THE SCREEN

   Measured on the real device box (384x832 CSS px, confirmed from the
   WebView itself, not derived from panel pixels and density). The same
   compact row treatment the Listen screen already uses: 2.75rem keeps every
   row above the 44px touch-target guideline while giving back ~15px a row,
   and this screen has six of them.

   Appended at the end of the file on purpose — an equal-specificity rule
   placed later wins, so restating .ts-row above this point would silently
   undo it.
   ============================================================ */
#tsScreenFormat .ts-row { min-height: 2.75rem; padding: 0.5rem 0.875rem; }
#tsScreenFormat .ts-row-label { font-size: 0.875rem; }
#tsScreenFormat .ts-row-icon { width: 1.25rem; height: 1.25rem; }
#tsScreenFormat .ts-card { margin-bottom: 0.5rem; }
#tsScreenFormat .ts-card-title { padding: 0.625rem 0.875rem 0.375rem; }
#tsScreenFormat .ts-select-host select { font-size: 0.875rem; }
#tsScreenFormat .ts-card { margin-bottom: 0.375rem; }
#tsScreenFormat { padding-bottom: calc(var(--ts-bottom-reserve) + 0.5rem); }
#tsScreenFormat .ts-linkbtn { padding: 0.375rem; }
/* The swatches are a 44px touch target already; the row around them was the
   generous part. */
#tsPageColours { gap: 0.375rem; }