/* Saira Condensed (the web stand-in for Greed Condensed), served from this site: latin subset,
   weights 500/600/700 (assets/fonts/, SIL Open Font License: assets/fonts/OFL.txt). */
@font-face { font-family: 'Saira Condensed'; font-style: normal; font-weight: 500; font-display: swap; src: url('../assets/fonts/saira-condensed-latin-500-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Saira Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url('../assets/fonts/saira-condensed-latin-600-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Saira Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url('../assets/fonts/saira-condensed-latin-700-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* UCG Routine Planner: built on the UCG Design System (2026 identity).
   Tokens mirror colors_and_type.css from the design system. Greed Condensed (display) and
   Suisse Intl (body) are added by the build when their licensed files are in assets/fonts/
   (tools/build_site.mjs); without them the planner falls back to Saira Condensed and Arial. */

:root {
  /* Primary palette */
  --ucg-navy: #1e2b38;
  --ucg-blue-green: #a5c8cf;
  --ucg-light-blue: #dbebee;
  /* Secondary palette — accents, chips, data. Use sparingly. */
  --ucg-purple: #adbae9;
  --ucg-red-orange: #f4694a; /* urgency only */
  --ucg-dark-blue-green: #184b56;
  --ucg-golden-yellow: #f6c328;
  /* Extended neutrals */
  --ucg-navy-deep: #141e27;
  --ucg-light-blue-deep: #c7dee2;
  --ucg-white: #ffffff;
  --ucg-border: #bfd5d9;
  --ucg-border-soft: #cfe1e4;

  /* Semantic */
  --fg-primary: var(--ucg-navy);
  --fg-secondary: #4a5a66;
  --fg-muted: #52626c; /* 5:1 on light blue: small labels stay readable */
  --fg-on-dark: var(--ucg-light-blue);
  --fg-accent: var(--ucg-dark-blue-green);
  --bg-page: var(--ucg-light-blue);
  --bg-surface: var(--ucg-white);
  --bg-surface-2: var(--ucg-light-blue-deep);
  --bg-accent: var(--ucg-blue-green);
  --bg-inverse: var(--ucg-navy);
  --border-default: var(--ucg-border);
  --border-field: #6b858d; /* input edges: 3.9:1 on white, 3.2:1 on light blue (WCAG non-text 3:1) */
  --border-subtle: var(--ucg-border-soft);

  /* Type */
  --font-display: 'Greed Condensed', 'Saira Condensed', 'Arial Narrow', sans-serif;
  --font-body: 'Suisse Intl', Arial, Helvetica, 'Helvetica Neue', sans-serif;
  --fs-h1: clamp(2.6rem, 6vw, 5rem);
  --fs-h2: clamp(2rem, 4vw, 3.4rem);
  --fs-body: 1rem;
  --fs-sm: 0.92rem;
  --fs-xs: 0.82rem;
  --fs-micro: 0.72rem;
  --tracking-display: 0.005em;
  --tracking-eyebrow: 0.16em;
  --tracking-subhead: 0.2em;
  --leading-tight: 0.92;
  --leading-body: 1.55;

  /* Shape */
  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;
  --radius-btn: 8px;
  --shadow-sm: 0 1px 2px rgba(30, 43, 56, 0.06), 0 1px 1px rgba(30, 43, 56, 0.04);
  --shadow: 0 4px 14px rgba(30, 43, 56, 0.08);
  --shadow-lg: 0 20px 50px rgba(30, 43, 56, 0.12);

  /* Space + motion */
  --gutter: clamp(20px, 4vw, 48px);
  --container-max: 1240px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --duration-1: 0.15s;
  --duration-2: 0.2s;

  color-scheme: light;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--leading-body);
  color: var(--fg-primary);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

input, select, button { font: inherit; color: inherit; }
::selection { background: var(--ucg-blue-green); color: var(--ucg-navy); }

/* ---- Type roles ---- */
h1, h2, .card-title {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--fg-primary);
  margin: 0;
}
h1 { font-size: var(--fs-h1); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); }
h2 { font-size: var(--fs-h2); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); }
.card-title { font-size: 1.75rem; line-height: 1; letter-spacing: var(--tracking-display); }
.eyebrow {
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--fg-accent);
  margin: 0 0 0.85rem;
}
.lead { font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.6; color: var(--fg-secondary); }

/* ---- Header: logo, athlete switcher, account menu ---- */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: rgba(219, 235, 238, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-subtle);
  padding: 0 var(--gutter);
}
.header-inner { display: flex; align-items: center; gap: 16px; height: 56px; max-width: var(--container-max); margin: 0 auto; }
.brand { display: flex; align-items: center; gap: 16px; min-width: 0; }
.brand-logo { height: 30px; width: auto; display: block; }
.brand-mark { display: none; width: 28px; height: 28px; }
.brand-divider { width: 1px; height: 24px; background: var(--border-default); }
.brand-app {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--tracking-subhead); font-size: 0.95rem; color: var(--fg-primary); white-space: nowrap;
}
.user-area { display: flex; align-items: center; gap: 10px; flex: none; }
.avatar { width: 100%; height: 100%; object-fit: cover; display: block; }
.account-btn {
  width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; overflow: hidden; cursor: pointer;
  display: grid; place-items: center; background: var(--ucg-navy); color: var(--ucg-light-blue);
  font-size: var(--fs-xs); font-weight: 600;
}
@media (hover: hover) { .account-btn:hover { box-shadow: 0 0 0 3px var(--ucg-blue-green); } }

/* Menus (the account menu). */
.menu-wrap { position: relative; }
.menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; min-width: 230px; padding: 6px;
  background: var(--bg-surface); color: var(--fg-primary); border: 1px solid var(--border-default);
  border-radius: var(--radius); box-shadow: var(--shadow-lg); text-align: left;
}
.menu [role='menuitem'] {
  display: block; width: 100%; padding: 10px 12px; border: 0; border-radius: var(--radius-btn);
  background: transparent; color: inherit; font: inherit; font-size: 0.95rem; text-align: left; cursor: pointer;
}
.menu a[role='menuitem'] { box-sizing: border-box; text-decoration: none; }
.menu [role='menuitem']:focus-visible { background: var(--ucg-light-blue); outline: 2px solid var(--ucg-navy); outline-offset: -2px; }
@media (hover: hover) { .menu [role='menuitem']:hover { background: var(--ucg-light-blue); } }
.menu-who { margin: 0 0 4px; padding: 8px 12px 10px; border-bottom: 1px solid var(--border-subtle); font-size: var(--fs-xs); color: var(--fg-secondary); }
.menu-who span { display: block; }
.icon-btn {
  width: 44px; height: 44px; display: grid; place-items: center; padding: 0; cursor: pointer; flex: none;
  border: 1px solid var(--border-default); border-radius: var(--radius-btn); background: var(--bg-surface); color: var(--fg-primary);
}
@media (hover: hover) { .icon-btn:hover { border-color: var(--ucg-navy); } }

.banner {
  background: var(--ucg-golden-yellow); color: var(--ucg-navy);
  padding: 8px var(--gutter); font-size: var(--fs-sm); font-weight: 600;
}
.banner-guest { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.banner-guest[hidden] { display: none; }
.banner-move { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding-top: 12px; padding-bottom: 12px; font-size: var(--fs-body); line-height: 1.45; }
.banner-move[hidden] { display: none; }
.banner-move > span:first-child { flex: 1 1 420px; }
.banner-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.banner-link { background: none; border: 0; padding: 4px 2px; font: inherit; font-weight: 700; color: var(--ucg-navy); text-decoration: underline; cursor: pointer; }
.banner-btn {
  background: var(--ucg-navy); color: var(--ucg-white); border: 0; border-radius: var(--radius-btn);
  padding: 6px 12px; font: inherit; font-weight: 700; cursor: pointer;
}
@media (hover: hover) { .banner-btn:hover { background: var(--ucg-navy-deep); } }

main { padding: 0 0 clamp(48px, 6vw, 80px); }
.site-footer { border-top: 1px solid var(--border-default); padding: 16px var(--gutter) 24px; }
.site-footer a { color: var(--ucg-navy); font-weight: 600; }
/* privacy.html */
.privacy { max-width: 76ch; margin: 24px auto 40px; padding: 8px 24px 24px; background: var(--bg-surface); color: var(--fg-primary); border: 1px solid var(--border-default); }
.privacy h1 { margin-bottom: 4px; }
.privacy a { color: var(--ucg-navy); }
@media (max-width: 800px) { .privacy { margin: 16px 12px 32px; padding: 4px 16px 20px; } }
.site-footer p { max-width: var(--container-max); margin: 0 auto; font-size: var(--fs-xs); color: var(--fg-secondary); }
.loading, main > .error { padding: 48px var(--gutter); max-width: var(--container-max); margin: 0 auto; }
.loading { color: var(--fg-muted); }
.error { color: #a3361f; } /* 5.5:1 on the light blue page */

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.12em; font-size: 0.95rem; line-height: 1;
  border: 1.5px solid transparent; border-radius: var(--radius-btn);
  padding: 12px 18px; cursor: pointer; white-space: nowrap;
  transition: background var(--duration-2) var(--ease), color var(--duration-2) var(--ease),
    border-color var(--duration-2) var(--ease), transform var(--duration-2) var(--ease);
}
@media (hover: hover) { .btn:hover { transform: translateY(-1px); } }
.btn:disabled { opacity: 0.6; cursor: progress; transform: none; }
.btn-sm { padding: 8px 12px; font-size: 0.82rem; }
.btn-primary { background: var(--ucg-navy); color: var(--ucg-light-blue); }
@media (hover: hover) { .btn-primary:hover { background: var(--ucg-dark-blue-green); } }
.btn-accent { background: var(--ucg-blue-green); color: var(--ucg-navy); }
@media (hover: hover) { .btn-accent:hover { background: var(--ucg-light-blue-deep); } }
.btn-ghost { background: transparent; border-color: var(--ucg-navy); color: var(--ucg-navy); }
@media (hover: hover) { .btn-ghost:hover { background: rgba(173, 186, 233, 0.18); } }
.btn-google { background: var(--ucg-white); border-color: var(--ucg-navy); color: var(--ucg-navy); padding: 14px 22px; }
@media (hover: hover) { .btn-google:hover { background: var(--ucg-white); box-shadow: var(--shadow); } }

:focus-visible { outline: 2px solid var(--ucg-dark-blue-green); outline-offset: 2px; }

/* ---- Sign in (navy hero) ---- */
.signin {
  background: var(--bg-inverse);
  padding: clamp(56px, 8vw, 110px) var(--gutter);
  text-align: center;
}
.signin > * { max-width: 640px; margin-left: auto; margin-right: auto; }
.signin .eyebrow { color: var(--ucg-blue-green); }
.signin h1 { color: var(--ucg-light-blue); margin-bottom: 0.4em; }
.signin .lead { color: rgba(219, 235, 238, 0.85); margin-bottom: 32px; }
.signin .btn-google { border-color: var(--ucg-white); }
.signin-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.signin .btn { height: 48px; padding: 0 22px; }
.signin :focus-visible, .athlete-band :focus-visible, .toast :focus-visible { outline-color: var(--ucg-light-blue); }
.signin .btn-guest { background: transparent; color: var(--ucg-light-blue); border-color: var(--ucg-blue-green); }
@media (hover: hover) { .signin .btn-guest:hover { background: rgba(219, 235, 238, 0.12); color: var(--ucg-white); } }
.signin .signin-note { color: rgba(219, 235, 238, 0.85); font-size: var(--fs-sm); margin-top: 20px; max-width: 460px; }
.signin .signin-note a { color: var(--ucg-light-blue); text-decoration: underline; }
.signin .error { color: var(--ucg-red-orange); margin-top: 16px; }

.editor { display: grid; gap: 20px; }
.empty-editor { padding: clamp(64px, 12vh, 140px) var(--gutter); text-align: center; }
.empty-editor h1 { font-size: clamp(2.6rem, 6vw, 4.25rem); }
.empty-editor .lead { max-width: 520px; margin: 20px auto 0; }
.empty-steps { list-style: none; margin: 56px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 40px; }
.empty-steps li { display: flex; align-items: center; gap: 10px; }
.empty-steps span {
  width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%;
  background: var(--bg-surface); border: 1px solid var(--border-default); font-size: var(--fs-xs); font-weight: 600;
}
.empty-steps li:first-child span { background: var(--ucg-blue-green); border-color: var(--ucg-blue-green); }

/* ---- Athlete band: the name (the page's title) and club on navy ---- */
.athlete-band { background: var(--bg-inverse); padding: 32px var(--gutter) 34px; }
.band-inner { max-width: var(--container-max); margin: 0 auto; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; }
.band-fields { display: grid; gap: 10px; flex: 1 1 360px; min-width: 0; }
.band-fields input {
  width: 100%; min-width: 0; padding: 0; border: 0; background: transparent; color: var(--ucg-light-blue); outline: none;
  border-bottom: 2px solid transparent; transition: border-color var(--duration-1) var(--ease);
}
.band-fields input:focus-visible { border-bottom-color: var(--ucg-blue-green); }
@media (hover: hover) { .band-fields input:hover { border-bottom-color: rgba(165, 200, 207, 0.6); } }
#f-name {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(2.6rem, 5vw, 3.75rem); line-height: 0.92; letter-spacing: var(--tracking-display);
  text-overflow: ellipsis; /* long names: "MAXIMILIANA ALEX…" rather than cut mid-letter */
}
#f-club { font-size: 1.05rem; }
.band-fields input::placeholder { color: rgba(219, 235, 238, 0.7); }
.band-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.band-actions .btn { height: 44px; }

/* ---- Fields (pill inputs) ---- */
.field { display: grid; gap: 6px; min-width: 180px; }
.field.grow { flex: 1; }
.field > span, .label { font-weight: 600; font-size: var(--fs-xs); color: var(--fg-secondary); }
.field input, .field select, .skill-row input, .skill-row select {
  width: 100%; min-width: 0;
  border: 1.5px solid var(--border-field); background-color: var(--ucg-light-blue);
  border-radius: var(--radius-btn); padding: 5px 10px; color: var(--ucg-navy);
  font-family: var(--font-body); font-size: var(--fs-sm);
  outline: none;
  transition: border-color var(--duration-1) var(--ease), background-color var(--duration-1) var(--ease);
}
.field select, .skill-row select {
  appearance: none; -webkit-appearance: none; padding-right: 28px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231e2b38' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center;
}
.field input:focus, .field select:focus, .skill-row input:focus, .skill-row select:focus {
  border-color: var(--ucg-navy); background-color: var(--ucg-white); box-shadow: 0 0 0 1.5px var(--ucg-navy);
}
input::placeholder { color: var(--fg-muted); }

.save-status { font-size: var(--fs-xs); color: rgba(219, 235, 238, 0.8); text-align: right; }
.save-status[data-kind='ok'] { color: var(--ucg-blue-green); }
.save-status[data-kind='error'] { color: var(--ucg-red-orange); font-weight: 600; }
.save-status[data-kind='guest'], .save-status[data-kind='pending'] { color: var(--ucg-golden-yellow); font-weight: 600; }

/* ---- Event strip: each event's start value; the open one underlined ---- */
.summary {
  display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr));
  background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden;
}
.stat { background: transparent; border: 0; border-right: 1px solid var(--border-subtle); padding: 14px 20px 16px; display: grid; gap: 2px; min-width: 0; }
.stat:last-child { border-right: 0; }
.stat span { font-size: var(--fs-xs); color: var(--fg-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat strong {
  font-family: var(--font-display); font-weight: 700; font-size: 2.25rem; line-height: 1;
  color: var(--fg-primary); font-variant-numeric: tabular-nums;
}
.stat-tab { text-align: left; cursor: pointer; font: inherit; color: inherit; position: relative; transition: background var(--duration-1) var(--ease); }
@media (hover: hover) { .stat-tab:hover { background: #f4f9fa; } }
.stat-tab.active::after {
  content: ''; position: absolute; left: 20px; right: 20px; bottom: 0;
  height: 3px; border-radius: 3px 3px 0 0; background: var(--ucg-navy); /* 14:1 on white (purple was 1.9:1) */
}
.stat-tab.active span { color: var(--fg-primary); font-weight: 600; }
[data-panel][hidden] { display: none; }
.stat-aa { background: #eef5f6; }
.stat-aa strong { color: var(--fg-accent); }

/* ---- Cards ---- */
.card {
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden;
}
.card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 20px; border-bottom: 1px solid var(--border-subtle);
}
.card-title-row { display: flex; align-items: center; gap: 10px; }
.help-tip {
  width: 24px; height: 24px; display: grid; place-items: center; padding: 0; flex: none; cursor: help;
  border: 0; border-radius: 50%; background: transparent; color: var(--fg-secondary); position: relative;
}
.help-tip::before { content: ''; position: absolute; inset: -10px; } /* bigger tap area */
.help-tip.tip-open, .help-tip:focus-visible { color: var(--ucg-navy); }
.help-tip.tip-open svg circle { fill: var(--ucg-navy); }
.help-tip.tip-open svg path { stroke: var(--ucg-white); }
@media (hover: hover) { .help-tip:hover { color: var(--ucg-navy); } }
.card-head-right { display: flex; align-items: center; gap: 10px; }
.sv-pill {
  font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; line-height: 1;
  letter-spacing: 0.04em; font-variant-numeric: tabular-nums;
  background: var(--ucg-blue-green); color: var(--ucg-navy);
  border-radius: var(--radius-pill); padding: 6px 14px;
}

.vault-body { padding: 16px 20px 20px; display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-end; }
.vault-body .field { flex: 1 1 320px; }
.vault-info { display: flex; gap: 24px; margin: 0; }
.vault-info dt { font-weight: 600; font-size: var(--fs-xs); color: var(--fg-secondary); }
.vault-info dd { margin: 0; font-weight: 600; }

/* ---- Skill table ---- */
.skill-table { padding: 8px 14px; overflow-x: auto; }
.skill-row {
  display: grid;
  grid-template-columns: 50px minmax(160px, 1fr) 78px minmax(150px, 230px) 56px 64px 28px;
  gap: 4px 8px; align-items: center; padding: 5px 8px; border-radius: var(--radius);
  transition: background var(--duration-1) var(--ease);
}
.skill-head span { font-weight: 600; font-size: var(--fs-xs); color: var(--fg-secondary); }
.col-num { color: var(--fg-muted); font-variant-numeric: tabular-nums; text-align: center; font-size: var(--fs-sm); }
.skill-row[data-row] .col-num { display: flex; align-items: center; gap: 2px; }
.skill-row[data-row] .num { flex: 1; text-align: center; }
.calc, .skill-head .col-value, .skill-head .col-bonus { text-align: center; font-variant-numeric: tabular-nums; }
.calc { font-size: var(--fs-sm); }
.skill-row.has-bonus .col-bonus { color: var(--fg-accent); font-weight: 600; }

/* ---- Skill picker ---- */
.skill-combo { position: relative; display: block; min-width: 0; }
.skill-row .skill-input { padding-right: 128px; text-overflow: ellipsis; }
.skill-combo .src-badge { position: absolute; right: 32px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.combo-toggle {
  position: absolute; right: 3px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 26px; height: 26px; padding: 0;
  border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ucg-navy); cursor: pointer;
}
@media (hover: hover) { .combo-toggle:hover { background: rgba(173, 186, 233, 0.3); } }
.src-badge {
  display: inline-block; padding: 2px 6px; border-radius: var(--radius-pill); flex: none;
  font-family: var(--font-display); font-weight: 700; font-size: 0.66rem; letter-spacing: 0.08em; line-height: 1.3;
}
.src-badge:empty { display: none; }
.src-badge.ucg { background: var(--ucg-blue-green); color: var(--ucg-navy); }
.src-badge.wg { background: var(--ucg-navy); color: var(--ucg-light-blue); }
.src-badge.usag { background: var(--ucg-purple); color: var(--ucg-navy); }
.src-badge.ucgm { background: #f3e3a6; color: var(--ucg-navy); }
.src-badge.custom { box-shadow: inset 0 0 0 1px var(--border-default); color: var(--fg-primary); text-transform: uppercase; }

.skill-pop {
  position: fixed; z-index: 50; overflow-y: auto; overscroll-behavior: contain;
  background: var(--ucg-white); color: var(--ucg-navy);
  border: 1.5px solid var(--border-default); border-radius: var(--radius); box-shadow: var(--shadow-lg);
  font-size: var(--fs-sm);
}
.pop-head {
  position: sticky; top: 0; z-index: 1; padding: 6px 12px; background: #eef5f6; color: var(--fg-secondary);
  font-weight: 600; font-size: var(--fs-xs);
}
/* "Only B · EG II skills (12 hidden)  Show all": the list is narrowed by values chosen by hand. */
.pop-filter {
  position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 7px 12px; background: var(--ucg-white); border-bottom: 1px solid var(--border-default);
  color: var(--ucg-navy); font-size: var(--fs-xs); font-weight: 600;
}
.skill-pop:has(.pop-filter) .pop-head { top: 33px; }
.skill-pop.in-page { position: absolute; } /* phones: placed in the page under its box */
.pop-notice { padding: 8px 12px; background: #fff4d1; border-bottom: 1px solid #e7c65a; color: var(--ucg-navy); font-size: var(--fs-xs); font-weight: 600; }
.pop-filter-btn {
  flex: none; border: 1.5px solid var(--ucg-navy); border-radius: var(--radius-btn); background: var(--ucg-white);
  color: var(--ucg-navy); padding: 3px 9px; font: inherit; font-weight: 700; cursor: pointer;
}
@media (hover: hover) { .pop-filter-btn:hover { background: var(--ucg-light-blue); } }
.pop-opt { display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; align-items: center; padding: 6px 12px; cursor: pointer; }
.pop-opt .src-badge { justify-self: start; }
.pop-opt.vault-opt { grid-template-columns: 1fr auto; } /* no source badge */
.pop-opt.active { background: var(--ucg-light-blue); }
@media (hover: hover) { .pop-opt:hover { background: var(--ucg-light-blue); } }
.pop-name { min-width: 0; display: flex; align-items: baseline; }
.pop-text { min-width: 0; }
.pop-eponym { color: var(--fg-secondary); }
/* Box number in its code, before the name ("7.104", "I.75", "FX 12"). */
.pop-box { display: inline-block; flex: none; min-width: 3.4em; margin-right: 6px; color: var(--fg-secondary); font-size: var(--fs-xs); font-weight: 600; font-variant-numeric: tabular-nums; }
/* Other names on a quieter second line under the skill's name. */
.pop-aka { display: block; margin-top: 1px; color: var(--fg-secondary); font-size: var(--fs-xs); }
/* A skill's note, like its other names, on a quieter line: two lines at most, so long ones don't crowd the list
   (the whole note is in the row's tooltip, or a tap away on touch screens). */
.pop-note { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
/* Touch screens: "More" over the end of a cut-off note; tapped, the note opens in full. */
.pop-opt { --pop-bg: var(--ucg-white); }
.pop-opt.active { --pop-bg: var(--ucg-light-blue); }
.pop-note.more { position: relative; }
.pop-note.more::after {
  content: 'More'; position: absolute; right: 0; bottom: 0; padding-left: 2.5em;
  background: linear-gradient(90deg, transparent, var(--pop-bg) 2em); color: var(--ucg-navy); font-weight: 600;
}
.pop-note.open { display: block; }
.pop-meta { white-space: nowrap; font-weight: 600; font-variant-numeric: tabular-nums; }
.pop-foot, .pop-empty {
  padding: 8px 12px; border-top: 1px solid var(--border-subtle); color: var(--fg-secondary); font-size: var(--fs-xs);
}
.pop-foot .src-badge { margin: 0 2px 0 6px; vertical-align: 1px; }
.pop-foot .src-badge:first-child { margin-left: 0; }

/* ---- Routine: instructions, reorder, statuses ---- */
.routine-help { margin: 14px 20px 2px; font-size: var(--fs-sm); color: var(--fg-secondary); max-width: 90ch; }
.routine-actions { display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap; margin: 6px 20px 16px; }
.routine-count { font-size: var(--fs-xs); color: var(--fg-muted); }

.drag-handle, .remove-skill {
  display: inline-grid; place-items: center; width: 24px; height: 28px; padding: 0; flex: none;
  border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--fg-muted);
  transition: background var(--duration-1) var(--ease), color var(--duration-1) var(--ease);
}
.drag-handle { cursor: grab; touch-action: none; }

/* Connected skills (Xcel; MAG floor / high bar). Out of connect mode, two connected rows are
   joined into one block: square facing corners, the gap filled in, a navy stripe down the left.
   In connect mode, a pill on the line between two rows: dashed "+ Connect", or navy "Connected".
   Neither adds height between rows. */
.connect-btn svg { flex: none; }
.connect-hint { font-size: var(--fs-xs); color: var(--fg-secondary); }
.skill-row:has(.link-toggle) { position: relative; }
.skill-row.linked:not(.is-blank):has(+ .skill-row[data-row]:not(.is-blank)) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.skill-row.linked:not(.is-blank):has(+ .skill-row[data-row]:not(.is-blank))::after {
  content: ''; position: absolute; left: 0; right: 0; top: calc(100% - 1px); height: 8px; /* 1px over each edge: no hairline */
  background: inherit; box-shadow: inset 4px 0 0 var(--ucg-navy); pointer-events: none;
}
.skill-row.linked:not(.is-blank) + .skill-row[data-row]:not(.is-blank) { border-top-left-radius: 0; border-top-right-radius: 0; }
.skill-row.linked:not(.is-blank):has(+ .skill-row[data-row]:not(.is-blank)),
.skill-row.linked:not(.is-blank) + .skill-row[data-row]:not(.is-blank) { box-shadow: inset 4px 0 0 var(--ucg-navy); }
.link-toggle {
  display: none; position: absolute; z-index: 2; left: 12px; bottom: -14px; height: 22px; padding: 0 10px 0 8px;
  align-items: center; gap: 5px; cursor: pointer; white-space: nowrap;
  border: 1.5px dashed var(--fg-secondary); border-radius: var(--radius-pill);
  background: var(--ucg-white); color: var(--fg-secondary); box-shadow: 0 2px 8px rgba(30, 43, 56, 0.18);
  font-family: var(--font-body); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.02em;
}
.link-toggle svg { flex: none; }
.skill-table.connecting .link-toggle { display: inline-flex; }
.link-toggle::before { content: ''; position: absolute; inset: -6px -8px; } /* bigger tap area */
@media (hover: hover) { .link-toggle:hover { border-color: var(--ucg-navy); color: var(--ucg-navy); } }
.link-toggle[aria-pressed='true'] { border-style: solid; border-color: var(--ucg-navy); background: var(--ucg-navy); color: var(--ucg-white); }
.skill-table.connecting .skill-row[data-row]:last-child .link-toggle,
.skill-table.connecting .skill-row.is-blank .link-toggle,
.skill-table.connecting .skill-row:has(+ .is-blank) .link-toggle { display: none; }
.remove-skill { cursor: pointer; width: 28px; }
@media (hover: hover) { .drag-handle:hover, .remove-skill:hover { background: rgba(173, 186, 233, 0.25); color: var(--fg-primary); } }
.skill-row.dragging {
  position: relative; z-index: 5; background: var(--ucg-white); box-shadow: var(--shadow-lg);
  transition: none;
}
.skill-row.dragging .drag-handle { cursor: grabbing; }
/* Drag to reorder: the other rows slide aside to show where the skill will land. */
.skill-table.reordering .skill-row:not(.dragging) { transition: transform 0.12s var(--ease); }
.skill-row.dragging .num { color: var(--ucg-navy); font-weight: 700; }

.skill-row[data-row] + .skill-row[data-row] { margin-top: 6px; }
.skill-row .col-bonus { grid-column: 6; }
.skill-row .remove-skill { grid-column: 7; }
.row-flag {
  display: none; grid-row: 1; grid-column: 5 / span 2; justify-self: center;
  padding: 3px 8px; border-radius: var(--radius-btn); background: var(--ucg-white);
  font-weight: 600; font-size: var(--fs-micro); white-space: nowrap; color: var(--fg-secondary); cursor: help;
}
/* Phones only: the folded row and its edit bar. */
.row-summary, .row-edit { display: none; }
.skill-row.is-repeat .row-flag, .skill-row.non-counting .row-flag { display: inline-block; }
/* Centred in the open space where Value + EG bonus would be. */
.skill-row.is-repeat .col-value, .skill-row.is-repeat .col-bonus,
.skill-row.non-counting .col-value, .skill-row.non-counting .col-bonus { display: none; }

/* Counting skills sit on the blue green card colour (as the event bonus box
   when it's on); repeats and non-counting skills get a gray bar and a flag. */
.skill-row.is-counting { background: var(--ucg-blue-green); }
.skill-row.is-counting .skill-input, .skill-row.is-counting select { background-color: var(--ucg-white); border-color: var(--fg-muted); }
.skill-row.is-counting .col-num, .skill-row.is-counting .drag-handle, .skill-row.is-counting .remove-skill { color: var(--ucg-navy); }
.skill-row.is-counting .col-bonus { color: var(--ucg-navy); }

.skill-row.is-repeat, .skill-row.non-counting { background: #e9edef; }
.skill-row.is-repeat .skill-input, .skill-row.is-repeat select,
.skill-row.non-counting .skill-input, .skill-row.non-counting select { background-color: var(--ucg-white); }
/* The focus ring wins over the row colours above. */
.skill-row:is(.is-counting, .is-repeat, .non-counting) :is(input, select):focus { border-color: var(--ucg-navy); box-shadow: 0 0 0 1.5px var(--ucg-navy); }

/* ---- Event bonus toggle ---- */
.event-bonus {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  margin: 6px 20px 16px; padding: 12px 16px;
  border: 1.5px solid var(--border-default); border-radius: var(--radius);
  background: var(--ucg-light-blue);
  transition: background var(--duration-2) var(--ease), border-color var(--duration-2) var(--ease);
}
.event-bonus input { width: 20px; height: 20px; accent-color: var(--ucg-navy); flex: none; margin: 0; }
.event-bonus-text { flex: 1; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; color: var(--fg-secondary); font-size: var(--fs-sm); }
.event-bonus-text strong { font-weight: 600; font-size: var(--fs-sm); color: var(--fg-primary); }
.event-bonus.on { background: var(--ucg-blue-green); border-color: var(--ucg-blue-green); }
.event-bonus.on .event-bonus-text { color: var(--ucg-navy); }
.event-bonus-value { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: var(--ucg-navy); min-width: 40px; }
.event-bonus + .event-bonus { margin-top: -8px; }
.event-bonus select {
  flex: none; min-width: 72px; padding: 6px 10px; border: 1.5px solid var(--border-default);
  border-radius: var(--radius-btn); background: var(--ucg-white); color: var(--fg-primary); font: inherit;
}
/* A missing requirement (e.g. no double flip) shows its neutral deduction. */
.event-bonus.requirement.missing { background: #fbe9e4; border-color: #e7b3a6; }
.event-bonus.requirement.missing .event-bonus-value { color: #8f2f1c; }


/* ---- Element groups (the EG bonus), then the totals footer ---- */
.cg-card { margin: 6px 20px 16px; padding: 12px 16px 14px; border: 1.5px solid var(--border-default); border-radius: var(--radius); }
.cg-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.cg-title { display: flex; align-items: center; gap: 6px; margin: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--fg-primary); }
.cg-total { font-size: var(--fs-sm); color: var(--fg-secondary); white-space: nowrap; }
.cg-total strong { margin-left: 4px; font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; color: var(--fg-accent); }
.event-foot {
  display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; align-items: center;
  padding: 16px 20px; border-top: 1px solid var(--border-subtle); background: #f4f9fa;
}
.cg-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cg-list li {
  display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px 0 5px; white-space: nowrap;
  border: 1px solid var(--border-default); border-radius: var(--radius-pill); font-size: var(--fs-xs); color: var(--fg-secondary);
}
.cg-badge {
  display: inline-grid; place-items: center; min-width: 30px; height: 22px; padding: 0 6px; flex: none;
  border-radius: var(--radius-pill); background: #eef5f6; color: var(--fg-primary);
  font-family: var(--font-display); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.04em;
}
.cg-val:empty { display: none; }
.cg-val { font-weight: 600; }
.cg-list li.earned { background: var(--ucg-navy); border-color: var(--ucg-navy); color: var(--ucg-white); }
.cg-list li.earned .cg-badge { background: var(--ucg-blue-green); color: var(--ucg-navy); }

.totals { display: grid; grid-template-columns: repeat(6, auto); gap: 4px 20px; margin: 0; }
.totals div { display: grid; text-align: right; }
.totals dt { font-weight: 600; font-size: var(--fs-xs); color: var(--fg-secondary); }
.totals dd { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.totals .grand dd { font-size: 2.4rem; color: var(--fg-accent); }
.totals dt { display: inline-flex; align-items: center; justify-content: flex-end; gap: 3px; }

/* (i) score explanations: hover or focus shows the bubble; tap toggles it. */
.info-tip {
  position: relative; display: inline-grid; place-items: center; width: 16px; height: 16px; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: var(--fg-secondary); cursor: help; flex: none;
}
.info-tip::before { content: ''; position: absolute; inset: -8px; } /* bigger tap area */
.info-tip.tip-open, .info-tip:focus-visible { color: var(--ucg-navy); }
@media (hover: hover) { .info-tip:hover { color: var(--ucg-navy); } }
.tip-bubble {
  position: fixed; z-index: 60; padding: 8px 10px; border-radius: var(--radius-sm);
  background: var(--ucg-navy); color: var(--ucg-white); box-shadow: var(--shadow);
  font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 400; line-height: 1.4;
  letter-spacing: normal; text-transform: none; text-align: left; pointer-events: none;
}


/* ---- Combined planner ---- */
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--fg-secondary); }
.wrap { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--gutter); box-sizing: border-box; }
.editor { padding-block: 24px 56px; }
.btn-block { width: 100%; justify-content: center; }
.card-subtitle { font-family: var(--font-body); font-weight: 600; font-size: 1.1rem; letter-spacing: 0; text-transform: none; margin: 0 0 4px; }
.pill { display: inline-block; border-radius: var(--radius-pill); padding: 2px 9px; font-family: var(--font-display); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.pill-navy { background: var(--ucg-navy); color: var(--ucg-light-blue); }

/* Athlete switcher in the header: the athlete's name, opening a searchable list. */
.athlete-picker { position: relative; margin-left: auto; min-width: 0; }
.ath-button {
  display: flex; align-items: center; gap: 8px; height: 36px; max-width: 300px; text-align: left; cursor: pointer;
  border: 1px solid var(--border-default); border-radius: var(--radius-btn); background: var(--ucg-white);
  color: var(--ucg-navy); padding: 0 10px 0 12px; font: inherit; font-size: var(--fs-sm);
}
@media (hover: hover) { .ath-button:hover { border-color: var(--ucg-navy); } }
.ath-current { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ath-button svg { flex: none; }
.ath-pop {
  position: absolute; right: 0; top: calc(100% + 8px); width: 340px; z-index: 40; overflow: hidden;
  background: var(--ucg-white); border: 1px solid var(--border-default); border-radius: var(--radius); box-shadow: var(--shadow-lg);
}
.ath-search { padding: 10px; border-bottom: 1px solid var(--border-subtle); }
.ath-search input { width: 100%; box-sizing: border-box; border: 1.5px solid var(--border-default); border-radius: var(--radius-btn); padding: 8px 10px; font: inherit; color: var(--ucg-navy); background: var(--ucg-white); }
.ath-list { max-height: 340px; overflow-y: auto; }
.ath-option { display: grid; gap: 4px; width: 100%; text-align: left; border: 0; border-bottom: 1px solid #eef5f6; background: var(--ucg-white); color: var(--ucg-navy); padding: 10px 12px; cursor: pointer; font: inherit; }
.ath-option.active { background: var(--ucg-light-blue); }
@media (hover: hover) { .ath-option:hover { background: var(--ucg-light-blue); } }
.ath-option-top { display: flex; justify-content: space-between; gap: 8px; }
.ath-option-name { font-weight: 600; }
.ath-option-club { font-size: var(--fs-xs); color: var(--fg-secondary); }
.ath-none { margin: 0; padding: 12px; color: var(--fg-secondary); font-size: var(--fs-sm); }
.ath-foot { padding: 10px; border-top: 1px solid var(--border-subtle); }
.chips { display: flex; flex-wrap: wrap; gap: 4px; }
.chip { border-radius: var(--radius-pill); padding: 1px 8px; font-family: var(--font-display); font-weight: 700; font-size: 0.7rem; letter-spacing: 0.06em; color: var(--ucg-navy); }
.chip-wag { background: #e3e8f8; }
.chip-mag { background: var(--ucg-light-blue-deep); }
.chip-tt { background: #d9eef0; }

/* Discipline badges: WAG purple, MAG navy, T&T dark blue green */
/* Centred on the capitals themselves: the text box is trimmed to cap height (no room kept for
   descenders), and text-indent balances the tracking added after the last letter. */
.disc-badge, .cg-badge, .src-badge, .sv-pill { line-height: 1; text-box: trim-both cap alphabetic; }
.disc-badge {
  display: inline-flex; align-items: center; justify-content: center; flex: none; box-sizing: border-box;
  min-width: 30px; height: 26px; padding: 0 8px; border-radius: var(--radius-sm);
  font-family: var(--font-display); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.06em; text-indent: 0.06em;
}
.disc-badge.lg { height: 34px; min-width: 46px; border-radius: 10px; font-size: 0.95rem; }
.disc-wag { background: var(--ucg-purple); color: var(--ucg-navy); }
.disc-mag { background: var(--ucg-navy); color: var(--ucg-light-blue); }
.disc-tt { background: var(--ucg-dark-blue-green); color: var(--ucg-white); }

/* Levels the athlete competes */
.entries { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.entry { position: relative; display: inline-flex; }
.entry-tab {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; cursor: pointer; font: inherit; font-weight: 600; font-size: var(--fs-sm);
  border: 1.5px solid var(--border-default); border-radius: var(--radius-btn); background: var(--bg-surface); color: var(--ucg-navy);
  padding: 0 14px 0 4px;
}
.entry-tab .disc-badge { height: 26px; }
.entry-tab { -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.entry.dragging { z-index: 3; pointer-events: none; }
.entry.dragging .entry-tab { cursor: grabbing; box-shadow: 0 6px 18px rgba(16, 34, 51, 0.25); }
.entry.dragging .entry-remove { opacity: 0 !important; }
.entries.reordering, .entries.reordering * { cursor: grabbing; }
.entry-tab.active { background: var(--ucg-navy); border-color: var(--ucg-navy); color: var(--ucg-white); }
.entry-tab.active .disc-badge { background: transparent; color: var(--ucg-blue-green); padding: 0 2px 0 10px; }
/* Remove a level: a round x at the tab's top right, shown on hover or keyboard focus (and on
   the open level where there's no mouse). It asks before removing. */
.entry-remove {
  position: absolute; top: -8px; right: -8px; z-index: 1; width: 22px; height: 22px; padding: 0; cursor: pointer;
  display: grid; place-items: center; border: 2px solid var(--bg-page); border-radius: 50%;
  background: var(--ucg-navy); color: var(--ucg-white); opacity: 0; pointer-events: none;
  transition: opacity var(--duration-1) var(--ease);
}
.entry-remove::before { content: ''; position: absolute; inset: -6px; } /* bigger tap area */
@media (hover: hover) { .entry-remove:hover { background: #8f2f1c; } }
.entry:has(:focus-visible) .entry-remove { opacity: 1; pointer-events: auto; }
/* Hover only where there's a mouse: on iPhones a tap first "hovers", and a tap that reveals
   something is spent on the hover instead of opening the level. Touch shows the open level's x. */
@media (hover: hover) {
  .entry-tab:hover { border-color: var(--ucg-navy); }
  .entry:hover .entry-remove { opacity: 1; pointer-events: auto; }
}
@media (hover: none) { .entry:has(.entry-tab.active) .entry-remove { opacity: 1; pointer-events: auto; } }
.entry-add {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; cursor: pointer;
  border: 0; border-radius: var(--radius-btn); background: transparent; color: var(--fg-accent); font: inherit; font-weight: 600; font-size: var(--fs-sm);
}
@media (hover: hover) { .entry-add:hover { background: rgba(165, 200, 207, 0.35); } }
.entries .decade { margin-left: auto; }
.add-panel { padding: 18px 20px; }
.add-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-top: 14px; }
.add-col { border: 1.5px solid var(--border-subtle); border-radius: var(--radius); padding: 12px; display: grid; gap: 8px; align-content: start; }
.add-col-head { display: flex; align-items: center; gap: 10px; font-size: var(--fs-xs); }
.level-option {
  display: flex; justify-content: space-between; align-items: center; gap: 8px; text-align: left; cursor: pointer; font: inherit; font-size: var(--fs-sm);
  border: 1.5px solid var(--border-subtle); border-radius: var(--radius-btn); background: var(--ucg-white); color: var(--ucg-navy); padding: 8px 10px;
}
@media (hover: hover) { .level-option:hover { border-color: var(--ucg-navy); } }
.level-option.mine { background: var(--ucg-light-blue); border-color: var(--ucg-navy); }
.field.inline { display: flex; align-items: center; gap: 8px; min-width: 0; }
.field.inline select, .field.inline input { width: auto; }
/* After copying from another level: what re-valuing did (navy text on white, gold edge). */
.vault-flag, .note-flag { margin: 10px 20px 0; padding: 8px 12px; border-left: 4px solid var(--ucg-golden-yellow); background: var(--ucg-white); color: var(--ucg-navy); font-size: var(--fs-sm); }
.value-changed { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 10px 20px 0; padding: 8px 12px; border-left: 4px solid var(--ucg-golden-yellow); background: var(--ucg-white); color: var(--ucg-navy); font-size: var(--fs-sm); }
.value-changed[hidden] { display: none; }
.value-changed span { flex: 1 1 260px; }
.revalue-notice { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 14px 18px; border-left: 4px solid var(--ucg-golden-yellow); }
.revalue-notice p { flex: 1 1 300px; margin: 0; font-size: var(--fs-sm); color: var(--ucg-navy); }
.start-panel { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; padding: 16px 18px; border: 1.5px solid var(--ucg-blue-green); }
.start-text { flex: 1 1 300px; min-width: 0; }
.start-text p { margin: 0; font-size: var(--fs-sm); }
.start-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.examples-menu select, .pass-start select {
  border: 1.5px solid var(--ucg-navy); border-radius: var(--radius-btn); background-color: var(--ucg-white); color: var(--ucg-navy);
  padding: 6px 10px; font: inherit; font-size: 0.82rem; max-width: 220px; cursor: pointer;
}
.card-head { flex-wrap: wrap; }
/* Links out (opens a new tab): dark blue green on white, with an arrow-out icon. */
.ext-link { display: inline-flex; align-items: center; gap: 4px; color: var(--fg-accent); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
@media (hover: hover) { .ext-link:hover { color: var(--ucg-navy); } }
.ext-link svg { flex: none; }
.examples-sheet { font-size: var(--fs-xs); white-space: nowrap; }
.start-text .ext-link { display: inline; }
.start-text .ext-link svg { margin-left: 3px; vertical-align: -1px; }
.card-head-right { flex-wrap: wrap; }
.partner { margin: 10px 20px 0; }
.partner input { max-width: 260px; text-transform: uppercase; }
.partner input::placeholder { text-transform: none; }
.foot-notes { flex-basis: 100%; }
.foot-notes ul { margin: 0; padding-left: 18px; font-size: var(--fs-sm); color: var(--fg-secondary); }
.foot-notes li + li { margin-top: 4px; }

/* T&T rows: shorthand + DD instead of letter + EG; Xcel: value + VP */
.skill-row.dd { grid-template-columns: 50px minmax(160px, 1fr) 110px 76px 28px; }
.skill-row.dd .remove-skill { grid-column: 5; }
.skill-row.dd .row-flag { grid-column: 2; grid-row: 2; justify-self: start; }
.skill-row.dd input.col-letter, .skill-row.dd input.col-eg { text-align: center; }
.skill-row.xcel { grid-template-columns: 50px minmax(160px, 1fr) 76px minmax(150px, 230px) 64px 28px; }
.skill-row.xcel .remove-skill { grid-column: 6; }
.skill-head .col-value { display: inline-flex; align-items: center; justify-content: center; gap: 3px; }
.skill-row.xcel .row-flag { grid-column: 2; grid-row: 2; justify-self: start; }
.skill-row.flagged .row-flag { display: inline-block; }
.pass { padding: 4px 0 6px; }
.pass + .pass { border-top: 1px solid var(--border-subtle); }
.pass-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 12px 20px 0; }
.pass-start { margin-right: auto; }
.pass-head h3 { margin: 0; font-weight: 600; font-size: 0.95rem; }
.pass-dd { font-family: var(--font-display); font-weight: 700; color: var(--fg-secondary); }

/* Xcel special requirements */
.sr-list { margin: 6px 20px 16px; padding: 12px 16px; border: 1.5px solid var(--border-default); border-radius: var(--radius); }
.sr-list legend { padding: 0 6px; font-weight: 600; font-size: var(--fs-sm); }
.sr-list legend .muted { font-weight: 400; }
.sr-item { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; font-size: var(--fs-sm); cursor: pointer; }
.sr-item input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--ucg-navy); flex: none; }
.sr-intro { margin: 0 0 4px; font-size: var(--fs-xs); color: var(--fg-secondary); }
.sr-text { display: grid; gap: 2px; }
.sr-how { font-size: var(--fs-xs); color: var(--fg-secondary); }
.sr-how:empty { display: none; }
.sr-item [data-sr-val] { margin-left: auto; flex: none; }

/* ---- Start value bar and breakdown sheet (phones) ---- */
.sv-bar { display: none; }
.sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.sheet-label { display: block; font-size: var(--fs-xs); color: var(--fg-secondary); }
.sheet-value { display: block; font-family: var(--font-display); font-weight: 700; font-size: 3.4rem; line-height: 0.95; color: var(--fg-accent); }
.sheet-totals { margin: 0; font-variant-numeric: tabular-nums; }
.sheet-totals div { display: flex; justify-content: space-between; align-items: baseline; padding: 11px 0; border-top: 1px solid var(--border-subtle); }
.sheet-totals dd { margin: 0; font-weight: 600; }
.sheet-totals .grand dd { color: var(--fg-accent); }
.sheet-cg .cg-list li { width: 100%; }
.sheet-cg .cg-label { flex: 1; }
.sheet-notes { margin: 0; padding-left: 18px; font-size: var(--fs-sm); color: var(--fg-secondary); }

/* ---- Phones ---- */
@media (max-width: 640px) {
  /* iOS zooms into any field under 16px when it's tapped. */
  .field input, .field select, .examples-menu select, .pass-start select, .partner input { font-size: 16px; }
  /* Header: the mark, the athlete switcher as the title, the account button. */
  .site-header { padding: 0 8px 0 16px; }
  .header-inner { height: 52px; gap: 8px; }
  .brand-logo, .brand-divider, .brand-app { display: none; }
  .brand-mark { display: block; }
  .header-signin { display: none; }
  .user-area { margin-left: auto; }
  .athlete-picker { margin-left: 0; position: static; min-width: 0; }
  .ath-button { border: 0; background: transparent; font-size: 1rem; max-width: 62vw; }
  .ath-pop { position: fixed; left: 8px; right: 8px; top: 56px; width: auto; }

  .signin { padding-left: 16px; padding-right: 16px; }
  .athlete-band { padding: 20px 16px 20px; }
  #f-name { font-size: 2.6rem; }
  .band-actions { width: 100%; }
  .band-actions .save-status { flex: 1; text-align: left; }
  .wrap { padding: 0 16px; }
  .editor { padding-block: 16px 32px; gap: 16px; }
  .entries .decade { margin-left: 0; }

  /* Events: chips with their start values, pinned under the header while scrolling. */
  .summary {
    position: sticky; top: 52px; z-index: 15; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
    margin: 0 -16px; padding: 8px 16px; border: 0; border-bottom: 1px solid var(--border-subtle); border-radius: 0;
    background: rgba(219, 235, 238, 0.95); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  }
  .summary::-webkit-scrollbar { display: none; }
  .stat {
    flex: none; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px;
    border: 1px solid var(--border-default); border-radius: var(--radius-pill); background: var(--bg-surface);
  }
  .stat:last-child { border-right: 1px solid var(--border-default); }
  .stat span { font-size: var(--fs-xs); }
  .stat strong { font-size: 1.2rem; }
  .stat-tab:hover { background: var(--bg-surface); }
  .stat-tab.active { background: var(--ucg-navy); border-color: var(--ucg-navy); }
  .stat-tab.active span { color: var(--ucg-white); }
  .stat-tab.active strong { color: var(--ucg-blue-green); }
  .stat-tab.active::after { display: none; }
  .stat-aa { order: -1; background: #eef5f6; }

  .card-head { padding: 14px 16px; }
  .card-title { font-size: 1.5rem; }
  /* The start value is in the bar at the bottom; the examples menu and Export share a row. */
  .card-head-right { width: 100%; flex-wrap: nowrap; }
  .card-head-right .sv-pill { display: none; }
  .card-head-right .examples-menu { flex: 1; min-width: 0; }
  .card-head-right .examples-menu select { width: 100%; max-width: none; height: 36px; }
  .skill-table { padding: 4px 10px; }
  .skill-head { display: none; }
  .routine-help { margin: 12px 14px 2px; }
  .routine-actions { margin: 10px 14px 14px; }
  .event-bonus { margin: 6px 14px 14px; }
  .cg-card { margin: 6px 14px 14px; }
  .cg-list li { max-width: 100%; }
  .cg-label { overflow: hidden; text-overflow: ellipsis; }

  /* A skill folds to two lines (bold name, then difficulty · group · source) with its value
     and EG bonus on the right. Tapped, it opens its fields with Remove skill and Done. */
  .skill-row, .skill-row.dd, .skill-row.xcel {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    grid-template-areas: 'num sum value' 'num sum bonus' '. flag flag';
    column-gap: 8px; row-gap: 0; padding: 6px 10px 6px 2px;
  }
  .skill-row[data-row] + .skill-row[data-row] { margin-top: 6px; }
  .skill-row .col-num { grid-area: num; align-self: center; }
  .skill-row .drag-handle { height: 44px; }
  .skill-row .row-summary {
    grid-area: sum; display: flex; flex-direction: column; justify-content: center; min-height: 48px; min-width: 0;
    padding: 4px 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer;
  }
  .sum-name { font-size: 1rem; font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sum-meta { font-size: var(--fs-xs); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sum-meta:empty { display: none; }
  .skill-row:not(.editing) :is(.skill-combo, .col-letter, .col-eg, .remove-skill) { display: none; }
  .skill-row .col-value { grid-area: value; align-self: end; text-align: right; font-size: var(--fs-sm); }
  .skill-row .col-bonus { grid-area: bonus; align-self: start; text-align: right; font-size: var(--fs-xs); }
  .skill-row.has-bonus .col-bonus { color: var(--fg-accent); }
  .skill-row .row-flag, .skill-row.dd .row-flag, .skill-row.xcel .row-flag,
  .skill-row.is-repeat .row-flag, .skill-row.non-counting .row-flag { grid-area: flag; grid-row: auto; grid-column: auto; justify-self: start; margin: 2px 0 4px; }
  .skill-row.is-blank:not(.editing) { background: transparent; box-shadow: inset 0 0 0 1.5px var(--border-default); }
  .skill-row.is-blank:not(.editing) .sum-name { font-weight: 400; color: var(--fg-secondary); }

  .skill-row.editing {
    grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1.4fr);
    grid-template-areas: 'num name name' '. letter eg' '. value bonus' '. flag flag' '. edit edit';
    row-gap: 8px; padding: 10px 10px 12px 2px; box-shadow: 0 0 0 2px var(--ucg-navy), var(--shadow);
  }
  .skill-row.dd.editing { grid-template-areas: 'num name name' '. letter eg' '. flag flag' '. edit edit'; }
  .skill-row.xcel.editing { grid-template-areas: 'num name name' '. letter eg' '. value value' '. flag flag' '. edit edit'; }
  .skill-row.editing .row-summary, .skill-row.editing .remove-skill { display: none; }
  .skill-row.editing .col-name { grid-area: name; }
  .skill-row.editing .col-letter { grid-area: letter; }
  .skill-row.editing .col-eg { grid-area: eg; }
  .skill-row.editing :is(input, select) { height: 44px; font-size: 1rem; }
  .skill-row.editing .col-value, .skill-row.editing .col-bonus { align-self: center; text-align: left; }
  .skill-row.editing .col-value:not(:empty)::before { content: 'Value '; color: var(--fg-secondary); }
  .skill-row.editing .col-bonus:not(:empty)::before { content: 'EG bonus '; color: var(--fg-secondary); }
  .skill-row.is-counting.editing :is(.col-value, .col-bonus):not(:empty)::before { color: var(--ucg-navy); }
  .skill-row.editing .row-edit { grid-area: edit; display: flex; align-items: center; justify-content: space-between; }
  .row-remove {
    display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 8px; border: 0; cursor: pointer;
    background: transparent; color: var(--fg-primary); font: inherit; font-weight: 600;
  }
  .row-edit .btn { height: 44px; padding: 0 22px; }
  .skill-row .skill-input { padding-right: 34px; }
  .skill-combo .src-badge { display: none; }
  .skill-combo .combo-toggle { top: 50%; }

  /* The open event's start value, always in view; Breakdown opens the sheet. */
  .sv-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between;
    min-height: 76px; padding: 6px 16px calc(6px + env(safe-area-inset-bottom));
    background: var(--bg-surface); border-top: 1px solid var(--border-subtle); box-shadow: 0 -6px 20px rgba(30, 43, 56, 0.08);
  }
  .sv-bar-text span { display: block; font-size: var(--fs-xs); color: var(--fg-secondary); }
  .sv-bar-text strong { display: block; font-family: var(--font-display); font-weight: 700; font-size: 2.4rem; line-height: 0.95; color: var(--fg-accent); }
  .sv-bar .btn { height: 44px; }
  body:has(.sv-bar) { padding-bottom: 92px; }
  body:has(.sv-bar) .toast { bottom: calc(92px + env(safe-area-inset-bottom)); }
  .event-foot .totals { display: none; }
  .event-foot:not(:has(li)) { display: none; }
  .modal.sheet { margin: auto 0 0; width: 100vw; max-width: 100vw; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
}

/* "A new version is ready — Reload" (and other app-wide messages): white on navy. */
.toast {
  position: fixed; z-index: 70; left: 50%; bottom: 16px; transform: translateX(-50%); width: max-content; max-width: calc(100vw - 32px);
  display: flex; align-items: center; gap: 14px; padding: 10px 12px 10px 16px; border-radius: var(--radius);
  background: var(--ucg-navy); color: var(--ucg-white); box-shadow: var(--shadow-lg); font-size: var(--fs-sm);
}
.toast-btn {
  flex: none; border: 0; border-radius: var(--radius-btn); padding: 7px 12px; cursor: pointer;
  background: var(--ucg-white); color: var(--ucg-navy); font: inherit; font-weight: 700;
}
@media (hover: hover) { .toast-btn:hover { background: var(--ucg-light-blue); } }

.feedback-type { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.feedback-type legend { font-weight: 700; margin-bottom: 6px; padding: 0; }
.feedback-type label { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
.feedback-type input { accent-color: var(--ucg-navy); }
.modal textarea { width: 100%; box-sizing: border-box; font: inherit; padding: 10px 12px; border: 1.5px solid var(--border-default); border-radius: var(--radius-sm); color: var(--fg-primary); background: var(--bg-surface); resize: vertical; }
.modal .field { display: grid; gap: 6px; }
.modal .field > span { font-weight: 700; }
.feedback-note { font-size: var(--fs-xs); color: var(--fg-secondary); }

/* Dialogs (bringing athletes over from the original UCG Infinity planner) */
.modal {
  border: 0; padding: 0; width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 48px);
  border-radius: var(--radius-lg); background: var(--bg-surface); color: var(--fg-primary);
  box-shadow: 0 24px 64px rgba(20, 30, 39, 0.35);
}
.modal::backdrop { background: rgba(20, 30, 39, 0.5); }
.modal-body { padding: 24px; display: grid; gap: 14px; }
.modal-body h2, .modal-body p { margin: 0; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.import-list { display: grid; gap: 8px; max-height: 50dvh; overflow: auto; }
.import-item { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1.5px solid var(--border-default); border-radius: var(--radius-sm); cursor: pointer; }
.import-item input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--ucg-navy); flex: none; }
.import-item.done { cursor: default; background: var(--bg-page); }
.import-meta { display: block; font-size: var(--fs-xs); color: var(--fg-secondary); }
.empty-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 32px; }
.empty-actions .btn { height: 48px; padding: 0 24px; }
.ath-foot { display: grid; gap: 8px; }
.ath-delete {
  display: flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 12px; cursor: pointer;
  border: 0; border-radius: var(--radius-btn); background: transparent; color: #8f2f1c; font: inherit; font-size: var(--fs-sm); font-weight: 600;
}
@media (hover: hover) { .ath-delete:hover { background: #fbe9e4; } }