/* Quiet Stanza — how the desk fits the room.
   Desktop (≥1200px): ink rail on the left, the spread has room.
   Tablet (700–1199px): the rail lies down as a dock so the notebook gets the width.
   Phone (<700px): the same dock, shorter names, one column. Still a desk you can use.
   Loaded after tokens.css so these overrides win without rewriting the desk. */

:root { --dock-height: 0px; }

html, body { overflow: hidden; }

.shell {
  grid-template-columns: var(--rail-width) minmax(0, 1fr);
  height: 100dvh;
}
.content {
  min-width: 0;
  overflow-x: hidden;
  height: 100dvh;
}
.rail-btn { position: relative; }
.lbl-short,
.rail-streak { display: none; }

.search-kind { max-width: 120px; flex: 0 1 120px; }
.search-query { max-width: 360px; flex: 1 1 180px; }
.search-length { max-width: 150px; flex: 0 1 150px; }

.journal-wrap.is-fullscreen .journal-stage {
  width: min(calc(100vw - 56px), calc((100dvh - 120px) * 892 / 644));
  max-height: calc(100dvh - 120px);
}
.journal-wrap.is-fullscreen.journal-live .journal-stage {
  width: min(calc(100vw - 56px), calc((100dvh - 200px) * 892 / 644));
  max-height: calc(100dvh - 200px);
}
.today-desk.is-writing .journal-stage {
  height: min(68dvh, calc((100vw - var(--rail-width) - 96px) * 644 / 892));
  height: min(68dvh, calc(100cqw * 644 / 892));
}

@media (max-width: 1199px) {
  :root {
    --rail-width: 0px;
    --dock-height: calc(62px + env(safe-area-inset-bottom, 0px));
  }

  .shell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
  }
  .content {
    grid-row: 1;
    height: auto;
    min-height: 0;
  }
  .rail {
    grid-row: 2;
    z-index: 30;
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
    width: 100%;
    gap: 2px;
    padding: 4px 8px env(safe-area-inset-bottom, 0px);
    border-top: 1px solid color-mix(in srgb, var(--paper) 18%, transparent);
    overflow-x: auto;
    overflow-y: hidden;
  }
  .rail-top,
  .rail-bottom {
    flex-direction: row;
    align-items: stretch;
    justify-content: space-evenly;
    gap: 2px;
    min-width: 0;
  }
  .rail-top { flex: 1 1 auto; }
  .rail-bottom { flex: 0 0 auto; }
  .rail-btn {
    width: auto;
    flex: 1 1 0;
    max-width: 148px;
    min-width: 0;
    min-height: 54px;
    border-radius: 10px;
    padding: 5px 4px 4px;
  }
  .rail-bottom .rail-btn {
    flex: 0 0 auto;
    width: 76px;
    max-width: none;
  }
  .rail-label { max-width: 100%; }
  .lbl-full br { display: none; }

  .page-wrap {
    padding: 28px 28px calc(var(--dock-height) + 36px);
  }
  .page-wrap.today-desk,
  .page-wrap.today-desk.is-writing {
    max-width: none;
    width: 100%;
    padding-left: max(28px, env(safe-area-inset-left, 0px));
    padding-right: max(28px, env(safe-area-inset-right, 0px));
  }
  .page-wrap.today-desk:not(.is-writing) {
    padding-bottom: calc(var(--dock-height) + 88px);
  }
  .page-wrap.today-desk.is-writing {
    padding-bottom: calc(var(--dock-height) + 28px);
  }

  .desk-corner {
    top: max(10px, env(safe-area-inset-top, 0px));
    right: max(12px, env(safe-area-inset-right, 0px));
  }
  .desk-nudge {
    padding: 14px 28px 0;
  }

  .footer-anchor {
    bottom: calc(var(--dock-height) + 10px);
    width: min(380px, calc((100vw - 36px) / 2));
  }
  .footer-left { left: max(14px, env(safe-area-inset-left, 0px)); }
  .footer-right { right: max(14px, env(safe-area-inset-right, 0px)); }

  .journal-wrap.is-fullscreen {
    padding:
      max(48px, calc(env(safe-area-inset-top, 0px) + 40px))
      max(16px, env(safe-area-inset-right, 0px))
      max(16px, env(safe-area-inset-bottom, 0px))
      max(16px, env(safe-area-inset-left, 0px));
  }
  .journal-wrap.is-fullscreen .journal-stage,
  .journal-wrap.is-fullscreen.journal-live .journal-stage {
    width: min(calc(100vw - 32px), calc((100dvh - 150px) * 892 / 644));
    max-height: calc(100dvh - 150px);
  }
  .journal-wrap.is-fullscreen .journal-writing-panel {
    right: max(12px, env(safe-area-inset-right, 0px));
    bottom: max(12px, env(safe-area-inset-bottom, 0px));
  }
  .journal-wrap.is-fullscreen .journal-fs-top {
    top: max(10px, env(safe-area-inset-top, 0px));
    right: max(12px, env(safe-area-inset-right, 0px));
  }
}

/* Landscape tablet: the open notebook is the page. */
@media (min-width: 700px) and (max-width: 1199px) and (orientation: landscape) {
  .today-desk.is-writing .journal-stage {
    height: min(70dvh, calc(100cqw * 644 / 892));
  }
  .poem-title { font-size: clamp(40px, 4.6vw, 56px); }
}

@media (max-width: 900px) {
  .md-layout { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .md-list { max-height: 38vh; }
  .tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
  }
  .tab { flex: 0 0 auto; }
}

@media (max-width: 699px) {
  :root {
    --dock-height: calc(58px + env(safe-area-inset-bottom, 0px));
  }

  .rail {
    padding-left: max(4px, env(safe-area-inset-left, 0px));
    padding-right: max(4px, env(safe-area-inset-right, 0px));
  }
  .rail-btn { min-height: 50px; max-width: none; gap: 2px; }
  .rail-bottom .rail-btn { width: 46px; }
  .rail-bottom .rail-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .rail-ico { width: 20px; height: 20px; }
  .rail-btn .fa { font-size: 15px; }
  .rail-label { font-size: 9px; max-width: none; }
  .rail-label:has(.lbl-short) .lbl-full { display: none; }
  .lbl-short { display: inline; }

  .desk-streak { display: none; }
  .rail-streak {
    display: block;
    position: absolute;
    top: 3px;
    right: 4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--gold);
    color: var(--ink);
    font-family: var(--ui);
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
  }

  .page-wrap {
    padding: 18px 16px calc(var(--dock-height) + 24px);
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
  }
  .page-title { font-size: 30px; padding-right: 46px; }
  .poem-title { font-size: clamp(28px, 8.5vw, 36px); padding-right: 46px; }
  .library-head { padding-right: 46px; }
  .library-head .page-title { padding-right: 0; }
  .page-wrap.today-desk,
  .page-wrap.today-desk.is-writing {
    padding-left: max(14px, env(safe-area-inset-left, 0px));
    padding-right: max(14px, env(safe-area-inset-right, 0px));
  }
  .page-wrap.today-desk:not(.is-writing) {
    padding-bottom: calc(var(--dock-height) + 128px);
  }
  .desk-nudge { padding: 12px 16px 0; }

  .today-pick-head { flex-direction: column; gap: 8px; }
  .today-pick-meta { max-width: none; text-align: left; padding-top: 0; }

  .search-bar { align-items: stretch; }
  .search-bar .field,
  .search-kind,
  .search-query,
  .search-length {
    max-width: none;
    width: 100%;
    flex: 1 1 auto;
  }

  .sitting-step-head {
    grid-template-columns: 34px minmax(0, 1fr);
    row-gap: 2px;
  }
  .sitting-step-summary {
    grid-column: 2;
    justify-self: start;
    white-space: normal;
    text-align: left;
  }
  .sitting-step-detail { padding-left: 0; }
  .sitting-step .reader-controls { flex-wrap: wrap; }

  .cue-line {
    font-size: min(var(--cue-sz), 12vw);
    overflow-wrap: anywhere;
  }

  .footer-anchor.footer-left,
  .footer-anchor.footer-right {
    left: max(10px, env(safe-area-inset-left, 0px));
    right: max(10px, env(safe-area-inset-right, 0px));
    width: auto;
  }
  .footer-anchor.footer-right { bottom: calc(var(--dock-height) + 8px); }
  .footer-anchor.footer-left { bottom: calc(var(--dock-height) + 66px); }
  .footer-flyout { max-height: min(42dvh, 320px); }

  .sheet-backdrop {
    align-items: flex-end;
    padding: 0;
  }
  .sheet {
    width: 100%;
    max-height: min(92dvh, 100%);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    padding: 22px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  }

  .journal-writing-panel {
    position: static;
    width: 100%;
    max-width: none;
    margin-top: 12px;
  }
  .journal-wrap.is-fullscreen .journal-writing-panel {
    position: fixed;
    left: max(10px, env(safe-area-inset-left, 0px));
    right: max(10px, env(safe-area-inset-right, 0px));
    width: auto;
    margin-top: 0;
  }
  .today-desk.is-writing .journal-stage {
    height: min(46dvh, calc(100cqw * 644 / 892));
  }

  .field,
  input.field,
  select.field,
  textarea.field,
  .qs-field,
  .reflect-field { font-size: 16px; }

  .option { min-height: 44px; }
  .today-desk .option-row .wax-button { min-width: 0; }
}

@media (pointer: coarse) {
  .btn,
  .option,
  .tab,
  .footer-pill,
  .md-row,
  .kind-switch-opt { min-height: 44px; }
  .journal-drag { height: 28px; }
  .journal-scale { width: 44px; height: 44px; }
  .cue-kbd { display: none; }
}