/* S1 shell (body.s1-shell): the legacy rail, topbar and dock in the S1 look. Present only for viewers who have the S1
 * Home / Command Center; without the class nothing below applies and classic pages are untouched. Tokens: s1-tokens.css.
 * Every destination stays; only presentation changes. */
body.s1-shell { background: var(--s1-canvas); font-family: var(--s1-font-ui); }
body.s1-shell .app-shell { background: var(--s1-canvas); }

/* ── Rail (desktop) ─────────────────────────────────────────────────────────────────────────── */
@media (min-width: 901px) {
  body.s1-shell .app-shell { grid-template-columns: 216px minmax(0, 1fr); }
  body.s1-shell .rail { top: 0; height: 100dvh; margin: 0; border: 0; border-radius: 0; background: var(--s1-rail); box-shadow: none; backdrop-filter: none; }
  body.s1-shell .brand { height: 76px; }
  body.s1-shell .brand-mark { width: 34px; height: 40px; }
  body.s1-shell .rail .brand, body.s1-shell .rail .portal-release-version { flex-shrink: 0; }
  body.s1-shell .rail .nav-item { flex-direction: row; justify-content: flex-start; gap: 12px; min-height: 42px; padding: 0 12px; border-radius: var(--s1-radius-control); color: #c9ccd4; font: 600 14px var(--s1-font-ui); text-align: left; text-decoration: none; }
  body.s1-shell .rail .grouped-nav-home > span:nth-child(2) { font-size: 14px; }
  body.s1-shell .rail .nav-item::before { display: block; left: -12px; top: 11px; width: 3px; height: 20px; border-radius: 0 3px 3px 0; background: transparent; }
  body.s1-shell .rail .nav-item:hover { color: #fff; background: rgba(255, 255, 255, .08); }
  body.s1-shell .rail .nav-item.is-active, body.s1-shell .rail .nav-item[aria-current="page"] { color: #fff; background: rgba(255, 255, 255, .14); }
  body.s1-shell .rail .nav-item.is-active::before, body.s1-shell .rail .nav-item[aria-current="page"]::before { background: #fff; }
  body.s1-shell .rail :focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
  body.s1-shell .rail > .portal-release-version { padding: 12px 16px 16px; color: #7d8493; text-align: left; font-size: 11px; }
}

/* flyouts open beside the rail: same dark surface so the rail reads as one object */

/* ── Workspace and slim top bar (not on the Project page, which sets its own host rules) ─────── */
body.s1-shell:not(.s1-project-mode) .workspace { max-width: 1440px; margin: 0 auto; padding: 0 0 48px; }
body.s1-shell:not(.s1-project-mode) .topbar { min-height: 56px; margin: 0; padding: 10px clamp(16px, 2.6vw, 44px) 0; gap: 16px; }
body.s1-shell .topbar-actions { gap: 10px; }
body.s1-shell .topbar .search { width: min(34vw, 360px); height: 38px; padding: 0 12px; border: 1px solid var(--s1-line); border-radius: var(--s1-radius-control); background: var(--s1-panel); box-shadow: none; }
body.s1-shell .topbar .search:focus-within { border-color: var(--s1-ink); }
body.s1-shell .topbar .search input { font: 400 14px var(--s1-font-ui); }
body.s1-shell .topbar .icon-button { width: 38px; height: 38px; border: 1px solid var(--s1-line); border-radius: var(--s1-radius-control); background: var(--s1-panel); box-shadow: none; color: var(--s1-ink); }
body.s1-shell .topbar .avatar { width: 34px; height: 34px; background: var(--s1-ink); color: #fff; box-shadow: none; font: 700 13px var(--s1-font-ui); text-decoration: none; }
body.s1-shell .topbar .main-site { font: 600 13px var(--s1-font-ui); color: var(--s1-ink-2); white-space: nowrap; }
body.s1-shell .topbar .role-preview-control { grid-auto-flow: column; align-items: center; gap: 8px; max-width: none; color: var(--s1-mute); font: 600 12px var(--s1-font-ui); white-space: nowrap; }
body.s1-shell .topbar .role-preview-control select { width: auto; min-height: 38px; border: 1px solid var(--s1-line); border-radius: var(--s1-radius-control); background: var(--s1-panel); color: var(--s1-ink); font: 600 13px var(--s1-font-ui); }

/* one greeting: S1 pages own their heading, so the legacy topbar copy is not rendered on them; other pages keep a compact title */
body.s1-shell[data-route="home"] .topbar-copy, body.s1-shell[data-route="command"] .topbar-copy, body.s1-shell[data-route="projects"] .topbar-copy, body.s1-shell[data-route="project"] .topbar-copy { display: none; }
body.s1-shell .topbar-copy { min-width: 0; }
body.s1-shell .topbar-copy .eyebrow, body.s1-shell .topbar-copy .topbar-subtitle { display: none; }
body.s1-shell .topbar-copy .topbar-title { font: 700 20px/1.2 var(--s1-font-display); letter-spacing: -.01em; color: var(--s1-ink); }
body.s1-shell .topbar-actions { margin-left: auto; }
body.s1-shell.s1-shell .s1-home, body.s1-shell .s1cc { max-width: none; }

/* ── Mobile dock ─────────────────────────────────────────────────────────────────────────────── */
body.s1-shell .mobile-dock { background: var(--s1-rail); border-color: var(--s1-rail); box-shadow: 0 -4px 18px rgba(17, 19, 24, .2); }
body.s1-shell .mobile-dock .portal-release-version { color: #7d8493; }
@media (max-width: 900px) {
  body.s1-shell:not(.s1-project-mode) .workspace { padding: 0 0 28px; }
  body.s1-shell:not(.s1-project-mode) .topbar { min-height: 52px; padding: 8px 16px 0; }
  body.s1-shell .topbar .search { display: none; }
}
@media (max-width: 660px) {
  body.s1-shell .topbar .role-preview-control { font-size: 0; gap: 0; }
  body.s1-shell .topbar .role-preview-control select { min-height: 36px; max-width: 170px; font-size: 13px; }
  body.s1-shell .topbar-actions { width: 100%; justify-content: flex-end; }
}

/* First paint for returning S1 viewers: index.html adds body.s1-project-mode from the stored hint before the first paint,
 * so the Project host must show (with its skeleton) even while still [hidden] and the classic page-shell stays hidden.
 * app.js fills the host skeleton at boot and removes the class again if the server says classic. */
body.s1-project-mode [data-s1-project] { display: block; }

/* Boot state: signed in, no S1 hint yet (index.html adds html.rwt-booting). A dark rail and a canvas skeleton stand in for the
 * shell until /api/portal/me decides S1 or classic; the 4s safety timeout in index.html removes the class either way. */
html.rwt-booting body { background: var(--s1-canvas); }
html.rwt-booting .app-shell > .rail > *, html.rwt-booting .workspace > *, html.rwt-booting .mobile-dock, html.rwt-booting .skip-link { visibility: hidden; }
html.rwt-booting .app-shell { background: var(--s1-canvas); }
html.rwt-booting .rail { background: var(--s1-rail); box-shadow: none; border-color: transparent; }
html.rwt-booting .workspace::before {
  content: ""; display: block; height: min(560px, 70vh); margin: 64px clamp(16px, 2.6vw, 44px) 0; border-radius: var(--s1-radius-control);
  background:
    linear-gradient(var(--s1-line), var(--s1-line)) 0 0 / 38% 28px no-repeat,
    linear-gradient(var(--s1-line), var(--s1-line)) 0 48px / 22% 14px no-repeat,
    linear-gradient(var(--s1-panel), var(--s1-panel)) 0 100px / 100% 120px no-repeat,
    linear-gradient(var(--s1-panel), var(--s1-panel)) 0 244px / 32% 220px no-repeat,
    linear-gradient(var(--s1-panel), var(--s1-panel)) 34% 244px / 32% 220px no-repeat,
    linear-gradient(var(--s1-panel), var(--s1-panel)) 68% 244px / 32% 220px no-repeat;
}
@media (min-width: 901px) {
  html.rwt-booting .app-shell { grid-template-columns: 216px minmax(0, 1fr); }
  html.rwt-booting .rail { top: 0; height: 100dvh; margin: 0; border-radius: 0; }
}
@media (max-width: 900px) { html.rwt-booting .workspace::before { margin-top: 24px; } }

/* ── Classic leftovers inside S1 (sweep) ─────────────────────────────────────────────────────────
 * Any element still rendered by a classic module (feedback, inbox, personal projects, access-denied cards, legacy dialogs)
 * reads the legacy design tokens. Inside the S1 shell those tokens map to the S1 palette, so the classic markup shows
 * S1 ink, grey lines and ink buttons instead of navy headings and maroon buttons. Nothing here changes behavior or markup. */
body.s1-shell {
  --s1-font-ui: "RWT S1 Inter", Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --s1-font-display: "RWT S1 Inter Tight", "RWT S1 Inter", "Inter Tight", Inter, system-ui, sans-serif;
  --font: "RWT S1 Inter", Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --bg: var(--s1-canvas); --surface: var(--s1-panel); --surface-muted: var(--s1-panel-head);
  --ink: var(--s1-ink); --muted: var(--s1-mute); --faint: var(--s1-mute); --line: var(--s1-line); --control-border: var(--s1-line);
  --accent: var(--s1-ink); --accent-dark: var(--s1-ink-hover); --accent-soft: var(--s1-column); --focus-ring: var(--s1-ink);
  --radius-xl: 12px; --radius-lg: 12px; --radius-md: var(--s1-radius-control);
  --shadow: none; --shadow-hover: none;
}

/* brand mark keeps its own maroon (it reads --accent, which the block above turns to ink) */
body.s1-shell .brand { --accent: #9d2948; --accent-dark: #7f1736; }

/* programmatic focus on a heading (route change) is not a keyboard target: no ring box around the title */
body.s1-shell :is(h1, h2, h3, h4, main, section, article, header, .k-title, .s1t-title, .s1cc-title)[tabindex="-1"]:focus, body.s1-shell :is(h1, h2, h3, h4, main, section, article, header, .k-title, .s1t-title, .s1cc-title)[tabindex="-1"]:focus-visible { outline: none !important; box-shadow: none; }

/* one title: these S1 / classic pages carry their own heading, so the legacy topbar copy is not shown on them either */
body.s1-shell[data-route="people"] .topbar-copy, body.s1-shell[data-route="profile"] .topbar-copy, body.s1-shell[data-route="browse"] .topbar-copy,
body.s1-shell[data-route="feedback"] .topbar-copy, body.s1-shell[data-route="collaboration"] .topbar-copy, body.s1-shell[data-route="help"] .topbar-copy { display: none; }

/* Gutter for classic pages that render straight into the page root (S1 pages set their own). */

/* Inbox (reached from the bell and the Messages | Inbox tabs): S1 segmented tabs, panels and rows */

/* Partner projects (collaboration) page and its empty state */

/* The Ask button floats above everything (z-index 850); while a dialog or sheet is open it would cover the dialog's own buttons. */
body:has(.k-modal-root, dialog[open], .drawer-backdrop.is-open, .portal-guide[open]) .asst-trigger { visibility: hidden; pointer-events: none; }

/* Guided tour (Show me around): ink card and highlight instead of the maroon one. */
body.s1-shell .portal-guide::backdrop { background: rgb(17 19 24 / .45); }

/* Command Center access card */
body.s1-shell a.s1-btn { text-decoration: none; }
body.s1-shell .s1cc-gate .s1-btn { justify-self: start; }

/* Publication request / review pages (reached from the project's Publication tab and Command Center > Publication review) */
body.s1-shell :is(.publication-route-header h1, .publication-route-panel h1, .publication-review-queue h1) { font: 700 var(--s1-title)/1.15 var(--s1-font-display); letter-spacing: -.015em; color: var(--s1-ink); }
body.s1-shell :is(.publication-route-panel, .publication-review-release, .publication-review-card, .publication-request-history) { border: 1px solid var(--s1-line); border-radius: var(--s1-radius-panel); background: var(--s1-panel); box-shadow: none; }
body.s1-shell :is(.publication-route-field, .publication-review-note) :is(input:not([type=checkbox]):not([type=radio]), textarea, select) { min-height: 40px; border: 1px solid var(--s1-line); border-radius: var(--s1-radius-control); background-color: var(--s1-panel); padding: 9px 12px; font: 400 14px/1.4 var(--s1-font-ui); color: var(--s1-ink); }
body.s1-shell :is(.publication-route-field, .publication-review-note) :is(input, textarea, select):focus-visible { outline: none; border-color: var(--s1-ink); box-shadow: 0 0 0 3px rgb(17 19 24 / .1); }
body.s1-shell :is(.publication-route-page, .publication-review-queue) :is(.button, button):not(.s1-btn) { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 8px 16px; border: 1px solid var(--s1-line); border-radius: var(--s1-radius-control);
  background: var(--s1-panel); color: var(--s1-ink); font: 600 14px var(--s1-font-ui); text-decoration: none; box-shadow: none; cursor: pointer; }
body.s1-shell :is(.publication-route-page, .publication-review-queue) :is(.button-primary, [type=submit]):not(.s1-btn) { border-color: var(--s1-ink); background: var(--s1-ink); color: var(--s1-on-ink); font-weight: 700; }
body.s1-shell :is(.publication-route-page, .publication-review-queue) :is(.button, button):not(.s1-btn):hover { background: var(--s1-panel-head); }
body.s1-shell :is(.publication-route-page, .publication-review-queue) :is(.button-primary, [type=submit]):not(.s1-btn):hover { background: var(--s1-ink-hover); }

/* Bare links inside S1 pages and dialogs (inline guide links, "Add skills"...) use the browser blue; give them the S1 ink. */
/* :where() keeps this at link specificity so any component rule (.k-set-nav a, ...) wins. */
:where(body.s1-shell :is(#student-page-root, .k-modal-root, dialog.s1-dialog)) a:not([class]) { color: var(--s1-ink); text-decoration: underline; text-underline-offset: 2px; }
:where(body.s1-shell :is(#student-page-root, .k-modal-root, dialog.s1-dialog)) a:not([class]):hover { color: var(--s1-ink-hover); }

/* ---- Phone (390): reachable actions, scrolling tabs, clear of the dock and the Ask button, work before stats ---- */
@media (max-width: 640px) {
  /* Primary actions and filter chips: 44px minimum touch target (icons do not grow; only the hit area). */
  body.s1-shell :is(.s1h-btn, .s1h-fchip, .s1h-btn--sm, .k-btn, .k-btn--sm, .k-fchip, .k-tab, .k-iconbtn, .k-select, .kp-linkbtn, .button-primary, .button-secondary, .soft-button, .text-button, .calendar-add-button, .kt-status, .kt-check, .k-seg > button, .s1h-seg button, .s1-project-header .s1-btn, .project-actions :is(button, select), .project-state-preview select, .current .advance, .complete > button, .key-date > button) { min-height: 44px; }
  body.s1-shell :is(.complete, .key-date) > button { min-width: 44px; }
  body.s1-shell :is(.project-identity, .project-phases, .phase-strip) button[title*="Edit" i], body.s1-shell button:is([aria-label^="Edit"], [title^="Edit"]):not(.k-iconbtn) { min-height: 44px; min-width: 44px; }
  body.s1-shell :is(.k-iconbtn, .kt-check) { min-width: 44px; }
  body.s1-shell :is(.s1h-btn, .k-btn, .k-fchip, .s1h-fchip, .k-tab, .kt-status) { display: inline-flex; align-items: center; justify-content: center; }
  /* Project tabs: one scrolling row with a fade on the trailing edge instead of clipped labels. */
  body.s1-shell .s1-tabs { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; scroll-snap-type: x proximity; padding: 0 28px 0 4px;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
  body.s1-shell .s1-tabs::-webkit-scrollbar { display: none; }
  body.s1-shell .s1-tabs > .s1-tab { flex: 0 0 auto; min-width: 76px; padding-inline: 12px; scroll-snap-align: start; white-space: nowrap; }
  /* Pages end above the dock and the Ask button, so the last actions are never covered. */
  body.s1-shell:is(.s1-project-mode, :not(.s1-project-mode)) .workspace { padding-bottom: calc(140px + env(safe-area-inset-bottom, 0px)); }
  body.s1-shell .asst-trigger { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
  body.s1-shell:has(.s1n-sheet:not([hidden]), .k-modal-root, [data-sticky-actions]) .asst-trigger { visibility: hidden; pointer-events: none; }
  /* Home: the four stat tiles become two compact rows with "Waiting on you" first, so the work list starts on screen one. */
  body.s1-shell .s1h-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
  body.s1-shell .s1h-tile { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "n head"; align-items: center; column-gap: 10px; min-height: 52px; padding: 8px 12px; border-top-width: 3px; }
  body.s1-shell .s1h-tile > b { grid-area: n; font-size: 24px; line-height: 1; }
  body.s1-shell .s1h-tile > .s1h-tile-head { grid-area: head; font-size: 13px; line-height: 1.25; }
  body.s1-shell .s1h-tile > .s1h-mute { display: none; }
  body.s1-shell .s1h-tile:nth-child(2) { order: -1; }
}

/* Preview as: Kit menu button (replaces the native select) and the preview banner in S1 colors */
body.s1-shell .topbar .rpc-menu .k-btn { gap: 6px; }
body.s1-shell .topbar .rpc-menu .rpc-k { color: var(--s1-mute); font-weight: 600; }
body.s1-shell .topbar .rpc-menu .rpc-v { color: var(--s1-ink); font-weight: 700; }
@media (max-width: 640px) { body.s1-shell .topbar .rpc-menu .rpc-k { display: none; } }

/* Phone: keep the docked rail clear of focused fields and keep inputs at 16px so iOS does not zoom on focus. */
@media (max-width: 660px) {
  html { scroll-padding-bottom: 140px; }
  body.s1-shell .workspace :is(input, select, textarea, button, a) { scroll-margin-block: 16px 140px; }
  body.s1-shell .workspace :is(input:not([type=checkbox]):not([type=radio]), select, textarea) { font-size: 16px; }
}

/* ---- Phone, round 2: touch size and zoom guards that the first phone block did not cover ---- */
@media (max-width: 640px) {
  body.s1-shell .topbar .avatar { width: 44px; height: 44px; }
  body.s1-shell .workspace :is(input:not([type=checkbox]):not([type=radio]), select, textarea) { font-size: 16px; }
  body.s1-shell :is([role=tab], .s1-text-btn, .k-seg > button, .k-menu-item) { min-height: 44px; }
  body.s1-shell :is(.k-fchip, .s1h-fchip) :is(select) { min-height: 44px; }
  body.s1-shell :is(.s1pp-name, .s1-person-link, .k-row-title) { padding-block: 6px; }
  body.s1-shell :is(.s1-project-breadcrumb, .project-breadcrumb, nav[aria-label=Breadcrumb]) a { display: inline-flex; align-items: center; min-height: 44px; }
}