/* Tumbler & cone template studio. The stage is a cutting mat; the template is a sheet of paper on it. */

.studio {
  --mat: #17473c;
  --mat-2: #123a31;
  --mat-ink: #e6efe9;
  --mat-dim: rgba(230, 239, 233, 0.66);
  --paper-sheet: #fdfcf8;
  display: grid;
  grid-template-columns: minmax(296px, 364px) minmax(0, 1fr);
  grid-template-areas: "meas stage" "design stage" "opts stage" "export stage";
  grid-template-rows: auto auto auto 1fr;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  background: var(--card);
  margin-top: 4px;
}
.studio[data-mode="warp"] { grid-template-areas: "design stage" "meas stage" "opts stage" "export stage"; }
.studio[data-mode="cone"] { grid-template-areas: "meas stage" "opts stage" "export stage" "rest stage"; grid-template-rows: auto auto auto 1fr; }
.st-card { padding: 18px 20px 20px; border-bottom: 1px solid var(--line); display: grid; gap: 12px; align-content: start; min-width: 0; }
.st-card:last-of-type { border-bottom: 0; }
.st-meas { grid-area: meas; }
.st-design { grid-area: design; }
.st-opts { grid-area: opts; }
.st-export { grid-area: export; border-bottom: 0; }
.st-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.st-title { font-family: var(--mono); font-size: 11.5px; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0; }
.st-title .n { color: var(--accent); margin-right: 6px; }

.seg.st-seg button { padding: 4px 10px; font-size: 13px; }
.st-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.st-fields .field > span:first-child { font-size: 13px; line-height: 1.25; }
.st-fields .field small { display: block; color: var(--muted); font-size: 11.5px; }
.input[aria-invalid="true"] { border-color: var(--warn); box-shadow: 0 0 0 3px color-mix(in oklab, var(--warn) 18%, transparent); }
.st-switches { display: grid; gap: 8px; }
.st-switch { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.st-switch .seg { flex: none; }
.st-switch .seg button { padding: 4px 9px; font-size: 12.5px; }
.st-error { margin: 0; font-size: 13.5px; color: var(--warn); }
.st-error[hidden] { display: none; }
.st-linkrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 13px; color: var(--muted); }
.st-linkrow a { color: var(--ink-2); }
.st-textbtn { font: inherit; font-size: 13px; color: var(--ink-2); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; display: inline-flex; align-items: center; gap: 6px; }
.st-textbtn:hover { color: var(--accent); }
.st-textbtn .pro-tag, .btn .pro-tag { font-size: 9.5px; padding: 2px 5px; text-decoration: none; }

/* ---- stage ---- */
.st-stage { grid-area: stage; border-left: 1px solid var(--line-2); background: var(--mat); border-radius: 0 13px 13px 0; min-width: 0; }
.st-stage-in { position: sticky; top: 61px; display: grid; grid-template-rows: minmax(0, 1fr) auto; height: min(calc(100vh - 61px), 800px); min-height: 540px; }
.st-mat { position: relative; min-height: 0; overflow: hidden; border-radius: 0 13px 0 0; background:
  radial-gradient(120% 90% at 50% 40%, rgba(255,255,255,.05), transparent 70%), var(--mat); }
.st-mat svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; max-width: none; box-shadow: none; background: transparent; }
.st-mat.is-stale svg { opacity: .32; filter: grayscale(1); transition: opacity .2s; }
.st-bar { position: absolute; left: 14px; right: 14px; bottom: 10px; display: flex; justify-content: space-between; gap: 12px; font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--mat-dim); pointer-events: none; }
.st-bar [data-status] { color: var(--mat-ink); text-align: right; }
.mat-grid { stroke: rgba(230, 239, 233, .075); stroke-width: 1; fill: none; shape-rendering: crispEdges; }
.mat-grid-major { stroke: rgba(230, 239, 233, .17); stroke-width: 1; fill: none; shape-rendering: crispEdges; }
.mat-num { fill: var(--mat-dim); font-family: var(--mono); font-size: 10.5px; }
.tpl-paper { fill: var(--paper-sheet); }
.tpl-tab { fill: #efece4; }
.tpl-cut { fill: none; stroke: #141518; stroke-width: 1.5; stroke-linejoin: round; }
.tpl-bleed { fill: none; stroke: #c8102e; stroke-width: 1; stroke-dasharray: 5 4; }
.tpl-fold { fill: none; stroke: #6a6f78; stroke-width: 1; stroke-dasharray: 4 4; }
.tpl-label { fill: #62666e; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; }
.dim { stroke: rgba(230, 239, 233, .7); stroke-width: 1; fill: none; }
.dim-t { fill: var(--mat-ink); font-family: var(--mono); font-size: 12px; }

.st-readout { margin: 0; padding: 14px 18px 16px; display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 12px 18px; background: var(--mat-2); color: var(--mat-ink); border-top: 1px solid rgba(255,255,255,.08); border-radius: 0 0 13px 0; }
.st-readout div { min-width: 0; }
.st-readout dt { font-family: var(--mono); font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--mat-dim); }
.st-readout dd { font-variant-numeric: tabular-nums; margin: 3px 0 0; font-family: var(--mono); font-size: 15px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-readout .f { font-size: 12px; color: var(--mat-dim); margin-left: 7px; }

/* ---- design ---- */
.st-design .drop { padding: 16px 14px; position: relative; }
.st-design .drop strong { font-weight: 600; }
.st-design .drop.has-file { padding: 10px 14px; }
.st-design .drop.has-file .drop-hint { display: none; }
.st-file { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.st-file[hidden] { display: none; }
.st-thumb { width: 52px; height: 52px; border-radius: 6px; border: 1px solid var(--line-2); background: repeating-conic-gradient(var(--paper-2) 0 25%, var(--card) 0 50%) 0 0 / 12px 12px; display: grid; place-items: center; overflow: hidden; }
.st-thumb canvas { max-width: 100%; max-height: 100%; box-shadow: none; }
.st-file-name { font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-file-px { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.st-fitrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--ink-2); }
.st-fitrow .seg button { padding: 4px 10px; font-size: 12.5px; }
.st-hint { font-size: 13px; color: var(--muted); margin: 0; }
.st-hint strong { color: var(--ink-2); font-weight: 500; font-family: var(--mono); font-size: 12.5px; }
.st-note { display: block; margin-top: 6px; color: var(--warn); }

/* ---- options ---- */
.st-optrow { display: grid; grid-template-columns: minmax(0, 1fr) 118px; gap: 10px; align-items: center; }
.st-optrow .check { font-size: 14px; }
.st-optrow > span { font-size: 14px; color: var(--ink); }
.st-optrow small { display: block; font-size: 12px; color: var(--muted); }
.st-optrow .input-unit .input { padding: 7px 34px 7px 10px; }
.st-optrow [hidden] { display: none; }

/* ---- export ---- */
.st-export .field > span { font-size: 13px; }
.st-exgroup { display: grid; gap: 8px; }
.st-exlabel { font-size: 13px; color: var(--ink-2); display: flex; justify-content: space-between; gap: 8px; }
.st-btns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.st-btns.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.st-btns .btn { padding: 10px 8px; font-size: 14px; }
.st-btns .btn small { font-family: var(--mono); font-size: 10.5px; opacity: .75; font-weight: 400; }
.st-export-msg { margin: 0; font-size: 13.5px; color: var(--warn); }
.st-export-msg[hidden] { display: none; }
.st-pro-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding-top: 12px; border-top: 1px dashed var(--line-2); }
.st-pro-row .btn { justify-content: space-between; padding: 10px 12px; font-size: 13.5px; white-space: normal; text-align: left; line-height: 1.25; }
.btn[aria-busy="true"] { cursor: progress; opacity: .7; }

/* ---- dialogs ---- */
.st-dialog-wide { width: min(640px, calc(100% - 24px)); max-height: calc(100vh - 48px); }
.st-dialog form { padding: 20px 22px 22px; }
.st-dlg-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.st-dlg-head h2 { font-size: 21px; display: flex; align-items: center; gap: 10px; }
.st-x { font: inherit; font-size: 22px; line-height: 1; background: none; border: 0; color: var(--muted); cursor: pointer; padding: 4px 8px; border-radius: 6px; }
.st-x:hover { background: var(--paper-2); color: var(--ink); }
.st-dlg-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.st-dlg-sub { font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 8px 0 6px; }
.st-tilemap { background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 10px; }
.st-tilemap svg { display: block; box-shadow: none; background: transparent; max-height: 260px; }
.tm-shape { fill: color-mix(in oklab, var(--accent) 10%, var(--card)); stroke: var(--ink); stroke-width: 1; }
.tm-sheet { fill: none; stroke: var(--accent); stroke-width: 1; stroke-dasharray: 4 3; }
.tm-label { fill: var(--accent); font-family: var(--mono); font-size: 11px; }
.st-batch-list { margin: 0; padding-left: 22px; max-height: 160px; overflow: auto; font-size: 13.5px; }
.st-presets { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.st-presets li { display: flex; gap: 6px; }
.st-preset-btn { flex: 1; display: grid; gap: 2px; text-align: left; font: inherit; color: inherit; background: var(--paper); border: 1px solid var(--line-2); border-radius: 8px; padding: 9px 12px; cursor: pointer; }
.st-preset-btn:hover { border-color: var(--accent); }
.st-preset-btn strong { font-size: 14px; font-weight: 600; }
.st-preset-btn .mono { font-size: 12.5px; color: var(--ink-2); }
.st-del { font: inherit; background: none; border: 1px solid var(--line-2); border-radius: 8px; width: 38px; cursor: pointer; color: var(--muted); }
.st-save-blank { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; }

/* ---- page bits shared by the guide pages ---- */
.tt-hero { padding: 18px 0 20px; display: grid; gap: 4px; }
.tt-hero h1 { font-size: clamp(28px, 3.5vw, 46px); }
.tt-hero .lede { margin-top: 8px; font-size: clamp(16px, 1.4vw, 18px); max-width: 74ch; }
.crumbs + .tt-hero { padding-top: 14px; }
.tt-facts { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 12px 0 0; padding: 0; list-style: none; font-size: 13.5px; color: var(--ink-2); }
.tt-facts li { display: inline-flex; align-items: center; gap: 8px; }
.tt-facts li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.formula { font-variant-numeric: tabular-nums; font-family: var(--mono); font-size: 14.5px; background: var(--card); border: 1px solid var(--line-2); border-radius: 10px; padding: 14px 18px; margin: 18px 0; display: grid; gap: 6px; overflow-x: auto; }
.formula span { white-space: nowrap; }
.formula .c { color: var(--muted); }
.two-col > * { min-width: 0; }
@media (max-width: 560px) { .formula { font-size: 13.5px; } .formula span { white-space: normal; } .formula .c { display: block; padding-left: 1.2em; } }
.figure { margin: 22px 0; border: 1px solid var(--line-2); border-radius: 12px; background: var(--card); padding: 18px; }
.figure svg { width: 100%; height: auto; display: block; box-shadow: none; background: transparent; max-height: none; }
.figure figcaption { font-size: 13.5px; color: var(--muted); margin-top: 10px; }
.fig-line { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; }
.fig-thin { fill: none; stroke: var(--ink-2); stroke-width: 1; }
.fig-guide { fill: none; stroke: var(--muted); stroke-width: 1; stroke-dasharray: 4 4; }
.fig-accent { fill: none; stroke: var(--accent); stroke-width: 1.6; }
.fig-fill { fill: color-mix(in oklab, var(--accent) 12%, var(--card)); }
.fig-t { fill: var(--ink-2); font-family: var(--mono); font-size: 13px; }
.fig-ta { fill: var(--accent); font-family: var(--mono); font-size: 13px; font-weight: 500; }
.open-link { font-family: var(--mono); font-size: 13px; white-space: nowrap; }
.tbl-note { font-size: 13px; color: var(--muted); margin: -8px 0 18px; }
.mini-tpl { display: block; width: 120px; height: 56px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0; }
.toc { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; margin: 14px 0 0; padding: 0; list-style: none; }

@media (max-width: 900px) {
  .studio, .studio[data-mode="warp"], .studio[data-mode="cone"] { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .studio { grid-template-areas: "meas" "stage" "design" "opts" "export"; }
  .studio[data-mode="warp"] { grid-template-areas: "design" "stage" "meas" "opts" "export"; }
  .studio[data-mode="cone"] { grid-template-areas: "meas" "stage" "opts" "export"; }
  .st-stage { border-left: 0; border-radius: 0; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
  .st-stage-in { position: static; height: auto; min-height: 0; }
  .st-mat { height: clamp(280px, 78vw, 480px); border-radius: 0; }
  .st-readout { border-radius: 0; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); padding: 12px 16px 14px; }
  .st-card { padding: 16px; }
  .crumbs { margin-top: 14px; }
  .tt-hero { padding-bottom: 16px; }
  .st-export { border-bottom: 0; }
}
@media (max-width: 400px) {
  .st-fields { gap: 8px; }
  .st-fields .input-unit .input { padding-right: 30px; font-size: 14px; }
  .st-fields .input-unit i { right: 8px; }
  .st-pro-row { grid-template-columns: 1fr; }
  .st-switch .seg button { padding: 4px 7px; font-size: 12px; }
  .tt-hero .lede { font-size: 15.5px; }
}
@media print { .studio { display: none; } }

/* Size tables: stacked rows on phones. Each cell carries its column name in data-label. */
@media (max-width: 640px) {
  table.stack thead { display: none; }
  table.stack, table.stack tbody, table.stack tr, table.stack td { display: block; width: 100%; }
  table.stack tr { padding: 12px 14px; border-bottom: 1px solid var(--line); }
  table.stack tbody tr:last-child { border-bottom: 0; }
  table.stack td { border: 0; padding: 1px 0; text-align: left; white-space: normal; font-size: 14px; }
  table.stack td:first-child { font-weight: 600; font-size: 15px; padding-bottom: 3px; }
  table.stack td[data-label]::before { content: attr(data-label) " "; color: var(--muted); font-family: var(--sans); font-size: 12.5px; margin-right: 4px; }
  table.stack td.num { font-family: var(--mono); }
  table.stack td:empty { display: none; }
}

/* Reserve the readout's space before the script fills it (no layout shift on phones). */
@media (max-width: 900px) { .st-readout:empty { min-height: 116px; } }
@media (max-width: 600px) { .st-readout:empty { min-height: 217px; } }

table td.num, table th.num { font-variant-numeric: tabular-nums; }

/* Long call-to-action labels wrap on narrow phones instead of pushing the page sideways. */
.cta-row .btn { white-space: normal; text-align: center; line-height: 1.25; }