/* Table cards studio. The shared studio pieces (steps, panels, choices, palettes, type samples) come from website.css. */

/* The way in, from Today and Guests */
.card-entry{display:flex;align-items:center;gap:14px;width:100%;padding:16px;margin:0 0 20px;text-align:left;border:1px solid var(--glass-edge);border-radius:24px;background:#ffffff80;box-shadow:var(--shadow)}
.card-entry-copy{min-width:0;flex:1}
.card-entry strong{display:block;font-size:1rem;font-weight:600;line-height:1.35}
.card-entry small{display:block;margin-top:4px;color:var(--muted);font-size:.875rem;line-height:1.5}
/* Two small cards, one behind the other, the front one carrying a code */
.card-entry-art{position:relative;flex:none;width:52px;height:60px}
.card-entry-art i{position:absolute;inset:4px 8px;border-radius:5px;background:#d8e5dc;transform:rotate(-9deg)}
.card-entry-art i+i{background:#fbfaf5;border:1px solid #c9d3c8;transform:rotate(5deg);box-shadow:0 5px 12px #2c40341f}
.card-entry-art i+i::after{content:"";position:absolute;left:50%;bottom:8px;width:16px;height:16px;margin-left:-8px;border-radius:2px;background:conic-gradient(#2b3b32 25%,#0000 0 50%,#2b3b32 0 75%,#0000 0) 0 0/8px 8px}

/* The card itself, always in view while it is being changed: large at the top of the page, smaller once it is pinned.
   The page's own top padding moves onto the studio, so the pinned card sits flush under the header. The pinned band is
   solid, in the color of the page behind it, so what scrolls beneath never shows through. */
#main.flush{padding-top:0}
#main.flush>.panel:first-child{margin-top:24px}
.card-studio{padding-top:24px;overflow-anchor:none}
.card-dock-mark{display:block;height:0}
/* --card-bleed is the side padding of whatever the studio sits in, so the pinned band reaches its edges. */
.card-dock{position:sticky;top:0;z-index:6;margin:0 calc(var(--card-bleed,24px)*-1) 16px;padding:12px var(--card-bleed,24px) 14px;transition:background-color .2s,box-shadow .2s}
.card-dock.stuck{background:#e5e9e7;box-shadow:0 1px 0 #ffffff9e,0 16px 26px -22px #24382d70}
.card-stage{display:block;margin:0 auto;padding:0;height:280px;height:min(38dvh,320px);border-radius:5px;line-height:0;transition:height .28s cubic-bezier(.3,.7,.2,1)}
.card-dock.small .card-stage{height:190px;height:clamp(150px,24dvh,208px)}
.card-dock.small.typing{padding-top:8px;padding-bottom:10px}
.card-dock.small.typing .card-stage{height:132px}
.card-dock.still,.card-dock.still .card-stage{transition:none}
.card-stage canvas{display:block;height:100%;width:auto;border-radius:5px;box-shadow:0 1px 2px #1e2b241f,0 14px 30px #1e2b2433}
.card-fit{max-width:330px;margin:12px auto 0;padding:10px 14px;border-radius:14px;background:#fff6e0;border:1px solid #ecd9a6;color:#5a4614;font-size:.8rem;line-height:1.45;text-align:left}
.card-proof{margin:0 0 20px}
.card-proof~.secondary{margin-top:10px}
.card-dock.small .card-stage canvas{box-shadow:0 1px 2px #1e2b241f,0 8px 18px #1e2b242e}
@media(max-width:355px){.app-shell .card-studio{--card-bleed:18px}}
.card-studio .studio-steps button{flex:1 0 auto}
.card-studio .studio-heading{margin-bottom:20px}

/* Six designs to choose from, side by side */
.card-designs{display:grid;grid-auto-flow:column;grid-auto-columns:104px;gap:10px;overflow-x:auto;margin:0 -15px;padding:4px 15px 12px;scrollbar-width:none;scroll-snap-type:x proximity}
.card-designs::-webkit-scrollbar{display:none}
.card-design{display:grid;gap:8px;padding:5px 5px 9px;border:1px solid #c6d1c3;border-radius:12px;background:#fff9;text-align:center;scroll-snap-align:start;min-width:0}
.card-design.selected{border:2px solid #2b3b32;padding:4px 4px 8px;background:#fff}
.card-design-thumb{display:block;aspect-ratio:2/3;border-radius:7px;overflow:hidden;background:#eef1ec}
.card-design-thumb canvas{display:block;width:100%;height:100%}
.card-design strong{font-size:.78rem;font-weight:600}
.card-design-note{margin-top:8px}
.card-studio .studio-panel>.secondary{margin-top:18px}
.card-studio .studio-panel>.secondary+.info{margin-top:10px}

/* Words */
.card-studio .field>span{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.card-count{font-size:.76rem;font-weight:400;color:var(--muted);font-variant-numeric:tabular-nums}

/* Photograph */
.card-photo-note{margin:-6px 0 18px}
.card-studio .upload-button+.text-btn{display:block;margin:8px auto 0}

/* Where the code leads, size and printing */
.card-need{margin-top:16px;padding:16px;border-radius:16px;background:#e9efe6}
.card-need p{font-size:.875rem;line-height:1.55;margin-bottom:12px}
.card-leads{margin-top:18px;font-size:.875rem;line-height:1.55;color:var(--muted);overflow-wrap:anywhere}
.card-leads strong{color:var(--ink);font-weight:600}
.card-leads span{display:block;margin-top:8px}
.card-sizes{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.card-size{display:grid;justify-items:start;align-content:end;gap:3px;min-height:122px;padding:13px 14px;border:1px solid #c6d1c3;border-radius:14px;background:#fff9;text-align:left}
.card-size.selected{border:2px solid #2b3b32;padding:12px 13px;background:#fff}
.card-size i{display:block;margin-bottom:8px;border:1.5px solid #6d8275;border-radius:2px;background:#f4f7f2}
.card-size.selected i{border-color:#2b3b32;background:#dfe9dc}
.card-size strong{font-size:.9rem;font-weight:600}
.card-size small{font-size:.74rem;color:var(--muted);line-height:1.4}
.card-print-sub{font-size:.92rem;margin:-8px 0 18px}
.card-studio .studio-panel .studio-choice+.secondary{margin-top:14px}
.card-tips{margin:22px 0 0;padding:0;list-style:none;display:grid;gap:10px;font-size:.84rem;line-height:1.5;color:var(--muted)}
.card-tips li{position:relative;padding-left:18px}
.card-tips li::before{content:"";position:absolute;left:2px;top:.62em;width:6px;height:6px;border-radius:50%;background:#7d9484}

/* The larger look */
.card-zoom{display:grid;place-items:center;padding:6px 0 4px}
.card-zoom canvas{display:block;width:min(100%,340px);height:auto;border-radius:6px;box-shadow:0 1px 2px #1e2b241f,0 18px 40px #1e2b2438}