/* 公開試及 SBA: the exam/SBA layer of the 教育日曆 (/calendar/) and the 學生・家長版 活動日曆
   (/family/calendar/), loaded only on those pages (base.html late_head, after columns.css).
   Colours: 公開試 cyan, SBA rose, kept apart from the activity colours (比賽 orange, 工作坊 blue,
   活動 green, 義工 purple, 資助 amber). This file is not in scripts/build_theme.py, so the dark values
   below are hand-tuned. */
.t-exam{--t:#0e7490;--t-soft:#dcf1f6;--t-ink:#fff}
.t-sba{--t:#be185d;--t-soft:#fce7f1;--t-ink:#fff}
:root[data-theme=dark] .t-exam{--t:#6fd0e6;--t-soft:#0f2a31;--t-ink:#06181d}
:root[data-theme=dark] .t-sba{--t:#f58cbc;--t-soft:#3b1527;--t-ink:#2a0716}

/* ---------- month grids: chips (one day) and bars (date windows) ----------
   Both calendars render this grid (templates/portal/_month_grid.html), so one scope: #calendar-grid.
   This file loads after columns.css (base.html late_head), so equal-specificity ties go our way. */
#calendar-grid .fcal-chip.exam-chip,#calendar-grid .fcal-chip.exam-bar{position:relative;width:100%;font-family:inherit;line-height:1.35;text-align:left;cursor:pointer;-webkit-appearance:none;appearance:none;border:0;color:var(--ink);background:var(--t-soft)}
#calendar-grid .fcal-chip.exam-chip{display:block;border-left:3px solid var(--t)}
#calendar-grid .fcal-chip.exam-chip.is-due{background:var(--t);color:var(--t-ink)}
#calendar-grid .exam-chip.is-due b{color:inherit}
#calendar-grid .fcal-chip.exam-bar{display:flex;align-items:center;gap:.35rem;min-width:0;padding:.2rem .5rem;border-radius:.18rem}
#calendar-grid .exam-bar.is-start{box-shadow:inset 3px 0 0 var(--t);border-top-left-radius:.4rem;border-bottom-left-radius:.4rem}
#calendar-grid .exam-bar.is-end{border-top-right-radius:.4rem;border-bottom-right-radius:.4rem}
/* a window that continues into the previous / next week fades out at that edge */
#calendar-grid .exam-bar:not(.is-start){padding-left:1rem;-webkit-mask-image:linear-gradient(90deg,transparent,#000 .9rem);mask-image:linear-gradient(90deg,transparent,#000 .9rem)}
#calendar-grid .exam-bar:not(.is-end){-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - .9rem),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - .9rem),transparent)}
#calendar-grid .exam-bar:not(.is-start):not(.is-end){-webkit-mask-image:linear-gradient(90deg,transparent,#000 .9rem,#000 calc(100% - .9rem),transparent);mask-image:linear-gradient(90deg,transparent,#000 .9rem,#000 calc(100% - .9rem),transparent)}
#calendar-grid .exam-bar b{flex:none;margin-right:0}
#calendar-grid .exam-bar span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* summary bar (many subjects at once): a light stripe and the subject count in a pill */
#calendar-grid .exam-bar.is-merged{background-image:repeating-linear-gradient(-45deg,transparent 0 7px,color-mix(in srgb,var(--t) 9%,transparent) 7px 14px)}
#calendar-grid .exam-bar.is-merged span{flex:none;padding:0 .45rem;border-radius:999px;background:color-mix(in srgb,var(--t) 18%,transparent);color:var(--t);font-weight:800;font-size:.92em}
.exam-cap{flex:none;margin-left:auto;padding:0 .42rem;border-radius:999px;background:var(--t);color:var(--t-ink);font-style:normal;font-weight:800;font-size:.86em;line-height:1.55}
/* the next SBA deadline breathes */
#calendar-grid .exam-chip.is-next::before,#calendar-grid .exam-bar.is-next .exam-cap::before{content:"";display:inline-block;width:.42rem;height:.42rem;margin-right:.3rem;border-radius:50%;background:currentColor;vertical-align:.06em}
/* hovering one item lights up every bar, chip and list row that shares a subject window */
#calendar-grid .exam-bar.is-linked,#calendar-grid .exam-chip.is-linked:not(.is-due){background-color:color-mix(in srgb,var(--t) 24%,var(--t-soft))}
#calendar-grid .exam-chip.is-due.is-linked{filter:brightness(1.12) saturate(1.15)}
.exam-item.is-linked{background:color-mix(in srgb,var(--t) 7%,var(--surface))}
/* a light sweep on hover */
#calendar-grid .exam-bar::after,#calendar-grid .exam-chip::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgb(255 255 255 / .5) 50%,transparent 65%) -160% 0/250% 100% no-repeat;transition:background-position .8s cubic-bezier(.2,.8,.2,1)}
:root[data-theme=dark] #calendar-grid .exam-bar::after,:root[data-theme=dark] #calendar-grid .exam-chip::after{background-image:linear-gradient(105deg,transparent 35%,rgb(255 255 255 / .14) 50%,transparent 65%)}
#calendar-grid .exam-bar:hover::after,#calendar-grid .exam-chip:hover::after{background-position:160% 0}
#calendar-grid .exam-bar:focus-visible,#calendar-grid .exam-chip:focus-visible{outline:2px solid var(--t);outline-offset:1px}

/* 教育日曆: bars sit in .calendar-spans; the rows they need are --ex-rows of --span-rows */
@media (max-width:720px){
  #calendar-grid .fcal-chip.exam-bar{height:.92rem;min-height:.92rem;padding:0 .25rem;gap:.2rem;font-size:.5rem;line-height:1.1;border-radius:.16rem}
  #calendar-grid .exam-bar.is-start{box-shadow:inset 2px 0 0 var(--t);border-top-left-radius:.28rem;border-bottom-left-radius:.28rem}
  #calendar-grid .exam-bar.is-end{border-top-right-radius:.28rem;border-bottom-right-radius:.28rem}
  #calendar-grid .exam-bar:not(.is-start){padding-left:.6rem}
  #calendar-grid .exam-bar.is-merged span{padding:0 .3rem}
  #calendar-grid .exam-cap{padding:0 .25rem}
}
#calendar-grid .calendar-week .day-number{transition:margin-bottom .35s cubic-bezier(.2,.8,.2,1)}
.exams-off .calendar-week{--ex-rows:0!important}

/* the layer switched off in the page (no reload); the rows it used close smoothly */
.exams-off .exam-bar,.exams-off .exam-chip,.exams-off .exam-item{display:none!important}

/* ---------- month lists ---------- */
.exam-item{position:relative;transition:background-color .2s}
.calendar-list .exam-item::before{content:"";position:absolute;left:0;top:.9rem;bottom:.9rem;width:3px;border-radius:3px;background:var(--t)}
.calendar-list .exam-item .date-tile{background:var(--t-soft);color:var(--t)}
.calendar-list .exam-item .date-tile span{color:inherit}

/* ---------- motion ---------- */
@media (prefers-reduced-motion:no-preference){
  :root:not(.sfx-off) #calendar-grid .exam-bar{animation:exam-wipe .75s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(var(--w,0)*80ms + .1s)}
  :root:not(.sfx-off) #calendar-grid .exam-chip{animation:exam-pop .45s cubic-bezier(.3,1.35,.5,1) backwards;animation-delay:calc(var(--w,0)*80ms + .32s)}
  :root:not(.sfx-off) .exam-item{animation:exam-rise .5s cubic-bezier(.2,.8,.2,1) backwards}
  #calendar-grid .exam-chip.is-next::before,#calendar-grid .exam-bar.is-next .exam-cap::before{animation:exam-ping 1.8s ease-out infinite}
  #calendar-grid .exam-bar.is-merged:hover{animation:exam-flow 1.2s linear infinite}
  .exams-leaving .exam-bar,.exams-leaving .exam-chip,.exams-leaving .exam-item{animation:exam-out .22s ease forwards!important}
}
@keyframes exam-wipe{from{clip-path:inset(0 100% 0 0);opacity:.35}}
@keyframes exam-pop{from{opacity:0;transform:translateY(5px) scale(.9)}}
@keyframes exam-rise{from{opacity:0;transform:translateY(8px)}}
@keyframes exam-out{to{opacity:0;transform:scale(.94)}}
@keyframes exam-flow{to{background-position:20px 0}}
@keyframes exam-ping{0%{box-shadow:0 0 0 0 color-mix(in srgb,currentColor 75%,transparent)}80%,100%{box-shadow:0 0 0 .42rem transparent}}

/* ---------- detail card (popover) ---------- */
.exam-pop{width:min(26rem,calc(100vw - 2rem));max-height:min(74vh,36rem);margin:auto;padding:0;border:0;border-radius:1.3rem;background:var(--surface);color:var(--ink);box-shadow:0 30px 70px -20px rgb(0 0 0 / .45),0 0 0 1px color-mix(in srgb,var(--ink) 8%,transparent);overflow:auto;overscroll-behavior:contain;opacity:0;transform:translateY(14px) scale(.97);transition:opacity .22s ease,transform .32s cubic-bezier(.2,.9,.3,1.15),overlay .32s allow-discrete,display .32s allow-discrete}
.exam-pop:popover-open{opacity:1;transform:none}
@starting-style{.exam-pop:popover-open{opacity:0;transform:translateY(14px) scale(.97)}}
.exam-pop::backdrop{background:rgb(12 14 18 / 0);transition:background-color .3s,overlay .3s allow-discrete,display .3s allow-discrete}
.exam-pop:popover-open::backdrop{background:rgb(12 14 18 / .32);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
@starting-style{.exam-pop:popover-open::backdrop{background:rgb(12 14 18 / 0)}}
@supports not selector(:popover-open){.exam-pop{display:none}.exam-pop.is-open{display:block;position:fixed;inset:0;z-index:1000;height:fit-content;opacity:1;transform:none}}
.exam-pop header{position:sticky;top:0;z-index:1;display:grid;grid-template-columns:1fr auto;align-items:start;gap:.15rem .8rem;padding:1.15rem 1.25rem .9rem;background:linear-gradient(180deg,var(--t-soft),color-mix(in srgb,var(--t-soft) 35%,var(--surface)))}
.exam-pop header span{font-size:.74rem;font-weight:800;letter-spacing:.02em;color:var(--t)}
.exam-pop h3{grid-column:1;margin:0;font-size:1.12rem;line-height:1.45}
.exam-pop header p{grid-column:1;margin:0;font-size:.78rem;color:var(--muted)}
:root .exam-pop .exam-pop-close{grid-column:2;grid-row:1/span 3;display:grid;place-items:center;width:2.1rem;height:2.1rem;padding:0;border:0;border-radius:50%;background:color-mix(in srgb,var(--ink) 8%,transparent);color:var(--ink);cursor:pointer;transition:transform .25s cubic-bezier(.3,1.4,.5,1),background-color .2s}
:root .exam-pop .exam-pop-close:hover{transform:rotate(90deg);background:color-mix(in srgb,var(--ink) 14%,transparent)}
.exam-pop-close svg{width:1rem;height:1rem}
.exam-pop ol{display:grid;gap:.1rem;margin:0;padding:.45rem 1.25rem .55rem 1.55rem;list-style:none}
.exam-pop li{position:relative;display:grid;gap:.1rem;padding:.6rem 0 .6rem .9rem;border-left:2px solid color-mix(in srgb,var(--t) 45%,transparent)}
.exam-pop li::before{content:"";position:absolute;left:-5px;top:.98rem;width:8px;height:8px;border-radius:50%;background:var(--t);box-shadow:0 0 0 3px var(--surface)}
.exam-pop li b{font-size:.93rem}
.exam-pop li span{font-size:.82rem;color:var(--muted)}
.exam-pop li small{font-size:.76rem;line-height:1.6;color:var(--muted)}
.exam-pop footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem 1rem;padding:.85rem 1.25rem 1.15rem;border-top:1px solid var(--line)}
.exam-pop footer .text-link{display:inline-flex;align-items:center;gap:.3rem;font-size:.82rem}
.exam-pop-note{margin:0 1.25rem .7rem;padding:.6rem .75rem;border-radius:.7rem;background:var(--t-soft);font-size:.78rem;line-height:1.65}
:root .exam-pop .exam-pick{padding:.48rem .95rem;border:0;border-radius:999px;background:var(--t);color:var(--t-ink);font:inherit;font-size:.8rem;font-weight:700;cursor:pointer;transition:transform .15s}
:root .exam-pop .exam-pick:active{transform:scale(.96)}
@media (prefers-reduced-motion:no-preference){.exam-pop:popover-open li{animation:exam-rise .42s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(var(--i,0)*45ms + 90ms)}}
@media (max-width:720px){
  .exam-pop{width:100%;max-width:none;max-height:82vh;margin:auto 0 0;border-radius:1.3rem 1.3rem 0 0;transform:translateY(100%)}
  .exam-pop:popover-open{transform:none}
  @starting-style{.exam-pop:popover-open{transform:translateY(100%)}}
}

/* ---------- sidebar panel ---------- */
.exam-panel{margin:0 0 1rem;padding:.85rem .85rem .75rem;border-radius:1rem;background:var(--surface);box-shadow:0 1px 2px rgb(0 0 0 / .05),0 0 0 1px color-mix(in srgb,var(--ink) 6%,transparent)}
.exam-panel-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.exam-panel h2{display:flex;align-items:center;gap:.45rem;margin:0;font-size:.86rem;font-weight:700;white-space:nowrap}
.exam-dot{flex:none;width:.6rem;height:.6rem;border-radius:50%;background:conic-gradient(#0e7490 0 50%,#be185d 0)}
:root[data-theme=dark] .exam-dot{background:conic-gradient(#6fd0e6 0 50%,#f58cbc 0)}
.exam-switch{position:relative;flex:none;display:inline-block;width:2.4rem;height:1.4rem;border-radius:999px;background:color-mix(in srgb,var(--ink) 20%,transparent);transition:background-color .25s}
.exam-switch i{position:absolute;top:.15rem;left:.15rem;width:1.1rem;height:1.1rem;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgb(0 0 0 / .25);transition:transform .32s cubic-bezier(.3,1.4,.5,1)}
.exam-switch[aria-checked=true]{background:#0e7490}
:root[data-theme=dark] .exam-switch[aria-checked=true]{background:#2a9bb4}
.exam-switch[aria-checked=true] i{transform:translateX(1rem)}
.exam-switch:focus-visible{outline:2px solid #0e7490;outline-offset:2px}
.exam-picker summary{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:0 .4rem;margin:.7rem 0 0;padding:.5rem .65rem;border-radius:.7rem;background:color-mix(in srgb,var(--ink) 5%,transparent);cursor:pointer;list-style:none;transition:background-color .2s}
.exam-picker summary::-webkit-details-marker{display:none}
.exam-picker summary:hover{background:color-mix(in srgb,var(--ink) 9%,transparent)}
.exam-picker summary span{grid-column:1;font-size:.64rem;color:var(--muted)}
.exam-picker summary strong{grid-column:1;overflow:hidden;font-size:.82rem;line-height:1.4;text-overflow:ellipsis;white-space:nowrap}
.exam-picker .exam-chev{grid-column:2;grid-row:1/span 2;width:.9rem;height:.9rem;color:var(--muted);transition:transform .3s cubic-bezier(.3,1.3,.5,1)}
.exam-picker details[open] .exam-chev{transform:rotate(90deg)}
.exam-picker-body{padding:.5rem .05rem .1rem}
.exam-picker-body>p{margin:.4rem 0 .3rem;font-size:.63rem;font-weight:700;letter-spacing:.04em;color:var(--muted)}
.exam-pills{display:flex;flex-wrap:wrap;gap:.28rem}
.exam-pill{position:relative;display:inline-flex}
.exam-pill input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.exam-pill span{display:inline-flex;align-items:center;gap:.2rem;padding:.26rem .58rem;border-radius:999px;background:color-mix(in srgb,var(--ink) 6%,transparent);font-size:.7rem;line-height:1.35;transition:background-color .2s,color .2s,transform .18s cubic-bezier(.3,1.4,.5,1)}
.exam-pill:hover span{background:color-mix(in srgb,var(--ink) 11%,transparent)}
.exam-pill input:checked+span{background:#0e7490;color:#fff}
:root[data-theme=dark] .exam-pill input:checked+span{background:#6fd0e6;color:#06181d}
.exam-pill input:checked+span::before{content:"✓";font-size:.9em;font-weight:800}
.exam-pill input:focus-visible+span{outline:2px solid #0e7490;outline-offset:2px}
.exam-pill input:active+span{transform:scale(.92)}
.exam-picker-actions{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-top:.75rem}
.exam-picker-actions .text-link{font-size:.7rem}
/* :root + panel class: outranks the generated dark twin of "button{color:inherit}" */
:root .exam-panel .exam-apply{padding:.42rem 1rem;border:0;border-radius:999px;background:var(--ink);color:var(--surface);font:inherit;font-size:.76rem;font-weight:700;cursor:pointer;transition:transform .15s}
:root .exam-panel .exam-apply:active{transform:scale(.95)}
.exam-ics{display:inline-flex;align-items:center;gap:.35rem;margin:.65rem 0 0;font-size:.74rem;font-weight:600;color:var(--ink);text-decoration:none}
.exam-ics svg{width:.9rem;height:.9rem}
.exam-ics:hover{text-decoration:underline}
.exam-source{margin:.4rem 0 0;font-size:.64rem;line-height:1.55;color:var(--muted)}
@media (prefers-reduced-motion:no-preference){
  .exam-picker details[open] .exam-picker-body{animation:exam-rise .32s cubic-bezier(.2,.8,.2,1)}
  .exam-apply.is-dirty{animation:exam-nudge 1.6s ease-in-out infinite}
}
@keyframes exam-nudge{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ink) 35%,transparent)}50%{box-shadow:0 0 0 .3rem transparent}}

/* ---------- legend ---------- */
.legend-exam::before,.legend-sba::before{content:"";display:inline-block;width:.6rem;height:.6rem;margin-right:.3rem;border-radius:.2rem;vertical-align:-.05rem;background:#0e7490}
.legend-sba::before{background:#be185d}
:root[data-theme=dark] .legend-exam::before{background:#6fd0e6}
:root[data-theme=dark] .legend-sba::before{background:#f58cbc}

/* ---------- activity cards: every event chip and bar opens one (templates/portal/_event_pops.html) ---------- */
#calendar-grid .fcal-chip.ev-chip{width:100%;font-family:inherit;text-align:left;cursor:pointer;-webkit-appearance:none;appearance:none;border-top:0;border-right:0;border-bottom:0}
#calendar-grid .fcal-chip.ev-chip:focus-visible{outline:2px solid var(--t);outline-offset:1px}
.ev-pop-cover{position:relative;aspect-ratio:16/7;overflow:hidden;background:var(--t-soft)}
.ev-pop-cover img{width:100%;height:100%;object-fit:cover;display:block}
.ev-pop-cover+header{position:static}
.ev-pop-body{padding:.35rem 1.25rem .4rem}
.ev-pop-summary{margin:0 0 .8rem;font-size:.9rem;line-height:1.75}
.ev-pop dl{display:grid;grid-template-columns:1fr 1fr;gap:.55rem .9rem;margin:0 0 .8rem}
.ev-pop dl div{min-width:0}
.ev-pop dt{font-size:.68rem;font-weight:700;color:var(--muted)}
.ev-pop dd{margin:0;font-size:.82rem;line-height:1.5;overflow-wrap:anywhere}
.ev-pop .exam-pop-note{margin:0 0 .6rem}
.ev-pop footer .text-link{gap:.3rem}
.ev-pop footer .text-link svg{width:.9rem;height:.9rem}
:root .ev-pop .ev-pop-go{display:inline-flex;align-items:center;gap:.35rem;padding:.55rem 1.05rem;border-radius:999px;background:var(--t);color:#fff;font-size:.84rem;font-weight:700;text-decoration:none;transition:transform .15s,filter .2s}
:root[data-theme=dark] .ev-pop .ev-pop-go{color:#16171a}
.ev-pop .ev-pop-go:hover{filter:brightness(1.08);transform:translateX(2px)}
.ev-pop .ev-pop-go svg{width:.9rem;height:.9rem}
@media (prefers-reduced-motion:no-preference){.ev-pop:popover-open .ev-pop-body>*{animation:exam-rise .42s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:.08s}}

/* 學生・家長版 sidebar: activity-type chips carry their colour dot; legend dots below the grid */
.fam-type-chips a i{display:inline-block;width:.5rem;height:.5rem;margin-right:.35rem;border-radius:50%;background:var(--t)}
.legend-dot::before{content:"";display:inline-block;width:.6rem;height:.6rem;margin-right:.3rem;border-radius:.2rem;vertical-align:-.05rem;background:var(--t)}