/* Posture changes move the existing content and controls; they do not create
   a second route, copy business nodes, or change the current selection. */
.posture-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px;
  padding: 8px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--paper-soft);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
  white-space: nowrap;
}
.posture-trigger[aria-expanded="true"] { color: var(--wine); border-color: var(--wine); }
.masthead, .assistant-topline, .read-header, .media-header { min-width: 0; }
.masthead > .brand-block { flex: 1 1 auto; }
.masthead .brand-block h1 { font-size: clamp(16px, 4.5vw, 20px); }
.assistant-topline > .work-title, .read-header > .read-brand, .media-header > strong {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}
.assistant-topline > .back-link, .read-header > a, .media-header > a,
.media-header > .quiet-button, .masthead > .quiet-button { flex-shrink: 0; }

/* A single geometry owner positions both bottom bars and side rails. */
html[data-nav-layout] .bottom-nav,
html[data-nav-layout] .read-bottom,
html[data-nav-layout] .media-save-bar {
  left: var(--controls-left, var(--app-left));
  width: var(--controls-width, var(--app-width));
  bottom: var(--controls-bottom, var(--app-bottom));
  transform: none;
  max-width: none;
}
html[data-nav-layout] .reader-page.reading-detail .read-bottom { bottom: var(--controls-bottom, var(--app-bottom)); }
html[data-nav-layout="rail"] .reader-page.reading-detail .read-bottom { bottom: auto; }
html[data-nav-layout="rail"] .bottom-nav,
html[data-nav-layout="rail"] .read-bottom,
html[data-nav-layout="rail"] .media-save-bar {
  top: var(--controls-top, 0px);
  height: var(--controls-height, 100dvh);
  bottom: auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom));
  border-top: 0;
  border-inline: 1px solid var(--rule);
}
html[data-nav-layout="rail"] .bottom-nav {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: minmax(50px, auto);
  align-content: center;
  gap: 4px;
}
html[data-nav-layout="rail"] .bottom-nav a { min-width: 44px; padding: 7px 2px; }
html[data-nav-layout="rail"] .read-bottom {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}
html[data-nav-layout="rail"] .read-bottom button {
  min-width: 0;
  min-height: 48px;
  padding-inline: 8px;
  font-size: 13px;
  white-space: normal;
}
html[data-nav-layout="rail"] .media-save-bar {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
}
html[data-nav-layout="rail"] .media-save-bar .media-mode,
html[data-nav-layout="rail"] .media-save-actions {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
html[data-nav-layout="rail"] .media-save-bar button {
  flex: 0 0 auto;
  min-width: 0;
  min-height: 44px;
  padding: 8px 4px;
  font-size: 12px;
  overflow-wrap: anywhere;
  white-space: normal;
}
html[data-nav-layout="rail"] .media-save-bar > p { flex-shrink: 0; font-size: 11px; }
html[data-nav-layout="rail"] .phone-shell .screen { padding-bottom: 24px; }
html[data-nav-layout="rail"] #reader-document { padding-bottom: 32px; }

/* Laptop posture has one actual scrolling surface in the upper pane. */
html[data-scroll-root="pane"], html[data-scroll-root="pane"] body { overflow: hidden; }
html[data-scroll-root="pane"] body .phone-shell {
  position: fixed;
  z-index: 7;
  left: var(--app-left);
  top: var(--app-top);
  width: var(--app-width);
  height: var(--app-height);
  min-height: 0;
  max-height: var(--app-height);
  margin: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  scroll-padding-block: 16px;
}
html[data-scroll-root="pane"] .phone-shell .screen { min-height: 100%; padding-bottom: 24px; }
html[data-scroll-root="pane"] .read-header,
html[data-scroll-root="pane"] .media-header { top: 0; }
html[data-scroll-root="pane"] .read-tabs { top: var(--read-header-height); }
html[data-scroll-root="pane"] #reader-document { padding-bottom: 32px; }
html[data-scroll-root="pane"] body.modal-open .phone-shell { overflow: hidden; }

.posture-dock, #posture-dock {
  position: fixed;
  z-index: 6;
  left: var(--dock-left, 0px);
  top: var(--dock-top, 100dvh);
  width: var(--dock-width, 100%);
  height: var(--dock-height, 0px);
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  overflow-y: auto;
  padding: 12px max(16px, env(safe-area-inset-right)) calc(var(--controls-height, 74px) + 12px) max(16px, env(safe-area-inset-left));
  border-top: 1px solid var(--rule);
  background: #0e1622;
  color: var(--muted);
  text-align: center;
}
.posture-dock p, #posture-dock p { font-size: 12px; line-height: 1.5; margin: 0; }
.posture-dock strong, #posture-dock strong { color: var(--ink); font-size: 14px; }
.posture-dock-actions { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.posture-dock button, #posture-dock button { min-width: 88px; min-height: 44px; }
.posture-dock[hidden], #posture-dock[hidden] { display: none; }
body.modal-open .posture-dock, body.modal-open #posture-dock { visibility: hidden; }

#posture-dialog .dialog-scroll { display: flex; flex-direction: column; gap: 16px; }
#posture-dialog fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
#posture-dialog legend { margin-bottom: 10px; padding: 0; color: var(--muted); font-size: 13px; }
#posture-dialog .posture-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
#posture-dialog [data-posture-choice] {
  min-height: 48px;
  padding: 11px 9px;
  border: 1px solid var(--strong);
  background: #152332;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.5;
}
#posture-dialog [data-posture-choice][aria-pressed="true"],
#posture-dialog [data-posture-choice][aria-selected="true"] {
  border-color: var(--wine);
  background: var(--wine-soft);
  color: var(--wine);
}
#posture-dialog [data-posture-choice] small { display: block; margin-top: 3px; font-size: 11px; color: var(--muted); }
#posture-dialog label { margin: 0; line-height: 1.65; }
#posture-ratio { min-height: 44px; padding: 0; border: 0; background: transparent; accent-color: var(--wine); }
#posture-capability { margin: 0; font-size: 12px; line-height: 1.7; color: var(--muted); }

/* Glance mode is deliberately read-only, with a visible route back. */
#posture-glance {
  position: fixed;
  z-index: 40;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 2.5vh, 24px);
  overflow-y: auto;
  padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  background: #070c13;
  color: var(--ink);
  text-align: center;
}
#posture-glance time, .posture-glance-time {
  font-size: clamp(56px, min(18vw, 32vh), 160px);
  line-height: 1;
  letter-spacing: -.055em;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--wine);
}
.posture-glance-date { color: var(--muted); font-size: clamp(13px, 2.6vw, 20px); }
.posture-glance-task { max-width: 36em; font-size: clamp(13px, 2.3vw, 18px); line-height: 1.6; overflow-wrap: anywhere; }
#posture-glance button { min-height: 44px; min-width: 128px; padding: 10px 18px; flex-shrink: 0; }
#posture-glance[hidden] { display: none; }
html[data-posture-mode="clock"] .phone-shell { visibility: hidden; }

@container app (max-width: 359px) {
  .masthead, .assistant-topline, .read-header, .media-header { gap: 5px; }
  .assistant-topline .work-title { font-size: 17px; }
  .read-brand, .media-header strong { font-size: 12px; }
  .masthead .brand-mark { width: 30px; height: 30px; flex-shrink: 0; }
  .masthead .brand-block { gap: 6px; }
  .posture-trigger { padding-inline: 6px; }
}
@media (max-height: 360px) {
  html[data-nav-layout="rail"] .bottom-nav { align-content: start; }
  html[data-nav-layout="rail"] .media-save-bar { justify-content: flex-start; }
  #posture-glance { gap: 8px; padding-block: 12px; }
}