/* Fonts are self-hosted so the page makes no third-party requests. SIL Open Font License. */
@font-face{font-family:"Inter";font-style:normal;font-display:swap;font-weight:100 900;src:url(/apps/gurbani-listener/fonts/inter-latin.woff2) format("woff2-variations"),url(/apps/gurbani-listener/fonts/inter-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Noto Sans Gurmukhi";font-style:normal;font-display:swap;font-weight:100 900;src:url(/apps/gurbani-listener/fonts/noto-sans-gurmukhi-gurmukhi.woff2) format("woff2-variations"),url(/apps/gurbani-listener/fonts/noto-sans-gurmukhi-gurmukhi.woff2) format("woff2");unicode-range:U+0951-0952,U+0964-0965,U+0A01-0A76,U+200C-200D,U+20B9,U+25CC,U+262C,U+A830-A839}
@font-face{font-family:"Noto Sans Gurmukhi";font-style:normal;font-display:swap;font-weight:100 900;src:url(/apps/gurbani-listener/fonts/noto-sans-gurmukhi-latin.woff2) format("woff2-variations"),url(/apps/gurbani-listener/fonts/noto-sans-gurmukhi-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
  :root{
    --bg:#ffffff; --bg-soft:#f6f6f7; --card:#ffffff; --card-hi:#f0f1f2;
    --border:#ebebed; --border-hi:#00c805;
    --text:#0a0a0a; --text-dim:#6e6e73; --text-faint:#a3a3a8;
    --accent:#00c805; --accent-ink:#ffffff; --good:#00c805; --good-soft:#e7f9e8;
    --danger:#ff3b30; --danger-soft:#ffe9e7; --ik:#0066ff;
    /* Android WebViews older than 140 report env() insets as 0; Capacitor sets these vars instead. */
    --sat: var(--safe-area-inset-top, env(safe-area-inset-top, 0px));
    --sab: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
    color-scheme: light;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;background:var(--bg);color:var(--text);}
  body{
    font-family:"Inter",system-ui,-apple-system,sans-serif;
    padding-bottom: calc(40px + var(--sab));
    padding-top: var(--sat);
    -webkit-tap-highlight-color: transparent;
    -webkit-font-smoothing:antialiased;
  }
  .wrap{max-width:560px;margin:0 auto;padding-inline:20px;}
  header.top{position:sticky; top:var(--sat); z-index:20; background:var(--bg); padding-block:20px 14px;}
  h1{font-weight:800; font-size:1.375rem; margin:0; letter-spacing:-.02em;}
  .ik{color:var(--ik);}
  .tag{font-size:.8rem; color:var(--text-faint); margin-top:4px; font-weight:500;}
  section{margin-bottom:8px; padding-block:20px; border-top:1px solid var(--border); scroll-margin-top:calc(84px + var(--sat));}
  .sline{scroll-margin-top:calc(96px + var(--sat)); scroll-margin-bottom:24px;}
  section:first-of-type{border-top:none; padding-top:4px;}
  .listen-card{display:flex; flex-direction:column; gap:18px;}
  .listen-row{display:flex; align-items:center; gap:16px;}
  button{font-family:inherit; cursor:pointer;}
  .mic-btn{
    flex:none; width:60px; height:60px; border-radius:50%; border:none;
    background:var(--text); color:var(--bg); font-size:1.3rem;
    display:flex; align-items:center; justify-content:center;
    transition:transform .12s ease, background .15s ease;
  }
  .mic-btn:active{transform:scale(.94);}
  .mic-btn.live{background:var(--danger); animation:pulse 1.6s infinite;}
  .mic-btn:disabled{opacity:.35; cursor:default;}
  @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,59,48,.35);}70%{box-shadow:0 0 0 14px rgba(255,59,48,0);}100%{box-shadow:0 0 0 0 rgba(255,59,48,0);}}
  @media (prefers-reduced-motion: reduce){ .mic-btn.live{animation:none;} }
  .listen-meta{flex:1; min-width:0;}
  .status-line{font-weight:700; font-size:1.05rem; letter-spacing:-.01em;}
  .status-sub{color:var(--text-dim); font-size:.85rem; margin-top:2px; line-height:1.4;}
  select, input[type=text], input[type=search]{
    background:var(--bg-soft); color:var(--text); border:1px solid var(--border);
    border-radius:12px; padding:11px 12px; font-size:.9rem; font-family:inherit; font-weight:500; min-width:0;
  }
  select:focus, input:focus{outline:none; border-color:var(--border-hi);}
  .row-controls{display:flex; gap:8px; flex-wrap:wrap;}
  .row-controls > *{flex:1; min-width:120px;}
  .gm{font-family:"Noto Sans Gurmukhi","Inter",sans-serif;}
  .transcript{
    font-size:1.1rem; line-height:1.6; min-height:2.6em; color:var(--text); cursor:pointer;
    background:var(--bg-soft); border-radius:14px; padding:14px 16px; font-weight:500; border:none; text-align:left; width:100%;
  }
  .transcript .interim{color:var(--text-faint);}
  .hint{color:var(--text-faint); font-size:.78rem; line-height:1.55;}
  .hint b{color:var(--text-dim); font-weight:600;}
  h2.section-title{font-weight:700; font-size:1rem; margin:0; display:flex; align-items:center; gap:8px; letter-spacing:-.01em;}
  .section-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px;}
  .badge{font-size:.72rem; font-weight:600; color:var(--good); display:flex; align-items:center; gap:5px;}
  .badge::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--good); display:inline-block;}
  .badge.off{color:var(--text-faint);} .badge.off::before{background:var(--text-faint);}
  .empty{color:var(--text-faint); font-size:.85rem;}
  .btn{border-radius:999px; padding:11px 18px; font-size:.85rem; font-weight:700; border:1px solid var(--border); background:var(--bg-soft); color:var(--text);}
  .btn:active{opacity:.7;}
  .btn.primary{background:var(--text); color:var(--bg); border-color:transparent;}
  .btn.block{width:100%; text-align:center; padding:15px 14px; font-size:.92rem;}
  .btn.small{padding:8px 13px; font-size:.78rem;}
  .link{background:none; border:none; padding:0; color:var(--text-dim); font-weight:600; font-size:.8rem; text-decoration:underline; text-underline-offset:3px;}
  .history{display:flex; gap:8px; flex-wrap:wrap;}
  .chip{font-size:.78rem; background:var(--bg-soft); border:1px solid var(--border); border-radius:999px; padding:7px 13px; color:var(--text-dim); font-weight:500;}
  .results{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px;}
  .result{width:100%; text-align:left; background:var(--bg); border:none; border-radius:14px; padding:12px 12px; display:flex; flex-direction:column; gap:4px;}
  .result:active, .result:hover{background:var(--bg-soft);}
  .result .line{font-size:1.05rem; line-height:1.5; font-weight:600;}
  .result .tr{font-size:.82rem; color:var(--text-dim); line-height:1.4;}
  .result .meta{font-size:.72rem; color:var(--text-faint); font-weight:600;}
  .shabad-head{display:flex; flex-direction:column; gap:4px; margin-bottom:12px;}
  .shabad-meta{font-size:.78rem; color:var(--text-dim); font-weight:600;}
  .shabad-lines{display:flex; flex-direction:column; gap:4px;}
  .sline{border-radius:12px; padding:10px 12px; transition:background .2s ease;}
  .sline .gl{font-size:1.15rem; line-height:1.55; font-weight:600;}
  .sline .tl{font-size:.8rem; color:var(--text-dim); margin-top:2px;}
  .sline .en{font-size:.82rem; color:var(--text); opacity:.75; margin-top:2px; line-height:1.4;}
  .sline.now{background:var(--good-soft);}
  .sline.now .gl{color:#007a03;}
  .row-actions{display:flex; gap:8px; flex-wrap:wrap; margin-top:14px;}
  .toggle{display:flex; align-items:center; gap:8px; font-size:.8rem; color:var(--text-dim); font-weight:600;}
  .toggle input{width:18px; height:18px; accent-color:var(--text);}
  footer.note{color:var(--text-faint); font-size:.74rem; text-align:center; padding:28px 18px 4px; line-height:1.6;}
  footer.note a{color:var(--text-dim);}
  /* disclosure sheet */
  .scrim{position:fixed; inset:0; background:rgba(10,10,10,.35); z-index:50; display:flex; align-items:flex-end; justify-content:center;}
  .scrim[hidden]{display:none;}
  .sheet{background:var(--bg); width:100%; max-width:560px; border-radius:22px 22px 0 0; padding:24px 22px calc(22px + var(--sab)); box-shadow:0 -20px 60px -30px rgba(0,0,0,.4);}
  .sheet h3{margin:0 0 10px; font-size:1.1rem; letter-spacing:-.01em;}
  .sheet p{margin:0 0 10px; color:var(--text-dim); font-size:.9rem; line-height:1.5;}
  .sheet .row-actions{margin-top:18px;}
  .sheet .row-actions .btn{flex:1;}
  .err{color:var(--danger); font-size:.82rem; font-weight:600;}
  [hidden]{display:none !important;}