/* ═══════════════════════════════════════════════════════════════════
   जप — the visual system

   THE IDEA. A mala is beads on a thread. The thread is what makes a
   hundred and eight separate things one object, and it is the structural
   device here too: it runs down the side of the long screens, sections
   hang off it as beads, and the record of practice is not a grid of
   squares but a strand of days. There are no boxes in this interface,
   because there are none in a mala.

   CONSEQUENCES, which are also the house rules:
   · Almost nothing has a border. Space separates; the thread threads.
   · Nothing has a corner radius. Sharp edges and wide margins are the
     manuscript page this is descended from. Round things are round
     because they are beads.
   · Two typefaces, not four. Tiro Devanagari Sanskrit sets the mantras,
     the numerals and the display — it was drawn for this script, and its
     Latin digits were drawn to sit beside it. Noto Sans Devanagari sets
     the interface, where text is small and must stay legible.
   · Four tiers of ink and two of rule. Every earlier alpha value was a
     decision made once and never again; these are a system.

   THEMES. Every colour is a channel triple on :root, so a theme is a
   variable swap. The rule from DECISIONS §3 holds inside each: one
   accent, never two.
   ═══════════════════════════════════════════════════════════════════ */

:root{
    /* ── channels, as `r,g,b` so any rule can set its own alpha ── */
    --brass-rgb:201,162,39;
    --ash-rgb:168,160,184;
    --flame-rgb:255,154,60;
    --cream-rgb:242,233,220;
    --deep-rgb:10,8,18;
    --sky-rgb:60,48,96;
    --card-rgb:20,18,31;
    --card2-rgb:23,20,38;
    --tint-rgb:255,255,255;      /* subtle fills over the background */
    --well-rgb:0,0,0;            /* the inside of an input */
    --warm1-rgb:138,94,56;       /* the strand of days, quietest */
    --warm2-rgb:170,120,60;

    /* ── solids ── */
    --night:#14121F;
    --night-deep:#0A0812;
    --night-far:#171426;
    --mantra-ink:#E4DCEE;
    --brass-dim:#7A6224;
    --veil:#0A0812;              /* what low-light mode lays over the screen */

    --brass:rgb(var(--brass-rgb));
    --flame:rgb(var(--flame-rgb));
    --ash:rgb(var(--ash-rgb));
    --cream:rgb(var(--cream-rgb));

    /* ── ink: four tiers, and that is all there is ── */
    --ink-1:rgba(var(--cream-rgb),.94);   /* what you read */
    --ink-2:rgba(var(--cream-rgb),.60);   /* what you read second */
    --ink-3:rgba(var(--ash-rgb),.62);     /* labels, annotation */
    --ink-4:rgba(var(--ash-rgb),.34);     /* present, not asking */

    /* ── rule: two weights of hairline, both nearly invisible ── */
    --rule:rgba(var(--brass-rgb),.26);
    --rule-soft:rgba(var(--ash-rgb),.13);

    /* ── type ── */
    --f-display:'Tiro Devanagari Sanskrit',Georgia,serif;
    --f-text:'Noto Sans Devanagari',system-ui,sans-serif;

    --t-count:clamp(70px,20vw,102px);
    --t-mantra:clamp(21px,6vw,29px);
    --t-hero:clamp(38px,11vw,50px);
    --t-title:19px;
    --t-body:14px;
    --t-small:12.5px;
    --t-label:11.5px;

    /* ── space: a scale with real jumps in it ── */
    --s1:6px;
    --s2:10px;
    --s3:16px;
    --s4:26px;
    --s5:44px;
    --s6:72px;

    /* the thread, and how far content stands off it */
    --thread-x:9px;
    --indent:30px;
  }

  /* ── प्रभात — daylight. Warm paper, dark ink; for reading outdoors and
     for eyes that a dark screen defeats. ── */
  :root[data-theme="prabhat"]{
    --brass-rgb:138,105,20;
    --ash-rgb:92,84,104;
    --flame-rgb:198,92,20;
    --cream-rgb:38,32,28;
    --deep-rgb:245,238,226;
    --sky-rgb:226,214,196;
    --card-rgb:253,249,241;
    --card2-rgb:250,244,233;
    --tint-rgb:80,60,20;
    --well-rgb:255,255,255;
    --warm1-rgb:198,168,120;
    --warm2-rgb:176,138,74;

    --night:#F7F1E6;
    --night-deep:#EFE6D6;
    --night-far:#F3EADB;
    --mantra-ink:#2A2430;
    --brass-dim:#B9A264;
    --veil:#2A2430;
  }

  /* ── निशा — true night. Black for an OLED screen at 4am, and the least
     light a room will take. ── */
  :root[data-theme="nisha"]{
    --brass-rgb:176,142,38;
    --ash-rgb:132,126,146;
    --flame-rgb:236,140,54;
    --cream-rgb:222,214,202;
    --deep-rgb:0,0,0;
    --sky-rgb:22,18,38;
    --card-rgb:10,9,14;
    --card2-rgb:13,11,18;
    --tint-rgb:255,255,255;
    --well-rgb:0,0,0;
    --warm1-rgb:112,76,46;
    --warm2-rgb:140,98,50;

    --night:#000000;
    --night-deep:#000000;
    --night-far:#050409;
    --mantra-ink:#CFC8DA;
    --brass-dim:#5E4A1C;
    --veil:#000000;
  }

  /* ── स्पष्ट — high contrast. Not a mood; a legibility setting. ── */
  :root[data-theme="spasht"]{
    --brass-rgb:255,206,64;
    --ash-rgb:226,222,236;
    --flame-rgb:255,168,72;
    --cream-rgb:255,255,255;
    --deep-rgb:0,0,0;
    --sky-rgb:0,0,0;
    --card-rgb:12,12,14;
    --card2-rgb:16,16,20;
    --tint-rgb:255,255,255;
    --well-rgb:0,0,0;
    --warm1-rgb:186,132,70;
    --warm2-rgb:222,168,80;

    --night:#000000;
    --night-deep:#000000;
    --night-far:#08080A;
    --mantra-ink:#FFFFFF;
    --brass-dim:#8A6E20;
    --veil:#000000;
  }

  /* ══ foundations ══ */
  *{margin:0;padding:0;box-sizing:border-box;}
  html,body{height:100%;overflow:hidden;}
  /* Devanagari carries marks above the line (ि ी े ै ो ौ ं ँ) and below it
     (ु ू ृ). A control's default `line-height: normal` is sized for Latin and
     clips both, so every element that holds text is given room for them. */
  button,input,select,textarea{line-height:1.75;}
  body{
    background:var(--night);
    color:var(--ink-3);
    font-family:var(--f-text);
    font-size:var(--t-body);
    -webkit-font-smoothing:antialiased;
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
    user-select:none;-webkit-user-select:none;
  }
  .sky{
    position:fixed;inset:0;
    background:
      radial-gradient(120% 75% at 50% 108%, rgba(var(--flame-rgb),.13) 0%, rgba(var(--flame-rgb),0) 62%),
      radial-gradient(90% 60% at 50% -10%, rgba(var(--sky-rgb),.35) 0%, rgba(var(--sky-rgb),0) 70%),
      linear-gradient(180deg, var(--night-deep) 0%, var(--night) 58%, var(--night-far) 100%);
  }
  .dev{font-family:var(--f-display);}
  /* Numerals are set in the display face too. Its Latin was drawn to sit
     beside its Devanagari, which no third family can claim. */
  .num{font-family:var(--f-display);font-variant-numeric:tabular-nums;}
  .lbl{
    font-size:var(--t-label);line-height:1.6;font-weight:500;
    color:var(--ink-3);
  }

  /* ══ views ══ */
  .view{position:fixed;inset:0;display:none;flex-direction:column;}
  .view.on{display:flex;}

  /* ══ the thread ══
     One hairline down the left of the long screens, with a bead at the head
     of each section. It replaces every divider and every box border in the
     interface — the sections are on one strand, which is true of them. */
  .inner{position:relative;}
  .inner::before{
    content:'';position:absolute;left:var(--thread-x);top:var(--s2);bottom:var(--s4);
    width:1px;background:linear-gradient(
      180deg,
      rgba(var(--brass-rgb),0) 0%,
      rgba(var(--brass-rgb),.30) 6%,
      rgba(var(--brass-rgb),.30) 92%,
      rgba(var(--brass-rgb),0) 100%);
  }

  /* ── sankalpa ──
     Centred with auto margins, not `justify-content:center`. On a scroll
     container the latter overflows in both directions once the content is
     taller than the viewport, and the top of it can never be scrolled to.
     Auto margins collapse to zero in that case, which is what we want. */
  #vow{
    align-items:center;justify-content:flex-start;
    padding:calc(env(safe-area-inset-top) + var(--s5)) var(--s4)
            calc(env(safe-area-inset-bottom) + var(--s5));
    overflow-y:auto;overscroll-behavior:contain;
  }
  #vow .inner{width:100%;max-width:430px;margin:auto 0;padding-left:var(--indent);}
  #vow h1{
    font-family:var(--f-display);
    font-size:34px;line-height:1.2;color:var(--brass);font-weight:400;
  }
  #vow .sub{
    margin:var(--s2) 0 var(--s6);
    font-size:var(--t-small);color:var(--ink-3);line-height:1.85;max-width:34ch;
  }
  .group{margin-bottom:var(--s6);}
  .group > .lbl{margin-bottom:var(--s3);display:block;position:relative;}
  /* the bead where a section meets the thread */
  .group > .lbl::before,.rowhead .lbl::before{
    content:'';position:absolute;left:calc(var(--indent) * -1);top:.55em;
    width:7px;height:7px;border-radius:50%;
    background:var(--brass);opacity:.85;
    transform:translateX(calc(var(--thread-x) - 3px));
  }

  /* ── choices ──
     No box. A choice is its own words, with a brass bead when it is the one
     in hand — the same mark the thread uses, so selection reads as being on
     the strand rather than inside a container. */
  .opt{
    display:flex;align-items:baseline;gap:var(--s2);line-height:1.7;
    width:100%;text-align:left;position:relative;
    background:none;border:0;border-bottom:1px solid var(--rule-soft);
    padding:var(--s3) 0 var(--s3) var(--s3);
    color:var(--ink-3);font-family:inherit;font-size:var(--t-small);
    cursor:pointer;transition:color .18s ease;
  }
  .opt:last-of-type{border-bottom:0;}
  .opt::before{
    content:'';position:absolute;left:0;top:calc(var(--s3) + .78em);
    width:5px;height:5px;border-radius:50%;
    background:var(--ink-4);transition:background .18s ease,box-shadow .18s ease;
  }
  .opt:hover{color:var(--ink-2);}
  .opt:focus-visible{outline:1px solid var(--brass);outline-offset:3px;}
  .opt.sel{color:var(--ink-1);}
  .opt.sel::before{
    background:var(--brass);
    box-shadow:0 0 0 3px rgba(var(--brass-rgb),.14);
  }
  .opt .d{font-family:var(--f-display);font-size:17px;color:var(--ink-2);}
  .opt.sel .d{color:var(--cream);}
  .opt .r{font-size:var(--t-label);line-height:1.6;color:var(--ink-4);}
  .opt .n{
    margin-left:auto;font-family:var(--f-display);font-size:15px;
    color:var(--ink-4);font-variant-numeric:tabular-nums;
  }
  .opt.sel .n{color:var(--brass);}

  #begin{
    width:100%;margin-top:var(--s4);
    background:rgba(var(--brass-rgb),.11);
    border:0;border-left:2px solid var(--brass);
    color:var(--brass);
    font-family:var(--f-display);font-size:18px;
    padding:var(--s3) var(--s4);text-align:left;
    cursor:pointer;transition:background .18s ease;
  }
  #begin:hover{background:rgba(var(--brass-rgb),.18);}
  #begin:focus-visible{outline:1px solid var(--brass);outline-offset:3px;}
  .secondary{
    display:block;width:100%;margin-top:var(--s2);background:none;border:0;
    color:var(--ink-4);font-family:inherit;font-size:var(--t-small);
    padding:var(--s3) var(--s4);cursor:pointer;text-align:left;
    transition:color .18s ease;
  }
  .secondary:hover{color:var(--ink-2);}
  .secondary:focus-visible{outline:1px solid var(--brass);outline-offset:2px;}
  #vow .foot-note{
    margin-top:var(--s5);font-size:var(--t-label);
    color:var(--ink-4);line-height:1.9;
  }
  #closeVow{position:fixed;top:calc(env(safe-area-inset-top) + var(--s2));left:var(--s2);z-index:2;}

  /* ── a vow already running ── */
  #running{
    border-left:2px solid rgba(var(--brass-rgb),.5);
    padding:var(--s1) 0 var(--s1) var(--s3);
    margin:0 0 var(--s6) calc(var(--indent) * -1 + var(--thread-x));
  }
  #running[hidden]{display:none;}
  #runningWhat{font-family:var(--f-display);font-size:18px;color:var(--ink-1);line-height:1.65;}
  #runningNote{margin-top:var(--s2);font-size:var(--t-label);line-height:1.85;color:var(--ink-4);max-width:36ch;}
  #running .mini{margin-top:var(--s3);}

  /* ── your own mantra, your own number ── */
  .opt.add{color:var(--ink-4);}
  .opt.add::before{background:none;box-shadow:0 0 0 1px var(--ink-4);}
  .opt.mantra{
    flex-direction:column;align-items:flex-start;gap:var(--s1);
    padding-right:var(--s4);
  }
  .opt.mantra::before{top:calc(var(--s3) + 1.02em);}   /* its first line is the display face */
  .opt.mantra .d{line-height:1.7;}
  .opt.mantra .r{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;}
  .opt .today{
    font-size:10.5px;color:var(--brass);
    border-bottom:1px solid rgba(var(--brass-rgb),.4);
    padding-bottom:1px;
  }
  .opt .rm-btn{
    position:absolute;right:0;top:50%;transform:translateY(-50%);
    padding:0 var(--s1);font-size:17px;line-height:1;
    color:var(--ink-4);cursor:pointer;transition:color .18s ease;
  }
  .opt .rm-btn:hover{color:var(--flame);}

  .panel{
    display:none;margin:0 0 var(--s3) var(--s3);
    padding:var(--s2) 0 var(--s2) var(--s3);
    border-left:1px solid var(--rule-soft);
  }
  .panel.open{display:block;}
  .panel .lbl{display:block;margin:var(--s3) 0 var(--s1);}
  .fld{
    width:100%;background:rgba(var(--well-rgb),.20);
    border:0;border-bottom:1px solid var(--rule);
    padding:var(--s2) var(--s1);color:var(--cream);
    font-family:inherit;font-size:var(--t-body);
  }
  .fld:focus{outline:0;border-bottom-color:var(--brass);background:rgba(var(--well-rgb),.32);}
  .fld::placeholder{color:var(--ink-4);}
  .fld.dev{font-family:var(--f-display);font-size:18px;}
  .fld.num{font-family:var(--f-display);max-width:110px;}
  .hintline{margin:var(--s2) 0 0;font-size:var(--t-label);line-height:1.85;color:var(--ink-4);max-width:38ch;}
  .hintline.warn{color:rgba(var(--flame-rgb),.8);}
  .opt-note{text-transform:none;color:var(--ink-4);}

  .btnrow{display:flex;gap:var(--s2);margin:var(--s3) 0 var(--s2);flex-wrap:wrap;}
  .mini{
    background:none;border:0;border-bottom:1px solid var(--rule);
    color:var(--brass);font-family:inherit;font-size:var(--t-small);
    padding:var(--s1) 0;line-height:1.75;cursor:pointer;
    transition:border-color .18s ease,color .18s ease;
  }
  .mini:hover{border-bottom-color:var(--brass);}
  .mini:focus-visible{outline:1px solid var(--brass);outline-offset:3px;}
  .mini.ghost{border-bottom-color:var(--rule-soft);color:var(--ink-4);}
  .mini.ghost:hover{border-bottom-color:var(--ink-3);color:var(--ink-2);}
  .ownrow{display:flex;gap:var(--s3);align-items:baseline;margin-top:var(--s3);}

  .tabs{display:flex;gap:var(--s4);}
  .tab{
    flex:none;line-height:1.75;background:none;border:0;
    border-bottom:1px solid transparent;
    color:var(--ink-4);font-family:inherit;font-size:var(--t-small);
    padding:var(--s1) 0;cursor:pointer;transition:color .18s ease,border-color .18s ease;
  }
  .tab:hover{color:var(--ink-2);}
  .tab:focus-visible{outline:1px solid var(--brass);outline-offset:3px;}
  .tab.sel{color:var(--cream);border-bottom-color:var(--brass);}
  #anushthanaGroup .lbl{display:block;margin:var(--s5) 0 var(--s3);}
  #anushthanaGroup .lbl:first-child{margin-top:0;}

  /* ══ practice ══
     The mala is the only thing on this screen that is allowed to be loud. */
  #practice{
    align-items:center;justify-content:space-between;
    padding:calc(env(safe-area-inset-top) + var(--s4)) var(--s4)
            calc(env(safe-area-inset-bottom) + var(--s4));
    cursor:pointer;
  }
  #topbar{width:100%;max-width:520px;text-align:center;z-index:2;}
  #mantra{font-size:var(--t-mantra);line-height:1.85;color:var(--mantra-ink);}
  #day{
    margin-top:var(--s2);font-size:var(--t-label);
    color:rgba(var(--brass-rgb),.66);min-height:1em;
  }

  /* The 62vh term keeps the ring from pushing the footer off a short or
     landscape screen — the body does not scroll, so anything that overflows
     is simply unreachable. */
  #malaBox{position:relative;width:min(80vw,62vh,340px);aspect-ratio:1;display:grid;place-items:center;z-index:1;}
  svg.mala{width:100%;height:100%;display:block;overflow:visible;}
  #ring{transform-origin:150px 150px;transition:transform .42s cubic-bezier(.22,.85,.3,1);}
  .bead{transition:fill .5s ease, r .35s ease;}
  /* the mala's own strokes are themed here rather than on the element, so a
     light theme does not leave a dark ring painted over paper */
  #vowTrackArc{stroke:rgba(var(--brass-rgb),.09);}
  #vowArc{stroke:rgba(var(--brass-rgb),.55);transition:stroke-dashoffset .5s ease;}
  #thread{stroke:rgba(var(--brass-rgb),.10);transition:stroke .1s ease;}
  #thread.chime{stroke:rgba(var(--brass-rgb),.55);transition:stroke .7s ease;}

  #thumb{position:absolute;top:-9px;left:50%;transform:translateX(-50%);width:15px;height:15px;z-index:3;pointer-events:none;}
  #thumb path{fill:rgba(var(--brass-rgb),.9);}
  #halo{
    position:absolute;top:1px;left:50%;width:52px;height:52px;margin:-26px 0 0 -26px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(var(--flame-rgb),.42) 0%,rgba(var(--flame-rgb),0) 68%);
    pointer-events:none;opacity:0;transition:opacity .4s ease;
  }
  #halo.on{opacity:1;animation:breathe 3.4s ease-in-out infinite;}
  @keyframes breathe{50%{transform:scale(1.16);opacity:.72;}}

  /* The readout and the moments share the centre of the screen, so the
     readout stands down while a moment is showing rather than being
     overprinted by it. */
  #readout{position:absolute;text-align:center;pointer-events:none;transition:opacity .45s ease;}
  body.inmoment #readout{opacity:0;}
  #count{
    font-size:var(--t-count);line-height:.9;color:var(--cream);
    text-shadow:0 0 40px rgba(var(--flame-rgb),.28);
  }
  #ofLabel{margin-top:var(--s3);font-size:var(--t-label);color:var(--ink-4);}
  #hint{margin-top:var(--s1);font-size:var(--t-label);color:var(--ink-4);transition:opacity .6s;}
  #hint.hide{opacity:0;}

  /* ── the footer ──
     Today's count carries the weight; the controls are set below it, quiet
     and evenly spaced, with nothing dividing them. */
  #foot{display:flex;flex-direction:column;align-items:center;gap:var(--s2);z-index:2;width:100%;}
  #todayLine{display:flex;align-items:baseline;gap:var(--s2);}
  #todayLine .lbl{color:var(--ink-4);}
  #todayLine .num{font-size:19px;color:rgba(var(--brass-rgb),.88);transition:color .5s ease;}
  #todayLine.met .num{color:var(--flame);}
  #chips{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap;justify-content:center;}
  .chip{
    font-size:var(--t-label);font-weight:400;line-height:1.75;
    color:var(--ink-4);background:none;border:0;padding:var(--s2) 0;
    font-family:inherit;cursor:pointer;transition:color .18s ease;
  }
  .chip:hover{color:var(--ink-2);}
  .chip:focus-visible{outline:1px solid var(--brass);outline-offset:4px;}
  .chip.live{color:rgba(var(--brass-rgb),.85);}
  .chip:disabled{color:rgba(var(--ash-rgb),.16);cursor:default;}
  .chip:disabled:hover{color:rgba(var(--ash-rgb),.16);}

  /* Low-light practice. A veil rather than a filter on <body>, which would
     become the containing block for every fixed-position moment. */
  #dimVeil{
    position:fixed;inset:0;z-index:7;pointer-events:none;   /* under the journey sheet */
    /* --veil, not --night-deep: in the daylight theme the background is paper,
       and laying paper over paper would dim nothing. */
    background:var(--veil);opacity:0;transition:opacity .5s ease;
  }
  #dimVeil.on{opacity:.66;}

  /* ══ moments ══ */
  #turn,#milestone{
    position:fixed;left:0;right:0;top:50%;transform:translateY(-50%);
    text-align:center;pointer-events:none;opacity:0;z-index:6;padding:0 var(--s4);
  }
  #turn.show,#milestone.show{animation:momentIn 3.4s ease forwards;}
  #turn .devnag,#milestone .devnag{
    font-family:var(--f-display);font-size:32px;color:var(--brass);line-height:1.4;
  }
  #turn .line,#milestone .line{
    margin-top:var(--s2);font-size:var(--t-body);color:var(--ink-1);
  }
  #turn .sub,#milestone .sub{
    margin-top:var(--s2);font-size:var(--t-small);color:var(--ink-3);
    line-height:1.75;max-width:32ch;margin-left:auto;margin-right:auto;
  }
  @keyframes momentIn{
    0%{opacity:0;transform:translateY(-50%) scale(.94);}
    14%{opacity:1;transform:translateY(-50%) scale(1);}
    78%{opacity:1;}
    100%{opacity:0;}
  }
  #bloom{position:fixed;inset:0;z-index:5;pointer-events:none;opacity:0;
    background:radial-gradient(circle at 50% 46%,rgba(var(--flame-rgb),.3) 0%,rgba(var(--flame-rgb),0) 55%);}
  #bloom.show{animation:bloom 2.4s ease forwards;}
  @keyframes bloom{0%{opacity:0;}18%{opacity:1;}100%{opacity:0;}}
  #quarterNote{
    position:fixed;left:0;right:0;top:calc(50% + 116px);text-align:center;
    pointer-events:none;opacity:0;z-index:6;
    font-size:var(--t-label);color:rgba(var(--brass-rgb),.85);
  }
  #quarterNote.show{animation:qn 2.2s ease forwards;}
  @keyframes qn{0%{opacity:0;}14%{opacity:1;}70%{opacity:1;}100%{opacity:0;}}

  /* ══ journey ══ */
  #journey{
    background:var(--night);
    z-index:8;
    padding:0 var(--s4) calc(env(safe-area-inset-bottom) + var(--s6));
    overflow-y:auto;overscroll-behavior:contain;align-items:center;
  }
  #journey .inner{width:100%;max-width:430px;margin:auto 0;padding-left:var(--indent);}
  /* The journey is long, so the way out stays on screen. The top padding
     lives on this header rather than on the scroll container, so it can pin
     at top:0 and still clear the notch. */
  #jHead{
    position:sticky;top:0;z-index:3;
    display:flex;align-items:baseline;justify-content:space-between;
    padding:calc(env(safe-area-inset-top) + var(--s4)) 0 var(--s3);
    margin:0 0 var(--s5) calc(var(--indent) * -1);
    background:var(--night);
  }
  #jHead .t{font-family:var(--f-display);font-size:var(--t-title);color:var(--brass);}

  /* ── the count, which is the reason for the screen ──
     One figure at display size with its unit beside it; the other three are
     annotation and are set as such. Four equal tiles would say they are of
     equal importance, which they are not. */
  #totals{
    display:grid;grid-template-columns:repeat(3,auto);gap:var(--s3) var(--s5);
    margin-bottom:var(--s6);justify-content:start;
  }
  #totals .stat:first-child{grid-column:1 / -1;margin-bottom:var(--s2);}
  #totals .stat:first-child .v{font-size:var(--t-hero);color:var(--cream);}
  #totals .stat:first-child .k{color:var(--ink-3);}
  .stat .v{
    font-family:var(--f-display);font-size:24px;color:var(--ink-2);
    font-variant-numeric:tabular-nums;line-height:1.1;
  }
  .stat .k{margin-top:var(--s1);color:var(--ink-4);}

  .rowhead{
    display:flex;justify-content:space-between;align-items:baseline;
    gap:var(--s3);margin-bottom:var(--s3);
  }
  .rowhead .lbl{position:relative;}
  .rowhead .r{
    font-size:var(--t-small);color:rgba(var(--brass-rgb),.85);
    font-family:var(--f-display);font-variant-numeric:tabular-nums;
  }

  #msTrack{height:1px;background:var(--rule-soft);overflow:hidden;margin-bottom:var(--s2);}
  #msFill{height:100%;background:var(--brass);width:0%;transition:width .6s ease;}
  #msNote{font-size:var(--t-label);line-height:1.7;color:var(--ink-4);margin-bottom:var(--s6);}

  /* ── the strand of days ──
     Not a grid of squares. A day is a bead, the days are on a thread, and a
     day that carried a full mala is brass. This is the same object the rest
     of the app is about, which a calendar grid would not be. */
  #calendar{margin-bottom:var(--s2);}
  /* Twenty-one to a row — three weeks, which is also an anushthana length,
     and 126 divides into six of them exactly. A grid rather than a flex row
     so the beads shrink to the width available instead of overflowing it. */
  .strand{
    display:grid;grid-template-columns:repeat(21,1fr);gap:5px;
    align-items:center;position:relative;padding:5px 0;
  }
  .strand::before{
    content:'';position:absolute;left:2px;right:2px;top:50%;height:1px;
    background:var(--rule-soft);
  }
  .strand i{
    position:relative;width:100%;aspect-ratio:1;border-radius:50%;
    background:rgba(var(--tint-rgb),.07);
  }
  .strand i.pad{background:none;}
  .strand i[data-level="1"]{background:rgba(var(--warm1-rgb),.62);}
  .strand i[data-level="2"]{background:rgba(var(--warm2-rgb),.82);}
  .strand i[data-level="3"]{background:rgba(var(--brass-rgb),.9);}
  .strand i[data-level="4"]{background:var(--flame);}
  .strand i.now{box-shadow:0 0 0 2px rgba(var(--cream-rgb),.45);}
  #calKey{display:flex;align-items:center;gap:5px;margin-bottom:var(--s6);}
  #calKey i{width:9px;height:9px;border-radius:50%;background:rgba(var(--tint-rgb),.07);}
  #calKey i[data-level="1"]{background:rgba(var(--warm1-rgb),.62);}
  #calKey i[data-level="2"]{background:rgba(var(--warm2-rgb),.82);}
  #calKey i[data-level="3"]{background:rgba(var(--brass-rgb),.9);}
  #calKey i[data-level="4"]{background:var(--flame);}
  #calKey .lbl{margin:0 var(--s1);color:var(--ink-4);}

  /* ── the running vow ── */
  #vowBox{margin-bottom:var(--s6);}
  .vowmantra{font-size:18px;color:var(--ink-1);margin-bottom:var(--s3);line-height:1.6;}
  #vowTrack{height:1px;background:var(--rule-soft);overflow:hidden;}
  #vowFill{height:100%;background:var(--brass);transition:width .6s ease;}
  .vownote{margin-top:var(--s3);font-size:var(--t-label);line-height:1.85;color:var(--ink-4);}
  .arpan{margin-top:var(--s3);font-size:var(--t-small);color:var(--ink-2);}
  .arpan .dev{color:var(--brass);margin-right:var(--s1);}
  .empty{font-size:var(--t-small);line-height:1.85;color:var(--ink-4);max-width:36ch;}

  /* ── the mala in hand ── */
  #mats{display:flex;flex-direction:column;margin-bottom:var(--s6);}
  .mat{display:flex;align-items:center;gap:var(--s3);padding:var(--s2) 0;}
  .mat .sw{width:17px;height:17px;border-radius:50%;flex:none;}
  .mat .nm{font-family:var(--f-display);font-size:16px;color:var(--ink-2);}
  .mat .rm{font-size:var(--t-label);color:var(--ink-4);}
  .mat .st{margin-left:auto;font-size:var(--t-label);color:var(--ink-4);}
  .mat.locked .nm,.mat.locked .rm{color:var(--ink-4);}
  .mat.locked .sw{opacity:.22;}
  .mat.active .nm{color:var(--cream);}
  .mat.active .st{color:var(--brass);}
  .mat.unlocked{cursor:pointer;}
  .mat.unlocked:hover .st{color:var(--ink-2);}

  /* ── rang-roop ── */
  #themes{display:flex;flex-direction:column;margin-bottom:var(--s3);}
  .theme{
    display:flex;align-items:center;gap:var(--s3);width:100%;text-align:left;
    background:none;border:0;padding:var(--s2) 0;
    color:inherit;font-family:inherit;cursor:pointer;
  }
  .theme:focus-visible{outline:1px solid var(--brass);outline-offset:3px;}
  .theme .swatch{display:flex;flex:none;overflow:hidden;}
  .theme .swatch i{width:13px;height:26px;display:block;}
  .theme .tl{display:flex;flex-direction:column;gap:2px;min-width:0;}
  .theme .nm{font-size:16px;color:var(--ink-2);transition:color .18s ease;}
  .theme .rm{font-size:var(--t-label);color:var(--ink-4);}
  .theme.sel .nm{color:var(--cream);}
  .theme.sel .swatch{box-shadow:0 0 0 1px var(--brass);}

  /* ── bell settings ── */
  #bells{display:flex;flex-direction:column;margin-bottom:var(--s3);}
  .tog{
    display:flex;align-items:center;gap:var(--s3);width:100%;text-align:left;
    line-height:1.7;background:none;border:0;padding:var(--s2) 0;
    color:inherit;font-family:inherit;cursor:pointer;
  }
  .tog:focus-visible{outline:1px solid var(--brass);outline-offset:3px;}
  .tog .tl{display:flex;flex-direction:column;gap:2px;min-width:0;}
  .tog .nm{font-size:var(--t-body);color:var(--ink-4);transition:color .18s ease;}
  .tog .rm{font-size:var(--t-label);color:var(--ink-4);}
  .tog .state{
    margin-left:auto;flex:none;font-size:var(--t-label);
    color:var(--ink-4);transition:color .18s ease;
  }
  .tog.on .nm{color:var(--ink-1);}
  .tog.on .state{color:var(--brass);}

  /* ── fulfilled vows ── */
  #patras{display:flex;flex-direction:column;gap:var(--s4);margin-bottom:var(--s6);}
  .patra{display:flex;align-items:baseline;gap:var(--s3);}
  .patra .pd{display:flex;flex-direction:column;gap:2px;min-width:0;}
  .patra .nm{font-family:var(--f-display);font-size:16px;color:var(--ink-1);}
  .patra .rm{font-size:var(--t-label);color:var(--ink-4);}
  .patra .rm.ar{color:rgba(var(--brass-rgb),.66);}
  .patra .pn{margin-left:auto;font-size:17px;color:rgba(var(--brass-rgb),.85);flex:none;}
  .patra .mini{flex:none;}

  #backupNote{font-size:var(--t-label);line-height:1.85;color:var(--ink-4);max-width:38ch;}
  #backupMsg{font-size:var(--t-label);line-height:1.75;color:rgba(var(--brass-rgb),.8);min-height:1.2em;}
  #backupMsg.warn{color:rgba(var(--flame-rgb),.85);}

  /* ══ panels: the certificate, the question, the failure ══ */
  #purti,#ask,#broke{
    position:fixed;inset:0;z-index:10;
    display:flex;align-items:flex-start;justify-content:center;
    padding:var(--s4);
    overflow-y:auto;overscroll-behavior:contain;
    background:rgba(var(--deep-rgb),.9);
  }
  #broke{z-index:12;}
  /* the question sits above the certificate, never behind it */
  #ask{z-index:11;}
  #ask .sub{white-space:pre-line;}
  #purti[hidden],#ask[hidden],#broke[hidden]{display:none;}
  #purti .card,#ask .card,#broke .card{
    width:100%;max-width:352px;margin:auto 0;
    border-left:2px solid var(--brass);
    background:linear-gradient(180deg,rgb(var(--card-rgb)),rgb(var(--card2-rgb)));
    padding:var(--s5) var(--s4) var(--s4);
    animation:cardIn .6s cubic-bezier(.22,.85,.3,1) both;
  }
  @keyframes cardIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
  #purti .devnag,#ask .devnag,#broke .devnag{
    font-family:var(--f-display);font-size:29px;color:var(--brass);line-height:1.35;
  }
  #purti .line,#ask .line,#broke .line{margin-top:var(--s2);font-size:var(--t-body);color:var(--ink-1);}
  #purti .sub,#ask .sub,#broke .sub{
    margin-top:var(--s3);font-size:var(--t-small);line-height:1.85;color:var(--ink-3);
  }
  #purti .btnrow.center,#ask .btnrow.center,#broke .btnrow.center{margin-top:var(--s5);}
  #purti .hintline{min-height:1.2em;}

  /* ══ quality floor ══ */
  @media (prefers-reduced-motion:reduce){
    #ring{transition:none;}
    #halo.on{animation:none;}
    #bloom{display:none;}
    #turn.show,#milestone.show{animation:momentIn 3.4s steps(1,end) forwards;}
    #purti .card,#ask .card,#broke .card{animation:none;}
  }
  @media (max-height:680px){
    #mantra{font-size:19px;line-height:1.7;}
    #malaBox{width:min(64vw,54vh,258px);}
    #quarterNote{top:calc(50% + 94px);}
    #practice{padding-top:calc(env(safe-area-inset-top) + var(--s3));}
    #chips{gap:var(--s3);}
    .chip{padding:var(--s1) 0;}
  }
  @media (max-width:380px){
    :root{--indent:24px;--s6:56px;--s5:36px;}
    .strand{gap:3px;}
    #calKey i{width:8px;height:8px;}
  }