/* your-voice-main.css — 042026.1.68 */
    /* [g68 Session 64 — Batch 8 Part A] L10-2 Phase 3 HC token-bridge.
       Your-Voice owns a bespoke green brand palette (local --bg/--panel/
       --panel-2/--ink/--muted/--accent/--border/--focus/--danger) — those
       are intentional brand identity, not generic theme surfaces, so we
       do NOT swap them to shared tokens in the default cascade. Instead
       we add an HC-bridge block at the bottom that maps the local token
       NAMES to the shared HC hex values (#000/#111/#1a1a1a/#fff/#ffeb3b/
       #ff6b7a) when `body.jhacal-high-contrast` is present. Every rule
       that consumes `var(--bg)`, `var(--ink)`, `var(--accent)` etc. then
       flips automatically via the cascade without `!important`. Curated
       literals (gold gradients, green/red/rgba overlays, hard-coded
       #1a261e list-item bg etc.) are NOT migrated in this pass — they
       are covered by the shared-ui.css HC !important layer from L10-1
       (g32) and remain out-of-scope for token migration. */
    :root{
      --bg:#131a14; --panel:#18231b; --panel-2:#1e2b22; --ink:#f6f5ef; --muted:#9fb3a9;
      --accent:#1c7c54; --border:#213127; --focus:#2bd08b; --danger:#a83a3a;
      --pv-rows:16;
    }
    /* [g68 L10-2 Phase 3] HC token bridge — local tokens flip to the shared
       HC hex values when body.jhacal-high-contrast is active. Values match
       jhacal-design-tokens.css §HIGH-CONTRAST TOKEN OVERRIDES. Zero !important. */
    body.jhacal-high-contrast{
      --bg:#000; --panel:#111; --panel-2:#1a1a1a;
      --ink:#fff; --muted:#fff;
      --accent:#ffeb3b; --border:#fff; --focus:#ffeb3b; --danger:#ff6b7a;
    }
    *{box-sizing:border-box} html,body{height:100%}
    body{margin:0;font-family:Inter,"Segoe UI",Arial,sans-serif;color:var(--ink);
      background: radial-gradient(1000px 600px at 20% -10%, #0e140f, transparent), var(--bg);}
    .header{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px;
      padding:12px 18px; margin:12px; border:1px solid #1c2b21; border-radius:14px;
      background:linear-gradient(180deg,#0f1913,#0b130e);}
    .brand-center{justify-self:center;text-align:center;font-weight:900;letter-spacing:.6px;font-size:20px}
    .brand-left{display:flex;align-items:center}
    .logo{height:28px;width:auto;border-radius:6px;box-shadow:0 0 0 1px #233528}
    .btn{border:none;border-radius:8px;padding:10px 14px;font-weight:700;font-size:13px;cursor:pointer;color:#fff}
    .btn.gold{background:linear-gradient(135deg,#FFB74D 0%,#FF9800 100%)} .btn.small{padding:8px 10px;font-size:12px}
    .btn.ghost{background:transparent;border:1px solid #555;color:#ccc}
    .app{display:grid;grid-template-columns:290px 1fr 340px;gap:12px;min-height:calc(100% - 92px);padding:0 12px 12px}
    .panel{background:linear-gradient(180deg,var(--panel),var(--panel-2));border:1px solid #233528;border-radius:14px;
      box-shadow:0 12px 34px rgba(0,0,0,.35);padding:12px}
    .left .list{height:calc(100% - 24px);overflow:auto;margin-top:8px}
    .list-item{padding:8px;border-radius:10px;cursor:pointer;margin-bottom:6px;background:#1a261e;border:2px solid #213227;
      display:flex;align-items:center;gap:10px;transition:all .2s ease;user-select:none;font-size:13px;line-height:1.25}
    .list-item:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(0,0,0,.25);border-color:#2a3d31}
    .list-item.selected{background:#1c2a22;border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
    .list-item.active{outline:2px solid var(--focus);outline-offset:2px}
    .list-item .title{flex:1;font-weight:500} .list-item .count{opacity:.7;font-size:12px;background:#0f1a14;padding:2px 6px;border-radius:8px}
    .center .phrase{min-height:140px;display:flex;align-items:center;justify-content:center;text-align:center;
      font-size:22px; background:#1b2920;border:1px dashed #2a3d31;border-radius:12px;padding:16px;margin-bottom:6px;line-height:1.4}
    .center .metaRow{display:flex;gap:12px;justify-content:center;align-items:center;margin:6px 0 10px}
    .center .emotion{color:var(--muted);font-size:13px}
    .center .wordcount{opacity:.85;font-size:12px;padding:2px 8px;border:1px solid #203227;border-radius:999px;background:#15221a}
    #progressNum{font-variant-numeric:tabular-nums;opacity:.9}
    .ps-controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;margin:8px 0}
    .ps-button{width:58px;height:58px;border-radius:50%;border:1px solid rgba(255,255,255,.14);display:inline-flex;align-items:center;justify-content:center;background:#1c2a22;color:#fff;box-shadow:0 4px 12px rgba(0,0,0,.35);transition:transform .12s ease, filter .12s ease, background .15s ease;cursor:pointer}
    .ps-button:hover{transform:translateY(-1px)} .ps-button:active{transform:translateY(0);filter:brightness(.95)}
    .ps-button .ico{font-size:22px;line-height:1;pointer-events:none}
    .ps-go{background:#4CAF50} .ps-stop{background:#d32f2f} .ps-skip{background:#2a3a31}
    .ps-rec{background:#ef9a9a;color:#111} .ps-rec-on{background:#d32f2f;color:#fff} .ps-mute-on{background:#37483f}
    .ps-inline{display:inline-flex;align-items:center;gap:8px;margin-left:8px}
    .input,select,textarea{width:100%;background:#142018;color:var(--ink);border:1px solid #203227;border-radius:10px;padding:10px;outline:none;transition: box-shadow .2s ease, border-color .2s ease}
    .input:focus,select:focus,textarea:focus{border-color:var(--focus);box-shadow:0 0 0 3px rgba(43,208,139,.2)}
    .input.compact{padding:8px 10px;height:36px} textarea{min-height:96px}
    .kv{display:flex;gap:8px;align-items:center} .kv label{opacity:.85}
    .preview-wrap{margin-top:8px}
    .preview{margin-top:8px;max-height:calc(var(--pv-rows)*22px + 20px);overflow:auto;border:1px solid #203227;border-radius:10px;background:#15221a;padding:8px}
    .preview .row{font-size:12px;line-height:22px;display:flex;gap:8px;align-items:center;padding:2px 6px;border-radius:8px;cursor:pointer}
    .preview .row:hover{background:#183023} .preview .row.active{outline:2px solid var(--focus);outline-offset:1px;background:#183023}
    .preview .code{opacity:.8;font-family:ui-monospace,"SF Mono",Consolas,monospace} .preview .emo{opacity:.8}
    .modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.55);z-index:50}
    .modal.open{display:flex} .modal .card{width:min(740px,95vw);
      background:rgba(22,35,27,var(--tutorCardAlpha,0.92));
      border:1px solid #213127;border-radius:14px;box-shadow:0 18px 48px rgba(0,0,0,.5);padding:16px;
      backdrop-filter: blur(8px);}
    .modal .row{display:grid;grid-template-columns:240px 1fr;gap:12px;align-items:center;margin:10px 0}
    .modal .section{border-top:1px solid #213127;margin-top:10px;padding-top:10px}
    .modal .actions{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}
    /* ── Recording saved modal ────────────────────────────── */
    #yvRecordingModal .card{width:min(640px,95vw);max-height:90vh;overflow-y:auto}
    #yvRecordingModal .yv-rec-section{margin-top:14px;padding-top:14px;border-top:1px solid #213127}
    #yvRecordingModal .yv-rec-section-title{font-size:0.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.6;margin-bottom:8px}
    #yvRecordingModal .yv-phrase-list{max-height:220px;overflow-y:auto;border:1px solid #213127;border-radius:8px;padding:10px 12px;background:rgba(0,0,0,.25);font-size:0.82rem;line-height:1.7;color:rgba(255,255,255,.85)}
    #yvRecordingModal .yv-phrase-list .yv-set-title{font-weight:700;color:var(--focus,#2bd08b);margin-bottom:4px}
    #yvRecordingModal .yv-phrase-list .yv-phrase-item{padding:1px 0}
    #yvRecordingModal .yv-rec-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
    #yvRecordingModal .yv-rec-actions .btn{flex:1;min-width:120px;justify-content:center}
    #yvRecordingModal .yv-rec-footer{display:flex;justify-content:space-between;align-items:center;margin-top:14px;padding-top:10px;border-top:1px solid #213127}
    #yvRecordingModal audio{width:100%;border-radius:8px;margin-top:4px}
    #alertArea{position:fixed;left:50%;transform:translateX(-50%);bottom:18px;z-index:60;display:flex;flex-direction:column;gap:8px}
    .toast{background:#15221a;border:1px solid var(--border);padding:10px 12px;border-radius:10px;box-shadow:0 10px 22px rgba(0,0,0,.35)}
    .toast.error{border-color:#532323;background:#1c1212} .toast .title{font-weight:800} .toast .detail{opacity:.85}
    .footer{display:none}
    @media (max-width:1024px){.app{grid-template-columns:1fr;grid-template-rows:auto auto auto}.center{order:1}.left{order:2}.right{order:3}}
    .hidden{display:none!important}

    /* Enhanced Tutor System Styles */
    #tutorOverlay.modal{background:rgba(0,0,0,var(--tutorBackdropAlpha,0.4));transition:background .3s ease}
    .tutor-card{max-height:85vh;overflow:auto;transition:all .3s cubic-bezier(0.34, 1.56, 0.64, 1);position:relative}
    .tutor-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;border-bottom:1px solid #2a3a31;padding-bottom:10px}
    .tutor-title{font-weight:800;font-size:18px;color:var(--focus)}
    .tutor-sub{opacity:.85;font-size:13px;margin-top:2px}
    .tutor-body{line-height:1.6;font-size:14px}
    .tutor-body h3{color:var(--focus);margin:16px 0 8px 0;font-size:16px}
    .tutor-body h4{color:#a8c4a0;margin:12px 0 6px 0;font-size:14px}
    .tutor-body ul{margin:8px 0 12px 18px}
    .tutor-body li{margin:4px 0}
    .tutor-body strong{color:var(--focus)}
    .tutor-body code{background:#1a2820;padding:2px 6px;border-radius:4px;font-family:ui-monospace,"SF Mono",Consolas,monospace;font-size:12px;color:#9fb3a9}
    .tutor-controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin-top:16px;padding-top:12px;border-top:1px solid #2a3a31}
    .tutor-nav{display:flex;gap:8px}
    .tutor-settings{display:flex;gap:12px;align-items:center}
    .tutor-progress{height:4px;background:#0f1a14;border:1px solid #203227;border-radius:999px;overflow:hidden;margin:8px 0}
    .tutor-progress > div{height:100%;background:linear-gradient(90deg,#2bd08b,#1c7c54);transition:width .3s ease}
    .tutor-checkbox{display:flex;align-items:center;gap:6px;font-size:12px;cursor:pointer}
    .tutor-slider{display:flex;align-items:center;gap:6px;font-size:12px}
    .tutor-slider input[type="range"]{width:60px;height:4px}
    .tutor-highlight{position:relative;outline:3px solid var(--focus) !important;outline-offset:3px !important;border-radius:8px !important;box-shadow:0 0 0 6px rgba(43,208,139,.15) !important;transition:all .3s ease !important;z-index:45 !important}

    /* Auto-positioning system */
    .modal.dock-tl{justify-content:flex-start !important;align-items:flex-start !important;padding:20px}
    .modal.dock-tr{justify-content:flex-end !important;align-items:flex-start !important;padding:20px}
    .modal.dock-bl{justify-content:flex-start !important;align-items:flex-end !important;padding:20px}
    .modal.dock-br{justify-content:flex-end !important;align-items:flex-end !important;padding:20px}
    .modal.dock-center{justify-content:center !important;align-items:center !important}

    /* Minimized tutor button - positioned at bottom-right to avoid header overlap */
    .tutor-minimized{position:fixed;bottom:20px;right:20px;z-index:55;width:50px;height:50px;border-radius:50%;background:linear-gradient(135deg,#FFB74D 0%,#FF9800 100%);border:2px solid var(--focus);box-shadow:0 6px 20px rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;cursor:pointer;font-weight:800;font-size:18px;color:#000;transition:all .3s ease}
    .tutor-minimized:hover{transform:scale(1.1);box-shadow:0 8px 25px rgba(0,0,0,.5)}
    .tutor-minimized.hidden{display:none}

    /* Skip functionality */
    .tutor-skip{position:absolute;top:12px;right:12px;background:rgba(0,0,0,.5);border:none;color:#ccc;padding:4px 8px;border-radius:4px;font-size:11px;cursor:pointer;opacity:.7}
    .tutor-skip:hover{opacity:1;background:rgba(0,0,0,.7)}

    /* Screen reader support */
    .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

    /* Keyboard navigation */
    .tutor-card:focus-within{box-shadow:0 0 0 3px rgba(43,208,139,.3)}
    .tutor-controls button:focus{outline:2px solid var(--focus);outline-offset:2px}

    /* ── iPhone / small-screen header ─────────────────────────────────────────
       Hide the long subtitle on screens ≤480px wide.
       "Your-Voice" brand alone is plenty — the subtitle is for desktop only. */
    @media(max-width:480px){
      .brand-center .yv-subtitle{display:none}
      .brand-center{font-size:16px;letter-spacing:.3px}
      .header{grid-template-columns:auto 1fr auto;padding:8px 12px;margin:8px;gap:8px}
    }

    /* ── Tabbed Settings Modal ───────────────────────────────────────────────── */
    .yv-settings-content{
      background:#18231b;
      border:2px solid var(--focus);
      border-radius:18px;
      width:min(780px,95vw);
      max-height:88dvh;
      display:flex;
      flex-direction:column;
      overflow:hidden;
      box-shadow:0 30px 80px rgba(0,0,0,.7);
    }
    .yv-settings-header{
      display:flex;
      justify-content:space-between;
      align-items:center;
      padding:20px 28px 16px;
      border-bottom:1px solid rgba(43,208,139,.2);
      flex-shrink:0;
    }
    .yv-settings-title{
      margin:0;
      font-size:1.5rem;
      font-weight:800;
      color:var(--focus);
    }
    .yv-settings-tabs{
      display:flex;
      gap:0;
      padding:0 28px;
      background:rgba(0,0,0,.2);
      border-bottom:2px solid rgba(43,208,139,.15);
      overflow-x:auto;
      flex-shrink:0;
      -webkit-overflow-scrolling:touch;
    }
    .yv-stab{
      background:none;
      border:none;
      border-bottom:3px solid transparent;
      padding:14px 18px;
      font-size:0.95rem;
      font-weight:600;
      color:var(--muted);
      cursor:pointer;
      white-space:nowrap;
      transition:color .15s,border-color .15s;
    }
    .yv-stab:hover{color:var(--ink);background:rgba(43,208,139,.06);}
    .yv-stab.active{color:var(--focus);border-bottom-color:var(--focus);}
    .yv-settings-panels{
      flex:1;
      overflow-y:auto;
      -webkit-overflow-scrolling:touch;
      padding:24px 28px;
    }
    .yv-spanel{display:none;}
    .yv-spanel.active{display:block;}
    .yv-srow{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:16px;
      background:rgba(255,255,255,.03);
      border:1px solid rgba(255,255,255,.08);
      border-radius:10px;
      padding:16px;
      margin-bottom:12px;
    }
    .yv-sinfo{flex:1;}
    .yv-slabel{font-size:1rem;font-weight:600;color:var(--ink);margin-bottom:3px;}
    .yv-sdesc{font-size:0.85rem;color:var(--muted);line-height:1.4;}
    .yv-sctrl{min-width:180px;}
    .yv-sctrl .input,.yv-sctrl select,.yv-sctrl input[type="number"]{width:100%;}
    .yv-ssection-hdr{
      font-size:1.1rem;
      font-weight:700;
      color:var(--focus);
      margin:0 0 14px;
      padding-bottom:6px;
      border-bottom:2px solid rgba(43,208,139,.25);
    }
    .yv-ssection-hdr:not(:first-child){margin-top:24px;}
    .yv-settings-footer{
      display:flex;
      justify-content:flex-end;
      padding:14px 28px 20px;
      border-top:1px solid rgba(43,208,139,.15);
      flex-shrink:0;
    }
    @media(max-width:600px){
      .yv-settings-header{padding:14px 16px 12px;}
      .yv-settings-tabs{padding:0 12px;}
      .yv-stab{padding:10px 12px;font-size:0.85rem;}
      .yv-settings-panels{padding:16px;}
      .yv-settings-footer{padding:12px 16px 16px;}
      .yv-srow{flex-direction:column;align-items:stretch;gap:10px;}
      .yv-sctrl{min-width:unset;}
    }