/* Mobile UI overhaul: a quiet command rail, a clear reader header, and one
   dependable reading surface. Loaded last so it is the final responsive layer. */

:root {
  --mobile-ink: #07100f;
  --mobile-surface: #101c1b;
  --mobile-surface-2: #152422;
  --mobile-paper: #f3e8ca;
  --mobile-muted: #a5aea5;
  --mobile-teal: #73d7c6;
  --mobile-gold: #d3b36c;
}

body.uw-active {
  background: var(--mobile-ink) !important;
  overscroll-behavior: none;
}

body.uw-active .uw-chrome {
  background: rgba(7, 16, 15, .98) !important;
  border-bottom-color: rgba(211, 179, 108, .22) !important;
}

@media (max-width: 760px) {
  :root { --uw-header: 108px; }

  body.uw-active > .app {
    height: calc(100dvh - var(--uw-header)) !important;
    max-height: calc(100dvh - var(--uw-header)) !important;
    padding: 7px 8px 9px !important;
    gap: 7px !important;
  }

  /* The first row is a horizontally scrollable tool rail. It keeps every
     destination available without squeezing six labels into four columns. */
  body.uw-active .uw-primary {
    height: 58px !important;
    grid-template-columns: 32px minmax(0, 1fr) 31px !important;
    gap: 5px !important;
    padding: 4px 5px !important;
  }

  body.uw-active .uw-brand {
    width: 32px !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: center !important;
  }

  body.uw-active .uw-brand span {
    font-size: 0 !important;
  }

  body.uw-active .uw-brand span::before {
    content: 'b' !important;
    color: var(--mobile-paper) !important;
    font: 600 1.48rem/1 'Cormorant Garamond', Georgia, serif !important;
  }

  body.uw-active .uw-brand small { display: none !important; }

  body.uw-active .uw-studios {
    display: flex !important;
    min-width: 0 !important;
    gap: 3px !important;
    padding: 3px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    border-radius: 11px !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }

  body.uw-active .uw-studios::-webkit-scrollbar { display: none; }

  body.uw-active .uw-studio {
    flex: 0 0 69px !important;
    min-width: 69px !important;
    min-height: 45px !important;
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    gap: 3px !important;
    padding: 4px 3px !important;
    scroll-snap-align: start;
  }

  body.uw-active .uw-studio > i {
    width: 22px !important;
    height: 22px !important;
    border-radius: 7px !important;
  }

  body.uw-active .uw-studio strong {
    max-width: 64px !important;
    color: inherit !important;
    font-size: .56rem !important;
    line-height: 1 !important;
    text-align: center !important;
  }

  body.uw-active .uw-global-actions {
    min-width: 31px !important;
    padding-left: 2px !important;
    border-left: 0 !important;
  }

  body.uw-active .uw-global-actions .uw-icon {
    width: 30px !important;
    height: 38px !important;
    border-radius: 9px !important;
  }

  /* One row for the active tool and reference. The secondary summary is
     useful on desktop but costs too much vertical space on a phone. */
  body.uw-active .uw-contextbar,
  body.uw-active[data-uw-bridge="reader"] .uw-contextbar {
    height: 43px !important;
    min-height: 43px !important;
    grid-template-columns: minmax(104px, .9fr) minmax(0, 1.35fr) 30px !important;
    grid-template-areas: "tool ref truth" !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 4px 5px !important;
    border-top: 0 !important;
    border-bottom-color: rgba(211, 179, 108, .22) !important;
  }

  body.uw-active .uw-tool-current,
  body.uw-active .uw-ref-form,
  body.uw-active .uw-truth-button,
  body.uw-active[data-uw-bridge="reader"] .uw-tool-current,
  body.uw-active[data-uw-bridge="reader"] .uw-ref-form,
  body.uw-active[data-uw-bridge="reader"] .uw-truth-button {
    height: 34px !important;
    min-height: 34px !important;
    border-radius: 9px !important;
  }

  body.uw-active .uw-tool-current { grid-area: tool; }
  body.uw-active .uw-ref-form { grid-area: ref; }
  body.uw-active .uw-truth-button { grid-area: truth; }
  body.uw-active .uw-focus-summary,
  body.uw-active .uw-handoff,
  body.uw-active .uw-reader-toggle { display: none !important; }

  body.uw-active .uw-tool-current small { display: none !important; }
  body.uw-active .uw-tool-current strong {
    margin-top: 0 !important;
    font-size: .66rem !important;
  }

  body.uw-active .uw-ref-form {
    grid-template-columns: auto minmax(0, 1fr) 25px !important;
    padding-inline: 8px !important;
  }

  body.uw-active .uw-ref-form label { display: none !important; }
  body.uw-active .uw-ref-form input {
    height: 28px !important;
    font-size: .67rem !important;
  }

  body.uw-active .uw-ref-form button {
    width: 24px !important;
    height: 25px !important;
    padding: 0 !important;
    font-size: 0 !important;
  }

  body.uw-active .uw-ref-form button::before {
    content: '↵';
    font-size: .8rem;
  }

  body.uw-active .uw-truth-button {
    width: 30px !important;
    justify-content: center !important;
    padding: 0 !important;
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.uw-active .uw-truth-button > span { display: none !important; }
  body.uw-active .uw-truth-button > i { margin: 0 !important; }

  /* Reader mode does not need a second visual stage above the text. Keep a
     one-pixel stage alive for the legacy renderer, but give its space back to
     the reading surface. */
  body.uw-active[data-uw-bridge="reader"] > .app {
    grid-template-rows: 1px minmax(0, 1fr) !important;
  }

  body.uw-active[data-uw-bridge="reader"] .app > .viz {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-height: 1px !important;
    height: 1px !important;
    max-height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  body.uw-active[data-uw-bridge="reader"] .app > .side {
    grid-column: 1 !important;
    grid-row: 2 !important;
    height: 100% !important;
  }

  /* The reader is a single card. Its heading is visible again so the user
     always knows which surface is active before reading the chapter. */
  body.uw-active[data-uw-bridge="reader"] .app > .side {
    min-width: 0 !important;
    border: 1px solid rgba(211, 179, 108, .24) !important;
    border-radius: 18px !important;
    background: linear-gradient(180deg, rgba(16, 28, 27, .98), rgba(7, 15, 14, .98)) !important;
    box-shadow: 0 16px 42px rgba(0, 0, 0, .34), inset 0 1px rgba(255, 255, 255, .035) !important;
  }

  body.uw-active[data-uw-bridge="reader"] .app .side-top-resizer,
  body.uw-active[data-uw-bridge="reader"] .app .side-resizer,
  body.uw-active[data-uw-bridge="reader"] .app .side-collapse { display: none !important; }

  body.uw-active[data-uw-bridge="reader"] .app .side-head {
    display: block !important;
    padding: 11px 11px 10px !important;
    border-bottom: 1px solid rgba(211, 179, 108, .16) !important;
    background: linear-gradient(180deg, rgba(22, 38, 36, .88), rgba(14, 24, 23, .62)) !important;
  }

  body.uw-active[data-uw-bridge="reader"] .app .side-headline {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  body.uw-active[data-uw-bridge="reader"] .app .side-headcopy {
    display: block !important;
    min-width: 0 !important;
  }

  body.uw-active[data-uw-bridge="reader"] .app .side-kicker {
    color: rgba(115, 215, 198, .76) !important;
    font-size: .48rem !important;
    letter-spacing: .15em !important;
  }

  body.uw-active[data-uw-bridge="reader"] .app .side-title {
    margin-top: 3px !important;
    color: var(--mobile-paper) !important;
    font-size: 1.04rem !important;
    line-height: 1.05 !important;
  }

  body.uw-active[data-uw-bridge="reader"] .app .reader-tools {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
  }

  body.uw-active[data-uw-bridge="reader"] .app .tabs {
    flex: 1 1 auto !important;
    min-height: 36px !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 3px !important;
    padding: 3px !important;
    border-radius: 10px !important;
  }

  body.uw-active[data-uw-bridge="reader"] .app .tab {
    min-height: 29px !important;
    padding-inline: 6px !important;
    font-size: .68rem !important;
    letter-spacing: .015em !important;
  }

  body.uw-active[data-uw-bridge="reader"] .app .reader-word-toggle {
    min-width: 82px !important;
    min-height: 34px !important;
    padding-inline: 8px !important;
    border-radius: 9px !important;
    font-size: .59rem !important;
    letter-spacing: .08em !important;
  }

  body.uw-active[data-uw-bridge="reader"] .app .side-copy,
  body.uw-active[data-uw-bridge="reader"] .app .readerpulse { display: none !important; }

  body.uw-active[data-uw-bridge="reader"] .app .focussearch {
    height: 40px !important;
    margin-top: 9px !important;
    border-radius: 10px !important;
  }

  body.uw-active[data-uw-bridge="reader"] .app .focussearch input {
    height: 30px !important;
    font-size: .68rem !important;
  }

  body.uw-active[data-uw-bridge="reader"] .app .focussearch button {
    padding-inline: 4px !important;
    font-size: .57rem !important;
  }

  body.uw-active[data-uw-bridge="reader"] .app .rnav {
    display: grid !important;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr) 42px 42px !important;
    gap: 6px !important;
    padding: 9px 10px 8px !important;
    border-bottom: 1px solid rgba(211, 179, 108, .12) !important;
  }

  body.uw-active[data-uw-bridge="reader"] .app .rnav select,
  body.uw-active[data-uw-bridge="reader"] .app .rnav button {
    min-width: 0 !important;
    height: 40px !important;
    border-radius: 10px !important;
    font-size: .67rem !important;
  }

  body.uw-active[data-uw-bridge="reader"] .app .rbody {
    min-height: 0 !important;
    overflow: auto !important;
    background: rgba(5, 12, 11, .22) !important;
  }

  body.uw-active[data-uw-bridge="reader"] .app .rbody .chapter-stack {
    padding: 17px 13px 56px !important;
  }

  body.uw-active[data-uw-bridge="reader"] .app .rbody .chtitle {
    margin-bottom: 13px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid rgba(211, 179, 108, .18) !important;
    color: var(--mobile-paper) !important;
    font-size: 1.64rem !important;
  }

  body.uw-active[data-uw-bridge="reader"] .app .rbody .chapter-copy {
    max-width: none !important;
    margin: 0 !important;
    color: #e8e9e1 !important;
    font-size: 1.02rem !important;
    line-height: 1.72 !important;
    letter-spacing: .005em !important;
  }

  body.uw-active[data-uw-bridge="reader"] .app .rbody .vs {
    color: inherit !important;
  }

  body.uw-active[data-uw-bridge="reader"] .app .rbody .vn {
    color: var(--mobile-gold) !important;
    font-size: .62em !important;
    font-weight: 700 !important;
  }

  body.uw-active .voicefab#bSpeak {
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    min-height: 54px !important;
    right: 14px !important;
    bottom: 14px !important;
    opacity: .92;
  }

  body.uw-active .voicefab#bSpeak .vi {
    width: 32px !important;
    height: 32px !important;
  }
}

@media (min-width: 761px) {
  /* Desktop keeps the same hierarchy while giving the active tool more room. */
  body.uw-active .uw-studios { gap: 4px !important; }
  body.uw-active .uw-studio strong { font-size: .64rem !important; }
  body.uw-active[data-uw-bridge="reader"] .app .chapter-copy { max-width: 70ch !important; }
}