:root{font-family:system-ui,"Microsoft JhengHei",sans-serif;color:#24332f;background:#f5f7f4;--green:#24664f;--line:#e1e7df}*{box-sizing:border-box}body{margin:0}button,input,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #cf9c3c;outline-offset:3px}.shell{max-width:1320px;margin:auto;padding:30px 38px}.brand{display:flex;align-items:center;gap:11px;font-weight:800;letter-spacing:1px}.logo{background:var(--green);color:white;border-radius:11px;padding:8px 11px}header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:24px}.tag{font-size:12px;letter-spacing:2px;color:#6b7c70}.intro{margin:42px 0 28px}.eyebrow{font-size:12px;color:var(--green);font-weight:700;letter-spacing:3px}h1{font-size:clamp(27px,4vw,38px);letter-spacing:-1px;margin:12px 0}p{color:#6c7971;line-height:1.8}.layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:24px}.card{background:#fff;border:1px solid var(--line);border-radius:18px}.sidebar{padding:24px;height:fit-content}.section-label{font-size:12px;letter-spacing:2px;color:#7c887f;margin-bottom:20px}.filter{display:flex;align-items:center;gap:12px;padding:14px 0;cursor:pointer}.filter input{width:18px;height:18px;accent-color:var(--green)}.filter strong{font-size:16px}.filter small{display:block;color:#7c887f;font-size:11px;margin-top:3px}.dot{height:8px;width:8px;border-radius:50%;background:#317961;margin-left:auto}.dot.blue{background:#527bb1}.divider{height:1px;background:var(--line);margin:18px 0}.note{font-size:12px;line-height:1.8;color:#7c887f}.legend{display:flex;gap:6px;align-items:center;margin:10px 0;font-size:12px;color:#69756e}.mini-dot{width:6px;height:6px;background:#6f8478;border-radius:50%}.calendar{overflow:hidden}.toolbar{padding:24px;display:flex;align-items:center;justify-content:space-between;gap:12px}.toolbar h2{font-size:22px;margin:0}.toolbar h2 small{font-weight:400;font-size:13px;color:#7c887f;margin-left:12px}.nav{display:flex;gap:6px}.nav button{border:1px solid var(--line);background:white;border-radius:8px;min-width:36px;height:35px;color:#4e6155}.nav button:hover{background:#f0f5ee}.weekdays,.grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}.weekdays{background:#f8faf7;border-block:1px solid var(--line);text-align:center;font-size:11px;color:#8a968c;padding:12px 0}.day{min-height:112px;padding:9px 6px;border-bottom:1px solid #edf0eb;border-right:1px solid #edf0eb}.day:nth-child(7n){border-right:0}.day.outside{background:#fafbf9;color:#b9c1b9}.date{font-size:12px;display:flex;width:25px;height:25px;align-items:center;justify-content:center;margin-bottom:5px}.today .date{background:var(--green);color:white;border-radius:50%}.event{display:block;width:100%;border:0;text-align:left;border-radius:5px;background:#e7f2eb;color:#286b4d;padding:6px;margin:3px 0;font-size:11px;line-height:1.5;overflow-wrap:anywhere}.event:hover{filter:brightness(.95)}.calendar-footer{padding:14px 22px;display:flex;justify-content:space-between;font-size:11px;color:#849087;gap:12px}.upcoming{margin-top:24px;padding:24px}.upcoming h2{font-size:17px;margin:0 0 16px}.row{width:100%;border:0;border-top:1px solid #eef0eb;background:white;padding:15px 0;display:flex;align-items:center;text-align:left;gap:18px}.row time{font-size:13px;color:#7a887d;min-width:82px}.badge{font-size:10px;font-weight:700;padding:4px 7px;border-radius:5px;background:#e7f2eb;color:#286b4d}.row-title{font-size:13px;flex:1}.arrow{color:#8e9b91}.empty{padding:24px;text-align:center;font-size:14px;color:#839086}footer{padding:30px 0 8px;font-size:11px;color:#93a094;display:flex;justify-content:space-between;gap:10px}.source-note{border:1px solid #e8dfc6;background:#fcf9ef;color:#897542;padding:11px 15px;border-radius:10px;font-size:12px;margin-top:20px;line-height:1.7}dialog{max-width:560px;width:calc(100% - 32px);border:1px solid var(--line);border-radius:18px;padding:30px;color:#24332f}dialog::backdrop{background:#1f342a70;backdrop-filter:blur(3px)}dialog h2{font-size:21px;line-height:1.5}dialog .description{white-space:pre-wrap;font-size:14px;line-height:1.9;overflow-wrap:anywhere;color:#657267}.close{float:right;background:#f0f4ee;border:0;border-radius:50%;width:30px;height:30px}.official{display:inline-block;margin-top:18px;background:var(--green);color:white;padding:11px 18px;border-radius:8px;text-decoration:none;font-size:14px}.error{color:#9b453d}
@media(max-width:800px){.shell{padding:20px 16px}.tag{display:none}.intro{margin:28px 0 22px}.layout{grid-template-columns:1fr}.sidebar{padding:16px 20px;display:flex;align-items:center;gap:22px}.sidebar .section-label{margin:0}.filter{padding:0;gap:7px}.filter small,.sidebar .divider,.sidebar .note,.sidebar .legend{display:none}.dot{display:none}.toolbar{padding:18px 14px}.toolbar h2{font-size:18px}.toolbar h2 small{display:none}.day{min-height:92px;padding:5px 2px}.event{font-size:10px;padding:4px 3px}.calendar-footer{padding:12px;font-size:10px}.row{gap:8px}.row time{min-width:72px;font-size:11px}.upcoming{padding:18px}.row-title{font-size:12px}footer{flex-direction:column}}

.event,.badge{background:var(--competition-bg,#e7f2eb);color:var(--competition-color,#286b4d)}
.dot{background:var(--competition-color,#317961)}
.filter input{accent-color:var(--competition-color,#24664f)}
#filters{width:100%}
@media(max-width:800px){.sidebar{flex-wrap:wrap}.sidebar .section-label{width:100%}#filters{display:flex;flex-wrap:wrap;gap:18px}}

/* Keep all grid/flex children shrinkable, including long activity titles. */
html{width:100%;text-size-adjust:100%;-webkit-text-size-adjust:100%}
body{min-width:0}
.shell,.layout,.layout>*,.card,.toolbar h2,.row-title{min-width:0}
.shell{width:100%}
.row-title,.source-note,.intro p{overflow-wrap:anywhere}
.filter input{flex:none;margin:0}
.nav{flex:none}
.event-short{display:none}
.filter-hint{font-size:12px;color:#6c7971;line-height:1.7;margin:12px 0 0}

/* Also support mobile browsers using a wider desktop-style viewport. */
@media(max-width:1024px){
  .shell{padding:20px 16px}
  .tag{display:none}
  .intro{margin:26px 0 22px}
  .layout{grid-template-columns:minmax(0,1fr);gap:16px}
  .sidebar{display:block;padding:18px}
  .sidebar .section-label{margin:0 0 12px;width:auto}
  #filters{display:flex;flex-wrap:wrap;gap:10px}
  .filter{min-height:48px;padding:10px 16px;gap:10px;border:1px solid var(--line);border-radius:12px;flex:1 1 120px}
  .filter:has(input:checked){background:var(--competition-bg);border-color:var(--competition-color)}
  .filter input{width:21px;height:21px}
  .filter small,.sidebar .divider,.sidebar .note,.sidebar .legend,.filter .dot{display:none}
  .toolbar{padding:16px;flex-wrap:wrap}
  .toolbar h2{font-size:20px}
  .toolbar h2 small{display:none}
  .nav button{min-width:44px;height:44px}
  .calendar-footer{flex-wrap:wrap;gap:6px;padding:12px 14px;font-size:11px;line-height:1.6}
  .row{gap:10px;min-height:64px}
  .row time{min-width:64px;font-size:12px}
  .row-title{font-size:13px;line-height:1.7}
  .badge{flex:none}
  .upcoming{margin-top:16px;padding:18px}
  footer{flex-direction:column}
}
@media(max-width:600px){
  .shell{padding:16px 12px}
  header{padding-bottom:16px}
  h1{font-size:27px;line-height:1.45}
  .intro p{font-size:14px;margin-bottom:0}
  .toolbar{padding:12px;gap:8px}
  .toolbar h2{font-size:18px}
  .nav{gap:4px}
  .nav button{min-width:40px;padding:0 8px}
  .day{min-height:80px;padding:5px 2px}
  .event{font-size:11px;padding:6px 2px;min-height:40px;text-align:center;line-height:1.45}
  .event-full{display:none}
  .event-short{display:block}
  .upcoming h2{line-height:1.8}
  .row{flex-wrap:wrap;column-gap:8px}
  .row-title{flex-basis:calc(100% - 100px)}
  .row .arrow{display:none}
  dialog{padding:20px;max-height:85dvh;overflow:auto}
  .close{width:44px;height:44px}
}

/* Functional calendar layout and dark theme. */
:root{color-scheme:dark;color:#edf1ee;background:#151918;--green:#79bc98;--line:#343d37}
body{background:#151918}
[hidden]{display:none!important}
.shell{padding:24px 32px 32px}
header{padding:0 0 20px;margin-bottom:24px}
header h1{font-size:23px;line-height:1.4;margin:0;font-weight:650;letter-spacing:0}
.english-title{margin:5px 0 0;color:#afb9b2;font-size:13px;line-height:1.5;letter-spacing:0}
.layout{align-items:start;gap:20px}
.card,dialog{background:#1d2320;color:#edf1ee;border-radius:14px}
.sidebar{padding:20px;display:block}
.sidebar .section-label{font-size:15px;color:#edf1ee;letter-spacing:0;margin:0 0 16px;font-weight:600}
#filters{display:flex;flex-direction:column;gap:10px}
.filter{min-height:52px;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:10px}
.filter:has(input:checked){border-color:var(--competition-color);background:#28372f}
.filter input{width:21px;height:21px}
.filter small{color:#afb9b2;line-height:1.5}
.dot{display:none}
.filter-hint{color:#afb9b2;margin:14px 0 0}
.toolbar{padding:16px 20px;flex-wrap:wrap}
.toolbar h2{font-size:21px}
.nav button{background:#252c27;color:#e6ece7;border-color:#465249;min-width:44px;height:44px;padding:0 10px}
.nav button:hover{background:#35483b}
.weekdays{color:#afb9b2;background:#222b25}
.day{min-height:100px;border-color:var(--line)}
.day.outside{background:#191e1b;color:#7d8c81}
.today .date{background:#92d0ac;color:#14291b;font-weight:700}
.calendar-footer{color:#afb9b2}
.upcoming{margin-top:20px;padding:20px}
.upcoming h2{margin:0 0 14px}
.row{background:transparent;color:#edf1ee;border-color:var(--line);min-height:62px}
.row time,.arrow,.empty{color:#afb9b2}
dialog{border-color:var(--line)}
dialog p{color:#afb9b2}
dialog .description{color:#c3cec6}
.close{color:#edf1ee;background:#29312c;border:1px solid var(--line)}
.official{color:#13271b;background:#9bd8b7}
.error{color:#ffb4a9}
/* Compare calendar dates in Asia/Taipei; today retains its normal highlight. */
.day.past{background:#171c19;color:#859087}
.day.past .date{color:#859087}
.day.past .event{opacity:.5;filter:saturate(.35)}
.day.past .event:hover,.day.past .event:focus-visible{opacity:.85}
@media(max-width:1024px){
  .shell{padding:20px 16px 24px}
  header{padding-bottom:16px;margin-bottom:16px}
  .layout{gap:16px}
  .sidebar{padding:16px}
  .sidebar .section-label{margin-bottom:12px}
  #filters{flex-direction:row;flex-wrap:wrap}
  .filter{min-height:48px;padding:10px 14px}
  .filter-hint{margin-top:10px}
  .toolbar{padding:12px 16px}
  .toolbar h2{font-size:20px}
  .upcoming{margin-top:16px;padding:16px}
}
@media(max-width:600px){
  .shell{padding:16px 12px 20px}
  header h1{font-size:21px}
  .toolbar{padding:12px;gap:8px}
  .toolbar h2{font-size:18px}
  .nav button{min-width:40px;padding:0 8px}
  .day{min-height:70px}
}