/* ============================================================
       v2 APP SHELL — desktop header, mobile top bar + bottom nav,
       popovers, per-pillar accent tokens.
       ============================================================ */
    [data-pillar="home"]     { --accent: var(--teal); --accent-2: var(--teal-deep); --accent-soft: rgba(176,112,31,0.12); }
    [data-pillar="learn"]    { --accent: var(--blue); --accent-2: var(--violet);    --accent-soft: rgba(86,104,138,0.12); }
    [data-pillar="studio"]   { --accent: var(--teal); --accent-2: var(--teal-deep); --accent-soft: rgba(176,112,31,0.12); }
    [data-pillar="jam"]      { --accent: var(--gold); --accent-2: var(--rose);      --accent-soft: rgba(217,169,40,0.16); }
    [data-pillar="practice"] { --accent: var(--teal); --accent-2: var(--teal-deep); --accent-soft: rgba(176,112,31,0.12); }
    [data-pillar="profile"]  { --accent: var(--soft); --accent-2: var(--muted);     --accent-soft: rgba(54,69,82,0.10); }

    .skip-link { position: fixed; left: 12px; top: -64px; z-index: 100; background: var(--ink); color: var(--panel-strong); padding: 10px 14px; border-radius: 8px; font-weight: 850; text-decoration: none; transition: top 0.18s ease; }
    .skip-link:focus { top: 12px; }/* Excellent, consistent keyboard focus for the v2 components (only on keyboard nav, not mouse). */
    .pillar-link:focus-visible, .bottom-link:focus-visible, .icon-btn:focus-visible, .avatar-btn:focus-visible, .pillar-card:focus-visible, .pillar-subnav button:focus-visible, .lesson-row:focus-visible, .lesson-back:focus-visible, .quiz-option:focus-visible, .lock-chip:focus-visible, .lib-filter:focus-visible, .jam-player-card:focus-visible, .jam-segment:focus-visible, .chord-edit:focus-visible, .pop-item:focus-visible, .jrny-time:focus-visible, .account-tab:focus-visible, .mini-button:focus-visible, .icon-mini:focus-visible, .lib-card:focus-visible, .recent-item:focus-visible, .arr-type:focus-visible, .arr-intensity:focus-visible {
      outline: 2px solid var(--accent, var(--teal)); outline-offset: 2px; border-radius: 8px;
    }

    .app-header { position: sticky; top: 0; z-index: 40; background: rgba(251,248,241,0.95); border-bottom: 1px solid var(--line); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
    .app-header-inner { width: min(var(--content-max), calc(100% - (var(--page-gutter) * 2))); margin: 0 auto; display: flex; align-items: center; gap: var(--space-4); min-height: 60px; }
    .brand-home { display: flex; align-items: center; gap: 11px; min-height: var(--control-min); background: transparent; cursor: pointer; min-width: 0; padding: 4px; border-radius: 8px; }
    .brand-home:hover { background: rgba(43,33,20,0.04); }
    .app-header .brand-home h1 { font-size: 1.16rem; line-height: 1; letter-spacing: 0; }
    .app-header .brand-mark { width: 36px; height: 36px; border-radius: 8px; box-shadow: var(--shadow-soft); }

    .pillar-nav { display: flex; align-items: center; gap: 2px; flex: 1 1 auto; min-width: 0; }
    .pillar-link { position: relative; min-height: var(--control-min); padding: 0 13px; border-radius: var(--radius-control); background: transparent; color: var(--soft); font-weight: 800; font-size: 0.94rem; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; transition: color var(--motion-fast) var(--ease-ui), background-color var(--motion-fast) var(--ease-ui); }
    .pillar-link:hover { color: var(--ink); background: rgba(43,33,20,0.05); }
    .pillar-link .pillar-ico { width: 17px; height: 17px; opacity: 0.85; flex: 0 0 auto; }
    .pillar-link.is-active { color: var(--ink); }
    .pillar-link.is-active::after { content: ""; position: absolute; left: 13px; right: 13px; bottom: 5px; height: 2.5px; border-radius: 2px; background: var(--accent, var(--teal)); }
    .pillar-link .nav-lock { font-size: 0.78em; opacity: 0.7; }

    .header-utils { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; margin-left: auto; }
    .icon-btn { position: relative; width: var(--control-min); height: var(--control-min); flex: 0 0 auto; display: grid; place-items: center; border-radius: var(--radius-control); background: transparent; border: 1px solid transparent; color: var(--soft); cursor: pointer; transition: background-color var(--motion-fast) var(--ease-ui), color var(--motion-fast) var(--ease-ui); }
    .icon-btn:hover { background: rgba(43,33,20,0.06); color: var(--ink); }
    .icon-btn svg { width: 16px; height: 16px; }
    .avatar-btn { position: relative; width: var(--control-min); height: var(--control-min); flex: 0 0 auto; aspect-ratio: 1 / 1; padding: 0; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(150deg, var(--teal), var(--teal-deep)); color: #fff; font-weight: 850; font-size: 0.9rem; cursor: pointer; border: 0; -webkit-text-fill-color: #fff; overflow: hidden; }
    .avatar-btn:hover { filter: brightness(1.06); }
    .avatar-btn svg { width: 20px; height: 20px; }
    .avatar-img { align-self: stretch; justify-self: stretch; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: center; display: block; }
    .avatar-row { display: flex; align-items: center; gap: 12px; margin: 4px 0 12px; }
    .avatar-preview { position: relative; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: linear-gradient(150deg, var(--teal), var(--teal-deep)); color: #fff; font-weight: 850; flex: none; }
    .avatar-actions { display: flex; gap: 8px; flex-wrap: wrap; }

    .header-pop-wrap { position: relative; display: inline-flex; }
    .header-pop { position: absolute; right: 0; top: calc(100% + 8px); width: min(284px, 86vw); background: var(--panel-strong); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 8px; z-index: 60; }
    /* iPhone landscape: backdrop-filter clips the dropdown — drop the blur there. */
    @media (orientation: landscape) and (max-height: 500px) {
      .app-header { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--panel-strong); }
      .header-pop { z-index: 80; max-height: calc(100vh - 64px); overflow-y: auto; }
    }
    .pop-head { padding: 8px 10px 6px; }
    .pop-name { font-weight: 850; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .pop-sub { color: var(--muted); font-size: 0.82rem; margin-top: 1px; }
    .pop-sep { height: 1px; background: var(--line); margin: 6px 4px; }
    /* ===== The mailbox (2026-07-15) — the bell's popup is an inbox now, not a push prompt ===== */
    .notif-pop { width: min(360px, 92vw); }
    @media (max-width: 480px) { .notif-pop { position: fixed; left: 12px; right: 12px; width: auto; top: 60px; } }
    .header-notifications .icon-btn { position: relative; }
    /* Unread badge: gold, because gold is the one metal and this is news worth having. */
    .notif-dot { position: absolute; top: 6px; right: 6px; width: 9px; height: 9px; border-radius: 999px; background: #a8503f; border: 1.5px solid var(--panel-strong); }
    .notif-dot.has-n { width: auto; min-width: 15px; height: 15px; top: 3px; right: 3px; display: grid; place-items: center; padding: 0 3px; font-size: 0.58rem; font-weight: 700; color: #fff; }
    body[data-theme="dark"] .notif-dot { background: #e08a77; }
    body[data-theme="dark"] .notif-dot.has-n { color: #14110c; }
    .notif-list { max-height: min(52vh, 420px); overflow-y: auto; display: grid; gap: 2px; }
    .notif-item { align-items: flex-start; gap: 10px; }
    .notif-item.is-unread { background: rgba(176,112,31,0.07); }
    .notif-item.is-unread .notif-copy strong { color: var(--ink); }
    .notif-ic { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px;
      background: var(--bg-soft); color: var(--teal-text); }
    .notif-ic svg { width: 14px; height: 14px; }
    .notif-copy { display: grid; gap: 2px; min-width: 0; }
    .notif-copy strong { font-size: 0.86rem; font-weight: 800; line-height: 1.3; }
    .notif-copy small { color: var(--muted); font-size: 0.78rem; line-height: 1.4; }
    .notif-copy em { color: var(--soft); font-size: 0.7rem; font-style: normal; font-weight: 700; }
    .notif-empty { color: var(--muted); font-size: 0.82rem; line-height: 1.5; padding: 14px 10px; margin: 0; }
    .pop-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 9px 10px; border-radius: 8px; background: transparent; color: var(--soft); font-weight: 650; cursor: pointer; }
    .pop-item:hover { background: rgba(43,33,20,0.06); color: var(--ink); }
    .pop-item svg { width: 16px; height: 16px; opacity: 0.82; flex: 0 0 auto; }
    .pop-item.is-danger { color: var(--rose); }

    .app-mobile-title { display: none; }
    .mobile-back { display: none; }
    .bottom-nav { display: none; }

    body[data-theme="dark"] .app-header,
    html[data-boot-theme="dark"] .app-header { background: rgba(22,18,12,0.97); }
    @media (orientation: landscape) and (max-height: 500px) { body[data-theme="dark"] .app-header, html[data-boot-theme="dark"] .app-header { background: #17130d; } }
    body[data-theme="dark"] .brand-home:hover,
    body[data-theme="dark"] .pillar-link:hover,
    body[data-theme="dark"] .icon-btn:hover,
    body[data-theme="dark"] .pop-item:hover { background: rgba(255,255,255,0.08); color: #f1f6f7; }
    body[data-theme="dark"] .header-pop { background: var(--panel-strong); }

    /* Preserve labels at intermediate widths; the brand word yields before product names do. */
    @media (min-width: 721px) and (max-width: 1040px) {
      .app-header-inner { gap: 8px; }
      /* Hide the wordmark's WRAPPER, not just the h1 inside it. Hiding only the h1 left an empty flex
         item behind, so the 11px gap still applied and the hover shade ran ~15px past the icon into
         dead space toward Home (owner spotted it). No flex item, no gap, shade hugs the mark. */
      .app-header .brand-home > span:not(.brand-mark) { display: none; }
      .pillar-link { padding: 0 8px; gap: 5px; font-size: 0.86rem; }
      .pillar-link.is-active::after { left: 8px; right: 8px; }
      .header-utils { gap: 2px; }
    }
    /* Header mic: labeled on wide screens; one-shot phone tooltip. */
    .header-capture { position: relative; }
    /* The mic stays a clean icon at EVERY width (owner 2026-07-14). On desktop it used to grow into a
       "Record" word-pill, which broke the row of icon-only controls beside it (search / settings /
       theme / avatar). The button keeps its aria-label + title, so nothing is lost to a screen reader. */
    .header-capture-label { display: none; }
    /* var(--bg): the ink bubble is cream in dark — #fff on it was 1.22:1. */
    .capture-tip { position: absolute; top: calc(100% + 8px); right: -4px; z-index: 60; background: var(--ink); color: var(--bg); font-size: 0.72rem; font-weight: 700; line-height: 1.3; padding: 7px 10px; border-radius: 8px; white-space: nowrap; box-shadow: 0 8px 22px rgba(10,16,22,0.28); pointer-events: none; animation: capture-tip-in 0.5s ease 1s both; }
    .capture-tip::before { content: ""; position: absolute; top: -4px; right: 16px; width: 8px; height: 8px; background: var(--ink); transform: rotate(45deg); }
    @keyframes capture-tip-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }@media (min-width: 900px) { .capture-tip { display: none; } }@media (max-width: 720px) {
      .app-header-inner { width: min(100% - 20px, 1160px); min-height: 52px; gap: 6px; }
      .pillar-nav { display: none; }
      /* Hide the wordmark's WRAPPER, not just the h1 inside it. Hiding only the h1 left an empty flex
         item behind, so the 11px gap still applied and the hover shade ran ~15px past the icon into
         dead space toward Home (owner spotted it). No flex item, no gap, shade hugs the mark. */
      .app-header .brand-home > span:not(.brand-mark) { display: none; }
      .app-header .brand-mark { width: 31px; height: 31px; }
      .brand-home[data-mobile-subview="true"] { display: none; }
      .mobile-back:not([hidden]) { width: var(--control-min); height: var(--control-min); flex: 0 0 var(--control-min); display: grid; place-items: center; border-radius: var(--radius-control); background: transparent; color: var(--soft); cursor: pointer; }
      .mobile-back:hover { color: var(--ink); background: rgba(43,33,20,0.06); }
      .mobile-back svg { width: 20px; height: 20px; transform: rotate(90deg); }
      .app-mobile-title { display: block; flex: 1 1 auto; text-align: center; font-weight: 850; color: var(--ink); font-size: 0.94rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      /* Theme toggle stays visible on phones. */
      .header-theme { width: 38px; height: 38px; flex: 0 0 38px; }
      .header-theme svg { width: 16px; height: 16px; }
      /* Capture mic: one tap away everywhere. */
      .header-capture { width: 38px; height: 38px; flex: 0 0 38px; }
      .header-capture svg { width: 16px; height: 16px; }
      /* Gear collapses on phones; Settings lives in the profile menu. */
      .header-settings { display: none; }
      .header-capture-label { display: none; }
      .header-utils { gap: 2px; }
      .pillar-subnav { display: flex; flex-wrap: nowrap; max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: none; }
      .pillar-subnav::-webkit-scrollbar { display: none; }
      .pillar-subnav button { flex: 0 0 auto; min-height: 44px; }
      .bottom-nav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: rgba(255,255,255,0.94); border-top: 1px solid var(--line); padding: 6px max(4px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(4px, env(safe-area-inset-left)); justify-content: space-around; align-items: stretch; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
      .bottom-link { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 4px 2px; min-height: 48px; background: transparent; color: var(--muted); font-size: 0.64rem; font-weight: 800; letter-spacing: 0.01em; cursor: pointer; border-radius: 8px; }
      .bottom-link svg { width: 20px; height: 20px; }
      .bottom-link.is-active { color: var(--accent, var(--teal)); }
      .bottom-link.is-active svg { color: var(--accent, var(--teal)); }
      .bottom-link .nav-lock { display: none; }
      .shell { padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
      body.has-compact-transport .shell { padding-bottom: calc(148px + env(safe-area-inset-bottom)); }
      body[data-theme="dark"] .bottom-nav { background: rgba(22,18,12,0.97); }
    }@media (min-width: 721px) { .bottom-nav { display: none !important; } }

    /* Pillar landing sections (Learn / Studio / Jam / Profile overviews) */
    .pillar-hero { display: grid; gap: 8px; padding: 4px 0 18px; }
    .pillar-eyebrow { display: inline-flex; align-items: center; gap: 7px; color: var(--teal-text); font-weight: 850; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; }
    .pillar-eyebrow svg { width: 14px; height: 14px; }
    .pillar-hero h2 { font-size: clamp(1.5rem, 3.2vw, 2.1rem); letter-spacing: -0.01em; }
    .pillar-hero p { color: var(--soft); max-width: 60ch; line-height: 1.5; }
    .pillar-card { display: grid; gap: var(--space-2); align-content: start; text-align: left; min-width: 0; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-surface); background: var(--panel-strong); cursor: pointer; transition: border-color var(--motion-fast) var(--ease-ui), transform var(--motion-fast) var(--ease-ui), box-shadow var(--motion-ui) var(--ease-ui); box-shadow: 0 1px 0 rgba(43,33,20,0.02); overflow-wrap: anywhere; }
    .pillar-card:hover { border-color: var(--accent, var(--teal)); transform: translateY(-2px); box-shadow: 0 16px 34px rgba(38,53,66,0.10); }
    .pillar-card[aria-disabled="true"] { cursor: default; opacity: 0.92; }
    .pillar-card[aria-disabled="true"]:hover { transform: none; border-color: var(--line); box-shadow: none; }
    .pillar-card-ico { width: 42px; height: 42px; border-radius: 8px; display: grid; place-items: center; background: var(--accent-soft, rgba(176,112,31,0.12)); color: var(--accent-2, var(--teal-deep)); }
    .pillar-card-ico svg { width: 20px; height: 20px; }
    .pillar-card h3 { font-size: 1.06rem; display: flex; align-items: center; gap: 8px; min-width: 0; }
    .pillar-card p { color: var(--muted); font-size: 0.9rem; line-height: 1.45; }
    .pillar-card .card-tag { justify-self: start; margin-top: 2px; font-size: 0.7rem; font-weight: 850; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent-2, var(--teal-deep)); background: var(--accent-soft, rgba(176,112,31,0.12)); padding: 3px 9px; border-radius: 999px; }
    .pillar-card .card-tag.is-soon { color: var(--muted); background: rgba(43,33,20,0.06); }
    .pillar-subnav { display: inline-flex; gap: 4px; padding: 4px; margin: 0 0 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-strong); flex-wrap: wrap; }
    .pillar-subnav button { min-height: var(--control-min); padding: 0 13px; border-radius: var(--radius-control); background: transparent; color: var(--soft); font-weight: 800; font-size: 0.88rem; cursor: pointer; }

    :where(button, a[href], input, select, textarea, summary, [tabindex]):focus-visible {
      outline: 2px solid var(--accent, var(--teal));
      outline-offset: 3px;
      box-shadow: var(--focus-ring);
    }
    /* Paper accents are mid-luminance — dark ink fails AA (3.4). Light deepens the fill ~24%
       under cream text (≥5:1); ink keeps bright accents + dark text (9:1+). */
    .pillar-subnav button.is-active { background: linear-gradient(rgba(20, 14, 5, 0.24), rgba(20, 14, 5, 0.24)), var(--accent, var(--teal)); color: #f7f2e6; -webkit-text-fill-color: #f7f2e6; }
    body[data-theme="dark"] .pillar-subnav button.is-active { background: var(--accent, var(--teal)); color: #141009; -webkit-text-fill-color: #141009; }
    /* Rail = ONE swipeable row on phones (owner 2026-07-14: the nav "gets lost within the atmosphere
       card" — it wrapped to 3 rows / 150px). The nowrap rule at ~line 109 is DEAD: its @media closes
       before the base declares flex-wrap:wrap at equal specificity, so the base won everywhere. It
       must be re-asserted here, AFTER the base. */
    @media (max-width: 720px) {
      .pillar-subnav { flex-wrap: nowrap; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
      .pillar-subnav::-webkit-scrollbar { display: none; }
      .pillar-subnav button { flex: 0 0 auto; }
      .studio-rail .subnav-map { margin-left: 6px; }
    }
    body[data-theme="dark"] .pillar-card,
    body[data-theme="dark"] .pillar-subnav { background: var(--panel-strong); }
    body[data-theme="dark"] .pillar-card .card-tag.is-soon { background: rgba(255,255,255,0.08); }

    /* THE OVERVIEW BUBBLE (owner-designed, 2026-07-12): the studio map sits apart from the
       work-room tabs — its own pill at the right end, ringed in the site's gold. */
    .studio-rail .subnav-map { margin-left: auto; border: 1px solid rgba(176, 112, 31, 0.55); box-shadow: 0 0 0 3px rgba(217, 169, 90, 0.14); }
    .studio-rail .subnav-map svg { color: var(--gold); }
    .studio-rail .subnav-map.is-active { border-color: var(--gold); }
    @media (max-width: 640px) { .studio-rail .subnav-map { margin-left: 6px; } }
    /* on the dark deck scene the rail sits above the panel on paper — unchanged materials */