/* ==========================================================================
   Resonate (9i) — the rebrand, as a stylesheet.
   Source of truth: the "Resonate — Rebrand Mockup" canvas (Porcelain / Midnight /
   Resonance / Echo / Apricot / Haze; Figtree + Instrument Serif; the in-tune ring).

   Loaded by public/index.html and public/login.html AFTER their inline <style>, so on
   equal specificity this file wins. Rules that have to beat the old
   `[data-theme="light"] .x` block are written as `html[data-theme] .x`, which is one
   step stronger and applies to both themes.

   The variable names (--void, --bronze, --teal ...) are the ones the app already uses;
   only their values change. Roles after the rebrand:
     --void / --surface   Porcelain ground / white cards         (dark: Midnight)
     --glow               Midnight text                          (dark: Porcelain)
     --dim / --faint      Haze, secondary text
     --bronze*            Resonance: actions, who to reach, what is active
     --teal*              Apricot: the human moment, birthdays, you
   Dark mode is ours, not the mockup's: Midnight ground, the same roles, lighter indigo.
   ========================================================================== */

:root{
  --void:#131126; --surface:#1B1830; --surface2:#242142; --surface3:#2E2A55;
  --ov:244,241,250; --line:rgba(var(--ov),.12); --line2:rgba(var(--ov),.22); --voidRGB:19,17,38;
  --tabbar:#1B1830; --shadow:rgba(0,0,0,.5); --scrim:rgba(8,6,20,.62);
  --glow:#F4F1FA; --dim:#A8A5C4; --faint:#9A97B8;
  --bronze:#7C6CFF; --bronzeRGB:124,108,255; --bronzeText:#B4ABFF; --onBronze:#0F0D20; --bronzeDim:rgba(124,108,255,.18);
  --teal:#FFB98F; --tealRGB:255,185,143; --tealText:#FFB98F; --tealDim:rgba(255,185,143,.14);
  --social:#DCD6FB; --pro:#FFD9C0; --outer:#0A0916;
  --echo:rgba(124,108,255,.18); --echoDeep:rgba(124,108,255,.30); --track:rgba(var(--ov),.16);
  --raise:0 1px 2px rgba(0,0,0,.3),0 12px 32px rgba(0,0,0,.28);
  --f:'Figtree','Avenir Next','Helvetica Neue',Arial,sans-serif;
  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  color-scheme:dark;
}
:root[data-theme="light"]{
  --void:#F9F7F3; --surface:#FFFFFF; --surface2:#FFFFFF; --surface3:#F3F1FC;
  --ov:27,24,48; --line:rgba(27,24,48,.09); --line2:rgba(27,24,48,.16); --voidRGB:249,247,243;
  --tabbar:#FFFFFF; --shadow:rgba(27,24,48,.12); --scrim:rgba(27,24,48,.32);
  --glow:#1B1830; --dim:#6E6B88; --faint:#6E6B88;
  --bronze:#5140E8; --bronzeRGB:81,64,232; --bronzeText:#3B2CC4; --onBronze:#FFFFFF; --bronzeDim:#ECE9FD;
  --teal:#FFB98F; --tealRGB:255,185,143; --tealText:#8A4B1F; --tealDim:#FFE3D2;
  --social:#DCD6FB; --pro:#FFD9C0; --outer:#EDE9E2;
  --echo:#ECE9FD; --echoDeep:#D9D4FB; --track:#E6E2EE;
  --raise:0 1px 2px rgba(27,24,48,.05),0 12px 32px rgba(81,64,232,.09);
}

html[data-theme] body{font-family:var(--f)}
html[data-theme] svg text{font-family:'Figtree','Avenir Next',Helvetica,Arial,sans-serif}

/* ---- type: Instrument Serif for the moments, Figtree for everything you use ---- */
html[data-theme] .h1{font-family:var(--serif);font-weight:400;font-size:36px;letter-spacing:-.005em;line-height:1.05}
html[data-theme] .h2{font-family:var(--serif);font-weight:400;font-size:28px;letter-spacing:0;line-height:1.1}
html[data-theme] .sechead h2{font-family:var(--f);font-size:16px;font-weight:600;letter-spacing:0}
html[data-theme] .label{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
html[data-theme] .rz-eyebrow{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
html[data-theme] .rz-greeting{font-family:var(--serif);font-weight:400;font-size:36px;line-height:1.05;margin-top:2px}
html[data-theme] .rz-wordmark{font-size:24px;font-weight:600;letter-spacing:-.03em;line-height:1}
html[data-theme] .rz-hero{font-family:var(--serif);font-weight:400;font-size:50px;line-height:1;letter-spacing:-.005em}
html[data-theme] .rz-hero em{font-style:italic;color:var(--bronzeText)}
html[data-theme] .rz-quote{font-family:var(--serif);font-size:25px;line-height:1.12}

/* ---- cards ---- */
html[data-theme] .card,html[data-theme] .stats,html[data-theme] .who,html[data-theme] .opt,html[data-theme] .pcard{border-radius:28px;background:var(--surface);box-shadow:var(--raise),inset 0 0 0 1px var(--line)}
html[data-theme] .stats,html[data-theme] .who,html[data-theme] .opt{border-radius:22px}
html[data-theme] .who.warn{box-shadow:var(--raise),inset 0 0 0 2px rgba(var(--tealRGB),.9)}
html[data-theme] .pcard{box-shadow:var(--raise),inset 0 0 0 1.5px rgba(var(--bronzeRGB),.3)}
html[data-theme] .empty{border-color:var(--echoDeep);background:transparent}

/* ---- buttons: Resonance pills; ghost = white with an Echo border ---- */
html[data-theme] .pill{min-height:48px;font-weight:600}
html[data-theme] .pill.primary{background:var(--bronze);color:var(--onBronze);box-shadow:0 10px 24px rgba(var(--bronzeRGB),.28)}
html[data-theme] .pill.light{background:var(--glow);color:var(--void);box-shadow:none}
html[data-theme] .pill.ghost{background:var(--surface);color:var(--bronzeText);box-shadow:inset 0 0 0 1.5px var(--echoDeep)}
html[data-theme] .pill.lg{min-height:56px;font-size:17px}
html[data-theme] .cbtn,html[data-theme] .cbtn.call,html[data-theme] .cbtn.fill{background:var(--surface);color:var(--glow);box-shadow:inset 0 0 0 1px var(--line2)}
html[data-theme] .cbtn.call{color:var(--bronzeText);box-shadow:inset 0 0 0 1.5px var(--echoDeep)}
html[data-theme] .cbtn.addbtn{background:var(--bronze);color:var(--onBronze);box-shadow:0 6px 16px rgba(var(--bronzeRGB),.3)}
html[data-theme] .link{color:var(--bronzeText);font-weight:600}
html[data-theme] button:focus-visible,html[data-theme] [tabindex]:focus-visible,html[data-theme] input:focus-visible,html[data-theme] textarea:focus-visible,html[data-theme] select:focus-visible{outline-color:var(--bronze)}

/* ---- chips, tags, segmented controls ---- */
html[data-theme] .chip{background:var(--surface);color:var(--glow);box-shadow:inset 0 0 0 1px var(--line2);font-weight:600;font-size:13px}
html[data-theme] .chip.on{background:var(--echo);color:var(--bronzeText);box-shadow:none}
html[data-theme] .chip.sel{background:var(--glow);color:var(--void);box-shadow:none}
html[data-theme] .chip.bronze{background:var(--echo);color:var(--bronzeText)}
html[data-theme] .chip.teal{background:var(--tealDim);color:var(--glow)}
html[data-theme] .chip.hint:not(.sel){background:var(--surface);outline-color:var(--bronze)}
html[data-theme] .tag{background:var(--echo);color:var(--bronzeText);font-weight:600}
html[data-theme] .tag.teal{background:var(--tealDim);color:var(--glow)}
html[data-theme] .tag.plain{background:var(--surface3);color:var(--dim)}
html[data-theme] .seg{background:var(--surface3);box-shadow:none;border-radius:16px}
html[data-theme] .seg button{border-radius:12px;color:var(--dim);font-weight:600;font-size:13px}
html[data-theme] .seg button[aria-pressed="true"]{background:var(--surface);color:var(--glow);box-shadow:0 1px 3px rgba(27,24,48,.14)}
html[data-theme="dark"] .seg button[aria-pressed="true"]{background:var(--surface2)}
html[data-theme="light"] .seg{background:#F0EDF8}
html[data-theme="light"] .seg button{color:#5F5C7A}
html[data-theme="light"] .seg button[aria-pressed="true"]{color:var(--glow)}

/* ---- selection, switches, meters: Resonance is "on" ---- */
html[data-theme] .opt[aria-pressed="true"]{background:var(--echo);box-shadow:inset 0 0 0 2px var(--bronze)}
html[data-theme] .radio{box-shadow:inset 0 0 0 2px var(--dim)}
html[data-theme] .opt[aria-pressed="true"] .radio{box-shadow:inset 0 0 0 2px var(--bronze)}
html[data-theme] .opt[aria-pressed="true"] .radio::after{background:var(--bronze)}
html[data-theme] .opt[aria-pressed="true"] .check,html[data-theme] .chk[aria-pressed="true"] .check{background:var(--bronze);color:var(--onBronze)}
html[data-theme] .switch{background:var(--track);box-shadow:none}
html[data-theme] .switch::after{background:#fff;box-shadow:0 1px 3px rgba(27,24,48,.25)}
html[data-theme] .switch[aria-checked="true"]{background:var(--bronze)}
html[data-theme] .switch[aria-checked="true"]::after{background:#fff;left:25px}
html[data-theme] .meter{background:var(--echoDeep)}
html[data-theme] .meter i{background:var(--bronze)}
html[data-theme] .obar i{background:var(--echoDeep)}
html[data-theme] .obar i.on{background:var(--bronze)}
html[data-theme] .dots i{background:var(--echoDeep)}
html[data-theme] .dots i.on{background:var(--bronze)}
html[data-theme] .srcicon{background:var(--surface3);color:var(--glow)}
html[data-theme] .srcicon.on{background:var(--echo);color:var(--bronzeText)}
html[data-theme] .bubble{background:var(--surface3);box-shadow:none}
html[data-theme] .caret::after{background:var(--bronze)}

/* ---- fields, sheets, search ---- */
html[data-theme] .field{background:var(--surface);box-shadow:inset 0 0 0 1px var(--line2);border-radius:18px}
html[data-theme] .searchbar{background:var(--surface);box-shadow:inset 0 0 0 1px var(--line2)}
html[data-theme] #sheet{background:var(--surface);border-radius:28px 28px 0 0}
html[data-theme] .grip{background:var(--echoDeep)}
html[data-theme] #toast{background:var(--glow);color:var(--void)}
html[data-theme] .webbar{background:var(--surface)}
html[data-theme] .webbar .url{background:var(--surface3);box-shadow:none}
html[data-theme] .listrow,html[data-theme] .kv,html[data-theme] .fact{border-top-color:var(--line)}

/* ---- the floating tab bar: white pill, Resonance Log button, an active dot ---- */
html[data-theme] #tabs{height:68px;bottom:16px;left:16px;right:16px;padding:0 6px;background:var(--tabbar);box-shadow:inset 0 0 0 1px var(--line2),0 8px 28px var(--shadow)}
html[data-theme] #tabs button{color:var(--dim);gap:3px;font-size:11px;font-weight:600}
html[data-theme] #tabs button[aria-selected="true"]{color:var(--glow)}
html[data-theme] #tabs button i{display:block;width:4px;height:4px;border-radius:50%;background:transparent}
html[data-theme] #tabs button[aria-selected="true"] i{background:var(--bronze)}
html[data-theme] #tabs button.raised .bub{width:56px;height:56px;margin-top:-30px;background:var(--bronze);color:var(--onBronze);box-shadow:0 8px 20px rgba(var(--bronzeRGB),.35),0 0 0 4px var(--tabbar)}
html[data-theme] #tabs button.raised[aria-selected="true"] .bub{background:var(--bronze)}
html[data-theme] #tabs button.raised .tl{margin-top:2px}
html[data-theme] .fade{background:linear-gradient(to top,var(--void) 45%,rgba(var(--voidRGB),0))}

/* ---- avatars and the in-tune ring ---- */
html[data-theme] .av{font-weight:600}
.rzr{position:relative;flex:0 0 auto;display:block}
.rzr>svg{position:absolute;inset:0;pointer-events:none}
.rzr .track{stroke:var(--track)}
.rzr .arc{stroke:var(--bronze)}

/* ---- rings behind the hero moments (Welcome, Today's card, You, a person) ---- */
.rz-rings{position:absolute;pointer-events:none;overflow:visible}
.rz-rings circle{fill:none;stroke:var(--bronze);stroke-width:1.25}
html[data-theme] .card[data-sig-surface="signal"]{position:relative;overflow:hidden;padding:20px}
html[data-theme] .card[data-sig-surface="signal"]::before{content:"";position:absolute;right:-70px;top:-70px;width:220px;height:220px;pointer-events:none;background:radial-gradient(circle,transparent 39px,rgba(var(--bronzeRGB),.16) 40px,transparent 41px,transparent 69px,rgba(var(--bronzeRGB),.11) 70px,transparent 71px,transparent 99px,rgba(var(--bronzeRGB),.07) 100px,transparent 101px)}
html[data-theme] .card[data-sig-surface="signal"]>*{position:relative}
html[data-theme] .card[data-sig-surface="signal"]>span[style*="absolute"]{position:absolute}

/* ---- Today ---- */
.rz-top{display:flex;align-items:center;justify-content:space-between;min-height:44px}
.rz-me{width:40px;height:40px;border-radius:50%;background:var(--teal);color:#1B1830;font-size:14px;font-weight:600;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.rz-cool{display:flex;align-items:center;gap:12px;padding:8px 4px;border-bottom:1px solid var(--line);width:100%;text-align:left}
.rz-cool:last-child{border-bottom:0}
.rz-cool .nm{font-size:15px;font-weight:600}
.rz-cool .meta{font-size:13px;color:var(--dim)}

/* ---- Welcome ---- */
.rz-welcome{position:relative;min-height:560px}
.rz-welcome .rz-rings{left:50%;top:0;transform:translateX(-50%)}
html[data-theme] .ob-foot .pill.primary{min-height:56px;font-size:17px}

/* ---- Person ---- */
.rz-phead{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;margin-top:8px}
.rz-phead h1{font-family:var(--serif);font-weight:400;font-size:34px;line-height:1}
.rz-phead::before{content:"";position:absolute;left:50%;top:-166px;width:312px;height:312px;transform:translateX(-50%);z-index:-1;pointer-events:none;background:radial-gradient(circle,transparent 73px,rgba(var(--bronzeRGB),.30) 74px,transparent 75px,transparent 111px,rgba(var(--bronzeRGB),.20) 112px,transparent 113px,transparent 154px,rgba(var(--bronzeRGB),.12) 155px,transparent 156px)}

/* ---- Log: the voice bars are Resonance ---- */
html[data-theme] .bars rect{fill:var(--bronze)}

@media (prefers-reduced-motion:reduce){.rzr *{transition:none!important}}

/* =====================================================================================
   9j (29 Sept): polish after the redesign. Seven fixes; the JS is src-fragments/polish-9j.js.
   ===================================================================================== */

/* 1. Today: the wordmark beside the mark */
.rz-wm{font-size:22px;font-weight:600;letter-spacing:-.03em;line-height:1;color:var(--glow);white-space:nowrap}

/* 2. The rings around a card's ••• button are drawn from the button's own wrapper, so their
   centre IS the button's centre (the old rings were a card-corner gradient, 4-6px adrift).
   The card's old corner rings are switched off. */
html[data-theme] .card[data-sig-surface="signal"]::before{content:none}
.rz-mwrap{display:flex;align-items:center;justify-content:center;width:40px;height:40px}
.rz-mwrap::before{content:"";position:absolute;left:50%;top:50%;width:160px;height:160px;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,transparent 29px,rgba(var(--bronzeRGB),.24) 30px,transparent 31.5px,transparent 45px,rgba(var(--bronzeRGB),.15) 46px,transparent 47.5px,transparent 61px,rgba(var(--bronzeRGB),.08) 62px,transparent 63.5px)}
html[data-theme] .sig-more{position:relative;display:flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border-radius:50%;color:var(--dim);line-height:1}
html[data-theme] .sig-more svg{display:block}

/* 3. Avatars: centred with flex, whatever the size or the initials. The in-tune ring's inner
   avatar is centred by flex instead of pixel offsets; long initials clip instead of pushing. */
html[data-theme] .av{display:flex;align-items:center;justify-content:center;text-align:center;line-height:1;overflow:hidden;white-space:nowrap;padding:0;min-width:0}
html[data-theme] .av>img{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%}
.rzr{display:flex;align-items:center;justify-content:center}
.rzr>span[style*="absolute"]{position:absolute!important;inset:0!important;left:0!important;top:0!important;display:flex!important;align-items:center;justify-content:center}
.rz-phead>.rzr,.rz-phead>.av,.rz-phead>.rz-avw{margin-inline:auto}
/* the rings behind a person's head were centred 56px above the avatar; now on it (the avatar is
   the first 92px of the head, so its centre is 46px down) */
.rz-phead::before{top:-110px}

/* 5. Keep close, visible: a badge on the avatar wherever people are listed, a filled chip on
   the profile, and the toggle says On / Off. */
.rz-avw{position:relative;display:block;flex:0 0 auto}
.rz-closebadge{position:absolute;right:-3px;bottom:-3px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--bronze);color:var(--onBronze,#fff);box-shadow:0 0 0 2px var(--surface,var(--void))}
.rz-closechip{display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:999px;background:var(--bronze);color:var(--onBronze,#fff);font-size:12.5px;font-weight:600;line-height:1.2}
.rz-swstate{min-width:26px;text-align:right;font-size:13px;font-weight:600;color:var(--dim)}
.rz-swstate.on{color:var(--bronzeText)}

/* ---- 9k: learn queue ---- */
.rz-lqchip[aria-pressed="true"]{background:var(--bronzeDim);color:var(--bronzeText);border-color:var(--bronzeText)}
[data-learncard] .field{width:100%}

/* 9l. The close star: an inline svg sits on the text baseline and drops below its box; make it a block so it centres in the badge and the chip at every size. */
.rz-closebadge>span{display:flex!important;align-items:center;justify-content:center;flex:none}
.rz-closebadge svg,.rz-closechip svg{display:block;flex:none}

/* 9m. Community Orbits: the overlay (above #onboard 60, below #invite 62 and the sheet 63/64), the
   heat grid (days down, 8am to 11pm across; darker = more of the club free) and the small pieces. */
#community{position:absolute;inset:0;z-index:61;background:var(--void);overflow-y:auto;overscroll-behavior:contain}
#community[hidden]{display:none}
.cm{padding:14px 20px 56px;min-height:100%}
.cm-top{display:flex;align-items:center;gap:12px;margin-bottom:4px}
.cm-title{font-size:26px;font-weight:600;letter-spacing:-.03em;line-height:1.1;min-width:0}
.cm-hm{display:grid;grid-template-columns:34px repeat(var(--n,7),minmax(0,1fr));gap:2px;align-items:center;margin-top:2px}
.cm-hm .ct{text-align:right;padding-right:4px;font-size:10px}
.cm-hm .cd{display:flex;flex-direction:column;align-items:center;gap:1px;text-align:center}
.cm-hm .cd b{font-weight:600;font-size:10.5px}
.cm-hm .cd i{font-style:normal;font-size:10px;color:var(--faint)}
.cm-hm-h{margin-bottom:3px}
.cm-hm .cl{font-size:10.5px;line-height:1;color:var(--dim);white-space:nowrap}
.cm-hm .cell{display:block;height:17px;min-height:0;padding:0;border-radius:3px;background:color-mix(in srgb,var(--bronze) calc(var(--a,0) * 100%),var(--surface2));box-shadow:inset 0 0 0 1px var(--line)}
.cm-hm .cell.off{background:transparent;box-shadow:none}
.cm-hm .cell.sel{outline:2px solid var(--glow);outline-offset:1px;position:relative;z-index:1}
a.pill{text-decoration:none}

/* 9p. Event room: the overlay sits where the Community Orbits one does (above #onboard 60, below #invite 62 and the sheet 63/64). */
#eroom{position:absolute;inset:0;z-index:61;background:var(--void);overflow-y:auto;overscroll-behavior:contain}
#eroom[hidden]{display:none}
#eroom .listrow>button:first-child{background:none;border:0;padding:0;color:inherit;font:inherit;cursor:pointer}
.erqr svg{display:block;width:220px;height:220px}