/* Golf Bag sheet — one line per club (Claude Design "Golf bag UI simplification", turn 1b).
   Replaces the 12-cell four-field form editor. Rows are read-only 46px lines until tapped;
   tapping one spans it full width and opens the carry stepper in place. */

@keyframes gbIn{
  0%{transform:translate(0,0) scale(1,1) rotate(0deg);opacity:1}
  30%{transform:translate(calc(var(--dx,0px) * .3),calc(var(--dy,0px) * .26)) scale(.85,.96) rotate(calc(var(--rot,0deg) * .45));opacity:1}
  65%{transform:translate(calc(var(--dx,0px) * .7),calc(var(--dy,0px) * .66)) scale(.5,.86) rotate(calc(var(--rot,0deg) * .85));opacity:.94}
  100%{transform:translate(var(--dx,0px),var(--dy,0px)) scale(.16,.72) rotate(var(--rot,0deg));opacity:0}
}
@keyframes gbOut{
  0%{transform:translate(var(--dx,0px),var(--dy,0px)) scale(.16,.72) rotate(var(--rot,0deg));opacity:0}
  35%{transform:translate(calc(var(--dx,0px) * .7),calc(var(--dy,0px) * .66)) scale(.5,.86) rotate(calc(var(--rot,0deg) * .85));opacity:.94}
  72%{transform:translate(calc(var(--dx,0px) * .28),calc(var(--dy,0px) * .24)) scale(.86,.96) rotate(calc(var(--rot,0deg) * .42));opacity:1}
  100%{transform:translate(0,0) scale(1,1) rotate(0deg);opacity:1}
}
@keyframes gbPulse{
  0%{transform:scale(1);filter:drop-shadow(0 12px 24px rgba(0,0,0,.5))}
  35%{transform:scale(1.13) translateY(-4px);filter:drop-shadow(0 0 18px rgba(31,211,109,.85)) drop-shadow(0 12px 24px rgba(0,0,0,.5))}
  62%{transform:scale(.985) translateY(0);filter:drop-shadow(0 0 12px rgba(31,211,109,.5)) drop-shadow(0 12px 24px rgba(0,0,0,.5))}
  100%{transform:scale(1);filter:drop-shadow(0 12px 24px rgba(0,0,0,.5))}
}
@keyframes gbGlow{
  0%{opacity:0;transform:scale(.7)}
  35%{opacity:.55;transform:scale(1.05)}
  100%{opacity:0;transform:scale(1.35)}
}
@keyframes gbChipIn{
  0%{opacity:0;transform:scale(.4)}
  70%{opacity:1;transform:scale(1.08)}
  100%{opacity:1;transform:scale(1)}
}

/* The club art and the bag deliberately bleed past their boxes, so the sheet
   keeps its own scrolling (a tall bag still has to scroll) and buys the bleed
   room with bottom padding instead of turning overflow off. */
.gdBagSheet{padding-bottom:34px}

/* ---- header ---- */
.gdBagHeader{display:flex;align-items:center;gap:10px;margin-bottom:14px;position:relative}
.gdBagSheet .backBtn{width:42px;height:42px;flex:0 0 auto;border:0;border-radius:16px;padding:0;font-size:22px;font-weight:900;color:#fff;background:rgba(255,255,255,.1)}
.gdBagHeadText{flex:1;min-width:0;padding-right:112px}
.gdBagSheet .sheetTitle{font-size:24px;font-weight:950;letter-spacing:-.055em;line-height:1}
.gdBagSheet .sheetSub{margin-top:5px;color:rgba(255,255,255,.58);font-size:12px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gdBagGenChip{position:absolute;right:0;top:1px;display:flex;align-items:center;gap:6px;height:34px;border:1px solid rgba(126,255,174,.34);border-radius:999px;padding:0 12px;background:rgba(31,211,109,.13);color:#a8ffcd;font-size:11px;font-weight:950;letter-spacing:.02em;white-space:nowrap}
.gdBagGenChip[hidden]{display:none!important}
.gdBagGenChip span{font-size:13px;line-height:1}
.gdBagGenChip.gdBagChipPop{animation:gbChipIn .45s cubic-bezier(.2,.9,.3,1.2) both}
.gdBagGenChip.active{background:rgba(31,211,109,.24);border-color:rgba(126,255,174,.6)}

/* ---- roll-out (was soft / medium / hard "firmness") ---- */
.gdBagRollPanel{display:grid;gap:8px;margin:0 0 12px;padding:11px 12px;border-radius:16px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.09)}
.gdBagRollPanel[hidden]{display:none!important}
.gdBagRollNote{font-size:12px;font-weight:800;color:rgba(238,245,242,.62);line-height:1.35}
.gdBagFirmness{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:0}
.gdBagFirmness button{height:38px;border:1px solid rgba(255,255,255,.10);border-radius:12px;padding:0 10px;background:rgba(255,255,255,.075);color:#fff;font-size:12px;font-weight:950}
.gdBagFirmness button.active{background:linear-gradient(180deg,#1fd36d,#14a953);border-color:rgba(126,255,174,.56);color:#071008}

/* ---- stage: the generator and the club list share this box ----
   Only the EMPTY bag reserves a stage height. With clubs in it the list sets
   the height, and the generator no longer sits in the flow to need one. */
.gdBagStage{position:relative}
.gdBagStage:not(.hasBag){min-height:352px}

.gdBagGenPanel{display:grid;gap:16px;padding:18px 16px 20px;margin:2px 0 16px;border-radius:22px;background:#0d1410;border:1px solid rgba(255,255,255,.09);box-shadow:0 18px 40px rgba(0,0,0,.6);z-index:2;transform-origin:88% -30%;transition:transform .85s cubic-bezier(.2,.8,.3,1),opacity .55s ease-out}
/* The generator card belongs to the EMPTY bag only - it is the sheet's whole
   content and stays in the flow. A bag with clubs in it has generate mode
   instead (see the generate-mode block), where the list itself is the input. */
.gdBagGenPanel.folded{transform:translate(88px,-118px) scale(.28);opacity:0;pointer-events:none;transition:transform .4s cubic-bezier(.4,0,.7,.6),opacity .3s ease-in}
.gdBagGenQuestion{font-size:19px;font-weight:900;letter-spacing:-.03em;line-height:1.25;text-wrap:pretty}
.gdBagGenStepper{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:9px;align-items:center}
.gdBagGenStepper button{width:46px;height:52px;border:1px solid rgba(255,255,255,.12);border-radius:16px;background:rgba(255,255,255,.07);color:#fff;font-size:22px;font-weight:950;padding:0}
.gdBagGenValue{display:grid;justify-items:center;gap:2px;padding:6px 0;border-radius:16px;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.1)}
.gdBagGenValue span{font-size:34px;font-weight:950;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}
.gdBagGenValue small{font-size:10px;font-weight:950;letter-spacing:.12em;text-transform:uppercase;color:rgba(238,245,242,.44)}
.gdBagBuild{width:100%;border:0;border-radius:16px;padding:14px 10px;background:#1fd36d;color:#071008;font-size:15px;font-weight:950}

/* ---- column headings ---- */
.gdBagListHead{display:grid;grid-template-columns:1fr 1fr;column-gap:22px;padding:0 0 7px 9px;color:rgba(238,245,242,.34);font-size:9px;font-weight:950;letter-spacing:.10em;text-transform:uppercase}
.gdBagListHead[hidden]{display:none!important}
.gdBagListHead>div{display:grid;grid-template-columns:minmax(0,1fr) 34px 30px;gap:6px;padding:0 8px 0 28px}
.gdBagListHead span+span{text-align:right}

/* ---- club rows ---- */
.gdBagEditor{display:grid;grid-template-columns:1fr 1fr;column-gap:22px;row-gap:8px;margin:0 0 16px;padding-left:9px}
.gdBagRow{position:relative;border-radius:14px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07)}
.gdBagRow.editing{grid-column:1 / -1;background:rgba(31,211,109,.10)}
.gdBagRowArt{position:absolute;z-index:0;left:-1px;right:-1px;bottom:-1px;transform:translateY(50%);pointer-events:none}
.gdBagRowArt i{display:block;width:100%;background-size:100% 100%;background-repeat:no-repeat;filter:brightness(.07) drop-shadow(.4px 0 0 #fff) drop-shadow(-.4px 0 0 #fff) drop-shadow(0 .4px 0 #fff) drop-shadow(0 -.4px 0 #fff)}
.gdBagRowMain{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) 34px 30px;gap:6px;align-items:center;min-height:46px;padding:0 8px 0 28px;cursor:pointer}
.gdBagRowClub{font-size:15px;font-weight:900;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gdBagRowTotal{text-align:right;font-size:17px;font-weight:950;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.gdBagRowCarry{text-align:right;font-size:12px;font-weight:800;color:rgba(238,245,242,.38);font-variant-numeric:tabular-nums}

/* ---- inline row editor ---- */
.gdBagRowEdit{position:relative;z-index:1;display:grid;gap:9px;padding:11px 12px 13px;background:#0b1610;border-top:1px solid rgba(126,255,174,.16);border-radius:0 0 13px 13px}
/* The club's own name, editable in place. A generated bag arrives with names
   the player did not choose, so this sits ABOVE the carry stepper - same order
   as adding a club: what it is, then how far it goes. */
.gdBagRowName{display:grid;gap:4px}
.gdBagRowName span{color:rgba(238,245,242,.5);font-size:9px;font-weight:950;letter-spacing:.10em;text-transform:uppercase}
.gdBagRowName input{box-sizing:border-box;width:100%;border:1px solid rgba(255,255,255,.14);border-radius:12px;background:rgba(0,0,0,.3);color:#fff;padding:9px 11px;font-size:16px;font-weight:900}
.gdBagRowStep{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;align-items:center}
.gdBagRowStep>button{width:44px;height:44px;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:rgba(255,255,255,.07);color:#fff;font-size:20px;font-weight:950;padding:0}
.gdBagRowStep label{display:grid;gap:3px;justify-items:center}
.gdBagRowStep label span{color:rgba(238,245,242,.5);font-size:9px;font-weight:950;letter-spacing:.10em;text-transform:uppercase}
.gdBagRowStep input{box-sizing:border-box;width:88px;border:1px solid rgba(255,255,255,.14);border-radius:12px;background:rgba(0,0,0,.3);color:#fff;padding:8px;font-size:19px;font-weight:950;text-align:center}
.gdBagRowFoot{display:flex;justify-content:space-between;align-items:center;gap:10px}
.gdBagRowNote{font-size:12px;font-weight:800;color:rgba(238,245,242,.55)}
.gdBagRowActions{display:flex;gap:7px}
.gdBagRowRemove{height:34px;border:1px solid rgba(255,82,95,.28);border-radius:11px;padding:0 12px;background:rgba(255,82,95,.12);color:#ffdfe3;font-size:11px;font-weight:950}
.gdBagRowDone{height:34px;border:0;border-radius:11px;padding:0 16px;background:#1fd36d;color:#071008;font-size:11px;font-weight:950}

/* ---- footer ---- */
.gdBagFooter{position:relative;display:flex;align-items:center;justify-content:flex-start;gap:10px;min-height:44px}
.gdBagAddTab{flex:0 0 auto;white-space:nowrap;width:130px;height:36px;border:1px dashed rgba(255,255,255,.18);border-radius:16px;padding:0 10px;background:rgba(255,255,255,.045);color:rgba(238,245,242,.86);font-size:13px;font-weight:900}
.gdBagAddTab[hidden]{display:none!important}
/* ---- add a club: name first, then distance ---- */
.gdBagAddPanel{display:grid;gap:14px;padding:16px 14px 18px;margin:0 0 16px;border-radius:20px;background:#0d1410;border:1px solid rgba(126,255,174,.18);box-shadow:0 14px 32px rgba(0,0,0,.5)}
.gdBagAddPanel[hidden]{display:none!important}
.gdBagAddField{display:grid;gap:5px}
.gdBagAddField span{color:rgba(238,245,242,.5);font-size:9px;font-weight:950;letter-spacing:.10em;text-transform:uppercase}
.gdBagAddField input{box-sizing:border-box;width:100%;border:1px solid rgba(255,255,255,.14);border-radius:14px;background:rgba(0,0,0,.32);color:#fff;padding:12px 13px;font-size:19px;font-weight:900}
.gdBagAddPanel .gdBagBuild:disabled{opacity:.35}
/* The stepper's value is a real input here - the club is new, so the first
   number typed is a whole distance rather than a nudge off a known one. */
.gdBagAddPanel .gdBagGenValue input{width:100%;border:0;background:none;color:#fff;text-align:center;font-size:34px;font-weight:950;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums;padding:0}
.gdBagAddBack{justify-self:center;border:0;background:none;color:rgba(238,245,242,.6);font-size:12px;font-weight:900;padding:2px 8px}

/* ---- the add-a-club card ----
   It used to be part of the sheet's flow, appended after the list - so with a
   full bag the answer to "what is the club called?" was a scroll below
   thirteen rows, and the sheet grew by the card's whole height to hold a
   two-field question. It is the same card, floated over the sheet while the
   question is being answered: the clubs stay where they were, and dismissing
   the card leaves nothing behind.

   Anchored to the bottom because that is where the thumb is, and because the
   header - which says which bag this is, and carries the generator's own chip
   - has to stay readable behind them. */
/* Fixed, not absolute: the sheet scrolls, and a scrim that scrolls with it
   uncovers the list the moment the card is dragged past. */
.gdBagScrim{position:fixed;inset:0;z-index:5;background:rgba(3,7,5,.62)}
.gdBagScrim[hidden]{display:none!important}
.gdBagOverlayCard{position:fixed;z-index:6;left:14px;right:14px;bottom:14px;top:auto;margin:0 auto;width:auto;max-width:398px;max-height:min(74vh,460px);overflow:auto;box-shadow:0 22px 54px rgba(0,0,0,.7);transition:transform .3s cubic-bezier(.2,.8,.3,1),opacity .22s ease-out}
/* Folding an overlay card drops it back towards the footer it came from,
   rather than flying to the header chip the in-flow generator aims at. */
.gdBagOverlayCard.folded{transform:translateY(22px);opacity:0;pointer-events:none;transition:transform .22s cubic-bezier(.4,0,.7,.6),opacity .16s ease-in}
.gdBagOverlayCard .gdBagGenQuestion{font-size:17px}

.gdBagRollChip{flex:0 1 auto;min-width:0;white-space:nowrap;height:26px;border:1px solid rgba(255,255,255,.10);border-radius:999px;padding:0 10px;background:rgba(255,255,255,.07);color:rgba(238,245,242,.82);font-size:10px;font-weight:950;letter-spacing:.04em}
.gdBagArt{position:absolute;right:0;bottom:-14px;width:190px;height:88px;overflow:hidden;pointer-events:none;display:grid;justify-items:center}
.gdBagGlow{position:absolute;left:50%;top:34px;width:120px;height:120px;margin-left:-60px;border-radius:999px;background:radial-gradient(circle,rgba(31,211,109,.55),rgba(31,211,109,0) 68%);opacity:0}
.gdBagArt img{display:block;width:190px;transform-origin:50% 90%;filter:drop-shadow(0 12px 24px rgba(0,0,0,.5))}
.gdBagArt.pulsing img{animation:gbPulse .8s ease-out}
.gdBagArt.pulsing .gdBagGlow{animation:gbGlow .8s ease-out}

/* ---- generate mode ----
   The sheet takes the fill of the button that used to be the only way to
   generate anything, so the mode is unmistakable without a banner explaining
   it: green means every number you set rewrites the rest of the bag.

   Everything on the sheet flips to dark-on-green EXCEPT the input fields,
   which stay dark-filled with white text. That is the point of the whole
   treatment - the only things that still look like the normal sheet are the
   places you can type, so the eye lands on them. */
.gdBagSheet{transition:background .26s ease,border-color .26s ease,color .26s ease}
.gdBagSheet.gdBagGenMode{background:linear-gradient(180deg,#23dd75,#14a953);border-color:rgba(255,255,255,.42);color:#071008}

.gdBagGenMode .sheetTitle{color:#071008}
.gdBagGenMode .sheetSub{color:rgba(7,16,8,.66)}
.gdBagGenMode .backBtn{background:rgba(7,16,8,.14);color:#071008}
.gdBagGenMode .gdBagGenChip,
.gdBagGenMode .gdBagGenChip.active{background:#071008;border-color:rgba(7,16,8,.6);color:#a8ffcd}

.gdBagGenMode .gdBagListHead{color:rgba(7,16,8,.52)}
.gdBagGenMode .gdBagRow{background:rgba(7,16,8,.10);border-color:rgba(7,16,8,.16)}
.gdBagGenMode .gdBagRow.editing{background:rgba(7,16,8,.17)}
/* The club silhouettes are drawn dark with a white outline to lift them off
   the near-black sheet. On green the outline is the thing that reads wrong,
   so it comes off rather than the artwork. */
.gdBagGenMode .gdBagRowArt i{filter:brightness(.07) opacity(.5)}
.gdBagGenMode .gdBagRowCarry{color:rgba(7,16,8,.5)}

.gdBagGenMode .gdBagRowEdit{background:rgba(7,16,8,.12);border-top-color:rgba(7,16,8,.22)}
.gdBagGenMode .gdBagRowName span,
.gdBagGenMode .gdBagRowStep label span{color:rgba(7,16,8,.6)}
.gdBagGenMode .gdBagRowNote{color:rgba(7,16,8,.66)}
.gdBagGenMode .gdBagRowStep>button{background:rgba(7,16,8,.14);border-color:rgba(7,16,8,.2);color:#071008}
.gdBagGenMode .gdBagRowDone{background:#071008;color:#a8ffcd}
.gdBagGenMode .gdBagRowRemove{background:rgba(120,10,20,.16);border-color:rgba(90,8,16,.3);color:#3d0710}

.gdBagGenMode .gdBagAddTab{background:rgba(7,16,8,.08);border-color:rgba(7,16,8,.3);color:#071008}
.gdBagGenMode .gdBagRollChip{background:rgba(7,16,8,.12);border-color:rgba(7,16,8,.18);color:#071008}
.gdBagGenMode .gdBagRollPanel{background:rgba(7,16,8,.10);border-color:rgba(7,16,8,.16)}
.gdBagGenMode .gdBagRollNote{color:rgba(7,16,8,.66)}
.gdBagGenMode .gdBagFirmness button{background:rgba(7,16,8,.12);border-color:rgba(7,16,8,.18);color:#071008}
.gdBagGenMode .gdBagFirmness button.active{background:#071008;border-color:rgba(7,16,8,.6);color:#a8ffcd}

/* The exception, stated once: anything you can type into keeps its own dark
   fill in both modes. */
.gdBagGenMode .gdBagRowName input,
.gdBagGenMode .gdBagRowStep input{background:rgba(3,7,5,.86);border-color:rgba(7,16,8,.4);color:#fff}

@media(max-width:380px){
  .gdBagEditor,.gdBagListHead{column-gap:12px;padding-left:4px}
  .gdBagListHead>div,.gdBagRowMain{padding-left:22px}
  .gdBagHeadText{padding-right:104px}
}
@media(prefers-reduced-motion:reduce){
  .gdBagSheet{transition:none}
  .gdBagRow,.gdBagArt img,.gdBagGlow,.gdBagGenChip.gdBagChipPop{animation:none!important}
  .gdBagGenPanel{transition:opacity .18s ease}
  .gdBagGenPanel.folded,.gdBagOverlayCard.folded{transform:none;transition:opacity .18s ease}
}