/* Fellow dashboard styling, taken from the dashboard prototype so the screen
   faculty were shown is the screen they get. Structure and behavior are
   rebuilt; the look is deliberately unchanged. */

  :root{
    --navy:#002E5B; --blue:#0B6FC4; --cyan:#27B2EA; --teal:#15B7BD;
    --sky:#63C8FF; --pale:#EAF6FC; --mint:#EAF8F8;
    --paper:#ffffff; --shell:#ffffff; --wash:#fafbfc;
    --ink:#26333f; --slate:#6b7885; --line:#e6ecf2; --rule:#eef2f6;
    --amber:#c8862a;
    --font:"Segoe UI","Open Sans",Roboto,Helvetica,Arial,sans-serif;
    --r:16px; --r-sm:10px; --r-lg:22px;
    --sh-sm:0 1px 2px rgba(15,40,70,.05), 0 2px 8px rgba(15,40,70,.05);
    --sh-md:0 2px 6px rgba(15,40,70,.06), 0 10px 26px rgba(15,40,70,.09);
    --sh-lg:0 6px 16px rgba(15,40,70,.09), 0 22px 50px rgba(15,40,70,.14);
    --sh-cyan:0 6px 18px rgba(39,178,234,.32);
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;height:100%;}
  body{background:var(--shell);color:var(--ink);font-family:var(--font);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;}
  button{font-family:inherit;cursor:pointer;}
  :focus-visible{outline:3px solid var(--cyan);outline-offset:2px;}
  h1,h2,h3{margin:0;}
  .up{text-transform:uppercase;letter-spacing:.03em;}
  .eyebrow{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--blue);font-weight:700;margin:0 0 8px;}

  .btn{display:inline-block;border:0;border-radius:999px;background:linear-gradient(135deg,var(--blue),var(--cyan));
    color:#fff;font-size:13px;font-weight:700;padding:11px 24px;text-transform:uppercase;letter-spacing:.06em;
    box-shadow:var(--sh-cyan);transition:transform .16s ease, box-shadow .16s ease, filter .16s ease;}
  .btn:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(39,178,234,.4);filter:brightness(1.04);}
  .btn:active{transform:translateY(0);}
  .btn-block{width:100%;}
  .btn-line{background:#fff;color:var(--blue);border:2px solid #d9e6f1;box-shadow:none;}
  .btn-line:hover{border-color:var(--cyan);color:var(--navy);box-shadow:var(--sh-sm);}
  .btn-sm{font-size:11.5px;padding:9px 18px;}
  .btn-amber{background:linear-gradient(135deg,#d99a3c,var(--amber));box-shadow:0 6px 18px rgba(200,134,42,.28);}
  .btn[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none;transform:none;}

  /* LOGIN */
  .login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:30px 20px;
    background:linear-gradient(140deg,#00224a 0%,#0B6FC4 48%,var(--teal) 105%);}
  .login-card{width:100%;max-width:432px;background:#fff;border-radius:var(--r-lg);overflow:hidden;box-shadow:0 30px 70px rgba(0,20,45,.42);}
  .login-brand{background:linear-gradient(120deg,var(--navy),#0a4a86);padding:22px 34px;}
  .login-brand img{width:184px;display:block;}
  .login-body{padding:28px 34px 30px;}
  .login-card h1{font-size:23px;font-weight:700;color:var(--navy);margin:0 0 6px;}
  .login-card .sub{margin:0 0 22px;color:var(--slate);font-size:14px;}
  .field{margin-bottom:15px;}
  .field label{display:block;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--slate);margin-bottom:6px;}
  .field input,.field select,.field textarea{width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:var(--r-sm);
    font-family:var(--font);font-size:15px;color:var(--ink);background:#fcfdfe;}
  .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--cyan);outline:none;background:#fff;box-shadow:0 0 0 4px rgba(39,178,234,.14);}
  /* Department/School/Center/Unit pill-radio picker on My Profile's Academic
     background card — same design as register.html/complete-your-profile.html's
     own unit-type picker (label.opt), ported here for the same field. */
  .optrow{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:15px;}
  .optrow label.opt{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;
    text-align:center;padding:13px 10px;border:1.5px solid var(--line);border-radius:12px;
    font-size:13.5px;font-weight:600;color:var(--slate);cursor:pointer;background:var(--wash);transition:all .15s;}
  .optrow input{position:absolute;opacity:0;pointer-events:none;}
  .optrow label.opt.sel{border-color:var(--blue);color:var(--navy);background:var(--pale);box-shadow:0 0 0 3px rgba(11,111,196,.1);}
  @media (max-width:480px){.optrow{grid-template-columns:repeat(2,1fr);}}
  /* Show/hide toggle on a password field — the button sits inside the same
     bordered box as the input, not beside it, so focus/hover styling on the
     input still reads as one control. */
  .pwfield{position:relative;}
  .pwfield input{padding-right:42px;}
  .pw-toggle{position:absolute;top:0;right:0;bottom:0;width:42px;display:flex;align-items:center;justify-content:center;
    background:none;border:none;padding:0;color:var(--slate);cursor:pointer;}
  .pw-toggle:hover{color:var(--ink);}
  .pw-toggle:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px;border-radius:var(--r-sm);}
  /* The bare [hidden] attribute doesn't reliably suppress display on an
     inline <svg> the way it does on ordinary HTML elements — spelled out
     explicitly rather than trusted to the UA stylesheet. */
  .pw-toggle svg[hidden]{display:none;}
  /* Example text ("e.g. ...") in a placeholder reading at full input size looks
     like content already typed in, not a hint — shrink it back down. */
  .ph-sm::placeholder{font-size:12.5px;}
  .ph-sm::-webkit-input-placeholder{font-size:12.5px;}
  .ph-sm::-moz-placeholder{font-size:12.5px;}
  .field textarea[readonly]{background:var(--wash);color:var(--slate);}
  .field textarea[readonly]:focus{border-color:var(--line);box-shadow:none;}
  .wordcount{margin:6px 0 0;font-size:12px;color:var(--slate);}
  .login-note{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--line);font-size:12.5px;color:var(--slate);line-height:1.6;}

  /* SHELL */
  .app{display:none;}
  .app.is-on{display:flex;flex-direction:column;min-height:100vh;}
  .login-wrap.is-off{display:none;}

  /* Covers the shell while the initial data load is in flight — the app
     view now shows immediately on a valid session (see has-token above),
     before refresh() has actually populated anything, so without this the
     Fellow would see an empty dashboard for a moment instead of a login
     flash. dashboard.js hides it once that first load resolves. */
  .app-loading{position:fixed;inset:0;z-index:50;background:#fff;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;}
  .app-loading .spin{width:32px;height:32px;border:3px solid var(--line);
    border-top-color:var(--blue);border-radius:50%;animation:app-spin .8s linear infinite;}
  .app-loading p{margin:0;font-size:13.5px;color:var(--slate);}
  @keyframes app-spin{to{transform:rotate(360deg);}}
  @media (prefers-reduced-motion:reduce){.app-loading .spin{animation:none;}}

  /* A styled stand-in for window.confirm() — see confirmDialog() in
     dashboard.js. Centered on the viewport regardless of scroll position,
     which a native confirm() on some browsers does not do. */
  .confirm-overlay{position:fixed;inset:0;z-index:60;background:rgba(0,46,91,.55);
    display:none;align-items:center;justify-content:center;padding:20px;overflow-y:auto;}
  .confirm-overlay.is-on{display:flex;}
  .confirm-card{width:100%;max-width:380px;max-height:calc(100vh - 40px);overflow-y:auto;
    background:#fff;border-radius:var(--r-lg);
    box-shadow:0 30px 70px rgba(0,20,45,.42);padding:26px 28px;animation:confirm-in .18s ease-out;}
  .confirm-card p{margin:0 0 20px;font-size:14px;color:var(--ink);line-height:1.55;}
  .confirm-actions{display:flex;justify-content:flex-end;gap:10px;}
  @keyframes confirm-in{from{opacity:0;transform:translateY(6px) scale(.98);}to{opacity:1;transform:none;}}
  @media (prefers-reduced-motion:reduce){.confirm-card{animation:none;}}

  /* The participation-letter pop-up: same overlay as .confirm-card, its own
     wider card since it holds two options side by side. */
  .letter-popup-card{max-width:620px;text-align:left;}
  .letter-popup-options{display:flex;gap:14px;flex-wrap:wrap;margin:0 0 18px;}
  .letter-popup-option{flex:1 1 220px;border:1px solid var(--line);border-radius:var(--r-sm);padding:16px;}
  .letter-popup-option h3{margin:0 0 4px;font-size:14px;color:var(--navy);}
  .letter-popup-option p{margin:0 0 10px;font-size:12.5px;color:var(--slate);}
  .letter-popup-share{display:flex;gap:6px;margin:0 0 10px;}
  .letter-popup-share a{display:flex;align-items:center;justify-content:center;width:30px;height:30px;
    border-radius:50%;background:var(--wash);border:1px solid var(--line);color:var(--navy);
    font-size:11px;font-weight:700;text-decoration:none;flex:0 0 auto;}
  .letter-popup-share a:hover{background:var(--pale);border-color:var(--cyan);}
  .letter-popup-caption{background:var(--wash);border:1px solid var(--line);border-radius:var(--r-sm);padding:16px;}
  .letter-popup-caption-label{margin:0 0 8px;font-size:11px;font-weight:700;letter-spacing:.1em;
    text-transform:uppercase;color:var(--slate);}
  .letter-popup-caption p{margin:0 0 12px;font-size:13px;line-height:1.6;color:var(--ink);white-space:pre-line;}
  /* "Refer a faculty member" pop-up: same overlay as .confirm-card, its own
     wider card holding the referral form (WDSAI-Referral-Screen.html). */
  .referral-popup-card{max-width:560px;text-align:left;position:relative;}
  .popup-x{position:absolute;top:14px;right:14px;width:28px;height:28px;border:0;
    border-radius:50%;background:var(--wash);color:var(--slate);font-size:18px;
    line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;}
  .popup-x:hover{background:var(--pale);color:var(--navy);}
  .referral-popup-card .f2{display:grid;grid-template-columns:118px 1fr;gap:12px;}
  .referral-popup-card .cnt{float:right;font-weight:400;color:var(--slate);font-size:11px;text-transform:none;letter-spacing:0;}
  .referral-popup-card .rfprompt{margin:0 0 9px;font-size:12.5px;line-height:1.6;color:var(--slate);}
  .referral-popup-card .md-note{margin:18px 0 0;font-size:12.5px;line-height:1.62;color:var(--slate);}
  .referral-popup-card .att{display:flex;gap:12px;align-items:flex-start;background:var(--wash);
    border:1px solid var(--line);border-radius:12px;padding:15px 16px;margin:4px 0 0;}
  .referral-popup-card .att input{flex:0 0 20px;width:20px;height:20px;margin:1px 0 0;accent-color:var(--teal);}
  .referral-popup-card .att label{font-size:13px;line-height:1.62;color:#33424f;}
  .referral-popup-card .md-done{padding:10px 0 0;text-align:center;}
  .referral-popup-card .md-done .tick{width:46px;height:46px;border-radius:50%;background:var(--mint);
    color:var(--teal);font-size:22px;font-weight:800;display:flex;align-items:center;
    justify-content:center;margin:0 auto 16px;}
  .referral-popup-card .md-done h3{margin:0 0 20px;font-size:17px;color:var(--navy);}
  .req{color:#b3372f;}
  .formerr{color:#b3372f;font-size:13px;font-weight:600;margin:14px 0 0;}

  /* The speaker/host/co-host/panelist bio pop-up: same overlay as
     .confirm-card, its own compact card with a photo/avatar up top. */
  .bio-popup-card{max-width:440px;text-align:left;}
  .bio-popup-head{display:flex;gap:14px;align-items:center;}
  .bio-popup-photo{width:56px;height:56px;border-radius:50%;flex:0 0 56px;overflow:hidden;
    background:linear-gradient(140deg,var(--blue),var(--teal));color:#fff;
    display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;}
  .bio-popup-photo img{width:100%;height:100%;object-fit:cover;}

  /* The "View Bio" link on a speaker/host/co-host/panelist's card — set
     apart from the plain-slate role/kind text next to it. */
  .spk-viewbio{background:none;border:0;padding:0;font:inherit;font-style:italic;
    color:var(--blue);font-weight:600;cursor:pointer;}
  .spk-viewbio:hover{text-decoration:underline;}

  @media (max-width:480px){
    .confirm-overlay{padding:10px;}
    .confirm-card{max-height:calc(100vh - 20px);padding:20px 18px;}
    .letter-popup-option{padding:12px;}
  }

  /* Set synchronously by the inline script in <head>, before dashboard.js
     has even loaded, purely so the login card doesn't flash for a Fellow
     who already has a session — dashboard.js's own is-on/is-off classes
     take over once it validates that session, and endSession() removes
     this class too so a real sign-out isn't fought by this rule. */
  html.has-token .login-wrap{display:none;}
  html.has-token .app{display:flex;flex-direction:column;min-height:100vh;}

  .topbar{background:linear-gradient(115deg,var(--navy),#0a4a86 78%,#0d5f9e);padding:13px 26px;display:flex;
    align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;position:relative;z-index:5;}
  .brandlock{display:flex;align-items:center;gap:16px;}
  .brandlock img{width:146px;display:block;}
  .vr{width:1px;height:30px;background:rgba(255,255,255,.35);}
  .prog-name{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:#cdeaff;font-weight:700;line-height:1.3;}
  .topbar-right{display:flex;align-items:center;gap:14px;font-size:13px;color:var(--pale);}
  .topbar-right b{color:#fff;}
  .chip{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:5px 14px;}
  .link-plain{background:none;border:0;color:var(--sky);font-size:13px;padding:0;font-weight:700;}
  .link-plain:hover{text-decoration:underline;}

  .layout{display:grid;grid-template-columns:238px 1fr;align-items:start;flex:1 0 auto;}
  nav.side{padding:20px 14px 16px;background:var(--wash);border-right:1px solid var(--line);min-height:100%;}
  nav.side button{display:block;width:100%;text-align:left;background:transparent;border:0;border-radius:10px;padding:10px 15px;
    font-size:14px;font-weight:600;color:#5c6b7a;margin-bottom:3px;transition:all .15s ease;}
  nav.side button:hover{background:#fff;color:var(--navy);}
  nav.side button:disabled{color:#b7c2cc;cursor:not-allowed;}
  nav.side button:disabled:hover{background:transparent;color:#b7c2cc;}
  nav.side button.on{background:#fff;color:var(--navy);box-shadow:var(--sh-sm);}
  nav.side button.on::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--cyan);margin-right:9px;vertical-align:middle;}
  nav.side .navlabel{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#98a6b4;padding:0 15px;margin:16px 0 7px;font-weight:700;}
  .side-box{margin:12px 4px 0;padding:12px 14px 13px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh-sm);}
  .sbh{display:flex;align-items:center;gap:7px;font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:#a8701c;font-weight:700;margin:0 0 2px;}
  .sbh .sdot{width:7px;height:7px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 3px rgba(200,134,42,.16);}
  .sbh-blue{color:var(--blue);}
  .due-it{padding:9px 0 11px;border-bottom:1px solid var(--rule);}
  .due-it:last-child{border-bottom:0;padding-bottom:2px;}
  .due-it p{margin:0 0 9px;font-size:12px;line-height:1.55;color:var(--slate);}
  .due-it p b{color:var(--navy);font-size:12.5px;}
  nav.side .side-box button.sbtn{display:inline-block;width:auto;margin:0;padding:6px 15px;border-radius:999px;
    border:1.5px solid #d9e6f1;background:#fff;color:var(--blue);font-size:10px;font-weight:700;
    letter-spacing:.08em;text-transform:uppercase;text-align:center;box-shadow:none;}
  nav.side .side-box button.sbtn:hover{border-color:var(--cyan);color:var(--navy);background:#fff;}
  nav.side .side-box button.sbtn-amber{background:linear-gradient(135deg,#d99a3c,var(--amber));border:0;color:#fff;
    box-shadow:0 4px 10px rgba(200,134,42,.26);}
  nav.side .side-box button.sbtn-amber:hover{color:#fff;filter:brightness(1.05);}
  .upnext{padding:9px 0 11px;}
  .und{display:inline-block;background:linear-gradient(150deg,var(--pale),var(--mint));border-radius:9px;padding:5px 12px;
    font-size:12px;font-weight:700;color:var(--navy);letter-spacing:.04em;margin-bottom:8px;
    background-image:repeating-linear-gradient(0deg,transparent 0,transparent 9px,rgba(11,111,196,.07) 9px,rgba(11,111,196,.07) 10px),
    repeating-linear-gradient(90deg,transparent 0,transparent 9px,rgba(11,111,196,.07) 9px,rgba(11,111,196,.07) 10px),
    linear-gradient(150deg,var(--pale),var(--mint));}
  .unt{font-size:12.5px;font-weight:700;color:var(--navy);line-height:1.45;}
  .unm{font-size:11px;color:var(--slate);margin:3px 0 0;}

  .view{display:none;}
  .view.on{display:block;}
  .pad{padding:24px 30px 44px;max-width:1020px;}
  .vhead{margin-bottom:18px;}
  .vhead h1{font-size:25px;color:var(--navy);}
  .vhead .purpose{margin:7px 0 0;font-size:13.5px;color:var(--slate);max-width:70ch;line-height:1.6;}

  /* HERO */
  .hero{margin:22px 30px 0;border-radius:var(--r-lg);color:#fff;padding:28px 32px;
    background:linear-gradient(125deg,#0B6FC4 0%,#1a93d8 42%,var(--teal) 100%);
    box-shadow:var(--sh-lg);position:relative;overflow:hidden;
    display:flex;gap:26px;align-items:center;justify-content:space-between;flex-wrap:wrap;}
  .hero::after{content:"";position:absolute;right:-70px;top:-90px;width:320px;height:320px;border-radius:50%;
    background:radial-gradient(circle,rgba(255,255,255,.2),transparent 62%);}
  .hero .inner{position:relative;z-index:2;flex:1 1 380px;}
  .hero h1{font-size:31px;font-weight:700;line-height:1.15;margin:0;text-shadow:0 2px 10px rgba(0,30,60,.18);}
  .status-pill{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.4);
    border-radius:999px;padding:6px 16px 6px 12px;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
    color:#fff;margin-bottom:13px;}
  .status-pill .sd{width:8px;height:8px;border-radius:50%;background:var(--sky);box-shadow:0 0 0 4px rgba(99,200,255,.35);}
  .hero .plead{font-size:16.5px;font-weight:600;color:#fff;margin:13px 0 9px;/*max-width:62ch;*/line-height:1.55;}
  .hero .ptext{margin:0 0 7px;color:#dff3ff;font-size:13.5px;/*max-width:66ch;*/line-height:1.6;}
  .capstmt{margin:22px 0 4px;padding-left:16px;border-left:3px solid var(--cyan);
    font-size:16.5px;line-height:1.6;color:#fff;font-weight:600;max-width:72ch;}
  .hero-stats{display:flex;gap:12px;margin-top:16px;flex-wrap:wrap;}
  .stat{background:rgba(255,255,255,.17);border:1px solid rgba(255,255,255,.26);border-radius:14px;padding:12px 18px;min-width:126px;}
  .stat .n{font-size:23px;font-weight:700;line-height:1.1;color:#fff;}
  .stat .l{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:#cdefff;margin-top:5px;font-weight:700;}
  .hero-badge{position:relative;z-index:2;flex:0 0 auto;text-align:center;width:220px;margin-right:26px;}
  .hero-badge .bwrap{position:relative;display:inline-block;}
  .hero-badge img.bimg{width:172px;display:block;filter:grayscale(1) brightness(1.55) opacity(.5);}
  .hero-av{position:absolute;left:-24px;bottom:-6px;width:100px;height:100px;border-radius:50%;border:3px solid #fff;
    background:rgba(255,255,255,.24);display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;
    box-shadow:0 6px 16px rgba(0,30,60,.3);transition:transform .15s ease;}
  .hero-av:hover{transform:scale(1.06);}
  .hero-av img{width:100%;height:100%;object-fit:cover;}
  .hero-av .plus{font-size:24px;font-weight:400;color:#fff;line-height:1;}
  .hero-av .avlb{position:absolute;inset:auto 0 5px;font-size:7px;letter-spacing:.08em;text-transform:uppercase;color:#fff;font-weight:700;}
  .hero-badge .cap{display:flex;align-items:center;justify-content:center;gap:6px;font-size:10px;letter-spacing:.14em;
    text-transform:uppercase;color:#d3edff;font-weight:700;margin-top:10px;line-height:1.5;}
  .hero-badge .cap svg{width:12px;height:12px;fill:#d3edff;flex:0 0 12px;}

  /* PURPOSE */
  .purpose-band{margin:20px 30px 0;background:#fff;border:1px solid var(--line);border-radius:var(--r);
    padding:22px 26px 22px 30px;position:relative;overflow:hidden;box-shadow:var(--sh-sm);}
  .purpose-band::before{content:"";position:absolute;left:13px;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--cyan),var(--teal));}
  .purpose-band h2{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--blue);font-weight:700;margin:0 0 9px;}
  .purpose-band p{margin:0 0 9px;font-size:15.5px;line-height:1.68;color:var(--ink);max-width:76ch;}
  .purpose-band p:last-child{margin-bottom:0;}
  .purpose-band .lead{font-size:17px;color:var(--navy);font-weight:600;}

  /* CARDS */
  .card{background:#fff;border:1px solid var(--line);border-radius:var(--r);margin-bottom:20px;box-shadow:var(--sh-sm);transition:box-shadow .2s ease;}
  .card:hover{box-shadow:var(--sh-md);}
  .card-head{padding:20px 24px 0;}
  .card-head h2{font-size:14.5px;font-weight:700;color:var(--navy);text-transform:uppercase;letter-spacing:.06em;margin:0 0 3px;}
  .card-head p{margin:0;font-size:13px;color:var(--slate);}
  .card-head .nf-area{font-size:15px;font-weight:700;color:var(--navy);margin:2px 0 4px;}
  .card-head .nf-line{font-size:13px;color:var(--slate);margin:0 0 4px;}
  .card-head .nf-due{font-size:12.5px;color:#a8701c;font-weight:600;}

  /* Contribute's detail card puts a Close button in its own card-head,
     alongside the title/subtitle — .card-head elsewhere in this file is a
     plain block (its other users, like noteFormCard, put their close
     action at the bottom instead), so without this the button just stacks
     under the text instead of sitting beside it. Matches how console.css's
     .card-head already handles the identical title+subtitle+button shape. */
  #contribFormCard .card-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap;}
  .card-body{padding:16px 24px 24px;}
  .cols{display:grid;grid-template-columns:1fr 328px;gap:20px;align-items:start;}
  .cols2{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start;}

  /* Contribute's Pitch/Propose pair: stretched to equal height rather than
     each sized to its own content, so a difference in field count between
     them doesn't read as one card being more important than the other.
     Stretching a card to height:100% makes its own margin-bottom overflow
     invisibly past the grid's own box instead of pushing the next element
     down, so the 20px gap below the pair is added on the grid itself. */
  #v-contribute .cols2{align-items:stretch;margin-bottom:20px;}
  #v-contribute .cols2 > div > .card{height:100%;margin-bottom:0;}

  /* NOTEBOOK MOTIF */
  .ruled{
    background-image:repeating-linear-gradient(180deg,transparent 0,transparent 30px,var(--rule) 30px,var(--rule) 31px);
    background-position:0 6px;
  }
  .notebook{position:relative;padding-left:34px;}
  .notebook::before{content:"";position:absolute;left:19px;top:14px;bottom:14px;width:2px;background:#f2cdb0;}
  .notebook::after{content:"";position:absolute;left:8px;top:20px;width:5px;height:5px;border-radius:50%;
    background:#dbe4ec;box-shadow:0 26px 0 #dbe4ec,0 52px 0 #dbe4ec,0 78px 0 #dbe4ec;}
  .prompt{margin:0 0 13px;padding-left:20px;position:relative;font-size:14px;line-height:1.62;color:var(--ink);}
  .prompt::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:50%;
    border:2px solid var(--cyan);background:#fff;}
  .prompt:last-child{margin-bottom:0;}
  .prompt b{color:var(--navy);}

  /* Journal writing view's session header, above the j1-j5 .field prompts —
     WDSAI-Journal-Screen.html's .wsession/.wmeta/.wsaved. */
  .wsession{margin:0 0 22px;padding-bottom:15px;border-bottom:1px solid var(--line);}
  .wsession h3{margin:0 0 6px;font-size:16px;font-weight:700;color:var(--navy);line-height:1.4;}
  .wmeta{margin:0 0 4px;font-size:12.5px;color:var(--slate);}
  .wmeta .sep{padding:0 7px;color:#c3ced9;}
  .wsaved{margin:0;font-size:12px;color:#9aa8b6;}

  .next{border-top:3px solid transparent;background-image:linear-gradient(#fff,#fff),linear-gradient(90deg,var(--cyan),var(--teal));
    background-origin:border-box;background-clip:padding-box,border-box;}
  .when{display:flex;gap:16px;align-items:center;flex-wrap:wrap;}
  .datebox{border-radius:14px;padding:12px 16px;text-align:center;min-width:84px;}
  .datebox .m{display:block;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);}
  .datebox .d{display:block;font-size:26px;font-weight:700;line-height:1.1;color:var(--navy);}
  .datebox .y{display:block;font-size:11px;color:var(--slate);}
  .next h3{font-size:17px;font-weight:700;color:var(--navy);margin:0 0 4px;line-height:1.3;}
  .meta{margin:0;font-size:12.5px;color:var(--slate);}
  .meta-flag{color:#a8701c;font-weight:700;}

  /* JOIN PANEL */
  /* Grid, not flex — a flex item resists shrinking a long, unbroken (nowrap)
     string below its own full width even with min-width:0 in some nesting
     cases; minmax(0,1fr) has no such floor, so the link column reliably
     truncates instead of pushing the whole page into horizontal scroll. */
  .join{margin-top:15px;background:var(--wash);border:1px solid var(--line);border-radius:12px;padding:14px 16px;
    display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;}
  .join .jl{min-width:0;}
  .join .jt{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--slate);font-weight:700;margin:0 0 4px;}
  .join .ju{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    font-size:13.5px;color:var(--blue);font-weight:600;margin:0;}
  .join .jd{font-size:12px;color:var(--slate);margin:5px 0 0;}
  .join-soon{font-size:12px;color:var(--slate);margin:0;}
  .join .jbtns{display:flex;gap:8px;}
  @media(max-width:480px){
    .join{grid-template-columns:1fr;}
  }
  /* Home's Next Session card is narrower than a Sessions-tab row, so the
     grid above wraps "Joining details" awkwardly there — stack instead,
     scoped to this one container rather than changing the shared default.
     Still grid, not flex, and still an explicit minmax(0,1fr) column — see
     the comment above; a flex column here lets the long nowrap link text
     overflow the card instead of truncating. */
  #nextBody .join{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;}

  /* SPEAKER */
  .spk{display:flex;align-items:center;gap:11px;}
  .spk-av{width:44px;height:44px;border-radius:50%;background:linear-gradient(140deg,var(--blue),var(--teal));color:#fff;
    display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex:0 0 44px;
    box-shadow:0 3px 9px rgba(11,111,196,.28);overflow:hidden;}
  .spk-av img{width:100%;height:100%;object-fit:cover;}
  .spk .sn{font-size:13.5px;font-weight:700;color:var(--navy);line-height:1.3;}
  .spk .sr{font-size:12px;color:var(--slate);line-height:1.4;}
  .spk-lb{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);font-weight:700;margin:13px 0 7px;}
  .spk-sm{margin-top:8px;}
  .spk-sm .spk-av{width:62px;height:62px;flex-basis:62px;font-size:11px;}
  .spk-sm .sn{font-size:12.5px;}
  .spk-sm .sr{font-size:11.5px;}

  /* WHIMSY, EDUCATION-GRADE */
  .hl{background:linear-gradient(180deg,transparent 58%,rgba(255,214,90,.55) 58%);padding:0 2px;border-radius:2px;}
  .sticky{background:#FFFBEA;border:1px solid #F1E6BC;border-radius:3px 3px 12px 12px;padding:16px 16px 12px;position:relative;
    box-shadow:var(--sh-sm);transform:rotate(-.5deg);
    background-image:repeating-linear-gradient(180deg,transparent 0,transparent 29px,#f0e3ae 29px,#f0e3ae 30px);}
  .sticky::before{content:"";position:absolute;top:-10px;left:50%;transform:translateX(-50%) rotate(-2deg);width:88px;height:20px;
    background:rgba(39,178,234,.22);border:1px solid rgba(39,178,234,.16);border-radius:2px;}
  .sticky .prompt::before{border-color:#d9a83c;}
  .has-clip{position:relative;}
  .clip{position:absolute;top:-11px;right:24px;width:20px;height:44px;z-index:3;}
  .vhead h1{position:relative;display:inline-block;padding-bottom:4px;}
  .vhead h1::after{content:"";position:absolute;left:2px;bottom:-6px;width:76px;height:7px;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 76 7'%3E%3Cpath d='M2 4.5 C 9 1.5, 15 6.5, 22 4 S 35 1.5, 42 4 S 57 6.5, 63 3.5 S 71 2, 74 4' fill='none' stroke='%2327B2EA' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat;background-size:76px 7px;}
  .taped{position:relative;margin-top:12px;}
  .taped::before{content:"";position:absolute;top:-9px;left:14px;transform:rotate(-4deg);width:64px;height:17px;
    background:rgba(21,183,189,.2);border:1px solid rgba(21,183,189,.15);border-radius:2px;}
  .datebox{background-image:
    repeating-linear-gradient(0deg,transparent 0,transparent 11px,rgba(11,111,196,.07) 11px,rgba(11,111,196,.07) 12px),
    repeating-linear-gradient(90deg,transparent 0,transparent 11px,rgba(11,111,196,.07) 11px,rgba(11,111,196,.07) 12px),
    linear-gradient(150deg,var(--pale),var(--mint));}

  .bar{height:10px;background:#eef3f8;border-radius:999px;margin:8px 0 16px;overflow:hidden;}
  .bar span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--cyan),var(--teal));width:50%;}
  .track{list-style:none;margin:0;padding:0;}
  .track li{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--rule);}
  .track li:last-child{border-bottom:0;}
  .dot{flex:0 0 22px;width:22px;height:22px;margin-top:2px;border-radius:50%;border:2px solid #d7e2ec;background:#fff;
    display:flex;align-items:center;justify-content:center;font-size:11px;color:#fff;font-weight:700;}
  .track li.done .dot{background:linear-gradient(140deg,var(--cyan),var(--teal));border-color:transparent;}
  .track .t{font-size:14px;line-height:1.4;color:var(--ink);}
  .track .s{display:block;font-size:12px;color:var(--slate);margin-top:2px;}
  .track li.done .s{color:var(--teal);font-weight:600;}

  /* AWARD */
  .award{display:grid;grid-template-columns:1fr 190px;gap:22px;align-items:center;}
  .cert{position:relative;border-radius:14px;overflow:hidden;box-shadow:var(--sh-md);}
  .cert-inner{background:#fff;border:1px solid var(--line);padding:20px 22px;text-align:center;filter:blur(2.5px) grayscale(.55) opacity(.78);}
  .cert-top{height:5px;background:linear-gradient(90deg,var(--blue),var(--cyan),var(--teal));margin:-20px -22px 16px;}
  .cert h4{font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--blue);margin:0 0 8px;font-weight:700;}
  .cert .nm{font-size:20px;font-weight:700;color:var(--navy);margin:0 0 4px;}
  .cert .ttl{font-size:11.5px;color:var(--slate);margin:0 0 14px;line-height:1.5;}
  .cert .sigs{display:flex;justify-content:center;gap:16px;}
  .cert .sig{flex:1;max-width:96px;}
  .cert .sig .ln{height:1px;background:#c9d8e5;margin-bottom:5px;}
  .cert .sig .lb{font-size:7.5px;letter-spacing:.1em;text-transform:uppercase;color:#8e9ca9;font-weight:700;}
  .cert-lock{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;}
  .cert-lock .ic{width:46px;height:46px;border-radius:50%;background:linear-gradient(140deg,var(--navy),#0a4a86);
    display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px rgba(0,46,91,.3);}
  .cert-lock .ic svg{width:20px;height:20px;fill:#fff;}
  .cert-lock .tx{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--navy);
    background:rgba(255,255,255,.94);padding:5px 13px;border-radius:999px;box-shadow:var(--sh-sm);}
  .award-badge{text-align:center;}
  .award-badge img{width:132px;display:block;margin:0 auto 10px;filter:grayscale(1) opacity(.34);}
  .award-badge .cap{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate);font-weight:700;line-height:1.55;}
  .unlock-note{margin:16px 0 0;padding:12px 15px;background:var(--wash);border:1px solid var(--line);border-radius:12px;font-size:13px;color:var(--navy);}
  .unlock-note b{color:var(--blue);}

  .plate{background:linear-gradient(130deg,var(--navy),#0a4a86 70%,#0d6bab);border-radius:var(--r);color:#fff;padding:24px 20px;
    text-align:center;margin-bottom:18px;box-shadow:var(--sh-md);position:relative;overflow:hidden;}
  .plate::after{content:"";position:absolute;right:-50px;top:-60px;width:190px;height:190px;border-radius:50%;
    background:radial-gradient(circle,rgba(99,200,255,.3),transparent 65%);}
  .plate .l{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--sky);font-weight:700;margin:0 0 8px;position:relative;z-index:2;}
  .plate .n{font-size:23px;font-weight:700;margin:0;position:relative;z-index:2;}
  .plate .n .post{color:#6e93bb;}
  .plate .sub{margin:9px 0 0;font-size:12px;color:#cfeaff;position:relative;z-index:2;}

  .letter-row{display:flex;align-items:center;gap:9px;margin:8px 0 0;padding:9px 12px;background:#f2faf9;border:1px solid #d8eeec;border-radius:9px;}
  .letter-row svg{width:15px;height:15px;fill:var(--teal);flex:0 0 15px;}
  .letter-row p{margin:0;font-size:12.5px;color:#2f5b58;line-height:1.45;}
  .letter-row a{color:#0e7c80;font-weight:700;text-decoration:none;}
  .letter-row.locked{background:#f7f9fb;border-color:#e6ecf2;}
  .letter-row.locked svg{fill:#9aa8b6;}
  .letter-row.locked p{color:var(--slate);}
  /* Session recording row — same shape as .letter-row, tinted blue so it
     reads as a separate item rather than a second copy of the letter row. */
  .rec-row{background:#f4f8fc;border-color:#dbe7f3;}
  .rec-row svg{fill:var(--blue);}
  .rec-row p{color:#33506b;}
  .rec-row a{color:var(--blue);}
  .lockline{margin:12px 0 0;font-size:12.5px;color:var(--slate);line-height:1.55;}

  /* Sessions tab's session-count card — WDSAI-Sessions-Screen.html's .prog
     progress ring, real attended/total drawn by JS (see renderSessions()). */
  .prog{display:flex;align-items:center;gap:28px;margin:0 0 22px;padding:22px 26px;
    background:var(--wash);border:1px solid var(--line);border-radius:14px;flex-wrap:wrap;}
  .prog .ring{flex:0 0 auto;position:relative;width:104px;height:104px;}
  .prog .ring svg{transform:rotate(-90deg);}
  .prog .rt{position:absolute;inset:0;display:flex;flex-direction:column;
    align-items:center;justify-content:center;}
  .prog .rn{font-size:22px;font-weight:800;color:var(--navy);line-height:1;}
  .prog .rl{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate);
    font-weight:700;margin-top:4px;}
  .prog .px{flex:1 1 auto;min-width:0;}
  .prog .px p{margin:0 0 8px;font-size:13.5px;line-height:1.7;color:#33424f;max-width:76ch;}
  .prog .px p:last-child{margin-bottom:0;}
  .prog .px p.psec{color:var(--slate);font-size:13px;}

  /* Sessions tab's "About session participation" card and its "Session
     guidelines" pop-up — WDSAI-Sessions-Screen.html's .ptc/.pth/.plink/.pgh. */
  .ptc .card-body{padding:20px 24px;}
  .pth{margin:0 0 8px;font-size:12px;letter-spacing:.13em;text-transform:uppercase;
    font-weight:800;color:var(--navy);}
  .ptc p{margin:0 0 10px;font-size:13.5px;line-height:1.7;color:#33424f;max-width:82ch;}
  .plink{background:none;border:0;padding:0;font-size:13px;font-weight:700;color:var(--blue);
    cursor:pointer;text-decoration:underline;font-family:inherit;}
  .guidelines-popup-card{max-width:600px;text-align:left;max-height:calc(100vh - 40px);overflow-y:auto;}
  .guidelines-popup-card .pgh{margin:18px 0 6px;font-size:13.5px;color:var(--navy);font-weight:700;}
  .guidelines-popup-card .pgh:first-of-type{margin-top:0;}
  .guidelines-popup-card p{margin:0 0 10px;font-size:13.5px;line-height:1.7;color:#33424f;}

  /* "Upcoming" card — core areas with no date on either run. */
  .lrow{display:flex;align-items:baseline;justify-content:space-between;gap:20px;
    padding:12px 0;border-top:1px solid var(--line);}
  .lrow:first-of-type{border-top:0;padding-top:2px;}
  .lt{font-size:13.5px;color:#33424f;line-height:1.5;}
  .lm{flex:0 0 auto;font-size:12.5px;color:var(--slate);white-space:nowrap;}
  .pp-sec{padding:15px 0;border-top:1px solid #e6ecf2;}
  .pp-sec:first-of-type{border-top:0;padding-top:2px;}
  .pp-sec h3{margin:0 0 5px;font-size:14px;color:var(--navy);font-weight:700;}
  .pp-sec p{margin:0;font-size:13px;line-height:1.62;color:var(--slate);}
  .pp-num{display:inline-block;width:26px;font-size:11.5px;font-weight:800;color:var(--teal);letter-spacing:.08em;}

  .srow{display:flex;gap:16px;padding:15px 0;border-bottom:1px solid var(--rule);align-items:center;flex-wrap:wrap;}
  .srow:last-child{border-bottom:0;}
  .srow .sm{flex:1 1 230px;min-width:190px;}
  .srow h3{font-size:15px;font-weight:700;color:var(--navy);margin:0 0 3px;line-height:1.35;}
  .pill{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#0d8b90;
    background:var(--mint);border:1px solid #c2e7e8;border-radius:999px;padding:7px 15px;}
  .pill-due{color:#a8701c;background:#fdf5e9;border-color:#f0dcbd;}
  .pill-grey{color:#4a5966;background:#f4f7fa;border-color:#e2e9f0;}
  .muted{opacity:.55;}

  .avatar{width:108px;height:108px;border-radius:50%;margin:0 auto 14px;background:linear-gradient(150deg,var(--pale),var(--mint));
    display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:0 0 0 4px #fff,0 0 0 7px rgba(39,178,234,.45);}
  .avatar img{width:100%;height:100%;object-fit:cover;display:block;}
  .avatar span{font-size:11px;color:var(--slate);font-weight:600;}
  .pcenter{text-align:center;}
  .hint{font-size:12px;color:var(--slate);margin:10px 0 0;line-height:1.55;}

  dl.kv{margin:0;padding:0;}
  dl.kv div{margin-bottom:13px;}
  dl.kv dt{font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--slate);margin:0 0 2px;}
  dl.kv dd{margin:0;font-size:14.5px;color:var(--ink);}
  .kv-hi{background:var(--wash);border:1px solid var(--line);border-radius:12px;padding:13px 15px;margin-bottom:15px;}
  .kv-hi dt{color:var(--blue);}
  .kv-hi dd{font-size:17px;font-weight:700;color:var(--navy);}
  .kv-hi .note{display:block;font-size:11.5px;color:var(--slate);font-weight:400;margin-top:3px;}

  .taglist{display:flex;gap:7px;flex-wrap:wrap;margin:4px 0 0;}
  .tag{background:var(--wash);border:1px solid var(--line);border-radius:999px;padding:5px 13px;font-size:12.5px;color:var(--navy);}
  .quote{background:var(--wash);border-left:4px solid var(--cyan);border-radius:0 12px 12px 0;padding:13px 16px;font-size:13.5px;line-height:1.6;color:var(--ink);margin:0;}
  .filerow{display:flex;align-items:center;gap:12px;background:var(--wash);border:1px solid var(--line);border-radius:12px;padding:11px 14px;}
  .filerow .ic{width:34px;height:34px;border-radius:9px;background:linear-gradient(140deg,var(--blue),var(--cyan));color:#fff;
    display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex:0 0 34px;}
  .filerow .fn{font-size:13.5px;font-weight:600;color:var(--navy);}
  .filerow .fs{font-size:11.5px;color:var(--slate);}

  .partners{display:flex;align-items:center;justify-content:center;gap:22px;flex-wrap:wrap;padding:4px 0 2px;}
  .partners .pbox{width:150px;/*height:44px;*/display:flex;align-items:center;justify-content:center;}
  .partners img{max-width:100%;max-height:100%;width:auto;height:auto;display:block;opacity:.92;}
  /*.partners .sep{width:1px;height:30px;background:var(--line);}*/

  .review-box{background:#fdf5e9;border:1px solid #f0dcbd;border-left:4px solid var(--amber);
    border-radius:0 10px 10px 0;padding:13px 16px;margin:14px 0 4px;}
  .review-box-head{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#a8701c;margin:0 0 6px;}
  .review-box p{margin:0;font-size:13.5px;line-height:1.6;color:var(--ink);}

  .switch-row{display:flex;gap:12px;align-items:flex-start;background:var(--wash);border:1px solid var(--line);
    border-radius:12px;padding:15px;margin-bottom:16px;}
  .switch{flex:0 0 auto;position:relative;width:46px;height:26px;border-radius:999px;background:#cbd8e4;border:0;padding:0;transition:background .2s;}
  .switch::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;
    transition:transform .2s;box-shadow:0 2px 5px rgba(0,46,91,.24);}
  .switch[aria-pressed="true"]{background:linear-gradient(135deg,var(--cyan),var(--teal));}
  .switch[aria-pressed="true"]::after{transform:translateX(20px);}
  .switch-row p{margin:0;font-size:13px;line-height:1.5;font-weight:700;color:var(--navy);}
  .switch-row p em{display:block;font-style:normal;font-weight:400;color:var(--slate);font-size:12px;margin-top:3px;}
  .share{background:var(--wash);border-left:4px solid var(--cyan);border-radius:0 12px 12px 0;padding:14px 16px;margin:0 0 12px;font-size:14px;line-height:1.6;}
  .rowb{display:flex;gap:10px;flex-wrap:wrap;}
  .toast{font-size:12px;color:var(--teal);font-weight:700;margin:10px 0 0;min-height:16px;}

  /* ---------- Recognition: "Showcase your Fellowship" ---------- */
  .preview-note{margin:0 0 16px;padding:11px 14px;background:#f7f9fb;border:1px solid var(--line);
    border-radius:10px;font-size:12.5px;line-height:1.55;color:var(--slate);}
  .spec-row{padding:17px 0;border-top:1px solid var(--rule);}
  .spec-row:first-of-type{border-top:0;padding-top:2px;}
  .spec-row h3{margin:0 0 4px;font-size:13.5px;color:var(--navy);font-weight:700;}
  .spec-row .say{margin:0 0 10px;font-size:12.5px;line-height:1.55;color:var(--slate);}
  .spec-lock{display:flex;align-items:center;justify-content:space-between;gap:14px;
    background:var(--wash);border:1px solid var(--rule);border-radius:10px;padding:12px 14px;}
  .spec-lock.unlocked{background:var(--mint);border-color:#c2e7e8;}
  .spec-lock .lw{display:flex;align-items:center;gap:9px;min-width:0;}
  .spec-lock .lk{width:14px;height:14px;fill:#9aa8b6;flex:0 0 14px;}
  .spec-lock.unlocked .lk{fill:#0d8b90;}
  .spec-lock .lt{font-size:12.5px;color:var(--slate);line-height:1.5;}
  .spec-lock.unlocked .lt{color:#0d8b90;font-weight:600;}
  .spec-copy{flex:0 0 auto;font-size:11.5px;font-weight:700;color:var(--blue);background:#fff;
    border:1px solid #d7e3ee;border-radius:999px;padding:6px 13px;cursor:pointer;}
  .spec-copy:hover{background:#f2f8fd;}
  .spec-copy[disabled]{color:#a9b8c6;border-color:var(--rule);background:#fbfcfd;cursor:default;}
  .spec-copy[disabled]:hover{background:#fbfcfd;}

  /* ---------- Recognition: "Share your participation" ---------- */
  .postimg{margin:0 0 20px;padding-bottom:22px;border-bottom:1px solid var(--rule);
    display:flex;flex-direction:column;align-items:center;text-align:center;}
  .pi-stack{position:relative;display:inline-block;}
  .pi-circle{width:150px;height:150px;border-radius:50%;padding:6px;
    background:linear-gradient(140deg,#0B6FC4 0%,#1a93d8 45%,#15B7BD 100%);
    box-shadow:0 10px 24px rgba(15,40,70,.16);}
  .pi-inner{width:100%;height:100%;border-radius:50%;overflow:hidden;background:#eef4f9;
    display:flex;align-items:center;justify-content:center;}
  .pi-inner img{width:100%;height:100%;object-fit:cover;display:block;}
  .pi-inner svg{width:52px;height:52px;fill:#b9cbdb;}
  .pi-ribbon{position:absolute;left:50%;bottom:-16px;transform:translateX(-50%);
    background:var(--navy);color:#fff;border-radius:12px;padding:8px 18px;white-space:nowrap;
    box-shadow:0 5px 14px rgba(0,30,60,.3);line-height:1.25;}
  .pi-ribbon .l1{display:block;font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;}
  .pi-ribbon .l2{display:block;font-size:13px;font-weight:800;letter-spacing:.06em;color:var(--cyan);}
  .pi-note{margin:26px 0 0;font-size:12px;color:var(--slate);}
  .share-tabs{display:flex;gap:7px;margin:0 0 14px;flex-wrap:wrap;}
  .share-tab{font-size:11.5px;font-weight:700;padding:7px 13px;border-radius:999px;
    border:1px solid #d7e3ee;background:#fff;color:var(--slate);cursor:pointer;}
  .share-tab.on{background:var(--navy);border-color:var(--navy);color:#fff;}
  .share-more{margin:10px 0 0;font-size:12px;font-weight:700;color:var(--blue);background:none;
    border:0;padding:0;cursor:pointer;text-decoration:underline;}
  .social{display:flex;gap:9px;align-items:center;margin:16px 0 0;}
  .social a{width:36px;height:36px;border-radius:50%;border:1px solid #d7e3ee;background:#fff;
    display:flex;align-items:center;justify-content:center;text-decoration:none;}
  .social a:hover{background:#f2f8fd;border-color:#b9d3e8;}
  .social svg{width:15px;height:15px;fill:var(--blue);}

  .routes{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:0 0 20px;}
  .route{background:#fff;border:1px solid var(--line);border-radius:var(--r);
    box-shadow:var(--sh-sm);padding:24px 26px;display:flex;flex-direction:column;}
  .route h2{margin:0 0 8px;font-size:16.5px;color:var(--navy);font-weight:700;line-height:1.35;}
  .route p{margin:0 0 18px;font-size:13.5px;line-height:1.68;color:#33424f;flex:1 1 auto;}
  .route.on{border-color:var(--blue);box-shadow:0 0 0 2px rgba(11,111,196,.12),var(--sh-sm);}

  .panel{display:none;}
  .panel.on{display:block;}
  .panel .card{margin-bottom:20px;}

  .whyhead{margin:0 0 12px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
    font-weight:800;color:var(--slate);}
  .why{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:0 0 20px;}
  .why .w{background:var(--wash);border:1px solid var(--line);border-radius:12px;padding:18px 20px;}
  .why .w p{margin:0;font-size:13px;line-height:1.65;color:#33424f;}

  .alert{background:#fff;border:1px solid var(--line);border-left:4px solid var(--cyan);border-radius:14px;padding:15px 18px;
    margin-bottom:20px;display:flex;gap:14px;align-items:center;flex-wrap:wrap;box-shadow:var(--sh-sm);}
  .alert p{margin:0;flex:1 1 240px;font-size:13.5px;}
  .alert b{color:var(--navy);}
  .alert-amber{border-left-color:var(--amber);}

  .foot{background:linear-gradient(115deg,var(--navy),#0a4a86);color:var(--pale);font-size:12px;padding:20px 30px;line-height:1.7;flex-shrink:0;margin-top:auto;}
  .foot a{color:var(--sky);text-decoration:none;}
  .foot-inner{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;}
  .foot-buddy{display:flex;align-items:center;gap:13px;max-width:430px;}
  .buddy{width:40px;height:48px;flex:0 0 40px;animation:bbob 3.6s ease-in-out infinite;}
  .buddy .eye{transform-origin:center;animation:blink 4.2s infinite;}
  .buddy .tip{animation:tipglow 2.4s ease-in-out infinite;}
  @keyframes bbob{0%,100%{transform:translateY(0);}50%{transform:translateY(-3px);}}
  @keyframes blink{0%,90%,100%{transform:scaleY(1);}94%{transform:scaleY(.08);}}
  @keyframes tipglow{0%,100%{opacity:.55;}50%{opacity:1;}}
  .fq{transition:opacity .5s ease;}
  .fq.fade{opacity:0;}
  .fq p{margin:0;font-size:12.5px;font-style:italic;color:#dcefff;line-height:1.5;}
  .fq span{font-size:10.5px;color:#8fb7d4;letter-spacing:.04em;}

  @media (max-width:880px){
    .layout{grid-template-columns:1fr;}
    nav.side{padding:12px;border-right:0;border-bottom:1px solid var(--line);}
    nav.side .navrow{display:flex;overflow-x:auto;gap:6px;}
    nav.side button{width:auto;white-space:nowrap;margin:0;}
    nav.side .navlabel{display:none;}
    .side-box{margin:10px 0 0;}
    .cols,.cols2,.award{grid-template-columns:1fr;}
    .routes,.why{grid-template-columns:1fr;}
    .pad{padding:18px 16px 34px;}
    .hero,.purpose-band{margin-left:16px;margin-right:16px;}
    .hero{padding:24px 20px;}
    .hero h1{font-size:24px;}
    .hero .ptext{display:none;}
    .hero-badge{width:100%;margin-right:0;}
    .hero-badge img.bimg{width:128px;}
    .prog-name,.vr{display:none;}
  }
  /* MOTION: draw the eye only where action is wanted */
  @keyframes floaty{0%,100%{transform:translateY(0);}50%{transform:translateY(-7px);}}
  .hero-badge .bwrap{animation:floaty 6s ease-in-out infinite;}
  @keyframes ringpulse{0%{box-shadow:0 6px 16px rgba(0,30,60,.3),0 0 0 0 rgba(255,255,255,.55);}
    70%{box-shadow:0 6px 16px rgba(0,30,60,.3),0 0 0 13px rgba(255,255,255,0);}
    100%{box-shadow:0 6px 16px rgba(0,30,60,.3),0 0 0 0 rgba(255,255,255,0);}}
  .hero-av{animation:ringpulse 2.6s ease-out infinite;}
  .hero-av.has-photo{animation:none;}
  @keyframes dotpulse{0%{box-shadow:0 0 0 0 rgba(200,134,42,.45);}70%{box-shadow:0 0 0 8px rgba(200,134,42,0);}100%{box-shadow:0 0 0 0 rgba(200,134,42,0);}}
  .sbh .sdot{animation:dotpulse 2.2s ease-out infinite;}
  @keyframes fillin{from{width:0;}}
  .bar span{animation:fillin 1.1s ease-out;}
  .plate::before{content:"";position:absolute;top:0;bottom:0;left:-80%;width:46%;z-index:1;
    background:linear-gradient(105deg,transparent,rgba(255,255,255,.16),transparent);transform:skewX(-18deg);
    animation:sheen 6.5s ease-in-out infinite;}
  @keyframes sheen{0%,55%{left:-80%;}78%{left:135%;}100%{left:135%;}}
  .vhead-row{display:flex;justify-content:space-between;align-items:center;gap:22px;flex-wrap:wrap;margin-bottom:6px;perspective:800px;}
  .vhead-row .vhead{margin-bottom:12px;}
  .coin-wrap{flex:0 0 auto;text-align:center;padding-right:10px;}
  .coin{position:relative;width:116px;height:118px;margin:0 auto;transform-style:preserve-3d;animation:swirl 9s linear infinite;}
  .coin img{position:absolute;inset:0;width:100%;height:auto;backface-visibility:hidden;-webkit-backface-visibility:hidden;}
  .coin .front{filter:drop-shadow(0 6px 9px rgba(0,46,91,.16));}
  .coin .back{transform:rotateY(180deg);filter:drop-shadow(0 6px 9px rgba(0,46,91,.16));}
  @keyframes swirl{from{transform:rotateY(0deg);}to{transform:rotateY(360deg);}}
  .spin-shadow{width:112px;height:15px;border-radius:50%;margin:8px auto 0;
    background:radial-gradient(ellipse at center,rgba(0,46,91,.26),transparent 66%);
    animation:shpulse 4.5s ease-in-out infinite;}
  @keyframes shpulse{0%,100%{transform:scaleX(1);opacity:.8;}50%{transform:scaleX(.66);opacity:.5;}}
  @media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;}}

/* --- added for the real dashboard (the prototype had no sign-in error) --- */
.login-error{margin:0 0 12px;font-size:12.5px;color:#b3372f;font-weight:600;line-height:1.5;}