/* Club Carry range board. Loaded after experience.css on the carry calculator only.
   Scope: the hero example card, the shared distance axis in the carry table,
   adjacent-club gaps and the short value highlight. Everything uses rb- classes. */

/* 1. Hero: a fixed example of the real output, attached to the driver photo. */
.rb-hero-card{position:relative;z-index:1;width:min(440px,calc(100% - 48px));margin:-72px 24px 0 auto;padding:20px 24px;background:#fff;border:1px solid var(--ink);border-radius:16px;box-shadow:0 12px 32px #13120914;font-variant-numeric:tabular-nums}
.rb-hero-card p{margin:0}
.rb-hero-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px 12px;flex-wrap:wrap}
.rb-hero-card-title{font-size:12px;line-height:16px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.rb-hero-card-tag{padding:2px 10px;font-size:12px;line-height:16px;font-weight:600;background:var(--accent);border:1px solid var(--ink);border-radius:999px}
/* The basis shares a fixed 44px row with Replay; long text wraps in its own column, never under the button. */
.rb-hero-meta{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;min-height:44px;margin:4px 0 8px}
.rb-hero-card .rb-hero-basis{min-width:0;font-size:14px;line-height:20px;color:var(--muted)}
.rb-hero-rows{display:grid;gap:12px;margin:0}
.rb-hero-row{display:grid;grid-template-columns:52px minmax(0,1fr);align-items:center;gap:8px}
.rb-hero-row dt{font-size:14px;line-height:20px;font-weight:600}
.rb-hero-row dd{position:relative;height:24px;margin:0}
/* --rb-w places the label; --rb-f is the same 203/300 and 130/300 share as a transform factor. */
.rb-hero-driver{--rb-w:67.667%;--rb-f:.67667}
.rb-hero-seven{--rb-w:43.333%;--rb-f:.43333}
.rb-hero-track{position:absolute;left:0;right:0;top:8px;height:8px;background:linear-gradient(var(--ink),var(--ink)) left/2px 100% no-repeat,repeating-linear-gradient(to right,transparent 0 calc(33.333% - 1px),#d3d6c8 calc(33.333% - 1px) 33.333%),#eef0e6}
.rb-hero-bar{position:absolute;inset:0;background:var(--ink);transform:scaleX(var(--rb-f));transform-origin:0 50%}
/* A track-wide carrier shifted left by the unused share: the marker sits on the bar end and only overflows leftwards. */
.rb-hero-end{position:absolute;inset:0;pointer-events:none;transform:translateX(calc((var(--rb-f) - 1) * 100%))}
.rb-hero-end::after{content:'';position:absolute;right:-6px;top:50%;width:12px;height:12px;margin-top:-6px;border:2px solid var(--ink);border-radius:50%;background:var(--accent)}
.rb-hero-row b{position:absolute;left:calc(var(--rb-w) + 14px);top:0;font-size:16px;line-height:24px;font-weight:700;white-space:nowrap}
.rb-hero-card .rb-hero-axis{position:relative;height:28px;margin:6px 0 0 60px;font-size:11px;line-height:16px;font-weight:600;color:var(--muted)}
.rb-hero-axis span{position:absolute;bottom:0;transform:translateX(-50%);white-space:nowrap}
.rb-hero-axis span::before{content:'';position:absolute;left:50%;top:-10px;width:1px;height:6px;background:#9a9c8f}
.rb-hero-axis span:nth-child(1){left:0;transform:none}
.rb-hero-axis span:nth-child(1)::before{left:0;width:2px;background:var(--ink)}
.rb-hero-axis span:nth-child(2){left:33.333%}
.rb-hero-axis span:nth-child(3){left:66.667%}
.rb-hero-axis span:nth-child(4){left:auto;right:0;transform:none}
.rb-hero-axis span:nth-child(4)::before{left:auto;right:0}
.rb-hero-card .rb-hero-note{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);font-size:12px;line-height:16px;color:var(--muted)}

/* 2. Carry table: one distance axis, zero origin and the same scale for every row. */
.bag{--rb-px:12px;--rb-value:48px;--rb-gap:12px;--rb-step:33.333%;--rb-grid:#e3e5da}
.bag thead th{vertical-align:bottom}
.bag .rb-carry-head,.bag .rb-carry-cell{position:relative;width:52%;padding-left:var(--rb-px);padding-right:var(--rb-px)}
.rb-axis-row{display:flex;align-items:flex-end;gap:var(--rb-gap);margin-top:8px}
.rb-axis{position:relative;flex:1;min-width:0;height:24px}
.rb-axis-unit{flex:none;width:var(--rb-value);padding-bottom:6px;font-size:11px;line-height:16px;font-weight:600;color:var(--muted)}
.rb-tick{position:absolute;top:0;bottom:0;width:0}
.rb-tick::after{content:'';position:absolute;left:0;bottom:0;width:1px;height:6px;background:#9a9c8f}
.rb-tick:first-child::after{width:2px;background:var(--ink)}
.rb-tick:last-child::after{left:-1px}
.rb-tick-label{position:absolute;left:0;bottom:8px;transform:translateX(-50%);font-size:11px;line-height:16px;font-weight:600;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.rb-tick:first-child .rb-tick-label{transform:none}
.rb-tick:last-child .rb-tick-label{transform:translateX(-100%)}
.rb-tick-unit{display:none}
/* Gridlines run through every row so each bar reads against the labelled ticks above. */
.rb-carry-cell::before{content:'';position:absolute;top:0;bottom:0;left:var(--rb-px);right:calc(var(--rb-px) + var(--rb-value) + var(--rb-gap));pointer-events:none;background:linear-gradient(var(--ink),var(--ink)) left/2px 100% no-repeat,linear-gradient(var(--rb-grid),var(--rb-grid)) right/1px 100% no-repeat,repeating-linear-gradient(to right,transparent 0 calc(var(--rb-step) - 1px),var(--rb-grid) calc(var(--rb-step) - 1px) var(--rb-step))}
.rb-carry-wrap{position:relative;z-index:1;display:flex;align-items:center;gap:var(--rb-gap)}
/* --rb-f (0–1) is set on the track. Changes glide through transform only; width never animates.
   The fallback of 1 keeps a cached older script (inline bar width) drawing correct bars. */
.rb-track{position:relative;flex:1;min-width:0;height:10px}
.rb-bar,.rb-end{position:absolute;inset:0;transition:transform 240ms var(--ease)}
.rb-bar{background:var(--ink);transform:scaleX(var(--rb-f,1));transform-origin:0 50%}
.rb-end{pointer-events:none;transform:translateX(calc((var(--rb-f,1) - 1) * 100%))}
.rb-end::after{content:'';position:absolute;right:-5px;top:50%;width:10px;height:10px;margin-top:-5px;border:2px solid var(--ink);border-radius:50%;background:var(--accent)}
.rb-value{flex:none;width:var(--rb-value);font-size:24px;line-height:32px;font-weight:600;text-align:right;color:var(--ink);border-radius:4px}

/* 3. Adjacent gaps: a plain button per club, a bracket to the next row and a written note. */
.bag tbody th{padding-top:4px;padding-bottom:4px}
.rb-club{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0;border:0;background:none;color:inherit;font:inherit;font-weight:600;text-align:left;white-space:nowrap}
.rb-club::before{content:'';flex:none;width:8px;height:8px;border:1.5px solid #8b8e80;border-radius:50%}
.rb-club[aria-pressed=true]::before{background:var(--accent);border-color:var(--ink)}
.rb-club:hover{text-decoration:underline;text-decoration-thickness:1px}
.rb-club:active{transform:none}
.bag tbody tr.rb-selected{background:#e4efc4}
.bag tbody tr.rb-next{background:#f1f6e3}
.bag .rb-gap-cell{position:relative}
.rb-has-next .rb-gap-value{opacity:0}
.rb-bracket,.rb-bracket-label{display:none;position:absolute;pointer-events:none}
.rb-bracket{z-index:2;left:2px;top:50%;width:8px;height:100%;border:2px solid var(--ink);border-left:0;border-radius:0 6px 6px 0}
.rb-bracket-label{z-index:3;right:4px;top:100%;transform:translateY(-50%);padding:2px 6px;font-size:12px;line-height:16px;font-weight:700;color:var(--ink);white-space:nowrap;background:var(--accent);border:1px solid var(--ink);border-radius:999px}
.rb-has-next .rb-bracket,.rb-has-next .rb-bracket-label{display:block}
.rb-gap-note{margin:12px 0 0;padding:12px 16px;border-left:3px solid var(--line);border-radius:0 8px 8px 0;background:var(--paper);font-size:14px;line-height:20px;color:var(--muted)}
.rb-gap-note.is-active{border-left-color:var(--ink);color:var(--ink)}
.rb-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* 4. Quick summary: both values stay in place, with a save route beside them. */
.quick>a{grid-column:auto}
.quick b{width:fit-content}

/* 5. Immediate feedback: one short highlight on values that changed. */
.rb-pulse{animation:rb-pulse 480ms var(--ease) 1}
@keyframes rb-pulse{from{background-color:#cde97dcc}to{background-color:#cde97d00}}

/* Narrow carry columns hide intermediate labels; gridlines still mark every interval. */
@media (max-width:600px),(min-width:801px) and (max-width:960px){
  .rb-tick[data-rank=minor] .rb-tick-label{display:none}
}
/* Narrow carry columns stack the value above a full-width track. */
@media (max-width:480px),(min-width:801px) and (max-width:960px){
  .rb-tick[data-rank=mid] .rb-tick-label{display:none}
  .rb-tick-unit{display:inline}
  .rb-axis-unit{display:none}
  .bag .rb-carry-head,.bag .rb-carry-cell{width:auto}
  .bag tbody td.rb-carry-cell{padding-top:8px;padding-bottom:8px}
  .rb-carry-cell::before{display:none}
  .rb-carry-wrap{display:grid;grid-template-columns:minmax(0,1fr);row-gap:4px}
  .rb-value{width:auto;justify-self:end;font-size:20px;line-height:24px}
  .rb-track{height:8px;background:linear-gradient(var(--ink),var(--ink)) left/2px 100% no-repeat,linear-gradient(#cfd2c4,#cfd2c4) right/1px 100% no-repeat,repeating-linear-gradient(to right,transparent 0 calc(var(--rb-step) - 1px),#cfd2c4 calc(var(--rb-step) - 1px) var(--rb-step)),#eef0e6}
  .rb-end::after{right:-4px;width:8px;height:8px;margin-top:-4px}
}
@media (max-width:800px){
  .bag{--rb-px:8px;--rb-gap:8px}
  .cc-hero-image{aspect-ratio:16/7;object-fit:cover;object-position:62% 64%}
  .rb-hero-card{width:auto;margin:-24px 16px 0 12px;padding:16px}
  .rb-hero-meta{gap:8px;margin-bottom:4px}
  .rb-hero-rows{gap:8px}
  .rb-hero-row b{font-size:14px}
}
@media (max-width:360px){
  .bag{--rb-px:4px;--rb-value:40px}
  .rb-value{font-size:18px}
  .rb-bracket-label{padding:1px 4px;font-size:11px}
  .rb-hero-card{padding:12px}
  .rb-hero-row{grid-template-columns:44px minmax(0,1fr)}
  .rb-hero-card .rb-hero-axis{margin-left:52px}
  .rb-hero-row dt{font-size:13px}
  .rb-hero-row b{left:calc(var(--rb-w) + 10px);font-size:13px}
  .rb-hero-card .rb-hero-note{font-size:11px}
}
@media (prefers-reduced-motion:reduce){
  .rb-bar,.rb-end{transition:none}
  .rb-pulse{animation:none}
}