@font-face { font-family: "Fraunces"; src: url("/assets/fonts/fraunces-var.woff2") format("woff2-variations"); font-weight: 600 700; font-display: swap; } @font-face { font-family: "Figtree"; src: url("/assets/fonts/figtree-var.woff2") format("woff2-variations"); font-weight: 400 700; font-display: swap; } :root { color-scheme: light dark; /* surfaces + text */ --bg: #F7F4EC; --surface: #FFFFFF; --ink: #15302A; --muted: #55665E; --line: #E3DFD2; --line-strong: #C9C4B4; --soft: #E7EFEA; /* brand */ --brand: #064B40; --primary: #064B40; --on-primary: #FFFFFF; --accent: #F0A13A; --on-accent: #2A1800; --accent-text: #8A4B00; --hero: #064B40; --hero-ink: #FFFFFF; --hero-sub: #CFE3DB; --hero-tile: rgba(255, 255, 255, 0.10); /* attendance + status */ --present-bg: #E2F1E7; --present-fg: #1B6B43; --present-fill: #1B6B43; --on-present: #FFFFFF; --absent-bg: #FBE6E3; --absent-fg: #A12A2A; --absent-fill: #A12A2A; --on-absent: #FFFFFF; --late-bg: #E3EDF8; --late-fg: #1D5A9E; --late-fill: #1D5A9E; --on-late: #FFFFFF; --excused-bg: #FCEED6; --excused-fg: #8A4B00; --excused-fill: #F0A13A; --on-excused: #2A1800; --danger: #A12A2A; /* team dots (cycle in this order as teams are added) */ --team-1: #064B40; --team-2: #C77A12; --team-3: #2F6DB5; --team-4: #6B3FA0; --team-5: #1B6B43; /* shape + motion */ --radius-sm: 10px; --radius: 14px; --radius-lg: 18px; --radius-xl: 22px; --radius-pill: 999px; --focus: #AD6000; --shadow-dialog: 0 24px 60px rgba(8, 20, 16, 0.35); --tap: 44px; /* typography */ --font-display: "Fraunces", Georgia, "Times New Roman", serif; --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif; /* back-compat aliases: existing component CSS is migrated to the names above class-by-class in later phases. --emerald-hover is derived so it recomputes correctly in dark mode too. */ --emerald: var(--brand); --emerald-hover: color-mix(in srgb, var(--emerald) 82%, black 18%); --page: var(--bg); --input-line: var(--line-strong); font-family: var(--font-body); color: var(--ink); background: var(--bg); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0D1512; --surface: #16211D; --ink: #EEF3EF; --muted: #A3B2AB; --line: #2A3833; --line-strong: #3A4A44; --soft: #1F3A31; --brand: #7EDCB8; --primary: #5FCB9F; --on-primary: #04241A; --accent: #F2B04C; --on-accent: #1A1206; --accent-text: #F2B04C; --hero: #123B30; --hero-ink: #EEF3EF; --hero-sub: #B9D8CC; --hero-tile: rgba(255, 255, 255, 0.08); --present-bg: #173D2C; --present-fg: #8BE3B5; --present-fill: #5FCB9F; --on-present: #04241A; --absent-bg: #43201F; --absent-fg: #FFB3AD; --absent-fill: #F08A82; --on-absent: #2A0706; --late-bg: #1B3050; --late-fg: #A9C8FF; --late-fill: #8DB6F5; --on-late: #06182E; --excused-bg: #45321A; --excused-fg: #FFD08A; --excused-fill: #F2B04C; --on-excused: #1A1206; --danger: #FFB3AD; --team-1: #5FCB9F; --team-2: #F2B04C; --team-3: #8DB6F5; --team-4: #C9A6F0; --team-5: #8BE3B5; --focus: #F2B04C; } } :root[data-theme="dark"] { --bg: #0D1512; --surface: #16211D; --ink: #EEF3EF; --muted: #A3B2AB; --line: #2A3833; --line-strong: #3A4A44; --soft: #1F3A31; --brand: #7EDCB8; --primary: #5FCB9F; --on-primary: #04241A; --accent: #F2B04C; --on-accent: #1A1206; --accent-text: #F2B04C; --hero: #123B30; --hero-ink: #EEF3EF; --hero-sub: #B9D8CC; --hero-tile: rgba(255, 255, 255, 0.08); --present-bg: #173D2C; --present-fg: #8BE3B5; --present-fill: #5FCB9F; --on-present: #04241A; --absent-bg: #43201F; --absent-fg: #FFB3AD; --absent-fill: #F08A82; --on-absent: #2A0706; --late-bg: #1B3050; --late-fg: #A9C8FF; --late-fill: #8DB6F5; --on-late: #06182E; --excused-bg: #45321A; --excused-fg: #FFD08A; --excused-fill: #F2B04C; --on-excused: #1A1206; --danger: #FFB3AD; --team-1: #5FCB9F; --team-2: #F2B04C; --team-3: #8DB6F5; --team-4: #C9A6F0; --team-5: #8BE3B5; --focus: #F2B04C; } * { box-sizing: border-box; } body { margin: 0; } a { color: inherit; } svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; } svg[hidden] { display: none; } :where(a, button, input, select, summary):focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .skip-link { position: absolute; top: -100px; left: 16px; padding: 12px; background: var(--surface); z-index: 10; } .skip-link:focus { top: 12px; } .app-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; background: var(--hero); color: var(--hero-ink); flex: none; position: relative; z-index: 3; } .brand { display: flex; align-items: center; gap: 12px; min-width: 0; text-decoration: none; font-size: 18px; font-weight: 700; line-height: 1.25; } .brand-logo { display: block; width: 64px; height: 64px; flex: none; object-fit: contain; } .header-menu { flex: none; } .header-menu summary { display: grid; place-items: center; list-style: none; width: 44px; height: 44px; border-radius: 8px; cursor: pointer; } .header-menu summary::-webkit-details-marker { display: none; } .header-menu summary:hover { background: var(--hero-tile); } .header-menu nav { position: absolute; right: 20px; top: calc(100% - 8px); width: min(240px, calc(100vw - 40px)); padding: 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); box-shadow: 0 8px 24px rgba(8, 20, 16, 0.18); } .header-menu nav a { display: flex; align-items: center; min-height: 48px; padding: 12px; text-decoration: none; border-radius: 8px; } .header-menu nav a:hover, .header-menu nav a[aria-current] { background: var(--soft); } .environment { display: block; padding: 12px; font-size: 12px; color: var(--muted); } .sidebar { display: none; } main { padding: 20px; width: 100%; max-width: 1080px; min-width: 0; } h1 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(32px, 5vw, 40px); letter-spacing: -.04em; line-height: 1.2; } h2 { font-family: var(--font-display); font-weight: 700; font-size: 21px; line-height: 1.35; letter-spacing: -.02em; overflow-wrap: anywhere; } .intro { color: var(--muted); font-size: 14px; line-height: 1.65; margin: 8px 0 20px; } .page-heading, .form-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } button, .button { display: inline-flex; justify-content: center; align-items: center; min-height: 48px; min-width: 44px; padding: 12px 20px; border: 1px solid var(--emerald); border-radius: var(--radius); background: var(--emerald); color: var(--on-primary); font: inherit; font-weight: 650; text-decoration: none; cursor: pointer; } button:hover, .button:hover, .add-player-fab:hover { background: var(--emerald-hover); color: var(--on-primary); } .secondary { background: var(--surface); color: var(--emerald); } .icon-button { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; min-height: 44px; flex: none; padding: 10px; border: 0; border-radius: 10px; color: var(--emerald); background: var(--soft); text-decoration: none; } .icon-button:hover { background: color-mix(in srgb, var(--soft) 85%, var(--ink) 15%); color: var(--emerald); } .field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; min-width: 0; } label { font-weight: 650; font-size: 14px; } input, select { width: 100%; min-width: 0; min-height: 48px; padding: 12px; border: 1px solid var(--input-line); border-radius: var(--radius); background: var(--surface); color: var(--ink); font: inherit; } input::placeholder { color: var(--muted); opacity: 1; } [aria-invalid="true"] { border: 2px solid var(--danger); } .search-form { display: grid; gap: 12px; margin: 0 0 24px; } .search-form .field { margin: 0; } .search-field { position: relative; } .search-field input { min-height: 52px; padding-right: 56px; } .search-submit { position: absolute; right: 4px; top: 4px; background: transparent; } .status-filter { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 20px; } .search-form .btn-secondary { justify-self: start; font-size: 14px; padding: 8px 12px; min-height: 44px; } .result-count { font-size: 14px; color: var(--muted); margin: 0 0 10px; } .player-list { border-top: 1px solid var(--line); } .player-row { display: flex; align-items: center; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--line); } .player-details { flex: 1; min-width: 0; } .player-row h2, .player-row h3 { font-size: 17px; margin: 0 0 7px; line-height: 1.4; overflow-wrap: anywhere; } .player-meta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 14px; line-height: 1.5; } .status { display: inline-block; border-radius: 20px; padding: 3px 12px; font-size: 12px; font-weight: 700; line-height: 1.5; background: var(--line); color: var(--ink); } .active { background: var(--present-bg); color: var(--present-fg); } .inactive-row .player-details { color: var(--muted); } .empty-state { padding: 32px 0; border-top: 1px solid var(--line); } .empty-state p { color: var(--muted); line-height: 1.65; } /* The roster scrolls above a reserved dock: the floating action never overlaps rows. */ .listing-page { height: 100vh; height: 100dvh; display: flex; flex-direction: column; } .listing-page .app-layout { flex: 1; min-height: 0; overflow-y: auto; scrollbar-gutter: stable; } .listing-page main { padding-bottom: 24px; } .add-player-dock { flex: none; display: flex; justify-content: flex-end; padding: 12px 20px max(16px, env(safe-area-inset-bottom)); background: var(--page); } .add-player-fab { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--emerald); color: var(--on-primary); box-shadow: 0 4px 12px rgba(8, 20, 16, 0.28); } .add-player-fab svg { width: 32px; height: 32px; } .player-form { max-width: 620px; padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); } .notice { padding: 16px 20px; border-radius: var(--radius); line-height: 1.6; } .notice h2 { margin-top: 0; font-size: 18px; } .success { background: var(--present-bg); color: var(--present-fg); } .error { background: var(--absent-bg); color: var(--absent-fg); } .field-error { color: var(--danger); margin: 0; font-size: 14px; } .status-control { margin-top: 28px; } .status-control p, .player-form > p { line-height: 1.65; } .danger { background: var(--danger); border-color: var(--danger); } .danger:hover { background: color-mix(in srgb, var(--danger) 80%, black 20%); } footer { margin-top: 32px; color: var(--muted); font-size: 12px; line-height: 1.6; } @media (min-width: 768px) { .app-header { display: none; } .app-layout { display: grid; grid-template-columns: 248px minmax(0, 1fr); } .sidebar { display: flex; flex-direction: column; padding: 20px; border-right: 1px solid var(--line); } .nav-link { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 12px; border-radius: var(--radius); color: var(--ink); font-weight: 650; text-decoration: none; } main { padding: 32px clamp(24px, 4vw, 56px); } .player-row { padding: 20px 4px; } .add-player-dock { padding-right: 32px; } .form-page .app-layout { min-height: 100vh; } .tabbar { display: none !important; } } /* Desktop sidebar: crest/wordmark, nav links, spacer, user card. Phone-only equivalents are the app-header back/brand bar and the fixed tabbar; see the max-width: 767px block below. */ .sidebar-brand { display: flex; align-items: center; gap: 10px; min-height: 44px; margin-bottom: 20px; text-decoration: none; color: var(--ink); font-family: var(--font-display); font-weight: 700; font-size: 17px; } .sidebar-brand .brand-logo { width: 40px; height: 40px; } .sidebar-links { display: flex; flex-direction: column; gap: 4px; } .nav-link svg { width: 20px; height: 20px; } .nav-link[aria-current] { background: var(--soft); color: var(--brand); } .nav-link:hover { background: var(--soft); } .sidebar-user { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 10px; } .sidebar-user-avatar { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-weight: 700; font-size: 14px; } .sidebar-user-info { flex: 1; min-width: 0; display: flex; flex-direction: column; } .sidebar-user-info strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sidebar-user-info small { color: var(--muted); font-size: 12px; } .sidebar-user .icon-button { flex: none; width: 44px; height: 44px; min-height: 44px; } .sidebar-user form { margin: 0; } /* Phone: app-header shows either the brand or a back-chevron + page title (never both). */ .app-header-back { display: flex; align-items: center; gap: 8px; min-height: 44px; min-width: 0; text-decoration: none; color: var(--hero-ink); font-weight: 700; font-size: 17px; } .app-header-back span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 767px) { main { padding-bottom: calc(20px + 62px + env(safe-area-inset-bottom)); } .practice-screen main { padding-bottom: calc(24px + 62px + env(safe-area-inset-bottom)); } .listing-page { padding-bottom: calc(62px + env(safe-area-inset-bottom)); } .attendance-save { bottom: calc(62px + env(safe-area-inset-bottom)); } .tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 4; display: flex; justify-content: space-around; min-height: 62px; padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--line); } .tabbar-link { flex: 1 1 0; min-width: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 4px 2px; text-decoration: none; color: var(--muted); font-size: 11px; font-weight: 650; } .tabbar-link svg { width: 22px; height: 22px; } .tabbar-link[aria-current] { color: var(--brand); } } .competition-row { text-decoration: none; min-height: 88px; } .competition-row:hover { background: var(--soft); } .competition-dates { display: flex; gap: 8px 20px; flex-wrap: wrap; color: var(--muted); font-size: 13px; margin-top: 8px; } .competition-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; padding: 20px 0; margin: 0 0 20px; border-block: 1px solid var(--line); } .competition-facts dt { font-size: 13px; color: var(--muted); margin-bottom: 6px; } .competition-facts dd { margin: 0; overflow-wrap: anywhere; } .competition-detail-layout { display: grid; gap: 32px; } .teams-placeholder { border-top: 1px solid var(--line); padding-top: 16px; } .teams-placeholder p { color: var(--muted); line-height: 1.65; } .page-heading { margin-bottom: 16px; } .page-heading h1 { overflow-wrap: anywhere; max-width: 100%; } @media (min-width: 1100px) { .competition-detail-layout { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } .teams-placeholder { border-top: 0; border-left: 1px solid var(--line); padding: 0 0 0 24px; } } .team-heading { justify-content: space-between; margin-bottom: 16px; } .team-heading h2 { margin: 0; } .team-group { margin: 28px 0; } .team-group > h2 { margin-bottom: 8px; } .team-group > h2 a, .team-context a { display: inline-flex; align-items: center; min-height: 44px; } .team-context { overflow-wrap: anywhere; } textarea { width: 100%; min-height: 64px; padding: 12px; border: 1px solid var(--input-line); border-radius: var(--radius); background: var(--surface); color: var(--ink); font: inherit; resize: vertical; } textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; } .month-navigation { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 24px 0; } .month-navigation h2 { font-size: 20px; text-align: center; margin: 0; } .practice-date { color: var(--muted); font-size: 13px; margin: 0 0 8px; } .practice-time { margin: 6px 0; } .cancelled { background: var(--absent-bg); color: var(--absent-fg); } .cancelled-practice { border-left: 3px solid var(--absent-fg); padding-left: 12px; } .preserve-lines { white-space: pre-wrap; overflow-wrap: anywhere; } .team-picker { border: 0; padding: 0; margin: 0 0 24px; min-width: 0; } .team-picker legend { font-weight: 700; padding: 0 0 8px; } .team-choice { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 12px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; } .team-choice input[type=checkbox], .team-choice input[type=radio] { width: 24px; min-height: 24px; height: 24px; flex: none; accent-color: var(--emerald); } .team-choice span { min-width: 0; } .team-choice small { display: block; margin-top: 4px; color: var(--muted); font-weight: 400; } .attendance-summary { margin-top: 32px; padding-top: 12px; border-top: 1px solid var(--line); } .attendance-counts { display: flex; flex-wrap: wrap; gap: 16px 24px; } .attendance-counts dt { color: var(--muted); font-size: 13px; } .attendance-counts dd { margin: 4px 0 0; font-size: 22px; font-weight: 700; } .attendance-player { min-width: 0; padding: 16px 0 24px; border: 0; border-bottom: 1px solid var(--line); margin: 24px 0; } .attendance-player legend { font-size: 18px; font-weight: 700; overflow-wrap: anywhere; max-width: 100%; } .attendance-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 20px; } .attendance-option { position: relative; min-width: 0; } .attendance-option input { position: absolute; opacity: 0; width: 1px; min-height: 1px; height: 1px; } .attendance-option span { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 8px; border: 1px solid var(--input-line); border-radius: 10px; cursor: pointer; font-size: 13px; } .attendance-option input:checked + span { background: var(--emerald); border-color: var(--emerald); color: var(--on-primary); } .attendance-option input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; } .attendance-form { max-width: 840px; } @media (min-width: 768px) { .attendance-options { grid-template-columns: repeat(5, minmax(0, 1fr)); } } .team-detail-layout { display: grid; gap: 32px; } .team-roster { min-width: 0; } .team-member { align-items: flex-start; flex-wrap: wrap; gap: 12px; } .team-member-details { flex: 1 1 190px; min-width: 0; min-height: 48px; text-decoration: none; padding-block: 4px; } .team-member-details h3 { font-size: 17px; } .team-member-details .status { margin-left: 8px; } .remove-team-player { font-size: 13px; padding: 10px 12px; } .assignment-form, .assignment-review { max-width: 760px; } .assignment-picker { border: 0; padding: 0; margin: 20px 0; min-width: 0; } .assignment-choice { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 16px 0; border-bottom: 1px solid var(--line); cursor: pointer; } .assignment-choice input { width: 24px; height: 24px; min-height: 24px; padding: 0; flex: none; accent-color: var(--emerald); } .assignment-choice > span { min-width: 0; overflow-wrap: anywhere; } .assignment-choice strong { font-size: 17px; } .assignment-choice small { display: block; margin-top: 5px; color: var(--muted); font-weight: 400; } .assignment-choice .move-label { color: var(--excused-fg); } .move-notice { background: var(--excused-bg); color: var(--excused-fg); } .assignment-changes { padding-left: 20px; } .assignment-changes li { padding: 12px 0; overflow-wrap: anywhere; line-height: 1.6; } .assignment-save { display: flex; flex-wrap: wrap; gap: 12px; padding: 16px 0 max(16px, env(safe-area-inset-bottom)); } /* Calendar/practice screens share the supplied card and compact-control direction. */ .practice-screen main { max-width: 1080px; padding-bottom: max(24px, env(safe-area-inset-bottom)); } .practice-screen .page-heading { margin-bottom: 12px; } .practice-back { display: inline-flex; min-height: 44px; align-items: center; text-decoration: none; margin-bottom: 2px; } .practice-card, .month-card, .practice-event { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; } .practice-card { padding: 16px; margin: 16px 0; max-width: 760px; } .practice-card-heading { display: flex; align-items: flex-start; gap: 10px; justify-content: space-between; } .practice-card-heading h2 { margin: 0 0 14px; font-size: 21px; min-width: 0; } .practice-card-heading .status { flex: none; } .practice-metadata { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; } .practice-metadata li { display: flex; gap: 12px; align-items: flex-start; line-height: 1.5; font-size: 14px; } .practice-metadata span { min-width: 0; overflow-wrap: anywhere; } .practice-metadata svg { width: 20px; height: 22px; } .practice-notes { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 12px; } .practice-notes h3 { margin: 0; font-size: 15px; } .practice-notes p { font-size: 14px; line-height: 1.5; } .primary-wide { width: 100%; gap: 10px; min-height: 50px; } .practice-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; } .practice-actions .button { padding: 10px 8px; font-size: 13px; } .cancel-button { background: transparent; color: var(--danger); border-color: var(--danger); } .cancelled-card { background: var(--surface); border-color: var(--absent-fg); } .cancellation-notice { background: var(--absent-bg); color: var(--absent-fg); margin-top: 16px; } .cancellation-notice p { margin: 4px 0 0; } .practice-screen .month-card { padding: 10px; } .practice-screen .month-navigation { margin: 0 0 12px; gap: 4px; } .practice-screen .month-navigation h2 { font-size: 18px; flex: 1; } .month-arrow { display: grid; place-items: center; min-width: 44px; height: 44px; font-size: 30px; text-decoration: none; } .today-button { min-height: 44px; padding: 8px 10px; font-size: 13px; } .month-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); text-align: center; } .weekday { font-size: 11px; color: var(--muted); padding: 8px 0; } .month-day { position: relative; display: grid; place-items: center; min-height: 44px; text-decoration: none; font-size: 15px; border-radius: 50%; } .month-day.is-today { background: var(--emerald); color: var(--on-primary); font-weight: 700; } .event-dots { display: flex; gap: 3px; position: absolute; bottom: 2px; } .event-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--present-fill); } .is-today .event-dots i { background: var(--on-primary); } .event-dots .cancelled-dot { background: var(--absent-fill); } .agenda-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 18px 0 12px; } .agenda-heading h2 { font-size: 19px; margin: 0; } .agenda-heading > span { color: var(--muted); font-size: 12px; } .practice-agenda { display: grid; gap: 10px; } .practice-event { display: flex; gap: 10px; padding: 12px; text-decoration: none; scroll-margin-top: 16px; } .practice-event:hover { border-color: var(--emerald); } .date-tile { flex: 0 0 48px; align-self: flex-start; display: grid; text-align: center; gap: 2px; background: var(--soft); color: var(--brand); border-radius: 10px; padding: 8px 3px; font-size: 11px; } .date-tile > span:first-child { text-transform: uppercase; font-weight: 700; } .date-tile strong { font-size: 24px; line-height: 1; } .practice-event.cancelled-practice { border-left: 1px solid var(--line); } .cancelled-practice .date-tile { background: var(--absent-bg); color: var(--absent-fg); } .event-info { min-width: 0; flex: 1; } .event-info h3 { margin: 4px 0; font-size: 16px; overflow-wrap: anywhere; } .event-top { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: space-between; } .event-top p { margin: 0; font-size: 11px; color: var(--muted); } .event-top .status { padding: 3px 7px; font-size: 10px; } .event-meta { display: flex; gap: 7px; margin: 6px 0 0; font-size: 12px; color: var(--muted); line-height: 1.4; } .event-meta svg { width: 16px; height: 17px; } .event-meta span { min-width: 0; overflow-wrap: anywhere; } .cancellation-text { color: var(--absent-fg); font-size: 12px; overflow-wrap: anywhere; } .practice-screen .practice-form { max-width: 760px; margin-top: 24px; } .practice-time-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .practice-time-fields input { padding: 10px; } .practice-form .team-picker { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px; } .practice-form .team-picker legend { padding: 0 6px; } .practice-form .team-choice:last-child { border-bottom: 0; } .practice-save { display: grid; gap: 10px; } .practice-screen.listing-page main { padding-bottom: 16px; } .practice-screen .add-player-dock { padding-top: 6px; padding-bottom: max(16px, env(safe-area-inset-bottom)); } .practice-screen .attendance-summary { max-width: 760px; } .attendance-context { margin-top: 12px; } .attendance-totals { display: flex; flex-wrap: wrap; gap: 8px; max-width: 760px; } .attendance-badge { padding: 10px 12px; border-radius: 9px; background: var(--soft); font-size: 12px; text-align: center; flex: 1; white-space: nowrap; } .attendance-badge[hidden] { display: none; } .attendance-badge.status-present { background: var(--present-bg); color: var(--present-fg); } .attendance-badge.status-absent { background: var(--absent-bg); color: var(--absent-fg); } .attendance-badge.status-late { background: var(--late-bg); color: var(--late-fg); } .attendance-badge.status-excused { background: var(--excused-bg); color: var(--excused-fg); } .attendance-hint { font-size: 12px; line-height: 1.5; } .attendance-legend { max-width: 760px; display: flex; justify-content: space-between; gap: 4px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); padding: 8px; margin: 12px 0; } .attendance-legend > span { display: flex; align-items: center; gap: 4px; font-size: 10px; } .attendance-legend b { border-radius: 50%; width: 23px; height: 23px; display: grid; place-items: center; font-size: 12px; } .attendance-legend .status-present { background: var(--present-fill); color: var(--on-present); } .attendance-legend .status-absent { background: var(--absent-fill); color: var(--on-absent); } .attendance-legend .status-late { background: var(--late-fill); color: var(--on-late); } .attendance-legend .status-excused { background: var(--excused-fill); color: var(--on-excused); } .practice-screen .attendance-form { max-width: 760px; } .practice-screen .attendance-player { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 8px; margin: 8px 0; } .attendance-player-line { display: flex; align-items: center; gap: 6px; min-height: 44px; } .attendance-name-status { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .attendance-name { font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; } .attendance-status-word { font-size: 10px; font-weight: 700; color: var(--muted); } .attendance-status-word.status-word-present { color: var(--present-fg); } .attendance-status-word.status-word-absent { color: var(--absent-fg); } .attendance-status-word.status-word-late { color: var(--late-fg); } .attendance-status-word.status-word-excused { color: var(--excused-fg); } .practice-screen .attendance-options { display: flex; gap: 4px; flex: none; margin: 0; } .practice-screen .attendance-option span { width: 44px; min-height: 44px; height: 44px; padding: 0; border-radius: 12px; background: var(--surface); color: var(--muted); font-size: 14px; border: 1px solid var(--line-strong); } .practice-screen .attendance-option input:checked + .status-present { background: var(--present-fill); border-color: var(--present-fill); color: var(--on-present); } .practice-screen .attendance-option input:checked + .status-absent { background: var(--absent-fill); border-color: var(--absent-fill); color: var(--on-absent); box-shadow: 0 0 0 3px var(--absent-bg); } .practice-screen .attendance-option input:checked + .status-late { background: var(--late-fill); border-color: var(--late-fill); color: var(--on-late); } .practice-screen .attendance-option input:checked + .status-excused { background: var(--excused-fill); border-color: var(--excused-fill); color: var(--on-excused); } .excused-note { display: none; margin: 8px 0 0; background: var(--excused-bg); padding: 8px; border-radius: 8px; } .attendance-player:has(input[value="Excused"]:checked) .excused-note { display: flex; } .excused-note label { font-size: 12px; } .excused-note textarea { min-height: 48px; font-size: 13px; } .note-error { font-size: 12px; } .note-error[hidden] { display: none; } .legacy-unmarked { font-size: 12px; color: var(--muted); } .attendance-player:has(input[type="radio"]:checked) .legacy-unmarked { display: none; } .attendance-save { position: sticky; bottom: 0; padding: 12px 0 max(12px, env(safe-area-inset-bottom)); background: var(--page); margin-top: 24px; z-index: 2; } .historical-attendance p { font-size: 13px; } .historical-attendance .attendance-badge { display: inline-block; margin-left: 8px; } @media (max-width: 360px) { .practice-screen main { padding-left: 5px; padding-right: 5px; } .practice-screen .month-card { padding: 0; } } @media (min-width: 768px) { .practice-screen main { padding-bottom: 32px; } .attendance-name { font-size: 16px; } .practice-screen .month-card { max-width: 760px; } .practice-agenda { max-width: 760px; } } .practice-team-select { margin-bottom: 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); } .practice-team-select > summary { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 12px; cursor: pointer; list-style: none; font-size: 12px; } .practice-team-select > summary::-webkit-details-marker { display: none; } .practice-team-select > summary > span:first-of-type { flex: 1; } .practice-team-select strong { display: block; margin-top: 4px; font-size: 14px; } .practice-team-select .team-picker { margin: 0; border: 0; } .practice-form [data-repeat-group] { margin-bottom: 4px; } .practice-form [data-repeat-group][hidden] { display: none; } .practice-form [data-repeat-group] .team-picker { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px; } /* Attendance overview, recent history and reports share the existing app shell. */ .attendance-overview { max-width: 760px; } .attendance-filters { display: grid; gap: 14px; margin-bottom: 20px; } .attendance-filters .field { margin: 0; } .attendance-filters select { text-overflow: ellipsis; } .attendance-practice h2 { margin: 8px 0; font-size: 19px; } .attendance-practice .primary-wide { margin-top: 16px; } .attendance-explanation { font-size: 13px; line-height: 1.6; color: var(--muted); overflow-wrap: anywhere; } .attendance-page-links { display: grid; gap: 12px; margin: 24px 0; } .report-summary h2 { margin-top: 0; } .report-players { display: grid; gap: 12px; } .report-player h3 { margin: 0; font-size: 17px; overflow-wrap: anywhere; } .report-player h3 a { display: flex; align-items: center; min-height: 44px; } .report-player > p { font-size: 13px; } .attendance-overview .attendance-totals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 560px) { .attendance-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; } .attendance-team-filter { grid-column: 1 / -1; } .attendance-overview .attendance-totals { grid-template-columns: repeat(4, minmax(0, 1fr)); } .attendance-page-links { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .calendar-export { max-width: 760px; } .calendar-export [data-calendar-scope][hidden] { display: none; } .calendar-export .team-picker { max-height: 320px; overflow-y: auto; } .calendar-revoke { margin-top: 12px; } .calendar-revoke summary { display: flex; align-items: center; min-height: 48px; color: var(--danger); cursor: pointer; } .calendar-revoke p { line-height: 1.5; overflow-wrap: anywhere; } /* Player Emergency Contacts: Add Player's inline fieldset and the Edit Player management section. */ .contacts-section { margin-top: 28px; } .contact-list { border-top: 1px solid var(--line); margin-bottom: 20px; } .contact-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 16px 0; border-bottom: 1px solid var(--line); } .contact-details { min-width: 0; flex: 1 1 200px; } .contact-details h3 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; font-size: 16px; overflow-wrap: anywhere; } .contact-meta { margin: 6px 0 0; color: var(--muted); font-size: 13px; overflow-wrap: anywhere; } .contact-actions { display: flex; gap: 8px; flex-wrap: wrap; flex: none; } .contact-actions form { margin: 0; } .contact-actions .button, .contact-actions button { min-height: 44px; padding: 8px 14px; font-size: 13px; } .contact-add { margin-top: 4px; } .contact-add summary { display: flex; align-items: center; min-height: 48px; font-weight: 650; cursor: pointer; } .contact-add form { margin-top: 12px; } [data-contact-mode][hidden] { display: none; } [data-contact-mode="existing"] .team-picker { max-height: 320px; overflow-y: auto; } [data-role-group][hidden] { display: none; } /* Today's "Needs attention" card (admin only). */ .attention-icon { flex: none; display: grid; place-items: center; width: 20px; } .attention-blocking { color: var(--absent-fg); } .attention-advisory { color: var(--accent-text); } /* Account and More: the phone tab bar's non-list destinations. */ .account-card { display: flex; flex-direction: column; gap: 20px; } .account-identity { display: flex; align-items: center; gap: 14px; } .account-identity .sidebar-user-avatar { width: 52px; height: 52px; font-size: 20px; } .account-actions { display: flex; flex-wrap: wrap; gap: 10px; } .more-list { border-top: 1px solid var(--line); } .more-row { text-decoration: none; gap: 14px; } .more-row svg { flex: none; color: var(--brand); } .more-row .player-details { flex: 1; } .more-row h3 { margin: 0; font-size: 16px; } .more-row:hover { background: var(--soft); } /* Super Admin: User Administration and Audit Log. */ .audit-list { display: grid; gap: 10px; margin: 12px 0; } .audit-row { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px; } .audit-row-top { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: baseline; } .audit-time { color: var(--muted); font-size: 12px; white-space: nowrap; } .audit-meta { margin: 4px 0 0; color: var(--muted); font-size: 13px; overflow-wrap: anywhere; } .audit-detail { margin: 8px 0 0; padding: 8px; background: var(--soft); border-radius: 8px; font-size: 12px; font-family: ui-monospace, monospace; overflow-wrap: anywhere; } /* Theme toggle (moon/sun icon button); relocated into the sidebar/tab-bar user area in Phase 1. */ .theme-toggle { color: var(--hero-ink); } .theme-toggle:hover { background: var(--hero-tile); } .sidebar-user .theme-toggle, .account-actions .theme-toggle { color: var(--brand); } .sidebar-user .theme-toggle:hover { background: var(--soft); } /* The phone app-header now shows this back-chevron instead; must win over the unconditional rule above. */ @media (max-width: 767px) { .practice-back { display: none; } } /* ============================================================================================ Component library (docs/style-guide.md ยง1.6). Additive: existing pages keep their current classes until each is converted in Part 2 Phase 3; new/converted markup uses these instead. ============================================================================================ */ /* Buttons */ .btn-primary, .btn-accent, .btn-secondary, .btn-danger, .btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; min-width: 44px; padding: 12px 20px; border-radius: var(--radius); border: 1px solid transparent; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; } .btn-primary svg, .btn-accent svg, .btn-secondary svg, .btn-danger svg, .btn-ghost svg { width: 20px; height: 20px; } .btn-primary { background: var(--primary); color: var(--on-primary); } .btn-primary:hover { background: color-mix(in srgb, var(--primary) 88%, black 12%); } .btn-accent { background: var(--accent); color: var(--on-accent); } .btn-accent:hover { background: color-mix(in srgb, var(--accent) 88%, black 12%); } .btn-secondary { background: transparent; border-color: var(--line-strong); color: var(--ink); } .btn-secondary:hover { background: var(--soft); } .btn-danger { background: transparent; border-color: var(--danger); color: var(--danger); } .btn-danger:hover { background: var(--absent-bg); } .btn-ghost { background: transparent; color: var(--brand); padding: 8px 10px; min-height: 44px; } .btn-ghost:hover { background: var(--soft); } @media (min-width: 768px) { .btn-primary, .btn-accent, .btn-secondary, .btn-danger { min-height: 48px; } } /* Fields: two-column desktop form layout, built on the existing .field/input/label rules */ .form-grid { display: grid; gap: 4px 20px; } .form-grid .field { margin-bottom: 16px; } .field-hint { font-size: 12px; color: var(--muted); margin: 4px 0 0; } @media (min-width: 768px) { .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .form-grid .field-full { grid-column: 1 / -1; } } /* Cards */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 16px; display: flex; flex-direction: column; gap: 12px; } .card-title-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .card-title-row h2 { margin: 0; } .card-meta { color: var(--muted); font-size: 13px; } @media (min-width: 768px) { .card { padding: 24px; gap: 16px; } } /* List rows: a generalized version of .player-list/.player-row for new list pages */ .list { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; } .list-row { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 14px 16px; text-decoration: none; color: inherit; border-top: 1px solid var(--line); } .list-row:first-child { border-top: 0; } .list-row:hover { background: var(--soft); } .list-row-title { font-size: 15px; font-weight: 700; } .list-row-sub { font-size: 13px; color: var(--muted); } .list-row-chevron { flex: none; color: var(--muted); } /* Tables: desktop-only CSS grid, column tracks set per page via an inline style or modifier class */ .table { display: none; } @media (min-width: 1100px) { .table { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; } .table-row { display: grid; align-items: center; gap: 16px; min-height: 68px; padding: 0 20px; border-top: 1px solid var(--line); } .table-row:first-child { border-top: 0; } .table-header { color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; min-height: 44px; } .table-actions { display: flex; justify-content: flex-end; width: 56px; } } /* Chips (see also .status/.active/.cancelled, the pre-Phase-2 equivalents still in use) */ .chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: var(--radius-pill); } .chip-present { background: var(--present-bg); color: var(--present-fg); } .chip-absent { background: var(--absent-bg); color: var(--absent-fg); } .chip-late { background: var(--late-bg); color: var(--late-fg); } .chip-excused { background: var(--excused-bg); color: var(--excused-fg); } .chip-unmarked { background: var(--soft); color: var(--muted); } .chip-neutral { background: var(--soft); color: var(--brand); } .chip-team i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--team-1); } .chip-team.team-2 i { background: var(--team-2); } .chip-team.team-3 i { background: var(--team-3); } .chip-team.team-4 i { background: var(--team-4); } .chip-team.team-5 i { background: var(--team-5); } /* Filter pills and segmented control: replace