/* The editor's own UI. Nothing here may change how the card itself looks: that lives in card.css,
   which the print page shares. Light only: the site keeps its colors in dark mode (Dan, 2026-10-01). */
:root{
  color-scheme:light;
  --ground:#E6EDF0; --panel:#FFFFFF; --panel-2:#F2F6F7; --line:#DBE4E8;
  --ink:#22303A; --muted:#5A6B76; --accent:#00B3CC; --accent-ink:#FFFFFF; --accent-soft:#EEFAFD;
  --link:#1668C1; --sky:#7CC7DD; --sky-dk:#4EA8C4;   /* the site's colors: public/css/ps-send.css (Dan, 2026-10-15) */
  --good:#1D7349; --good-soft:#DFF3E8; --warn:#9A4D05; --warn-soft:#FDEFD9; --danger:#B42318; --danger-soft:#FDECEA;
  --card-shadow:0 1px 2px rgba(22,32,52,.10),0 18px 40px -12px rgba(22,32,52,.30);
  --ui:"Lato UI",system-ui,-apple-system,"Segoe UI",sans-serif;
  /* type: the Dan Scale (claudeshared design/WEB-STYLE-GUIDE.md, Dan 2026-10-23; CLOUD-1228). Lato 400 and 700 only. */
  --fs-min:18px;      /* hints, meta, tags: nothing smaller */
  --fs-body:20px;     /* body, labels, inputs, buttons */
  --fs-section:24px;  /* sheet and dialog titles */
  --fs-title:26px;    /* the page's h1 */
  --lh-text:1.45; --lh-tight:1.2;
  --tap:44px;         /* every tap target */
}
@media (min-width:768px){ :root{ --fs-title:32px } }

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%;margin:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}   /* iOS would enlarge text when the phone is turned */
body{background:var(--ground);color:var(--ink);font-family:var(--ui);font-size:var(--fs-body);line-height:var(--lh-text)}
button{font-family:inherit;color:inherit;cursor:pointer}
button:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
svg{flex:none}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* CLOUD-1235: the blocked screen (js/gate.js). Old browsers read it, so plain CSS: no var(), gap, inset or clamp() */
.gate{max-width:560px;margin:0 auto;padding:48px 24px;font-family:"Lato UI",system-ui,sans-serif;color:#22303A}
.gate[hidden]{display:none}
.gate h1{margin:0 0 16px;font-size:26px;line-height:1.2;font-weight:700}
.gate p{margin:0 0 12px;font-size:20px;line-height:1.45}
#gate-gift{color:#5A6B76}

.app{height:100%;display:grid;grid-template-columns:320px minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);
  grid-template-areas:"top top" "side stage"}

/* header */
.top{grid-area:top;display:flex;align-items:center;gap:16px;padding:10px 16px;background:var(--panel);border-bottom:1px solid var(--line)}
.doc{flex:1;min-width:0;display:flex;align-items:center;gap:10px}
#card-name{min-width:0;width:min(320px,100%);min-height:var(--tap);font:700 var(--fs-body)/1.2 var(--ui);color:var(--ink);background:transparent;border:1px solid transparent;
  border-radius:7px;padding:7px 9px}
#card-name:hover{border-color:var(--line)}
#card-name:focus{border-color:var(--accent);outline:0;background:var(--panel)}
.status{font-size:var(--fs-min);color:var(--muted);white-space:nowrap}
.status.dirty{color:var(--warn)}
.actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.btn{display:inline-flex;align-items:center;gap:6px;font:700 var(--fs-body)/1.2 var(--ui);min-height:var(--tap);padding:9px 14px;border-radius:7px;
  border:1px solid var(--sky-dk);background:var(--panel);color:var(--ink);text-decoration:none;white-space:nowrap}
.btn:hover{background:var(--panel-2)}
.btn:disabled{opacity:.5;cursor:default}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);box-shadow:inset 0 -2px 0 rgba(0,0,0,.12)}
.btn.primary:hover{filter:brightness(1.07)}
.btn svg{width:20px;height:20px}

/* sidebar: the card's delivery and design, or the photo editor */
.side{grid-area:side;background:var(--panel);border-right:1px solid var(--line);overflow:auto;min-height:0;padding:16px;display:flex;flex-direction:column}
.lib{display:flex;flex-direction:column;gap:22px}
.sec{display:flex;flex-direction:column;gap:10px}
.sec-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.sec-h h2{margin:0;font-size:var(--fs-min);font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.sec-h span{font-size:var(--fs-min);color:var(--muted);font-variant-numeric:tabular-nums}
.link{display:inline-flex;align-items:center;min-height:var(--tap);border:0;background:none;padding:0;font:700 var(--fs-body)/1.2 var(--ui);color:var(--link);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}

.designs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.design{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 4px 8px;border-radius:10px;
  border:1px solid var(--line);background:var(--panel);text-align:center}
.design:hover{background:var(--panel-2)}
.design[aria-pressed="true"]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);background:var(--accent-soft)}
.design-thumb{height:66px;display:flex;align-items:center;justify-content:center}
.design .nm{font-size:var(--fs-min);font-weight:700;line-height:var(--lh-tight)}
.design .ct{font-size:var(--fs-min);color:var(--muted)}

.side-note{font-size:var(--fs-min);line-height:1.5;color:var(--muted);margin:0}

.editor{display:flex;flex-direction:column;flex:1}
.ed-top{display:flex;justify-content:space-between;align-items:center;gap:8px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.back{display:flex;align-items:center;gap:6px;min-height:var(--tap);border:0;background:none;padding:0;font:700 var(--fs-body)/1.2 var(--ui);color:var(--link)}
.back svg,.x svg{width:20px;height:20px}
.x{display:grid;place-items:center;width:var(--tap);height:var(--tap);border:0;border-radius:8px;background:none}
.x:hover{background:var(--panel-2)}
.ed-photo{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);min-width:0}
.ed-photo img{width:52px;height:52px;object-fit:cover;border-radius:6px;flex:none}
.ed-photo div{display:flex;flex-direction:column;gap:3px;min-width:0}
.ed-photo b{font-size:var(--fs-min);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ed-photo span{font:400 var(--fs-min)/1.3 var(--ui);color:var(--muted)}
.ed-row{display:flex;flex-direction:column;gap:10px;padding:14px 0;border-bottom:1px solid var(--line)}
.ed-h{display:flex;justify-content:space-between;align-items:center;gap:8px}
.ed-h h3{margin:0;font-size:var(--fs-min);font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.ed-val{font-size:var(--fs-min);color:var(--muted)}
.ed-row p{margin:0;font-size:var(--fs-min);line-height:1.5;color:var(--muted)}
.stepper{display:flex;align-items:center;gap:4px}
.stepper button{display:grid;place-items:center;width:var(--tap);height:var(--tap);border:1px solid var(--line);border-radius:7px;background:var(--panel)}
.stepper button:hover{background:var(--panel-2)}
.stepper button svg{width:18px;height:18px}
.stepper output{min-width:60px;text-align:center;font:400 var(--fs-min)/1 var(--ui);font-variant-numeric:tabular-nums}
#z-range{width:100%;accent-color:var(--accent)}
.filters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.flt{display:flex;flex-direction:column;align-items:center;gap:5px;padding:0;border:0;background:none;font:400 var(--fs-min)/1.2 var(--ui);color:var(--muted)}
.flt img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:6px;border:2px solid transparent;display:block}
.flt:hover img{border-color:var(--line)}
.flt[aria-checked="true"]{color:var(--ink);font-weight:700}
.flt[aria-checked="true"] img{border-color:var(--ink)}
.chip{font:700 var(--fs-min)/1 var(--ui);padding:6px 8px;border-radius:6px;white-space:nowrap;font-variant-numeric:tabular-nums}
.chip.good{background:var(--good-soft);color:var(--good)}
.chip.low{background:var(--warn-soft);color:var(--warn)}
.ed-actions{gap:2px}
.ed-actions button{display:flex;align-items:center;gap:10px;min-height:var(--tap);border:0;background:none;padding:0;font:700 var(--fs-body)/1.2 var(--ui);text-align:left}
.ed-actions button svg{width:20px;height:20px}
.ed-actions button:disabled{opacity:.4;cursor:default}
.ed-actions .danger{color:var(--danger)}
.done{margin-top:auto;width:100%;padding:13px;border:0;border-radius:8px;background:var(--ink);color:var(--panel);
  font:700 var(--fs-body)/1 var(--ui);letter-spacing:.12em;text-transform:uppercase}
.ed-spacer{height:16px;flex:none}

/* stage */
.stage{grid-area:stage;display:flex;flex-direction:column;min-height:0;min-width:0;padding:16px;gap:12px;position:relative}
/* only the character count, the swap prompt and warnings; floats over the stage so the card never moves */
#hint{position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:6;max-width:calc(100% - 32px);
  display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;text-align:center;
  padding:6px 14px;border:1px solid var(--line);border-radius:999px;background:var(--panel);box-shadow:0 4px 14px rgba(0,0,0,.08);
  color:var(--muted);font-size:var(--fs-min);line-height:var(--lh-text);text-wrap:balance}
#hint:empty{display:none}
#hint strong{color:var(--ink);font-weight:700}
/* the card sits at the top: room it doesn't use is left below it, not split above and below (Dan, 2026-10-01) */
#card-host{flex:1;min-height:0;display:flex;align-items:flex-start;justify-content:center}
/* banners over the card (GGS-74): problems that last until dealt with or dismissed, unlike the toast */
#banners{display:flex;flex-direction:column;gap:8px;align-items:center;flex:none}
.banner{display:flex;align-items:center;gap:10px;width:min(100%,720px);padding:8px 8px 8px 14px;border-radius:10px;
  border:1px solid #F3C4BF;background:var(--danger-soft);color:var(--danger);font-size:var(--fs-min);line-height:var(--lh-text);font-weight:700}
.banner > svg{width:20px;height:20px}
.banner > span{flex:1;min-width:0;text-wrap:pretty}
.banner .x{flex:none;color:var(--danger)}
.banner .x:hover{background:#F8D7D3}
.banner .x svg{width:16px;height:16px}

/* steps 1 and 2 of a new card: full-width pages in place of the workspace */
/* steps 1 and 2 have no header: the steps list says where you are */
.app.flowing .side,.app.flowing .stage,.app.flowing .ws-only,.app.flowing .top{display:none!important}
.flow{grid-column:1/-1;grid-row:1/-1;overflow:auto;min-height:0;padding:28px 16px 48px}
.flow-inner{max-width:1040px;margin:0 auto;display:flex;flex-direction:column;gap:24px}
.flow-head h1{margin:0;font-size:var(--fs-title);line-height:var(--lh-tight);font-weight:700;letter-spacing:-.015em;text-wrap:balance}
.flow-head p{margin:6px 0 0;font-size:var(--fs-body);line-height:var(--lh-text);color:var(--muted);max-width:62ch}
/* heading and its one-line explanation side by side (they wrap on narrow screens) */
.flow-head.inline{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px}
.flow-head.inline p{margin:0}
.flow-head.one-line{display:flex;align-items:baseline;gap:10px;min-width:0}
.flow-head.one-line h1{flex:none}
.flow-head.one-line p{margin:0;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.narrow-only{display:none}
.steps{display:flex;flex-wrap:wrap;gap:6px 22px;list-style:none;margin:0;padding:0;font-size:var(--fs-min);color:var(--muted)}
.steps li{display:flex;align-items:center;gap:8px}
.steps b{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1.5px solid var(--line);font:700 var(--fs-min)/1 var(--ui)}
.steps .is-current{color:var(--ink);font-weight:700}
.steps .is-current b{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.steps .is-done b{border-color:var(--accent);color:var(--link)}

.design-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr));gap:18px}
.pick-design{display:flex;flex-direction:column;align-items:center;gap:14px;padding:26px 16px 18px;border-radius:14px;
  border:1px solid var(--line);background:var(--panel);text-align:center;transition:border-color .12s,box-shadow .12s}
.pick-design:hover{border-color:var(--accent);box-shadow:0 8px 24px -12px rgba(22,32,52,.35)}
.pick-design[aria-pressed="true"]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.pick-design .pv{height:260px;display:flex;align-items:center;justify-content:center}
.pick-design .pv-img{display:block;flex:none;background:#E8EAED;box-shadow:0 1px 2px rgba(0,0,0,.18),0 4px 10px -4px rgba(0,0,0,.25)}
.pick-design .nm{font-size:var(--fs-body);line-height:var(--lh-tight);font-weight:700}
.pick-design .ct{font-size:var(--fs-min);color:var(--muted)}

.up-status{margin:-10px 0 0;min-height:1.4em;font-size:var(--fs-min);color:var(--muted)}
.flow-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-top:6px;border-top:1px solid var(--line)}
.flow-foot .link{margin-right:auto}
.saved-cards{display:flex;flex-direction:column;margin-right:auto}
.saved-cards small{font-size:var(--fs-min);color:var(--muted)}
.flow-head .saved-cards{margin:0 0 0 auto;align-self:center;white-space:nowrap}   /* "Open a saved card" beside Pick a design */
.edit-tip{margin:10px 0 0;font-size:var(--fs-min);color:var(--muted)}
.gift .edit-tip{display:none}

/* interactive layer over the card (colors here sit on paper, so they stay fixed in both themes) */
.card.edit{box-shadow:var(--card-shadow)}
.card.edit .slot{cursor:pointer;outline:0 solid transparent;transition:outline-color .12s}
.slot > img.src{display:block;max-width:none}
.slot.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.7em}
.add-hint{max-width:84%;text-align:center;font-size:max(18px,.92em);line-height:1.35;color:#3F4854}
.safe-guide{position:absolute;z-index:3;pointer-events:none;outline:1px dashed rgba(20,24,30,.5);box-shadow:0 0 0 1px rgba(255,255,255,.35)}
.add-pill{display:flex;align-items:center;gap:.45em;min-height:var(--tap);padding:.3em .9em;border-radius:999px;background:#3D5454;color:#fff;
  font:700 max(18px,1em)/1 var(--ui);letter-spacing:.01em;white-space:nowrap;box-shadow:0 2px 6px rgba(0,0,0,.18)}
.add-pill svg{width:1.05em;height:1.05em}
/* a spot narrower than the pill at 18 px (three across on a phone): the plus above the words, which wrap */
.card.edit .slot.empty{container-type:inline-size}
@container (max-width:150px){
  .add-pill{flex-direction:column;gap:.15em;max-width:calc(100% - 8px);padding:.35em .5em;border-radius:12px;white-space:normal;text-align:center;line-height:1.1}
}
.slot.selected{outline:3px solid var(--accent);outline-offset:3px}
.slot.swap-src,.slot.drop-target{outline:3px dashed var(--accent);outline-offset:3px}
/* while swapping, every spot shows its number, so "Tap the spot to swap with spot 2" can be followed (CLOUD-1229 B3) */
.card.swapping .slot::before{content:attr(data-num);position:absolute;left:6px;top:6px;z-index:8;display:grid;place-items:center;width:36px;height:36px;
  border-radius:50%;background:var(--ink);color:#fff;font:700 var(--fs-min)/1 var(--ui);box-shadow:0 1px 4px rgba(0,0,0,.3);pointer-events:none}
.card.swapping .slot.swap-src::before{background:var(--accent)}
.slot.drop-target::after{content:"";position:absolute;inset:0;z-index:5;background:rgba(0,179,204,.25)}
.slot:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.lowres{position:absolute;left:8px;bottom:8px;z-index:4;display:flex;align-items:center;gap:4px;padding:4px 7px;border-radius:5px;
  background:#FFF1D6;color:#7C3F04;font:700 var(--fs-min)/1 var(--ui);pointer-events:none;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.lowres svg{width:16px;height:16px}
/* a spot with a problem (GGS-74): a photo the print server couldn't draw, a photo that didn't come back from this
   device, or a file that couldn't be used. Red outline, the reason, and a button to choose another photo. */
.card.edit .slot.has-error{outline:3px solid #B42318;outline-offset:3px}
.slot.has-error .lowres{display:none}
.slot-err{position:absolute;left:6px;right:6px;bottom:6px;z-index:7;display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  padding:7px 8px;border-radius:6px;background:#FDECEA;color:#B42318;font:700 max(18px,.85em)/1.25 var(--ui);
  box-shadow:0 1px 3px rgba(0,0,0,.25);cursor:default}
.slot-err.in-empty{position:static;align-items:center;text-align:center;max-width:88%;background:rgba(253,236,234,.92)}
.se-msg{display:flex;align-items:flex-start;gap:5px}
.se-msg svg{width:1.05em;height:1.05em;margin-top:.1em}
.se-name{max-width:100%;font-weight:400;color:#7A2E26;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.se-act{min-height:var(--tap);padding:.2em .8em;border:0;border-radius:999px;background:#B42318;color:#fff;font:inherit;font-weight:700;white-space:nowrap;cursor:pointer}
.se-act:hover{filter:brightness(1.08)}
.se-act:focus-visible{outline:2px solid #B42318;outline-offset:2px}
.slot-err.tight{left:3px;right:3px;bottom:3px;gap:4px;padding:5px;font-size:var(--fs-min)}
.slot-err.tight.in-empty{max-width:94%}
.slot-err.tight .se-act{align-self:stretch;white-space:normal;padding:.45em .3em;text-align:center}
/* Cropper.js restyled to act as a fixed photo window: no outline or tint, and a rule-of-thirds grid only while selected */
.slot .cropper-view-box{outline:0}
/* Cropper's stylesheet turns off EXIF orientation; the print page honours it, so the editor must too */
.slot .cropper-container img{image-orientation:from-image}
.slot .cropper-face{background:transparent}
.slot .cropper-move{cursor:grab}
.slot .cropper-move:active{cursor:grabbing}
.slot .cropper-dashed{border-style:solid;border-color:rgba(255,255,255,.75);opacity:0;transition:opacity .15s}
.slot.selected .cropper-dashed{opacity:.9}
.card.edit .card-text{border-radius:3px;outline:1.5px dashed transparent;outline-offset:2px;cursor:text}
.card.edit .card-text:hover{outline-color:rgba(214,140,36,.9)}
.card.edit .card-text:focus{outline:1.5px solid #D68C24}
/* an empty box shows its starter text in grey (CLOUD-1216): not text, so never saved or drawn */
.card.edit .card-text.blank::before{content:attr(data-placeholder);opacity:.45;pointer-events:none}
.card.mini{box-shadow:0 1px 2px rgba(0,0,0,.18),0 4px 10px -4px rgba(0,0,0,.25);pointer-events:none}
.card.mini .slot{background:#C9CDD3}
.card.mini .slot.filled{background:#8F97A2}

/* upload progress: one bar for every upload (picker, dropped files, samples), above the toast */
#upbar{position:fixed;left:50%;bottom:calc(76px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:61;
  display:flex;flex-direction:column;gap:8px;width:min(420px,calc(100% - 32px));padding:12px 16px;border-radius:10px;
  background:var(--panel);border:1px solid var(--line);box-shadow:0 8px 24px rgba(0,0,0,.2);font:700 var(--fs-body)/1.3 var(--ui);color:var(--ink)}
#upbar .track{display:block;height:8px;border-radius:4px;background:var(--panel-2);overflow:hidden}
#upbar .fill{display:block;height:100%;width:0;border-radius:4px;background:var(--accent);transition:width .2s}
/* toast and dialogs */
#toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:60;
  background:var(--ink);color:var(--ground);padding:10px 14px;border-radius:9px;font-size:var(--fs-body);max-width:calc(100% - 32px);
  box-shadow:0 8px 24px rgba(0,0,0,.25);line-height:var(--lh-text)}
#toast.error{background:var(--danger);color:#fff}
.overlay{position:fixed;inset:0;z-index:50;background:rgba(10,12,16,.62);display:grid;place-items:center;padding:16px}
/* CLOUD-1238: a dialog fills the visible area, which an iPhone's keyboard makes shorter than the screen (editor.js) */
.overlay{top:var(--vis-top,0);bottom:auto;height:var(--vis-h,100%)}
.short .overlay{padding:8px}
.short #name-dlg .nd-sub,.short #name-dlg .nd-keep{display:none}
.short #name-dlg .sheet{gap:10px;padding:16px}
.short #name-dlg .nd-field{margin:0}
.sheet{width:100%;max-width:1000px;max-height:100%;overflow:auto;background:var(--panel);border-radius:14px;padding:20px;
  display:flex;flex-direction:column;gap:14px;box-shadow:0 24px 60px rgba(0,0,0,.4)}
.sheet > *{flex-shrink:0}
.sheet.narrow{max-width:620px}
.sheet-h{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.sheet-h h2{margin:0;font-size:var(--fs-section);line-height:var(--lh-tight);font-weight:700}
.sheet-h p{margin:3px 0 0;font-size:var(--fs-min);color:var(--muted)}
.sheet-actions{display:flex;gap:8px}
.sheet h3{margin:0;font-size:var(--fs-min);font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.proof-wrap{position:relative;min-height:120px;border:1px solid var(--line);background:var(--panel-2)}
.proof{display:block;width:auto;max-width:100%;height:auto;margin:0 auto}   /* fitProof() caps its height on a short screen */
.card-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;border-top:1px solid var(--line)}
.card-list li{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--line)}
.card-list .cthumb{width:84px;height:60px;flex:none;border-radius:6px;background:var(--panel-2);object-fit:contain}
.card-list .cmeta{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.card-list b{font-size:var(--fs-body);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card-list span{font-size:var(--fs-min);color:var(--muted)}
.card-list .current{font-size:var(--fs-min);font-weight:700;color:var(--link);letter-spacing:.06em;text-transform:uppercase}
.card-list .empty-note{justify-content:center;color:var(--muted);font-size:var(--fs-min);padding:24px 0}
/* round 3 (board 3b): deletion dates; one due within a week stands out */
.card-list .soon-del{color:#9A4D05;font-weight:700}
.cd-keep{margin:12px 0 0;font-size:var(--fs-min);color:var(--muted)}
/* round 3 (board 3a): the name prompt */
.nd-sub,.nd-keep{margin:0;font-size:var(--fs-min);color:var(--muted)}
.nd-field{display:flex;flex-direction:column;gap:6px;font-size:var(--fs-body);font-weight:700;color:var(--muted);margin:14px 0}
.nd-field input{font:inherit;font-size:var(--fs-body);font-weight:400;color:var(--ink);padding:11px 12px;border:1.5px solid var(--line);border-radius:8px}
.nd-field input:focus{outline:none;border-color:var(--accent)}
#name-dlg .sheet-actions{margin-bottom:12px}

/* step 1: delivery */
.soon{font:700 var(--fs-min)/1 var(--ui);font-style:normal;padding:4px 7px;border-radius:999px;background:var(--warn-soft);color:var(--warn)}


/* step 2: occasion tabs and search, as browser tabs: the selected tab is outlined and joins the panel of designs
   below it. How soon a seasonal tab's event is shows in its weight and badge, from p4 (under way) to p0 (just passed) */
.browse{display:flex;align-items:flex-end;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;border-bottom:1px solid var(--line)}
.tabs-wrap{position:relative;display:flex;flex:0 1 auto;min-width:0}
/* the row scrolls sideways when the occasions don't fit; 1px of padding keeps the selected tab joined to the panel */
.tabs{display:flex;align-items:flex-end;flex:0 1 auto;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
  padding-bottom:1px;margin-bottom:-1px;scroll-behavior:smooth}
.tabs::-webkit-scrollbar{display:none}
.tabs-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:var(--tap);height:var(--tap);padding:0;display:flex;
  align-items:center;justify-content:center;border:1px solid var(--line);border-radius:50%;background:var(--panel);color:var(--ink);
  box-shadow:0 2px 8px rgba(22,32,52,.18)}
.tabs-arrow.prev{left:-6px}
.tabs-arrow.next{right:-6px}
.tab{position:relative;display:flex;align-items:center;gap:7px;border:1px solid transparent;border-bottom:0;border-radius:10px 10px 0 0;
  margin-bottom:-1px;min-height:48px;background:none;padding:10px 14px 12px;font:400 var(--fs-body)/1 var(--ui);color:var(--muted);white-space:nowrap}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{background:var(--panel);border-color:var(--line);color:var(--ink);font-weight:700}
.tab:not([aria-selected="true"]) + .tab:not([aria-selected="true"])::before{content:"";position:absolute;left:-1px;top:30%;height:40%;width:1px;background:var(--line)}
.tab small{font:700 var(--fs-min)/1 var(--ui);padding:3px 6px;border-radius:999px;background:var(--panel-2);color:var(--muted);font-variant-numeric:tabular-nums}
.tab.p2{color:var(--ink)}
.tab.p2 small{background:var(--accent-soft);color:var(--link)}
.tab.p3,.tab.p4{color:var(--ink);font-weight:700}
.tab.p3 small,.tab.p4 small{background:var(--accent);color:var(--accent-ink)}
.tab.p0{opacity:.7}
.tab.p0 small{background:none;border:1px dashed var(--line)}
.tab-sep{width:14px;flex:none}
.tab-sep + .tab::before{display:none}
.tab-panel{display:flex;flex-direction:column;gap:16px;margin-top:-24px;padding:18px;background:var(--panel);border:1px solid var(--line);border-top:0;border-radius:0 0 14px 14px}
.tab-panel .pick-design{background:var(--panel-2);border-color:transparent}
.tab-panel .pick-design:hover,.tab-panel .pick-design[aria-pressed="true"]{border-color:var(--accent)}
/* the workspace's design: just the one on the card */
.design-row{display:flex;align-items:center;gap:12px;width:100%;border:0;background:none;padding:0;margin:0;text-align:left;font:inherit;color:inherit;cursor:pointer}
.design-row > .design-thumb{height:auto;flex:none}
.design-row > div{display:flex;flex-direction:column;gap:3px;min-width:0}
.design-row b{font-size:var(--fs-body)}
.design-row .spec{font-size:var(--fs-min);color:var(--muted);line-height:1.4}
.dr-change,.dr-chev{display:none}
.palettes{display:flex;align-items:center;gap:6px;margin-top:10px;flex-wrap:wrap}
.pal{width:26px;height:26px;border-radius:50%;border:1px solid var(--line);background:var(--bg);position:relative;cursor:pointer;padding:0}
.pal::after{content:"";position:absolute;inset:8px;border-radius:50%;background:var(--fg)}
.pal[aria-checked="true"]{box-shadow:0 0 0 2px var(--panel),0 0 0 4px var(--accent)}
#palette-name{font-size:var(--fs-min);color:var(--muted);margin-left:4px}
/* a color is a 26 or 32 px dot; its tap area reaches 44 px */
.pal::before{content:"";position:absolute;inset:calc((26px - var(--tap)) / 2);border-radius:50%}
.pdots{display:flex;gap:4px;justify-content:center;margin:2px 0 4px}
.pdots i{width:10px;height:10px;border-radius:50%;border:1px solid var(--line)}
.search{display:flex;align-items:center;gap:8px;margin-bottom:8px;padding:0 12px;height:48px;border:1px solid var(--line);border-radius:8px;
  background:var(--panel);flex:0 1 220px;min-width:160px}
.search:focus-within{border-color:var(--accent);outline:2px solid var(--accent-soft)}
.search svg{width:20px;height:20px;color:var(--muted)}
.search input{border:0;background:none;outline:0;font:var(--fs-body) var(--ui);color:var(--ink);width:100%;min-width:0}

/* a GIF in the tray while print is chosen */

/* step 2: the count and the Filters button above the designs; the filters themselves are in a dialog */
.design-bar{display:flex;align-items:center;justify-content:space-between;gap:12px}
.filter-btn{display:inline-flex;align-items:center;gap:6px;flex:none;min-height:var(--tap);border:0;background:none;padding:0 2px;font:700 var(--fs-body)/1 var(--ui);color:var(--link)}
.filter-btn svg{width:20px;height:20px}
.filter-btn.on{color:var(--link)}
.design-filters{display:flex;flex-direction:column;gap:18px}
.fgroup{display:flex;flex-direction:column;gap:8px}
.fgroup > span{font-size:var(--fs-min);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.fgroup > div{display:flex;flex-wrap:wrap;gap:8px}
.fchip{min-height:var(--tap);min-width:var(--tap);border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:0 14px;font:700 var(--fs-min)/1 var(--ui);font-variant-numeric:tabular-nums}
.sheet-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:14px;border-top:1px solid var(--line)}
#filter-dlg .sheet{max-width:440px}
#filter-note:empty{display:none}
.fchip:hover{border-color:var(--accent)}
.fchip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.design-count{margin:0;font-size:var(--fs-min);line-height:var(--lh-text);color:var(--muted)}
.design-count .link{margin-left:6px}
.design-grid .empty-note{grid-column:1/-1;color:var(--muted);font-size:var(--fs-min);margin:24px 0;text-align:center}
.specs{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px;width:100%;margin:0;padding:10px 0 0;border-top:1px solid var(--line)}
.specs div{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0}
.specs dt{font-size:var(--fs-min);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.specs dd{margin:0;font-size:var(--fs-body);font-weight:700;font-variant-numeric:tabular-nums;display:flex;flex-direction:column;align-items:center}
.specs small{font-size:var(--fs-min);font-weight:400;color:var(--muted)}
.fmts{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.fmt{font-size:var(--fs-min);padding:3px 7px;border-radius:5px;border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.fmt.on{border-color:transparent;background:var(--accent-soft);color:var(--link);font-weight:700}
.pick-design .brief{display:none;font-size:var(--fs-min);line-height:1.35;color:var(--muted)}

/* text over the delivery's limit (after print was added), and the character counter */
.card.edit .card-text.over{outline:2px dashed var(--danger);outline-offset:2px}
#hint .warn{display:inline-flex;align-items:center;gap:6px;color:var(--danger)}
#hint .warn svg{width:16px;height:16px}
#hint strong.over{color:var(--danger)}
#hint .soft-note,.ts-note{color:var(--muted);font-style:italic;text-wrap:balance}   /* a wrapped line is balanced (Dan's rule) */
.ts-note{margin:0;font-size:var(--fs-min);line-height:1.35;text-align:center}

/* proof (Dan, 2026-10-16): Next opens it; the one image the card's delivery uses, a progress bar while it saves and
   renders, then Edit card or Next. No sizes, files or layout JSON: those were for building the prototype. */
#proof{flex-direction:row-reverse}
.proof-sheet{gap:14px}
.proof-busy{display:flex;flex-direction:column;justify-content:center;gap:12px;min-height:220px;padding:24px;border:1px solid var(--line);
  border-radius:8px;background:var(--panel-2);font-size:var(--fs-body);font-weight:700;color:var(--ink)}
.proof-busy .track{display:block;height:8px;border-radius:4px;background:var(--panel);overflow:hidden}
.proof-busy .fill{display:block;height:100%;width:0;border-radius:4px;background:var(--accent);transition:width .4s ease-out}
.proof-busy .fill.slow{transition:width 8s cubic-bezier(.1,.6,.3,1)}   /* the render has no progress of its own: ease toward 90% */
.proof-out{margin:0}
.proof-err{margin:0;padding:12px 14px;border-radius:8px;background:var(--danger-soft);color:var(--danger);font-size:var(--fs-body)}
.proof-note{margin:0;padding:10px 12px;border-radius:8px;background:var(--warn-soft);color:var(--warn);font-size:var(--fs-min)}
.proof-actions{display:flex;justify-content:flex-end;gap:10px}
.proof-actions .btn{min-height:48px;padding:0 20px;font-size:var(--fs-body);justify-content:center}
@media (max-width:760px){ .proof-actions .btn{flex:1;min-height:52px} }

/* the photo picker */
.ph-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;margin-top:14px}
.ph-pick{position:relative;display:flex;flex-direction:column;gap:5px;padding:4px;border:2px solid transparent;border-radius:10px;background:none;text-align:left;min-width:0}
.ph-pick:hover:not(:disabled){border-color:var(--accent)}
.ph-pick.current{border-color:var(--accent);background:var(--accent-soft)}
.ph-pick:disabled{cursor:not-allowed}
.ph-pick:disabled img{opacity:.35;filter:grayscale(1)}
.ph-pick img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:7px;display:block;background:var(--panel-2)}
.ph-pick .nm{font-size:var(--fs-min);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ph-pick .on{position:absolute;left:10px;top:10px;font:700 var(--fs-min)/1 var(--ui);padding:4px 6px;border-radius:5px;background:var(--panel);color:var(--ink)}
.ph-pick .on.no{background:var(--danger);color:#fff;top:auto;bottom:30px}
.ph-more{grid-column:1/-1;margin:4px 0 0}
.ph-types{margin:4px 0 0;font-size:var(--fs-min);color:var(--muted)}
/* CLOUD-1211: Choose a photo's drop state, over the dialog's body (its title stays), hiding what is under it; the pointer
   and screen readers go through (Upload more is the accessible way) */
.ph-drop{position:fixed;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px;
  border:3px dashed var(--accent);border-radius:12px;background:#EEFAFD;text-align:center;pointer-events:none}
.ph-drop[hidden]{display:none}
.ph-drop b{font-size:var(--fs-section);line-height:var(--lh-tight);font-weight:700;color:var(--ink)}
.ph-drop span{font-size:var(--fs-body);color:var(--muted)}
.ph-pick .on.new{background:var(--accent);color:#fff}
/* a photo being added: a tile with its own bar, until its thumbnail is ready */
.ph-item.adding{display:flex;flex-direction:column;gap:5px;padding:4px}
.adding .wait{width:100%;aspect-ratio:1;border-radius:7px;background:var(--panel-2);display:flex;align-items:flex-end;padding:10px;border:1px solid var(--line)}
.adding .wait span{display:block;height:6px;width:0;border-radius:3px;background:var(--accent);transition:width .2s}
.adding .wait{position:relative}
.adding .pull{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:6px;text-align:center;font-style:normal;font-size:var(--fs-min);color:var(--muted)}
.adding .pull[hidden]{display:none}
.adding .nm{font-size:var(--fs-min);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ph-item{position:relative}
.ph-item .ph-pick{width:100%}
.ph-x{position:absolute;top:4px;right:4px;display:grid;place-items:center;width:var(--tap);height:var(--tap);border:0;border-radius:50%;
  background:rgba(20,22,26,.78);color:#fff;opacity:0;transition:opacity .12s}
.ph-x svg{width:18px;height:18px}
.ph-item:hover .ph-x,.ph-x:focus-visible{opacity:1}
@media (hover:none){.ph-x{opacity:1}}
/* a file that couldn't be added (GGS-74): its tile says why, until dismissed or more files are added */
.ph-item.refused{display:flex;flex-direction:column;gap:5px;padding:4px}
.ph-bad{width:100%;aspect-ratio:1;border-radius:7px;border:2px solid var(--danger);background:var(--danger-soft);color:var(--danger);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:10px;text-align:center;font-size:var(--fs-min);font-weight:700;line-height:1.3}
.ph-bad svg{width:20px;height:20px}
.refused .nm{font-size:var(--fs-min);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.refused .ph-x{opacity:1}
.ph-empty{grid-column:1/-1;text-align:center;padding:24px 0;color:var(--muted);font-size:var(--fs-min)}
.ph-empty p{margin:0 0 8px}
/* a computer, nothing added yet: a drop box holding Upload photos (layout A, as the gift wizard's Photos step) */
.ph-dropbox{display:flex;flex-direction:column;align-items:center;gap:8px;padding:28px 20px;border:2px dashed #9FDBE6;border-radius:12px}
.ph-dropbox b{font-size:var(--fs-body);font-weight:700;color:var(--ink)}
.ph-dropbox span{font-size:var(--fs-min)}
.ph-dropbox .btn{margin-top:4px}

@media (max-width:900px){
  .top{flex-wrap:wrap}
  .doc{order:3;flex-basis:100%}
}
/* phones only: the photo frame and hint in the editor sheet, the text sheet and the scrim behind sheets */
.ed-frame,.ed-hint,.ed-done-top{display:none}
.tsheet[hidden],.sheet-scrim[hidden]{display:none}
/* flex:none: the editor is a scrolling flex column, which would otherwise squeeze this overflow:hidden box to nothing */
.ed-frame{position:relative;overflow:hidden;flex:none;margin:14px auto 0;background:#8F97A2;--flt:none}
.ed-frame img{filter:var(--flt)}
.ed-frame .cropper-view-box{outline:0}
.ed-frame .cropper-face{background:transparent}
.ed-frame .cropper-dashed{border-style:solid;border-color:rgba(255,255,255,.75);opacity:.9}
.ed-frame .cropper-container img{image-orientation:from-image}
.ed-hint{margin:10px 0 2px;text-align:center;font-size:var(--fs-min);color:var(--muted)}
.sheet-scrim{position:fixed;inset:0;z-index:44;background:rgba(10,12,16,.45)}
.tsheet{position:fixed;left:0;right:0;bottom:var(--vis-below,0);z-index:46;display:flex;flex-direction:column;gap:10px;background:var(--panel);
  border-radius:16px 16px 0 0;box-shadow:0 -8px 30px rgba(0,0,0,.25);padding:14px 16px calc(16px + env(safe-area-inset-bottom,0px))}
.ts-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.ts-top h2{margin:0;font-size:var(--fs-section);line-height:var(--lh-tight);font-weight:700}
.ts-top p{margin:3px 0 0;font-size:var(--fs-min);color:var(--muted)}
/* 20 px (never under 16: iOS zooms the page into any smaller field) */
#ts-input{width:100%;font:400 var(--fs-body)/var(--lh-text) var(--ui);color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:8px;
  padding:10px 12px;resize:none}
#ts-input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.ts-count{margin:0;text-align:right;font:400 var(--fs-min)/1 var(--ui);font-variant-numeric:tabular-nums;color:var(--muted)}
.ts-count.over{color:var(--danger)}
.ts-acts{display:flex;align-items:center;gap:6px;flex:none}
.tsheet .ts-done{width:auto;min-height:48px;margin:0;padding:0 18px}

@media (max-width:760px){
  /* phones: above the card, one line with the design's name and Change design (the whole line a link to the designs), then
     the colors, always in view. No thumbnail: the card right below is the preview (Dan, 2026-10-01). No delivery: it was
     chosen in step 1 and people don't come back to change it (desktop has no delivery section either). */
  .lib .sec-h,.design-row > .design-thumb{display:none}
  .design-row{gap:6px;padding:4px 0;min-height:var(--tap)}
  .design-row > div{flex:1;flex-direction:row;align-items:baseline;justify-content:space-between;gap:12px}
  .design-row b{font-size:var(--fs-section);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .design-row .spec{display:none}
  .dr-change{display:block;flex:none;font-size:var(--fs-body);font-weight:700;color:var(--link)}
  .dr-chev{display:block;font-size:24px;line-height:1;color:var(--link);margin-top:-2px}
  #palettes{gap:10px;margin:4px 0 0 -4px;padding:4px;flex-wrap:nowrap}
  #palettes .pal{width:32px;height:32px;flex:none}
  #palettes .pal::before{inset:calc((32px - var(--tap)) / 2)}
  #palettes .pal::after{inset:10px}
  #palette-name{flex:1;min-width:0;margin-left:2px;font-size:var(--fs-min);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .stage{padding:12px 16px;gap:8px}
  #hint{position:static;transform:none;max-width:none;padding:0;border:0;border-radius:0;background:none;box-shadow:none}
  /* the photo editor sheet fits a phone screen: Done at the top, stays put while the sheet scrolls */
  .ed-top{position:sticky;top:-12px;z-index:3;background:var(--panel);margin:-12px -16px 0;padding:12px 16px 10px}
  .ed-done-top{display:inline-flex;margin-left:auto;padding:0 18px}
  #ed-close,#ed-done,.ed-spacer{display:none}
  .ed-hint{margin:6px 0 0;font-size:var(--fs-min)}
  .ed-row{padding:8px 0;gap:8px}
  .ed-zoom{flex-direction:row;align-items:center;gap:12px}
  .ed-zoom .ed-h h3{display:none}
  .ed-zoom #z-range{flex:1}
  .ed-filter .ed-h{display:none}
  .ed-filter .filters{display:flex;overflow-x:auto;gap:8px;padding-bottom:2px}
  .ed-filter .flt{flex:none;width:64px}
  .ed-quality p{display:none}
  .ed-actions{flex-direction:row;gap:20px;border-bottom:0}
  /* 90svh: the screen with Safari's bars showing, as openPhotoSheet measures it; a sheet that still has to scroll (a
     very short screen) never scrolls the page under it */
  #editor:not([hidden]){position:fixed;left:0;right:0;bottom:0;z-index:45;max-height:90vh;max-height:90svh;overflow:auto;overscroll-behavior:contain;background:var(--panel);
    border-radius:16px 16px 0 0;box-shadow:0 -8px 30px rgba(0,0,0,.25);padding:12px 16px calc(16px + env(safe-area-inset-bottom,0px))}
  .ed-frame{display:block}
  .ed-hint{display:block}
  .ed-photo,.editor .desk-only{display:none}
  /* every editable text box shows a dotted outline in its own colour, as Minted's do */
  .card.edit .card-text{outline:1.5px dashed color-mix(in srgb,currentColor 60%,transparent);outline-offset:2px;cursor:pointer}
  .card.edit .card-text.editing{outline:2px solid var(--accent)}
  .tabs{overflow-x:auto;max-width:100%}
  .app{height:auto;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;grid-template-areas:"top" "side" "stage"}
  .side{border-right:0;border-bottom:1px solid var(--line);overflow:visible;padding:8px 16px 10px}
  #card-host{flex:none}
}
/* phones: every step fits the screen or scrolls under a footer that stays put, so Continue is always in reach */
@media (max-width:600px){
  .wide-only{display:none}
  .narrow-only{display:inline}
  /* the workspace's header: one row, the card's name and icon buttons (their words stay for screen readers), then Proof */
  .top{flex-wrap:nowrap;gap:8px;padding:8px 12px}
  .doc{order:0;flex:1 1 auto;min-width:0}
  /* the save status under the card's name: My cards and Save are icons here (CLOUD-1229 B3) */
  .doc{flex-direction:column;align-items:flex-start;gap:0}
  .top .status{padding:0 4px;line-height:1.2}
  #card-name{padding:7px 4px}
  .actions{flex-wrap:nowrap;gap:6px}
  .top .btn:not(.primary){font-size:0;gap:0;padding:0;width:var(--tap);justify-content:center}
  .top .btn svg{width:20px;height:20px}
  .flow{padding:14px 16px 0;overflow:visible}   /* the page scrolls, so the sticky bars stick to the screen */
  .flow-inner{gap:14px}
  .flow-head p{margin-top:4px}
  .flow-head.one-line p{font-size:var(--fs-min)}
  /* the steps: numbers only, and the name of the current one */
  .steps{flex-wrap:nowrap;gap:6px;align-items:center}
  .steps li{gap:6px}
  .steps li:not(:last-child)::after{content:"";width:14px;height:1px;background:var(--line)}
  .steps li:not(.is-current){font-size:0;gap:0}
  .steps li:not(.is-current):not(:last-child)::after{margin-left:6px}
  .steps b{width:28px;height:28px}
  .flow-foot{position:sticky;bottom:0;z-index:5;margin:0 -16px;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));
    background:var(--ground);border-top:1px solid var(--line)}
  .flow-foot .btn.primary{flex:1;justify-content:center;min-height:52px;padding:0 14px}
  #flow-design .flow-foot{position:static;margin-bottom:16px}
  .flow-foot .btn:not(.primary){min-height:52px;padding:0 12px}
  /* step 1 */
  .soon{padding:3px 6px}
  /* step 2: tabs scroll sideways under the heading, the search sits beneath them, designs go two across */
  .browse{gap:8px;border-bottom:0}
  .tabs{order:1;flex:none;width:calc(100% + 32px);max-width:none;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--line);margin:0 -16px;padding:0 16px}
  .tab{padding:9px 11px 10px}
  .search{order:2;flex:1 1 100%;margin:0}
  .tab-panel{margin-top:-6px;padding:0;background:none;border:0;border-radius:0;gap:10px}
  .design-bar{position:sticky;top:0;z-index:4;margin:0 -16px;padding:8px 16px;background:var(--ground);border-bottom:1px solid var(--line)}
  .filter-btn{border:1px solid var(--line);border-radius:999px;padding:0 14px;background:var(--panel)}
  .filter-btn.on{border-color:var(--accent);background:var(--accent-soft)}
  .design-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .pick-design,.tab-panel .pick-design{gap:6px;padding:10px 8px 10px;border-radius:10px;background:var(--panel);border-color:var(--line)}
  .pick-design .pdots{margin:0}
  .pdots i{width:8px;height:8px}
  .pick-design .specs,.pick-design .fmts{display:none}
  .pick-design .brief{display:block}
  /* the filter dialog rises from the bottom */
  .overlay.bottom{place-items:end stretch;padding:0}
  .overlay.bottom .sheet{max-width:none;border-radius:16px 16px 0 0;padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))}
  .sheet-foot .btn.primary{flex:1;justify-content:center;min-height:52px;padding:0 14px}
  /* My cards: the name and dates get the row's width; Open (or "Open now") goes under them */
  .card-list li{flex-wrap:wrap;row-gap:4px}
  .card-list .cmeta{flex:1 1 calc(100% - 98px)}
  .card-list li > .current,.card-list li > .btn{margin-left:auto}
  /* step 3 */
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
/* gift mode (?gift=): inside photospring's gift wizard, which has its own steps, NEXT and BACK */
.gift #open-cards,.gift #save,.gift #proof,.gift .top .doc,.gift .saved-cards,.gift #new-card,.gift .flow .steps{display:none!important}
.gift .top{display:none!important}   /* nothing left in it: Save, Proof and saved cards are the wizard's job */
/* the wizard's step header already says "Choose a Design", and every design shown goes to the frame */
.gift #flow-design .flow-head,.gift .design-grid .fmts{display:none!important}
/* Gift mode, as the gift wizard's mockups (Dan, 2026-10-01); the site's colors and Lato like the rest (Dan, 2026-10-15). Pick a Design is occasion
   chips, then search and Filters, then designs shown as picture and name. Make Edits is the design row, the colors and
   the card, top to bottom at every width; on wider screens the photo editor opens as a column beside the card. */
.gift .done{background:var(--accent);color:#fff}   /* the text sheet's and photo editor's Done, in the accent (Dan, 2026-10-02) */
.gift body{background:var(--panel-2)}
.gift .flow{padding-top:8px}
.gift #flow-design .flow-inner{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px 8px;
  grid-template-areas:"tabs tabs" "search filters" "grid grid" "foot foot"}
.gift #flow-design .browse,.gift #flow-design .tab-panel,.gift #flow-design .design-bar{display:contents}
.gift .tabs-wrap{grid-area:tabs}
.gift #design-tabs{display:flex;align-items:center;gap:8px;padding-bottom:0;margin-bottom:0}
.gift .tabs-arrow.prev{left:-4px}
.gift .tabs-arrow.next{right:-4px}
.gift .tab{flex:none;height:var(--tap);min-height:0;padding:0 16px;border:1px solid var(--line);border-radius:999px;background:var(--panel);
  color:var(--ink);font-size:var(--fs-min);font-weight:700}
.gift .tab[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:700}
.gift .tab::before{display:none!important}
.gift #flow-design .search{grid-area:search;height:48px;margin:0;padding:0 14px;border-radius:999px;background:var(--panel)}
.gift #flow-design .search input{font-size:var(--fs-body)}
.gift #open-filters{grid-area:filters;height:48px;padding:0 16px;border:1px solid var(--line);border-radius:999px;background:var(--panel);
  color:var(--ink);font-weight:400}
.gift #design-count{display:none}
.gift #design-grid{grid-area:grid}
.gift #flow-design .flow-foot{grid-area:foot}
.gift .tab-panel .pick-design{background:transparent;padding:8px 8px 4px;gap:10px}
.gift .pick-design .nm{font-size:var(--fs-body);font-weight:400}
.gift .pick-design .pdots,.gift .pick-design .specs,.gift .pick-design .brief{display:none!important}
@media (min-width:761px){
  .gift .app{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr);grid-template-areas:"lib lib" "stage edit"}
  .gift .side{display:contents}
  .gift #lib{grid-area:lib;display:flex;justify-content:center;padding:10px 24px;background:var(--panel);border-bottom:1px solid var(--line)}
  .gift #lib .sec{width:min(100%,820px);flex-direction:row;align-items:center;justify-content:space-between;gap:24px}
  .gift .lib .sec-h,.gift .design-row > .design-thumb,.gift .design-row .spec{display:none}
  .gift #current-design{flex:0 1 auto;min-width:0}
  .gift .design-row{width:auto;gap:6px;min-height:44px}
  .gift .design-row > div{flex:none;flex-direction:row;align-items:baseline;gap:14px}
  .gift .design-row b{font-size:var(--fs-section)}
  .gift .dr-change{display:block;font-size:var(--fs-body);font-weight:700;color:var(--link)}
  .gift .dr-chev{display:block;font-size:22px;line-height:1;color:var(--link)}
  .gift #palettes{margin:0;flex-wrap:nowrap;gap:10px}
  .gift #palettes .pal{width:34px;height:34px;flex:none}
  .gift #palettes .pal::before{inset:calc((34px - var(--tap)) / 2)}
  .gift .stage{grid-area:stage}
  .gift #editor:not([hidden]){grid-area:edit;width:330px;min-height:0;overflow:auto;position:relative;padding:16px;background:var(--panel);border-left:1px solid var(--line)}
  /* the photo panel (Dan, 2026-10-08, GGS-78 option C): Done at the top, as on phones, and the only Done while a photo is
     open (the wizard hides its own Back and Done on cs:editing); shorter, so all of it shows on a desktop screen
     (cs:size asks for its height). The filters in one row, Swap and Remove side by side, the print note only when low. */
  .gift .ed-done-top{display:inline-flex;margin-left:auto;padding:0 20px}
  /* a short screen still scrolls the panel: its top row, with Done, stays in view (as on phones) */
  .gift .ed-top{position:sticky;top:-16px;z-index:3;background:var(--panel);margin:-16px -16px 0;padding:16px 16px 12px}
  .gift #ed-close,.gift #ed-done,.gift .ed-spacer,.gift .ed-photo{display:none}
  .gift .ed-row{padding:12px 0;gap:8px}
  /* seven names at 18 px don't fit seven columns of 330 px: the row scrolls sideways, as on phones (CLOUD-1228) */
  .gift .ed-filter .filters{display:flex;overflow-x:auto;gap:8px;padding-bottom:2px}
  .gift .ed-filter .flt{flex:none;width:64px;gap:3px}
  .gift .ed-quality:has(.chip.good) p{display:none}
  .gift .ed-actions{flex-direction:row;gap:20px;border-bottom:0}
}
/* gift mode's "Your card still has sample text." dialog: two wide buttons, the default first and in the wizard's teal */
#sample-dlg .sheet{max-width:380px;gap:16px}
#sample-dlg .sheet-actions{flex-direction:column}
#sample-dlg .btn{justify-content:center;height:52px;font-size:var(--fs-body);border-radius:999px}
/* no card list on this server (CARD_LIST off): no way to it */
html[data-card-list="off"] #open-cards, html[data-card-list="off"] .saved-cards, html[data-card-list="off"] #cards-dlg{display:none !important}

/* CLOUD-1278: managed state has its own grid row and visible mobile actions. */
.app.managed-card{grid-template-rows:auto auto minmax(0,1fr);grid-template-areas:"top top" "managed managed" "side stage"}
#managed-card-banner{grid-area:managed;padding:12px 16px;background:#eaf6f8;font:400 18px/1.4 var(--ui);border-bottom:1px solid #b7d1da}
#managed-card-banner p{margin:0 0 8px;overflow-wrap:anywhere}
#managed-card-banner a{display:inline-flex;align-items:center;min-height:44px;color:var(--link);font-weight:700}
.managed-scheduled .top #save{font-size:18px;width:auto;min-width:44px;padding:10px;background:var(--accent);color:var(--accent-ink);white-space:normal}
.managed-scheduled #proof,.managed-locked #save,.managed-locked #proof{display:none}
@media(max-width:900px){.app.managed-card{grid-template-rows:auto auto auto auto;grid-template-areas:"top" "managed" "side" "stage"}}

/* A sent card is a read-only view, with its copy and return actions in the banner. */
.app.managed-locked{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr);grid-template-areas:"top" "managed" "stage"}
.managed-locked #side,.managed-locked #hint{display:none!important}
.managed-locked #card-host{pointer-events:none}
.managed-locked #card-host .slot,.managed-locked #card-host .card-text{cursor:default}
.managed-locked #managed-card-banner{display:flex;flex-direction:column;align-items:flex-start;gap:8px}

/* CLOUD-1320: the proof's Continue in the deep-teal primary (white on #007a8b, 5.05:1); the toolbar Next hides behind it */
body.send-flow #pf-next{background:#007a8b;border-color:#007a8b;color:#fff}
.proof-open #proof{visibility:hidden}