/* Player detail only: an almanac page. Lora for the name and section headings,
   Inter for everything else, thin rules and no card boxes. All colours come
   from the theme variables so light and dark both work. */
.pp-profile {
    font-family: var(--font-sans), system-ui, sans-serif;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums lining-nums;
    --pp-rule: var(--table-cell-border);
    --pp-ink: var(--ink, var(--text-primary));
    --pp-dim: var(--ink-muted, var(--text-secondary));
    padding-block: 0.5rem 1.5rem;
    --pp-bar: color-mix(in srgb, var(--text-muted) 60%, var(--bg-card));
}
.pp-back, .pp-link { color: var(--text-secondary); font: inherit; font-size: 0.8125rem; text-decoration: none; }
.pp-link { background: transparent; border: 0; padding: 0; cursor: pointer; text-align: left; white-space: nowrap; }
.pp-back:hover, .pp-link:hover { text-decoration: underline; color: var(--text-primary); }

/* Header: back link and player picker, then name and silverware stars. */
.pp-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.pp-player-switch { display: flex; align-items: center; gap: 0.75rem; font-size: 0.8125rem; color: var(--text-secondary); }
.pp-player-switch select { font-family: inherit; min-height: 36px; max-width: 100%; }
.pp-identity { margin: 1.5rem 0 0; }
.pp-profile .pp-name {
    font-family: var(--font-serif), Georgia, serif;
    font-size: 40px; font-weight: 600; line-height: 1.1; margin: 0;
}
.pp-stars { font-size: 18px; letter-spacing: 1px; line-height: 1; margin: 10px 0 0; }
.pp-stars-gap { display: inline-block; width: 0.5em; }
.pp-meta { font-size: 0.8125rem; color: var(--text-secondary); margin: 10px 0 0; }
.pp-profile .pp-tabs {
    display: flex; align-items: center; flex-wrap: wrap; gap: 0 1.75rem;
    border: 0; border-bottom: 1px solid var(--pp-rule);
    margin-top: 1.25rem; padding: 0;
    background: transparent; box-shadow: none; border-radius: 0;
}
@media (min-width: 641px) { .pp-profile .pp-tabs .tab-underline { padding-inline: 0; } }

/* Section headings: the site's .section-title (Lora small caps, green), no
   extra rule, matching the rest of the site. */
.pp-profile .pp-sec { margin: 0 0 10px; }
.pp-sec-row { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem 1rem; flex-wrap: wrap; margin-bottom: 10px; }
.pp-profile .pp-sec-row .pp-sec { border-bottom: 0; margin-bottom: 0; }
.pp-sec-aside { font-size: 12px; color: var(--pp-dim); }
.pp-section { margin-top: 44px; }
.pp-note { font-size: 12px; line-height: 1.5; color: var(--pp-dim); margin: 10px 0 0; }
.pp-note-phone { display: none; }
.pp-win { color: var(--accent); font-weight: 700; }
.pp-spoon { color: var(--failure); font-weight: 700; }

/* Overview */
.pp-section:first-child { margin-top: 0; }
.pp-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.pp-li { display: grid; grid-template-columns: 1fr auto 40px; gap: 10px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--pp-rule); font-size: 14px; }
.pp-li-value { font-weight: 600; text-align: right; }
.pp-li-rank { font-style: normal; font-size: 12px; color: var(--pp-dim); text-align: right; }
.pp-li-accent { color: var(--accent); }
.pp-li-label.pp-li-accent { font-weight: 600; }

/* Finishing position: one markup, two layouts. Desktop is a label column plus
   one column per TEG, oldest first. Phone is one row per TEG, newest first. */
.pp-fp-wrap { overflow-x: auto; }
.pp-fp { display: grid; grid-template-columns: 64px; grid-auto-flow: column; grid-auto-columns: minmax(2.6rem, 1fr); gap: 0 4px; }
.pp-fp-key, .pp-fp-teg { display: flex; flex-direction: column; text-align: center; min-width: 0; }
.pp-fp-key { text-align: left; }
.pp-fp-key-teg { box-sizing: border-box; height: 39px; font-size: 12px; font-weight: 700; display: flex; align-items: center; }
.pp-fp-key-gross, .pp-fp-key-net { box-sizing: content-box; height: 34px; line-height: 34px; font-size: 13px; font-weight: 600; }
.pp-fp-key-gross { border-top: 1px solid var(--pp-ink); }
.pp-fp-key-net { border-top: 1px solid var(--pp-rule); }
.pp-fp-head { box-sizing: border-box; height: 39px; border-bottom: 1px solid var(--pp-ink); font-size: 12px; font-weight: 700; line-height: 1.3; display: flex; flex-direction: column; justify-content: center; }
.pp-fp-yr { font-size: 11px; font-weight: 400; color: var(--pp-dim); }
.pp-fp-yr-long { display: none; }
.pp-fp-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pp-fp-pair { box-sizing: border-box; border-radius: 3px; }
.pp-fp-cell { box-sizing: content-box; display: block; height: 34px; line-height: 34px; font-size: 13px; }
.pp-fp-cell + .pp-fp-cell { border-top: 1px solid var(--pp-rule); }
.pp-double { outline: 2px solid var(--accent); outline-offset: -1px; }
.pp-legend { display: flex; flex-wrap: wrap; gap: 6px 20px; align-items: center; font-size: 12px; color: var(--text-secondary); margin: 12px 0 0; border-top: 1px solid var(--pp-rule); padding-top: 10px; }
.pp-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.pp-legend-box { width: 14px; height: 14px; border: 2px solid var(--accent); border-radius: 3px; box-sizing: border-box; }
.pp-legend + .pp-note { margin-top: 6px; }

/* Gross vs par per round: bar = TEG average a round, thin line = best to
   worst round. Desktop columns; phone rows (newest first). */
.pp-gaxis { display: none; }
.pp-gplot { position: relative; height: 240px; border-bottom: 1px solid var(--pp-ink); margin-bottom: 44px; }
.pp-gcareer { position: absolute; left: 0; right: 0; bottom: var(--career); border-top: 1px dashed var(--pp-dim); }
.pp-gcareer-label { position: absolute; z-index: 2; right: 0; bottom: var(--career); margin-bottom: 4px; padding-left: 6px; font-size: 11px; color: var(--pp-dim); background: var(--bg-card); }
.pp-gcols { position: absolute; inset: 0 76px 0 0; margin: 0; padding: 0; list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0 10px; }
.pp-gcol { position: relative; }
.pp-gtrack { position: absolute; inset: 0; }
.pp-gbar { position: absolute; left: 0; right: 0; bottom: 0; height: var(--bar); background: var(--pp-bar); border-radius: 2px 2px 0 0; }
.pp-gcol--jacket .pp-gbar { background: var(--accent); }
/* Best and worst round markers: a filled dot (best) and a hollow dot (worst),
   centred on the bar. The average value sits under the TEG label instead of
   in the bar, so the two can never collide. */
.pp-gmark { position: absolute; left: 50%; width: 8px; height: 8px; margin: 0 0 -4px -4px; border-radius: 50%; box-sizing: border-box; border: 1.5px solid var(--pp-ink); background: var(--pp-ink); z-index: 1; }
.pp-gmark--best { bottom: var(--lo); }
.pp-gmark--worst { bottom: var(--hi); background: var(--bg-card); }
.pp-gkey { display: inline-block; width: 8px; height: 8px; border-radius: 50%; box-sizing: border-box; border: 1.5px solid var(--pp-ink); background: var(--pp-ink); vertical-align: 0; margin-left: 4px; }
.pp-gkey--worst { background: transparent; }
.pp-gteg { position: absolute; left: 0; right: 0; top: 100%; margin-top: 6px; display: flex; flex-direction: column; align-items: center; font-size: 11px; line-height: 15px; color: var(--pp-dim); }
.pp-gval { color: var(--text-primary); font-size: 10.5px; white-space: nowrap; }

/* Records and personal bests */
.pp-pb { display: grid; grid-template-columns: 150px minmax(0, 1fr) minmax(0, 1fr); gap: 0 20px; padding: 9px 0; border-bottom: 1px solid var(--pp-rule); font-size: 14px; align-items: baseline; }
.pp-pb-head { padding-top: 0; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-secondary); border-bottom: 1px solid var(--pp-ink); }
.pp-pb-cell b { font-weight: 600; }
.pp-pb-cell small { display: block; font-size: 12px; color: var(--pp-dim); margin-top: 2px; }
.pp-pb-kind { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pp-none { color: var(--pp-dim); font-weight: 400; }
.pp-rec { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 600; border: 1px solid var(--pp-ink); border-radius: 2px; padding: 0 4px; line-height: 16px; }
.pp-pb-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; font-size: 13px; color: var(--text-secondary); margin-top: 12px; }

/* Career record, Rounds, Records tables */
.pp-career-table th, .pp-career-table td { white-space: nowrap; }
.pp-strong { font-weight: 600; }
.pp-dim { color: var(--text-secondary); }
.pp-result { font-weight: 600; }

/* Quiet links: data identifiers and one footer line per section. They inherit
   the text colour (green is reserved for honours) and underline on hover or
   keyboard focus only. */
.pp-profile a.pp-a { color: inherit; text-decoration: none; }
.pp-profile a.pp-a:hover, .pp-profile a.pp-a:focus-visible { text-decoration: underline; }
.pp-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 20px; flex-wrap: wrap; }
.pp-foot-links { margin-left: auto; font-size: 13px; color: var(--pp-dim); white-space: nowrap; }
.pp-foot-links .pp-link { font-size: 13px; color: var(--pp-dim); }

/* Rounds and Scoring tabs */
.pp-chart { width: 100%; }
.pp-rounds-chart { height: 320px; }
.pp-dist-chart { height: 300px; }
/* Measure and direction stated without hover; phone only, as desktop has the
   y-axis title. */
.pp-chart-direction { display: none; }
.pp-pb-tag { display: inline-block; font-size: 10px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--text-secondary); border: 1px solid var(--pp-rule); border-radius: 2px; padding: 0 3px; line-height: 14px; vertical-align: 1px; }
.teg-table.pp-held-table td.pp-where { white-space: normal; color: var(--text-secondary); font-size: 13px; }
.pp-rounds-table .pp-course { color: var(--text-secondary); }

@media (max-width: 800px) {
    .pp-metrics { gap: 28px; }
    .pp-pb { grid-template-columns: 120px minmax(0, 1fr) minmax(0, 1fr); gap: 0 12px; }
}
@media (max-width: 640px) {
    .pp-profile { padding-inline: 0.75rem; }
    .pp-back, .pp-link { display: inline-flex; align-items: center; min-height: 44px; }
    .pp-top { min-height: 44px; }
    .pp-profile a.pp-a { padding-block: 13px; }
    .pp-foot-links a.pp-a { display: inline-flex; align-items: center; min-height: 44px; padding-block: 0; }
    .pp-foot-links { margin-left: 0; white-space: normal; }
    .pp-fp-head a.pp-a, .pp-rounds-table a.pp-a, .pp-career-table a.pp-a { display: inline-flex; align-items: center; min-height: 44px; padding-block: 0; }
    .pp-fp-head { padding-block: 0; }
    .pp-profile .pp-tabs { flex-wrap: nowrap; gap: 0; padding: 0 18px 0 0; margin-top: 0.75rem; }
    .pp-switch-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .pp-player-switch select { min-width: 0; min-height: 44px; max-width: 170px; }
    .pp-identity { margin-top: 0.75rem; }
    .pp-profile .pp-name { font-size: 32px; }
    .pp-stars { font-size: 16px; }
    .pp-metrics { grid-template-columns: 1fr; gap: 24px; }
    .pp-li { padding: 8px 0; grid-template-columns: 1fr auto 36px; }
    .pp-section { margin-top: 28px; }
    .pp-note-phone { display: inline; }
    .pp-sec-aside { display: none; }

    /* Finishing position: one row per TEG, newest first. */
    .pp-fp-wrap { overflow: visible; }
    .pp-fp { display: flex; flex-direction: column-reverse; }
    .pp-fp-key { order: 99; display: grid; grid-template-columns: 1fr 72px 72px; text-align: center; padding: 4px 0 6px; border-bottom: 1px solid var(--pp-ink); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-secondary); }
    .pp-fp-key > span { height: auto; line-height: 1.2; border: 0; font-size: 11px; font-weight: 700; display: block; }
    .pp-fp-key-teg { text-align: left; }
    .pp-fp-teg { display: grid; grid-template-columns: 1fr 144px; align-items: center; border-bottom: 1px solid var(--pp-rule); text-align: left; }
    .pp-fp-head { height: auto; border: 0; flex-direction: row; align-items: baseline; justify-content: flex-start; gap: 8px; padding: 0; font-size: 14px; font-weight: 600; }
    .pp-fp-word { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
    .pp-fp-yr { font-size: 12px; }
    .pp-fp-yr-long { display: inline; }
    .pp-fp-yr-short { display: none; }
    .pp-fp-pair { display: grid; grid-template-columns: 72px 72px; height: 38px; align-items: center; text-align: center; border-radius: 4px; }
    .pp-double { outline-offset: -3px; }
    .pp-fp-cell { height: auto; line-height: 1.2; font-size: 14px; }
    .pp-fp-cell + .pp-fp-cell { border-top: 0; }
    .pp-legend { border-top: 0; padding-top: 0; margin-top: 10px; }

    /* Gross vs par: one row per TEG, bars run left to right. */
    .pp-gchart { --pp-glab: 92px; }
    .pp-gaxis { display: block; position: relative; height: 18px; margin: 0 0 0 var(--pp-glab); font-size: 11px; color: var(--pp-dim); }
    .pp-gaxis span { position: absolute; left: var(--pos); transform: translateX(-50%); }
    .pp-gaxis span:first-child { transform: none; }
    .pp-gaxis span:last-child { transform: translateX(-100%); }
    .pp-gplot { height: auto; border-bottom: 0; margin-bottom: 0; }
    .pp-gcareer { top: 0; bottom: 0; right: auto; left: calc(var(--pp-glab) + (100% - var(--pp-glab)) * var(--career-frac)); border-top: 0; border-left: 1px dashed var(--pp-dim); }
    .pp-gcareer-label { display: none; }
    .pp-gcols { position: static; inset: auto; display: flex; flex-direction: column-reverse; }
    .pp-gcol { display: grid; grid-template-columns: var(--pp-glab) 1fr; align-items: center; height: 30px; font-size: 12px; }
    .pp-gteg { position: static; margin: 0; flex-direction: row; justify-content: space-between; padding-right: 10px; font-size: 12px; color: var(--text-secondary); }
    .pp-gval { font-size: 12px; }
    .pp-gtrack { position: relative; inset: auto; height: 30px; border-left: 1px solid var(--pp-ink); }
    .pp-gbar { left: 0; right: auto; bottom: auto; top: 2px; height: 16px; width: var(--bar); border-radius: 0 2px 2px 0; }
    /* Markers centred on the bar vertically. */
    .pp-gmark { top: 10px; bottom: auto; margin: -4px 0 0 -4px; }
    .pp-gmark--best { left: var(--lo); }
    .pp-gmark--worst { left: var(--hi); }

    /* Records: label over a Best line and a Worst line. */
    .pp-pb.pp-pb-head { display: none; }
    .pp-pb { display: block; padding: 10px 0; }
    .pp-pb-label { display: block; font-weight: 600; margin-bottom: 2px; }
    .pp-pb-cell { display: block; margin-top: 2px; }
    .pp-pb-kind { position: static; width: auto; height: auto; overflow: visible; clip-path: none; color: var(--text-secondary); margin-right: 4px; }
    .pp-pb-cell small { display: inline; margin: 0 0 0 4px; }
    .pp-pb-foot { flex-direction: column; gap: 4px; }

    /* Standard tables sized to fit a phone: tighter padding, no scroll. */
    .teg-table.pp-career-table th, .teg-table.pp-career-table td,
    .teg-table.pp-rounds-table th, .teg-table.pp-rounds-table td,
    .teg-table.pp-held-table th, .teg-table.pp-held-table td { font-size: 12px; padding: 10px 5px; min-width: 0; width: auto; }
    .pp-career-table .pp-hide-phone { display: none; }
    .teg-table.pp-rounds-table { table-layout: fixed; width: 100%; }
    .pp-rounds-table .pp-c-teg { width: 12%; }
    .pp-rounds-table .pp-c-rd { width: 9%; }
    .pp-rounds-table .pp-c-course { width: 31%; }
    .pp-rounds-table .pp-c-num { width: 16%; }
    .teg-table.pp-rounds-table td, .teg-table.pp-rounds-table th { white-space: normal; overflow-wrap: anywhere; }
    .pp-rounds-table .pp-pb-tag { display: block; width: max-content; margin: 2px auto 0; }
    .teg-table.pp-held-table { width: 100%; }
    .teg-table.pp-held-table td { white-space: normal; }
    .pp-held-table .pp-where { font-size: 12px; }
    .pp-chart-direction { display: block; font: 700 0.7rem/1.4 var(--font-sans), sans-serif; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 0.5rem; }
    .pp-rounds-chart { height: 260px; }
    .pp-dist-chart { height: 260px; }
}

/* Player roster (/player): a two-line list, one row per player. Each cell is a
   value over a small muted label. Reuses the profile's variables, defined here
   as the roster has no .pp-profile wrapper. */
.pr-roster {
    font-family: var(--font-sans), system-ui, sans-serif;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums lining-nums;
    --pp-rule: var(--table-cell-border);
    --pp-ink: var(--ink, var(--text-primary));
    --pp-dim: var(--ink-muted, var(--text-secondary));
    padding-block: 1rem 1.5rem;
}
.pr-intro { margin: 0 0 10px; font-size: 14px; color: var(--pp-ink); }
.pr-roster a.pp-a { color: inherit; text-decoration: none; }
.pr-roster a.pp-a:hover, .pr-roster a.pp-a:focus-visible { text-decoration: underline; }
.pr-list { list-style: none; margin: 0; padding: 0; }
.pr-item { border-bottom: 1px solid var(--pp-rule); }
/* The whole row is the link to the profile. It bleeds 8px either side so the
   hover tint has some air, while the rule on .pr-item keeps the text edge. */
.pr-roster .pr-row {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr) 110px 120px 120px;
    gap: 14px;
    align-items: start;
    padding: 14px 8px;
    margin-inline: -8px;
    border-radius: 4px;
    color: inherit;
    text-decoration: none;
}
.pr-roster a.pr-row:hover { background: var(--table-hover-bg); }
/* Desktop: the stat labels sit once in a header row; each row shows value
   over rank. The per-row labels stay for screen readers and come back on
   phone, where a header would scroll out of view. */
.pr-roster .pr-head { margin-inline: 0; padding: 0 0 6px; border-bottom: 1px solid var(--pp-rule); }
.pr-head .pr-sub { white-space: nowrap; }
.pr-row .pr-num .pr-sub {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.pr-roster a.pr-row:hover .pr-name, .pr-roster a.pr-row:focus-visible .pr-name { text-decoration: underline; text-underline-offset: 3px; }
.pr-cell { position: relative; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pr-num { text-align: right; }
.pr-num .pr-sub { white-space: nowrap; }
.pr-val { font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--pp-ink); }
.pr-val--spoon { color: var(--failure); }
.pr-val--none { color: var(--pp-dim); font-weight: 400; }
.pr-sub { font-size: 12px; line-height: 1.4; color: var(--pp-dim); }
.pr-rank { font-size: 12px; line-height: 1.4; color: var(--pp-dim); }
.pr-name {
    font-family: var(--font-serif), Georgia, serif;
    font-size: 19px; font-weight: 600; line-height: 1.3;
    color: var(--pp-ink);
}
.pr-name-end { white-space: nowrap; }
.pr-arrow { font-family: var(--font-sans), system-ui, sans-serif; font-size: 0.8em; font-weight: 400; color: var(--pp-dim); }
.pr-stars { white-space: nowrap; font-size: 16px; line-height: 1.3; letter-spacing: 1px; min-height: 1.3em; }
.pr-grp { display: inline-block; white-space: nowrap; }
.pr-grp + .pr-grp { margin-left: 0.5em; }
.pr-foot { margin-top: 12px; }

@media (min-width: 641px) and (max-width: 860px) {
    /* Not enough width for a stars column: stars move under the name, and
       the stats sit beside the three-line identity block. */
    .pr-roster .pr-row { grid-template-columns: minmax(0, 1fr) 72px 100px 100px; gap: 2px 12px; }
    .pr-roster a.pr-row { grid-template-areas: "name g s p" "stars g s p" "meta g s p"; }
    .pr-roster .pr-head > span:nth-child(2) { display: none; }
    .pr-id { display: contents; }
    .pr-name { grid-area: name; font-size: 17px; }
    .pr-meta { grid-area: meta; }
    .pr-honours { grid-area: stars; }
    .pr-gross { grid-area: g; }
    .pr-stab { grid-area: s; }
    .pr-spoon { grid-area: p; }
    .pr-honours-text, .pr-stars--empty { display: none; }
    .pr-stars { white-space: normal; }
}
@media (max-width: 640px) {
    .pr-roster { padding-inline: 0.75rem; }
    /* One stack per player: name, stars, career line, then a three-column
       stats row. The id cell dissolves so its two lines can sit either side
       of the stars. */
    .pr-roster a.pr-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-areas: "name name name" "stars stars stars" "meta meta meta" "g s p";
        gap: 4px 12px;
        padding: 20px 8px;
    }
    .pr-id { display: contents; }
    .pr-name { grid-area: name; font-size: 18px; }
    .pr-meta { grid-area: meta; margin-bottom: 8px; }
    .pr-honours { grid-area: stars; }
    .pr-gross { grid-area: g; }
    .pr-stab { grid-area: s; }
    .pr-spoon { grid-area: p; }
    .pr-stars { white-space: normal; }
    .pr-num { text-align: left; }
    .pr-honours-text, .pr-foot, .pr-roster .pr-head { display: none; }
    .pr-row .pr-num .pr-sub { position: static; width: auto; height: auto; overflow: visible; clip: auto; clip-path: none; white-space: normal; }
    .pr-stars--empty { display: none; }
}

@media (max-width: 360px) {
    /* Narrow phones: every other axis tick, so the labels don't run together. */
    .pp-gaxis span:nth-child(even) { display: none; }
}