/* MMP Challenge Cup — golf score-entry styles * * Re-styles all the class names emitted by score-entry.html's renderer * (.player-card, .pc-head, .pc-toggle, .pc-counts, .pc-segmented, .summary-tile, * .legend, .field, .btn, .status, etc.) using design-system tokens. * * The JS that updates state, computes points, and serializes golf.json is * deliberately untouched — visual layer only. * * Theme: theme-links (set on ) — light editorial. */ * { box-sizing: border-box; } .shell { max-width: 760px; margin: 0 auto; padding: var(--space-5) var(--space-4) var(--space-9); } /* The form has no class on its inputs — style by element so legacy * markup gets the design-token treatment without per-field changes. */ input[type="number"], input[type="text"], input[type="date"], select, textarea { font-family: var(--font-ui); font-size: var(--text-md); color: var(--ink); background: var(--bg-raised); border: 1px solid var(--rule); border-radius: var(--radius-md); padding: 10px 12px; transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent); } /* ---------- header ---------- */ header.top { border-bottom: 1px solid var(--rule); padding-bottom: var(--space-4); margin-bottom: var(--space-5); } .back-link { display: inline-block; margin-bottom: var(--space-3); font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--accent); text-decoration: none; } .back-link:hover { color: var(--accent-hover); } .brand { display: flex; align-items: center; gap: var(--space-3); font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); letter-spacing: var(--tracking-tight); color: var(--ink); } .brand-mark { width: 36px; height: 36px; display: grid; place-items: center; color: var(--primary); } .brand-mark svg { width: 28px; height: 28px; } .brand-sub { display: block; font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: var(--text-xs); color: var(--ink-3); letter-spacing: 0; } header.top h1 { font-family: var(--font-display); font-weight: 600; font-size: var(--text-3xl); line-height: 1.05; letter-spacing: var(--tracking-tight); margin: var(--space-3) 0 var(--space-2); font-variation-settings: "opsz" 144; } header.top .lede { font-family: var(--font-display); font-style: italic; color: var(--ink-2); font-size: var(--text-md); margin: 0; } /* ---------- cards ---------- */ .card { background: var(--bg-raised); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: var(--space-5); margin-bottom: var(--space-4); box-shadow: var(--shadow-sm); } .card h2 { font-family: var(--font-ui); font-size: var(--text-2xs); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--ink-3); font-weight: 700; margin: 0 0 var(--space-3); } .field { display: block; margin-bottom: var(--space-3); } .field label { display: block; font-family: var(--font-ui); font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--ink-3); font-weight: 600; margin-bottom: 4px; } .field input, .field select { width: 100%; } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); } @media (max-width: 480px) { .field-row { grid-template-columns: 1fr; } } /* ---------- legend ---------- */ details.legend { background: var(--bg-tonal); border: 1px solid var(--rule); border-radius: var(--radius-md); padding: 10px var(--space-4); margin-bottom: var(--space-4); } details.legend summary { font-family: var(--font-ui); font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--ink-2); cursor: pointer; font-weight: 700; } details.legend summary::after { content: " — tap to expand"; color: var(--ink-3); font-weight: 400; } details.legend[open] summary::after { content: ""; } .legend-grid { display: grid; grid-template-columns: 1fr; gap: 6px; margin-top: var(--space-3); } .legend-row { display: flex; gap: var(--space-3); align-items: baseline; padding: 4px 0; border-bottom: 1px dashed var(--rule); } .legend-row:last-child { border-bottom: 0; } .legend-row .pts { font-family: var(--font-mono); font-feature-settings: "tnum"; font-weight: 700; color: var(--primary); min-width: 48px; } .legend-row .name { font-family: var(--font-display); font-weight: 500; min-width: 96px; } .legend-row .desc { color: var(--ink-3); font-size: var(--text-xs); font-family: var(--font-ui); } /* ---------- player cards ---------- */ .player-card { background: var(--bg-raised); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: var(--space-4); margin-bottom: var(--space-3); box-shadow: var(--shadow-sm); transition: opacity var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); } .player-card.is-dnp { opacity: 0.45; } .player-card.is-low-round { border-color: var(--gold); box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 25%, transparent); } .pc-head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); } .pc-head .avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--bg-tonal); border: 1px solid var(--rule); color: var(--ink); display: grid; place-items: center; font-family: var(--font-ui); font-weight: 700; font-size: var(--text-sm); flex: 0 0 auto; } .pc-head .pname { font-family: var(--font-display); font-weight: 500; font-size: var(--text-md); } .pc-head .phint { color: var(--ink-3); font-size: var(--text-xs); margin-top: 2px; } .pc-head .spacer { flex: 1; } .pc-head .pts { font-family: var(--font-mono); font-feature-settings: "tnum"; font-weight: 700; font-size: var(--text-lg); background: color-mix(in srgb, var(--primary) 12%, var(--bg-raised)); color: var(--primary); padding: 6px 12px; border-radius: var(--radius-md); min-width: 60px; text-align: right; border: 1px solid color-mix(in srgb, var(--primary) 25%, var(--rule)); } .pc-head .pts.zero { background: var(--bg-tonal); color: var(--ink-3); border-color: var(--rule); } .pc-head .pts .lbl { font-family: var(--font-ui); font-weight: 700; font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--primary); display: block; } .pc-head .pts.zero .lbl { color: var(--ink-3); } /* ---------- toggle (Played/DNP) ---------- */ .pc-toggle { appearance: none; height: 36px; padding: 0 var(--space-3); border-radius: var(--radius-md); background: var(--bg-tonal); border: 1px solid var(--rule); color: var(--ink-3); font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-wide); text-transform: uppercase; cursor: pointer; flex: 0 0 auto; transition: background var(--dur-fast) var(--ease-out); } .pc-toggle.is-on { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); } /* ---------- holes / gross / hcp / net rows ---------- */ .pc-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin-bottom: var(--space-2); } .pc-row.three { grid-template-columns: 1fr 1fr 1fr; } .pc-field { display: block; } .pc-field .pc-label { font-family: var(--font-ui); font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; font-weight: 700; display: block; } .pc-field input { width: 100%; padding: 10px; text-align: center; font-family: var(--font-mono); font-feature-settings: "tnum"; font-size: var(--text-md); -moz-appearance: textfield; } .pc-field input::-webkit-outer-spin-button, .pc-field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .pc-net { display: block; padding: 10px; text-align: center; font-family: var(--font-mono); font-feature-settings: "tnum"; font-size: var(--text-md); background: var(--bg-tonal); border: 1px dashed var(--rule); border-radius: var(--radius-md); color: var(--ink-3); font-weight: 700; } .pc-net.is-set { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 35%, var(--rule)); border-style: solid; background: color-mix(in srgb, var(--primary) 8%, var(--bg-raised)); } /* ---------- segmented (9/18 holes) ---------- */ .pc-segmented { display: flex; gap: 4px; background: var(--bg-tonal); border: 1px solid var(--rule); border-radius: var(--radius-md); padding: 3px; } .pc-segmented button { flex: 1; padding: 8px 0; border-radius: var(--radius-sm); font-family: var(--font-ui); font-weight: 700; font-size: var(--text-sm); color: var(--ink-3); background: transparent; border: 0; cursor: pointer; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .pc-segmented button.is-on { background: var(--primary); color: var(--primary-ink); } /* ---------- counts grid (pars/birdies/eagles/albatrosses/HIO) ---------- */ .pc-counts { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-2); margin-top: 4px; } @media (max-width: 480px) { .pc-counts { grid-template-columns: repeat(3, 1fr); } } .pc-count { background: var(--bg-tonal); border: 1px solid var(--rule); border-radius: var(--radius-md); padding: var(--space-2); text-align: center; } .pc-count .lbl { font-family: var(--font-ui); font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--ink-3); font-weight: 700; } .pc-count .pts-hint { font-family: var(--font-mono); font-size: 9px; color: var(--ink-3); } .pc-count input { width: 100%; text-align: center; font-family: var(--font-mono); font-feature-settings: "tnum"; font-size: var(--text-md); background: transparent; border: 0; padding: 4px 0 0; color: var(--ink); } .pc-count input:focus { outline: none; box-shadow: none; } .pc-count.has-value { border-color: color-mix(in srgb, var(--primary) 35%, var(--rule)); background: color-mix(in srgb, var(--primary) 8%, var(--bg-raised)); } .pc-count.has-value .lbl { color: var(--primary); } .pc-low-round { margin-top: var(--space-3); font-size: var(--text-xs); color: var(--gold); font-weight: 700; font-family: var(--font-ui); letter-spacing: var(--tracking-wide); text-transform: uppercase; display: none; } .player-card.is-low-round .pc-low-round { display: block; } .pc-penalty { margin-top: var(--space-2); font-size: var(--text-xs); color: var(--danger, #c0392b); font-weight: 700; font-family: var(--font-ui); letter-spacing: var(--tracking-wide); text-transform: uppercase; display: none; } .player-card.is-penalty .pc-penalty { display: block; } /* ---------- summary ---------- */ .summary-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-3); } @media (max-width: 480px) { .summary-grid { grid-template-columns: 1fr 1fr; } } .summary-tile { background: var(--bg-tonal); border: 1px solid var(--rule); border-radius: var(--radius-md); padding: var(--space-3); } .summary-tile .lbl { font-family: var(--font-ui); font-size: var(--text-2xs); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--ink-3); font-weight: 700; } .summary-tile .val { font-family: var(--font-display); font-weight: 600; font-size: var(--text-xl); margin-top: 2px; letter-spacing: var(--tracking-tight); font-variation-settings: "opsz" 144; } .summary-tile .sub { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--ink-3); margin-top: 2px; } /* ---------- save buttons ---------- */ .actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: 4px; } .btn { padding: 12px var(--space-4); border-radius: var(--radius-md); font-family: var(--font-ui); font-weight: 600; font-size: var(--text-sm); border: 1px solid var(--rule); background: var(--bg-raised); color: var(--ink); cursor: pointer; transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); } .btn:hover { border-color: var(--rule-strong); } .btn.primary { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); } .btn.primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); } .btn.ghost { background: transparent; } .btn[disabled] { opacity: .5; cursor: not-allowed; } /* ---------- sync status chip ---------- */ .sync-status { margin-top: var(--space-3); display: inline-flex; align-items: center; gap: var(--space-2); padding: 8px 14px; border-radius: var(--radius-pill); background: var(--bg-tonal); border: 1px solid var(--rule); font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 600; color: var(--ink-2); } .sync-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); } [data-state="synced"] .sync-dot { background: var(--success); box-shadow: 0 0 0 4px color-mix(in srgb, var(--success) 18%, transparent); } [data-state="syncing"] .sync-dot { background: var(--warning); animation: sync-pulse 1.2s ease-in-out infinite; } [data-state="offline"] .sync-dot { background: var(--ink-3); } [data-state="paused"] .sync-dot { background: var(--danger); } @keyframes sync-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } .sync-pending { margin-left: var(--space-2); padding: 2px 8px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--warning) 18%, var(--bg-raised)); color: var(--warning); font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: 700; cursor: pointer; } /* ---------- status / preview ---------- */ .status { margin-top: var(--space-3); padding: 10px var(--space-3); border-radius: var(--radius-md); font-family: var(--font-ui); font-size: var(--text-sm); display: none; } .status.is-ok { background: color-mix(in srgb, var(--success) 12%, var(--bg-raised)); border: 1px solid var(--success); color: var(--success); display: block; } .status.is-err { background: color-mix(in srgb, var(--danger) 12%, var(--bg-raised)); border: 1px solid var(--danger); color: var(--danger); display: block; } details.preview { background: var(--bg-tonal); border: 1px solid var(--rule); border-radius: var(--radius-md); padding: 10px var(--space-3); margin-top: var(--space-3); } details.preview summary { font-family: var(--font-ui); font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--ink-2); cursor: pointer; font-weight: 700; } details.preview pre { background: var(--bg); border: 1px solid var(--rule); border-radius: var(--radius-sm); padding: 10px; margin-top: 10px; overflow: auto; max-height: 300px; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-2); } .hint { color: var(--ink-3); font-family: var(--font-ui); font-size: var(--text-xs); margin-top: 6px; }