/* Futura Tech — ready-made designs gallery (docs/DESIGNS-SUPPORT-CONTRACT.md §1).
   Builds on tokens.css + base.css + shop.css (toolbar, chips, sheet). No new colours: red stays for
   the one action ("اطبعه"), ink is selection. The one memorable element is the print bed: every
   thumbnail sits on a faint build-plate grid with a caliper-style dimension line in cm along its
   front edge, because size is the first thing a maker checks. Logical properties only (RTL first). */

/* ---------- third path card under the dropzone ---------- */
.ready-card {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3);
  inline-size: 100%; padding: 12px 14px; border: 2px solid var(--c-input-border, var(--c-border)); border-radius: var(--radius);
  background: var(--c-surface); color: var(--c-text); font: inherit; text-align: start; cursor: pointer;
}
.ready-card[hidden] { display: none; }
.ready-card:hover { border-color: var(--c-text); }
.ready-card:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 3px; }
.ready-txt { display: grid; gap: 2px; line-height: 1.45; min-inline-size: 0; }
.ready-txt strong { font-size: var(--fs-2); }
.ready-txt > span { color: var(--c-muted); font-size: var(--fs-0); }
.ready-n { color: var(--c-text); font-size: var(--fs-0); font-weight: 600; }
.ready-n:empty { display: none; }
.ready-chev { inline-size: 22px; block-size: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
html[dir="ltr"] .ready-chev { transform: scaleX(-1); }
/* three overlapping thumbnails: a peek into the gallery */
.ready-peek { display: flex; }
.ready-peek:empty { display: none; }
.ready-peek .d-peek { inline-size: 44px; block-size: 44px; flex: none; outline: 2px solid var(--c-surface); border-radius: var(--radius-sm); background: var(--c-surface-2); }
.ready-peek .d-peek + .d-peek { margin-inline-start: -14px; }
@media (max-width: 479.98px) { .ready-peek .d-peek:nth-child(3) { display: none; } }
.ready-peek .d-peek img { padding: 0; object-fit: cover; border-radius: var(--radius-sm); }
.ready-peek .d-peek .d-iso { inline-size: 80%; }

/* ---------- ready path step ---------- */
.ready-head { display: grid; gap: 4px; margin-block-end: var(--space-4); }
.ready-head h3 { margin: 0; font-size: var(--fs-4); }
.ready-head p { margin: 0; max-inline-size: 60ch; }
.ready-picked { margin-block-end: var(--space-5); }
.ready-picked[hidden] { display: none; }
.ready-switches { margin-block-start: var(--space-3); gap: var(--space-2); }
#ready-err { margin-block-start: var(--space-3); }
.designs { scroll-margin-block-start: 76px; }
.designs-h { margin: 0 0 var(--space-2); font-size: var(--fs-3); }
.d-tools { inset-block-start: 68px; background: color-mix(in srgb, var(--c-surface) 96%, transparent); }
/* the wizard keeps its own column: the sticky toolbar must not bleed past it */
@media (min-width: 720px) { .d-tools.shop-tools { margin-inline: 0; padding-inline: 0; } }
.d-tools .shop-search { margin: 0; }

/* ---------- grid + cards ---------- */
.d-grid { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 359.98px) { .d-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 720px) { .d-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } }
@media (min-width: 1000px) { .d-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .d-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.d-card { display: flex; min-inline-size: 0; }
.d-open {
  display: flex; flex-direction: column; inline-size: 100%; padding: 0; overflow: hidden;
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius);
  color: inherit; font: inherit; text-align: start; cursor: pointer;
}
.d-open:hover { border-color: color-mix(in srgb, var(--c-text) 40%, var(--c-border)); }
.d-open:hover .d-title { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.d-open:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.d-card.is-picked .d-open { border-color: var(--c-accent); box-shadow: inset 0 0 0 1px var(--c-accent); }

/* the print bed: grid lines every 10% like a build plate, the part in the middle */
.d-bed {
  --_grid: color-mix(in srgb, var(--c-text) 7%, transparent);
  position: relative; display: block; aspect-ratio: 1; background-color: var(--c-surface-2);
  background-image: linear-gradient(var(--_grid) 1px, transparent 1px), linear-gradient(90deg, var(--_grid) 1px, transparent 1px);
  background-size: 10% 10%; background-position: -1px -1px;
}
.d-bed { overflow: hidden; }
.d-bed > .d-thumb { position: absolute; inset: 0; }
.d-thumb { position: relative; display: grid; place-items: center; inline-size: 100%; block-size: 100%; overflow: hidden; background: transparent; }
.d-thumb img { inline-size: 100%; block-size: 100%; object-fit: contain; padding: 14% 12% 22%; }
.d-thumb .d-iso { inline-size: 62%; block-size: auto; margin-block-end: 10%; overflow: visible; }
.d-iso polygon { stroke: var(--c-text); stroke-width: 1.2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.d-iso-top { fill: var(--c-surface); }
.d-iso-right { fill: color-mix(in srgb, var(--c-text) 14%, var(--c-surface)); }
.d-iso-left { fill: color-mix(in srgb, var(--c-text) 28%, var(--c-surface)); }
.ready-peek .d-thumb, .d-picked-bed .d-thumb { background-color: var(--c-surface-2); }

/* caliper: |——— 12 × 8 × 5 سم ———| (always LTR numbers, ticks at both ends) */
.d-dim {
  position: absolute; inset-inline: 10px; inset-block-end: 10px; display: flex; align-items: center; gap: 6px;
  color: var(--c-text); font-size: var(--fs-0); font-weight: 600; line-height: 1; pointer-events: none;
}
.d-dim::before, .d-dim::after {
  content: ""; flex: 1 1 0; min-inline-size: 6px; block-size: 9px;
  background: linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat;
  border-inline-start: 1px solid currentColor; opacity: .55;
}
.d-dim::after { border-inline-start: 0; border-inline-end: 1px solid currentColor; }
.d-dim-txt { flex: none; padding: 3px 6px; border-radius: var(--radius-sm); background: var(--c-surface); white-space: nowrap; }
.d-dim-txt .num { font-variant-numeric: tabular-nums; }

.d-body { display: grid; gap: 4px; padding: 8px; align-content: start; flex: 1 1 auto; }
.d-title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-block-size: calc(2 * 1.4em); font-size: var(--fs-0); font-weight: 600; line-height: 1.4;
}
.d-from { font-size: var(--fs-0); font-weight: 800; line-height: 1.2; }
.d-picked-tag { justify-self: start; background: var(--c-accent); color: var(--c-bg); }
@media (min-width: 720px) { .d-body { padding: 10px 12px 12px; } }
/* compact cards: the caliper line only where there is room for it */
@media (max-width: 719.98px) { .d-dim { display: none; } }
@media (max-width: 389.98px) { .d-dim { inset-inline: 6px; gap: 3px; } .d-dim-txt { padding-inline: 4px; } }

/* skeleton (same shimmer rule as the store) */
.d-card.is-skel { flex-direction: column; gap: 10px; padding-block-end: 16px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); overflow: hidden; }
.d-card.is-skel .d-thumb { aspect-ratio: 1; block-size: auto; background: var(--c-surface-2); }
@media (prefers-reduced-motion: no-preference) {
  .d-card.is-skel .d-thumb { background: linear-gradient(90deg, var(--c-surface-2) 0 40%, color-mix(in srgb, var(--c-surface-2) 55%, var(--c-surface)) 50%, var(--c-surface-2) 60%) 0 0 / 250% 100%; animation: ft-shimmer 1.3s linear infinite; }
}

/* ---------- picked design (step 1, after "اطبعه" / back from the contact step) ---------- */
.d-picked { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--space-3); align-items: start; padding: var(--space-3); border: 1.5px solid var(--c-accent); border-radius: var(--radius); background: var(--c-surface); }
.d-picked-bed { border-radius: var(--radius-sm); overflow: hidden; }
.d-picked-main { display: grid; gap: 6px; min-inline-size: 0; }
.d-picked-main p { margin: 0; }
.d-picked-title { margin: 0; font-size: var(--fs-3); line-height: 1.35; }
.d-picked-size { color: var(--c-muted); font-size: var(--fs-0); }
.d-specs { list-style: none; margin: 2px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.d-specs li { padding: 3px 8px; border: 1px solid var(--c-border); border-radius: var(--radius-sm); font-size: var(--fs-0); font-weight: 600; background: var(--c-bg); }
.d-picked-act { gap: var(--space-2); margin-block-start: 4px; }
.d-picked-act .btn { min-block-size: 44px; }
@media (max-width: 479.98px) { .d-picked { grid-template-columns: 84px minmax(0, 1fr); padding: 12px; } .d-picked-act { grid-column: 1 / -1; } }

/* licence / attribution */
.d-lic { margin: 0; color: var(--c-muted); font-size: var(--fs-0); line-height: 1.6; }
.d-lic a { color: var(--c-text); font-weight: 600; text-underline-offset: 2px; }
.d-attr { margin: 0; color: var(--c-muted); font-size: var(--fs-0); line-height: 1.6; unicode-bidi: plaintext; }

/* ---------- detail sheet ---------- */
.ds-media { position: relative; background: var(--c-surface-2); }
.ds-viewer { aspect-ratio: 4 / 3; border: 0; border-radius: 0; }
.ds-poster { position: absolute; inset: 0; display: grid; place-items: center; background-color: var(--c-surface-2);
  background-image: linear-gradient(color-mix(in srgb, var(--c-text) 7%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--c-text) 7%, transparent) 1px, transparent 1px);
  background-size: 10% 10%; }
.ds-poster[hidden] { display: none; }
.ds-poster .d-thumb img { padding: 10% 14% 18%; }
.ds-vmsg { position: absolute; inset-inline: 0; inset-block-start: 56px; margin: 0; text-align: center; color: var(--c-muted); font-size: var(--fs-0); pointer-events: none; }
.ds-vmsg:empty { display: none; }
.ds-dim { position: absolute; inset-inline: 16px; inset-block-end: 0; block-size: 40px; pointer-events: none; }
.ds-dim .d-dim { inset-inline: 0; inset-block-end: 12px; font-size: var(--fs-1); }
.ds-photo { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: contain; background: var(--c-surface-2); z-index: 2; }
.ds-photo[hidden] { display: none; }
.ds-shots { position: absolute; inset-inline: 12px; inset-block-end: 12px; z-index: 3; display: flex; gap: 8px; overflow-x: auto; padding: 2px; scrollbar-width: none; }
.ds-shots[hidden] { display: none; }
.ds-shot { flex: none; inline-size: 52px; block-size: 52px; padding: 0; border-radius: 10px; overflow: hidden; border: 2px solid color-mix(in srgb, var(--c-text) 18%, transparent); background: var(--c-surface); cursor: pointer; display: grid; place-items: center; font-weight: 800; color: var(--c-text); box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.ds-shot img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.ds-shot[aria-pressed="true"] { border-color: var(--c-primary); }
.ds-shot:focus-visible { outline: 3px solid var(--c-primary); outline-offset: 2px; }
.ds-media:has(.ds-shots:not([hidden])) .ds-dim { inset-block-end: 70px; }
@media (max-width: 599.98px) { .ds-shot { inline-size: 42px; block-size: 42px; border-radius: 8px; } .ds-shots { inset-block-end: 8px; inset-inline: 8px; gap: 6px; } .ds-media:has(.ds-shots:not([hidden])) .ds-dim { inset-block-end: 56px; } }
.ds-info { display: grid; gap: var(--space-4); align-content: start; padding: var(--space-4) var(--space-3) var(--space-3); }
.ds-head { display: grid; gap: var(--space-2); }
.ds-head h2 { margin: 0; font-size: var(--fs-4); line-height: 1.3; }
.ds-head p { margin: 0; }
.ds-opts { gap: var(--space-3); }
.ds-opts-h { margin: 0; font-size: var(--fs-2); }
.ds-opts .chips legend { font-size: var(--fs-0); color: var(--c-muted); }
.ds-opts .mat-note { margin-block-start: -6px; font-size: var(--fs-0); }
.ds-opts .mat-note:empty { display: none; }
.ds-foot { gap: var(--space-3); }
.ds-price { display: grid; flex: 1 1 auto; min-inline-size: 0; line-height: 1.25; }
.ds-price-l { color: var(--c-muted); font-size: var(--fs-0); }
.ds-price-v { font-size: var(--fs-4); font-weight: 800; white-space: nowrap; }
.ds-price-v.is-empty { font-size: var(--fs-1); font-weight: 600; color: var(--c-muted); white-space: normal; }
.ds-price-h { color: var(--c-muted); font-size: var(--fs-0); }
.ds-price[aria-busy="true"] .ds-price-v { opacity: .45; }
.ds-print { flex: none; min-inline-size: 140px; }
@media (min-width: 900px) {
  dialog.d-sheet { inline-size: min(1040px, calc(100vw - 48px)); max-block-size: min(760px, 92dvh); }
  .ds-inner { grid-template-columns: 1.1fr 1fr; grid-template-rows: minmax(0, 1fr) auto; max-block-size: min(760px, 92dvh); }
  .ds-media { grid-row: 1 / span 2; grid-column: 1; }
  .ds-viewer { aspect-ratio: auto; block-size: 100%; min-block-size: 480px; }
  .ds-info { grid-column: 2; padding: var(--space-5) var(--space-4) var(--space-3); overflow-y: auto; }
  .ds-foot { grid-column: 2; padding-inline: var(--space-4); }
}
@media print { dialog.d-sheet, .ready-card { display: none !important; } }