/* session.css — the session banner and the draft callouts (stream B5; main §5.5, navigation.md #5).
   Loaded after app.css, so these rules replace the minimal .session-banner fallback there at equal specificity.
   The banner is in normal flow and sticks under the top bar (below B4's environment band); session.js keeps
   --banner-h on <html> equal to its height (0px when hidden), which moves --sticky-top, scroll-padding-top and
   tr:target clear of it (a11y.css). z-index 40: under the top bar (50) and the band (51). */

.session-banner {
  position: sticky;
  top: calc(var(--env-band-h, 0px) + var(--header-h));
  z-index: 40;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1rem;
  margin: .5rem .8rem 0;
  padding: .6rem 1rem;
  border: 1px solid var(--warn);
  border-radius: var(--radius-sm);
  background: var(--warn-soft);
  color: var(--fg);
  box-shadow: var(--shadow-sm);
}
.session-banner[data-state="expired"],
.session-banner[data-state="stale"],
.session-banner[data-state="replaced"],
.session-banner[data-state="signedout"] {
  border-color: var(--bad);
  background: var(--bad-soft);
}
.session-banner:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.session-banner-text { margin: 0; flex: 1 1 18rem; min-width: 0; overflow-wrap: anywhere; }
.session-countdown { font-weight: 600; font-variant-numeric: tabular-nums; }
.session-banner-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.session-banner-actions:empty { display: none; }
.session-banner-actions .btn,
.session-banner-actions button { white-space: nowrap; }

@media (max-width: 480px) {
  .session-banner { margin: .5rem .5rem 0; padding: .5rem .75rem; }
  .session-banner-text { flex-basis: 100%; }
  .session-banner-actions { width: 100%; }
  .session-banner-actions > * { flex: 1 1 auto; text-align: center; }
  .session-banner-actions .btn,
  .session-banner-actions button { white-space: normal; }
}

/* The restore callout of drafts.js (first version from WP0c), its off-page line and the "table gone" notice. */
.draft-callout { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.draft-callout p { margin: 0; }
.draft-callout-actions { display: inline-flex; gap: .5rem; }
.draft-offpage { flex-basis: 100%; font-size: 13px; color: var(--fg-soft); }