/* The shared page shell (public/page-shell.js; Derek's portal UX brief, sections 2, 9 and 10, mock batch B).
   One header, one tab style, one place for help and the workspace, one content width. Built on the ds.css tokens,
   each with its value as a fallback, so the shell reads the same on a page outside UI_V2. Not a rebrand: the navy,
   cyan and teal and the type are the design system's own. :not(#ps) lifts a rule over the pages' older editorial
   header rules (admin.css), the way ds.css uses :not(#ds).
   Two breakpoints: 900px (the menu becomes a drawer, the gutter narrows) and 640px (the header stacks). */

:root {
  --page-max: 1100px;          /* every shell page: the content column's widest, gutters included (as on every other page) */
  --page-gutter: 32px;         /* left and right of the content; 16px on a phone */
  --page-head-gap: 24px;       /* header to the first content */
  --page-section-gap: 24px;    /* between sections */
  --ps-tab-h: 40px;
}
@media (max-width: 900px) { :root { --page-gutter: 16px; --page-head-gap: 16px; --page-section-gap: 16px; } }

/* ── Content width ── */
body .container.ps-page:not(#ps) { display: block !important; max-width: var(--page-max); box-sizing: border-box; padding-left: var(--page-gutter); padding-right: var(--page-gutter); margin: 0 auto; }
body .container.ps-page > .editorial-main:not(#ps) { max-width: none; grid-column: auto; }

/* ── PageHeader: the title and its line on the left, the actions on the right; help on the line under the actions ── */
body .ps-page > .ps-head:not(#ps) {
  position: static; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main actions" "main help" "ws ws";
  column-gap: var(--s-5, 24px); row-gap: var(--s-2, 8px); align-items: start;
  margin: 0 0 var(--page-head-gap) !important; padding: 0 !important; border: 0 !important; background: none !important; min-width: 0; }
body .ps-head > .ps-main:not(#ps) { grid-area: main; min-width: 0; max-width: none; margin: 0 !important; }
body .ps-head .ps-title:not(#ps) {
  font-family: inherit !important; font-size: var(--t-page, 26px) !important; line-height: 32px !important; font-weight: 600 !important; letter-spacing: -0.01em !important;
  color: var(--c-text, #F2F6FA); margin: 0 !important; text-transform: none; text-wrap: balance; }
body .ps-head .ps-title .uk-pill { vertical-align: middle; margin-left: var(--s-2, 8px); font-size: var(--t-meta, 12px); }
body .ps-head .ps-sub:not(#ps) { font-size: var(--t-body, 14px) !important; line-height: 20px; font-weight: 400 !important; color: var(--c-text-2, #A9BFD3) !important; margin: var(--s-1, 4px) 0 0 !important; max-width: 80ch; text-wrap: pretty; }
body .ps-head .ps-sub:empty:not(#ps) { display: none; }
body .ps-head > .ps-actions:not(#ps) { grid-area: actions; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: var(--s-2, 8px); margin: 0 !important; max-width: none; min-height: var(--h-control, 32px); }
body .ps-head > .ps-actions[hidden]:not(#ps) { display: none; }
body .ps-head > .ps-actions .uk-btn:not(#ps) { white-space: nowrap; }
/* With no actions, help moves up beside the title. */
body .ps-head:has(> .ps-actions[hidden]):not(#ps) { grid-template-areas: "main help" "ws ws"; }

/* ── ContextualRomeyHelp: What is this? and Ask Romey, always here, quieter than any action ── */
body .ps-head > .ps-help:not(#ps) { grid-area: help; display: flex; justify-content: flex-end; align-items: center; min-height: 28px; margin: 0 !important; max-width: none; }
body .ps-head .ps-help .ui-tools:not(#ps) { display: flex; flex-wrap: nowrap; gap: var(--s-1, 4px); align-items: center; margin: 0 !important; flex-basis: auto; }
body .ps-head .ps-help .ui-tools button:not(#ps) {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; min-height: 0; padding: 0 8px !important; border: 0 !important; border-radius: var(--r-md, 6px) !important;
  background: transparent !important; color: var(--c-text-3, #7F9BB6) !important; font: inherit; font-size: var(--t-small, 13px) !important; font-weight: 500 !important; text-decoration: none !important; white-space: nowrap; cursor: pointer;
  transition: background-color .12s ease, color .12s ease; }
body .ps-head .ps-help .ui-tools button:hover:not(#ps), body .ps-head .ps-help .ui-tools button[aria-expanded="true"]:not(#ps) { background: var(--c-surface-2, #0F2F50) !important; color: var(--c-text, #F2F6FA) !important; }
body .ps-head .ps-help .ui-tools .ui-romey-btn::before { content: ""; width: 18px; height: 18px; border-radius: 50%; background: url("/brand/romey-face-256.1683471eab.webp") center/cover no-repeat, var(--c-surface-2, #0F2F50); flex: none; }
@media (prefers-reduced-motion: reduce) { body .ps-head .ps-help .ui-tools button:not(#ps) { transition: none; } }

/* ── The workspace: a picker for staff only (members switch in the menu); a quiet line when the page shows another ── */
body .ps-head > .ps-ws:not(#ps) { grid-area: ws; margin: 0 !important; max-width: 280px; }
body .ps-head > .ps-ws:empty:not(#ps) { display: none; }
body .ps-head > .ps-ws select:not(#ps) { width: 100%; }
body .ps-head .ps-ws-label { font-size: var(--t-small, 13px); color: var(--c-text-2, #A9BFD3); }
body .ps-head .ps-ws-k { color: var(--c-text-3, #7F9BB6); }

/* The "What is this?" panel opens under the header, inside the content width. */
body .ps-page > .ui-help:not(#ps) { margin: calc(-1 * var(--page-head-gap) + var(--s-2, 8px)) 0 var(--page-head-gap) !important; }

/* ── PageTabs: one underline style for every set of tabs; on a phone they scroll sideways, never wrap ── */
.ps-tabs { display: flex; align-items: flex-end; gap: var(--s-3, 12px); border-bottom: 1px solid var(--c-border, #16385A); margin: 0 0 var(--page-section-gap, 24px); min-width: 0; }
.ps-tabs .ps-tablist { display: flex; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; gap: var(--s-1, 4px); }
.ps-tabs .ps-tablist::-webkit-scrollbar { display: none; }
.ps-tabs .ps-tab:not(#ps) {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; height: var(--ps-tab-h); padding: 0 var(--s-3, 12px) !important; margin: 0 0 -1px; background: none !important; border: 0 !important;
  border-bottom: 2px solid transparent !important; border-radius: 0 !important; color: var(--c-text-2, #A9BFD3) !important; font: inherit; font-family: inherit !important; font-size: var(--t-body, 14px) !important;
  font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important; text-decoration: none !important; white-space: nowrap; cursor: pointer; transition: color .12s ease, border-color .15s ease; }
.ps-tabs .ps-tab:hover:not(#ps) { color: var(--c-text, #F2F6FA) !important; }
.ps-tabs .ps-tab:is([aria-selected="true"], .on):not(#ps) { color: var(--c-text, #F2F6FA) !important; font-weight: 600 !important; border-bottom-color: var(--c-primary, #00B4FF) !important; }
.ps-tabs .ps-tab:focus-visible:not(#ps) { outline: 2px solid var(--c-primary, #00B4FF) !important; outline-offset: -2px !important; border-radius: var(--r-sm, 4px) var(--r-sm, 4px) 0 0 !important; }
.ps-tabs .ps-tab-n { color: var(--c-text-3, #7F9BB6); font-weight: 500; }
.ps-tabs .ps-tabs-end { flex: none; display: flex; align-items: center; gap: var(--s-2, 8px); padding-bottom: var(--s-1, 4px); }
@media (prefers-reduced-motion: reduce) { .ps-tabs .ps-tab:not(#ps) { transition: none; } }

/* At 900px and below the menu is a bar above the page: the header keeps the standard gap from it. */
@media (max-width: 900px) { body .ps-page > .ps-head:not(#ps) { padding-top: var(--page-head-gap) !important; } }

/* ── Phone: title, line, actions, then help; nothing wider than the screen ── */
@media (max-width: 640px) {
  body .ps-page > .ps-head:not(#ps), body .ps-head:has(> .ps-actions[hidden]):not(#ps) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "actions" "help" "ws"; row-gap: var(--s-3, 12px); }
  body .ps-head > .ps-actions:not(#ps) { justify-content: flex-start; min-height: 0; }
  body .ps-head > .ps-help:not(#ps) { justify-content: flex-start; min-height: 0; margin-left: -8px !important; }
  body .ps-head > .ps-ws:not(#ps) { max-width: none; }
}
/* Phone: the primary action leads its row. */
@media (max-width: 640px) { body .ps-head > .ps-actions .uk-btn.primary:not(#ps) { order: -1; } }