/* =============================================================
   v4-shell.css
   The Type Shifter 4 layout: persistent left sidebar, document
   canvas in the middle, contextual panel on the right.

   This file only positions and restyles. Every element it targets is
   the SAME element the original app created, moved into the new
   containers by v4-shell.js — so all 123 element IDs, every inline
   onclick and every JS hook keep working untouched.

   Scoped under body.v4 so nothing here can leak into the old layout.
   ============================================================= */

body.v4 {
  --v4-bg:        #0b0d0c;
  --v4-surface:   #121513;
  --v4-surface-2: #171b19;
  --v4-line:      rgba(255,255,255,0.09);
  --v4-line-soft: rgba(255,255,255,0.05);
  --v4-text:      #e9edeb;
  --v4-text-dim:  #9aa5a0;
  --v4-text-mute: #6b7671;
  --v4-accent:    #22c55e;
  --v4-accent-dim:#16a34a;
  --v4-sidebar-w: 236px;
  --v4-panel-w:   400px;
  --v4-topbar-h:  64px;

  background: var(--v4-bg) !important;
  color: var(--v4-text);
  margin: 0;
  overflow: hidden;                 /* the three columns scroll individually */
}

body.v4.light-mode {
  --v4-bg:        #f4f6f5;
  --v4-surface:   #ffffff;
  --v4-surface-2: #f0f2f1;
  --v4-line:      rgba(0,0,0,0.10);
  --v4-line-soft: rgba(0,0,0,0.06);
  --v4-text:      #14201b;
  --v4-text-dim:  #55635d;
  --v4-text-mute: #7d8a84;
}

/* ---------- frame ---------- */
.v4-app {
  display: grid;
  grid-template-columns: var(--v4-sidebar-w) minmax(0, 1fr) var(--v4-panel-w);
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

/* ---------- sidebar ---------- */
.v4-sidebar {
  background: var(--v4-surface);
  border-right: 1px solid var(--v4-line);
  display: flex;
  flex-direction: column;
  padding: 0.9rem 0.75rem;
  gap: 0.35rem;
  overflow-y: auto;
  min-width: 0;
}
.v4-brand {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.35rem 0.5rem 1.1rem;
  font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em;
}
/* The real Type Shifter mark, at exactly the size the placeholder tile was. */
.v4-brand-mark {
  width: 26px; height: 26px; border-radius: 7px; flex: none;
  display: block;
  object-fit: cover;
}
.v4-nav { display: flex; flex-direction: column; gap: 0.15rem; }
.v4-nav-item {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.62rem 0.7rem;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--v4-text-dim);
  font: inherit; font-size: 0.94rem; font-weight: 500;
  cursor: pointer; text-align: left; width: 100%;
}
.v4-nav-item:hover { background: var(--v4-surface-2); color: var(--v4-text); }
.v4-nav-item[aria-current="true"] {
  background: rgba(34,197,94,0.13);
  border-color: rgba(34,197,94,0.45);
  color: #6ee7a0;
  font-weight: 600;
}
.v4-nav-ico { width: 20px; text-align: center; flex: none; font-size: 1.02rem; }
.v4-nav-item[hidden] { display: none; }

.v4-status {
  margin-top: auto;
  background: var(--v4-surface-2);
  border: 1px solid var(--v4-line);
  border-radius: 12px;
  padding: 0.8rem 0.85rem;
  font-size: 0.82rem;
  color: var(--v4-text-dim);
  line-height: 1.45;
}
.v4-status-head {
  display: flex; align-items: center; gap: 0.45rem;
  color: var(--v4-accent); font-weight: 600; margin-bottom: 0.35rem;
}

/* ---------- main column ---------- */
.v4-main {
  display: flex; flex-direction: column;
  min-width: 0; min-height: 0;
  background: var(--v4-bg);
}
.v4-topbar {
  height: var(--v4-topbar-h);
  flex: none;
  display: flex; align-items: center; gap: 1rem;
  padding: 0 1.1rem;
  border-bottom: 1px solid var(--v4-line);
  background: var(--v4-surface);
}
.v4-doc-title {
  flex: 1; min-width: 0; text-align: center;
  font-weight: 600; font-size: 0.98rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.v4-doc-title .v4-doc-kind {
  color: var(--v4-text-mute); font-weight: 500; margin-left: 0.45rem;
}
.v4-topbar-slot {
  display: flex; align-items: center; gap: 0.55rem; flex: none;
}

/* the original toolbar row, restyled in place */
.v4-toolbar {
  flex: none;
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  padding: 0.65rem 1.1rem;
  border-bottom: 1px solid var(--v4-line-soft);
}
.v4-canvas {
  flex: 1; min-height: 0;
  overflow: auto;
  padding: 1.1rem 1.1rem 2rem;
  display: flex; justify-content: center;
}
.v4-canvas > * { width: 100%; max-width: 940px; }

/* ---------- right panel ---------- */
.v4-panel {
  background: var(--v4-surface);
  border-left: 1px solid var(--v4-line);
  display: flex; flex-direction: column;
  min-width: 0; min-height: 0;
}
.v4-panel-head {
  flex: none;
  display: flex; align-items: center; gap: 0.55rem;
  padding: 1.05rem 1.15rem 0.85rem;
  font-weight: 650; font-size: 1.02rem;
  border-bottom: 1px solid var(--v4-line);
}
.v4-panel-body { flex: 1; min-height: 0; overflow-y: auto; padding: 1.05rem 1.15rem 2rem; }
.v4-pane { display: none; }
.v4-pane.is-active { display: block; }
.v4-pane-empty {
  color: var(--v4-text-mute); font-size: 0.9rem; line-height: 1.6;
  border: 1px dashed var(--v4-line); border-radius: 12px; padding: 1rem;
}

/* ---------- restyle the relocated originals ---------- */
body.v4 .zoom-controls,
body.v4 .output-toggles-bar,
body.v4 .focus-tools-bar,
body.v4 .align-customize-row,
body.v4 .customize-panel,
body.v4 .tts-panel,
body.v4 #templateBlock,
body.v4 #uploadBlock,
body.v4 .output-actions {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  margin: 0 0 1rem !important;
  padding: 0 !important;
  max-width: none !important;
}
body.v4 .v4-toolbar .zoom-controls { margin: 0 !important; display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* the document card */
body.v4 .preview-wrapper {
  background: transparent !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 0 !important;
}
body.v4 .preview-container {
  border-radius: 14px;
  box-shadow: 0 18px 50px -22px rgba(0,0,0,0.75);
}

/* panel controls */
body.v4 .v4-panel .toggle-btn { width: 100%; justify-content: space-between; }
body.v4 .v4-panel .export-btn { width: 100%; margin: 0 0 0.5rem; }

/* ---------- Translate view ----------
   The web build's translate controls. Styled here rather than in
   styles-components.css because this block only ever appears inside the v4
   panel: the shell moves it there, and #mainContainer, where it sits in the
   markup, is hidden. Colours come from the same tokens as the rest of the
   shell so it reads as part of the panel rather than a transplant. */
body.v4 .v4-panel .ai-translate-block { display: block !important; }
body.v4 .v4-panel .ai-translate-hint,
body.v4 .v4-panel .ai-translate-foot {
  color: var(--v4-text-dim);
  font-size: 0.78rem;
  line-height: 1.5;
  margin: 0.5rem 0 0.75rem;
}
body.v4 .v4-panel .ai-translate-foot {
  margin: 1rem 0 0;
  padding-top: 0.75rem;
  border-top: 1px solid var(--v4-line);
  font-size: 0.72rem;
}
body.v4 .v4-panel .ai-translate-select {
  width: 100%;
  padding: 0.6rem 0.7rem;
  margin-bottom: 0.6rem;
  background: var(--v4-surface-2);
  border: 1px solid var(--v4-line);
  border-radius: 10px;
  color: var(--v4-text);
  font-size: 0.9rem;
}
body.v4 .v4-panel .ai-translate-btn,
body.v4 .v4-panel .ai-translate-revert {
  width: 100%;
  padding: 0.7rem 1rem;
  border-radius: 10px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
}
body.v4 .v4-panel .ai-translate-btn {
  background: linear-gradient(135deg, #06b6d4 0%, #7c3aed 100%);
  color: #fff;
}
body.v4 .v4-panel .ai-translate-btn:hover { filter: brightness(1.08); }
body.v4 .v4-panel .ai-translate-revert {
  margin-top: 0.5rem;
  background: transparent;
  border-color: var(--v4-line);
  color: var(--v4-text);
}
body.v4 .v4-panel .ai-translate-revert:hover { background: var(--v4-surface-2); }
body.v4 .v4-panel .ai-translate-engine {
  margin: 0 0 0.7rem;
  padding: 0.55rem 0.65rem;
  border-radius: 8px;
  background: var(--v4-surface-2);
  border: 1px solid var(--v4-line);
  color: var(--v4-text-dim);
  font-size: 0.74rem;
  line-height: 1.45;
}
body.v4 .v4-panel .ai-translate-engine strong { color: var(--v4-text); }
body.v4 .v4-panel .ai-translate-state {
  margin: 0.6rem 0 0;
  font-size: 0.78rem;
  color: #22d3ee;
}

/* things the new shell replaces.
   .app-breadcrumb is website-only: the shell fills the viewport, so a strip
   left under it would only add a scrollbar to an app that otherwise has none.
   It stays in the DOM (as does the footer) — the BreadcrumbList JSON-LD in the
   head is what search engines actually read for the trail. */
body.v4 > header,
body.v4 .app-breadcrumb,
body.v4 .app-footer,
body.v4 .mnav-tabbar,
body.v4 .mnav-backdrop,
body.v4 .mnav-export-btn,
body.v4 #mnavPanelHead,
body.v4 .action-stats-row,
body.v4 #outputStats { display: none !important; }

/* the old two-column frame is now just a parking area for anything the
   shell did not relocate; keep it in the DOM (JS still addresses it) but
   out of the way. */
body.v4 #mainContainer { display: none !important; }

/* focus mode: the shell collapses to the document alone */
body.v4.app-fullscreen .v4-sidebar,
body.v4.app-fullscreen .v4-panel,
body.v4.app-fullscreen .v4-topbar { display: none; }
body.v4.app-fullscreen .v4-app { grid-template-columns: minmax(0, 1fr); }

/* ---------- narrow screens ----------
   The shell cannot simply hand back to the original mobile layout, because it
   MOVED the document and the controls out of #mainContainer — standing down
   left the reader with an empty screen. So v4 stays in charge at every width
   and reflows instead: the sidebar becomes a scrolling tab strip along the top,
   the panel drops underneath the document. */
@media (max-width: 1100px) {
  .v4-app {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
  }
  .v4-sidebar {
    flex-direction: row;
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
    border-right: none;
    border-bottom: 1px solid var(--v4-line);
    padding: 0.5rem 0.6rem;
    gap: 0.4rem;
  }
  .v4-brand, .v4-status { display: none; }
  .v4-nav { flex-direction: row; gap: 0.35rem; }
  .v4-nav-item { white-space: nowrap; padding: 0.5rem 0.75rem; width: auto; }

  .v4-topbar { height: auto; padding: 0.6rem 0.8rem; flex-wrap: wrap; }
  .v4-doc-title { order: -1; flex-basis: 100%; text-align: left; }
  .v4-toolbar { padding: 0.55rem 0.8rem; }
  .v4-canvas { padding: 0.8rem 0.8rem 1.5rem; }
  .v4-canvas > * { max-width: none; }
  body.v4 .v4-canvas .preview-container { min-height: 0; }

  .v4-panel {
    border-left: none;
    border-top: 1px solid var(--v4-line);
    max-height: 45vh;
  }
  .v4-panel-head { padding: 0.75rem 0.85rem 0.6rem; }
  .v4-panel-body { padding: 0.75rem 0.85rem 1.25rem; }
}

/* =============================================================
   Panel rows
   The relocated toggle bars were built as horizontal strips. In the
   panel they need to read as a stacked list: label and description on
   the left, control on the right. Targeting the original markup rather
   than rebuilding it keeps every id and handler intact.
   ============================================================= */
body.v4 .v4-panel .output-toggles-bar,
body.v4 .v4-panel .focus-tools-bar,
body.v4 .v4-panel .align-customize-row {
  display: flex !important;
  flex-direction: column;
  gap: 0.55rem;
  align-items: stretch;
}

body.v4 .v4-panel .compare-section,
body.v4 .v4-panel .dark-output-section,
body.v4 .v4-panel .dyslexic-section,
body.v4 .v4-panel .bionic-section,
body.v4 .v4-panel .focus-tool {
  display: block;
  width: 100%;
  background: var(--v4-surface-2);
  border: 1px solid var(--v4-line);
  border-radius: 12px;
  padding: 0.8rem 0.9rem;
  margin: 0;
}

body.v4 .v4-panel .compare-header,
body.v4 .v4-panel .dark-output-header,
body.v4 .v4-panel .dyslexic-header,
body.v4 .v4-panel .bionic-header,
body.v4 .v4-panel .focus-tool {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
}

body.v4 .v4-panel .compare-title,
body.v4 .v4-panel .dark-output-title,
body.v4 .v4-panel .dyslexic-title,
body.v4 .v4-panel .bionic-title,
body.v4 .v4-panel .focus-tool-title {
  font-size: 0.95rem !important;
  font-weight: 600;
  color: var(--v4-text) !important;
  white-space: normal;
  text-align: left;
}

/* the pill toggle, right aligned and consistent */
body.v4 .v4-panel .toggle-btn {
  flex: none;
  width: auto !important;
  min-width: 74px;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.35rem 0.5rem 0.35rem 0.7rem;
  border-radius: 999px;
}

/* the overlay swatch row sits under its label rather than beside it */
body.v4 .v4-panel .focus-overlay-tool { flex-wrap: wrap; }
body.v4 .v4-panel .overlay-swatches {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
  width: 100%; margin-top: 0.6rem;
}

/* bionic intensity slider reads as part of the Bionic row.
   The base rule lays this out as a single 400px-wide horizontal strip, which is
   what it was under the old full-width layout. In a ~390px side panel that
   crushed the slider, the percentage and the sample text into one line, leaving
   the sample squeezed into a two-line box at the end. It stacks here instead. */
body.v4 .v4-panel .bionic-slider-container {
  background: var(--v4-surface-2);
  border: 1px solid var(--v4-line);
  border-radius: 12px;
  padding: 0.8rem 0.9rem !important;
  margin: 0 0 0.55rem !important;
  flex-direction: column;
  align-items: stretch;
  gap: 0.6rem;
  max-width: none;
}
body.v4 .v4-panel .bionic-slider-row { width: 100%; }
/* the slider takes the width the row gives it rather than a fixed 150px */
body.v4 .v4-panel .bionic-slider { width: auto; flex: 1 1 auto; min-width: 0; }
body.v4 .v4-panel .bionic-value { flex: none; text-align: right; }
body.v4 .v4-panel .bionic-preview { width: 100%; box-sizing: border-box; }
/* the min/max captions are worth having back now there is room for them */
body.v4 .v4-panel .bionic-labels {
  display: flex; justify-content: space-between;
  font-size: 0.68rem; color: var(--v4-text-mute);
}

/* Customize panel: it is a long form, so give it room and a divider */
body.v4 .v4-panel .customize-panel { display: block !important; }
body.v4 .v4-panel .customize-panel > * { max-width: 100%; }

/* document card fills the canvas width the way the mockups show */
body.v4 .v4-canvas .preview-container { width: 100%; margin: 0; }
body.v4 .v4-canvas #previewWrapper { width: 100%; }

/* Compare scrolls inside its own panes rather than lengthening the canvas.
   With the canvas as the single scroller for both views, entering Compare
   collapsed its scroll height and the browser clamped the reader's position to
   the top - and leaving Compare had nothing left to restore. Bounding the panes
   to the canvas keeps the two views' scrolling independent; toggleCompare()
   still saves and restores the canvas position as a belt-and-braces. */
body.v4 .v4-canvas #compareContainer.visible {
  max-height: calc(100vh - var(--v4-topbar-h) - 5rem);
}
body.v4 .v4-canvas #compareContainer.visible .compare-pane { overflow: auto; }

/* toolbar buttons: quieter, evenly sized */
body.v4 .v4-toolbar .zoom-btn { border-radius: 9px; }

/* the focus tools were uppercased for a narrow strip; in the panel list they
   need to match the other row titles */
body.v4 .v4-panel .focus-tool-title {
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* the document card holds its shape rather than floating in an empty canvas */
body.v4 .v4-canvas .preview-container { min-height: calc(100vh - 12rem); }

/* the mobile sheet headers belong to the old bottom-sheet layout; the panel
   already carries its own title */
body.v4 .mnav-sheet-head { display: none !important; }

/* Read Aloud and Appearance own a whole view now, so their accordion headers
   would only fold away the thing the view exists to show */
body.v4 .v4-panel #ttsToggle,
body.v4 .v4-panel #customizeHeader { display: none !important; }
body.v4 .v4-panel #ttsBody {
  display: block !important;
  max-height: none !important;
  overflow: visible !important;
}

/* .customize-content is an absolutely positioned 520px dropdown in the old
   layout. In a panel view it is the content, so put it back in flow at the
   panel's own width — otherwise it hangs 485px off the right edge. */
body.v4 .v4-panel .customize-content {
  display: flex !important;
  position: static !important;
  min-width: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}
body.v4 .v4-panel .customize-panel { position: static !important; }
body.v4 .v4-panel .control-group { min-width: 0; max-width: 100%; }
body.v4 .v4-panel .customize-sheet-header { display: none !important; }

/* The customise controls sat in a wide horizontal row when the dropdown was
   520px across. In a 400px panel they need to stack, or the font pickers run
   off the right edge. */
body.v4 .v4-panel .control-group {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
}
body.v4 .v4-panel .control-group > * { max-width: 100%; }
/* flex-basis must stay auto here: .control-item is a COLUMN flex container, so
   a length basis is read as a height and stretches each picker to that size. */
body.v4 .v4-panel .font-picker,
body.v4 .v4-panel .font-picker-trigger,
body.v4 .v4-panel .control-group select,
body.v4 .v4-panel .control-group input[type="range"] {
  flex: 1 1 auto;
  min-width: 0;
  width: 100% !important;
}
body.v4 .v4-panel .control-item { flex: 1 1 150px; min-width: 0; }
body.v4 .v4-panel .font-picker-dropdown { width: 100%; min-width: 0; }

/* ---------- narrow screens, part two ----------
   The old mobile layout hid these blocks by default and revealed them only
   while one of its bottom sheets was open. v4 puts them in panel views
   instead, so at narrow widths they have to be visible on their own terms.
   #offlineTranslateBtn is deliberately absent: the app shows that one itself
   once a language pack is ready, and forcing it would offer a dead button. */
@media (max-width: 1100px) {
  body.v4 .v4-pane > #outputTogglesBar,
  body.v4 .v4-pane > #bionicSliderContainer,
  body.v4 .v4-pane > #focusToolsBar,
  body.v4 .v4-pane > #alignCustomizeRow {
    display: flex !important;
    flex-direction: column;
  }
  body.v4 .v4-pane > #templateBlock,
  body.v4 .v4-pane > #uploadBlock,
  body.v4 .v4-pane > #ttsPanel,
  body.v4 .v4-pane > #customizePanel { display: block !important; }
  body.v4 .v4-pane > .output-actions { display: flex !important; }
  body.v4 .v4-topbar #libraryLauncher:not([hidden]) { display: flex !important; }
  body.v4 .v4-topbar .theme-toggle-wrapper,
  body.v4 .v4-topbar .theme-toggle-wrapper > * { display: flex !important; }
}

/* Several of these blocks are styled as fixed, sliding bottom sheets on small
   screens. Inside a v4 pane they are ordinary panel content, so a fixed sheet
   would float over the whole shell — including the nav strip, which made the
   tabs unclickable. Only DIRECT children are reset, so .font-picker keeps the
   position: relative its dropdown anchors to. */
@media (max-width: 1100px) {
  body.v4 .v4-pane > * {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    max-height: none !important;
    height: auto !important;
    width: auto !important;
    z-index: auto !important;
    border-radius: 12px !important;
  }
}

/* The reset above is a class selector, and mobile-nav.css pins its two sheet
   shells by ID (`#ttsPanel`, and `.input-panel` which the shell empties) — an
   id wins that tie, so #ttsPanel stayed `position: fixed` inside the panel and
   Read Aloud floated over the entire shell on a phone, covering the nav strip
   and the document with it. Naming the ids here settles the cascade. The sheet
   chrome (its own dark background, rounded top corners and lift shadow) goes
   with it: in the panel this is ordinary content, not a sheet over the page. */
@media (max-width: 1100px) {
  body.v4 .v4-pane > #ttsPanel {
    position: static !important;
    inset: auto !important;
    max-height: none !important;
    height: auto !important;
    width: auto !important;
    z-index: auto !important;
    overflow: visible !important;
    margin: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }
}

/* "SHIFT MY TEXT" — the primary action of the Import view. Full width so it
   reads as the step that follows choosing a file, and rounded to match the
   rest of the app's buttons rather than the sharper 5px it used in the old
   narrow action row. */
body.v4 .v4-panel #formatBtn {
  display: flex !important;
  width: 100%;
  margin: 0.25rem 0 0;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
}
body.v4 .v4-panel #formatBtn:disabled { opacity: 0.7; cursor: default; }

/* Offline Translate, rendered in the panel rather than a modal. Matches the
   other panel cards so it reads as part of the Translate section. */
body.v4 .v4-panel .v4-translate-host {
  margin-top: 0.75rem;
  background: var(--v4-surface-2);
  border: 1px solid var(--v4-line);
  border-radius: 12px;
  padding: 0.85rem 0.9rem;
}
body.v4 .v4-panel .v4-translate-host[hidden] { display: none !important; }
body.v4 .v4-panel .v4-translate-host .ots-title {
  margin: 0 0 0.4rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--v4-text);
}
body.v4 .v4-panel .v4-translate-host p { margin: 0 0 0.6rem; line-height: 1.5; }
body.v4 .v4-panel .v4-translate-host select {
  min-width: 0;
  background: rgba(0,0,0,0.35);
  color: var(--v4-text);
}
body.v4 .v4-panel .v4-translate-host > div { flex-wrap: wrap; }
body.v4 .v4-panel .v4-translate-host .inline-upgrade-btn {
  width: 100%;
  margin-top: 0.25rem;
  border-radius: 10px;
}