/* ==========================================================================
 * career.css — the pilot-career widgets shared across the dashboard, account,
 * logbook and roster: the next-rank progress meter, landing-grade pills, the
 * flight scorecard, the achievement badge shelf and the career timeline.
 *
 * Uses the site-wide leap-core.css tokens (--navy / --red / --line / --muted
 * / --wash / --ink) so a widget looks identical wherever it is dropped. Loaded
 * per-page via leap_asset() for cache-busting.
 * ========================================================================== */

/* --- Next-rank progress meter ------------------------------------------- */
.career-meter { margin: 6px 0 18px; }
.career-meter__head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 10px; flex-wrap: wrap; margin-bottom: 7px;
}
.career-meter__rank { display: flex; align-items: center; gap: 8px; }
.career-meter__rank img { width: 30px; height: 17px; vertical-align: middle; }
.career-meter__now { font-weight: 600; color: var(--ink, #333); font-size: 15px; }
.career-meter__next { color: var(--muted, #6f7683); font-size: 13px; }
.career-meter__next b { color: var(--heading, #101e40); }
.career-meter__track {
    position: relative; height: 14px; border-radius: 8px;
    background: var(--wash, #f2f2f2); border: 1px solid var(--line, #d9d9d9);
    overflow: hidden;
}
.career-meter__fill {
    height: 100%; border-radius: 8px 0 0 8px;
    background: linear-gradient(90deg, var(--navy, #101e40), var(--red, #f44336));
    transition: width .6s ease;
}
.career-meter__fill.is-full { border-radius: 8px; }
.career-meter__labels {
    display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap;
    margin-top: 5px; font-size: 12.5px; color: var(--muted, #6f7683);
}
.career-meter__labels b { color: var(--ink, #333); }
.career-meter__labels .binding { color: var(--red-deep, #c62828); font-weight: 600; }
.career-meter--top .career-meter__track { background: linear-gradient(90deg, var(--navy, #101e40), var(--red, #f44336)); }

/* --- Landing-grade pills ------------------------------------------------ */
.grade-pill {
    display: inline-block; font: 700 8.5pt Arial, sans-serif;
    text-transform: uppercase; letter-spacing: .04em;
    border-radius: .25em; padding: 2px 7px; border: 1px solid; white-space: nowrap;
}
.grade-butter { background: #fff6da; border-color: #d4a017; color: #8a6a00; }
.grade-smooth { background: #eef2f7; border-color: #4a6b96; color: #2d4a6b; }
.grade-firm   { background: #fff4e2; border-color: #c98a00; color: #8a5f00; }
.grade-hard   { background: #fdeceb; border-color: #e80000; color: #a30000; }
.grade-pill .greaser { margin-left: 2px; }
.grade-ungraded { color: var(--muted, #6f7683); font-size: 12px; }

/* --- Bounces ------------------------------------------------------------
   A bounced landing keeps the grade of its INITIAL touchdown (that is the
   pilot's landing rate); this tag only reports that the aircraft came back
   down again, so it stays quiet next to the grade pill rather than competing
   with it. The logbook detail page lists the individual rates. */
.bounce-tag {
    display: inline-block; margin-left: 5px; font: 400 8.5pt Arial, sans-serif;
    color: var(--muted, #6f7683); border: 1px dashed var(--line, #d9d9d9);
    border-radius: .25em; padding: 1px 5px; white-space: nowrap; cursor: help;
}
.ld-touchdowns .ld-bounce td { color: var(--muted, #6f7683); }

/* --- Flight scorecard --------------------------------------------------- */
.scorecard {
    display: flex; align-items: stretch; gap: 16px; flex-wrap: wrap;
    border: 1px solid var(--line, #d9d9d9); border-radius: .3em;
    padding: 14px 16px; background: var(--surface-2, #fff); margin: 4px 0 8px;
}
.scorecard__overall {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-width: 84px; padding-right: 16px; border-right: 1px solid var(--line, #d9d9d9);
}
.scorecard__letter { font: 900 40px/1 "Barlow", Arial, sans-serif; }
.scorecard__letter[data-g="A"] { color: #1e7a1e; }
.scorecard__letter[data-g="B"] { color: #2d6ba3; }
.scorecard__letter[data-g="C"] { color: #b07800; }
.scorecard__letter[data-g="D"] { color: #c05a00; }
.scorecard__letter[data-g="F"] { color: #b3241f; }
.scorecard__pts { font-size: 12px; color: var(--muted, #6f7683); margin-top: 2px; }
.scorecard__rows { flex: 1 1 260px; display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.scorecard__row { display: grid; grid-template-columns: 76px 1fr auto; align-items: center; gap: 10px; }
.scorecard__row .lbl { font-size: 12.5px; color: var(--muted, #6f7683); text-transform: uppercase; letter-spacing: .03em; }
.scorecard__bar { height: 8px; border-radius: 5px; background: var(--wash, #f2f2f2); overflow: hidden; }
.scorecard__bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--navy, #101e40), var(--red, #f44336)); }
.scorecard__val { font-size: 12.5px; color: var(--ink, #333); white-space: nowrap; }
.scorecard__val.dim { color: var(--muted, #6f7683); }

/* --- Achievement badge shelf -------------------------------------------- */
.badge-shelf { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 14px; }
.ach-badge {
    display: flex; align-items: center; gap: 7px;
    border: 1px solid var(--line, #d9d9d9); border-radius: .35em;
    padding: 6px 10px 6px 8px; background: var(--surface-2, #fff); min-width: 0;
}
.ach-badge__icon { font-size: 18px; line-height: 1; }
.ach-badge__txt { display: flex; flex-direction: column; line-height: 1.15; }
.ach-badge__title { font-weight: 600; font-size: 13px; color: var(--ink, #333); }
.ach-badge__sub { font-size: 10.5px; color: var(--muted, #6f7683); }
.ach-badge.locked { background: var(--wash, #f2f2f2); border-style: dashed; opacity: .72; }
.ach-badge.locked .ach-badge__icon { filter: grayscale(1); opacity: .6; }
.ach-badge.locked .ach-badge__title { color: var(--muted, #6f7683); font-weight: 500; }

/* Compact, icon-only badges for tight spots (the roster). */
.badge-strip { display: inline-flex; gap: 3px; flex-wrap: wrap; vertical-align: middle; }
.badge-strip .dot {
    font-size: 15px; line-height: 1; cursor: default;
    filter: saturate(1.05);
}
.badge-strip .more { font-size: 11px; color: var(--muted, #6f7683); align-self: center; }

/* --- Roster identity cell ------------------------------------------------
 * Name + flag, badge strip, then the pilot's title as one tight column.
 * The container owns its line spacing so the roster table's roomy default
 * line-height cannot open gaps between the three rows, and the flag rides
 * the name line instead of wrapping under it. */
.roster-ident {
    display: flex; flex-direction: column; align-items: flex-start;
    gap: 3px; line-height: 1.3; padding: 5px 0; text-align: left;
}
.roster-ident .roster-name {
    display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
}
.roster-ident .roster-name img { display: block; }
.roster-ident .roster-title { font-size: 12px; color: var(--muted, #6f7683); }

/* --- Career timeline ---------------------------------------------------- */
.timeline { list-style: none; margin: 6px 0 14px; padding: 0; position: relative; }
.timeline::before {
    content: ""; position: absolute; left: 13px; top: 4px; bottom: 4px;
    width: 2px; background: var(--line, #d9d9d9);
}
.timeline__item { position: relative; padding: 0 0 14px 40px; }
.timeline__item:last-child { padding-bottom: 0; }
.timeline__dot {
    position: absolute; left: 0; top: -2px; width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center; font-size: 16px;
    background: var(--surface-2, #fff); border: 2px solid var(--heading, #101e40); border-radius: 50%;
}
.timeline__title { font-weight: 600; color: var(--ink, #333); }
.timeline__meta { font-size: 12.5px; color: var(--muted, #6f7683); }
.timeline__meta .route { font-family: "Barlow Semi Condensed", Menlo, monospace; }

/* --- Account page: give each section its own tinted panel --------------- */
.acct-section {
    background: #f7f8fb;
    border: 1px solid var(--line, #d9d9d9);
    border-radius: .45em;
    padding: 2px 20px 18px;
    margin: 0 0 16px;
}
.acct-section > h3:first-child {
    margin: 16px 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line, #d9d9d9);
    color: var(--heading, #101e40);
    font: 600 15px/1.2 "Barlow", Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: .04em;
}
/* Alternate the tint so adjacent panels read as distinct. */
.acct-section:nth-of-type(even) { background: #fbf7f4; }

/* --- Best-fpm leaderboard (dashboard) ----------------------------------- */
.leaderboard { width: 100%; border-collapse: collapse; font-size: 14px; }
.leaderboard th {
    text-align: left; padding: 6px 10px; background: var(--wash, #f2f2f2);
    font: 600 11px/1.4 "Barlow", Arial, sans-serif; text-transform: uppercase;
    letter-spacing: .04em; color: var(--muted, #6f7683); border-bottom: 1px solid var(--line, #d9d9d9);
}
.leaderboard td { padding: 6px 10px; border-bottom: 1px solid var(--line-soft, #eceef1); }
.leaderboard td.rank-no { color: var(--muted, #6f7683); width: 2.2em; text-align: right; }
.leaderboard tr.is-me { background: #fff6da; }
.leaderboard .fpm { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.leaderboard .n { text-align: right; color: var(--muted, #6f7683); font-variant-numeric: tabular-nums; }
.leaderboard .medal { width: 1.6em; }

/* A framed panel used to lift the dashboard widgets above the legacy content.
   The surface and heading are theme tokens (2026-09-05): this panel was
   literal white with a navy heading, which in the dark theme put light body
   text on a white card ("Your next rank" and every competition board were
   unreadable) and a navy heading on the navy page. --surface-2 is white in
   the light theme, so nothing changes there. */
.career-panel {
    max-width: 850px; margin: 0 auto 18px; padding: 16px 20px;
    border: 1px solid var(--line, #d9d9d9); border-radius: .4em; background: var(--surface-2, #fff);
}
.career-panel > h3 { margin: 0 0 10px; font: 600 15px/1.2 "Barlow", Arial, sans-serif;
    color: var(--heading, #101e40); text-transform: uppercase; letter-spacing: .05em; }

/* --- Announcements (dashboard, admin-posted; migration 022) -------------- */
.announce-item { padding: 10px 0; border-bottom: 1px solid var(--line-soft, #eceef1); }
.announce-item:last-child { border-bottom: 0; }
.announce-item h4 { margin: 0 0 4px; font: 600 15px/1.3 "Barlow", Arial, sans-serif;
    color: var(--heading, #101e40); }
.announce-item .announce-date { color: var(--muted, #6f7683); font-size: 12px;
    margin-left: 8px; font-weight: 400; }
.announce-item p { margin: 0; white-space: pre-line; }

/* --- Monthly competitions grid (dashboard) ------------------------------- */
.comp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px;
    max-width: 850px; margin: 0 auto; }
.comp-grid .career-panel { margin-left: 0; margin-right: 0; }
@media (max-width: 760px) {
    .comp-grid { grid-template-columns: 1fr; }
}

/* --- The pilot's identity block (logbook, 2026-09-05) ---------------------
   The profile picture and bio from the account page, with name, callsign,
   rank, status and joining date, at the top of the flying record. Tokens
   throughout, so it follows the theme like the rest of the sheet. */
.pilot-ident {
    display: flex; align-items: flex-start; gap: 18px;
    margin: 0 0 18px; padding: 16px 20px;
    border: 1px solid var(--line, #d9d9d9); border-radius: .4em; background: var(--surface-2, #fff);
}
.pilot-ident__pic {
    flex: none; width: 96px; height: 96px; border-radius: 50%; object-fit: cover;
    border: 2px solid var(--line, #d9d9d9);
}
.pilot-ident__pic--none {
    display: flex; align-items: center; justify-content: center;
    background: var(--navy, #101e40); color: #fff;
    font: 600 34px/1 "Barlow", Arial, sans-serif; letter-spacing: 1px;
}
.pilot-ident__body { flex: 1; min-width: 0; }
.pilot-ident__name {
    margin: 0 0 4px; font: 600 20px/1.2 "Barlow", Arial, sans-serif; color: var(--heading, #101e40);
}
.pilot-ident__callsign {
    margin-left: 6px; font: 400 15px/1 "Barlow Semi Condensed", Menlo, monospace;
    letter-spacing: .08em; color: var(--muted, #6f7683); vertical-align: middle;
}
.pilot-ident__meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
    margin: 0 0 8px; font-size: 13px; color: var(--muted, #6f7683);
}
.pilot-ident__rank { display: inline-flex; align-items: center; gap: 6px; color: var(--ink, #333); }
.pilot-ident__rank img { width: 30px; height: 17px; }
.pilot-ident__bio {
    margin: 0; white-space: pre-line; font-size: 14px; line-height: 1.5; color: var(--ink-soft, #4a5160);
}
.pilot-ident__bio--none { color: var(--muted, #6f7683); font-style: italic; }
.pilot-ident__bio--none a { color: var(--red, #f44336); }
@media (max-width: 620px) {
    .pilot-ident { flex-direction: column; align-items: center; text-align: center; }
    .pilot-ident__meta { justify-content: center; }
}

/* Dark theme (2026-09-05): grade letters bright enough to read on a dark
   card, the two tinted account panels, and the highlighted "you" row.
   Everything else in this sheet runs on the core tokens (with light
   fallbacks) and follows the theme by itself. The panels and cards that used
   to be overridden here (.career-panel, .scorecard, .ach-badge, the table
   rules) now name --surface-2 and --line-soft directly, which is the same
   thing with one rule instead of two. */
:root[data-theme="dark"] .scorecard__letter[data-g="A"] { color: #6fd36f; }
:root[data-theme="dark"] .scorecard__letter[data-g="B"] { color: #7fb3ff; }
:root[data-theme="dark"] .scorecard__letter[data-g="C"] { color: #ffcc4d; }
:root[data-theme="dark"] .scorecard__letter[data-g="D"] { color: #ff9a4d; }
:root[data-theme="dark"] .scorecard__letter[data-g="F"] { color: #ff6b6b; }
:root[data-theme="dark"] .acct-section { background: var(--wash); }
:root[data-theme="dark"] .acct-section:nth-of-type(even) { background: var(--surface-2); }
:root[data-theme="dark"] .leaderboard th { background: var(--wash); color: var(--muted); }
:root[data-theme="dark"] .leaderboard tr.is-me { background: #3a3218; }