/* The table card designer page (/table-cards).

   The page wears the builder page's layout (couple-studio-page.css) and the designer brings its own stylesheets,
   copied from The Journal couples app (couple-studio/website-studio.css and cards.css). This file holds only what is
   particular to this page: the three cards in the opening, and the card kept beside the controls on wide screens. */

/* opening: three cards, fanned. --cw is a card's width and --shift how far the outer two stand from the middle one. */
.tc-fan{--cw:218px;--shift:152px;position:relative;height:calc(var(--cw)*1.5 + 56px);display:flex;align-items:center;justify-content:center}
.tc-sample{position:absolute;width:var(--cw);height:calc(var(--cw)*1.5);border-radius:6px;background:#eef1ec;box-shadow:0 26px 54px #18262030,0 3px 10px #18262017;opacity:0;transition:opacity .45s}
.tc-sample.drawn{opacity:1}
.tc-sample:nth-child(1){transform:translateX(calc(var(--shift)*-1)) translateY(12px) rotate(-8deg) scale(.9)}
.tc-sample:nth-child(2){z-index:2}
.tc-sample:nth-child(3){transform:translateX(var(--shift)) translateY(12px) rotate(8deg) scale(.9)}

/* the studio band: one plain color, so the band behind the pinned card disappears into it */
.tc-studio{background:#e5e9e7}
/* --card-bleed tells the designer how far its pinned band must reach to touch the edges of this layout. */
.tc-layout{--card-bleed:20px}
.tc-layout .card-studio{padding-top:0}
.tc-layout .card-studio .studio-status{font-size:12.5px}
.tc-preview{display:none}

@media(min-width:1100px) and (max-width:1279px){.tc-fan{--cw:196px;--shift:132px}}
@media(min-width:1100px){
 .tc-layout{grid-template-columns:minmax(0,540px) minmax(0,1fr);gap:56px;align-items:start;max-width:1280px;padding:0 36px}
 /* The card is always in view beside the controls here, so the designer's own pinned card steps aside. */
 .tc-layout .card-dock,.tc-layout .card-dock-mark{display:none}
 .tc-preview{position:sticky;top:20px;display:flex;flex-direction:column;align-items:center;gap:14px;min-width:0;height:calc(100vh - 56px);height:calc(100dvh - 56px);min-height:460px;max-height:1000px}
 .tc-preview-bar{align-self:stretch;flex:none}
 .tc-preview-bar p{margin:0;display:grid;gap:1px;line-height:1.35}
 .tc-preview-bar strong{font:600 15px/1.35 var(--ex-display);letter-spacing:-.015em;color:#24312c}
 .tc-preview-bar p span{font-size:12.5px;color:#56635d}
 /* As large as the space allows, at the card's own proportions. The tallest card is half as tall again as it is wide. */
 .tc-stage{flex:1;min-height:0;align-self:stretch;display:flex;align-items:flex-start;justify-content:center;container-type:size}
 .tc-stage canvas{display:block;width:380px;width:min(100cqw,calc(100cqh/1.5));height:auto;border-radius:8px;box-shadow:0 1px 3px #1e2b241f,0 30px 70px #1826202e}
 .tc-preview .card-fit{flex:none;max-width:420px;margin:0}
}

@media(max-width:1099px){
 .tc-fan{--cw:176px;--shift:126px;order:2}
}
@media(max-width:700px){
 .tc-layout{--card-bleed:16px}
 .tc-fan{--cw:min(140px,37vw);--shift:min(98px,25vw)}
}
@media(max-width:360px){
 .tc-layout{--card-bleed:13px}
}
@media(prefers-reduced-motion:reduce){.tc-sample{transition:none}}