/* The phone keeps the original presentation flow. These wrappers group the
   same content into a desktop sidebar without scaling the document itself. */
.reader-sidebar,.reader-main{display:contents}
.reader-shell .reader-paper{background:transparent;border:0;border-radius:0;box-shadow:none}

@media(min-width:751px){
  .reader-shell{width:100%;max-width:1680px;margin-inline:auto;padding:0 clamp(24px,3vw,48px) 140px}
  .reader-top{min-width:0;min-height:64px;padding:10px 0;border-bottom:1px solid var(--line)}
  .reader-top>.row{min-width:0;gap:8px}
  .reader-top .tiny{font-size:10px;letter-spacing:.4px}
  .reader-heading{padding:22px 0 18px;min-width:0}
  .reader-heading h1{font-size:28px;line-height:1.3;overflow-wrap:anywhere;max-width:none}
  .reader-heading p{line-height:1.7;overflow-wrap:anywhere}
  .reader-type-row{margin-bottom:10px;gap:8px}
  .reader-type-row .eyebrow{font-size:9px;letter-spacing:1px;overflow-wrap:anywhere}
  .reader-heading .reader-meta{margin-top:14px;gap:7px}
  .reader-meta .meta-button{min-height:34px;padding:6px 9px}
  .reader-meta .badge{overflow-wrap:anywhere;max-width:100%}
  .reader-identity{margin:0 0 14px;min-width:0;flex-wrap:wrap;gap:8px}
  .reader-identity-actions{flex-wrap:wrap;min-width:0}
  .reader-controls{grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:0 0 18px;gap:10px;min-width:0}
  .reader-controls .reader-primary-timer{min-width:0;gap:7px}
  .reader-controls .start-reading{min-height:46px;padding:9px 12px;border-radius:12px;font-size:13px;line-height:1.4;gap:8px}
  .reader-controls .start-reading svg{width:19px;height:19px}
  .reader-primary-timer .timer-stop{width:42px;min-width:42px;border-radius:12px}
  .reader-controls .reader-subtools{grid-template-columns:minmax(60px,1fr) 40px 40px minmax(66px,1fr);gap:7px;min-width:0}
  .reader-controls .reader-subtools .btn{min-width:0;min-height:46px;padding:8px 9px;font-size:12px;gap:5px;white-space:normal;border-radius:12px}
  .reader-controls .reader-subtools .icon-btn{width:40px;min-width:40px;min-height:46px;border-radius:12px}
  .reader-controls .reader-subtools .btn svg{width:16px;height:16px}
  .reader-paper{margin:0;padding:12px 20px 32px;min-width:0}
  .reader-paper .reader-text{min-width:0;max-width:none}
  .reader-main #pageControls{min-width:0}
  .reader-main .page-nav{margin:18px 0;gap:12px;flex-wrap:wrap}
  .reader-main .page-nav span{flex:1;text-align:center}
  .reader-main .reader-end{padding-top:20px}
}


/* Web/tablet: o cabeçalho da apresentação normal acompanha a largura da
   janela, independentemente do limite de largura do conteúdo abaixo.
   O recuo externo também evita rolagem horizontal com a barra do navegador. */
@media (min-width:751px) {
  body:not(.focus-mode) .reader-shell > .reader-top {
    --reader-top-gutter:clamp(20px,2vw,40px);
    width:calc(100vw - 2 * var(--reader-top-gutter));
    max-width:none;
    margin-inline-start:calc(50% - 50vw + var(--reader-top-gutter));
    padding-inline:clamp(8px,.75vw,16px);
  }
}

@media(min-width:1100px){
  .reader-shell{max-width:1800px;padding:0 clamp(28px,3vw,60px) 140px;display:grid;grid-template-columns:clamp(260px,21vw,300px) minmax(0,1fr);column-gap:clamp(20px,2vw,32px);align-items:start}
  .reader-top{grid-column:1/-1;position:sticky;top:0;z-index:12;background:var(--bg);min-height:64px;margin-bottom:22px}
  .reader-sidebar{display:flex;flex-direction:column;position:sticky;top:86px;max-height:calc(100dvh - 200px);min-width:0;min-height:0;padding:0 14px 4px 0}
  .reader-sidebar .reader-heading{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:0 3px 18px 0}
  .reader-sidebar .reader-heading h1{font-size:25px;line-height:1.35;letter-spacing:-.5px}
  .reader-sidebar .reader-heading p{font-size:12px;margin-top:10px}
  .reader-sidebar .reader-type-row{align-items:flex-start;flex-direction:column;gap:9px;margin-bottom:14px}
  .reader-sidebar .reader-heading .reader-meta{gap:7px;margin-top:17px}
  .reader-sidebar .content-version-selector{max-width:100%;width:100%;justify-content:flex-start}
  .reader-sidebar .reader-identity{flex:0 0 auto;padding:11px;display:grid;gap:9px;border-radius:12px}
  .reader-sidebar .reader-identity-actions{justify-content:space-between}
  .reader-sidebar .reader-controls{flex:0 0 auto;display:grid;grid-template-columns:minmax(0,1fr);gap:9px;padding:0}
  .reader-sidebar .reader-controls .start-reading{font-size:12px;min-height:46px;padding:8px}
  .reader-sidebar .reader-controls .reader-subtools{grid-template-columns:minmax(57px,1fr) 36px 36px minmax(62px,1fr);gap:5px}
  .reader-sidebar .reader-controls .reader-subtools .btn{padding:8px 5px;gap:4px;font-size:11px;min-height:42px}
  .reader-sidebar .reader-controls .reader-subtools .icon-btn{width:36px;min-width:36px;min-height:42px}
  .reader-main{display:block;min-width:0}
  .reader-main .reader-paper{padding:12px 20px 32px}
  .reader-main .reader-text{max-width:none}
  .reader-main .reader-end{padding-top:18px}
  .timer-dock{display:flex;right:auto;left:clamp(20px,2vw,32px);bottom:max(20px,env(safe-area-inset-bottom));gap:6px;max-width:300px;padding:0;border:0;background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
  .timer-dock .timer-button{height:46px;min-width:112px;width:auto;padding:8px 12px;border:1px solid #ffffff15;border-radius:13px;background:var(--green);color:var(--paper);box-shadow:0 5px 23px #203b3926}
  .timer-dock .timer-button.paused{background:var(--paper);color:var(--ink);border-color:var(--line)}
  .timer-dock .timer-button.over{background:#9a4840;color:white}
  .dark .timer-dock .timer-button:not(.paused):not(.over){color:#18302b}
  .timer-dock #timerIcon{display:inline-flex}
  .timer-dock .icon-btn{width:42px;height:46px;border:1px solid var(--line);border-radius:13px;background:var(--paper);box-shadow:0 5px 20px #203b3918}
  .timer-dock .dock-timer-toggle{display:none}
  .timer-dock[data-running="true"] #dockTimerStop{display:inline-grid}
  .focus-exit{right:clamp(20px,2vw,32px);bottom:max(20px,env(safe-area-inset-bottom))}
  .focus-mode .reader-shell{display:block;max-width:1800px;margin-inline:auto;padding:24px clamp(28px,3vw,60px) 140px}
  .focus-mode .reader-sidebar{display:none}
  .focus-mode .reader-main .reader-paper{margin:0;padding:12px 20px 32px}
  .focus-mode #timerDock:not([hidden]){left:auto;right:calc(clamp(20px,2vw,32px) + 60px)}
}

@media(min-width:751px) and (max-height:600px){
  .reader-top{min-height:52px;padding-block:4px}
  .reader-heading{padding-block:15px}
  .reader-controls{padding-bottom:14px}
}

@media(min-width:1100px) and (max-height:600px){
  .reader-top{margin-bottom:16px}
  .reader-sidebar{top:68px;max-height:calc(100dvh - 160px)}
  .reader-sidebar .reader-heading{padding-top:0}
}

@media(min-width:1100px) and (max-height:500px){
  /* Short desktop windows scroll the whole summary above the timer dock.
     Keeping the title at its natural height also keeps every field reachable. */
  .reader-sidebar{overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
  .reader-sidebar .reader-heading{flex:0 0 auto;overflow:visible}
}

/* Focus is a reading surface for both formats, including identified parts. */
.focus-mode .reader-identity{display:none}
@media(min-width:751px) and (max-width:1099px){
  .focus-mode .reader-paper{margin:10px 0 0;padding-top:28px}
}

/* A apresentação expandida precisa de margens de leitura próprias: sem
   esticar parágrafos por toda a tela. Não modifica o modo normal nem o celular. */
@media (min-width:751px) {
  .focus-mode .reader-main .reader-paper{
    width:100%;
    max-width:1480px;
    margin-inline:auto;
    padding:clamp(20px,2.5vw,40px) clamp(24px,3vw,48px) 48px;
  }
  .focus-mode .reader-main .reader-text{
    width:100%;
    max-width:1320px;
    margin-inline:auto;
  }
  .focus-mode .reader-main #pageControls{
    width:100%;
    max-width:1480px;
    margin-inline:auto;
  }
}