/* ============================================================================
   THE PULSE SHELL. Rail, top bar, command palette, account menu.
   See SHELL_SPEC.md. Load AFTER pulse-design-tokens.css and pulse-robo.css.

   Every selector here has a p- twin and a production class beside it in the
   markup, so this sheet can be adopted without renaming anything: .side keeps
   .side, and .p-rail is what this styles.
   ========================================================================= */

/* SCOPED RESET. Not global: this sheet is lifted into a host app and must not
   restyle anything outside the shell subtree.

   Without it .p-rail { height:100vh; padding:18px 12px 16px } resolves
   content-box and the rail is 574px in a 540px viewport -- so it can never pin
   flush, sticky settles at top:-34 once the page scrolls, and the brand lockup
   is clipped at every scroll position. The padding was not the bug; the
   missing reset was. */
.p-shell, .p-shell *, .p-shell *::before, .p-shell *::after { box-sizing: border-box; }

.p-shell { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100vh; }
.p-rail { display: flex; flex-direction: column; gap: var(--pulse-s4);
          padding: 18px 12px 16px; position: sticky; top: 0;
          height: 100vh; height: 100dvh;
          overflow-y: auto; background: var(--pulse-rail);
          border-right: 1px solid var(--pulse-line); }
/* Nav R5 / CD201: one 24px desktop gutter. Full-bleed workspaces own their
   inner padding; the mobile and print compositions keep their existing rules. */
.p-main { padding: 22px 24px 56px; min-width: 0; }

/* --- brand ---------------------------------------------------------------
   The mark alone. The motto is marketing and never appears in the platform --
   the top-left corner is wayfinding, read past a hundred times a shift. */
.p-brand { display: flex; align-items: baseline; padding: 4px 10px 0;
           text-decoration: none; }
.p-brand-word { font-family: var(--pulse-sans); font-size: 21px; font-weight: 700;
                letter-spacing: -0.03em; color: var(--pulse-ink); }
.p-brand-dot { font-family: var(--pulse-sans); font-size: 21px; font-weight: 700;
               letter-spacing: normal; margin-left: 0.06em;
               color: var(--pulse-brand); }

/* --- platform switcher ---------------------------------------------------
   Above the nav, not in it: a control that changes what every item below it
   MEANS cannot be one of those items. */
.p-platform { display: flex; flex-direction: column; gap: 5px; padding: 0 2px; }
.p-platform-label { font-family: var(--pulse-mono); font-size: 8.5px;
                    letter-spacing: var(--pulse-track-kicker);
                    color: var(--pulse-ink-3); padding-left: 10px; }
.p-platform-menu { position: relative; }
.p-platform-menu > summary { list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 8px; padding: 9px 11px;
  border-radius: var(--pulse-r-inner); background: var(--pulse-well);
  border: 1px solid var(--pulse-line); }
.p-platform-menu > summary::-webkit-details-marker { display: none; }
.p-platform-current { min-width: 0; }
.p-platform-menu > summary:hover { background: var(--pulse-hover);
  border-color: var(--pulse-teal-edge); }
.p-platform-name { font-family: var(--pulse-sans); font-size: 13.5px; font-weight: 600;
                   color: var(--pulse-ink); }
.p-platform-chevron { margin-left: auto; color: var(--pulse-ink-3);
                      transition: transform .15s ease; }
.p-platform-menu[open] .p-platform-chevron { transform: rotate(90deg);
                                             color: var(--pulse-teal); }
.p-platform-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.p-platform-dot[data-platform="ultimate"] { background: var(--pulse-ink-2); }
.p-platform-dot[data-platform="text"]     { background: var(--pulse-pillar-text); }
.p-platform-dot[data-platform="calls"]    { background: var(--pulse-pillar-live); }
.p-platform-dot[data-platform="robo"]     { background: var(--pulse-pillar-robo); }
.p-platform-dot[data-platform="web"]      { background: var(--pulse-pillar-web); }
.p-platform-list { display: flex; flex-direction: column; gap: 1px; margin-top: 4px;
  padding: 4px; border-radius: var(--pulse-r-inner);
  background: var(--pulse-panel); border: 1px solid var(--pulse-line); }
.p-platform-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  border-radius: 7px; font-family: var(--pulse-sans); font-size: 13px;
  color: var(--pulse-ink-2); text-decoration: none; }
.p-platform-item:hover { background: var(--pulse-hover); color: var(--pulse-ink); }
.p-platform-item[aria-current="true"] { background: var(--pulse-well);
  color: var(--pulse-ink); font-weight: 600; }

/* --- nav groups ----------------------------------------------------------
   Collapsible. A user can close the group holding the page they are on, so no
   page may rely on its nav item for orientation. */
.p-nav { display: flex; flex-direction: column; gap: 2px; }
.p-nav-group > summary { list-style: none; }
.p-nav-group > summary::-webkit-details-marker { display: none; }
.p-nav-label { display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin: 3px 2px; padding: 8px 11px; cursor: pointer; user-select: none;
  border: 1px solid transparent; border-radius: var(--pulse-r-inner);
  font-family: var(--pulse-mono); font-size: 9px;
  letter-spacing: var(--pulse-track-kicker); text-transform: uppercase;
  color: var(--pulse-ink-3); background: transparent; }
.p-nav-label:hover { background: var(--pulse-hover); color: var(--pulse-ink-2); }
.p-nav-group[open] > .p-nav-label { color: var(--pulse-ink-2); }
.p-nav-chevron { font-size: 15px; line-height: 9px; color: var(--pulse-ink-3);
                 transition: transform .15s ease; }
.p-nav-group[open] .p-nav-chevron { transform: rotate(90deg); color: var(--pulse-teal); }

.p-nav-items { display: flex; flex-direction: column; gap: 1px; padding: 2px 2px 4px; }
.p-nav-items a { display: flex; align-items: center; gap: 8px; min-height: 34px;
  padding: 7px 11px; border-radius: 8px; text-decoration: none;
  font-family: var(--pulse-sans); font-size: 13.5px; color: var(--pulse-ink-2); }
.p-nav-items a:hover { background: var(--pulse-hover); color: var(--pulse-ink); }
.p-nav-items a[aria-current="page"], .p-nav-items a.active {
  background: var(--pulse-well); color: var(--pulse-ink); font-weight: 600;
  box-shadow: inset 2px 0 0 var(--pulse-teal); }

/* A count sits on the item it counts -- not in a badge tray, where a number
   with no subject is a number nobody can act on. */
.p-nav-count { margin-left: auto; font-family: var(--pulse-mono); font-size: 10px;
  font-variant-numeric: tabular-nums; padding: 1px 7px; border-radius: 999px;
  color: var(--pulse-ink-3); background: var(--pulse-well);
  border: 1px solid var(--pulse-line); }
.p-nav-count[data-tone="block"] { color: var(--pulse-chip-red-ink);
  background: var(--pulse-red-fill); border-color: var(--pulse-red-edge); }
.p-nav-count[data-tone="warn"] { color: var(--pulse-chip-amber-ink);
  background: var(--pulse-amber-fill); border-color: var(--pulse-amber-edge); }

.p-nav-signout { margin-top: auto; padding: 11px; border-radius: 8px;
  border-top: 1px solid var(--pulse-line); text-decoration: none;
  font-family: var(--pulse-sans); font-size: 13px; color: var(--pulse-ink-3); }
.p-nav-signout:hover { color: var(--pulse-ink-2); background: var(--pulse-hover); }

/* --- top bar -------------------------------------------------------------
   ONE element carrying .top and .pulse-global-top. The label is fed from
   $ctxHelp['title'] -- a page does not author its own title. */
.p-top { display: flex; align-items: center; justify-content: space-between;
  gap: var(--pulse-s4); min-height: 62px; margin-bottom: var(--pulse-s5);
  padding-bottom: var(--pulse-s4); border-bottom: 1px solid var(--pulse-line); }
.p-top-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.p-top-label { margin: 0; font-family: var(--pulse-sans); font-size: 22px;
  font-weight: 600; letter-spacing: -0.025em; color: var(--pulse-ink); }
.p-top-sub { font-family: var(--pulse-sans); font-size: 12px; color: var(--pulse-ink-3); }
.p-top-actions { display: flex; align-items: center; justify-content: flex-end;
  gap: 7px; flex-wrap: nowrap; margin-left: auto; min-width: 0; }

.p-top-search, .p-top-icon, .p-top-new, .p-top-liz, .p-account > summary {
  display: flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 11px;
  border-radius: var(--pulse-r-inner); cursor: pointer; text-decoration: none;
  font-family: var(--pulse-sans); font-size: 13px; white-space: nowrap;
  background: var(--pulse-well); border: 1px solid var(--pulse-line);
  color: var(--pulse-ink-2); }
.p-top-search:hover, .p-top-icon:hover, .p-top-liz:hover, .p-account > summary:hover {
  background: var(--pulse-hover); color: var(--pulse-ink); }
.p-top-icon { width: 36px; justify-content: center; padding: 0; }
.p-kbd { font-family: var(--pulse-mono); font-size: 9.5px; padding: 2px 5px;
  border-radius: 5px; color: var(--pulse-ink-3);
  background: var(--pulse-bg); border: 1px solid var(--pulse-line); }

/* Liz. An assistant is a destination, not a decoration -- so it reads as a
   named entry rather than an icon nobody can identify. */
.p-top-liz { color: var(--pulse-ink); }
.p-liz-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pulse-violet); }

.p-top-new { background: var(--pulse-action); border-color: var(--pulse-action-edge);
             color: var(--pulse-action-ink); font-weight: 600; }
.p-top-new:hover { background: var(--pulse-action-hover); color: var(--pulse-action-ink); }

/* --- account menu --------------------------------------------------------- */
.p-account { position: relative; }
.p-account > summary { list-style: none; max-width: 190px; overflow: hidden; }
.p-account > summary::-webkit-details-marker { display: none; }
.p-account-current { min-width: 0; }
.p-account-name { overflow: hidden; text-overflow: ellipsis; }
.p-account-chevron { color: var(--pulse-ink-3); }
.p-account-list { position: absolute; right: 0; top: calc(100% + 5px); z-index: 40;
  min-width: 230px; display: flex; flex-direction: column; gap: 1px; padding: 5px;
  border-radius: var(--pulse-r-panel); background: var(--pulse-panel);
  border: 1px solid var(--pulse-line); box-shadow: 0 14px 34px oklch(0.10 0.01 210 / 0.55); }
.p-account-who { display: flex; flex-direction: column; gap: 2px; padding: 9px 11px 11px;
  border-bottom: 1px solid var(--pulse-line); margin-bottom: 4px; }
.p-account-who-name { font-family: var(--pulse-sans); font-size: 13px; font-weight: 600;
  color: var(--pulse-ink); }
/* The org is named, because a user with access to several must be able to see
   which one they are acting as before they act. */
.p-account-who-org { font-family: var(--pulse-sans); font-size: 11.5px;
  color: var(--pulse-ink-3); }
.p-account-item { padding: 8px 11px; border-radius: 7px; text-decoration: none;
  font-family: var(--pulse-sans); font-size: 13px; color: var(--pulse-ink-2); }
.p-account-item:hover { background: var(--pulse-hover); color: var(--pulse-ink); }

/* --- command palette -----------------------------------------------------
   Mounted at body level so no page's stacking context or overflow can trap it. */
.p-command { position: fixed; inset: 0; z-index: 100; display: grid;
             place-items: start center; padding-top: 12vh; }
.p-command[hidden] { display: none; }
.p-command-scrim { position: absolute; inset: 0; background: oklch(0.08 0.01 215 / 0.66); }
.p-command-box { position: relative; width: min(620px, 92vw);
  border-radius: var(--pulse-r-panel); background: var(--pulse-panel);
  border: 1px solid var(--pulse-line); box-shadow: 0 22px 60px oklch(0.06 0.01 210 / 0.7);
  overflow: hidden; }
.p-command-input { width: 100%; padding: 15px 17px; border: 0; outline: 0;
  font-family: var(--pulse-sans); font-size: 15px; color: var(--pulse-ink);
  background: transparent; border-bottom: 1px solid var(--pulse-line); }
.p-command-results { max-height: 46vh; overflow-y: auto; padding: 6px; }
.p-command-group { display: flex; flex-direction: column; gap: 1px; padding: 5px 0; }
.p-command-group-label { font-family: var(--pulse-mono); font-size: 8.5px;
  letter-spacing: var(--pulse-track-kicker); color: var(--pulse-ink-3); padding: 4px 11px; }
.p-command-item { display: flex; align-items: baseline; gap: var(--pulse-s3);
  padding: 9px 11px; border-radius: 8px; text-decoration: none;
  font-family: var(--pulse-sans); font-size: 13.5px; color: var(--pulse-ink); }
.p-command-item:hover, .p-command-item[aria-selected="true"] { background: var(--pulse-hover); }
.p-command-meta { margin-left: auto; font-size: 11.5px; color: var(--pulse-ink-3); }
.p-command-foot { display: flex; gap: var(--pulse-s4); padding: 9px 13px;
  border-top: 1px solid var(--pulse-line); background: var(--pulse-well);
  font-family: var(--pulse-sans); font-size: 11px; color: var(--pulse-ink-3); }

/* --- mobile --------------------------------------------------------------- */
.p-mobile-toggle, .p-mobile-backdrop { display: none; }
@media (max-width: 900px) {
  .p-shell { grid-template-columns: minmax(0, 1fr); }
  .p-rail { position: fixed; z-index: 90; left: 0; top: 0; width: 262px;
            transform: translateX(-100%); transition: transform .18s ease; }
  .p-rail[data-open="true"] { transform: translateX(0); }
  .p-mobile-toggle { display: flex; position: fixed; left: 12px;
    top: max(12px, env(safe-area-inset-top)); z-index: 100; width: 40px; height: 40px;
    align-items: center; justify-content: center; border-radius: var(--pulse-r-inner);
    background: var(--pulse-panel); border: 1px solid var(--pulse-line);
    color: var(--pulse-ink); cursor: pointer; }
  .p-mobile-bars, .p-mobile-bars::before, .p-mobile-bars::after {
    display: block; width: 16px; height: 1.5px; background: currentColor; content: ""; }
  .p-mobile-bars::before { transform: translateY(-5px); }
  .p-mobile-bars::after { transform: translateY(3.5px); }
  .p-mobile-backdrop[data-open="true"] { display: block; position: fixed; inset: 0;
    z-index: 80; background: oklch(0.08 0.01 215 / 0.6); }
  .p-main { padding: 64px 16px 48px; }
  .p-top { flex-wrap: wrap; }
  .p-top-actions { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
}

/* ============================================================================
   SIGN IN. See SIGN_IN_SPEC.md. The only screen all four audiences share, and
   nothing on it adapts to a guess about which one is reading.
   ========================================================================= */

.p-signin-page { display: block; }
.p-signin { min-height: 100vh; display: flex; flex-direction: column;
            align-items: center; justify-content: center;
            gap: var(--pulse-s4); padding: 48px 20px; }
.p-signin-card { width: min(400px, 100%); display: flex; flex-direction: column;
                 gap: var(--pulse-s4); padding: 30px 28px;
                 border-radius: var(--pulse-r-panel); background: var(--pulse-panel);
                 border: 1px solid var(--pulse-line); }

/* The mark, same construction as the rail so the two cannot drift. */
.p-signin-brand { display: flex; align-items: baseline; justify-content: center; }
.p-signin-brand .p-brand-word { font-size: 30px; }
.p-signin-brand .p-brand-dot  { font-size: 30px; }

/* Whose instance. Vendor treatment -- mono, quiet. Absent on our own. */
.p-signin-operator { text-align: center; font-family: var(--pulse-mono); font-size: 9.5px;
                     letter-spacing: var(--pulse-track-kicker); color: var(--pulse-ink-3);
                     margin-top: -8px; }

/* Instance status. Renders only when abnormal, never blocks the button. */
.p-signin-status { display: flex; flex-direction: column; gap: 3px;
                   padding: 11px 13px; border-radius: var(--pulse-r-inner);
                   background: var(--pulse-amber-fill);
                   border: 1px solid var(--pulse-amber-edge); }
.p-signin-status[data-severity="down"] { background: var(--pulse-red-fill);
                                         border-color: var(--pulse-red-edge); }
.p-signin-status-what { font-family: var(--pulse-sans); font-size: 12.5px;
                        color: var(--pulse-ink); text-wrap: pretty; }
.p-signin-status-since { font-family: var(--pulse-mono); font-size: 9.5px;
                         letter-spacing: var(--pulse-track-kicker); color: var(--pulse-ink-3); }

/* The enumeration guard. One message for every credential failure -- the one
   place in this product where a missing thing must NOT be distinguishable. */
.p-signin-error { padding: 11px 13px; border-radius: var(--pulse-r-inner);
                  background: var(--pulse-red-fill); border: 1px solid var(--pulse-red-edge);
                  font-family: var(--pulse-sans); font-size: 12.5px;
                  color: var(--pulse-chip-red-ink); }

.p-signin-form { display: flex; flex-direction: column; gap: var(--pulse-s3); }
.p-signin-submit { width: 100%; justify-content: center; min-height: 42px; margin-top: 4px; }
.p-signin-forgot { align-self: center; background: none; border: 0; cursor: pointer;
                   font-family: var(--pulse-sans); font-size: 12.5px;
                   color: var(--pulse-ink-3); padding: 6px; }
.p-signin-forgot:hover { color: var(--pulse-ink-2); text-decoration: underline;
                         text-underline-offset: 2px; }

.p-signin-recover { display: flex; flex-direction: column; gap: 5px;
                    padding: 12px 14px; border-radius: var(--pulse-r-inner);
                    background: var(--pulse-well); border: 1px solid var(--pulse-line-soft);
                    border-left: 3px solid var(--pulse-line); }
.p-signin-recover[data-branch="agent"] { border-left-color: var(--pulse-teal); }
.p-signin-recover-say { font-family: var(--pulse-sans); font-size: 12.5px;
                        color: var(--pulse-ink); text-wrap: pretty; }