/* "Make it yours" checklist card (Prompt 14 A6; Figma desktop open 1457:66042 / closed 1457:67418, tablet 2281:89525 / 2281:89626,
   mobile 2281:127369 / 2281:127493). Floating, bottom-right 32 from the edges on desktop and tablet; 16 sides on phones, just above the
   App / Tab Bar. Expanded: surface/default, border/subtle, radius lg (md on phones), Elevation/Card, 16 padding (12 phone), 16 gap,
   419 wide. Collapsed: accent/lime pill (border accent/lime-dark), 250×64, 12/16 padding, title + plus button. */
.gs{position:fixed;right:var(--space-32);bottom:calc(var(--space-32) + env(safe-area-inset-bottom));z-index:90;display:flex;justify-content:flex-end;max-width:calc(100vw - 32px)}
.gs[hidden],.gs [hidden]{display:none!important}
.gs-pill,.gs-card{box-sizing:border-box;background:var(--surface-default);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);color:var(--text-primary)}
.gs__title{margin:0;font:var(--text-xl);text-transform:uppercase;white-space:nowrap;color:var(--text-primary)}
.gs-pill{display:flex;align-items:center;justify-content:space-between;gap:var(--space-24);width:250px;height:64px;padding:var(--space-12) var(--space-16);background:var(--accent-lime);border-color:var(--accent-lime-dark);font:inherit;cursor:pointer;text-align:left}
.gs__icon{display:grid;place-items:center;width:40px;height:40px;border-radius:var(--radius-md);transition:background .2s}
.gs__icon svg,.gs-card .btn__icon{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.gs-pill:hover .gs__icon{background:var(--button-ghost-bg-hover)}
.gs-pill:focus-visible{outline:0;box-shadow:var(--shadow-card),var(--shadow-focus-ring-accent)}
.gs-card{display:flex;flex-direction:column;gap:var(--space-16);width:419px;max-width:100%;padding:var(--space-16);max-height:calc(100vh - 64px);overflow:auto}
.gs-card__head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-16);min-height:40px}
.gs-list{display:flex;flex-direction:column;gap:var(--space-8);margin:0;padding:0;list-style:none}

/* Checklist row (Default / Active / Done) */
.gs-row{position:relative;box-sizing:border-box;display:flex;align-items:center;gap:var(--space-12);padding:var(--space-12) var(--space-16);border:1px solid var(--border-default);border-radius:var(--radius-md);background:var(--surface-default)}
.gs-row__main{all:unset;box-sizing:border-box;flex:1;min-width:0;display:flex;align-items:center;gap:var(--space-12);cursor:pointer}
.gs-row__main::after{content:"";position:absolute;inset:0;border-radius:inherit}
.gs-row__main:focus-visible::after{box-shadow:var(--shadow-focus-ring-accent)}
.gs-row:hover{border-color:var(--border-strong)}
.gs-row__status{flex:none;display:grid;place-items:center;box-sizing:border-box;width:22px;height:22px;border:1.5px solid var(--card-divider);border-radius:var(--radius-10)}
.gs-row__status svg{display:none;width:14px;height:14px;fill:none;stroke:var(--neutral-0);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.gs-row__text{display:flex;flex-direction:column;gap:var(--space-2);min-width:0}
.gs-row__label{font:var(--text-mobile-sm);color:var(--text-primary)}   /* Mobile/12 text-sm 13/18 on every breakpoint (Figma) */
.gs-row__ctx{font:var(--text-article-caption);color:var(--text-secondary)}
.gs-row__action{position:relative;z-index:1;flex:none;display:none}
.gs-row.is-active{background:color-mix(in srgb,var(--accent-default) 12%,var(--surface-default));border-color:var(--accent-default)}   /* Figma fills it with card/staff-pick/shadow-tight (wrong token): accent tint kept */
.gs-row.is-active .gs-row__action{display:inline-flex}
.gs-row.is-done .gs-row__status{border:0;background:var(--accent-default)}
.gs-row.is-done .gs-row__status svg{display:block;stroke:var(--accent-text)}
.gs-row.is-done .gs-row__label{text-decoration:line-through}
.gs-row.is-done .gs-row__label,.gs-row.is-done .gs-row__ctx{opacity:.6}
.gs-row.is-done .gs-row__main{cursor:default}

/* All done (provisional, no frame yet) */
.gs-done{display:flex;flex-direction:column;align-items:center;gap:var(--space-12);text-align:center}
.gs-done__badge{display:grid;place-items:center;width:48px;height:48px;border-radius:var(--radius-full);background:var(--accent-default);color:var(--neutral-0)}
.gs-done__badge svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.gs-done__title{margin:0;font:var(--text-xl);text-transform:uppercase}

/* Open / close: 200 ms (opacity + height feel), none with reduced motion */
.gs-card.is-entering,.gs-pill.is-entering{animation:gs-in .2s var(--ease-out,ease) both;transform-origin:bottom right}
@keyframes gs-in{from{opacity:0;transform:translateY(8px) scaleY(.96)}to{opacity:1;transform:none}}

/* Phones: 358 wide (16 sides), just above the fixed App / Tab Bar (Figma card ends 94 from the bottom); radius md, 12 padding, Mobile/09 title */
@media (max-width:599px){
  .gs{left:var(--space-16);right:var(--space-16);bottom:calc(94px + env(safe-area-inset-bottom));max-width:none}   /* 94: tab bar 116 − 22 overlap in Figma; not a token */
  .gs-pill{width:250px;padding:var(--space-12)}
  .gs:has(.gs-pill:not([hidden])){bottom:calc(101px + env(safe-area-inset-bottom))}   /* collapsed pill: 101 from the bottom (Figma 2281:127365) */
  .gs-card{width:100%;max-height:calc(100dvh - 180px);padding:var(--space-12);border-radius:var(--radius-md)}
  .gs__title{font:var(--text-mobile-xl)}
}
@media (prefers-reduced-motion:reduce){.gs-card.is-entering,.gs-pill.is-entering{animation:none}}
@media print{.gs{display:none!important}}