/* 3D Shapes. The canvas fills the stage; the property card, the unfold
   control and the shape picker float on top. Sizes in container units. */

.sh { overflow: hidden; --sh-pad: clamp(8px, 2.4cqmin, 28px); }
.sh-host {
  background:
    radial-gradient(120% 85% at 50% 38%, var(--stage-bg) 30%, color-mix(in srgb, var(--stage-bg) 90%, #6b7a90) 100%);
}
.sh-host .t-canvas { cursor: grab; }
.sh-host .t-canvas:active { cursor: grabbing; }

/* ---- property card ---- */
.sh-card {
  position: absolute; top: var(--sh-pad); left: var(--sh-pad); z-index: 4; pointer-events: none;
  max-width: min(48cqw, 560px); padding: .65em .95em .7em; border-radius: clamp(10px, 2cqmin, 20px);
  background: color-mix(in srgb, var(--card) 86%, transparent); border: 1px solid var(--line);
  box-shadow: var(--shadow); backdrop-filter: blur(8px);
  font-size: clamp(11px, 2cqmin, 22px); color: var(--ink);
}
.sh-name { font: 650 1.45em/1.1 var(--font-display); letter-spacing: -.01em; margin-bottom: .4em; }
.sh-stats { display: flex; flex-wrap: wrap; gap: .3em 1.1em; margin: 0; }
.sh-stat { display: flex; flex-direction: column-reverse; align-items: flex-start; }
.sh-stat dd { margin: 0; font: 650 2em/1 var(--font-display); color: var(--cat); font-variant-numeric: tabular-nums; }
.sh-stat dt { font-size: .78em; font-weight: 600; color: var(--muted); margin-top: .15em; white-space: nowrap; }
.sh-kinds { margin-top: .5em; font-size: .92em; color: var(--ink-soft); }
.sh-euler { margin-top: .35em; display: flex; flex-wrap: wrap; align-items: baseline; gap: .2em .6em; font-size: .88em; }
.sh-euler-name { color: var(--muted); font-weight: 600; }
.sh-euler-sum { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.sh-card[hidden] { display: none; }

/* ---- unfold control ---- */
.sh-unfold {
  position: absolute; top: var(--sh-pad); right: var(--sh-pad); z-index: 4;
  display: flex; flex-direction: column; align-items: stretch; gap: clamp(4px, 1.2cqmin, 12px);
  width: clamp(110px, 24cqmin, 260px);
}
.sh-unfold .t-btn-primary { min-width: 0; }
.sh-slider { width: 100%; margin: 0; accent-color: var(--cat); height: clamp(18px, 3.4cqmin, 32px); cursor: pointer; }
.sh-nonet {
  font-size: clamp(11px, 2.1cqmin, 20px); color: var(--ink-soft); text-align: center; line-height: 1.25;
  padding: .4em .6em; border-radius: 10px; background: color-mix(in srgb, var(--card) 80%, transparent); border: 1px solid var(--line);
}
.sh-unfold:not(.has-net) .sh-slider { display: none; }
.sh-unfold.has-net .sh-nonet { display: none; }

/* ---- shape picker ---- */
.sh-picker {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
  display: flex; align-items: center; justify-content: center; gap: clamp(4px, 1.2cqmin, 14px);
  padding: 0 var(--sh-pad) var(--sh-pad);
}
.sh-picker .t-btn-round { flex: none; background: color-mix(in srgb, var(--card) 92%, transparent); }
.sh-prev .icon { transform: rotate(90deg); }
.sh-next .icon { transform: rotate(-90deg); }
.sh-strip {
  display: flex; gap: clamp(4px, 1cqmin, 12px); overflow-x: auto; min-width: 0; flex: 0 1 auto;
  padding: 4px; scrollbar-width: none; scroll-behavior: smooth;
}
.sh-strip::-webkit-scrollbar { display: none; }
.sh-chip {
  flex: none; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: .25em;
  width: clamp(62px, 11.2cqmin, 136px); min-height: 44px; padding: .4em .3em .35em;
  border-radius: clamp(10px, 1.8cqmin, 18px); border: 1px solid var(--line);
  background: color-mix(in srgb, var(--card) 90%, transparent); color: var(--ink-soft);
  font-weight: 600; font-size: clamp(9.5px, 1.55cqmin, 16px); line-height: 1.15; cursor: pointer;
  box-shadow: var(--shadow-sm); transition: border-color .15s, box-shadow .15s, transform .1s;
}
.sh-chip:hover { color: var(--ink); border-color: color-mix(in srgb, var(--cat) 50%, var(--line)); }
.sh-chip:active { transform: translateY(1px); }
.sh-chip[aria-pressed="true"] { color: var(--ink); background: var(--card); border-color: var(--cat); box-shadow: 0 0 0 2px color-mix(in srgb, var(--cat) 35%, transparent), var(--shadow-sm); }
.sh-thumb { display: block; width: clamp(28px, 6.6cqmin, 76px); aspect-ratio: 1; }
.sh-thumb-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.sh-chip-label {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  text-align: center; max-width: 100%; min-height: 2.3em; hyphens: auto;
}

.sh-hint {
  position: absolute; left: 50%; transform: translateX(-50%); z-index: 4; pointer-events: none;
  top: calc(var(--sh-pad) + .4em);
  padding: .3em .85em; border-radius: 999px; white-space: nowrap;
  background: color-mix(in srgb, var(--stage-ink) 70%, transparent); color: var(--stage-bg);
  font-size: clamp(11px, 2.1cqmin, 20px); opacity: .85;
}

/* ---- SVG drawings (thumbnails and the flat fallback) ---- */
.sh-edge { stroke: #1d2330; stroke-linecap: round; fill: none; }
.sh-edge.is-hidden { opacity: .55; }
.sh-vert { fill: #f4f6f8; stroke: #1d2330; stroke-width: .022; }
.sh-vert.is-hidden { opacity: .5; }
.sh-net-face { stroke: #1d2330; stroke-linejoin: round; }

.sh-flat {
  position: absolute; inset: 0; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); touch-action: none; cursor: grab;
  padding: calc(var(--sh-pad) * 2) 4cqmin calc(clamp(58px, 18cqmin, 190px) + var(--sh-pad));
}
.sh-flat-svg { width: 100%; height: 100%; overflow: visible; }
.sh-flat-note {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(clamp(58px, 18cqmin, 190px) + var(--sh-pad));
  margin: 0; z-index: 3; font-size: clamp(11px, 2cqmin, 18px); color: var(--muted); white-space: nowrap;
}
.sh.is-flat .sh-hint { display: none; }

/* ---- small stages (Board widgets) ---- */
@container (max-height: 460px) {
  .sh-chip-label { display: none; }
  .sh-chip { width: auto; padding: .3em; }
  .sh-flat { padding-bottom: calc(clamp(44px, 12cqmin, 120px) + var(--sh-pad)); }
  .sh-flat-note { display: none; }
}
@container (max-height: 340px) {
  .sh-kinds, .sh-euler { display: none; }
  .sh-hint { display: none; }
  .sh-stat dd { font-size: 1.6em; }
  .sh-slider { display: none; }
}
@container (max-width: 760px) {
  .sh-hint { display: none; }
}
@container (max-width: 520px) {
  .sh-card { max-width: 56cqw; }
  .sh-stats { gap: .2em .8em; }
  .sh-unfold { width: auto; }
  .sh-unfold .t-btn span { display: none; }
  .sh-unfold .t-btn-primary { width: clamp(36px, 8.4cqmin, 84px); padding: 0; }
  .sh-slider { display: none; }
  .sh-nonet { display: none; }
}
@container (max-width: 400px) {
  .sh-strip { display: none; }
  .sh-picker { justify-content: space-between; }
}