/* FPT shared app-component styles (paired with app.js). Uses fpt-brand.css tokens. */
.fpt-cbar{display:flex;gap:14px;align-items:center;flex-wrap:wrap;font-family:var(--fpt-body);font-size:13px}
.fpt-cbar label{display:flex;gap:6px;align-items:center;color:#c4ccd6}
.fpt-cbar select{font:inherit;font-size:13px;padding:6px 10px;border-radius:8px;border:1px solid #3a3f48;background:#23272e;color:#fff}
.fpt-cbar-note{color:#8a94a3;font-size:12px;margin-left:auto}

/* ── page control bar: a page's own tools (athlete controls, move picker) sit in a dark strip
   directly BELOW the site header — never inside it (a tool in the bar changed its shape per page,
   Adam 2026-09-24). Width/padding follow the header's variables (site-nav.css) so the two line up. */
.ctlbar{background:var(--fpt-black-2);border-bottom:1px solid rgba(255,255,255,.07)}
.ctlbar-inner{max-width:var(--fptnav-max,1180px);margin:0 auto;padding:10px var(--fptnav-pad,20px);display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.ctlbar .picker{display:flex;align-items:center;gap:8px;font-family:var(--fpt-body);font-size:13px;color:#c4ccd6}
.ctlbar .picker select{font:inherit;font-size:13px;padding:7px 12px;border-radius:8px;border:1px solid #3a3f48;background:#23272e;color:#fff;min-width:190px}

.fpt-i{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;
  background:var(--fpt-blue-100);color:var(--fpt-blue-700);font-size:10.5px;font-weight:700;cursor:help;margin-left:5px;position:relative;vertical-align:middle}
/* body-level floating tooltip (set by app.js initTips) — never clipped, always dark-on-light */
.fpt-tip{position:fixed;display:none;z-index:9999;pointer-events:none;background:var(--fpt-black);color:#fff;
  font-family:var(--fpt-body);font-weight:400;font-size:12px;line-height:1.45;padding:8px 11px;border-radius:8px;
  box-shadow:0 10px 30px -8px rgba(0,0,0,.55);transform:translate(-50%,-100%)}
.fpt-tip.below{transform:translate(-50%,0)}

.fpt-edit{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;border-radius:5px;background:var(--fpt-yellow);color:var(--fpt-black);font-size:11px;cursor:pointer;margin-left:6px}
.fpt-lock{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;border-radius:5px;background:#eef0f2;color:#9aa3ad;font-size:11px;margin-left:6px}

.fpt-lock-veil{position:absolute;inset:0;display:flex;flex-direction:column;gap:10px;align-items:center;justify-content:center;
  backdrop-filter:blur(7px);background:rgba(246,248,250,.55);border-radius:inherit;z-index:3;text-align:center}
.fpt-prem{font-family:var(--fpt-head);font-weight:700;color:var(--fpt-blue);font-size:13px}

.fpt-modal{display:none;position:fixed;inset:0;z-index:100}
.fpt-modal-bg{position:absolute;inset:0;background:rgba(25,23,26,.55)}
/* audit 2026-08-19: 520px was too narrow for tables (Rising Star min-width:460px + padding
   overflowed) and cards touched the screen edge on phones — min(680px, 100vw-32px) keeps a
   16px gutter each side at every width. 86vh + internal .fpt-modal-body scroll. */
.fpt-modal-card{position:relative;max-width:min(680px,calc(100vw - 32px));margin:5vh auto;background:#fff;border-radius:var(--fpt-r-lg);max-height:86vh;display:flex;flex-direction:column;box-shadow:0 30px 80px -30px #000;overflow:hidden}
.fpt-modal-card:focus{outline:none}   /* programmatic focus target (tabindex=-1) — no stray ring */
.fpt-modal-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--fpt-line)}
.fpt-modal-head h3{font-family:var(--fpt-head);font-weight:800;font-size:17px;margin:0}
.fpt-modal-head button{border:0;background:none;font-size:18px;cursor:pointer;color:var(--fpt-muted)}
.fpt-modal-body{padding:16px 18px;overflow:auto}

/* shared video frame — audit 2026-08-19: the "half-video" bug class was 16:9 iframes clipped
   inside fixed-height wrappers. aspect-ratio on the WRAPPER + absolutely-filled iframe means
   the embed always shows the full frame at any card width. (home.html's hero keeps its own
   wider variant; this is the site-wide default, incl. inside modals.) */
.fpt-vid{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:10px;overflow:hidden}
.fpt-vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}

.fpt-lb-one{display:flex;align-items:center;gap:14px;background:var(--fpt-fade);border-radius:var(--fpt-r);padding:14px 16px;margin-bottom:12px;position:relative}
.fpt-lb-one>div{min-width:0}   /* name/value wrapper must shrink so long names wrap, not overflow */
.fpt-lb-medal{font-size:26px;flex:0 0 auto}
.fpt-lb-one img,.fpt-lb-ph{width:60px;height:60px;border-radius:50%;object-fit:cover;border:3px solid #fff;flex:0 0 auto}
.fpt-lb-ph{display:flex;align-items:center;justify-content:center;background:var(--fpt-black);color:#fff;font-family:var(--fpt-head);font-weight:800;font-size:24px}
.fpt-lb-1name{font-family:var(--fpt-head);font-weight:800;font-size:18px;color:var(--fpt-black);overflow-wrap:anywhere}
.fpt-lb-1val{font-family:var(--fpt-head);font-weight:700;color:var(--fpt-black)}.fpt-lb-1val span{font-weight:400;font-size:12px;opacity:.7}
.fpt-lb-list{font-size:14px}
.fpt-lb-row{display:flex;align-items:center;gap:10px;padding:7px 6px;border-bottom:1px solid #f0f2f4}
.fpt-lb-row.top{font-size:15px}
.fpt-lb-row .rk{width:26px;color:var(--fpt-muted);font-family:var(--fpt-head);font-weight:700;text-align:right;flex:0 0 auto}
.fpt-lb-row .nm{flex:1;min-width:0;overflow-wrap:anywhere}   /* long names wrap inside the row, never overflow */
.fpt-lb-row .vl{font-family:var(--fpt-head);font-weight:700;color:var(--fpt-blue);white-space:nowrap;flex:0 0 auto}
.fpt-lb-row.me{background:var(--fpt-blue-100);border-radius:7px}
.fpt-lb-rest{max-height:280px;overflow:auto;margin-top:4px;border-top:1px dashed var(--fpt-line)}
/* public standings cut (Adam 2026-08-19 caps 16/4/4): the last visible row fades to white, then a note;
   a signed-in athlete's own row follows a 'Your position' divider. Rows beyond are never in the DOM. */
.rk-fade{-webkit-mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.55) 55%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.55) 55%,transparent 100%)}
.rk-note{font-family:var(--fpt-body);font-size:12.5px;font-style:italic;color:var(--fpt-muted);padding:10px 6px 4px}
.rk-own-div{font-family:var(--fpt-head);font-weight:700;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--fpt-muted);padding:10px 6px 4px;margin-top:6px;border-top:1px dashed var(--fpt-line)}
/* explainer block + relative-% chip (index boards: Power Rank / Ultimate) */
.fpt-lb-explain{font-family:var(--fpt-body);font-size:12.5px;line-height:1.55;color:var(--fpt-ink-2);background:var(--fpt-paper-2,#f3f6f9);border:1px solid var(--fpt-line);border-left:3px solid var(--fpt-blue);border-radius:0 8px 8px 0;padding:10px 13px;margin-bottom:14px}
.fpt-lb-empty{font-size:13px;color:var(--fpt-muted);padding:18px 4px;text-align:center;font-style:italic}
.fpt-lb-explain b{color:var(--fpt-ink);font-weight:700}
.fpt-lb-pct{font-family:var(--fpt-body);font-weight:600;font-size:11px;color:var(--fpt-muted);margin-left:7px}
.fpt-lb-1val .fpt-lb-pct{font-size:12px}

/* ── restricted athlete (data/athlete_visibility.json) ─────────────────────────
   Adam, 2026-07-17: a commentator sees — and — as name + sail only.
   app.js has ALREADY stripped their stats from the stores before any render — this is the
   SIGNAL, not the mechanism. Nothing readable is hidden under the blur, because nothing
   readable was loaded: .fpt-lock-blur covers a placeholder, never real numbers behind a filter.
   (A blur over real values would be theatre — selectable text, two clicks in devtools.) */
.fpt-locked{position:relative;border-radius:var(--fpt-r-sm,8px);overflow:hidden}
.fpt-locked .fpt-lock-blur{
  filter:blur(7px);opacity:.5;pointer-events:none;user-select:none;
  background:repeating-linear-gradient(100deg,var(--fpt-line,#e4e7eb) 0 22px,var(--fpt-paper-2,#f6f8fa) 22px 44px);
  min-height:44px;border-radius:inherit}
.fpt-locked .fpt-lock-tag{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:7px;
  font-family:var(--fpt-body);font-size:11.5px;font-weight:600;color:var(--fpt-ink-2,#43474d);
  text-align:center;padding:6px 10px;line-height:1.35}
.fpt-locked .fpt-lock-tag .ico{font-size:13px}   /* the lock is a line icon in the markup (FPT.ico, icons.js) */
/* on the console's dark broadcast block */
.cx-dark .fpt-locked .fpt-lock-blur{
  background:repeating-linear-gradient(100deg,#2c2a2e 0 22px,var(--fpt-black-2,#221f24) 22px 44px)}
.cx-dark .fpt-locked .fpt-lock-tag{color:#cdd4dc}
/* the avatar: a locked rider shows no photo at all (app.js drops it), so this is the empty frame */
.fpt-lock-avatar{filter:blur(6px);opacity:.45}