/* App-specific rules ONLY, unlayered. Colors/spacing via --hig-* vars —
       no raw hex (accent/status colors come from the theme + system palette);
       type sizes via the .hig-* utility classes in the views, not px here. */

    /* --- 2-pane stage layout (app-specific: WebGPU canvas left, app right) --- */
    .layout { display: grid; grid-template-columns: 1fr 1fr; gap: 0; min-height: 100vh; }
    #stage-wrap { position: relative; background: var(--hig-color-system-background); }
    /* Capability fallback: og-image.jpg contains Seed-san's official embedded
       thumbnail and required credit. Crop its portrait half so a browser without
       WebGPU still opens on a real, licensed character instead of a dead canvas. */
    #stage-wrap.stage-fallback { background-image: linear-gradient(to bottom, transparent 62%, var(--hig-color-system-background)), url('/og-image.jpg');
                                background-size: auto 80%; background-position: left center; background-repeat: no-repeat; }
    #stage-wrap.stage-fallback #stage-canvas { opacity: 0; }
    #stage-wrap.stage-fallback::before { content: "PORTRAIT · 3D NEEDS WEBGPU"; }
    #stage-wrap::before { content: "LIVE · 3D AVATAR"; position: absolute; z-index: 2; top: 22px; left: 22px;
                         padding: 7px 11px; border: 1px solid color-mix(in srgb, var(--hig-color-tint) 55%, transparent);
                         border-radius: var(--hig-radius-capsule); background: color-mix(in srgb, var(--hig-color-system-background) 74%, transparent);
                         color: var(--hig-color-tint); font-size: 11px; font-weight: 800; letter-spacing: .12em; backdrop-filter: blur(12px); }
    #stage-wrap::after { content: ""; position: absolute; inset: auto 0 0; height: 30%; pointer-events: none;
                        background: linear-gradient(transparent, color-mix(in srgb, var(--hig-color-system-background) 70%, transparent)); }
    html[data-route="chat"] #stage-wrap::after { height: 48%; opacity: .72;
      background: linear-gradient(transparent 0 20%, color-mix(in srgb, var(--hig-color-tint) 10%, transparent) 21% 22%, transparent 23%),
                  repeating-linear-gradient(90deg, transparent 0 12%, color-mix(in srgb, var(--hig-color-tint) 12%, transparent) 12.2% 12.5%),
                  linear-gradient(transparent, color-mix(in srgb, var(--hig-palette-blue) 18%, var(--hig-color-system-background))); }
    #stage-canvas { width: 100%; height: 100%; display: block; }
    #stage-status { position: absolute; z-index: 2; left: 22px; bottom: 18px; opacity: 0.8; font-size: 12px; }
    /* min-width:0 — grid items default to min-width:auto and report content
       min-content width upward, so #app otherwise grows past a 320px viewport
       instead of wrapping (the real round-51 overflow root cause; the shell's
       own <main> guard covers everything INSIDE, this covers the .layout item). */
    #app { max-width: 720px; min-width: 0; overflow-wrap: break-word; }
    .app-content { padding: 0; }
    @media (max-width: 800px) {
      /* A character product opens on its character, matching the visual-first
         discovery pattern used by the reference experience. */
      .layout { grid-template-columns: 1fr; }
      #stage-wrap { height: 52svh; min-height: 360px; }
      #stage-wrap.stage-fallback { height: 38svh; min-height: 300px; background-position: left center; background-size: 194% auto; }
      html[data-route="chat"] #stage-wrap { position: sticky; top: 0; height: 38svh; min-height: 260px; z-index: 0; }
      /* Compact app-style navigation: keep the character and primary action in
         view instead of spending a full wrapped toolbar between stage and hero. */
      .kotoba-shell__app-nav { position: fixed; inset: auto 0 0; z-index: 20; padding: 8px 10px max(8px, env(safe-area-inset-bottom));
                               background: color-mix(in srgb, var(--hig-color-system-background) 88%, transparent); backdrop-filter: blur(18px); }
      .app-toolbar { width: 100%; box-sizing: border-box; padding: 5px; border-radius: var(--hig-radius-capsule); }
      .app-toolbar .brand { display: none; }
      .nav-tabs { width: 100%; flex-wrap: nowrap; justify-content: space-between; }
      .nav-tabs .nav-tab { flex: 1 1 0; min-width: 0; padding-inline: 8px; white-space: nowrap; }
      .kotoba-shell__app-main { padding-bottom: calc(74px + env(safe-area-inset-bottom)); }
      .discovery-hero { padding: 38px 22px 30px; }
      .discovery-hero .hero-lede { margin-block: 20px; }
      .discovery-hero .hero-roster { display: none; }
    }
    /* Per-tab stage repositioning (ADR-2607101000): Create/My Page never need
       the stage; babiniku.ui.views/set-route-attr! stamps data-route on <html>. */
    html[data-route="create"] .layout,
    html[data-route="mypage"] .layout,
    html[data-route="home"] .layout { grid-template-columns: 1fr; }
    html[data-route="create"] #stage-wrap,
    html[data-route="mypage"] #stage-wrap,
    html[data-route="home"] #stage-wrap { display: none; }
    html[data-route="home"] #app { max-width: 1180px; width: 100%; margin-inline: auto; }

    /* --- nav (layout/active state only — sticky + material are the shell's) --- */
    .app-toolbar { justify-content: space-between; flex-wrap: wrap; gap: 12px; }
    .nav-tabs { display: flex; gap: 4px; flex-wrap: wrap; min-width: 0; }
    .nav-tab { opacity: 0.75; }
    .nav-tab:hover { opacity: 1; }
    /* Active tab: accent-filled pill. Text = the (dark) system-background token
       over the accent tint — #000-on-#FF3CAC computes 6.5:1, ≥ the 4.5:1 AA
       floor the old white-on-gradient version failed (round-48 lesson: token
       colors, not text on hand-tuned gradients). */
    .nav-tab--active { background: var(--hig-color-tint); color: var(--hig-color-system-background); opacity: 1; font-weight: 600; }
    .nav-badge { display: inline-block; min-width: 16px; padding: 0 5px; margin-inline-start: 2px; border-radius: var(--hig-radius-capsule);
                 background: var(--hig-palette-orange); color: var(--hig-color-system-background); font-weight: 700; text-align: center; }
    .locale-toggle { min-width: 44px; font-weight: 800; color: var(--hig-color-tint); }
    .brand { display: inline-flex; align-items: center; min-width: 132px; }
    .brand-logo { display: block; width: 132px; height: auto; color: var(--hig-color-label); }
    .locale-picker { display: inline-flex; align-items: center; }
    .locale-picker select { color: var(--hig-color-label); background: var(--hig-color-secondary-system-background);
                            border: 1px solid var(--hig-color-separator); border-radius: var(--hig-radius-capsule);
                            padding-block: 9px; padding-inline: 12px 28px; font: inherit; }
    html[dir="rtl"] body { direction: rtl; }
    html:lang(ar) { --hig-font-text: "Noto Sans Arabic", "Noto Naskh Arabic", Tahoma, Arial, sans-serif;
                    --hig-font-display: "Noto Sans Arabic", "Noto Naskh Arabic", Tahoma, Arial, sans-serif; }
    html:lang(hi) { --hig-font-text: "Noto Sans Devanagari", Mangal, system-ui, sans-serif;
                    --hig-font-display: "Noto Sans Devanagari", Mangal, system-ui, sans-serif; }
    html:lang(zh) { --hig-font-text: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
                    --hig-font-display: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; }
    html[dir="rtl"] #stage-wrap::before, html[dir="rtl"] #stage-status { left: auto; right: 22px; }
    html[dir="rtl"] .grid-card, html[dir="rtl"] .chat-card { text-align: right; }
    /* Brand wordmark flourish — accent-derived gradient as text FILL on the dark
       page background (that direction passed WCAG round 48; text ON a gradient
       background is what failed, and the active tab above no longer does that). */
    .brand { font-weight: 800; letter-spacing: 0.02em; white-space: nowrap;
             background: linear-gradient(120deg, var(--hig-color-tint), var(--hig-palette-purple) 55%, var(--hig-palette-blue));
             background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }

    /* --- visual-first discovery home --- */
    .discovery-header { display: flex; align-items: end; justify-content: space-between; gap: 24px;
                        padding: clamp(34px, 6vw, 68px) clamp(22px, 6vw, 64px) 30px; }
    .discovery-header h1 { margin: 0; font-size: clamp(36px, 6vw, 64px); line-height: 1.05; letter-spacing: -.05em; }
    .discovery-hero { padding: clamp(48px, 8vw, 92px) clamp(22px, 6vw, 64px) 46px; overflow: hidden;
                      background: radial-gradient(circle at 82% 12%, color-mix(in srgb, var(--hig-color-tint) 22%, transparent), transparent 34%),
                                  radial-gradient(circle at 15% 70%, color-mix(in srgb, var(--hig-palette-purple) 18%, transparent), transparent 32%); }
    .eyebrow { margin: 0 0 18px; color: var(--hig-color-tint); font-size: 11px; font-weight: 800; letter-spacing: .18em; }
    .discovery-hero h1 { max-width: 580px; margin: 0; font-size: clamp(44px, 7vw, 72px); line-height: .98; letter-spacing: -.055em; }
    .accent-copy { background: linear-gradient(110deg, var(--hig-color-tint), var(--hig-palette-purple), var(--hig-palette-blue));
                   background-clip: text; -webkit-background-clip: text; color: transparent; }
    .hero-lede { max-width: 520px; margin: 24px 0; color: var(--hig-color-secondary-label); font-size: clamp(17px, 2vw, 21px); line-height: 1.55; }
    .hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
    .primary-cta { background: var(--hig-color-tint); color: var(--hig-color-system-background); font-weight: 750; }
    .secondary-cta { border-color: color-mix(in srgb, var(--hig-color-label) 40%, transparent); color: var(--hig-color-label); }
    .hero-roster { margin: 24px 0 0; color: var(--hig-color-tertiary-label); }
    .home-trust-row { display: flex; flex-wrap: wrap; gap: 10px 20px; padding: 18px clamp(22px, 6vw, 64px); color: var(--hig-color-secondary-label);
                      border-block: var(--hig-hairline) solid var(--hig-color-separator); font-size: 12px; }
    .character-section { padding-inline: clamp(22px, 6vw, 64px); }
    .section-kicker { margin: -10px 0 24px; color: var(--hig-color-secondary-label); }

    /* --- status colors: allowed = green, held = orange (semantics preserved) --- */
    .allowed, .tip-ok, .create-success { color: var(--hig-palette-green); }
    .held, .chat-error, .tip-held { color: var(--hig-palette-orange); }
    .tip-ok, .create-success { font-weight: 600; }
    .muted { color: var(--hig-color-secondary-label); }
    .persistence-warning { background: color-mix(in srgb, var(--hig-palette-orange) 18%, transparent);
                           color: var(--hig-palette-orange); border: 1px solid var(--hig-palette-orange);
                           padding: var(--hig-spacing-2) var(--hig-spacing-3); margin: 0; text-align: center; }

    /* --- character grid cards / character card internals --- */
    .grid-card { display: flex; flex-direction: column; gap: 0; align-items: stretch; text-align: left; cursor: pointer; width: 100%; box-sizing: border-box;
                 min-height: 360px; padding: 0; overflow: hidden; color: var(--hig-color-label);
                 transition: transform .2s ease, border-color .2s ease, background .2s ease; }
    .grid-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--hig-color-tint) 55%, transparent);
                       background: color-mix(in srgb, var(--hig-color-tint) 8%, var(--hig-color-secondary-system-background)); }
    .grid-card--on-stage { border-color: var(--hig-palette-green); }
    .character-card-media { width: 100%; aspect-ratio: 4 / 5; overflow: hidden; background: var(--hig-color-tertiary-system-background); }
    .character-card-portrait { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; transition: transform .35s ease; }
    .grid-card:hover .character-card-portrait { transform: scale(1.025); }
    .character-card-placeholder { display: grid; place-items: center; background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--hig-color-tint) 25%, transparent), transparent 45%), var(--hig-color-tertiary-system-background); }
    .grid-card-body { flex: 1; min-width: 0; padding: 18px; }
    .grid-card-body h4 { margin: 2px 0 8px; color: var(--hig-color-label); font-size: 20px; }
    .grid-card-body h3 { margin: 5px 0 10px; color: var(--hig-color-label); font-size: 22px; line-height: 1.25; }
    .grid-card-body .tagline { color: var(--hig-color-secondary-label); line-height: 1.45; }
    .grid-card-body .liquid-glass__chip { color: var(--hig-color-label); background: color-mix(in srgb, var(--hig-color-label) 12%, transparent); }
    .grid-card-body .liquid-glass__label { color: var(--hig-color-secondary-label); }
    .tag-row { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
    .scene-cast { margin: 0; color: var(--hig-color-tint); font-size: 12px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
    .scene-situation { min-height: 3em; margin: 0 0 12px; color: var(--hig-color-secondary-label); line-height: 1.5; }
    .scene-role { display: flex; gap: 8px; margin: 0 0 12px; color: var(--hig-color-secondary-label); font-size: 12px; }
    .scene-role span { flex: none; color: var(--hig-color-tint); font-weight: 700; }
    .scene-intro { margin: 12px 0 0; padding-top: 12px; border-top: var(--hig-hairline) solid var(--hig-color-separator); color: var(--hig-color-tertiary-label); font-size: 12px; line-height: 1.5; }
    .active-scene { margin: 18px clamp(18px, 5vw, 48px); padding: 20px; border: var(--hig-hairline) solid var(--hig-color-separator); border-radius: var(--hig-radius-md); background: var(--hig-color-secondary-system-background); }
    .active-scene h2 { margin: 4px 0 8px; }
    .active-scene blockquote { margin: 14px 0 0; padding-inline-start: 14px; border-inline-start: 3px solid var(--hig-color-tint); color: var(--hig-color-label); }
    @media (max-width: 600px) {
      .discovery-header { align-items: flex-start; flex-direction: column; }
      .character-section { padding-inline: 14px; }
    }
    .character-card h4.on-stage { color: var(--hig-palette-green); }
    .character-card .tagline { font-style: italic; }
    .bio-disclosure { margin: var(--hig-spacing-2) 0 var(--hig-spacing-3); }

    /* --- chat bubbles --- */
    .chat-transcript { display: flex; flex-direction: column; gap: 6px; max-height: 55vh; overflow-y: auto;
                       background: var(--hig-color-secondary-system-background); border-radius: var(--hig-radius-sm);
                       padding: var(--hig-spacing-3); margin: var(--hig-spacing-3) 0; }
    .chat-transcript p { margin: 0; max-width: 80%; padding: 8px 12px; border-radius: var(--hig-radius-md); line-height: 1.4; }
    .chat-turn-user { align-self: flex-end; background: color-mix(in srgb, var(--hig-color-tint) 35%, var(--hig-color-tertiary-system-background)); border-bottom-right-radius: 4px; }
    .chat-turn-character { align-self: flex-start; background: var(--hig-color-tertiary-system-background); border-bottom-left-radius: 4px; }
    .chat-turn-held { border: 1px solid var(--hig-palette-orange); }
    .chat-turn-thinking { align-self: flex-start; opacity: 0.5; font-style: italic; background: transparent; padding: 2px 4px; }
    .timestamp { opacity: 0.6; margin-inline-end: 4px; }
    .chat-empty { padding: var(--hig-spacing-7) 0; text-align: center; }
    .chat-input { display: flex; gap: var(--hig-spacing-2); margin: var(--hig-spacing-3) 0; align-items: center; }

    /* --- forms / rows (field material is the library's; only layout here) --- */
    .grow-field { flex: 1; min-width: 160px; }
    .full-width { width: 100%; box-sizing: border-box; }
    .field-with-counter { display: flex; flex-direction: column; gap: 2px; }
    .char-counter { align-self: flex-end; opacity: 0.6; }
    .base-picker, .attribution-fields, .part-swap-row { display: flex; flex-wrap: wrap; gap: var(--hig-spacing-2); align-items: center; }
    .selected { background: var(--liquid-glass-accent-tint); }
    .actions, .create-actions { display: flex; flex-wrap: wrap; gap: var(--hig-spacing-2); margin: var(--hig-spacing-3) 0 0; }
    .actions button, .create-actions button, .chat-input button { margin: 0; }
    .actions button.unprovisioned { opacity: 0.6; }
    .demo-row { display: flex; align-items: center; gap: 6px; }
    .create-character { border: 1px dashed var(--hig-color-separator); border-radius: var(--hig-radius-sm);
                        padding: var(--hig-spacing-4); margin-bottom: var(--hig-spacing-6); }
    .import-character { margin-top: var(--hig-spacing-4); padding-top: var(--hig-spacing-4);
                        border-top: var(--hig-hairline) solid var(--hig-color-separator); }
    .import-label { display: flex; align-items: center; gap: var(--hig-spacing-2); opacity: 0.85; flex-wrap: wrap; }
    .import-label input[type="file"] { max-width: 100%; }
    .scene-request { margin-top: var(--hig-spacing-3); padding-top: var(--hig-spacing-3);
                     border-top: var(--hig-hairline) solid var(--hig-color-separator); }
    .scene-image { display: block; max-width: 100%; margin-top: var(--hig-spacing-2); border-radius: var(--hig-radius-sm); }
    .character-controls { display: flex; align-items: center; gap: var(--hig-spacing-2); margin-top: var(--hig-spacing-3);
                          padding-top: var(--hig-spacing-3); border-top: var(--hig-hairline) solid var(--hig-color-separator); }
    .delete-control { display: flex; gap: var(--hig-spacing-2); margin-inline-start: auto; }
    .delete-control span { display: flex; gap: var(--hig-spacing-2); align-items: center; }
    .delete-confirm { color: var(--hig-palette-red); border-color: color-mix(in srgb, var(--hig-palette-red) 45%, transparent); }
    .delete-cancel, .cancel-edit-btn { opacity: 0.7; }
    .create-btn { background: color-mix(in srgb, var(--hig-palette-green) 22%, transparent);
                  border-color: color-mix(in srgb, var(--hig-palette-green) 45%, transparent); }
    .broadcast-active { color: var(--hig-palette-red); background: color-mix(in srgb, var(--hig-palette-red) 15%, transparent);
                        border-color: color-mix(in srgb, var(--hig-palette-red) 45%, transparent); }
    .back-btn { margin: 0 0 var(--hig-spacing-3); opacity: 0.8; }
    .containment { margin-top: var(--hig-spacing-7); }
    .containment summary { font-weight: 600; }
    .ledger, .monetization-ledger, .embodiment-ledger, .pending-escalations { margin: var(--hig-spacing-4) 0; opacity: 0.9; }