/* You, checkout and claim pages. Loaded after style.css; every rule is scoped to those modes.
   Phone: one column in walkthrough order (waiting claims, reis, orders, pulls, night, preferences).
   Desktop: reis and pulls left; nights and preferences right. */

/* ---------- you: layout ---------- */
.mode-you .you-main>section,.mode-you .you-side>section{margin:0 0 8px}
.mode-you .you-main>section:first-child>.lbl:first-child{margin-top:18px}
.mode-you .head{padding-bottom:4px;border-bottom:1px solid var(--line)}
/* a person's name keeps its own capitals */
.mode-you .head .t{text-transform:none}

/* ---------- you: one grouped card per order ---------- */
.mode-you .order-card{padding:20px;margin:0 0 20px}
.mode-you .order-summary>*:first-child{margin-top:0}
.mode-you .order-counts{font-size:14.5px;color:var(--ink);margin:6px 0 0}
.mode-you .order-date{margin:4px 0 0}
.mode-you .thumbs{margin:16px 0 0}
.mode-you .order-card .voice-line{margin:16px 0 0}
/* Claim all sits under its summary with air on every side, never against text or a divider. */
.mode-you .order-card .claim-all{margin:24px 0 0}
.mode-you .order-card .note{margin:12px 0 0;text-align:left}
.mode-you .order-pending{margin:16px 0 0;padding:12px 14px;border:1px dashed var(--grey);font-size:13.5px;line-height:1.5;color:var(--muted)}
.mode-you .one-by-one{margin:20px 0 0}
.mode-you .one-by-one summary{min-height:52px}
.mode-you .one-by-one .row{gap:10px 12px;padding:12px 0}
.mode-you .one-by-one .row form{margin-left:auto}
.mode-you .single .claim-all{margin-top:20px}
.mode-you .single-rei .order-counts{margin-top:4px}

/* ---------- you: collection, orders, pulls ---------- */
.mode-you .owned-list .r1 a,.mode-you .order-card .r1 a{overflow-wrap:anywhere}
.mode-you .order-slot .r1{color:var(--ink)}
.mode-you .order-slot .r3{margin-top:4px;font-size:13px;line-height:1.45;color:var(--muted)}
.mode-you .earlier-orders{margin:18px 0 8px}
.mode-you .earlier-orders summary{display:flex;align-items:center;justify-content:space-between;min-height:48px;font-size:11px;letter-spacing:var(--track);text-transform:uppercase;color:var(--grey);cursor:pointer;list-style:none;border-top:1px solid var(--line)}
.mode-you .earlier-orders summary::-webkit-details-marker{display:none}
.mode-you .earlier-orders summary::after{content:"+";font-size:16px;line-height:1;color:var(--ink)}
.mode-you .earlier-orders[open] summary::after{content:"−"}
.mode-you .saved-pull{flex-wrap:nowrap}
.mode-you .saved-pull .body{flex:1 1 auto}
.mode-you .saved-pull .dot{width:10px;height:10px;flex:none}
.mode-you .saved-pull form{margin-left:0}

/* ---------- you: nights ---------- */
.mode-you .night .evt{padding:16px}
.mode-you .evt.closed{background:var(--soft)}
.mode-you .evt.closed .e1,.mode-you .evt.closed .e2{color:var(--muted)}
.mode-you .evt .e2 strong{font-weight:400;color:var(--ink)}
.mode-you .evt .e3{margin-top:8px}
.mode-you .evt-actions{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 0}
.mode-you .evt-actions .button{flex:1 1 140px}

/* ---------- you: preferences ---------- */
.mode-you .preferences .pref{margin:0;padding:14px 0;border-top:1px solid var(--line)}
.mode-you .preferences .pref:last-child{border-bottom:1px solid var(--line)}
.mode-you .pref-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.mode-you .pref-name{font-family:Georgia,serif;font-style:normal;font-size:16px;font-weight:400;margin:0;text-transform:none;letter-spacing:0}
.mode-you .pref-state{flex:none;font-family:var(--label);font-size:11px;letter-spacing:var(--track);text-transform:uppercase;color:var(--ink)}
.mode-you .pref.soon .pref-name,.mode-you .pref.soon .pref-state{color:var(--grey)}
.mode-you .pref-desc{margin:4px 0 0;font-size:13px;line-height:1.5;color:var(--grey)}
.mode-you .preferences .choice{margin:6px 0 2px}
.mode-you .preferences .button{margin-top:8px}
.mode-you .you-foot{margin:20px 0 0;font-size:13px;line-height:1.55;color:var(--grey)}
.mode-you .account-actions{margin-top:20px}

/* ---------- claim confirmations ---------- */
.mode-claim .lead,.mode-claim_all .lead,.mode-claim_all_failed .lead{font-size:15px;line-height:1.55}
.claim-count{margin-top:24px}
.claim-list .row{min-height:64px}
.claim-list .r1 a{overflow-wrap:anywhere}
.claim-list .flagged .r2{color:var(--ink)}
.claim-waiting{margin:16px 0 0}
.claim-confirm{margin:28px 0 0}
.mode-claim .note,.mode-claim_all .note{margin-top:14px}
/* An unusable link shows why and hides the dead button. */
#missing:not([hidden])~.claim-confirm{display:none}
#missing{margin:20px 0 0}
.claim-back{margin-top:24px}

/* ---------- checkout ---------- */
.mode-buy .band{height:8px}
.buy-confirm{margin:24px 0 0}

/* ---------- responsive ---------- */
@media(max-width:359px){
  .mode-you .order-card{padding:16px 14px}
  .mode-you .one-by-one .row form{flex:1 1 100%;margin-left:0}
  .mode-you .one-by-one .row form .button{width:100%}
}
@media(min-width:900px){
  .mode-you .you-grid{grid-template-columns:minmax(0,1fr) minmax(300px,360px);gap:64px;margin-top:12px}
  .mode-you .you-side>section:first-child>.lbl:first-child,.mode-you .you-side>.preferences:first-child>.lbl{margin-top:18px}
  .mode-you .order-card{padding:24px}
  /* Desktop: Claim all keeps its weight without spanning the whole card. */
  .mode-you .order-card .claim-all .button{width:auto;min-width:240px;display:inline-flex}
  .mode-you .order-card .claim-all{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
}

/* Bags lead; order details stay secondary. */
.mode-you .head .t{font-family:var(--voice);font-style:italic;font-weight:400;font-size:26px}
.mode-you .order-card{border:0;padding:0 0 20px;border-bottom:1px solid var(--line)}
.mode-you .order-title{font-size:11px;font-weight:400;color:var(--grey)}
.mode-you .thumbs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:none;margin:12px 0 0}
.mode-you .thumbs li{width:auto;height:auto;border:0;aspect-ratio:1;max-height:260px}
.mode-you .thumbs img{width:100%;height:100%;object-fit:contain}
.mode-you .one-by-one{margin-top:12px}
.mode-you .owned-list,.mode-claim_all .claim-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px;border:0}
.mode-you .owned-list .row,.mode-claim_all .claim-list .row{display:flex;flex-direction:column;align-items:stretch;border:0;padding:0;gap:8px;min-width:0}
.bag-image{display:block;aspect-ratio:1;text-decoration:none}
.mode-you .owned-list .row img,.mode-claim_all .claim-list .row img{display:block;width:100%;height:100%;object-fit:contain}
.mode-you .owned-list .r1,.mode-claim_all .claim-list .r1{font-size:11px;text-align:center;line-height:1.5}
.mode-you .owned-list .row:nth-child(-n+2){border:0}
@media(min-width:900px){.mode-you .owned-list,.mode-claim_all .claim-list{gap:24px}.mode-you .order-card{padding:0 0 24px}.mode-you .thumbs li{max-height:320px}}

.mode-you .owned-list .row .body,.mode-claim_all .claim-list .row .body{flex:0 0 auto}

/* Ready order: every waiting rei as one compact, labeled grid so the whole order and Claim all fit one screen.
   Scoped to .thumbs.ready-grid so it outranks the older thumbnail-strip rules above. */
.mode-you .thumbs.ready-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 12px;margin:12px 0 0}
.mode-you .thumbs.ready-grid li.ready-unit{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:6px;width:auto;height:auto;max-height:none;aspect-ratio:auto;border:0;min-width:0}
.mode-you .ready-grid .ready-image{position:relative;display:block;aspect-ratio:4/3;min-height:0;overflow:hidden}
.mode-you .thumbs.ready-grid .ready-image img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain}
.mode-you .ready-unit .r1{margin:0;text-align:center;font-size:11px;line-height:1.4;letter-spacing:.06em;text-transform:uppercase}
.mode-you .ready-unit .r1 a{text-decoration:none;overflow-wrap:anywhere}
.mode-you .ready-unit .r1 a:hover{text-decoration:underline}
.mode-you .order-card .claim-all{margin-top:18px}
.mode-you .one-by-one .row{min-height:52px}
@media(min-width:700px){.mode-you .thumbs.ready-grid{grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:18px 16px}.mode-you .ready-grid .ready-image{aspect-ratio:1}}
/* Claimed reis keep the same compact scale on desktop instead of two half-width bags per row. */
@media(min-width:900px){.mode-you .owned-list{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:24px 16px}}