/* MSK Navigator v3 app (A3): screen layout shared by every view. Every colour, shadow, radius, size and motion is a
   kit token (kit.css). */

.app-screen { display: flex; width: 100%; min-width: 0; flex-direction: column; gap: var(--space-10); }
.app-screen[data-settled] .k-anim-rise, .app-screen[data-settled] .k-card, .app-screen[data-settled] .k-greet,
.app-screen[data-settled] .k-says { animation: none; }
@media (max-width: 767px) { .app-screen { gap: var(--space-8); } }

/* A focused or scrolled-to control never sits under the top bar or the tab bar. */
html { scroll-padding-top: calc(var(--topbar) + var(--space-4)); }
@media (max-width: 767px) {
  html { scroll-padding-bottom: calc(var(--tabbar) + var(--space-4)); }
  .k-shell .k-main { padding-bottom: calc(var(--space-16) + var(--tabbar) + env(safe-area-inset-bottom)); }
}

/* A section of a screen: a quiet head over its objects (not a card). */
.app-section { display: flex; min-width: 0; flex-direction: column; gap: var(--space-5); scroll-margin-top: calc(var(--topbar) + var(--space-4)); }
.app-section__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.app-section__title { font-family: var(--font-display); font-weight: var(--weight-regular); font-size: var(--display-s); line-height: var(--display-s-leading); letter-spacing: var(--tracking-display); color: var(--color-ink); }
.app-section__sub { font-size: var(--text-body); line-height: var(--leading-body); color: var(--color-ink-3); }
.app-split { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.app-list { display: flex; flex-direction: column; gap: var(--space-3); }
.app-list li { display: flex; gap: var(--space-3); color: var(--color-ink-2); }
.app-list li .k-icon { flex-shrink: 0; margin-top: var(--space-1); color: var(--color-brand); }
.app-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.app-sheet-paper { display: flex; justify-content: center; padding: var(--space-6); border-radius: var(--radius-lg); background: var(--color-ground-2); box-shadow: var(--shadow-inset); }
.app-sheet-paper .k-paper, .app-sheet-paper .pk-sheet { width: 100%; max-width: 360px; }


/* The top bar: a long clinic name truncates before Ask Navigator and the avatar. */
.k-topbar__clinic { max-width: 100%; overflow: hidden; }
.k-topbar__name { min-width: 0; }

/* Navigator's panel pushes the page with motion (≤ 320 ms): the main column narrows as the column opens. */
@media (min-width: 1024px) {
  .k-shell .k-shell__body { grid-template-columns: minmax(0, 1fr) 0px; transition: grid-template-columns var(--duration-slow) var(--ease-out); }
  .k-shell[data-panel-open] .k-shell__body { grid-template-columns: minmax(0, 1fr) calc(var(--panel) + var(--space-3)); }
  .k-shell[data-panel-open] .k-panel { min-width: var(--panel); }
  .k-shell[data-instant] .k-shell__body { transition: none; }
}

/* At phone width Ask Navigator keeps its words, so Navigator's face never sits unlabelled beside the owner's photo. */
@media (max-width: 767px) {
  .k-topbar .k-ask { width: auto; padding: 0 var(--space-3) 0 var(--space-1); }
  .k-topbar .k-ask .k-ask__label { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: nowrap; font-size: var(--text-meta); }
  .k-topbar .k-account { margin-left: var(--space-1); }
}

/* Entered from an organization (?from=<type>): a quiet way back, top left, under the top bar (06-paths §4.3) */
.k-shell[data-orgback] { grid-template-rows: auto auto 1fr auto; }
.app-orgback { grid-column: 1 / -1; width: 100%; max-width: calc(var(--content) + 2 * var(--gutter)); margin: 0 auto; padding: var(--space-3) var(--gutter) 0; }
.app-orgback__link { display: inline-flex; min-height: 32px; align-items: center; gap: var(--space-2); font-size: var(--text-meta); line-height: var(--leading-meta); }
.k-shell[data-orgback] .k-main { padding-top: var(--space-6); }

/* The first-entry welcome in Navigator's panel (fresh, once) */
.app-welcome { display: flex; flex-direction: column; gap: var(--space-4); }
.app-welcome .k-says p { min-height: var(--leading-lead); }

/* Viewing as a staff member: the avatar carries a teal ring, so the view is never mistaken for the owner's */
.k-account[data-viewing] .k-avatar { box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-brand); }