/* Website type scale and spacing. Loaded after the legacy compatibility styles. */
body.web-ui {
  --ui-font: "Segoe UI", Arial, sans-serif;
  --ui-text: 16px;
  --ui-small: 14px;
  --ui-title: 44px;
  --ui-heading: 28px;
  --ui-subheading: 20px;
  --ui-gutter: 48px;
  --ui-section: 40px;
  --ui-card: 32px;
  --ui-gap: 24px;
}
body.web-ui:not(.pwa-view):not(.pwa-auth) {
  font-family: var(--ui-font) !important;
  font-size: var(--ui-text) !important;
  line-height: 1.6;
}
body.web-ui:not(.pwa-view):not(.pwa-auth) * {font-family: var(--ui-font) !important; box-sizing: border-box}
body.web-ui:not(.pwa-view):not(.pwa-auth) :is(h1,h2,h3,h4) {line-height: 1.25 !important; letter-spacing: -.4px; font-weight: 650 !important; margin: 0 0 20px}
body.web-ui:not(.pwa-view):not(.pwa-auth) :is(.page-head h1,.auth-content>h1) {font-size: var(--ui-title) !important; margin: 0 !important; max-width: none}
body.web-ui:not(.pwa-view):not(.pwa-auth) :is(h2,.profile-layout h2,.website-outlook h2,.auth-panel h2,.auth-panel :where(#login-title)) {font-size: var(--ui-heading) !important; margin: 0 0 20px !important}
body.web-ui:not(.pwa-view):not(.pwa-auth) :is(h3,h4,.member-card h2,.calendar-list h3) {font-size: var(--ui-subheading) !important; margin: 0 0 12px !important}
body.web-ui:not(.pwa-view):not(.pwa-auth) p {font-size: var(--ui-text) !important; line-height: 1.6 !important; margin: 0 0 20px}
body.web-ui:not(.pwa-view):not(.pwa-auth) :is(small,.muted,.field-hint,.field-error,.auth-links a,.member-card p,.media-card p,.media-card small,.event-facts dt,.event-creator,.roster-summary,.response-counts,.notification-time,.dashboard-count,.dashboard-upcoming-list time,.birthday-person small,.role-explanation p) {font-size: var(--ui-small) !important; line-height: 1.5 !important}
body.web-ui:not(.pwa-view):not(.pwa-auth) :is(.eyebrow,.auth-section-label) {font-size: 12px !important; font-weight: 650 !important; line-height: 1.5; letter-spacing: 1.2px !important}
body.web-ui:not(.pwa-view):not(.pwa-auth) :is(.dashboard-upcoming-list a,.birthday-person strong,.personal-tasks a,.dashboard-hint p,.event-facts dd,.profile-details dd,.member-card a,.media-card h3) {font-size: var(--ui-text) !important; line-height: 1.6 !important}
body.web-ui:not(.pwa-view):not(.pwa-auth) :is(button,.button,input,select,textarea,label,legend) {font-family: var(--ui-font) !important; font-size: var(--ui-text) !important; line-height: 1.5 !important; letter-spacing: 0}
body.web-ui:not(.pwa-view):not(.pwa-auth) :is(button,.button) {min-height: 48px; padding: 12px 20px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: normal; text-align: center}
body.web-ui:not(.pwa-view):not(.pwa-auth) :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]),select,textarea) {min-height: 48px !important; padding: 12px 14px; width: 100%}
body.web-ui:not(.pwa-view):not(.pwa-auth) .field {gap: 8px; margin: 0 0 20px; font-weight: 500}
body.web-ui:not(.pwa-view):not(.pwa-auth) :is(.form-grid,.filter-grid) {gap: var(--ui-gap)}
body.web-ui:not(.pwa-view):not(.pwa-auth) :is(.form-grid,.filter-grid)>.field {margin-bottom: 0}
body.web-ui:not(.pwa-view):not(.pwa-auth) :is(.form-actions,.actions) {display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 0; align-items: center}
body.web-ui:not(.pwa-view):not(.pwa-auth) .main>.actions {margin: 0 0 24px}
body.web-ui:not(.pwa-view):not(.pwa-auth) .form-section {margin: 24px 0 0; padding: 24px 0 0}
body.web-ui:not(.pwa-view):not(.pwa-auth) :is(.filter-disclosure,.optional-fields) {padding: 20px 24px !important; margin: 0 0 24px}
body.web-ui:not(.pwa-view):not(.pwa-auth) :is(.filter-disclosure,.optional-fields) .form-grid {margin-top: 20px}
body.web-ui:not(.pwa-view):not(.pwa-auth) :is(.filter-disclosure,.optional-fields)>.field-hint {margin: 20px 0 0}
body.web-ui:not(.pwa-view):not(.pwa-auth) :is(.main,.auth-main) {max-width: 1440px !important; padding: 48px var(--ui-gutter) 64px !important}
body.web-ui:not(.pwa-view):not(.pwa-auth) .page-head {margin: 0 0 var(--ui-section) !important; gap: 24px; align-items: center}
body.web-ui:not(.pwa-view):not(.pwa-auth) .page-head:has([data-print]) {display: grid !important; grid-template-columns: minmax(0,1fr) auto; align-items: start !important; gap: 24px}
body.web-ui:not(.pwa-view):not(.pwa-auth) .page-head:has([data-print])>div:first-child {width: auto !important; min-width: 0}
body.web-ui:not(.pwa-view):not(.pwa-auth) .page-head:has([data-print])>.page-tools {width: auto; margin: 0 !important; padding-top: calc(var(--ui-title) * .28); align-self: start; justify-self: end}
body.web-ui:not(.pwa-view):not(.pwa-auth) .page-tools>[data-print] {height: 48px; margin: 0; white-space: nowrap}
@media(max-width:480px) {
 body.web-ui:not(.pwa-view):not(.pwa-auth) .page-head:has([data-print]) {gap: 12px}
 body.web-ui:not(.pwa-view):not(.pwa-auth) .page-tools>[data-print] {font-size: 14px !important; padding-left: 12px !important; padding-right: 12px !important}
}
body.web-ui:not(.pwa-view):not(.pwa-auth) :is(.section-layout,.two-col,.charts-grid,.profile-layout,.calendar-overview,.website-home,.website-outlook>.dashboard-dates-overview) {gap: var(--ui-section) !important}
body.web-ui:not(.pwa-view):not(.pwa-auth) .panel {padding: 24px 0 !important; margin: 0 0 var(--ui-section)}
body.web-ui:not(.pwa-view):not(.pwa-auth) :is(.section-layout,.two-col,.charts-grid,.profile-layout,.calendar-overview,.website-home)>.panel {margin-bottom: 0}
body.web-ui:not(.pwa-view):not(.pwa-auth) .section-layout>.panel {padding: var(--ui-card) !important}
body.web-ui:not(.pwa-view):not(.pwa-auth) :is(.member-card,.media-card,.profile-avatar-editor,.profile-photo-section,.personal-balance,.personal-account,.empty,.empty-state,.role-explanation) {padding: var(--ui-card) !important}
body.web-ui:not(.pwa-view):not(.pwa-auth) .profile-layout .panel {padding: 0 !important}
body.web-ui:not(.pwa-view):not(.pwa-auth) :is(.panel,.member-card,.media-card)>p:last-child {margin-bottom: 0}
body.web-ui:not(.pwa-view):not(.pwa-auth) :is(.disclosure-content,.optional-fields[open]>.form-grid) {padding-top: 20px}
body.web-ui:not(.pwa-view):not(.pwa-auth) :is(.finance-disclosure,.dashboard-update,.website-install)>summary {font-size: var(--ui-text) !important; font-weight: 600; padding: 12px 0; min-height: 48px}
body.web-ui:not(.pwa-view):not(.pwa-auth) :is(.member-grid,.media-grid,.media-category-grid) {gap: var(--ui-gap)}
body.web-ui:not(.pwa-view):not(.pwa-auth) .header-top {padding: 16px var(--ui-gutter); min-height: 88px; gap: 24px}
body.web-ui:not(.pwa-view):not(.pwa-auth) .header-account {gap: 16px}
body.web-ui:not(.pwa-view):not(.pwa-auth) .account-menu>summary {gap: 12px; padding: 4px !important}
body.web-ui:not(.pwa-view):not(.pwa-auth) .account-menu>summary>span:not(.avatar):not(.nav-chevron) {font-size: 20px !important; font-weight: 600 !important; line-height: 1.3 !important; max-width: 200px; color: inherit}
body.web-ui:not(.pwa-view):not(.pwa-auth) .header-account .avatar {width: 40px; height: 40px; min-width: 40px}
body.web-ui:not(.pwa-view):not(.pwa-auth) .account-menu-content :is(a,button) {font-size: var(--ui-text) !important; justify-content: flex-start}
body.web-ui:not(.pwa-view):not(.pwa-auth) :is(.public-switch a,.admin-return) {font-size: var(--ui-small) !important}
body.web-ui:not(.pwa-view):not(.pwa-auth) .web-menu-toggle {justify-content: flex-start; padding: 12px 0; gap: 12px}
body.web-ui:not(.pwa-view):not(.pwa-auth) .web-menu :is(.web-menu-link,.web-menu-category) {justify-content: space-between; text-align: left; font-size: 24px !important; font-weight: 500; padding: 16px 0 !important; min-height: 64px; line-height: 1.4 !important}
body.web-ui:not(.pwa-view):not(.pwa-auth) .web-menu-primary {padding: 32px var(--ui-gutter)}
body.web-ui:not(.pwa-view):not(.pwa-auth) .web-menu-submenu {padding: 32px var(--ui-gutter)}
/* Three balanced strokes; the middle stroke fades when the menu opens. */
body.web-ui .web-menu-symbol {height: 22px; background: linear-gradient(currentColor,currentColor) center / 28px 2px no-repeat}
body.web-ui .web-menu-symbol::before,
body.web-ui .web-menu-symbol::after {height: 2px; top: 3px; transform-origin: center}
body.web-ui .web-menu-symbol::after {top: 17px}
body.web-ui.web-menu-open .web-menu-symbol {background-size: 0 2px}
body.web-ui.web-menu-open .web-menu-symbol::before {transform: translateY(7px) rotate(45deg)}
body.web-ui.web-menu-open .web-menu-symbol::after {transform: translateY(-7px) rotate(-45deg)}
body.web-ui:not(.pwa-view):not(.pwa-auth) table {font-size: var(--ui-text)}
body.web-ui:not(.pwa-view):not(.pwa-auth) th {font-size: var(--ui-small) !important; line-height: 1.5}
body.web-ui:not(.pwa-view):not(.pwa-auth) td {font-size: var(--ui-text) !important; line-height: 1.5}
body.web-ui:not(.pwa-view):not(.pwa-auth) td small {font-size: var(--ui-small) !important}
body.web-ui:not(.pwa-view):not(.pwa-auth) .participant-person {gap: 12px}
/* Inline filters share the same control baseline and height. */
body.web-ui:not(.pwa-view):not(.pwa-auth) :is(.search,.report-picker,.chart-year-form,.media-filter-bar) {display: flex; align-items: flex-end; flex-wrap: wrap; gap: 16px}
body.web-ui:not(.pwa-view):not(.pwa-auth) :is(.search,.report-picker,.chart-year-form,.media-filter-bar)>.field {margin: 0 !important; min-width: 0; flex: 1}
body.web-ui:not(.pwa-view):not(.pwa-auth) :is(.search,.report-picker,.chart-year-form,.media-filter-bar,.filter-grid)>:is(button,.button) {margin: 0 !important; min-height: 48px !important; align-self: flex-end}
body.web-ui:not(.pwa-view):not(.pwa-auth) :is(.search,.report-picker,.chart-year-form,.media-filter-bar) :is(input,select) {height: 48px !important; min-height: 48px !important}
body.web-ui:not(.pwa-view):not(.pwa-auth) .filter-grid {align-items: end}
body.web-ui:not(.pwa-view):not(.pwa-auth) .filter-grid>.form-actions {margin: 0 !important; align-self: end}
body.web-ui .member-grid .member-card .avatar {border-radius: 2px !important}
/* Media navigation uses the same rectangular controls as the rest of the site. */
body.web-ui:not(.pwa-view):not(.pwa-auth) .media-submenu {gap: 12px !important; padding: 24px 0; margin-bottom: 24px; border: 0 !important}
body.web-ui .calendar-display-controls {gap:16px!important}
body.web-ui:not(.pwa-view):not(.pwa-auth) .media-submenu>a {display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 11px 20px !important; border: var(--ui-border-width,2px) solid #929292 !important; border-radius: 2px !important; background: transparent !important; color: #171717 !important; font-size: 16px !important; font-weight: 600; line-height: 1.5; transition: background-color .28s,color .28s,border-color .28s,transform .4s var(--web-ease)}
body.web-ui:not(.pwa-view):not(.pwa-auth) .media-submenu>a:is([aria-current=page],[href$="/media/upload"]) {background: #171717 !important; color: #fff !important; border-color: #171717 !important}
body.web-ui:not(.pwa-view):not(.pwa-auth) .media-submenu>a:hover {background: #171717 !important; color: #fff !important; border-color: #171717 !important; transform: translateY(-1px)}
body.web-ui:not(.pwa-view):not(.pwa-auth) .media-submenu>a:is([aria-current=page],[href$="/media/upload"]):hover {background: #444 !important; border-color: #444 !important}
body.web-ui:not(.pwa-view):not(.pwa-auth) .media-submenu>a:active {transform: none}
body.web-ui:not(.pwa-view):not(.pwa-auth) .media-filter-bar>.form-actions {margin: 0 !important; gap: 12px; align-self: flex-end}
body.web-ui input[type=file]::file-selector-button {border-radius: 2px}
body.web-ui:not(.pwa-view):not(.pwa-auth) .stats {padding: var(--ui-card) !important}
body.web-ui:not(.pwa-view):not(.pwa-auth) .stats>:is(.stat,.cash-card) {padding: 8px 24px !important; margin: 0 !important; align-self: stretch; display: flex; flex-direction: column; justify-content: flex-start; gap: 8px}
body.web-ui:not(.pwa-view):not(.pwa-auth) .stats>:first-child {padding-left: 0 !important}
body.web-ui:not(.pwa-view):not(.pwa-auth) .stats>:last-child {padding-right: 0 !important}
body.web-ui:not(.pwa-view):not(.pwa-auth) .website-outlook {padding: 0 !important}
body.web-ui:not(.pwa-view):not(.pwa-auth) .website-home>.website-finance {padding: 24px 0 !important}
body.web-ui:not(.pwa-view):not(.pwa-auth) .stats :is(.cash-card,.stat)>span {font-size: var(--ui-small) !important}
body.web-ui:not(.pwa-view):not(.pwa-auth) :is(.stats .stat>strong,.stats .cash-card>strong,.big-saldo,.personal-balance>strong) {font-size: 36px !important; font-weight: 650 !important; line-height: 1.2 !important}
body.web-ui:not(.pwa-view):not(.pwa-auth) .footer {padding: 32px var(--ui-gutter); gap: 24px; font-size: var(--ui-small)}
body.web-ui:not(.pwa-view):not(.pwa-auth) .footer>span:first-child {font-size: 22px; font-weight: 650}
body.web-ui:not(.pwa-view):not(.pwa-auth) .notice {font-size: var(--ui-text) !important; line-height: 1.5}
body.web-ui:not(.pwa-view):not(.pwa-auth) :is(.website-finance-link,.event-admin>summary,.feedback-tabs a) {font-size: var(--ui-text) !important; line-height: 1.5 !important}
body.web-ui:not(.pwa-view):not(.pwa-auth) :is(time,.balance-status,.catalog-status,.table-mobile-label,.current-contribution>span,.attendance-status strong,.attendance-status-prefix,.feedback-status,.feedback-board-heading>span,.feedback-context>summary>span,.website-birthday-heading>span,.event-detail-kicker>span) {font-size: var(--ui-small) !important; line-height: 1.5 !important}
body.web-ui:not(.pwa-view):not(.pwa-auth) main summary {font-size: var(--ui-text) !important; line-height: 1.5; font-weight: 600}
body.web-ui:not(.pwa-view):not(.pwa-auth) :is(button,.button,summary)>span:not(.ui-icon):not(.roster-summary) {font-size: inherit !important; font-weight: inherit; line-height: inherit}
body.web-ui:not(.pwa-view):not(.pwa-auth) .feedback-kind-picker strong {font-size: var(--ui-text) !important}
body.web-ui:not(.pwa-view):not(.pwa-auth) .feedback-workspace {gap: var(--ui-section)}
body.web-ui:not(.pwa-view):not(.pwa-auth) .website-secondary .dashboard-update {border-top: var(--ui-border-width,2px) solid var(--line) !important; padding: 20px 0 !important; margin: 0 !important}
body.web-ui:not(.pwa-view):not(.pwa-auth) main details>summary {padding-left: 16px !important; padding-right: 16px !important}
body.web-ui:not(.pwa-view):not(.pwa-auth) :is(.finance-disclosure,.website-secondary .dashboard-update,.website-install) {padding: 0 !important}
body.web-ui:not(.pwa-view):not(.pwa-auth) :is(.finance-disclosure,.dashboard-update,.website-install)>summary {padding: 16px 20px !important}
body.web-ui:not(.pwa-view):not(.pwa-auth) :is(.finance-disclosure,.dashboard-update,.website-install)>.disclosure-content {padding: 20px 20px 24px !important}
body.web-ui:not(.pwa-view):not(.pwa-auth) :is(.optional-fields,.filter-disclosure,.event-admin,.event-roster)>summary {padding-left: 0 !important; padding-right: 0 !important}
body.web-ui:not(.pwa-view):not(.pwa-auth) .website-outlook .website-birthday-heading>span {font-size: 20px !important; font-weight: 650 !important; line-height: 1.3 !important; white-space: nowrap}
body.web-ui .app-birthday-date>strong {font-size: 22px !important; font-weight: 650 !important}
/* All content disclosures use the same left-hand arrow and text gap. */
html[data-theme] body.web-ui main details>summary {display: flex !important; align-items: center !important; gap: 12px !important; list-style: none !important}
html[data-theme] body.web-ui main details>summary::marker {content: ""}
html[data-theme] body.web-ui main details>summary::-webkit-details-marker {display: none !important}
html[data-theme] body.web-ui main details>summary::before {content: "" !important; display: block !important; flex: 0 0 8px; width: 8px; height: 10px; margin: 0 !important; border: 0; background: currentColor; clip-path: polygon(0 0,100% 50%,0 100%); transform: rotate(0deg); transition: transform .2s ease}
html[data-theme] body.web-ui main details[open]>summary::before {transform: rotate(90deg)}
html[data-theme] body.web-ui main details[open]>.disclosure-content {padding-top: 20px !important}
html[data-theme] body.web-ui main details[open]>summary+form {margin-top: 0 !important; padding-top: 20px !important}
html[data-theme] body.web-ui main details[open]>summary+:is(p,ul,ol,nav) {margin-top: 20px !important}
html[data-theme] body.web-ui main .optional-fields[open]>.form-grid {margin-top: 0 !important; padding-top: 20px !important}
html[data-theme] body.web-ui main details>summary>.ui-icon,
html[data-theme] body.web-ui main details>summary>.nav-chevron {display: none !important}
body.web-ui:not(.pwa-view):not(.pwa-auth) .website-outlook .website-birthday-heading {display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: baseline; gap: 16px; margin-bottom: 20px}
body.web-ui:not(.pwa-view):not(.pwa-auth) .website-outlook .website-birthday-heading>h2 {margin: 0 !important}
@media(prefers-reduced-motion:reduce) {
 html[data-theme] body.web-ui main details>summary::before {transition: none}
}
body.web-ui .account-menu>summary {gap: 12px !important}
body.web-ui .account-menu>summary>.nav-chevron {margin-left: 0}
html[data-theme] body.web-ui .account-menu>summary>.nav-chevron {display:inline-flex!important;align-items:center;justify-content:center;flex:0 0 16px;width:16px;height:16px;color:inherit}
html[data-theme] body.web-ui .account-menu>summary>.nav-chevron>.ui-icon {display:block!important;width:16px;height:16px;stroke-width:2.6}
@media(max-width:480px) {
 html[data-theme] body.web-ui .account-menu>summary {gap:6px!important}
}
/* Form controls and compound quantity fields share straight edges and spacing. */
html[data-theme] body.web-ui main :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]),select,textarea,fieldset,.quantity-controls) {border-radius: 2px !important}
html[data-theme] body.web-ui:not(.pwa-view):not(.pwa-auth) main :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]),select:not([multiple]):not([size])) {height: 48px !important; min-height: 48px !important; padding-top: 11px !important; padding-bottom: 11px !important; box-sizing: border-box}
html[data-theme] body.web-ui:not(.pwa-view):not(.pwa-auth) main :is(button,.button) {min-height: 48px !important; padding-top: 11px; padding-bottom: 11px; box-sizing: border-box}
html[data-theme] body.web-ui .penalty-booking-form :is(.penalty-row,.penalty-participant,.penalty-review,.penalty-context) {border-radius: 2px !important}
html[data-theme] body.web-ui .penalty-booking-form .penalty-context {gap: 24px; padding-bottom: 24px; margin-bottom: 24px}
html[data-theme] body.web-ui .penalty-booking-form .penalty-context>.field {margin: 0 !important}
html[data-theme] body.web-ui .penalty-booking-form .penalty-participant {padding: 24px 0}
html[data-theme] body.web-ui .penalty-booking-form .penalty-participant-header {display: grid; grid-template-columns: minmax(200px,320px) minmax(0,1fr) auto; align-items: end; gap: 16px; margin-bottom: 16px}
html[data-theme] body.web-ui .penalty-booking-form .penalty-participant-header>.field {max-width: none; margin: 0 !important}
html[data-theme] body.web-ui .penalty-booking-form .penalty-member-total {min-height: 48px; display: flex; align-items: center; font-size: 20px; line-height: 1.5; gap: 8px}
html[data-theme] body.web-ui .penalty-booking-form .penalty-member-total::before {margin: 0; font-size: 14px}
html[data-theme] body.web-ui .penalty-booking-form .penalty-participant-add {margin: 0 !important; height: 48px !important; min-height: 48px; align-self: end !important; padding: 12px 16px}
html[data-theme] body.web-ui .penalty-booking-form .penalty-participant-rows {display: grid; grid-template-columns: minmax(0,1fr) !important; gap: 16px}
html[data-theme] body.web-ui .penalty-booking-form .penalty-row {grid-template-columns: minmax(200px,1fr) minmax(176px,200px) minmax(80px,96px) 48px !important; gap: 16px !important; padding: 20px !important; border: var(--ui-border-width,2px) solid var(--line); background: var(--panel-soft)}
html[data-theme] body.web-ui .penalty-booking-form .penalty-row>.field {margin: 0 !important; gap: 8px !important}
html[data-theme] body.web-ui .penalty-booking-form .penalty-row>.field:first-of-type {grid-column: 1 !important; grid-row: 1 !important}
html[data-theme] body.web-ui .penalty-booking-form .penalty-row>.field:has(.quantity-controls) {grid-column: 2 !important; grid-row: 1 !important; max-width: none !important}
html[data-theme] body.web-ui .penalty-booking-form .quantity-controls {display: grid; grid-template-columns: 48px minmax(0,1fr) 48px; align-items: center; gap: 8px !important; width: 100%; min-width: 0}
html[data-theme] body.web-ui .penalty-booking-form .quantity-controls :is(input,button) {height: 48px !important; min-height: 48px !important; width: 100%; min-width: 0; margin: 0; padding: 12px 6px !important; border-radius: 2px !important; box-sizing: border-box}
html[data-theme] body.web-ui .penalty-booking-form .quantity-controls input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]) {padding: 12px 6px !important; text-align: center}
html[data-theme] body.web-ui .penalty-booking-form .penalty-row>.row-total {grid-column: 3 !important; grid-row: 1 !important; align-self: end; min-height: 48px; display: flex; align-items: center; justify-content: flex-end; padding: 0 !important; margin: 0 !important; font-size: 18px; line-height: 1.5}
html[data-theme] body.web-ui .penalty-booking-form .penalty-row>.penalty-row-actions {grid-column: 4 !important; grid-row: 1 !important; align-self: end; height: 48px !important; margin: 0 !important}
html[data-theme] body.web-ui .penalty-booking-form .penalty-row-actions>button {width: 48px !important; height: 48px !important; min-height: 48px !important; padding: 0 !important; border-radius: 2px !important}
html[data-theme] body.web-ui .penalty-booking-form .penalty-review {padding: 24px; gap: 24px; margin-top: 24px; border: var(--ui-border-width,2px) solid var(--line)}
html[data-theme] body.web-ui .penalty-booking-form .penalty-review .penalty-summary {border: 0 !important; background: transparent !important; padding: 0 !important}
@media(max-width:760px) {
 html[data-theme] body.web-ui .penalty-booking-form .penalty-participant-header {grid-template-columns: minmax(0,1fr) auto}
 html[data-theme] body.web-ui .penalty-booking-form .penalty-participant-header>.field {grid-column: 1/-1}
 html[data-theme] body.web-ui .penalty-booking-form .penalty-member-total {grid-column: 1}
 html[data-theme] body.web-ui .penalty-booking-form .penalty-participant-add {grid-column: 2}
 html[data-theme] body.web-ui .penalty-booking-form .penalty-row {grid-template-columns: minmax(0,1fr) 48px !important}
 html[data-theme] body.web-ui .penalty-booking-form .penalty-row>.field:first-of-type {grid-column: 1/-1 !important; grid-row: 1 !important}
 html[data-theme] body.web-ui .penalty-booking-form .penalty-row>.field:has(.quantity-controls) {grid-column: 1 !important; grid-row: 2 !important}
 html[data-theme] body.web-ui .penalty-booking-form .penalty-row>.penalty-row-actions {grid-column: 2 !important; grid-row: 2 !important}
 html[data-theme] body.web-ui .penalty-booking-form .penalty-row>.row-total {grid-column: 1/-1 !important; grid-row: 3 !important; min-height: 32px}
 html[data-theme] body.web-ui .penalty-booking-form .penalty-review {flex-direction: column; align-items: flex-start; gap: 16px; padding: 20px}
}
body.web-ui:not(.pwa-view):not(.pwa-auth) .event-detail-layout>.event-details {padding: var(--ui-card) !important; margin: 0 !important}
body.web-ui:not(.pwa-view):not(.pwa-auth) .event-detail-layout>#attendance {padding: var(--ui-card) !important; margin: 0 !important}
body.web-ui:not(.pwa-view):not(.pwa-auth) .event-detail-layout #attendance h2 {font-size: var(--ui-heading) !important; margin-bottom: 20px !important}
body.web-ui:not(.pwa-view):not(.pwa-auth) .event-detail-layout>.event-roster {padding: 20px var(--ui-card) !important; margin: 0 !important}
body.web-ui:not(.pwa-view):not(.pwa-auth) .event-detail-layout .event-main-actions {margin: 24px 0 0; gap: 12px}
body.web-ui:not(.pwa-view):not(.pwa-auth) .event-description {margin: 24px 0 !important; padding-top: 24px !important}
body.web-ui:not(.pwa-view):not(.pwa-auth) .calendar-next {padding: var(--ui-card) !important; margin-bottom: var(--ui-section)}
body.web-ui:not(.pwa-view):not(.pwa-auth) .calendar-next h2 {font-size: var(--ui-heading) !important; margin: 16px 0 !important}
body.web-ui:not(.pwa-view):not(.pwa-auth) .calendar-next .button {margin-top: 20px}
body.web-ui:not(.pwa-view):not(.pwa-auth) .calendar-head h2 {margin: 0 !important}
body.web-ui:not(.pwa-view):not(.pwa-auth) :is(.weekday,.calendar-day>span,.calendar-day .event,.calendar-day .event span,.calendar-day small) {font-size: var(--ui-small) !important; line-height: 1.4 !important}
body.web-ui:not(.pwa-view):not(.pwa-auth) .calendar {grid-template-columns: repeat(7,minmax(100px,1fr)); overflow-x: auto; padding-bottom: 12px; scrollbar-gutter: stable; gap: 8px}
body.web-ui:not(.pwa-view):not(.pwa-auth) .calendar-day {padding: 8px; min-height: 100px}
body.web-ui:not(.pwa-view):not(.pwa-auth) .calendar-day .event {padding: 6px; margin-top: 6px}
/* Soft calendar accents distinguish dates while leaving the page monochrome. */
body.web-ui:not(.pwa-view):not(.pwa-auth) .calendar-day .calendar-appointment {background: #eaf1ec !important; color: #344c3d !important; border-color: #91a598 !important}
body.web-ui:not(.pwa-view):not(.pwa-auth) .calendar-day .calendar-appointment.cancelled {background: #f2ebeb !important; color: #715656 !important; border-color: #b89c9c !important}
body.web-ui:not(.pwa-view):not(.pwa-auth) .calendar-day .calendar-birthday {background: #f4ecef !important; color: #694e59 !important; border-color: #b89ba8 !important}
body.web-ui:not(.pwa-view):not(.pwa-auth) .calendar-regional-item.calendar-holiday {background: #eaf0f6 !important; color: #40546b !important; border-color: #97aabd !important}
body.web-ui:not(.pwa-view):not(.pwa-auth) .calendar-regional-item.calendar-school-break {background: #f4f0e5 !important; color: #665b3e !important; border-color: #b8ac88 !important}
body.web-ui:not(.pwa-view):not(.pwa-auth) .calendar-regional-item.calendar-carnival {background: #f0ecf5 !important; color: #61516f !important; border-color: #ad9cb9 !important}
body.web-ui:not(.pwa-view):not(.pwa-auth) .calendar-day .event :is(span,small) {color: inherit !important}
body.web-ui:not(.pwa-view):not(.pwa-auth) .calendar-day a.event:hover {filter: brightness(.96)}
/* Muted attendance colors identify the response without coloring the whole badge. */
body.web-ui .attendance-status {--attendance-dot: #999}
body.web-ui .attendance-status[data-response=yes] {--attendance-dot: #7ca28b}
body.web-ui .attendance-status[data-response=maybe] {--attendance-dot: #b29a63}
body.web-ui .attendance-status:is([data-response=no],[data-response=cancelled]) {--attendance-dot: #ba8585}
body.web-ui .attendance-status>strong {border-radius: 2px !important; border: var(--ui-border-width,2px) solid var(--line); padding: 6px 10px}
body.web-ui .attendance-status>strong::before {width: 6px; height: 6px; background: var(--attendance-dot) !important}
body.web-ui form[action$="/notifications/preferences"]+h3,
body.web-ui:not(.pwa-view):not(.pwa-auth) form[action$="/notifications/preferences"]+h3 {margin-top: 32px !important}
body.web-ui form[action$="/notifications/reminders"]+.field-hint {margin-top: 16px !important}
/* Explicit SVG chevrons stay visible above the legacy input background rules. */
html[data-theme] body.web-ui:not(.pwa-view):not(.pwa-auth) select:not([multiple]):not([size]):not([hidden]) {appearance: none; background-image: url(web-chevron.svg) !important; background-repeat: no-repeat !important; background-position: right 14px center !important; background-size: 18px 18px !important; padding-right: 44px !important}
html[data-theme] body.web-ui:is(.pwa-view,.pwa-auth) select:not([multiple]):not([size]):not([hidden]) {appearance: none; background-image: url(select-chevron-dark.svg) !important; background-repeat: no-repeat !important; background-position: right 14px center !important; background-size: 18px 18px !important; padding-right: 44px !important}
body.web-ui:not(.pwa-view):not(.pwa-auth) .calendar-picker {display: grid; grid-template-areas: "action month year"; grid-template-columns: auto minmax(120px,190px) minmax(100px,140px); align-items: end; gap: 16px; margin: 0 0 24px; padding-bottom: 24px}
body.web-ui:not(.pwa-view):not(.pwa-auth) .calendar-picker>.field {min-width: 0; max-width: none; margin: 0; width: 100%}
body.web-ui:not(.pwa-view):not(.pwa-auth) .calendar-picker>.field:first-child {grid-area: month}
body.web-ui:not(.pwa-view):not(.pwa-auth) .calendar-picker>.field:nth-child(2) {grid-area: year}
body.web-ui:not(.pwa-view):not(.pwa-auth) .calendar-picker>button {grid-area: action; margin: 0; height: 48px; min-height: 48px; width: auto; align-self: end}
body.web-ui:not(.pwa-view):not(.pwa-auth) .calendar-picker select {height: 48px !important; min-height: 48px !important}
body.web-ui:not(.pwa-view):not(.pwa-auth) .calendar-nav {border-radius: 2px !important; border-color: #999 !important; color: #333 !important; width: 48px; height: 48px; min-height: 48px; flex-shrink: 0}
body.web-ui:not(.pwa-view):not(.pwa-auth) .calendar-nav .ui-icon {color: #333 !important; stroke-width: 2}
body.web-ui:not(.pwa-view):not(.pwa-auth) .calendar-head a.calendar-nav {background: transparent; border-color: #929292 !important; transition: background-color .28s,color .28s,border-color .28s,transform .4s var(--web-ease)}
body.web-ui:not(.pwa-view):not(.pwa-auth) .calendar-head a.calendar-nav:is(:hover,:focus-visible) {background: #171717 !important; color: #fff !important; border-color: #171717 !important; transform: translateY(-1px)}
body.web-ui:not(.pwa-view):not(.pwa-auth) .calendar-head a.calendar-nav:is(:hover,:focus-visible) .ui-icon {color: #fff !important}
body.web-ui:not(.pwa-view):not(.pwa-auth) .calendar-head a.calendar-nav:active {transform: none}
body.web-ui .calendar-head .calendar-nav[aria-disabled=true] {opacity: .45; cursor: default}
@media(max-width:760px) {
 body.web-ui:not(.pwa-view):not(.pwa-auth) .calendar-picker {grid-template-columns: auto minmax(0,1.3fr) minmax(0,1fr); gap: 12px}
 html[data-theme] body.web-ui:not(.pwa-view):not(.pwa-auth) .calendar-picker select:not([multiple]):not([size]):not([hidden]) {padding-left: 10px !important; padding-right: 30px !important; background-position: right 8px center !important}
}
@media(max-width:360px) {
 body.web-ui:not(.pwa-view):not(.pwa-auth) .calendar-picker {grid-template-areas: "action month" ". year"; grid-template-columns: auto minmax(0,1fr)}
}
@media(forced-colors:active) {
 html[data-theme] body.web-ui select:not([multiple]):not([size]):not([hidden]) {appearance: auto !important; background-image: none !important}
}

/* Next event: one response group with immediate saving, a separate details link. */
body.web-ui:not(.pwa-view):not(.pwa-auth) .next-event:not(.calendar-next) {display: grid; grid-template-columns: minmax(0,1fr) auto; column-gap: 32px; row-gap: 0; padding: var(--ui-card) !important}
body.web-ui:not(.pwa-view):not(.pwa-auth) .next-event>:is(.next-event-heading,h2,.next-event-meta,.next-event-people,.next-event-empty-text) {grid-column: 1/-1}
body.web-ui:not(.pwa-view):not(.pwa-auth) .next-event-heading {display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin: 0}
body.web-ui:not(.pwa-view):not(.pwa-auth) .next-event-kicker {display: flex; align-items: center; gap: 8px}
body.web-ui:not(.pwa-view):not(.pwa-auth) .next-event-kicker>.ui-icon {display: none}
body.web-ui:not(.pwa-view):not(.pwa-auth) .next-event>h2 {font-size: 32px !important; line-height: 1.25 !important; margin: 24px 0 16px !important; max-width: none}
body.web-ui:not(.pwa-view):not(.pwa-auth) .next-event-meta {display: flex; flex-wrap: wrap; gap: 12px 24px !important; font-size: var(--ui-text) !important; margin: 0 0 32px !important; line-height: 1.5}
body.web-ui:not(.pwa-view):not(.pwa-auth) .next-event-meta>span {display: inline-flex; align-items: center; gap: 8px; min-width: 0; white-space: normal; overflow-wrap: anywhere}
body.web-ui:not(.pwa-view):not(.pwa-auth) .next-event-meta .ui-icon {display: block; flex: none; width: 18px; height: 18px}
body.web-ui:not(.pwa-view):not(.pwa-auth) .next-event .attendance-status {margin: 0; gap: 8px; font-size: var(--ui-small)}
body.web-ui:not(.pwa-view):not(.pwa-auth) .next-event .attendance-status strong {font-size: var(--ui-small); font-weight: 600; background: #303030 !important; color: #fff !important; border: var(--ui-border-width,2px) solid #666; border-radius: 2px; padding: 6px 10px}
body.web-ui:not(.pwa-view):not(.pwa-auth) .next-event .next-event-attendance {grid-column: 1; display: block !important; margin: 0 !important; padding: 0 !important; align-self: end; width: 100%; max-width: 620px}
body.web-ui:not(.pwa-view):not(.pwa-auth) .next-event .next-event-attendance>.field-hint {display: block; font-size: var(--ui-small) !important; margin: 0 0 12px !important; color: #ddd !important}
body.web-ui .next-event .quick-attendance {display: grid !important; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px !important; width: 100%; padding: 0 !important; margin: 0 !important; background: transparent !important; border: 0 !important}
body.web-ui .next-event .quick-response {min-width: 0; width: 100%; margin: 0 !important}
body.web-ui .next-event .quick-response .form-actions {display: block; margin: 0 !important; padding: 0}
body.web-ui:not(.pwa-view):not(.pwa-auth) .next-event .quick-response button {display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 56px !important; padding: 12px 16px !important; font-size: var(--ui-text) !important; font-weight: 600; background: #292929 !important; border: var(--ui-border-width,2px) solid #666 !important; color: #fff !important; border-radius: 2px !important}
body.web-ui .next-event .quick-response button>.ui-icon {display: block; width: 20px; height: 20px; flex-shrink: 0; stroke-width: 2}
body.web-ui:not(.pwa-view):not(.pwa-auth) .next-event .quick-response button:hover {background: #3b3b3b !important; border-color: #fff !important; color: #fff !important}
body.web-ui:not(.pwa-view):not(.pwa-auth) .next-event .quick-response.is-selected button {background: #fff !important; color: #171717 !important; border-color: #fff !important; box-shadow: inset 0 -3px #888 !important}
body.web-ui:not(.pwa-view):not(.pwa-auth) .next-event>.next-event-actions {grid-column: 2; align-self: end; display: flex; flex-wrap: wrap; gap: 12px; margin: 0 !important; padding: 0}
body.web-ui:not(.pwa-view):not(.pwa-auth) .next-event>.next-event-attendance+.next-event-actions {margin-bottom: 32px !important}
body.web-ui:not(.pwa-view):not(.pwa-auth) .next-event>.next-event-actions>.button.secondary {background: transparent !important; border: 0 !important; border-bottom: var(--ui-border-width,2px) solid #888 !important; color: #fff !important; min-height: 48px !important; padding: 12px 0 !important; font-size: var(--ui-text) !important; gap: 10px; transform: none}
body.web-ui:not(.pwa-view):not(.pwa-auth) .next-event>.next-event-actions>.button.secondary:hover {background: transparent !important; color: #ccc !important; border-bottom-color: #fff !important}
body.web-ui:not(.pwa-view):not(.pwa-auth) .next-event-actions>.button>.ui-icon {display: block; order: 2; width: 20px; height: 20px}
body.web-ui:not(.pwa-view):not(.pwa-auth) .next-event>.next-event-people {margin: 24px 0 0 !important; padding: 20px 0 0 !important; border-color: #555 !important; gap: 12px}
body.web-ui:not(.pwa-view):not(.pwa-auth) .next-event .next-event-people-link {font-size: var(--ui-small) !important}
body.web-ui:not(.pwa-view):not(.pwa-auth) .next-event .next-event-avatars .avatar {width: 32px; height: 32px; min-width: 32px}
/* Attendance feedback stays as plain text directly below the choices. */
body.web-ui .next-event .next-event-attendance .attendance-feedback {position: static !important; inset: auto !important; display: block !important; min-height: 24px; margin: 8px 0 0; padding: 0; pointer-events: auto; width: 100%}
body.web-ui .next-event .next-event-attendance .attendance-feedback>.notice {display: block; width: 100%; max-width: none !important; padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: #eee !important; box-shadow: none !important; font-size: 14px !important; font-weight: 400; line-height: 1.5 !important; min-height: 0}
body.web-ui .next-event .next-event-attendance .attendance-feedback>.notice::before,
body.web-ui .next-event .next-event-attendance .attendance-feedback>.notice::after,
body.web-ui .next-event .next-event-attendance .attendance-feedback .web-notice-icon {display: none !important; content: none !important}
body.web-ui .next-event .next-event-attendance .attendance-feedback>.notice {animation: attendance-text-in .32s ease-out both !important; transition: opacity .32s ease !important; transform: none !important}
body.web-ui .next-event .next-event-attendance .attendance-feedback>.notice.is-dismissing {animation: none !important; opacity: 0 !important; transform: none !important}
@keyframes attendance-text-in {from {opacity: 0} to {opacity: 1}}
@media(prefers-reduced-motion:reduce) {
 body.web-ui .next-event .next-event-attendance .attendance-feedback>.notice {animation: none !important; transition: none !important}
}

@media(max-width:1100px) {
 body.web-ui {--ui-gutter: 32px; --ui-section: 32px; --ui-card: 24px}
 body.web-ui:not(.pwa-view):not(.pwa-auth) .next-event:not(.calendar-next) {column-gap: 24px}
}
@media(max-width:760px) {
 body.web-ui {--ui-title: 36px; --ui-heading: 24px; --ui-gutter: 24px; --ui-section: 32px; --ui-gap: 20px}
 body.web-ui:not(.pwa-view):not(.pwa-auth) :is(.main,.auth-main) {padding-top: 32px !important; padding-bottom: 48px !important}
 body.web-ui:not(.pwa-view):not(.pwa-auth) .header-top {min-height: 80px; padding: 12px var(--ui-gutter); gap: 12px}
 body.web-ui:not(.pwa-view):not(.pwa-auth) .page-head {align-items: flex-start}
 body.web-ui:not(.pwa-view):not(.pwa-auth) .next-event:not(.calendar-next) {grid-template-columns: minmax(0,1fr)}
 body.web-ui:not(.pwa-view):not(.pwa-auth) .next-event .next-event-attendance {grid-column: 1; max-width: none}
 body.web-ui:not(.pwa-view):not(.pwa-auth) .next-event>.next-event-actions {grid-column: 1; justify-content: flex-end; margin-top: 16px !important}
 body.web-ui:not(.pwa-view):not(.pwa-auth) .next-event>.next-event-attendance+.next-event-actions {margin-bottom: 0 !important}
 body.web-ui:not(.pwa-view):not(.pwa-auth) .next-event>h2 {font-size: 28px !important}
 body.web-ui:not(.pwa-view):not(.pwa-auth) .next-event .quick-response button {flex-direction: column; gap: 6px; padding: 12px 6px !important; min-height: 76px !important}
 body.web-ui:not(.pwa-view):not(.pwa-auth) .next-event .quick-response button span {color: inherit !important; white-space: nowrap}
 body.web-ui:not(.pwa-view):not(.pwa-auth) .next-event-meta {margin-bottom: 24px !important}
 body.web-ui:not(.pwa-view):not(.pwa-auth) .footer {gap: 16px; padding: 32px var(--ui-gutter)}
 body.web-ui:not(.pwa-view):not(.pwa-auth) .footer>span {width: 100%}
 body.web-ui:not(.pwa-view):not(.pwa-auth) .footer .web-back-top {justify-self: start}
 body.web-ui:not(.pwa-view):not(.pwa-auth) .stats>:is(.stat,.cash-card) {padding: 0 !important}
 body.web-ui:not(.pwa-view):not(.pwa-auth) .stats>:is(.stat,.cash-card)+section {padding-top: 24px !important}
}
@media(max-width:480px) {
 body.web-ui {--ui-title: 32px; --ui-gutter: 20px; --ui-card: 20px; --ui-gap: 16px}
 body.web-ui:not(.pwa-view):not(.pwa-auth) .header-top {padding: 12px 16px; gap: 6px}
 body.web-ui:not(.pwa-view):not(.pwa-auth) .header-account {gap: 4px}
 body.web-ui:not(.pwa-view):not(.pwa-auth) .header-account .avatar {width: 32px; height: 32px; min-width: 32px}
 body.web-ui:not(.pwa-view):not(.pwa-auth) .next-event .quick-response button {font-size: 14px !important}
 body.web-ui:not(.pwa-view):not(.pwa-auth) :is(.filter-disclosure,.optional-fields) {padding: 16px !important}
 body.web-ui:not(.pwa-view):not(.pwa-auth) .stats :is(.stat>strong,.cash-card>strong) {font-size: 32px !important}
}
@media print {
 body.web-ui:not(.pwa-view):not(.pwa-auth) {font-size: 10pt !important; --ui-text: 10pt; --ui-small: 9pt; --ui-title: 22pt; --ui-heading: 16pt; --ui-subheading: 12pt}
 body.web-ui:not(.pwa-view):not(.pwa-auth) .main {padding: 0 !important}
}