/* Self-contained visual layer; no external fonts or assets. */
:root { --forest:#294d40; --ink:#203e34; --muted:#606b60; --cream:#f7f4ec; --paper:#fffef9; --line:#dedfd3; --sage:#edf1e7; background:var(--cream); color:#273c33; line-height:1.6; -webkit-text-size-adjust:100%; }
body { background:radial-gradient(ellipse at 90% 0%, #e9edde80, transparent 38rem); }
header { background:var(--paper); border-color:var(--line); padding-block:22px; min-height:88px; }
.brand { color:var(--ink); font-family:Georgia,'Times New Roman',serif; font-size:1.6rem; font-weight:600; letter-spacing:-.045em; line-height:1.2; }
#account { min-width:0; font-size:.9rem; }
#account-label { overflow-wrap:anywhere; }
#logout-button { flex-shrink:0; }
main { padding-top:32px; padding-bottom:80px; }
h1,h2,h3 { color:var(--ink); }
h1 { font-family:Georgia,'Times New Roman',serif; font-size:clamp(1.85rem,3.2vw,2.55rem); font-weight:500; letter-spacing:-.04em; margin-bottom:24px; }
h2 { font-size:1.25rem; line-height:1.35; letter-spacing:-.025em; margin-bottom:12px; }
h3 { margin-bottom:10px; }
p { text-wrap:pretty; }
button { background:var(--forest); border-color:var(--forest); border-radius:12px; padding:11px 18px; font-size:.92rem; line-height:1.45; transition:background-color .15s,border-color .15s; }
button:hover { filter:none; background:var(--ink); border-color:var(--ink); }
button:disabled { opacity:.65; }
.secondary { background:transparent; border-color:#cdd5c7; color:var(--forest); }
.secondary:hover { background:var(--sage); border-color:#a7b6a3; }
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible { outline:3px solid #a07324; outline-offset:3px; }
label { font-size:.875rem; gap:7px; margin-bottom:20px; color:#3d5144; }
input,select,textarea { border-color:#c9d0c0; border-radius:10px; background:#fffefc; padding:12px 13px; font-size:1rem; line-height:1.5; min-height:48px; }
input::placeholder,textarea::placeholder { color:#70776d; opacity:1; }
input:hover,select:hover,textarea:hover { border-color:#92a38c; }
input[type=checkbox] { accent-color:var(--forest); min-height:20px; flex-shrink:0; }
.check { padding:12px 14px; background:var(--sage); border-radius:10px; }
.muted { color:var(--muted); }
.login-panel { max-width:470px; padding:38px; margin:clamp(20px,6vh,72px) auto; background:var(--paper); border-color:var(--line); border-radius:22px; box-shadow:0 16px 48px #38462e09,0 2px 5px #38462e04; }
.login-panel h1 { font-size:clamp(1.7rem,5.8vw,2.15rem); margin-bottom:14px; }
.login-panel > p { color:var(--muted); }
.login-panel form { margin-top:28px; }
.login-panel .muted { margin-top:24px; padding-top:20px; border-top:1px solid var(--line); font-size:.84rem; }
#login-submit { margin-top:4px; }
nav { background:#edeedf; padding:6px; border:1px solid #e0e3d5; border-radius:16px; gap:5px; margin-bottom:36px; width:fit-content; max-width:100%; }
nav button { background:transparent; border-color:transparent; font-size:.875rem; color:#4a5c49; }
nav button:hover { background:#ffffffa0; border-color:transparent; }
nav button.active { background:var(--forest); border-color:var(--forest); color:white; box-shadow:0 2px 5px #244a351a; }
#booking-count:not(:empty) { font-variant-numeric:tabular-nums; }
#catalog-tools { background:#fffef9a6; border:1px solid var(--line); border-radius:16px; padding:18px 20px; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); align-items:end; }
#catalog-tools label { margin:0; }
#result-count { font-size:.8rem; letter-spacing:.04em; margin:18px 2px 14px; }
.grid { gap:22px; align-items:stretch; }
.card { display:flex; flex-direction:column; min-width:0; background:var(--paper); padding:26px; border:1px solid var(--line); border-radius:18px; box-shadow:0 3px 12px #3e493407; }
.card > p { font-size:.925rem; }
.card .category { font-size:.73rem; line-height:1.5; color:#496044; background:var(--sage); padding:5px 10px; border-radius:7px; align-self:flex-start; margin-bottom:16px; }
.card .meta { background:#f6f5ed; color:#53614f; padding:14px 16px; border-radius:10px; font-size:.86rem; line-height:1.8; font-variant-numeric:tabular-nums; }
.prerequisites { border:0; padding-top:0; margin-bottom:16px; font-size:.85rem; color:#5b6755; }
.prerequisites strong { color:#40563e; font-size:.8rem; }
.info-list { padding-left:20px; margin-top:8px; margin-bottom:16px; }
.info-list li + li { margin-top:5px; }
.prerequisites .info-list,.prerequisites p { margin-bottom:0; }
.badge { align-self:flex-start; background:#e9efdf; color:#3c573a; padding:4px 10px; border-radius:7px; font-size:.8rem !important; font-weight:600; }
.card .actions { margin-top:auto; padding-top:8px; }
.actions { gap:9px; }
.actions button { padding-inline:12px; }
.section-heading { margin-bottom:26px; }
.section-heading > button { flex-shrink:0; }
#admin-users > p { color:var(--muted); font-size:.9rem; margin:-6px 0 24px; }
[data-delete-user],#confirm-deactivate,#confirm-cancel { color:#884836; border-color:#ddc9bd; background:#fff9f3; }
[data-delete-user]:hover,#confirm-deactivate:hover,#confirm-cancel:hover { background:#f5e6dc; border-color:#b9907d; }
dialog { background:var(--paper); color:#273c33; border-color:var(--line); border-radius:22px; padding:32px; box-shadow:0 24px 100px #142a3540; max-height:calc(100dvh - 32px); overscroll-behavior:contain; }
dialog::backdrop { background:#1c302b99; backdrop-filter:blur(3px); }
dialog h2 { font-size:1.5rem; margin-bottom:20px; }
dialog h3 { border-top:1px solid var(--line); padding-top:20px; margin-top:24px; }
.close { font-size:.8rem; margin-bottom:22px; }
dialog form > button[type=submit],#book-course { width:100%; margin-top:8px; }
#password-help { margin-top:-10px; font-size:.8rem; }
.participant { border-color:var(--line); }
.participant:last-child { border-bottom:0; }
.empty-state { background:var(--paper); border-color:#c5ceba; padding:32px; color:var(--muted); border-radius:16px; }
.error:not(:empty) { background:#fff1e8; border-left:3px solid #a65843; padding:12px 14px; border-radius:4px 10px 10px 4px; font-size:.9rem; }
#connection-state:empty { display:none; }
#toast { background:var(--ink); border:1px solid #677f65; border-radius:14px; font-size:.9rem; bottom:max(20px,env(safe-area-inset-bottom)); }
@media(min-width:760px) { #course-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) {
  header { padding:20px; gap:16px; min-height:76px; }
  .brand { font-size:1.45rem; }
  #account { border-top:1px solid var(--line); padding-top:12px; gap:12px; }
  main { padding:24px 16px 64px; }
  .login-panel { margin:16px auto; padding:28px 24px; border-radius:18px; }
  nav { width:100%; margin-bottom:28px; gap:5px; }
  nav button { padding:11px 8px; font-size:.8rem; }
  h1 { margin-bottom:20px; }
  #catalog-tools { grid-template-columns:minmax(0,1fr); padding:16px; gap:14px; }
  .grid { gap:16px; }
  .card { padding:22px; border-radius:16px; }
  .section-heading { gap:16px; margin-bottom:24px; }
  .section-heading > button { align-self:flex-start; }
  dialog { padding:24px 20px; border-radius:18px; }
  dialog h2 { font-size:1.35rem; }
  .actions button { flex-basis:125px; }
  #toast { bottom:max(12px,env(safe-area-inset-bottom)); }
}
@media(prefers-reduced-motion:reduce) { button { transition:none; } }
.course-image { display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; border-radius:12px; margin:0 0 20px; background:var(--sage); }
.course-image[hidden] { display:none; }
#course-detail .course-image { max-height:340px; }
#invite-onboarding { margin-top:28px; border-top:1px solid var(--line); padding-top:22px; }
summary { cursor:pointer; color:var(--forest); font-weight:600; }
summary:focus-visible { outline:3px solid #a07324; outline-offset:4px; }
#generated-code { font-family:monospace; font-size:1.05rem; }
.invite-row { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:16px; margin-bottom:12px; background:var(--paper); border:1px solid var(--line); border-radius:12px; }
.invite-row p { margin:4px 0 0; font-size:.85rem; }
#invite-list { margin-bottom:32px; }
.danger { color:#884836; border-color:#ddc9bd; background:#fff9f3; }
.danger:hover { background:#f5e6dc; border-color:#b9907d; }
.calendar-toolbar { display:grid; grid-template-columns:48px minmax(0,1fr) 48px; align-items:center; gap:12px; margin-bottom:18px; }
.calendar-toolbar h2 { margin:0; text-align:center; font-size:clamp(1.1rem,4vw,1.5rem); }
.calendar-toolbar button { padding:8px; font-size:1.3rem; }
.calendar-jump { display:flex; align-items:center; flex-wrap:wrap; gap:16px; margin-bottom:22px; }
.calendar-jump label { margin:0; flex:1; max-width:260px; min-width:0; }
.calendar-jump input { width:100%; min-width:0; }
.calendar-grid,.calendar-week { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:6px; }
.calendar-week { text-align:center; font-size:.8rem; color:var(--muted); margin-bottom:8px; }
.calendar-grid { padding:12px; background:var(--paper); border:1px solid var(--line); border-radius:16px; margin-bottom:30px; }
.calendar-day { display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:0; min-height:74px; padding:8px 2px; gap:3px; border:1px solid transparent; background:var(--sage); color:var(--forest); border-radius:10px; font-variant-numeric:tabular-nums; }
.calendar-day:hover { background:#dce6d6; color:var(--forest); }
.calendar-day small { font-size:.7rem; line-height:1.2; }
.calendar-day.today { border-color:var(--forest); }
.calendar-day.selected { background:var(--forest); color:white; }
#calendar-day-title { font-family:Georgia,'Times New Roman',serif; font-weight:500; font-size:1.4rem; }
/* Course days stay visibly different even before selecting one. Counts are a
   second, non-colour cue; today has an inset ring and selection a solid fill. */
.calendar-day:has(.day-word) { background:#c8e3d4; border-color:#638673; color:#203e34; }
.calendar-day:has(.day-word):hover { background:#b4d8c3; }
.calendar-day.today { border:2px solid #294d40; box-shadow:inset 0 0 0 2px var(--paper); }
.calendar-day.selected,.calendar-day.selected:has(.day-word) { background:#294d40; border-color:#294d40; color:#fff; }
.calendar-day.selected:hover,.calendar-day.selected:has(.day-word):hover { background:#203e34; color:#fff; }
.calendar-day.selected small { font-weight:700; }
.calendar-day.today > span { text-decoration:underline; text-underline-offset:3px; }
.app-nav button { display:flex; align-items:center; justify-content:center; gap:8px; position:relative; }
.nav-icon { display:none; width:25px; height:25px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
@media(max-width:759px) {
  :root { --tab-bar-height:76px; scroll-padding-bottom:calc(var(--tab-bar-height) + env(safe-area-inset-bottom,0px) + 24px); }
  body:has(#private-app:not([hidden])) main { padding-bottom:calc(var(--tab-bar-height) + env(safe-area-inset-bottom,0px) + 32px); }
  header { padding-left:max(16px,env(safe-area-inset-left,0px)); padding-right:max(16px,env(safe-area-inset-right,0px)); padding-top:max(16px,env(safe-area-inset-top,0px)); }
  main { padding-left:max(16px,env(safe-area-inset-left,0px)); padding-right:max(16px,env(safe-area-inset-right,0px)); }
  .app-nav { position:fixed; z-index:8; inset:auto 0 0; display:flex; flex-wrap:nowrap; width:100%; max-width:none; height:calc(var(--tab-bar-height) + env(safe-area-inset-bottom,0px)); margin:0; padding:10px max(12px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px)); gap:6px; border:0; border-top:1px solid #c9d0c0; border-radius:20px 20px 0 0; background:#fffef9; box-shadow:0 -4px 24px #203e3412; }
  .app-nav button { flex:1; min-width:0; min-height:48px; padding:10px 4px; border-radius:14px; color:#3d5144; }
  .app-nav button.active { color:#fff; background:#294d40; }
  .app-nav button.active::after { content:''; position:absolute; bottom:5px; width:14px; height:3px; border-radius:3px; background:currentColor; }
  .nav-icon { display:block; }
  .nav-label { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
  #booking-count:not(:empty) { position:absolute; top:1px; right:1px; padding:0 4px; min-width:20px; border-radius:12px; background:#fffef9; color:#203e34; border:1px solid #638673; font-size:.65rem; line-height:18px; }
  #toast { bottom:calc(var(--tab-bar-height) + env(safe-area-inset-bottom,0px) + 12px); }
  .calendar-grid { padding:6px; gap:3px; }
  .calendar-day { min-height:58px; border-radius:8px; }
  .calendar-day .day-word { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
}
@media(max-width:600px) { .calendar-grid { gap:4px; padding:8px; } .calendar-week { gap:4px; } .calendar-day { min-height:58px; border-radius:8px; padding-inline:0; font-size:.85rem; } .day-word { display:none; } .invite-row { flex-wrap:wrap; } input[type=file] { font-size:.85rem; padding:10px; min-width:0; max-width:100%; } }