body {
 display: grid;
 grid-template-areas:
 "topbar"
 "workspace";
 grid-template-columns: minmax(0, 1fr);
 grid-template-rows: calc(var(--ui-topbar-height) + env(safe-area-inset-top, 0px)) minmax(0, 1fr);
 background:
 radial-gradient(75rem 44rem at 85% -10%, var(--ui-glow-1), transparent 60%),
 radial-gradient(56rem 38rem at -10% 110%, var(--ui-glow-2), transparent 60%),
 var(--ui-bg);
 color: var(--ui-text);
}.topbar {
 grid-area: topbar;
 /* OAS6: one row — brand, destinations, actions (the empty title-row used
    to collapse; the top nav made the row explicit). */
 display: flex;
 align-items: center;
 gap: 0.4rem;
 min-height: calc(var(--ui-topbar-height) + env(safe-area-inset-top, 0px));
 padding: calc(0.55rem + env(safe-area-inset-top, 0px))
 max(1.15rem, env(safe-area-inset-right, 0px)) 0.55rem
 max(1.15rem, env(safe-area-inset-left, 0px));
 border-bottom: 1px solid var(--ui-line);
 background: var(--ui-panel);
 box-shadow: none;
}.brand-mark {
 width: 2.4rem;
 height: 2.4rem;
 border-radius: 0.42rem;
}.topbar-actions {
 align-items: center;
 gap: 0.65rem;
}/* Shell round (19 Aug): the visible-email .hosted-user rule that used to
   live here is gone — #hosted-session moved to the sidebar operator block
   (chrome-fidelity.css) and the email label is now .visually-hidden by
   design (sign-out is icon-only; the email itself was removed from view, not just restyled). */

.ui-icon, .shell-nav-icon svg, .topbar-icon-control svg {
 display: block;
 width: 1.25rem;
 height: 1.25rem;
 fill: none;
 stroke: currentColor;
 stroke-width: 1.7;
 stroke-linecap: round;
 stroke-linejoin: round;
}.topbar-icon-control {
 position: relative;
 display: grid;
 width: 2.35rem;
 min-width: 2.35rem;
 place-items: center;
 padding: 0;
}.topbar-avatar {
 display: grid;
 width: 2.35rem;
 height: 2.35rem;
 place-items: center;
 border: 1px solid var(--ui-line);
 border-radius: 50%;
 background: var(--ui-raised);
 color: var(--ui-text-soft);
 font: 650 0.68rem/1 ui-monospace, Menlo, monospace;
}.shell-overflow-wrap {
 position: relative;
 display: none;
}.shell-overflow-menu {
 position: absolute;
 z-index: 40;
 top: calc(100% + 0.45rem);
 right: 0;
 width: 12rem;
 padding: 0.35rem;
 border: 1px solid var(--ui-line);
 border-radius: 0.55rem;
 background: var(--ui-raised);
 box-shadow: var(--ui-shadow);
}.shell-overflow-menu button {
 display: grid;
 width: 100%;
 min-height: 2.5rem;
 grid-template-columns: 1.5rem minmax(0, 1fr);
 align-items: center;
 gap: 0.55rem;
 padding: 0.5rem 0.65rem;
 border: 0;
 border-radius: 0.35rem;
 background: transparent;
 color: var(--ui-text);
 font: inherit;
 font-size: 0.75rem;
 text-align: left;
}.shell-overflow-menu button:hover, .shell-overflow-menu button:focus-visible {
 background: var(--ui-hover);
}.deployment-identity-mobile {
 margin: 0.35rem 0.65rem 0.2rem;
 padding-top: 0.55rem;
 border-top: 1px solid var(--ui-line);
 color: var(--ui-muted);
 font: 500 0.75rem/1.4 ui-monospace, Menlo, monospace;
 overflow-wrap: anywhere;
}.board-signals-meta {
 display: block;
 margin-top: 0.75rem;
 padding-top: 0.75rem;
 border-top: 1px solid var(--ui-line);
 color: var(--ui-muted);
 font: 500 0.65rem/1.4 ui-monospace, Menlo, monospace;
}.help-popover {
 width: min(32rem, calc(100vw - 1.5rem));
 max-height: min(46rem, calc(100dvh - 5.5rem));
 overflow-y: auto;
 padding: 1rem;
 border-color: var(--ui-line);
 background: var(--ui-raised);
 color: var(--ui-text);
 box-shadow: 0 24px 70px var(--ui-shadow-color);
}.help-header {
 display: flex;
 align-items: flex-start;
 justify-content: space-between;
 gap: 1rem;
 padding-bottom: 0.85rem;
 border-bottom: 1px solid var(--ui-line);
}.help-header > span { display: grid; gap: 0.3rem; }.help-header h2 { margin: 0; font-size: 1.25rem; }.help-header p {
 max-width: 28rem;
 margin: 0;
 color: var(--ui-text-soft);
 font-size: 0.75rem;
 line-height: 1.45;
}.help-kicker {
 color: var(--ui-accent);
 font: 700 0.6rem/1 ui-monospace, Menlo, monospace;
 letter-spacing: 0.12em;
}.help-close {
 display: grid;
 width: 2rem;
 height: 2rem;
 flex: 0 0 auto;
 place-items: center;
 border: 1px solid var(--ui-line);
 border-radius: 0.4rem;
 background: transparent;
 color: var(--ui-text-soft);
 font-size: 1.15rem;
}.help-close:hover, .help-close:focus-visible {
 border-color: var(--ui-accent);
 color: var(--ui-accent);
}.help-actions {
 display: grid;
 gap: 0.55rem;
 margin-top: 0.85rem;
}.help-card {
 display: grid;
 grid-template-columns: 1.5rem minmax(0, 1fr);
 align-items: start;
 gap: 0.7rem;
 width: 100%;
 padding: 0.8rem;
 border: 1px solid var(--ui-line);
 border-radius: 0.55rem;
 background: var(--ui-panel);
 color: var(--ui-text);
 text-align: left;
 text-decoration: none;
}button.help-card:hover, button.help-card:focus-visible, .help-guide:focus-within {
 border-color: var(--ui-accent);
 background: var(--ui-accent-soft);
}.help-card > .ui-icon { margin-top: 0.05rem; color: var(--ui-accent); }.help-card > span { display: grid; gap: 0.2rem; }.help-card strong { font-size: 0.78rem; }.help-card small {
 color: var(--ui-text-soft);
 font-size: 0.69rem;
 line-height: 1.4;
}.help-guide-links {
 display: flex !important;
 gap: 0.35rem 0.65rem !important;
 flex-wrap: wrap;
 margin-top: 0.35rem;
}.help-guide-links a {
 color: var(--ui-accent);
 font-size: 0.75rem;
 font-weight: 700;
}.help-signals {
 margin-top: 0.7rem;
 border: 1px solid var(--ui-line);
 border-radius: 0.55rem;
 background: var(--ui-panel-soft);
}.help-signals summary {
 display: grid;
 grid-template-columns: 1.5rem minmax(0, 1fr);
 gap: 0.7rem;
 align-items: start;
 padding: 0.8rem;
 color: var(--ui-text);
 cursor: pointer;
 list-style: none;
}.help-signals summary::-webkit-details-marker { display: none; }.help-signals summary > .ui-icon { color: var(--ui-accent); }.help-signals summary > span { display: grid; gap: 0.2rem; }.help-signals summary small {
 color: var(--ui-text-soft);
 font-size: 0.69rem;
}.help-signals[open] summary { border-bottom: 1px solid var(--ui-line); }#board-signals-content { display: grid; gap: 0.7rem; padding: 0.8rem; }.help-popover .legend-list { margin: 0; padding: 0; }.help-popover .legend-item { color: var(--ui-muted); }.help-popover .board-signals-meta {
 margin: 0;
 border-top: 1px solid var(--ui-line);
 color: var(--ui-muted);
}.topbar .button {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 0.4rem;
 min-height: 2.35rem;
 border-color: var(--ui-line);
 border-radius: 0.42rem;
}.topbar .button.primary {
 border-color: var(--ui-primary);
 background: var(--ui-primary);
 color: var(--ui-primary-text);
}.topbar .ask-mainframe {
 border-color: color-mix(in srgb, var(--ui-accent) 45%, var(--ui-line));
 color: var(--ui-accent);
}.topbar .global-action-icon {
 display: inline-flex;
 flex: 0 0 auto;
 margin-right: 0;
 font-weight: 750;
}.launch-label-narrow, .ask-label-narrow, .shell-mobile-apps {
 display: none;
}.tab-link {
 display: grid;
 width: 100%;
 min-width: 0;
 min-height: 2.65rem;
 grid-template-columns: 1.65rem minmax(0, 1fr) auto;
 align-items: center;
 gap: 0.55rem;
 padding: 0.55rem 0.65rem;
 border: 1px solid transparent;
 border-radius: 0.42rem;
 background: transparent;
 color: var(--ui-text-soft);
 font-size: 0.75rem;
 text-align: left;
}.tab-link:hover {
 border-color: transparent;
 background: var(--ui-hover);
 color: var(--ui-text);
}.tab-link[aria-selected="true"] {
 border-color: color-mix(in srgb, var(--ui-accent) 32%, transparent);
 background: var(--ui-accent-soft);
 color: var(--ui-accent);
}.shell-nav-icon {
 display: grid;
 width: 1.5rem;
 height: 1.5rem;
 place-items: center;
 color: currentColor;
 font-size: 1.25rem;
 line-height: 1;
}.shell-nav-icon svg {
 width: 1.5rem;
 height: 1.5rem;
}.deployment-identity {
 display: block;
 min-width: 0;
 color: var(--ui-muted);
 font: 500 0.75rem/1.4 ui-monospace, Menlo, monospace;
 overflow-wrap: anywhere;
}.tab-panel {
 grid-area: workspace;
 min-width: 0;
 min-height: 0;
 overflow: auto;
 padding-block: var(--ui-page-gutter);
 padding-inline: var(--ui-page-gutter);
 background-color: var(--ui-bg);
 background-image:
 linear-gradient(
 color-mix(in srgb, var(--ui-line) 22%, transparent) 1px,
 transparent 1px
 ),
 linear-gradient(
 90deg,
 color-mix(in srgb, var(--ui-line) 22%, transparent) 1px,
 transparent 1px
 );
 background-size: 2rem 2rem;
}.destination-page {
 /* UIQ R3: Files, Routines, and Connections share one horizontal canvas.
    Page-local presentation may differ, but destination width never does. */
 padding-inline: var(--ui-page-gutter);
}.workforce-welcome {
 display: grid;
 min-height: 12rem;
 grid-column: 1 / -1;
 place-items: center;
 align-content: center;
 gap: 0.7rem;
 padding: clamp(1.5rem, 4vw, 3rem);
 border: 1px solid var(--ui-line-soft);
 border-radius: 0.75rem;
 background: color-mix(in srgb, var(--ui-panel) 82%, transparent);
 color: var(--ui-text-soft);
 text-align: center;
}.workforce-welcome-mark {
 display: grid;
 width: 2.5rem;
 height: 2.5rem;
 place-items: center;
 border-radius: 50%;
 background: var(--ui-accent-soft);
 color: var(--ui-accent);
 font-size: 1rem;
}.workforce-welcome h3 {
 color: var(--ui-text);
 font-size: 1rem;
}.workforce-welcome p {
 max-width: 31rem;
 color: var(--ui-text-soft);
 font-size: 0.78rem;
}.workforce-welcome .button {
 margin-top: 0.25rem;
}body.standalone {
 display: block;
}

@media (max-width: 820px) {
html, body {
 width: 100%;
 max-width: 100vw;
 overflow-x: hidden;
 }
body {
 grid-template-areas:
 "topbar"
 "workspace"
 "navigation";
 grid-template-columns: minmax(0, 1fr);
 grid-template-rows: calc(4rem + env(safe-area-inset-top, 0px)) minmax(0, 1fr) auto;
 }
.topbar {
 min-height: calc(4rem + env(safe-area-inset-top, 0px));
 gap: 0.5rem;
 padding: calc(0.65rem + env(safe-area-inset-top, 0px))
 max(0.8rem, env(safe-area-inset-right, 0px)) 0.65rem
 max(0.8rem, env(safe-area-inset-left, 0px));
 }
.topbar-avatar {
 display: none;
 }
.title-row {
 min-width: 0;
 flex: 1 1 auto;
 flex-wrap: nowrap;
 }
.topbar-actions {
 min-width: 0;
 flex: 0 0 auto;
 gap: 0.35rem;
 }
/* T321: the only phone status affordance is the live health dot. */
 .topbar #board-health {
 display: inline-flex !important;
 width: 1.25rem;
 min-width: 1.25rem;
 height: 2rem;
 justify-content: center;
 padding: 0;
 border: 0;
 background: transparent;
 }
.topbar #board-health-label {
 display: none !important;
 }
/* T321: compact plus action; the full Launch label remains the accessible
 name while the rendered phone control stays one small action. */
 .topbar #launch-open {
 position: relative;
 min-width: 44px;
 min-height: 44px;
 width: 44px;
 padding: 0;
 font-size: 0;
 }
.topbar #launch-open::before {
 content: "+";
 font-size: 1.45rem;
 font-weight: 500;
 line-height: 1;
 }
.topbar #launch-open .global-action-icon, .topbar #launch-open .launch-label-wide, .topbar #launch-open .launch-label-narrow {
 display: none !important;
 }
.topbar #launch-open.is-expanded {
 background: var(--ui-accent-soft);
 color: var(--ui-accent);
 }
/* T326: Ask Mainframe is not a topbar/launch surface control on phone. */
 .topbar #ask-mainframe {
 display: none !important;
 }
/* The desktop Agents dock-list toggle is replaced by bottom navigation on
   phone; it continues to open the multi-dock rail on desktop. */
 .topbar #agents-dock-open {
 display: none !important;
 }
.ask-label-wide, .launch-label-wide {
 display: none;
 }
.launch-label-narrow, .ask-label-narrow, .shell-overflow-wrap {
 display: inline;
 }
.shell-overflow-wrap {
 display: block;
 }
.help-popover {
 top: 4.35rem;
 right: 0.75rem;
 max-height: calc(100dvh - 5.1rem);
 }
.shell-overflow-toggle {
 display: inline-flex;
 align-items: center;
 gap: 0.25rem;
 }
.topbar .button {
 min-width: 2.35rem;
 padding-inline: 0.6rem;
 font-size: 0.75rem;
 line-height: 1.2;
 white-space: nowrap;
 }
.topbar .global-action-icon {
 margin-right: 0;
 }
#apps-tab-control, .tab-link .tab-count, .tab-link .shell-nav-icon {
 display: none;
 }
.shell-nav-disabled .shell-nav-icon {
 display: none;
 }
.tab-link {
 display: grid;
 min-height: 2.7rem;
 grid-template-columns: 1fr;
 place-items: center;
 padding: 0.35rem 0;
 font-size: 0.75rem;
 letter-spacing: -0.025em;
 text-align: center;
 }
.tab-panel {
 padding: 1rem;
 padding-bottom: calc(5rem + env(safe-area-inset-bottom));
 }
.workforce-welcome {
 min-height: 13rem;
 padding: 1.25rem;
 }
}

@media (prefers-reduced-motion: reduce) {
body, .tab-panel {
 scroll-behavior: auto;
 }
}

@media (max-width: 500px) {
.topbar {
 padding-inline:max(0.5rem, env(safe-area-inset-left, 0px))
 max(0.5rem, env(safe-area-inset-right, 0px));
 }
.brand-mark {
 width: 2rem;
 height: 2rem;
 }
.topbar-actions {
 gap: 0.2rem;
 }
.topbar .button {
 padding-inline: 0.45rem;
 }
.shell-overflow-toggle .ui-icon {
 width: 1rem;
 }
}

/* T326 phone Agents sheet. */
.agents-sheet-dialog {
 display: flex;
 flex-direction: column;
 width: min(100%, 28rem);
 max-height: min(100dvh, 40rem);
 margin: auto;
 overflow: hidden;
}.agents-sheet-list {
 display: flex;
 flex-direction: column;
 gap: 0.35rem;
 flex: 1 1 auto;
 min-height: 0;
 overflow: auto;
 padding: 0.75rem;
}.agents-sheet-empty {
 margin: 1rem 0.25rem;
 color: var(--ui-muted);
 font-size: 0.85rem;
}.agents-sheet-row {
 display: flex;
 align-items: center;
 gap: 0.65rem;
 width: 100%;
 min-height: 56px;
 padding: 0.55rem 0.7rem;
 border: 1px solid var(--ui-line);
 border-radius: 0.55rem;
 background: var(--ui-panel);
 color: inherit;
 text-align: left;
 cursor: pointer;
}.agents-sheet-row:hover, .agents-sheet-row:focus-visible {
 border-color: var(--ui-line-strong);
 background: var(--ui-hover);
}.agents-sheet-row:focus-visible {
 outline: 2px solid var(--ui-accent);
 outline-offset: 2px;
}.agents-sheet-dot {
 width: 0.55rem;
 height: 0.55rem;
 flex: 0 0 auto;
 border-radius: 50%;
 background: var(--ui-muted);
}.agents-sheet-dot[data-state="working"] { background: var(--ui-accent); }.agents-sheet-dot[data-state="needs_input"] { background: var(--ui-warn, #a15c12); }.agents-sheet-dot[data-state="idle"] { background: var(--ui-ok, #2f7d4a); }.agents-sheet-copy {
 display: grid;
 gap: 0.15rem;
 min-width: 0;
}.agents-sheet-copy strong {
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
 font-size: 0.9rem;
}.agents-sheet-copy span {
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
 color: var(--ui-muted);
 font-size: 0.75rem;
}

@media (max-width: 820px) {
.agents-sheet-overlay[data-sheet-type="full"] {
 align-items: stretch;
 justify-content: stretch;
 padding: 0 !important;
 }
.agents-sheet-overlay[data-sheet-type="full"] > .agents-sheet-dialog {
 width: 100%;
 max-height: none;
 height: 100%;
 margin: 0;
 border-radius: 0;
 }
.agents-sheet-list {
 padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
 }
}
/* T383 (doc 57): nav item treatment — OAS6 keeps it for the topbar
   approvals anchor. *//* nav items: the prototype's hover + active treatment */ .tab-link { align-items: center; gap: 0.6rem; padding: 0.5rem 0.75rem; border-radius: 0.65rem; font-size: 0.85rem; font-weight: 500; color: var(--ui-text-soft); text-decoration: none; transition: background 140ms ease, color 140ms ease; font-family: var(--font-ui); }.tab-link:hover { background: var(--ui-panel-hover); color: var(--ui-text); }.tab-link[aria-selected="true"] { background: var(--ui-panel-hover); color: var(--ui-text); }.tab-link[aria-selected="true"] .shell-nav-icon { color: var(--ui-accent); }/* nav icons slightly larger and consistent */ .shell-nav-icon svg { width: 1.15rem; height: 1.15rem; }/* T381: Inter on chrome surfaces + mono machine layer (restored after the
   T383 compact rewrite so the shipped #1071 pairing survives). */
.topbar .brand-copy h1, .topbar .brand-copy span, .topbar .button, .topbar .hosted-session {
  font-family: var(--font-ui);
}.topbar .health, .topbar time, .shell-operation strong {
  font-family: var(--font-mono);
}
/* Account control: the topbar avatar opens the signed-in identity + sign out.
   The button keeps .topbar-avatar (all existing size/order/visibility rules
   apply unchanged). The menu itself is portaled to <body> by account-menu.js
   and rendered as a fixed-position overlay anchored under the trigger: the
   topbar is an overflow:hidden scroll container, so a menu in its subtree is
   clipped and scrolls the whole bar's content up when it opens (operator
   report, 2026-09-03). top/right are set by the anchor on every open. */
.account-menu {
  position: fixed;
  z-index: var(--cc-z-popover);
  display: grid;
  gap: 0.5rem;
  min-width: 13rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--ui-line);
  border-radius: 0.6rem;
  background: var(--ui-raised);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
}
.account-menu[hidden] { display: none; }
.account-menu .hosted-session {
  display: grid;
  gap: 0.5rem;
  justify-items: start;
}
.account-menu #hosted-user {
  font: inherit;
  font-size: 0.85rem;
  color: var(--ui-fg-muted, inherit);
  overflow-wrap: anywhere;
}
.account-menu .account-local {
  margin: 0;
  font-size: 0.85rem;
  color: var(--ui-fg-muted, inherit);
}