/*
 * Shell.dialog, Shell.menu and the page/workspace slots (js/shell-ui.js, README "Shell contract").
 * Stage tokens only (--s-*, css/look-stage.css); no new colours.
 */

/* ---------- dialog: a soft Stage card over a scrim; a full-screen sheet under 600px ---------- */
.sdlg-root { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 24px; }
.sdlg-scrim { position: absolute; inset: 0; background: var(--dk-s-1f1f21a28, rgba(31, 31, 33, .28)); animation: sdlg-fade .16s var(--s-ease, ease) both; }
.sdlg {
  position: relative; display: flex; flex-direction: column; width: 100%; max-height: calc(100dvh - 48px);
  background: var(--s-card, var(--dk-paper, #fff)); color: var(--s-ink, var(--dk-ink, #1F1F21)); border-radius: 20px; box-shadow: var(--s-pop-shadow);
  font: 400 13px/1.5 var(--v-font); outline: none; animation: sdlg-rise .2s var(--s-ease, ease) both;
}
.sdlg--sm { max-width: 400px; }
.sdlg--md { max-width: 520px; }
.sdlg--lg { max-width: 760px; }
.sdlg-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 20px 4px 24px; }
.sdlg-title { margin: 0; font: 500 16px/1.35 var(--v-font); letter-spacing: -.01em; color: var(--s-ink, var(--dk-ink, #1F1F21)); padding-top: 6px; }
.sdlg-x {
  flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 999px;
  background: transparent; color: var(--s-ink-2, var(--dk-t-636366, #636366)); cursor: pointer;
}
.sdlg-x:hover { background: var(--dk-b-1f1f21a5, rgba(31, 31, 33, .05)); color: var(--s-ink, var(--dk-ink, #1F1F21)); }
.sdlg-x:focus-visible { outline: 2px solid var(--s-peri, #8799C3); outline-offset: 2px; }
.sdlg-body { padding: 8px 24px 20px; overflow: auto; overscroll-behavior: contain; }
.sdlg-body > :first-child { margin-top: 0; }
.sdlg-body p { margin: 0 0 10px; color: var(--s-ink-2, var(--dk-t-636366, #636366)); }
.sdlg-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 24px 20px; border-top: 1px solid var(--s-hair, var(--dk-l-1f1f21a8, rgba(31,31,33,.08))); }
.sdlg[aria-busy="true"] .sdlg-actions .btn { cursor: progress; }
@keyframes sdlg-fade { from { opacity: 0; } }
@keyframes sdlg-rise { from { opacity: 0; transform: translateY(6px) scale(.99); } }
@media (max-width: 599px) {
  .sdlg-root { padding: 0; place-items: stretch; }
  .sdlg, .sdlg--sm, .sdlg--md, .sdlg--lg { max-width: none; max-height: none; height: 100dvh; border-radius: 0; }
  .sdlg-head { padding: 14px 12px 4px 16px; }
  .sdlg-body { flex: 1; padding: 8px 16px 16px; }
  .sdlg-actions { flex-direction: column-reverse; padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); }
  .sdlg-actions .btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .sdlg, .sdlg-scrim { animation: none; } }

/* ---------- menu: an anchored soft card (320px max); a bottom sheet on phones ---------- */
.smenu-root { position: absolute; inset: 0 auto auto 0; z-index: 75; }
.smenu {
  position: absolute; min-width: 200px; max-width: 320px; padding: 6px; display: grid; gap: 1px;
  background: var(--s-card, var(--dk-paper, #fff)); border-radius: 14px; box-shadow: var(--s-pop-shadow); font: 400 13px/1.4 var(--v-font);
  animation: sdlg-fade .12s var(--s-ease, ease) both;
}
.smenu-row {
  display: flex; align-items: flex-start; gap: 10px; width: 100%; min-height: 36px; padding: 9px 10px; border: 0; border-radius: 9px;
  background: transparent; color: var(--s-ink, var(--dk-ink, #1F1F21)); font: 500 13px/1.3 var(--v-font); text-align: left; text-decoration: none; cursor: pointer;
}
.smenu-row .i { flex: none; margin-top: 1px; color: var(--s-ink-2, var(--dk-t-636366, #636366)); }
.smenu-row:hover, .smenu-row:focus-visible { background: var(--s-canvas, var(--dk-b-f3f2ed, #F3F2ED)); outline: none; }
.smenu-row[disabled] { opacity: .5; cursor: default; }
.smenu-row--danger { color: var(--dk-t-87372b, #87372B); }
.smenu-text { display: grid; gap: 2px; }
.smenu-hint { font: 400 12px/1.4 var(--v-font); color: var(--s-ink-2, var(--dk-t-636366, #636366)); }
.smenu-rule { border: 0; border-top: 1px solid var(--s-hair, var(--dk-l-1f1f21a8, rgba(31,31,33,.08))); margin: 4px 6px; }
.smenu-root--sheet { position: fixed; inset: 0; display: grid; align-items: end; }
.smenu-scrim { position: absolute; inset: 0; background: var(--dk-s-1f1f21a28, rgba(31, 31, 33, .28)); }
.smenu-root--sheet .smenu {
  position: relative; max-width: none; border-radius: 18px 18px 0 0; padding: 10px 10px calc(12px + env(safe-area-inset-bottom));
  animation: sdlg-rise .18s var(--s-ease, ease) both;
}
.smenu-root--sheet .smenu-row { min-height: 44px; }

/* ---------- slots: an empty slot takes no space ---------- */
[data-slot="page-actions"]:empty, [data-slot="ws-actions"]:empty, [data-slot="ws-below"]:empty, [data-slot="ws-rail"]:empty { display: none; }
body.app .page-head > .page-actions { grid-column: 2; grid-row: 1 / span 2; align-self: end; }
@media (max-width: 680px) { body.app .page-head > .page-actions { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 12px; } }
.page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ws-actions { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.ws-below, .ws-rail { display: grid; gap: var(--gap-card, 14px); }
/* No floating "?" any more (js/assistant.js SHOW_FAB): the room css/assistant.css kept for it goes. */
html[data-look="stage"] body.app .outlet { padding-bottom: 8px; }