/* orientation.css — A Girl & Her Futures™
 * New Member Orientation: the page (orientation.html, body.aca-v3.or-body) and the card on
 * the AGHF Desk (shared/orientation-card.js, .orc). AGHF Signature style (agihf/DESIGN.md). */

/* ── Page ── */
.or-page{gap:22px}
.or-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center}
.or-hero h1{font:900 clamp(32px,4.6vw,48px)/1.08 var(--font-display);margin:12px 0 0;color:var(--dark);text-wrap:balance}
.or-hero p{margin:12px 0 0;color:var(--muted);font-size:16px;line-height:1.6;max-width:60ch}
.or-guide{display:flex;align-items:flex-end;gap:10px}
.or-guide .v3-bubble{max-width:230px;margin-bottom:56px}
.or-face{width:132px;height:170px;flex:none}
.or-card{background:var(--bg-ffffff,#fff);border:1px solid var(--border);border-radius:26px;box-shadow:0 10px 26px rgba(44,24,16,.06)}

.or-session{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:22px;align-items:center;padding:22px 24px}
.or-date{width:92px;border-radius:20px;overflow:hidden;text-align:center;border:1px solid var(--border);background:var(--bg-ffffff,#fff)}
.or-date small{display:block;background:linear-gradient(90deg,var(--bg-f4829a,#F4829A),var(--bg-f5a857,#F5A857));color:var(--fg-ffffff,#fff);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:5px 0}
.or-date b{display:block;font:900 36px/1.1 var(--font-display);padding-top:6px;color:var(--dark)}
.or-date span{display:block;font-size:12px;color:var(--muted);padding-bottom:8px;font-weight:700}
.or-info{min-width:0;display:grid;gap:4px}
.or-info h2{font:900 23px/1.15 var(--font-display);margin:0;color:var(--dark)}
.or-info p{margin:0;color:var(--muted);font-size:14px}
.or-pill{display:inline-flex;align-items:center;gap:6px;width:max-content;border-radius:999px;padding:4px 11px;font-size:12px;font-weight:700;background:var(--bg-e8f8f6,#E8F8F6);color:var(--fg-2f8a7f,#2F8A7F)}
.or-pill.live{background:var(--bg-fde8ed,#FDE8ED);color:var(--fg-e0607c,#E0607C)}
.or-pill.live::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;animation:or-pulse 1.4s ease-in-out infinite}
.or-pill.gold{background:var(--bg-fbf5e8,#FBF5E8);color:var(--fg-a87a1e,#A87A1E)}
@keyframes or-pulse{50%{opacity:.25}}
.or-count{display:flex;gap:8px}
.or-count div{min-width:64px;text-align:center;background:var(--bg-fdf8f5,#FDF8F5);border:1px solid var(--border);border-radius:16px;padding:8px 6px}
.or-count b{display:block;font:900 26px/1.1 var(--font-display);font-variant-numeric:tabular-nums;color:var(--dark)}
.or-count small{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700}
.or-actions{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding-top:14px;border-top:1px dashed var(--border)}
.or-actions .v3-btn{padding:10px 18px;font-size:14px}
.or-actions .v3-btn.ghost{padding:9px 16px}
.or-note{font-size:13px;color:var(--muted);margin-left:auto}

/* The stage: the video, locked before it starts, "live" while it plays, a replay after. */
.or-stage{position:relative;aspect-ratio:16/9;max-width:100%;border-radius:24px;overflow:hidden;background:var(--bg-2c1810,#2C1810);box-shadow:0 14px 34px rgba(44,24,16,.14)}
.or-stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:var(--bg-2c1810,#2C1810)}
.or-poster{position:absolute;inset:0;background:radial-gradient(60% 70% at 25% 30%,rgb(var(--pink-rgb,244 130 154) / .55),transparent 70%),radial-gradient(60% 70% at 85% 80%,rgba(126,206,196,.45),transparent 70%),radial-gradient(50% 60% at 70% 20%,rgb(var(--peach-rgb,245 168 87) / .4),transparent 70%),var(--bg-2c1810,#2C1810) center/cover no-repeat}
.or-poster.img{background-size:cover}
.or-over{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:10px;text-align:center;color:var(--fg-ffffff,#fff);padding:18px}
.or-over.dim{background:rgb(var(--ink-rgb,44 24 16) / .55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.or-over strong{font:700 clamp(16px,2.2vw,21px) var(--font-body)}
.or-over span{font-size:14px;opacity:.88;max-width:44ch}
.or-lock{width:58px;height:58px;border-radius:50%;background:rgb(var(--glass-rgb,255 255 255) / .16);border:1.5px solid rgb(var(--glass-rgb,255 255 255) / .4);display:grid;place-items:center}
.or-play{width:78px;height:78px;border-radius:50%;background:linear-gradient(135deg,var(--bg-f4829a,#F4829A),var(--bg-f5a857,#F5A857));display:grid;place-items:center;box-shadow:0 12px 30px rgb(var(--pink-rgb,244 130 154) / .5);border:0;cursor:pointer;transition:transform .15s ease}
.or-play:hover{transform:scale(1.05)}
.or-link{background:none;border:0;color:var(--fg-ffffff,#fff);font:700 14px var(--font-body);text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:6px}
.or-tag{position:absolute;top:14px;left:14px;z-index:2}
.or-bar{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;align-items:center;gap:10px;padding:12px 14px;background:linear-gradient(transparent,rgba(0,0,0,.55));color:var(--fg-ffffff,#fff);font-size:12.5px;font-variant-numeric:tabular-nums}
.or-track{flex:1;height:5px;border-radius:5px;background:rgb(var(--glass-rgb,255 255 255) / .3);overflow:hidden}
.or-track i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--bg-f4829a,#F4829A),var(--bg-f5a857,#F5A857))}
.or-ctl{background:rgb(var(--glass-rgb,255 255 255) / .18);border:0;color:var(--fg-ffffff,#fff);border-radius:999px;padding:6px 11px;font:700 12px var(--font-body);cursor:pointer}
.or-ctl[aria-pressed="true"]{background:var(--bg-ffffff,#fff);color:var(--fg-2c1810,#2C1810)}

.or-cols{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:20px;align-items:start}
.or-side{display:grid;gap:20px;min-width:0}
.or-block{padding:22px 24px;display:grid;gap:14px}
.or-block h3{font:900 21px/1.2 var(--font-display);margin:0;color:var(--dark)}
.or-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.or-agenda{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.or-agenda li{display:grid;grid-template-columns:50px 36px minmax(0,1fr);gap:10px;align-items:center;padding:9px 8px;border-radius:14px}
.or-agenda li.now{background:var(--bg-fde8ed,#FDE8ED)}
.or-agenda time{font-size:12.5px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.or-agenda .tk{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;font-size:15px;font-weight:700}
.or-agenda li.done .tk{background:var(--bg-e8f8f6,#E8F8F6)!important;color:var(--fg-2f8a7f,#2F8A7F)!important}
.or-agenda b{display:block;font-size:14.5px;color:var(--dark)}
.or-agenda small{display:block;color:var(--muted);font-size:12.5px;line-height:1.4}
.tk.pink{background:var(--bg-fde8ed,#FDE8ED);color:var(--fg-e0607c,#E0607C)}.tk.teal{background:var(--bg-e8f8f6,#E8F8F6);color:var(--fg-2f8a7f,#2F8A7F)}.tk.peach{background:var(--bg-fef3e4,#FEF3E4);color:var(--fg-c4741f,#C4741F)}.tk.gold{background:var(--bg-fbf5e8,#FBF5E8);color:var(--fg-a87a1e,#A87A1E)}
.or-reward{display:flex;gap:14px;align-items:center;background:linear-gradient(120deg,var(--bg-fbf5e8,#FBF5E8),var(--bg-fde8ed,#FDE8ED));border-radius:20px;padding:14px 16px}
.or-reward b{display:block;font-size:15px;color:var(--dark)}
.or-reward small{color:var(--muted);font-size:13px}
.or-badge{width:60px;height:60px;flex:none}
.or-reward .v3-ring{width:60px;height:60px;--acc:var(--ac-f4829a,#F4829A)}
.or-reward .v3-ring b{width:48px;height:48px;font-size:13px}
.or-mini{display:flex;gap:12px;align-items:center;background:var(--bg-e8f8f6,#E8F8F6);border-radius:18px;padding:12px 14px}
.or-mini .d{width:50px;text-align:center;flex:none;background:var(--bg-ffffff,#fff);border-radius:12px;padding:5px 0}
.or-mini .d small{display:block;font-size:9.5px;font-weight:700;letter-spacing:.12em;color:var(--fg-2f8a7f,#2F8A7F);text-transform:uppercase}
.or-mini .d b{font:900 20px/1 var(--font-display);color:var(--dark)}
.or-mini strong{display:block;font-size:14.5px;color:var(--dark)}
.or-mini span{font-size:12.5px;color:var(--muted)}
.or-mini > div:last-child{min-width:0}
.or-text{margin:0;font-size:14px;color:var(--muted);line-height:1.55}
.or-links{display:flex;flex-wrap:wrap;gap:8px}
.or-links .v3-btn{padding:9px 15px;font-size:13.5px}
.or-help{display:grid;gap:10px}
.or-help a{display:flex;gap:12px;align-items:center;text-decoration:none;color:var(--dark);border:1px solid var(--border);border-radius:16px;padding:11px 14px;background:var(--bg-ffffff,#fff)}
.or-help a:hover{border-color:var(--ln-f7c2ce,#F7C2CE)}
.or-help i{font-style:normal;width:34px;height:34px;border-radius:12px;display:grid;place-items:center;flex:none}
.or-help b{display:block;font-size:14px}
.or-help small{display:block;font-size:12.5px;color:var(--muted)}

/* Finishing: the badge */
.or-modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:16px;background:rgb(var(--ink-rgb,44 24 16) / .45)}
.or-sheet{position:relative;width:min(420px,100%);background:var(--bg-ffffff,#fff);border-radius:28px;padding:30px 26px 24px;text-align:center;display:grid;gap:12px;justify-items:center;box-shadow:0 30px 70px rgba(44,24,16,.3);overflow:hidden}
.or-sheet h2{font:900 30px/1.1 var(--font-display);margin:0;color:var(--dark)}
.or-sheet p{margin:0;color:var(--muted);font-size:15px;line-height:1.55}
.or-sheet .or-badge{width:110px;height:110px}
.or-gp{font:900 22px var(--font-display);color:var(--fg-a87a1e,#A87A1E)}
.or-confetti i{position:absolute;top:-12px;left:var(--x);width:8px;height:14px;border-radius:2px;background:var(--c);transform:rotate(var(--r));animation:or-fall 2.6s ease-in var(--d) both}
@keyframes or-fall{to{transform:translateY(520px) rotate(calc(var(--r) + 300deg));opacity:0}}

@media (max-width:860px){
  .or-cols{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:720px){
  .or-hero{grid-template-columns:minmax(0,1fr)}
  .or-guide{order:-1}
  .or-guide .v3-bubble{margin-bottom:14px;max-width:none;flex:1}
  .or-face{width:76px;height:96px}
  .or-session{grid-template-columns:auto minmax(0,1fr);padding:18px}
  .or-count{grid-column:1/-1;justify-content:space-between}
  .or-count div{flex:1;min-width:0}
  .or-note{margin-left:0;flex-basis:100%}
  .or-block{padding:18px}
}
@media (max-width:420px){
  .or-date{width:72px}.or-date b{font-size:28px}
  .or-info h2{font-size:20px}
  .or-actions .v3-btn{flex:1 1 auto}
  .or-over span{display:none}
  .or-agenda li{grid-template-columns:42px 32px minmax(0,1fr);gap:8px;padding:8px 4px}
  .or-agenda .tk{width:32px;height:32px}
}
@media (prefers-reduced-motion:reduce){.or-pill.live::before,.or-confetti i{animation:none}.or-play{transition:none}}

/* ── The card on the AGHF Desk ── */
.orc{position:relative;overflow:hidden;padding:20px 22px;display:grid;gap:14px;border:1px solid var(--border);border-radius:26px;box-shadow:0 10px 26px rgba(44,24,16,.06);
  background:radial-gradient(70% 90% at 100% 0%,rgb(var(--bga-f9c9d4,249 201 212) / .45),transparent 70%),radial-gradient(60% 80% at 0% 100%,rgb(var(--bga-bfe6e1,191 230 225) / .35),transparent 70%),var(--bg-ffffff,#fff);margin-bottom:22px}
.orc-top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.orc-k{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-e0607c,#E0607C)}
.orc-main{display:flex;gap:16px;align-items:center}
.orc-main > div:last-child{min-width:0}
.orc .or-date{width:74px;flex:none}
.orc .or-date b{font-size:28px}
.orc h3{font:900 22px/1.15 var(--font-display);margin:0;color:var(--dark)}
.orc h3 em{font-style:italic;color:var(--fg-f4829a,#F4829A)}
.orc p{margin:4px 0 0;font-size:14px;color:var(--muted);line-height:1.5}
.orc-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.orc-btn{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:999px;padding:10px 18px;font:700 14px var(--font-body);color:var(--fg-ffffff,#fff);background:linear-gradient(90deg,var(--bg-f4829a,#F4829A),var(--bg-f5a857,#F5A857));box-shadow:0 10px 24px rgb(var(--pink-rgb,244 130 154) / .3);text-decoration:none}
.orc-btn.ghost{background:var(--bg-ffffff,#fff);color:var(--muted);border:1.5px solid var(--border);box-shadow:none;padding:9px 16px}
.orc-foot{display:flex;gap:10px;align-items:center;font-size:12.5px;color:var(--muted);border-top:1px dashed var(--border);padding-top:12px;flex-wrap:wrap}
.orc-steps{display:flex;gap:4px}
.orc-steps i{width:18px;height:6px;border-radius:4px;background:var(--bg-f1e4de,#F1E4DE)}
.orc-steps i.on{background:linear-gradient(90deg,var(--bg-f4829a,#F4829A),var(--bg-f5a857,#F5A857))}
.orc .or-badge{width:66px;height:66px}
.orc-gp{font:900 22px var(--font-display);color:var(--fg-a87a1e,#A87A1E)}
@media (max-width:420px){.orc{padding:18px}.orc .or-date{width:64px}.orc .or-date b{font-size:24px}.orc h3{font-size:19px}.orc-btn{flex:1 1 auto;justify-content:center}}