/* Hylē v4 · app shell: sidebar, topbar, command palette, account menu, phone bottom nav. */
.app-body { background: var(--paper); }
.app { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 100dvh; }

/* ---------- Sidebar ---------- */
/* Audit-fix A: a distinct warm surface (not "white paper, black text"): sunken tone with the field's blue/orange washed
   into its top, an ASCII-dither texture fading down from the brand row, a lit inner edge + soft cast shadow on the right,
   grouped sections divided by hairlines, a raised active item with the field indicator, and a collapse to a 72px rail. */
.app-side { position: sticky; top: 0; height: 100dvh; display: flex; flex-direction: column; gap: 4px; padding: 14px 12px 12px; overflow-y: auto; z-index: var(--z-sticky); isolation: isolate;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(18,117,216,.12), rgba(18,117,216,0) 60%) no-repeat 0 0 / 100% 260px,
    radial-gradient(100% 100% at 100% 0%, rgba(225,145,54,.14), rgba(225,145,54,0) 62%) no-repeat 0 0 / 100% 260px,
    radial-gradient(120% 60% at 0% 100%, rgba(18,117,216,.06), rgba(18,117,216,0) 70%) no-repeat 0 100% / 100% 320px,
    linear-gradient(180deg, #f3f1ea, #efece4);
  border-right: 1px solid var(--hairline-strong);
  box-shadow: inset -1px 0 0 rgba(255,255,255,.75), 10px 0 30px -26px rgba(20,20,19,.35); }
.app-side::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: 240px; pointer-events: none; opacity: .55;
  background-image: radial-gradient(circle at 50% 50%, rgba(28,88,160,.36) 0 .8px, transparent 1.2px), radial-gradient(circle at 50% 50%, rgba(179,103,24,.32) 0 .8px, transparent 1.2px);
  background-size: 8px 8px, 8px 8px; background-position: 0 0, 4px 4px;
  -webkit-mask-image: radial-gradient(90% 100% at 30% 0%, #000, rgba(0,0,0,0) 85%); mask-image: radial-gradient(90% 100% at 30% 0%, #000, rgba(0,0,0,0) 85%); }
.side-brand { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 0 4px 0 6px; }
.side-brand .wordmark { font-size: var(--fs-wordmark); }
.side-collapse { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--r-md); color: var(--ink-3); transition: background var(--d-2), color var(--d-2); }
.side-collapse:hover { background: var(--hover-tint-strong); color: var(--ink); }
.side-collapse:active { background: var(--press-tint); }
.side-collapse:focus-visible { outline-offset: -2px; }
.side-collapse svg { width: 20px; height: 20px; }
.side-collapse .pc-arrow { transition: transform var(--d-3) var(--ease-out); transform-origin: 15px 12px; }
.app-side.is-settings .side-collapse { display: none; }
.ws-btn { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 6px 8px; margin-top: 6px; border-radius: var(--r-md); text-align: left; transition: background var(--d-2); }
.ws-btn:hover { background: var(--hover-tint-strong); }
.ws-btn:active { background: var(--press-tint); }
.ws-mark { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-small); color: #fff; background: var(--brand-mark); flex: none; }
.ws-name { font-size: var(--fs-ui); font-weight: 600; color: var(--ink); line-height: 1.2; }
.ws-plan { display: block; font-size: var(--fs-small); color: var(--ink-3); font-weight: 400; }
.ws-btn svg { width: 16px; height: 16px; color: var(--ink-3); margin-left: auto; }
.side-actions { display: grid; grid-template-columns: 1fr auto; gap: 6px; margin: 10px 0 12px; }
.side-actions .btn { border-radius: var(--r-md); justify-content: flex-start; padding: 0 12px; }
.side-actions .btn .kbd { margin-left: auto; background: rgba(255,255,255,.14); color: rgba(255,255,255,.75); border-color: rgba(255,255,255,.18); box-shadow: none; }
.side-search { width: 40px; height: 40px; border-radius: var(--r-md); display: grid; place-items: center; color: var(--ink-2); background: var(--raised); box-shadow: var(--e-1); }
.side-search:hover { color: var(--ink); box-shadow: var(--e-2); }
.side-search:active { transform: translateY(var(--press-shift)); box-shadow: var(--e-1); }
.side-search svg { width: 18px; height: 18px; }
.side-nav { display: flex; flex-direction: column; gap: 2px; }
.side-link { position: relative; display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 10px; border-radius: var(--r-md); font-size: var(--fs-ui); font-weight: 500; color: var(--ink-2); transition: background var(--d-2), color var(--d-2), box-shadow var(--d-2); }
.side-link svg { width: 18px; height: 18px; color: var(--ink-3); transition: color var(--d-2); }
.side-link:hover { background: var(--hover-tint-strong); color: var(--ink); }
.side-link:hover svg { color: var(--ink); }
.side-link:active { background: var(--press-tint); }
.side-link:focus-visible { outline-offset: -2px; }
.side-link[aria-current="page"] { background: var(--selected-bg); color: var(--ink); font-weight: 600; box-shadow: var(--selected-edge); }
.side-link[aria-current="page"] svg { color: var(--accent); }
.side-link[aria-current="page"]::before { content: ""; position: absolute; left: -12px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--selected-bar); }
.side-link .count { margin-left: auto; font-size: var(--fs-small); font-variant-numeric: tabular-nums; color: var(--ink-3); }
.side-sec { margin-top: 12px; padding: 14px 10px 6px; border-top: 1px solid var(--hairline); font-size: var(--fs-small); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); display: flex; align-items: center; justify-content: space-between; }
.side-recent .side-link { font-weight: 400; gap: 8px; padding: 0 8px; }
.side-recent .side-link[aria-current="page"] { font-weight: 600; }
.side-recent .side-link span.t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-recent .side-link span.t, .me-btn .who span { padding-inline-end: .14em; }
.side-recent .dot { width: 7px; height: 7px; margin: 0 3px 0 5px; }
.side-recent .live { margin-left: auto; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: pulse 1.6s infinite; flex: none; }
.side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 2px; padding-top: 12px; border-top: 1px solid var(--hairline); }
.budget { margin: 8px 2px 10px; padding: 12px; border-radius: var(--r-md); background: rgba(255,255,255,.72); box-shadow: var(--e-1); }
.budget-row { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--fs-small); color: var(--ink-2); margin-bottom: 8px; }
.budget-row b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.budget .progress > span { background: linear-gradient(90deg, var(--brand-blue), var(--brand-orange)); }
.me-btn { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 6px 8px; border-radius: var(--r-md); text-align: left; transition: background var(--d-2); }
.me-btn:hover { background: var(--hover-tint-strong); }
.me-btn:active { background: var(--press-tint); }
.me-btn .who { min-width: 0; line-height: 1.25; }
.me-btn .who b { display: block; font-size: var(--fs-ui); font-weight: 600; color: var(--ink); }
.me-btn .who span { display: block; font-size: var(--fs-small); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-btn svg { width: 16px; height: 16px; color: var(--ink-3); margin-left: auto; flex: none; }
.app-side .menu { left: 12px; right: 12px; min-width: 0; }
#account-menu { bottom: 64px; transform-origin: bottom left; }
#ws-menu { top: 62px; transform-origin: top left; }

/* ---------- Collapsed rail (html.side-collapsed, desktop ≥1025px) ---------- */
html.side-anim .app { transition: grid-template-columns var(--d-4) var(--ease-out); }
html.side-collapsed { --sidebar-w: 72px; }
html.side-collapsed .app:has(> .app-side.is-settings) { grid-template-columns: var(--sidebar-w-open) minmax(0, 1fr); }
html.side-collapsed .app-side:not(.is-settings) { overflow: visible; padding-inline: 12px; }
html.side-collapsed .app-side:not(.is-settings) .side-label,
html.side-collapsed .app-side:not(.is-settings) .ws-name,
html.side-collapsed .app-side:not(.is-settings) .me-btn .who,
html.side-collapsed .app-side:not(.is-settings) .side-actions .kbd { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
html.side-collapsed .app-side:not(.is-settings) .side-brand { flex-direction: column; justify-content: flex-start; gap: 6px; padding: 0; }
html.side-collapsed .app-side:not(.is-settings) .side-brand .wordmark { gap: 0; }
html.side-collapsed .app-side:not(.is-settings) .side-collapse .pc-arrow { transform: scaleX(-1); }
html.side-collapsed .app-side:not(.is-settings) .ws-btn { justify-content: center; padding: 6px 0; }
html.side-collapsed .app-side:not(.is-settings) .ws-btn > svg, html.side-collapsed .app-side:not(.is-settings) .me-btn > svg { display: none; }
html.side-collapsed .app-side:not(.is-settings) .side-actions { grid-template-columns: 1fr; justify-items: center; gap: 8px; }
html.side-collapsed .app-side:not(.is-settings) .side-actions .btn { width: 44px; padding: 0; justify-content: center; }
html.side-collapsed .app-side:not(.is-settings) .side-link { justify-content: center; padding: 0; min-height: 44px; }
html.side-collapsed .app-side:not(.is-settings) .side-link svg { width: 20px; height: 20px; }
html.side-collapsed .app-side:not(.is-settings) .side-link[aria-current="page"]::before { left: -12px; }
html.side-collapsed .app-side:not(.is-settings) .side-sec { font-size: 0; padding: 0; margin: 10px 8px 6px; height: 1px; letter-spacing: 0; }
html.side-collapsed .app-side:not(.is-settings) .side-recent .dot { width: 9px; height: 9px; margin: 0; }
html.side-collapsed .app-side:not(.is-settings) .side-recent .live { position: absolute; top: 9px; right: 12px; margin: 0; }
html.side-collapsed .app-side:not(.is-settings) .budget { margin: 6px 4px 8px; padding: 8px 6px; }
html.side-collapsed .app-side:not(.is-settings) .budget-row { display: none; }
html.side-collapsed .app-side:not(.is-settings) .me-btn { justify-content: center; padding: 6px 0; }
html.side-collapsed .app-side:not(.is-settings) .menu { left: 60px; right: auto; width: 248px; }
html.side-collapsed .app-side:not(.is-settings) #ws-menu { top: 96px; }
html.side-collapsed .app-side:not(.is-settings)::before { height: 200px; }
/* Rail tooltip (one element, positioned by shell-app.js; shows on hover and keyboard focus while collapsed) */
.side-tip { position: fixed; z-index: var(--z-overlay); max-width: 260px; padding: 6px 10px; border-radius: var(--r-sm); background: var(--ink); color: #fff; font-size: var(--fs-small); font-weight: 500; line-height: 1.35; white-space: pre; pointer-events: none; box-shadow: 0 8px 20px -10px rgba(20,20,19,.5); }
.side-tip[hidden] { display: none; }

/* ---------- Main column + topbar ---------- */
.app-col { min-width: 0; display: flex; flex-direction: column; }
/* Topbar: frosted paper at 97% (was 94%: scrolled text ghosted through it on 9 pages). */
.app-top { position: sticky; top: 0; z-index: var(--z-sticky); height: var(--topbar-h); display: flex; align-items: center; gap: 12px; padding: 0 24px; background: rgba(250,249,245,.97); -webkit-backdrop-filter: saturate(1.5) blur(18px); backdrop-filter: saturate(1.5) blur(18px); border-bottom: 1px solid transparent; transition: border-color var(--d-3), box-shadow var(--d-3); }
.app-top.is-scrolled { border-bottom-color: var(--hairline); box-shadow: 0 10px 24px -22px rgba(20,20,19,.4); }
/* At rest nothing scrolls under the bar, so it lets the paper field's aurora run to the top edge. */
.app-body:not(.no-paper-field) .app-top:not(.is-scrolled) { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.crumbs { display: flex; align-items: center; gap: 8px; font-size: var(--fs-ui); color: var(--ink-3); min-width: 0; }
.crumbs b { color: var(--ink); font-weight: 500; }
.crumbs svg { width: 14px; height: 14px; }
.top-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.job-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 12px 0 10px; border-radius: var(--r-pill); font-size: var(--fs-small); font-weight: 500; color: var(--accent-ink); background: var(--info-tint); transition: background var(--d-2); }
.job-pill:hover { background: var(--accent-tint-2); }
.job-pill.is-idle { color: var(--ink-3); background: var(--sunken); }
.job-pill.is-idle .ring { display: none; }
.job-pill .ring { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--accent-tint-2); border-top-color: var(--accent); animation: spin 1s linear infinite; }
.bell { position: relative; }
.bell::after { content: ""; position: absolute; top: 8px; right: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--brand-orange); box-shadow: 0 0 0 2px var(--paper); }
.top-brand, .top-me { display: none; }
.app-main { width: 100%; max-width: 1180px; margin: 0 auto; padding: 24px 40px 80px; }

/* ---------- Phone bottom nav ---------- */
.bottom-nav { display: none; }

@media (max-width: 1024px) {
  .app { grid-template-columns: 1fr; }
  .app-side { display: none; }
  .top-brand { display: inline-flex; }
  .top-me { display: inline-grid; }
  .crumbs { display: none; }
  .app-top { padding: 0 12px 0 var(--gutter); }
  /* Safe area: main always ends above the nav + docks (see HyleUI.safeArea). */
  .app-main { padding: 16px var(--gutter) calc(var(--safe-bottom, var(--bottomnav-h)) + 32px); }
  .bottom-nav { position: fixed; z-index: var(--z-nav); left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; height: calc(var(--bottomnav-h) + env(safe-area-inset-bottom)); padding: 0 8px env(safe-area-inset-bottom); background: var(--raised); border-top: 1px solid var(--hairline); }
  .bottom-nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 48px; border-radius: var(--r-md); font-size: var(--fs-mono); font-weight: 500; color: var(--ink-3); -webkit-tap-highlight-color: transparent; }
  .bottom-nav a svg { width: 20px; height: 20px; }
  .bottom-nav a[aria-current="page"] { color: var(--ink); }
  .bottom-nav a.new { color: #fff; }
  /* Centre action: a 40px ink tile that stays inside the bar. */
  .bottom-nav a.new span.plus { width: 40px; height: 40px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--ink); }
  .bottom-nav a.new span.plus svg { width: 20px; height: 20px; }
  .bottom-nav a.new span.lbl { display: none; }
}
@media (max-width: 640px) {
  .job-pill { min-height: 44px; padding: 0 12px; }
  .job-pill .lbl-long { display: none; }
}

/* The collapsed rail keeps the complete official wordmark inside its 48px track. */
html.side-collapsed .app-side:not(.is-settings) .side-brand .hy-wordmark { height: auto; width: 44px; }

/* Fixed demo budget; avoid an inline style in injected shell markup. */
.budget-progress { --p: 40%; }
/* Shared phone controls retain the 44px touch target across every app host. */
@media (max-width: 640px) { .app-top .icon-btn { width: 44px; min-width: 44px; min-height: 44px; flex: none; } }