/* RETRO controls: cut corners derived from the organisation's open rectangular mark. */
:root{--control-sand:#d5c694;--control-sand-light:#e9dbb0;--control-blue:#a5c9dc;--control-surface:#20303b;--control-edge:#526b7b;--control-focus:#d8effc;--control-cut:12px}
button,a.btn{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
:is(button,a.btn):focus-visible{outline:2px solid var(--control-focus);outline-offset:4px}
.btn{--cut:var(--control-cut);position:relative;isolation:isolate;min-height:56px;padding:17px 29px;border:0;border-radius:0;background:#2c414e;color:#f4f7f9;font-size:14px;font-weight:700;letter-spacing:.02em;line-height:1.3;text-align:center;clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)));box-shadow:inset 0 -4px 0 #101b24,inset 0 0 0 1px #526a79;transition:background-color .18s ease,transform .18s ease,box-shadow .18s ease;filter:none}
.btn::after{content:'';position:absolute;left:29px;right:29px;bottom:6px;height:1px;background:currentColor;opacity:0;transform:scaleX(.4);transform-origin:left;transition:opacity .18s ease,transform .18s ease;pointer-events:none}
.btn.lime{background:var(--control-sand);color:#18252e;box-shadow:inset 0 -4px 0 #96875f,inset 0 1px 0 #f2e6c4;border:0}
.btn.white{background:#d0dce2;color:#16232c;box-shadow:inset 0 -4px 0 #8a9eaa;border:0}
.btn.outline{background:#182731d9;color:#d4e3ec;border:0;box-shadow:inset 0 0 0 1px #8396a2,inset 0 -4px 0 #354b5b}
.btn.small{--cut:9px;padding:13px 20px;min-height:46px;font-size:12px;letter-spacing:.025em}
.btn:focus-visible{outline:0;box-shadow:inset 0 0 0 3px var(--control-focus),inset 0 -5px 0 #607d8f}
.btn.lime:focus-visible{box-shadow:inset 0 0 0 3px #344c5a,inset 0 -5px 0 #96875f}
.btn:active{transform:translateY(1px);box-shadow:inset 0 -1px 0 #0d1821,inset 0 0 0 1px #8cabbc}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid #a5c9dc;outline-offset:3px}
.content-links{gap:14px}.header-actions .btn{min-height:46px;padding:13px 24px}
/* Category selectors behave like individual keys; active state has its own rail. */
.tabs,.filters{gap:8px}
:is(.tabs,.filters)>button{min-height:44px;padding:12px 20px;background:#172630;color:#aebfca;border:0;border-radius:2px;box-shadow:inset 0 0 0 1px #364f60,inset 0 -3px 0 #263e4f;font-size:13px;font-weight:600;line-height:1.3;position:relative;transition:color .16s,background-color .16s,box-shadow .16s}
:is(.tabs,.filters)>button.active{background:#2c414e;color:#f3e4ba;border:0;box-shadow:inset 0 0 0 1px #718b99,inset 0 -3px 0 #d0bd80}
:is(.tabs,.filters)>button:focus-visible{outline-offset:3px}
.calendar-switch.modes{padding:4px;background:#0b151d;border:1px solid #354d5e;border-radius:2px;gap:2px}
.calendar-switch.modes button{min-height:37px;padding:9px 17px;border:0;background:transparent;border-radius:0;color:#94aebb;font-size:12px;font-weight:600;box-shadow:none}
.calendar-switch.modes button.active{background:#adc5d2;color:#12222c;box-shadow:inset 0 -3px 0 #65879b}
.calendar-switch:not(.modes){gap:5px}
.calendar-switch:not(.modes)>button{min-width:44px;min-height:44px;border:1px solid #547083;background:#203746;border-radius:2px;color:#dceaf2;display:grid;place-items:center;padding:9px 14px;box-shadow:inset 0 -3px 0 #132633;transition:background-color .16s}
.calendar-switch:not(.modes)>button svg{width:17px;height:17px;pointer-events:none}
.calendar-toolbar h3{font-variant-numeric:tabular-nums}
/* Timetable tiles keep their meaningful category colours. */
.cal-event{border-radius:0 5px 0 0;padding:11px 9px 11px 12px;border-left-width:3px;box-shadow:inset 0 -1px 0 #0004;transition:background-color .16s,box-shadow .16s;filter:none}
.cal-event:focus-visible{outline:2px solid #deeffa;outline-offset:1px;box-shadow:inset 0 0 0 1px #fff6}
.cal-event.manual-event{border-left-width:3px;box-shadow:inset 0 -1px 0 #0004,inset 0 0 0 1px #a45d8033}
.manual-list-row .btn{border:0;background:#56394f;box-shadow:inset 0 0 0 1px #ad7d9c,inset 0 -3px 0 #352130}
.activity-card{padding:25px;border-radius:0 14px 0 0;border:1px solid #405e70;border-left:4px solid #81a1b4;background:#172833;color:#e8eff4;transition:background-color .18s,border-color .18s}
.activity-card .activity-icon{display:none}
/* Header utility controls are actual tools, with a consistent line icon set. */
.ui-icon{width:20px;height:20px;display:block;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;pointer-events:none;flex:none}
.cart-icon{width:42px;height:44px;padding:9px;display:grid;place-items:center;border:0;border-radius:0;background:transparent;color:#d9e7ee}
.cart-icon .ui-icon{width:24px;height:24px;stroke-width:1.8}.cart-icon sup{right:-4px;top:-5px;min-width:17px;height:17px;background:#d6c58e;color:#17242c;font-size:10px;font-weight:700;line-height:17px;border-radius:2px}
#menu-toggle{width:42px;height:42px;border:1px solid #415c6e;border-radius:2px;background:#172a37;padding:10px;color:#d7e5ee}
.language-toggle{min-height:42px;gap:8px;padding:10px 12px;border-radius:0 8px 0 0;border:1px solid #526f81;background:#152630;box-shadow:inset 0 -3px 0 #263e4e;font-weight:600}
.language-options{border-radius:0 10px 0 0;background:#122531;border-color:#4b6d83;padding:10px}
.language-options button{border-radius:0;border-left:3px solid transparent;min-height:44px;padding-left:12px}
.language-options button[aria-pressed=true]{border-left-color:#d5c38b;background:#2a4151;color:#f1e4bd}
.hero-tabs button{min-height:46px;min-width:100px;padding:12px 18px 14px;border:1px solid #66839255;border-radius:0;background:#101e2866;font-size:12px;line-height:1.2;color:#a9bdc9;box-shadow:inset 0 -2px 0 #3d5868}
.hero-tabs button.active{min-height:46px;width:auto;height:auto;padding:12px 18px 14px;border-color:#88a4b48c;background:#29414e99;box-shadow:inset 0 -3px 0 #aacada;color:#fff}
.hero-tabs button i{display:none}.hero-tabs .hero-hint{align-self:center;padding:0}.hero-tabs{gap:9px}
/* Floating actions echo the cut corner instead of using generic pills. */
.chat-toggle,.quick-toggle{border-radius:0 13px 0 0;box-shadow:0 7px 18px #0005,inset 0 -3px 0 #11232f;min-height:52px;transition:background-color .18s,box-shadow .18s}
.chat-toggle{background:#294857;color:#f1f6f9;border:1px solid #7c9cb0;padding:10px 18px 12px 11px;font-size:12px;font-weight:600;gap:10px}
.chat-spark{width:30px;height:30px;border-radius:0;background:#152e3e;padding:5px}.chat-spark img{width:24px;height:24px}
.quick-toggle{display:flex;gap:8px;align-items:center;justify-content:center;padding:13px 16px;background:#142a38;border:1px solid #4e718a;font-size:12px;color:#c8dce9}.quick-toggle span{margin:0}.quick-toggle .ui-icon{width:17px;height:17px}
.quick a{border-left:2px solid transparent;border-radius:0;min-height:46px}.quick a:hover{border-left-color:#c8b77c}.quick-toggle[aria-expanded=true],.chat-toggle[aria-expanded=true]{background:#385c70;border-color:#a9c2d2}
.chat-suggestions{gap:8px}.chat-suggestions button{border-radius:0 8px 0 0;border:1px solid #54778d;background:#1b3445;padding:10px 12px;color:#d4e5f0;min-height:38px;font-size:11px;box-shadow:inset 0 -2px 0 #0e2332}
#chat-form .send{min-width:62px;width:auto!important;padding:0 13px;border:0;border-radius:0 7px 0 0;background:var(--control-sand)!important;color:#13242f!important;font-size:11px;font-weight:700;box-shadow:inset 0 -3px 0 #968658}
#chat-form #mic{width:38px;min-width:38px;border:1px solid #4b6d82;border-radius:2px;background:#1d3749;display:grid;place-items:center;color:#c5deef}#chat-form #mic svg{width:17px;height:17px}
.chat-head #chat-close,.modal-close{width:34px;height:34px;display:grid;place-items:center;padding:7px;background:#213a4b;border:1px solid #4d6d83;border-radius:2px;color:#c9e0ee}.modal-close{top:13px;right:13px}.chat-head #chat-close svg,.modal-close svg{width:16px;height:16px}
.quantity{gap:0;background:#101e28;border:1px solid #48677b;width:max-content}.quantity button{width:35px;height:36px;border:0;border-radius:0;background:#253f51;color:#d3e7f3;font-size:18px;font-weight:500;display:grid;place-items:center}.quantity>span{min-width:38px;text-align:center;font-variant-numeric:tabular-nums;font-size:13px}.cart-line .remove{padding:8px 11px;background:none;border:1px solid #6a4b5b;border-radius:2px;color:#d7afc1;font-size:11px;text-decoration:none}
.text-link{display:inline-block;border-bottom:1px solid #8f8460;padding-bottom:6px;color:#d4c596;text-decoration:none;transition:color .16s,border-color .16s}
.gallery button{border-radius:0 8px 0 0;overflow:hidden}.gallery button:focus-visible{outline-offset:4px}
#skip-loader{padding:9px 13px;border-bottom:1px solid #5f7d90;color:#b8cddc}
@media(hover:hover) and (pointer:fine){
 .btn:hover{transform:translateY(-2px);background:#3d596b;filter:none;box-shadow:inset 0 -4px 0 #162938,inset 0 0 0 1px #97b6c8}.btn.lime:hover{background:var(--control-sand-light);color:#14232d;box-shadow:inset 0 -4px 0 #ac9a69}.btn.white:hover{background:#e3edf3;color:#14232d}.btn.outline:hover{background:#2c4658;box-shadow:inset 0 0 0 1px #bad0df,inset 0 -4px 0 #52738a}.btn:hover::after{opacity:.4;transform:scaleX(1)}
 :is(.tabs,.filters)>button:hover{background:#2a4050;color:#e5eef4}.calendar-switch button:hover{background:#35576e}.cal-event:hover{filter:none;outline:none;box-shadow:inset 4px 0 0 #d8c98f,inset 0 0 0 1px #8aabba70}.cal-event.cycle:hover{box-shadow:inset 4px 0 0 #a7d3ed,inset 0 0 0 1px #8aabba70}.cal-event.dance:hover{box-shadow:inset 4px 0 0 #cdbbe7,inset 0 0 0 1px #bb9ec870}.cal-event.manual-event:hover{box-shadow:inset 4px 0 0 #f3a9d1,inset 0 0 0 1px #bd7aa370}
 .activity-card:hover{background:#254052;border-left-color:#d0be83}.chat-toggle:hover,.quick-toggle:hover{background:#385e75;box-shadow:0 8px 25px #0006,inset 0 -3px 0 #182f40}.chat-suggestions button:hover{background:#2f526b;border-color:#88b2cb}.quantity button:hover{background:#46647b}.cart-line .remove:hover{background:#472c3b;border-color:#c388a7}.text-link:hover{color:#f0e5c3;border-color:#e9ddb1}
}
@media(max-width:600px){
 .btn{min-height:54px;padding:16px 23px;font-size:13px;--cut:10px}.btn.small{min-height:44px;padding:12px 16px;font-size:11px}.hero-content .buttons .btn{min-height:52px}.header-actions .btn{min-height:42px;padding:12px 15px;font-size:11px;--cut:8px}.header-actions{gap:7px}.cart-icon{width:34px;height:39px;padding:6px}.cart-icon .ui-icon{width:22px;height:22px}#menu-toggle{width:36px;height:39px;padding:8px}
 :is(.tabs,.filters)>button{min-height:42px;padding:11px 14px;font-size:11px}.calendar-switch.modes button{min-height:34px;padding:8px 10px;font-size:10px}.calendar-switch:not(.modes)>button{min-width:36px;min-height:40px;padding:8px 11px}.calendar-switch:not(.modes)>button svg{width:15px;height:15px}.calendar-switch.modes{padding:3px}.calendar-toolbar{gap:10px}.hero-tabs button,.hero-tabs button.active{min-width:79px;padding:12px 14px;min-height:44px;font-size:11px}.hero-tabs{gap:7px}
 .float-actions{gap:7px;right:12px;bottom:13px}.quick-toggle{width:46px;min-width:46px;height:49px;min-height:49px;padding:12px}.quick-toggle span{display:none}.quick-toggle .ui-icon{width:19px;height:19px}.chat-toggle{min-height:49px;font-size:11px;padding:8px 13px 10px 8px;gap:8px}.chat-spark{width:27px;height:27px}.chat-spark img{width:21px;height:21px}
 .cal-event{padding:10px 8px 10px 11px}.cal-event .event-trainer{font-size:11px}.activity-card{padding:20px}.chat-suggestions button{padding:10px 11px}#chat-form{gap:5px}#chat-form .send{min-width:55px;padding:0 10px;font-size:10px}#chat-form #mic{min-width:32px;width:32px}
 .manual-list-row .btn{padding:11px 12px;min-width:90px}.mini-event .btn{min-width:76px;flex-shrink:0}.cart-line .remove{padding:8px 10px}
}
@media(prefers-reduced-motion:reduce){.btn,.btn::after,button,.text-link,.activity-card{transition:none!important}.btn:hover,.btn:active{transform:none}}
@media(max-width:360px){header{padding-left:4%;padding-right:4%;gap:8px}.brand{width:110px;min-width:100px}.brand .org-logo{width:110px}.header-actions .btn{font-size:10px;padding:11px 12px}.header-actions{gap:6px}.cart-icon{width:31px}#menu-toggle{width:32px;padding:7px}.hero-tabs button,.hero-tabs button.active{min-width:73px;padding-left:11px;padding-right:11px}.chat-toggle{font-size:10px}.quick-toggle{width:42px;min-width:42px}.float-actions{right:10px;gap:6px}}

/* Original colour logo directly on the black navigation. */
header .brand{background:transparent;padding:0;box-sizing:border-box;display:flex;align-items:center;min-height:48px}
header .brand .org-logo{display:block;width:100%;height:auto;filter:none}
@media(max-width:600px){header .brand{padding:0;min-height:40px}}