/* No paint until the shell has adopted the page: the pre-adoption markup
   (old page navs, unframed content) must never hit the screen. shell.js adds
   .shell-ready after re-parenting, with a 1.5s failsafe. */
html:not(.shell-ready) body { visibility: hidden; }
/* While hidden, the blank must at least be the page's own color. */
html { background: #FFFFFF; }
/* Pure white everywhere (CEO, Aug 15): the drifting gradient mesh each page
   painted behind the content is retired — one override beats nine edits. */
body { background: #FFFFFF !important; }
body::before { display: none !important; animation: none !important; }

/* Cross-document view transitions: navigating between profile pages
   crossfades instead of hard-cutting. Progressive enhancement — browsers
   without support just get the (now flash-free) instant swap. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* profile/shell.css — the signed-in frame shared by every profile page.
   One source of truth for the topbar and sidebar, so a page cannot drift out
   of the shell just by being a different file. Pages keep their own content
   styles; this only owns the frame. */

.app { position: relative; z-index: 1; display: flex; flex-direction: column; min-height: 100vh; }

.topbar {
  display: flex; align-items: center; gap: 16px; padding: 14px 22px;
  position: sticky; top: 0; z-index: 30; flex-shrink: 0;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--shell-hairline, rgba(60, 60, 67, 0.10));
}
@media (prefers-reduced-transparency: reduce) {
  .topbar { background: #FFFFFF; backdrop-filter: none; -webkit-backdrop-filter: none; }
}
.topbar-logo img { height: 22px; display: block; }
/* Logo shimmer removed (CEO, Aug 15): the lockup stays still. */
.topbar-right { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.topbar-who { font-size: 13px; color: var(--text-tertiary, #6B6B70); letter-spacing: -0.005em; max-width: 24ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mobile-menu-btn { display: none; background: none; border: 0; padding: 6px; cursor: pointer; color: var(--text-primary, #363636); }
.mobile-menu-btn svg { width: 20px; height: 20px; display: block; }

/* segmented User / Developer */
.seg { display: inline-flex; padding: 2px; gap: 2px; background: rgba(120, 120, 128, 0.12); border-radius: 999px; }
.seg button {
  font: inherit; font-size: 13px; font-weight: 500; color: var(--text-secondary, #6B6B70);
  border: 0; background: transparent; padding: 5px 14px; border-radius: 999px; cursor: pointer;
  transition: color .2s, background .2s, box-shadow .2s, transform .12s cubic-bezier(0.32, 0.72, 0, 1);
}
.seg button:active { transform: scale(0.96); }
.seg button[aria-pressed="true"] { background: #FFFFFF; color: var(--text-primary, #363636); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10); }

.shell { display: flex; flex: 1; min-height: 0; }
.sidebar { width: 216px; flex-shrink: 0; padding: 18px 0; border-right: 1px solid var(--shell-hairline, rgba(60, 60, 67, 0.10)); }
.sidebar-section { margin-bottom: 14px; }
.sidebar-label { font-size: 11px; font-weight: 500; color: var(--text-tertiary, #6B6B70); text-transform: uppercase; letter-spacing: 0.05em; padding: 8px 20px 4px; }
.sidebar-item {
  display: flex; align-items: center; gap: 10px; padding: 8px 20px;
  font-size: 14px; letter-spacing: -0.006em; color: var(--text-secondary, #6B6B70);
  text-decoration: none; cursor: pointer; border-left: 2px solid transparent;
  transition: background .12s ease, color .12s ease;
}
.sidebar-item:hover { background: rgba(0, 0, 0, 0.02); color: var(--text-primary, #363636); }
.sidebar-item.active { color: var(--text-primary, #363636); font-weight: 500; background: rgba(0, 0, 0, 0.025); border-left-color: var(--text-primary, #363636); }
.sidebar-item svg { width: 16px; height: 16px; flex-shrink: 0; opacity: .8; }
.sidebar-item.soon { opacity: .45; }
.sidebar-section.devonly { display: none; }
body[data-view="developer"] .sidebar-section.devonly { display: block; }
/* Drawer-only brand row: hidden on desktop, where the topbar carries it. */
.sidebar-brand { display: none; }

/* Scrim stays mounted and FADES: display:none -> block cannot animate and
   reads as a flash. pointer-events gates interaction instead. */
.sidebar-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.3); z-index: 40; opacity: 0; pointer-events: none; transition: opacity .25s ease; }

.main { flex: 1; min-width: 0; display: flex; justify-content: center; padding: 44px 32px 96px; }
/* Adopted pages bring their own .content block; the shell owns the gutter. */
.main > .content { padding: 0 !important; width: 100%; }
.main > .col { width: 100%; max-width: 580px; }

/* ---------------------------------------------------------------------------
   Page kit — the shared content primitives every profile page builds from, so
   a new page inherits the product's look instead of inventing its own.
   --------------------------------------------------------------------------- */
.pk .page-header { margin-bottom: 6px; }
.pk .page-header h1 { font-size: 32px; font-weight: 600; letter-spacing: -0.022em; line-height: 1.12; margin-bottom: 8px; }
.pk .page-header p { font-size: 15px; color: var(--text-secondary, #6B6B70); max-width: 470px; line-height: 1.45; letter-spacing: -0.005em; }
.pk .page-summary { font-size: 13px; color: var(--text-tertiary, #6B6B70); margin: 12px 0 30px; font-variant-numeric: tabular-nums; }
.pk .sect { font-size: 13px; color: var(--text-secondary, #6B6B70); margin: 30px 16px 8px; letter-spacing: -0.005em; }
.pk .sect:first-of-type { margin-top: 0; }
.pk .sect-foot { font-size: 13px; color: var(--text-tertiary, #6B6B70); line-height: 1.45; margin: 8px 16px 0; letter-spacing: -0.005em; }
.pk .sect-foot a { color: var(--accent-blue, #007AFF); text-decoration: none; }
.pk .group {
  background: rgba(255, 255, 255, 0.66); border: 1px solid rgba(0, 0, 0, 0.07); border-radius: 16px; overflow: hidden;
  backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
@media (prefers-reduced-transparency: reduce) { .pk .group { background: #FFFFFF; backdrop-filter: none; -webkit-backdrop-filter: none; } }

/* a list row: icon, two lines of text, trailing control */
.pk .row { display: flex; align-items: center; gap: 14px; padding: 12px 16px; position: relative; width: 100%; text-align: left; border: 0; background: transparent; font: inherit; color: inherit; }
.pk .row + .row::before { content: ''; position: absolute; top: 0; left: 62px; right: 0; height: 1px; background: var(--shell-hairline, rgba(60,60,67,0.10)); }
.pk .row.noicon + .row.noicon::before { left: 16px; }
.pk button.row { cursor: pointer; transition: background .12s ease; -webkit-tap-highlight-color: transparent; }
.pk button.row:active { background: rgba(120,120,128,0.08); }
@media (hover: hover) { .pk button.row:hover { background: rgba(120,120,128,0.045); } }
.pk .row .tile { width: 32px; height: 32px; border-radius: 8px; flex: none; display: grid; place-items: center; background: #FFF; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06); overflow: hidden; }
.pk .row .tile img { width: 20px; height: 20px; object-fit: contain; display: block; }
.pk .row .tile.mono { background: #F5F5F7; color: var(--text-secondary, #6B6B70); font-size: 13px; font-weight: 500; }
.pk .row .body { min-width: 0; flex: 1; }
.pk .row .tt { display: block; font-size: 15px; letter-spacing: -0.008em; }
.pk .row .td { display: block; font-size: 12.5px; color: var(--text-tertiary, #6B6B70); margin-top: 1px; letter-spacing: -0.005em; }
.pk .row .trail { flex: none; display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--text-tertiary, #6B6B70); letter-spacing: -0.008em; }
.pk .row .trail .go { color: var(--accent-blue, #007AFF); }
.pk .row .chev { color: rgba(60,60,67,0.3); }

/* Status is quiet text, never a tinted block — on the page gradient a tint
   reads as a stray overlay. */
.pk .pill { font-size: 12px; font-weight: 500; letter-spacing: -0.004em; white-space: nowrap; }
.pk .pill.on { color: #248A3D; }
.pk .pill.off { color: var(--text-tertiary, #6B6B70); }

.pk .btn { font: inherit; font-size: 13px; font-weight: 500; letter-spacing: -0.005em; border-radius: 999px; padding: 7px 15px; cursor: pointer; border: 1px solid transparent; transition: background .15s, color .15s, transform .12s cubic-bezier(0.32,0.72,0,1); }
.pk .btn:active { transform: scale(0.97); }
.pk .btn.primary { background: var(--accent-blue, #007AFF); color: #fff; }
.pk .btn.ghost { background: rgba(120,120,128,0.10); color: var(--text-primary, #363636); }
.pk .btn.danger { background: transparent; color: #E5342B; }

/* empty state: teaches instead of showing a blank card */
.pk .empty { padding: 26px 20px; text-align: center; }
.pk .empty h3 { font-size: 16px; font-weight: 500; letter-spacing: -0.012em; margin-bottom: 5px; }
.pk .empty p { font-size: 13.5px; color: var(--text-tertiary, #6B6B70); line-height: 1.5; max-width: 38ch; margin: 0 auto 14px; letter-spacing: -0.005em; }

/* The spinner earns its paint: invisible for the first 350ms, so a fast load
   swaps straight to content and navigation never flashes a spinner. */
.pk .loading-state { display: flex; align-items: center; justify-content: center; min-height: 40vh; opacity: 0; animation: pkloadin .2s ease .35s forwards; }
@keyframes pkloadin { to { opacity: 1; } }
.pk .spinner { width: 20px; height: 20px; border: 2px solid rgba(0,0,0,0.12); border-top-color: var(--text-secondary, #6B6B70); border-radius: 50%; animation: pkspin .8s linear infinite; }
@keyframes pkspin { to { transform: rotate(360deg); } }

/* Developer context. The page's own content is hidden rather than removed, so
   switching back is instant and nothing has to reload. */
body[data-view="developer"] .main > *:not(#devPanel) { display: none !important; }
.seg[data-busy] button { opacity: .5; pointer-events: none; }
/* No linked developer account: the control is still visible (it explains the
   signup) but reads as inactive rather than as a live context. */
.seg[data-unlinked] button[data-view="developer"] { opacity: .55; }

.dev-panel .page-header { margin-bottom: 6px; }
.dev-panel .page-header h1 { font-size: 32px; font-weight: 600; letter-spacing: -0.022em; line-height: 1.12; margin-bottom: 8px; }
.dev-panel .page-header p { font-size: 15px; color: var(--text-secondary, #6B6B70); max-width: 470px; line-height: 1.45; letter-spacing: -0.005em; }
.dev-panel .sect { font-size: 13px; color: var(--text-secondary, #6B6B70); margin: 30px 16px 8px; letter-spacing: -0.005em; }
.dev-panel .sect-foot { font-size: 13px; color: var(--text-tertiary, #6B6B70); line-height: 1.45; margin: 8px 16px 0; letter-spacing: -0.005em; }
.dev-panel .sect-foot code { font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px; background: rgba(120,120,128,0.12); padding: 1px 5px; border-radius: 4px; }
.dev-panel .group {
  background: rgba(255, 255, 255, 0.66); border: 1px solid rgba(0, 0, 0, 0.07); border-radius: 16px; overflow: hidden;
  backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
@media (prefers-reduced-transparency: reduce) { .dev-panel .group { background: #FFFFFF; backdrop-filter: none; -webkit-backdrop-filter: none; } }
.devrow { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; position: relative; }
.devrow + .devrow::before { content: ''; position: absolute; top: 0; left: 16px; right: 0; height: 1px; background: var(--shell-hairline, rgba(60,60,67,0.10)); }
.devrow-l { min-width: 0; }
.devrow .tt { font-size: 15px; letter-spacing: -0.008em; }
.devrow .td { font-size: 12.5px; color: var(--text-tertiary, #6B6B70); margin-top: 1px; letter-spacing: -0.005em; max-width: 40ch; }
.devcode {
  font-family: var(--font-mono, ui-monospace, monospace); font-size: 12.5px; color: var(--text-primary, #363636);
  background: rgba(120, 120, 128, 0.10); padding: 6px 10px; border-radius: 8px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 46%; user-select: all; flex: none;
}
.devlink { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; font-size: 15px; letter-spacing: -0.008em;
           color: var(--text-primary, #363636); text-decoration: none; position: relative; transition: background .12s ease; }
.devlink + .devlink::before { content: ''; position: absolute; top: 0; left: 16px; right: 0; height: 1px; background: var(--shell-hairline, rgba(60,60,67,0.10)); }
.devlink:hover { background: rgba(120, 120, 128, 0.045); }
.devlink .go { color: var(--accent-blue, #007AFF); font-size: 14px; }

@media (max-width: 900px) {
  .mobile-menu-btn { display: block; }
  /* Drawer brand: the Configure lockup above the account chip (phone only —
     the desktop sidebar sits beside the topbar, which already carries it). */
  .sidebar-brand { display: block; padding: 4px 20px 14px; }
  .sidebar-brand img { height: 22px; display: block; }

  /* The slide animates TRANSFORM only — compositor-driven, no per-frame
     layout, no jank on real phones. (Animating `left` was the glitch.) */
  .sidebar {
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 41; width: 272px;
    background: #FFFFFF; overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding-top: calc(64px + env(safe-area-inset-top, 0px));
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    padding-left: env(safe-area-inset-left, 0px);
    transform: translateX(calc(-100% - 24px));
    transition: transform .3s cubic-bezier(0.32, 0.72, 0, 1);
    will-change: transform;
    box-shadow: 0 0 40px rgba(0,0,0,0.12);
  }
  .sidebar.open { transform: translateX(0); }
  .sidebar-overlay.open { opacity: 1; pointer-events: auto; }
  .main { padding: 28px 16px calc(72px + env(safe-area-inset-bottom, 0px)); }
  /* Drawer rows at a real touch size: 44px minimum, per the HIG. */
  .sidebar-item { padding: 11px 20px; min-height: 44px; }
  /* The page must not scroll behind the open drawer. */
  html.drawer-open, html.drawer-open body { overflow: hidden; }
}
@media (max-width: 560px) { .topbar-who { display: none; } }
@media (prefers-reduced-motion: reduce) { .sidebar { transition: none; } }

/* ---------------------------------------------------------------------------
   Touch ergonomics. Coarse pointers get 44px hit areas (Apple HIG / WCAG
   2.5.5) without changing the drawn size of anything: hit areas grow through
   padding-with-negative-margin or invisible ::after extenders, so the layout
   the desktop gates measure is untouched (they run with a fine pointer).
   --------------------------------------------------------------------------- */
@media (pointer: coarse) {
  .mobile-menu-btn { padding: 12px; margin: -6px; }              /* 20px glyph in a 44px target */
  .topbar-logo { padding: 11px 8px; margin: -11px -8px; }
  .seg button { position: relative; }
  .seg button::after { content: ''; position: absolute; inset: -8px 0; }   /* 28px -> 44px tall */
  .acct-chip { min-height: 46px; }
  .pk .btn { min-height: 44px; }
  .pk .row { min-height: 56px; }
}
/* Notch and home indicator: pages declare viewport-fit=cover, the frame pays
   the insets back so the topbar never sits under the clock. */
.topbar { padding-top: calc(14px + env(safe-area-inset-top, 0px)); }

/* Long unbreakable values (emails, URLs) in a squeezed row must wrap instead
   of running under the trailing controls. */
.pk .row .td { overflow-wrap: anywhere; }
@media (max-width: 560px) {
  /* When a row carries both a status pill and a button, the pill loses its
     seat: the section header already says "Connected", the button is the
     control that must stay tappable. (Same move as agents' .apps-mini.) */
  .pk .row .trail:has(.btn) .pill { display: none; }
}

/* Developer sections: stat row, command rows, status pills. */
.devstats { display: flex; gap: 26px; flex-wrap: wrap; margin: 14px 0 26px; }
.devstat b { display: block; font-size: 24px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.devstat span { font-size: 12.5px; color: var(--text-tertiary, #6B6B70); }
.devrow .tt.cmd { font-family: var(--font-mono, ui-monospace, monospace); font-size: 13px; }
.dev-panel .pill { font-size: 12px; font-weight: 500; padding: 3px 9px; border-radius: 999px; flex: none; font-variant-numeric: tabular-nums; }
.dev-panel .pill.on { color: #248A3D; background: rgba(52,199,89,0.12); }
.dev-panel .pill.bad { color: #C5342C; background: rgba(229,52,43,0.10); }
.dev-panel .empty { padding: 26px 20px; text-align: center; }
.dev-panel .empty h3 { font-size: 16px; font-weight: 500; letter-spacing: -0.012em; margin-bottom: 5px; }
.dev-panel .empty p { font-size: 13.5px; color: var(--text-tertiary, #6B6B70); line-height: 1.5; max-width: 40ch; margin: 0 auto; }

/* Identity chip: the profile, top-left, where Settings lives. */
.acct-chip { display: flex; align-items: center; gap: 10px; margin: 0 12px 12px; padding: 8px 10px; border-radius: 10px;
             text-decoration: none; color: inherit; transition: background .12s ease; }
.acct-chip:hover { background: rgba(0,0,0,0.03); }
.acct-avatar { width: 30px; height: 30px; border-radius: 50%; flex: none; display: grid; place-items: center;
               background: #F5F5F7; color: var(--text-secondary, #6B6B70); font-size: 12px; font-weight: 600; letter-spacing: 0.02em;
               overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06); }
.acct-avatar img { width: 16px; height: 16px; object-fit: contain; display: block; border-radius: 3px; }
.acct-meta { min-width: 0; }
.acct-name { display: block; font-size: 13px; font-weight: 500; color: var(--text-primary, #363636); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acct-email { display: block; font-size: 11.5px; color: var(--text-tertiary, #6B6B70); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------------------------------------------------------------------------
   One type system for every page in the shell. The legacy pages each carried
   their own font stack and 400-weight centered headings, so moving between
   pages changed the typeface — the most jarring thing a suite of pages can do.
   --------------------------------------------------------------------------- */
.main, .main * {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', system-ui, sans-serif;
}
.main code, .main pre, .main textarea, .main .devcode, .main kbd {
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
}
.main h1 { font-size: 28px !important; font-weight: 600 !important; letter-spacing: -0.022em !important; line-height: 1.15 !important; }
.main h2 { font-weight: 600 !important; letter-spacing: -0.015em !important; }
.main h3 { font-weight: 500; letter-spacing: -0.012em; }

/* ---------------------------------------------------------------------------
   Action pills are BLUE. The decided accent: a tinted iOS-style pill for every
   secondary action (Copy, Update, Set up), everywhere, instead of gray on one
   page and blue on another. Destructive stays red; Keep/cancel stays quiet.
   --------------------------------------------------------------------------- */
.pk .btn.ghost {
  background: transparent;
  color: var(--accent-blue, #007AFF);
  padding: 7px 6px;
}
.pk .btn.ghost:hover { color: var(--accent-blue-deep, #0060DF); background: transparent; }