/* huddlie mockup: design system
   iOS patterns lifted from huddlie-player-screen.html + brand.md. Colours rebranded
   2026-09-29 from the huddlie mark: two people (warm + blue), speech bubbles (violet),
   the hug (magenta accent), the logotype (plum). */

:root{
  /* Rebrand 2026-09-29: every colour comes from the huddlie mark (brand/huddlie-mark.svg).
     Old token NAMES are kept so every screen follows; their values are now the brand's.
     gold = the accent (magenta, the hugging arm) · ice = the second colour (blue, person B)
     lead = violet (the speech bubbles) · cream = lilac-white paper */
  --plum:#3B2D5C; --night:#2A1F45;                          /* logotype + dark brand bar */
  --hug:#E03599; --hug-d:#B8287A; --hug-soft:#FBE4F1;        /* the one accent */
  --sky:#2D7FF9; --sky-d:#1C47BC; --sky-soft:#E6EEFD;        /* second colour */
  --violet:#8B5CF6; --lilac:#CFA5FF; --lilac-soft:#F1E9FF;   /* speech bubbles: tips, notes */
  --coral:#F2562B;                                           /* warm, rationed celebration */
  --cream:#F9F6FA; --ink:#2B2438; --gold:var(--hug); --gold-d:var(--hug-d); --ice:#5F8DD8; --ice-d:var(--sky-d); --lead:var(--violet);
  --ink-60:rgba(43,36,56,.62); --ink-40:rgba(43,36,56,.42); --ink-12:rgba(43,36,56,.12); --ink-08:rgba(43,36,56,.07);
  --wm:var(--plum);                  /* logotype: deep muted purple (Akin 2026-09-29) */
  --card:#FFFFFF; --gold-soft:var(--hug-soft); --ice-soft:var(--sky-soft);
  --btn-ink:#FFFFFF;                 /* text on accent fills */
  --grouped-bg:#F0EBF4;              /* iOS inset-grouped list background, lilac */
  --ok:#2E8A6A; --warn:#D2432B;
  --ease:cubic-bezier(.16,1,.3,1);
  --f-team:'Instrument Sans','Inter',system-ui,sans-serif;   /* team names, event titles, scores: narrow, classy sans (Akin 2026-09-29) */
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:'Inter',system-ui,sans-serif;color:var(--ink);
  background:#E9E3EE;                 /* desk behind the phone */
  -webkit-font-smoothing:antialiased;
  display:flex;align-items:center;justify-content:center;
  min-height:100vh;
}

/* ---- phone frame ---- */
.phone{
  width:390px;height:820px;background:var(--cream);
  border-radius:46px;border:11px solid #1E1830;
  box-shadow:0 22px 60px rgba(0,0,0,.28);
  overflow:hidden;position:relative;
}
.screen{position:absolute;inset:0;border-radius:35px;overflow:hidden;display:flex;flex-direction:column}
.statusbar{height:44px;flex:none;display:flex;align-items:flex-end;justify-content:space-between;
  padding:0 26px 8px;font-size:13px;font-weight:600;color:var(--ink);z-index:5}
.statusbar .sig{letter-spacing:1px}

/* the scrolling body of a screen */
.body{flex:1;overflow-y:auto;position:relative}
.body::-webkit-scrollbar{display:none}
.pad{padding:0 20px}
.pad-b{padding-bottom:28px}

/* ---- nav bar ---- */
.navbar{flex:none;display:grid;grid-template-columns:64px 1fr 64px;align-items:center;
  min-height:44px;padding:4px 10px;border-bottom:1px solid var(--ink-08);background:var(--cream);z-index:4}
.navbar .nb-title{text-align:center;font-family:'Fraunces',serif;font-weight:600;font-size:17px}
.navbar .nb-left,.navbar .nb-right{display:flex;align-items:center;gap:4px;font-size:15px;color:var(--gold-d);font-weight:600;cursor:pointer}
.navbar .nb-right{justify-content:flex-end}
.navbar .nb-left.chev::before{content:'';width:10px;height:10px;border-left:2.4px solid var(--gold-d);
  border-bottom:2.4px solid var(--gold-d);transform:rotate(45deg);margin-right:2px}
.navbar.plain{border-bottom:none;background:transparent}

/* large title (iOS) */
.large-title{font-family:'Fraunces',serif;font-weight:600;font-size:30px;letter-spacing:-.5px;color:var(--plum);
  padding:6px 20px 2px}
.subtitle{color:var(--ink-60);font-size:13.5px;padding:0 20px;line-height:1.5}

/* section eyebrow */
h3.sec{font-size:11px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;color:var(--ink-40);margin:26px 2px 12px}
.sechead{display:flex;align-items:baseline;justify-content:space-between;margin:26px 2px 12px}
.sechead h3.sec{margin:0}
.addlink{font-size:13px;font-weight:700;color:var(--gold-d);background:none;border:none;cursor:pointer}
.rule{height:1px;background:var(--ink-08);margin:30px 0 0}

/* ---- tab bar ---- */
.tabbar{flex:none;display:flex;border-top:1px solid var(--ink-12);background:rgba(249,246,250,.94);
  backdrop-filter:blur(8px);padding:8px 0 14px}
.tabbar .tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  font-size:10px;font-weight:600;color:var(--ink-40);cursor:pointer;background:none;border:none}
.tabbar .tab .ic{width:24px;height:24px;display:flex;align-items:center;justify-content:center}
.tabbar .tab.on{color:var(--gold-d)}
.tabbar .tab svg{width:23px;height:23px}

/* ---- buttons ---- */
.btn{width:100%;border:none;border-radius:13px;padding:14px;font-family:'Inter';font-weight:600;
  font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px}
.btn-primary{background:linear-gradient(115deg,#F2562B 0%,#E03599 52%,#A24FE0 100%);color:#fff;font-weight:700;
  box-shadow:0 8px 18px -8px rgba(224,53,153,.55)}
.btn-primary:active{filter:brightness(.93);transform:scale(.985)}
.btn:focus-visible,button:focus-visible,[data-nav]:focus-visible{outline:2.5px solid var(--hug);outline-offset:2px}
::selection{background:var(--lilac);color:var(--night)}
.btn-secondary{background:var(--card);color:var(--ink);border:1px solid var(--ink-12)}
.btn-ghost{background:transparent;color:var(--gold-d);font-weight:700;border:none;font-family:inherit;cursor:pointer}   /* also used without .btn: never show the browser's button frame */
.btn .plus{font-size:18px;line-height:1;font-weight:600}
.btn[disabled]{opacity:.4;pointer-events:none}
.btn-danger{background:transparent;color:var(--warn);border:1px solid rgba(192,83,42,.3)}
.btn-row{padding:16px 20px 6px;display:flex;flex-direction:column;gap:10px}

/* ---- inset-grouped lists (iOS) ---- */
.group{background:var(--card);border-radius:14px;border:1px solid var(--ink-12);
  box-shadow:0 2px 9px rgba(42,31,69,.04);margin:8px 20px;overflow:hidden}
.group-h{font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--ink-40);
  padding:20px 22px 7px}
.group-foot{font-size:11.5px;color:var(--ink-40);padding:8px 22px 4px;line-height:1.45}
.row{display:flex;align-items:center;gap:12px;padding:13px 15px;border-bottom:1px solid var(--ink-08);
  min-height:50px;cursor:pointer;background:none;border-left:none;border-right:none;border-top:none;width:100%;text-align:left;font-family:inherit}
.row:last-child{border-bottom:none}
.row .r-main{flex:1;min-width:0;display:flex;flex-direction:column}
.row .r-title{font-size:15px;color:var(--ink);font-weight:500}
.row .r-sub{font-size:12.5px;color:var(--ink-60);margin-top:2px}
.row .r-val{font-size:14px;color:var(--ink-60);font-weight:500}
.row .r-chev{width:9px;height:9px;border-right:2px solid var(--ink-40);border-top:2px solid var(--ink-40);
  transform:rotate(45deg);flex:none;margin-left:2px}
.row .r-badge{background:var(--gold-soft);color:var(--gold-d);font-size:11px;font-weight:700;
  padding:2px 8px;border-radius:9px}
.row.static{cursor:default}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--ice-soft);color:var(--ice-d);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex:none}
.avatar.gold{background:var(--gold-soft);color:var(--gold-d)}

/* ---- forms ---- */
.form{padding:6px 20px}
.field-label{font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--ink-40);margin:18px 2px 7px}
.input{width:100%;background:var(--card);border:1px solid var(--ink-12);border-radius:12px;
  padding:13px 14px;font-family:'Inter';font-size:15px;color:var(--ink)}
.input::placeholder{color:var(--ink-40)}
.input:focus{outline:none;border-color:var(--gold)}
textarea.input{min-height:80px;resize:none;line-height:1.5}

/* segmented control */
.segmented{display:flex;background:var(--grouped-bg);border-radius:11px;padding:3px;margin:8px 20px}
.segmented .seg{flex:1;text-align:center;padding:8px;font-size:13px;font-weight:600;color:var(--ink-60);
  border-radius:8px;cursor:pointer;background:none;border:none}
.segmented .seg.on{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(42,31,69,.12)}

/* toggle */
.toggle{width:50px;height:30px;border-radius:16px;background:var(--ink-12);position:relative;
  cursor:pointer;flex:none;transition:background .15s;border:none}
.toggle::after{content:'';position:absolute;top:2px;left:2px;width:26px;height:26px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .15s}
.toggle.on{background:var(--gold)}
.toggle.on::after{transform:translateX(20px)}

/* search bar */
.searchbar{display:flex;align-items:center;gap:8px;background:var(--grouped-bg);border-radius:11px;
  padding:10px 12px;margin:8px 20px;color:var(--ink-40);font-size:15px}
.searchbar svg{width:16px;height:16px;flex:none}
.searchbar input{flex:1;border:none;background:none;font-family:'Inter';font-size:15px;color:var(--ink)}
.searchbar input:focus{outline:none}
.searchbar input::placeholder{color:var(--ink-40)}

/* ---- header block (player screen) ---- */
.ptitle{font-family:'Fraunces',serif;font-weight:600;font-size:27px;letter-spacing:-.4px;color:var(--plum);margin-top:14px}
.pteam{font-family:var(--f-team);font-stretch:85%;font-size:15px;font-weight:600;letter-spacing:.005em;margin-top:11px}
.pseason{font-size:12px;color:var(--ink-60);margin-top:3px}

/* ---- "with the team" count squares ---- */
.row3{display:flex;gap:10px}
.unit{flex:1;display:flex;flex-direction:column;align-items:center}
.uhead{font-size:12.5px;font-weight:600;margin-bottom:8px}
.uhead.game{color:var(--gold-d)} .uhead.prac{color:var(--sky-d)} .uhead.tour{color:var(--lead)}
.sq{width:100%;aspect-ratio:1/1;background:var(--card);border-radius:16px;border:1px solid var(--ink-12);
  box-shadow:0 2px 9px rgba(42,31,69,.05);display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden}
.sq::before{content:'';position:absolute;top:0;left:0;right:0;height:4px}
.sq.game::before{background:var(--gold)} .sq.prac::before{background:var(--ice)} .sq.tour::before{background:var(--lead)}
.sqnum{font-family:'Fraunces',serif;font-weight:600;font-size:40px;line-height:1;letter-spacing:-1px}
.sqof{font-size:12px;color:var(--ink-40);font-weight:500;margin-top:7px}
.sq.none{background:repeating-linear-gradient(135deg,#F4F0F7,#F4F0F7 6px,#EFEAF3 6px,#EFEAF3 12px);border-style:dashed}
.sq.none::before{display:none}
.sqnum.dim{color:var(--ink-40)}

/* ---- moments ---- */
.m-blurb{font-size:13px;line-height:1.55;color:var(--ink-60)}
.moment{background:var(--card);border:1px solid var(--ink-12);border-radius:16px;
  box-shadow:0 2px 10px rgba(42,31,69,.05);overflow:hidden;margin-bottom:13px}
.moment .thumb{height:184px;position:relative}
.thumb.video{background:linear-gradient(160deg,#DCE6FB,#B9CCF5)}
.thumb.photo{background:linear-gradient(150deg,#F6D3E8,#DCC8F7)}
.thumb .play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;
  border-radius:50%;background:rgba(42,31,69,.42);display:flex;align-items:center;justify-content:center}
.thumb .play::after{content:'';border-style:solid;border-width:8px 0 8px 13px;
  border-color:transparent transparent transparent #fff;margin-left:3px}
.thumb .dur{position:absolute;bottom:9px;right:10px;background:rgba(42,31,69,.6);color:#fff;
  font-size:11px;font-weight:600;padding:2px 7px;border-radius:6px}
.datehdr{font-family:'Fraunces',serif;font-weight:600;font-size:14px;color:var(--ink-60);margin:16px 2px 11px}
.moment .head{padding:14px 15px}
.moment .cap{font-size:14.5px;line-height:1.45;color:var(--ink);font-weight:400}
.moment .meta{display:flex;align-items:center;gap:8px;margin-top:4px}
.meta .dot{width:8px;height:8px;border-radius:50%;flex:none}
.dot.game{background:var(--gold)} .dot.prac{background:var(--ice)} .dot.tour{background:var(--lead)}
.meta .lbl{font-size:11.5px;color:var(--ink-60);font-weight:500}
.meta .lbl b{color:var(--ink);font-weight:600}
.meta .hidden-tag{margin-left:auto;font-size:11px;color:var(--ink-40);font-weight:600}
.meta .scope{margin-left:auto;font-size:11px;font-weight:700;color:var(--gold-d);text-transform:uppercase;letter-spacing:.5px}
.moment.hidden{opacity:.5}

/* ---- schedule / event rows ---- */
.ev{display:flex;gap:13px;padding:14px 15px;background:var(--card);border:1px solid var(--ink-12);
  border-radius:14px;margin-bottom:10px;box-shadow:0 2px 9px rgba(42,31,69,.04);cursor:pointer;width:100%;text-align:left;font-family:inherit}
.ev .ev-date{width:44px;flex:none;text-align:center}
.ev .ev-date .dow{font-size:11px;font-weight:700;color:var(--ink-40);text-transform:uppercase}
.ev .ev-date .dnum{font-family:'Fraunces',serif;font-size:22px;font-weight:600;line-height:1.1}
.ev .ev-main{flex:1;min-width:0}
.ev .ev-title{font-family:var(--f-team);font-stretch:85%;font-size:16.5px;font-weight:600;letter-spacing:.005em}
.ev .ev-sub{font-size:12.5px;color:var(--ink-60);margin-top:3px;line-height:1.4}
.ev .ev-tag{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;margin-top:6px}
.ev .ev-tag .dot{width:7px;height:7px;border-radius:50%}
.ev .ev-score{font-family:var(--f-team);font-stretch:85%;font-weight:700;font-size:16px;font-variant-numeric:tabular-nums lining-nums;color:var(--plum);margin-top:4px}
.ev .ev-arena{color:var(--gold-d);text-decoration:underline;text-underline-offset:2px}
.pill{display:inline-block;font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:8px;
  letter-spacing:.4px;text-transform:uppercase}
.pill.unconfirmed{background:var(--ice-soft);color:var(--ice-d)}
.pill.incomplete{background:var(--gold-soft);color:var(--gold-d)}
.pill.cancelled{background:#eddad2;color:var(--warn)}
.pill.guest{background:var(--gold-soft);color:var(--gold-d)}

/* season span line */
.spanline{font-size:12px;color:var(--ink-60);background:var(--grouped-bg);border-radius:10px;
  padding:10px 13px;margin:6px 20px;line-height:1.5}

/* ---- empty states ---- */
.empty{text-align:center;padding:38px 30px}
.empty .e-ic{width:56px;height:56px;border-radius:16px;background:var(--grouped-bg);margin:0 auto 16px;
  display:flex;align-items:center;justify-content:center;color:var(--ink-40)}
.empty .e-title{font-family:'Fraunces',serif;font-weight:600;font-size:18px;margin-bottom:8px}
.empty .e-text{font-size:13px;color:var(--ink-60);line-height:1.55}

/* ---- consent / callout ---- */
.callout{background:var(--ice-soft);border:1px solid rgba(45,127,249,.35);border-radius:14px;
  padding:15px 16px;margin:12px 20px;font-size:13px;line-height:1.55;color:var(--ink)}
.callout.warm{background:var(--gold-soft);border-color:rgba(224,53,153,.3)}
.callout .c-h{font-weight:700;margin-bottom:5px;display:flex;align-items:center;gap:7px}

/* ---- sheets / modal ---- */
.scrim{position:absolute;inset:0;background:rgba(20,18,15,.42);z-index:20;display:flex;align-items:flex-end}
.sheet{width:100%;background:var(--cream);border-radius:22px 22px 0 0;box-shadow:0 -8px 30px rgba(0,0,0,.2);
  display:flex;flex-direction:column;max-height:88%}
.grabber{width:36px;height:5px;border-radius:3px;background:var(--ink-12);margin:8px auto 0}
.sheettop{display:flex;align-items:center;justify-content:space-between;padding:12px 18px 10px;border-bottom:1px solid var(--ink-12)}
.sheettop .cancel{font-size:15px;color:var(--ink-60);cursor:pointer}
.sheettop .stitle{font-family:'Fraunces',serif;font-weight:600;font-size:16px}
.sheettop .save{font-size:15px;font-weight:700;color:var(--gold-d);cursor:pointer}
.sheetbody{padding:16px 18px;overflow-y:auto}
.sheetbody::-webkit-scrollbar{display:none}
.action-sheet{padding:8px 12px 16px}
.action-sheet .as-btn{width:100%;background:var(--card);border:none;border-radius:12px;padding:15px;
  font-family:'Inter';font-size:16px;color:var(--gold-d);font-weight:600;margin-top:8px;cursor:pointer}
.action-sheet .as-btn.destructive{color:var(--warn)}
.action-sheet .as-btn.cancel{font-weight:700;color:var(--ink)}

/* ---- toast / notification banner ---- */
.toast{position:absolute;left:14px;right:14px;top:52px;background:rgba(42,31,69,.94);color:#fff;
  border-radius:16px;padding:13px 16px;z-index:30;box-shadow:0 8px 24px rgba(0,0,0,.3);
  display:flex;gap:11px;align-items:flex-start;animation:drop .25s ease}
@keyframes drop{from{transform:translateY(-14px);opacity:0}to{transform:translateY(0);opacity:1}}
.toast .t-ic{width:30px;height:30px;border-radius:8px;background:var(--gold);flex:none;
  display:flex;align-items:center;justify-content:center;color:var(--btn-ink);font-weight:700}
.toast .t-main{flex:1}
.toast .t-title{font-size:13px;font-weight:700}
.toast .t-body{font-size:12.5px;color:rgba(255,255,255,.8);margin-top:2px;line-height:1.4}

/* ---- compose sheet: tag chip, media, event picker (from reference) ---- */
.taglabel{font-size:10.5px;font-weight:700;letter-spacing:.9px;text-transform:uppercase;color:var(--ink-40);margin:18px 0 8px}
.tagchip{display:flex;align-items:center;gap:9px;background:var(--card);border:1px solid var(--ink-12);border-radius:12px;padding:11px 13px;cursor:pointer;width:100%;text-align:left}
.tagchip .cdot{width:10px;height:10px;border-radius:50%;flex:none}
.cdot.game{background:var(--gold)} .cdot.prac{background:var(--ice)} .cdot.tour{background:var(--lead)}
.tagchip .ev{flex:1;font-size:13.5px;font-weight:600;border:none;background:none;box-shadow:none;padding:0;margin:0;border-radius:0}
.tagchip .ev span{display:block;font-size:11px;font-weight:500;color:var(--ink-40);margin-top:1px}
.tagchip .chev{color:var(--ink-40);flex:none;font-size:18px}
.addmedia{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;margin-top:12px;border:1.5px dashed var(--ink-12);background:transparent;border-radius:13px;padding:14px;font-family:'Inter';font-weight:600;font-size:13.5px;color:var(--ink-60);cursor:pointer}
.helper{font-size:11.5px;color:var(--ink-40);margin-top:10px;text-align:center;line-height:1.45}
.mediawrap,#media-slot:not(:empty){margin-top:14px;display:block}
.prev{position:relative;border-radius:14px;overflow:hidden;height:150px;background:linear-gradient(160deg,#DCE6FB,#B9CCF5)}
.prev.photo{background:linear-gradient(150deg,#F6D3E8,#DCC8F7)}
.prev .rm{position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:50%;background:rgba(42,31,69,.55);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px}
.prev .playbtn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:rgba(42,31,69,.42)}
.prev .playbtn::after{content:'';position:absolute;top:50%;left:52%;transform:translate(-50%,-50%);border-style:solid;border-width:7px 0 7px 12px;border-color:transparent transparent transparent #fff}
.prev .dur{position:absolute;bottom:8px;right:10px;background:rgba(42,31,69,.6);color:#fff;font-size:11px;font-weight:600;padding:2px 7px;border-radius:6px}
.psearch,.searchbar{margin-left:0;margin-right:0}
.evrow{display:flex;align-items:center;gap:11px;padding:13px 2px;border-bottom:1px solid var(--ink-12);cursor:pointer}
.evrow .cdot{width:10px;height:10px;border-radius:50%;flex:none}
.evrow .etext{flex:1;font-size:14px;color:var(--ink)}
.evrow .etext .d{color:var(--ink-40)}
.nonerow{padding:15px 2px 4px;font-size:14px;color:var(--ink-60);cursor:pointer}

/* wordmark */
.wm{font-family:'Fraunces',serif;font-weight:600;letter-spacing:-.5px;color:var(--wm)}
/* lockup: the mark over the logotype (account pages) */
.lockup{display:flex;flex-direction:column;align-items:center;gap:12px}
.lockup .hm-static{width:88px}
.lockup .wm{font-size:40px;line-height:1}
.lockup-sm{gap:8px;padding:22px 0 20px}
.lockup.lockup-sm .hm-static{width:54px}
.lockup.lockup-sm .wm{font-size:28px}
.wm .tri{color:var(--gold)}

/* welcome screen */
.welcome{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:30px 34px}
.welcome .wm{font-size:40px;margin-bottom:2px}
.welcome .lockup{margin-bottom:12px}
.welcome .tag{font-family:'Fraunces',serif;font-size:13.5px;color:var(--ink);line-height:1.4;margin-bottom:6px;white-space:nowrap}
.welcome .sub{font-size:13.5px;color:var(--ink-60);line-height:1.55;margin-bottom:34px}
.welcome .benefits{list-style:none;text-align:left;margin:2px 0 34px;padding:0}
.welcome .benefits li{font-size:13.5px;color:var(--ink);line-height:1.55;padding:5px 0 5px 26px;position:relative}
.welcome .benefits li::before{content:'✓';position:absolute;left:0;top:5px;color:var(--gold-d);font-weight:700}
.welcome .btn{margin-bottom:11px}

/* misc helpers */
.spacer{height:20px}
.muted{color:var(--ink-60)}
.center{text-align:center}
.hidden-count{font-size:12px;color:var(--ink-40);text-align:center;padding:10px;cursor:pointer;font-weight:600}
.new-marker{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--gold);margin-left:6px}
.attn-row{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border-bottom:1px solid var(--ink-08)}
.attn-row:last-child{border-bottom:none}
.attn-row .a-name{font-size:15px;font-weight:500}
.attn-row .a-num{font-size:12px;color:var(--ink-40);margin-left:7px}
.att-toggle{display:flex;gap:6px}
.att-toggle .att{padding:6px 14px;border-radius:9px;font-size:13px;font-weight:600;cursor:pointer;border:1px solid var(--ink-12);background:var(--card);color:var(--ink-60)}
.att-toggle .att.present.on{background:var(--ok);color:#fff;border-color:var(--ok)}
.att-toggle .att.absent.on{background:var(--warn);color:#fff;border-color:var(--warn)}

/* ---- hub chrome: the lens (switcher) + gear, atop every hub ---- */
.hubbar{flex:none;display:flex;align-items:center;justify-content:space-between;
  padding:6px 12px 6px 8px;background:var(--cream);border-bottom:1px solid var(--ink-08);z-index:4}
.switcher{display:flex;align-items:center;gap:9px;background:none;border:none;cursor:pointer;
  font-family:inherit;padding:6px 8px;border-radius:11px}
.switcher:active{background:var(--ink-08)}
.switcher .avatar{width:30px;height:30px;font-size:13px}
.switcher .sw-name{font-family:'Fraunces',serif;font-weight:600;font-size:19px;letter-spacing:-.3px;color:var(--ink)}
.switcher .sw-chev{width:8px;height:8px;border-right:2px solid var(--ink-40);border-bottom:2px solid var(--ink-40);
  transform:rotate(45deg);margin:-3px 0 0 0}
.gear{width:36px;height:36px;border:none;background:none;cursor:pointer;color:var(--ink-60);
  display:flex;align-items:center;justify-content:center;border-radius:50%}
.gear:active{background:var(--ink-08)}
.gear svg{width:22px;height:22px}

/* ---- hub identity block (the player the hub is scoped to) ---- */
.hub-id{padding:16px 20px 4px}
.hub-id .hi-eyebrow{font-size:11px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;color:var(--ink-40)}
.hub-id .ptitle{margin-top:2px}
.hub-id .pteam{margin-top:8px}

/* ---- "her season begins" beat ---- */
.beat{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:30px 34px;animation:fade .4s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.beat .season-name{font-family:'Fraunces',serif;font-weight:600;font-size:36px;letter-spacing:-.6px;color:var(--plum);
  margin-bottom:12px;line-height:1.1}
.beat .season-sub{font-size:14px;color:var(--ink-60);line-height:1.55;margin-bottom:32px;max-width:280px}
.beat .btn{margin-bottom:11px}

/* ---- onboarding: roadmap (Screen A), step dots, "you're all set" reveal ---- */
.roadmap{margin:18px 20px 6px}
.roadmap .rm-cap{font-size:11px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;color:var(--ink-40);margin-bottom:10px}
.roadmap .rm-step{display:flex;align-items:center;gap:12px;padding:7px 0}
.roadmap .rm-n{flex:none;width:26px;height:26px;border-radius:50%;background:var(--gold-soft);color:var(--gold-d);
  font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center}
.roadmap .rm-t{font-size:14.5px;color:var(--ink)}

.ob-dots{display:flex;justify-content:center;gap:7px;padding:4px 0 14px}
.ob-dot{width:7px;height:7px;border-radius:50%;background:var(--ink-12)}
.ob-dot.on{background:var(--gold);transform:scale(1.15)}

.celebrate{position:relative;width:96px;height:96px;margin-bottom:8px}
.celebrate .cb-ring{position:absolute;inset:22px;border-radius:50%;border:2.5px solid var(--gold);
  animation:cb-ring .7s ease-out}
.celebrate .cb-check{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:var(--gold-d);font-size:34px;font-weight:700;animation:cb-pop .5s cubic-bezier(.2,1.4,.4,1) both}
.celebrate .cb-spark{position:absolute;left:50%;top:50%;width:6px;height:6px;border-radius:50%;
  background:var(--ice-d);animation:cb-spark .7s ease-out both}
.celebrate .cb-spark.s1{--tx:-34px;--ty:-30px;background:var(--coral)}
.celebrate .cb-spark.s2{--tx:34px;--ty:-28px}
.celebrate .cb-spark.s3{--tx:-30px;--ty:30px}
.celebrate .cb-spark.s4{--tx:32px;--ty:30px;background:var(--violet)}
@keyframes cb-pop{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes cb-ring{from{transform:scale(.5);opacity:0}60%{opacity:1}to{transform:scale(1);opacity:1}}
@keyframes cb-spark{from{transform:translate(-50%,-50%);opacity:0}
  40%{opacity:1}to{transform:translate(calc(-50% + var(--tx)),calc(-50% + var(--ty)));opacity:0}}

/* switcher popover rows */
.sw-row{display:flex;align-items:center;gap:12px;padding:14px 2px;border-bottom:1px solid var(--ink-08);
  cursor:pointer;background:none;border-left:none;border-right:none;border-top:none;width:100%;text-align:left;font-family:inherit}
.sw-row:last-child{border-bottom:none}
.sw-row .r-main{flex:1}
.sw-row .r-title{font-size:16px;font-weight:600;color:var(--ink)}
.sw-row .r-sub{font-size:12px;color:var(--ink-60);margin-top:1px}
.sw-row.on .r-title{color:var(--gold-d)}
.sw-row .r-check{color:var(--gold-d);font-weight:700}
.sw-manage{display:block;width:100%;text-align:center;padding:15px;margin-top:6px;background:none;border:none;
  font-family:inherit;font-size:14px;font-weight:700;color:var(--gold-d);cursor:pointer}

/* Stage 4 — the timeline (Season keepsake spine) */
.tl-entry{display:block}
.tl-entry .row{align-items:flex-start}
.tl-entry .ev-date{width:42px;flex:none;text-align:center;display:inline-flex;flex-direction:column;gap:1px;padding-top:1px}
.tl-entry .ev-date .dow{font-size:11px;font-weight:700;color:var(--ink-40);text-transform:uppercase}
.tl-entry .ev-date .dnum{font-family:'Fraunces',serif;font-size:22px;font-weight:600;line-height:1.05}
.tl-entry .r-title{font-weight:600}
.tl-entry .ev-score{font-family:var(--f-team);font-stretch:85%;font-weight:700;font-size:15px;font-variant-numeric:tabular-nums lining-nums;color:var(--plum);margin-top:3px}
.tl-entry .ev-sub{font-size:12.5px;color:var(--ink-60);margin-top:3px;line-height:1.4}
.tl-entry.slim .row{padding-top:11px;padding-bottom:11px}
.tl-entry.slim .r-title{font-weight:500;color:var(--ink-60)}
.tl-entry .moment{margin:2px 12px 12px;border-top:1px solid var(--ink-08);padding-top:12px}

/* Stage 5 — huddle, notifications, post-game, co-parent */
.r-badge.invited{background:var(--ice-soft);color:var(--ice-d)}

/* the post-game push, rendered as a notification banner */
.pushcard{display:flex;gap:12px;align-items:flex-start;background:var(--card);border:1px solid var(--ink-12);
  border-radius:16px;margin:16px 20px;padding:14px;box-shadow:0 6px 20px rgba(42,31,69,.10)}
.pushcard .t-ic{width:30px;height:30px;border-radius:8px;background:var(--gold);color:var(--btn-ink);flex:none;
  display:flex;align-items:center;justify-content:center;font-family:'Fraunces',serif;font-weight:700}
.pushcard .t-title{font-weight:600;color:var(--ink);line-height:1.35}
.pushcard .t-body{font-size:13px;color:var(--ink-60);margin-top:3px}

/* the iOS-style notification permission alert */
.os-prompt{background:var(--card);border-radius:16px;margin:0 40px;padding:20px 18px 0;text-align:center;overflow:hidden;width:78%;max-width:280px}
.os-prompt .op-title{font-weight:600;font-size:15px;color:var(--ink)}
.os-prompt .op-body{font-size:12.5px;color:var(--ink-60);line-height:1.5;margin:8px 0 18px}
.os-prompt .op-actions{display:flex;border-top:1px solid var(--ink-12);margin:0 -18px}
.os-prompt .op-btn{flex:1;padding:13px;background:none;border:none;font-family:inherit;font-size:15px;
  color:var(--gold-d);cursor:pointer}
.os-prompt .op-btn.primary{font-weight:700;border-left:1px solid var(--ink-12)}

/* post-game score fields */
.scorefields{display:flex;align-items:flex-end;justify-content:center;gap:14px;padding:4px 20px 0}
.scorefields .sf{flex:1;max-width:120px;text-align:center}
.scorefields .sf-lbl{font-size:12px;font-weight:700;color:var(--ink-60);margin-bottom:6px}
.scorefields .sf-x{font-family:var(--f-team);font-stretch:85%;font-size:24px;color:var(--ink-40);padding-bottom:10px}
.input.score{text-align:center;font-family:var(--f-team);font-stretch:85%;font-size:28px;font-weight:700;font-variant-numeric:tabular-nums lining-nums;padding:10px}

/* the filtered camera roll */
.photogrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.photocell{aspect-ratio:1;border:none;border-radius:12px;cursor:pointer;
  background:linear-gradient(150deg,#F6D3E8,#DCC8F7)}
.photocell:nth-child(3n+2){background:linear-gradient(150deg,#E8EEFB,#D4E0F7)}
.photocell:nth-child(3n){background:linear-gradient(150deg,#EEE7F3,#E3D8EE)}

/* ---- player photo (2026-09-27): round photo on add/edit player, source sheet, crop ---- */
.avatar.photo{background:#C9B3F2 url(img/avatar-hockey.jpg) center/cover;color:transparent}
.avatar.add{background:none;box-shadow:inset 0 0 0 1.5px var(--ink-12);color:var(--gold-d)}
.avatar.add svg,.sw-row .avatar svg{width:18px;height:18px}
.sw-add .r-title{color:var(--gold-d)}
.photo-slot{display:flex;flex-direction:column;align-items:center;gap:6px;padding:18px 0 4px}
.ps-ring{position:relative;width:100px;height:100px;border-radius:50%;border:1.5px dashed var(--ink-12);background:transparent;
  display:flex;align-items:center;justify-content:center;color:var(--ink-40);cursor:pointer}
.ps-ring>svg{width:40px;height:40px}
.ps-ring.filled{border:none;background:linear-gradient(150deg,#F6D3E8,#C9B3F2);box-shadow:0 0 0 3px var(--cream),0 0 0 4.5px var(--gold)}
.ps-cam{position:absolute;right:0;bottom:2px;width:32px;height:32px;border-radius:50%;background:var(--gold);color:var(--btn-ink);
  display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 3px var(--cream)}
.ps-cam svg{width:17px;height:17px}
.ps-link{background:none;border:none;font-family:inherit;font-size:13.5px;font-weight:700;color:var(--gold-d);cursor:pointer;padding:6px}
.ps-big{display:inline-flex;align-items:center;justify-content:center;width:84px;height:84px;border-radius:50%;margin-top:14px;border:none;cursor:pointer;
  background:var(--ice-soft);color:var(--ice-d);font-family:'Fraunces',serif;font-weight:600;font-size:34px}
.ps-big.photo{background:linear-gradient(150deg,#F6D3E8,#C9B3F2);color:transparent}
.ps-big.gold{background:var(--gold-soft);color:var(--gold-d);cursor:default}
.scrim-hit{position:absolute;inset:0}
.crop{position:absolute;inset:0;z-index:25;background:#0e0d0c;display:flex;flex-direction:column;color:#fff}
.crop-stage{position:relative;flex:1;overflow:hidden;background:linear-gradient(150deg,#D7C6EA,#8B74B8 60%,#4A3A6E)}
.crop-stage::after{content:'';position:absolute;left:50%;top:50%;width:280px;height:280px;margin:-140px 0 0 -140px;border-radius:50%;
  box-shadow:0 0 0 999px rgba(14,13,12,.62),inset 0 0 0 1.5px rgba(255,255,255,.85)}
.crop-hint{position:absolute;top:58px;left:0;right:0;text-align:center;font-size:14px;font-weight:600;z-index:2}
.crop-bar{display:flex;justify-content:space-between;padding:16px 22px 26px}
.crop-bar button{background:none;border:none;font-family:inherit;font-size:16px;color:#fff;cursor:pointer;padding:8px 4px}
.crop-bar button.use{font-weight:700;color:var(--gold)}

/* small "+ Add another player" on the step right after adding one */
.add-more{display:flex;justify-content:center;padding:0 20px 12px}
.btn-small{display:inline-flex;align-items:center;gap:6px;padding:8px 14px 8px 11px;border-radius:999px;background:var(--card);
  border:1px solid var(--ink-12);font-family:inherit;font-size:13px;font-weight:600;color:var(--ink);cursor:pointer}
.btn-small svg{width:16px;height:16px}
.sw-row .r-title,.sw-row .r-sub{display:block}

/* ---- Schedule: list / calendar view (2026-09-27) ---- */
.view-toggle{padding-top:4px;padding-bottom:14px}
.btn-view{min-height:52px;font-size:15.5px}
.btn-view svg{width:20px;height:20px}
.cal{margin:0 16px;background:var(--card);border:1px solid var(--ink-12);border-radius:16px;box-shadow:0 2px 9px rgba(42,31,69,.04);padding:10px 10px 12px}
.cal-head{display:flex;align-items:center;justify-content:space-between;padding:2px 2px 8px}
.cal-title{font-family:'Fraunces',serif;font-weight:600;font-size:18px}
.cal-nav{width:40px;height:40px;border-radius:50%;border:none;background:none;color:var(--ink-60);cursor:pointer;display:flex;align-items:center;justify-content:center}
.cal-nav svg{width:20px;height:20px}
.cal-nav:active{background:var(--ink-08)}
.cal-wk,.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cal-wk span{text-align:center;font-size:11px;font-weight:700;color:var(--ink-40);padding:4px 0}
.cal-day{position:relative;min-height:50px;border:none;background:none;border-radius:11px;cursor:pointer;font-family:inherit;
  display:flex;flex-direction:column;align-items:center;padding:6px 0 4px;gap:3px}
.cal-day.blank{cursor:default}
.cal-n{font-size:14px;font-weight:500;color:var(--ink);line-height:1;width:26px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:50%}
.cal-day.has .cal-n{font-weight:700}
.cal-day.past .cal-n{color:var(--ink-40)}
.cal-day.past .cal-marks{opacity:.55}
.cal-day.today .cal-n{background:var(--ink);color:var(--cream)}
.cal-day.sel{background:var(--gold-soft)}
.cal-day.sel .cal-n{color:var(--gold-d)}
.cal-day.today.sel .cal-n{color:var(--cream)}
.cal-marks{position:absolute;left:calc(50% + 8px);top:-1px;display:flex;align-items:center;z-index:2}   /* floats on the date's top-right corner */
.cal-dot{width:6px;height:6px;border-radius:50%;margin:0 1.5px}
.cal-dot.game{background:var(--gold)} .cal-dot.prac{background:var(--ice)} .cal-dot.tour{background:var(--lead)} .cal-dot.pers{background:var(--coral)}
.cal-av{width:17px;height:17px;border-radius:50%;background:var(--ice-soft);color:var(--ice-d);font-size:9.5px;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;box-shadow:0 0 0 1.5px var(--card);flex:none}
.cal-marks .cal-av+.cal-av{margin-left:-7px}
.cal-av.photo{background:#C9B3F2 url(img/avatar-hockey.jpg) center/cover;color:transparent}
.cal-av.gold{background:var(--gold-soft);color:var(--gold-d)}
.cal-legend{display:flex;gap:16px;justify-content:center;padding:10px 0 0;margin-top:6px;border-top:1px solid var(--ink-08);font-size:12.5px;color:var(--ink-60)}
.cal-legend span{display:inline-flex;align-items:center;gap:6px}
.cal-dayhead{font-family:'Fraunces',serif;font-weight:600;font-size:17px;padding:20px 20px 10px;display:flex;align-items:center;gap:8px}
.cal-pastlbl{font-family:'Inter',sans-serif;font-size:11px;font-weight:700;color:var(--ink-40);background:var(--grouped-bg);padding:2px 8px;border-radius:8px}
.cal-who{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--ink-60);margin:4px 2px 6px}
.cal-who .cal-av{width:20px;height:20px;font-size:10.5px}
.cal-entry+.cal-entry{margin-top:6px}
.cal-none{padding:4px 20px;font-size:13.5px;color:var(--ink-60)}

/* ---- tabs by job (2026-09-27): Schedule | + | Moments | Team ---- */
.tabbar .tab-add{justify-content:center}
.tabbar .tab-add .add-ic{width:46px;height:46px;border-radius:50%;background:var(--gold);color:var(--btn-ink);display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 12px rgba(224,53,153,.35);margin-top:-2px}
.tabbar .tab-add .add-ic svg{width:22px;height:22px}
.sched-sec{font-size:11px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;color:var(--ink-40);margin:22px 22px 10px}
.ev.past{opacity:.62}
.ev.past .ev-score{opacity:1}

/* ---- calendar event lightbox ---- */
.lb-scrim{align-items:center;justify-content:center;padding:0 14px}
.lightbox{position:relative;width:100%;background:var(--cream);border-radius:22px;padding:16px 14px 14px;box-shadow:0 20px 50px rgba(0,0,0,.3);
  animation:lb-in .28s cubic-bezier(.16,1,.3,1)}
@keyframes lb-in{from{transform:scale(.96);opacity:0}}
.lb-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:0 4px 12px}
.lb-date{font-family:'Fraunces',serif;font-weight:600;font-size:19px;display:flex;align-items:center;gap:8px}
.lb-count{font-size:12px;color:var(--ink-40);margin-top:2px;font-weight:600}
.lb-close{flex:none;width:36px;height:36px;border-radius:50%;border:none;background:var(--grouped-bg);color:var(--ink-60);cursor:pointer;
  display:flex;align-items:center;justify-content:center}
.lb-close svg{width:18px;height:18px}
.lightbox .ev{margin-bottom:0}
.lb-nav{display:flex;gap:10px;margin-top:14px}
.lb-nav .btn{padding:12px}
.lb-nav .btn svg{width:18px;height:18px}
.lb-nav .btn[disabled]{opacity:.35}

/* ---- splash + first-run intro (2026-09-27): soft, friendly, not technical ---- */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.splash{flex:1;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(120% 80% at 50% 38%,#FDFBFE 0%,var(--cream) 55%,#EFE8F4 100%)}
.splash-mid{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 40px;animation:fade .6s ease both}
.splash-wm{font-size:46px;margin-top:26px}
.splash-tag{font-family:'Fraunces',serif;font-style:italic;font-size:16px;color:var(--ink-60);margin-top:10px;max-width:250px;line-height:1.4}
/* the loader: four soft dots drift in and gather around one, a huddle forming */
.huddle-loader{position:relative;width:84px;height:84px}
.huddle-loader i,.huddle-loader b{position:absolute;left:50%;top:50%;border-radius:50%}
.huddle-loader b{width:22px;height:22px;margin:-11px 0 0 -11px;background:var(--gold);animation:hl-core 2s cubic-bezier(.34,1.4,.64,1) infinite}
.huddle-loader i{width:15px;height:15px;margin:-7.5px 0 0 -7.5px;animation:hl-gather 2s cubic-bezier(.16,1,.3,1) infinite}
.huddle-loader i:nth-child(1){background:#E9A9D3;--x:-34px;--y:-20px}
.huddle-loader i:nth-child(2){background:var(--ice);--x:34px;--y:-20px;animation-delay:.08s}
.huddle-loader i:nth-child(3){background:#e9b7a9;--x:-30px;--y:26px;animation-delay:.16s}
.huddle-loader i:nth-child(4){background:#b9d8c1;--x:30px;--y:26px;animation-delay:.24s}
@keyframes hl-gather{0%{transform:translate(calc(var(--x)*1.6),calc(var(--y)*1.6));opacity:0}
  35%,70%{transform:translate(calc(var(--x)*.62),calc(var(--y)*.62));opacity:1}100%{transform:translate(calc(var(--x)*1.6),calc(var(--y)*1.6));opacity:0}}
@keyframes hl-core{0%,100%{transform:scale(.85)}40%,70%{transform:scale(1.08)}}
@media (prefers-reduced-motion:reduce){.huddle-loader i,.huddle-loader b{animation:none}.huddle-loader i{transform:translate(calc(var(--x)*.62),calc(var(--y)*.62))}}

.intro{flex:1;display:flex;flex-direction:column;min-height:0;background:linear-gradient(180deg,#FDFBFE 0%,var(--cream) 60%)}
.intro-top{display:flex;align-items:center;justify-content:space-between;padding:14px 20px 0}
.intro-wm{font-size:22px}
.intro-skip{background:none;border:none;font-family:inherit;font-size:15px;font-weight:600;color:var(--ink-60);padding:10px 4px;cursor:pointer}
.intro-view{flex:1;overflow:hidden;touch-action:pan-y}
.intro-track{display:flex;height:100%;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.slide{flex:0 0 100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 30px;text-align:center}
.slide-copy h2{font-family:'Fraunces',serif;font-weight:600;font-size:30px;letter-spacing:-.5px;line-height:1.1;margin-top:34px}
.slide-copy p{font-size:16.5px;line-height:1.55;color:var(--ink-60);margin:14px auto 0;max-width:300px}
.intro-foot{padding:0 24px 30px;display:flex;flex-direction:column;align-items:center;gap:20px}
.intro-dots{display:flex;gap:7px}
.intro-dots i{display:block;width:7px;height:7px;border-radius:4px;background:var(--ink-12);transition:width .3s,background .3s}
.intro-dots i.on{width:22px;background:var(--gold)}
.intro-next{min-height:54px;font-size:16px;border-radius:16px}

.art{position:relative;width:260px;height:230px}
/* 1: fanned prints */
.art-prints .print{position:absolute;left:50%;top:50%;width:130px;padding:9px 9px 26px;background:#fff;border-radius:6px;box-shadow:0 10px 26px rgba(42,31,69,.14)}
.art-prints .ph{height:118px;border-radius:3px}
.art-prints span{position:absolute;left:0;right:0;bottom:6px;font-family:'Fraunces',serif;font-style:italic;font-size:12.5px;color:var(--ink-60)}
.art-prints .p1{transform:translate(-110%,-50%) rotate(-10deg)}.art-prints .p1 .ph{background:linear-gradient(150deg,#DCE6FB,#B9CCF5)}
.art-prints .p3{transform:translate(10%,-46%) rotate(9deg)}.art-prints .p3 .ph{background:linear-gradient(150deg,#F6D3E8,#E9A9D3)}
.art-prints .p2{transform:translate(-50%,-56%) rotate(-1deg);z-index:2}.art-prints .p2 .ph{background:linear-gradient(150deg,#F6E0EE,#D6B8F2)}
/* 2: a photo becoming a keepsake */
.art-story .keep{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-2deg);width:200px;background:#fff;border-radius:14px;padding:10px 10px 14px;box-shadow:0 14px 30px rgba(42,31,69,.15);text-align:left}
.art-story .ph{position:relative;height:130px;border-radius:9px;background:linear-gradient(150deg,#EDE2FD,#CFB6F5)}
.art-story .play{position:absolute;left:50%;top:50%;width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;background:rgba(42,31,69,.35)}
.art-story .play::after{content:'';position:absolute;left:15px;top:11px;border-style:solid;border-width:8px 0 8px 12px;border-color:transparent transparent transparent #fff}
.art-story .keep-cap{font-family:'Fraunces',serif;font-style:italic;font-size:17px;margin-top:10px}
.art-story .keep-meta{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink-60);margin-top:4px}
.art-story .dot{width:7px;height:7px;border-radius:50%;background:var(--gold)}
.art-story .tag-before{position:absolute;right:4px;top:6px;font:600 11px ui-monospace,Menlo,monospace;color:var(--ink-40);background:var(--grouped-bg);padding:4px 8px;border-radius:6px;text-decoration:line-through;transform:rotate(6deg)}
/* 3: the family gathered around the player */
.art-family .ring{position:absolute;left:50%;top:50%;width:190px;height:190px;margin:-95px 0 0 -95px;border-radius:50%;border:1.5px dashed rgba(224,53,153,.35)}
.art-family .kid{position:absolute;left:50%;top:50%;width:78px;height:78px;margin:-39px 0 0 -39px;border-radius:50%;background:var(--gold);color:var(--btn-ink);
  display:flex;align-items:center;justify-content:center;font:600 32px 'Fraunces',serif;box-shadow:0 0 0 6px #fff,0 10px 24px rgba(224,53,153,.3)}
.art-family .fam{position:absolute;padding:7px 12px;border-radius:999px;background:#fff;font-size:12.5px;font-weight:600;box-shadow:0 6px 16px rgba(42,31,69,.12)}
.art-family .f1{left:6px;top:20px}.art-family .f2{right:10px;top:34px}.art-family .f3{left:0;bottom:36px}.art-family .f4{right:18px;bottom:18px}
.art-family .heart{position:absolute;left:calc(50% + 28px);top:calc(50% - 50px);color:var(--hug);font-size:20px}
/* 4: the schedule that fills itself */
.art-cal .cal-card{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);width:210px;background:#fff;border-radius:16px;padding:12px;box-shadow:0 14px 30px rgba(42,31,69,.13)}
.art-cal .cal-card-h{font:600 15px 'Fraunces',serif;text-align:left;margin:0 2px 8px}
.art-cal .cal-card-g{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.art-cal .cal-card-g span{font-size:10.5px;color:var(--ink-40);height:22px;display:flex;align-items:center;justify-content:center;border-radius:50%}
.art-cal .cal-card-g span.on{background:var(--gold-soft);color:var(--gold-d);font-weight:700}
.art-cal .nudge{position:absolute;left:50%;bottom:0;transform:translateX(-38%);width:215px;display:flex;gap:9px;align-items:flex-start;text-align:left;
  background:rgba(255,255,255,.96);border-radius:14px;padding:10px 12px;font-size:11.5px;line-height:1.4;color:var(--ink-60);box-shadow:0 10px 24px rgba(42,31,69,.14)}
.art-cal .nudge b{color:var(--ink);font-weight:600}
.art-cal .n-ic{flex:none;width:24px;height:24px;border-radius:7px;background:var(--gold);color:var(--btn-ink);display:flex;align-items:center;justify-content:center;font:700 13px 'Fraunces',serif}
/* slide 4: calendar view with each player's avatar on their days */
.art-cal .cal-card{top:50%;width:230px}
.art-cal .cal-card-h{display:flex;align-items:center;justify-content:space-between}
.art-cal .cv-pill{font:600 10px 'Inter',sans-serif;color:var(--gold-d);background:var(--gold-soft);padding:3px 8px;border-radius:999px}
.art-cal .cal-card-g span.on{background:var(--gold-soft)}
.art-cal .cal-card-g em{font-style:normal;line-height:1}
.art-cal .cal-card-k{display:flex;gap:14px;justify-content:center;margin-top:9px;padding-top:8px;border-top:1px solid var(--ink-08);font-size:11px;color:var(--ink-60)}
.art-cal .cal-card-k span{display:inline-flex;align-items:center;gap:5px}
/* intro polish: side prints spread wider so their captions show; balanced body lines */
.art-prints .print{width:118px}
.art-prints .ph{height:104px}
.art-prints .p1{transform:translate(-128%,-40%) rotate(-10deg)}
.art-prints .p3{transform:translate(28%,-36%) rotate(9deg)}
.art-prints .p2{transform:translate(-50%,-60%) rotate(-1deg)}
.slide-copy p,.slide-copy h2{text-wrap:balance}

/* ---- Schedule: pinned label + view switch (2026-09-27) ---- */
.sched-pin{position:sticky;top:0;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 16px 10px 20px;background:var(--cream);box-shadow:0 1px 0 var(--ink-08)}
.sched-pin .hi-eyebrow{font-size:11px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;color:var(--ink-40)}
.view-switch{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 13px 0 10px;border-radius:999px;
  background:var(--card);border:1px solid var(--ink-12);font-family:inherit;font-size:13px;font-weight:600;color:var(--gold-d);cursor:pointer;
  box-shadow:0 1px 3px rgba(42,31,69,.06)}
.view-switch svg{width:17px;height:17px}
.view-switch:active{background:var(--grouped-bg)}
.hub-id-pinned{padding-top:6px}
/* intro photos (2026-09-28): real images in the prints, the solo as a frame loop */
.art-prints .ph{overflow:hidden;background:var(--grouped-bg)}
.art-prints .ph img{width:100%;height:100%;object-fit:cover;display:block}
.art-story .ph.solo-loop{height:150px;background:#0c0a08;overflow:hidden}
.solo-loop img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;opacity:0;display:block}
.solo-loop img.on{opacity:1}
.art-story .art{height:250px}
.art-story{height:250px}
/* solo loop v2 (2026-09-28): square phone-video frames, shown square */
.art-story .ph.solo-loop{height:auto;aspect-ratio:1/1}
.art-story .keep{width:196px;top:48%}
.art-story,.art-story .art{height:270px}
.solo-loop img{object-position:50% 50%}
/* intro 3: the player's photo in the centre circle (cropped to the child) */
.art-family .kid{overflow:hidden;background:#dfe7ea}
.art-family .kid img{width:100%;height:100%;object-fit:cover;display:block}

/* ---- splash: logo reveal, "The Huddle" (2026-09-28, Akin's second revision) ----
   The drops themselves are drawn by JS in intro.js (each is born as a small circle that
   loops in and morphs into its drop, tail last). CSS only moves the two people: they glide
   together, lean in from the feet, settle, then one soft hug squeeze. */
.hm{width:164px;height:auto;overflow:visible}
.hm path{stroke-width:3;stroke-linejoin:round}
.hm-g{transform-box:fill-box;transform-origin:50% 100%;animation:hm-lean-a 1.9s both}
.hm .hm-b{animation-name:hm-lean-b}
.hm-static .hm-g{animation:none}
@keyframes hm-lean-a{
  0%,50%{transform:translateX(-22px)}
  70%{transform:translateX(1px) rotate(5deg);animation-timing-function:cubic-bezier(.65,0,.35,1)}
  80%{transform:rotate(-1.5deg)}86%{transform:none}93%{transform:scale(.97,1.03)}100%{transform:none}}
@keyframes hm-lean-b{
  0%,50%{transform:translateX(22px)}
  70%{transform:translateX(-1px) rotate(-5deg);animation-timing-function:cubic-bezier(.65,0,.35,1)}
  80%{transform:rotate(1.5deg)}86%{transform:none}93%{transform:scale(.97,1.03)}100%{transform:none}}
/* wordmark and tagline rise in after the conversation */
.splash-mid{animation:none}
.splash-mid .splash-wm{animation:hm-rise .6s cubic-bezier(.22,1,.36,1) 2.7s both}
.splash-mid .splash-tag{animation:hm-rise .6s cubic-bezier(.22,1,.36,1) 2.85s both}
@keyframes hm-rise{0%{transform:translateY(12px);opacity:0}100%{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.hm-g,.splash-mid .splash-wm,.splash-mid .splash-tag{animation:none}}
/* the still mark on top of the first intro page */
.slide-mark{display:flex;justify-content:center;padding:4px 0 2px}
.hm-static{width:64px;height:auto}
.hm-static path{stroke-width:3;stroke-linejoin:round}
.splash-wm{margin-top:22px}

/* ---- brand (2026-09-29): the dark brand bar + the mark's tip bubble ----
   Pages with room carry the mark with a quick tip (.btip); pages without room (the hubs)
   carry a dark bar with the negative logo (.brandtop). */
.brandtop{flex:none;background:var(--night);color:#fff;position:relative;z-index:4}
.statusbar.on-dark{color:#fff}
.brandtop .hubbar{background:transparent;border-bottom:none;position:relative;padding:2px 12px 10px 8px;min-height:50px}
.brandtop .switcher .sw-name{color:#fff;max-width:112px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brandtop .switcher .sw-chev{border-color:rgba(255,255,255,.55)}
.brandtop .switcher:active{background:rgba(255,255,255,.1)}
.brandtop .gear{color:rgba(255,255,255,.82)}
.brandtop .avatar{box-shadow:0 0 0 2px rgba(255,255,255,.18)}
.hub-brand{display:flex;align-items:center;gap:8px;pointer-events:none;margin:0 auto 0 8px}
.hub-brand .hm-neg,.hub-brand .hm-bar{width:28px;height:auto;display:block}
.hm-bar path{stroke-width:0}                 /* fill only at bar size: the gaps stay open */
.hm-neg path{stroke-width:0}                 /* fill only: keeps the gaps between drops open at small sizes */
.brandtop .hubbar>.hub-brand:only-child{margin:0 auto}   /* brand bar on its own: centred */
.hub-brand .wm{color:#fff;font-size:19px;line-height:1}
/* the tip: said by the mark, in a speech bubble whose tail corner points at it */
.btip{display:flex;align-items:flex-end;gap:10px;margin:22px 20px 8px}
.btip-mark{flex:none}
.btip-mark .hm-static{width:42px;height:auto;display:block}
.btip-b{flex:1;text-align:left;background:var(--lilac-soft);color:var(--plum);border-radius:20px 20px 20px 5px;
  padding:12px 15px 13px;font-size:14px;line-height:1.5;transform-origin:0% 100%;animation:btip-in .7s var(--ease) .2s both}
.btip-b b{display:block;font-size:10.5px;font-weight:700;letter-spacing:.9px;text-transform:uppercase;color:var(--violet);margin-bottom:2px}
@keyframes btip-in{0%{transform:scale(.35);opacity:0}100%{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.btip-b{animation:none}}
/* settings sign-off */
.set-brand{display:flex;flex-direction:column;align-items:center;padding:34px 20px 10px}
.set-brand .lockup-sm{padding:0 0 6px}
.set-tag{font-family:'Fraunces',serif;font-style:italic;font-size:14px;color:var(--ink-60);text-align:center}
.brandtop + .body{padding-top:18px}
.welcome .tag + .btn{margin-top:26px}
/* avatar markers (Akin 2026-09-29): the player's photo or initial in a circle on every event
   date, hovering over the date instead of a dot; the ring colour says what it is
   (game = magenta, practice = blue, tournament = violet, personal = coral) */
.cal-marks .cal-av{width:21px;height:21px;font-size:10px;box-shadow:0 0 0 2px #fff,0 0 0 3.5px var(--ring,var(--ink-12)),0 3px 8px rgba(42,31,69,.18)}
.cal-av.t-game{--ring:var(--hug)} .cal-av.t-prac{--ring:var(--sky)} .cal-av.t-tour{--ring:var(--violet)} .cal-av.t-pers{--ring:var(--coral)}
.cal-day{min-height:54px}
.cal-day .cal-n{margin-top:10px}
.cal-day.sel .cal-marks .cal-av{box-shadow:0 0 0 2px var(--gold-soft),0 0 0 3.5px var(--ring,var(--ink-12)),0 3px 8px rgba(42,31,69,.18)}
/* list view: the same avatar hovers over each event's date */
.ev{position:relative}
.ev .ev-av{position:absolute;top:-9px;left:-9px;width:24px;height:24px;font-size:10.5px;z-index:2;
  box-shadow:0 0 0 2px #fff,0 0 0 3.5px var(--ring,var(--ink-12)),0 3px 8px rgba(42,31,69,.18)}
.ev.past .ev-av{opacity:.6}
/* a moment's Manage control: a small quiet pill under the caption */
.m-manage{display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:5px 12px 5px 10px;border:none;border-radius:999px;
  background:var(--lilac-soft);color:var(--plum);font:600 12.5px/1.2 'Inter',sans-serif;cursor:pointer;transition:background .2s var(--ease)}
.m-manage::before{content:'';width:12px;height:3px;background:radial-gradient(circle,currentColor 1.4px,transparent 1.6px) 0 0/4px 3px repeat-x;opacity:.7}
.m-manage:active{background:#E6DAFB}
/* intro "Never miss a date": real faces float on the dates, like the app's calendar */
.art-cal .cal-card{width:300px;padding:16px 16px 13px}
.art-cal .cal-card-g{row-gap:7px}
.art-cal .cal-card-g span{height:36px;position:relative;border-radius:10px;font-size:12px}
.art-cal .cal-card-g span.on{background:var(--lilac-soft);color:var(--plum);font-weight:700}
.art-cal .cal-card-g em{font-style:normal;line-height:1;margin-top:6px}
.art-cal .cal-card-g u{position:absolute;left:calc(50% + 3px);top:-9px;display:flex;text-decoration:none;z-index:1}
.art-cal b{display:inline-block;width:24px;height:24px;border-radius:50%;background:#ddd center/cover;
  box-shadow:0 0 0 1.5px #fff,0 0 0 3px var(--ring,#fff),0 3px 7px rgba(42,31,69,.22)}
.art-cal u b+b{margin-left:-9px}
.art-cal b.M{background-image:url(img/av-maya.jpg)} .art-cal b.L{background-image:url(img/av-leo.jpg)}
.art-cal b.t-g{--ring:var(--hug)} .art-cal b.t-p{--ring:var(--sky)}
.art-cal .cal-card-k{gap:22px;font-size:13px;font-weight:600;color:var(--plum)}
.art-cal .cal-card-k b{width:30px;height:30px;box-shadow:0 0 0 2px #fff,0 2px 6px rgba(42,31,69,.2)}
.art.art-cal{height:290px}
/* team and event names wherever they lead (hub title, event page title, search rows) + score lines */
.tm{font-family:var(--f-team);font-stretch:85%;letter-spacing:.005em}
.ptitle.tm{font-weight:650;font-size:28px;letter-spacing:-.005em}
.r-title.tm{font-size:16px;font-weight:600}
.r-title.score{font-family:var(--f-team);font-stretch:85%;font-weight:700;font-size:17px;font-variant-numeric:tabular-nums lining-nums;color:var(--plum)}
a{color:var(--gold-d)}                      /* no browser-default blue links */
/* ---- Team hub (Akin 2026-09-29): each team in a boxed card; the add action pinned above the tab bar ---- */
.team-card{margin:14px 16px 0;padding:18px 18px 16px;background:var(--card);border:1px solid var(--ink-12);border-radius:20px;
  box-shadow:0 10px 24px -14px rgba(42,31,69,.28)}
.team-card .tc-eyebrow{font-size:11px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;color:var(--ink-40)}
.team-card .tc-name{font-size:24px;font-weight:650;color:var(--plum);line-height:1.15;margin-top:3px}
.team-card .tc-name:not(.tm){font-family:'Fraunces',serif;font-weight:600;font-size:21px}
.team-card .pseason{margin-top:4px}
.team-card .m-blurb{margin-top:12px}
.team-card .pill{margin-top:12px}
.team-card .tc-actions{display:flex;flex-direction:column;gap:2px;margin-top:14px}
.team-card .tc-actions .btn-ghost{padding:10px}
.team-card.empty-card{border-style:dashed;box-shadow:none;background:transparent}
.hub-dock{flex:none;position:relative;z-index:3;padding:12px 16px 12px;margin-top:-26px;
  background:linear-gradient(to top,var(--cream) 62%,rgba(249,246,250,0))}
.hub-dock .btn{margin:0}
.body.has-dock{padding-bottom:40px}
/* the brand header repeated above an inner page's Back row: one quiet row, no double rule */
[data-branded] .brandtop + .navbar{min-height:42px;border-bottom:1px solid var(--ink-08);background:var(--cream)}
[data-branded] .brandtop + .navbar .nb-title{font-size:16px}
.brandtop .gear.on{color:#fff;background:rgba(255,255,255,.14);border-radius:50%}
/* drawn avatars (approved 2026-09-29): the third way to give a player a picture */
.av-stack{flex:none;display:flex;width:34px;height:34px;position:relative}
.av-stack img{position:absolute;top:5px;width:24px;height:24px;border-radius:50%;box-shadow:0 0 0 2px var(--cream)}
.av-stack img:nth-child(1){left:-2px}.av-stack img:nth-child(2){left:12px}.av-stack img:nth-child(3){display:none}
.av-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 10px;padding:6px 2px 2px}
.av-pick{display:flex;flex-direction:column;align-items:center;gap:7px;background:none;border:none;font:600 12.5px Inter,sans-serif;color:var(--ink-60);cursor:pointer;padding:4px}
.av-pick img{width:86px;height:86px;border-radius:50%;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.av-pick:active img{transform:scale(.95)}
.av-pick.on img{box-shadow:0 0 0 3px var(--cream),0 0 0 5.5px var(--hug)}
.av-pick.on span{color:var(--hug-d)}

/* ---- real phone (2026-09-29) ----
   On desktop the app sits in the 390x820 mock frame above. On a phone-width screen the
   frame falls away and the app fills the device like a native app: no bezel, the mock
   9:41 status bar collapses to the real safe area, the tab bar clears the home indicator.
   Nothing here applies above 520px, so the desktop mockup is unchanged. */
@media (max-width:520px){
  html,body{height:100%;overflow:hidden;overscroll-behavior:none}
  body{display:block;min-height:0;background:var(--cream)}
  .phone{position:fixed;inset:0;width:100%;height:100vh;height:100dvh;
    border:0;border-radius:0;box-shadow:none}
  .screen{border-radius:0}
  .statusbar{height:env(safe-area-inset-top,0px);min-height:6px;padding:0}
  .statusbar>*{display:none}
  .tabbar{padding-bottom:max(14px,env(safe-area-inset-bottom,0px))}
  .body{-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
}