/* Saymake's tool: the description form, printer size, status, result and
   settings. Everything is scoped under .saymake, so the same stylesheet works
   in the standalone page and inside kinglet.dev's layout, whose own .button
   or .error rules it must not change. It relies on the Kinglet brand tokens
   (--bg, --fg, --muted, --line, --link, --focus, --button-bg, --button-fg,
   --paper, --radius, --font-sans) and sets its own few below. It lays itself
   out by its own width (container queries), not the window's, so it fits
   whatever column a host page gives it. */
.saymake { container-type: inline-size; --surface: #f4f4f0; --paper-ink: #59636e; --cut: #c4381e; --score: #1d4fc4; }
@media (prefers-color-scheme: dark) { .saymake { --surface: #171a20; } }
.saymake [hidden] { display: none !important; }
.saymake *, .saymake *::before, .saymake *::after { box-sizing: border-box; }
.saymake h2 { font-size: 1.5rem; font-weight: 500; margin: 0 0 .75rem; }
.saymake .sm-hint { color: var(--muted); font-size: .9375rem; margin: .5rem 0 0; }
.saymake .sm-describe { margin: .5rem 0 1rem; } /* its own margins don't merge with the page's (container) */
.saymake .sm-describe label { display: block; font-weight: 500; margin-bottom: .375rem; }
.saymake .sm-row { display: flex; gap: .75rem; flex-wrap: wrap; }
.saymake .sm-row input { flex: 1 1 18rem; min-width: 0; min-height: 3rem; padding: 0 .875rem; border: 1px solid var(--muted); border-radius: var(--radius); background: var(--bg); color: var(--fg); font: inherit; }
.saymake .sm-button { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: 0 1.5rem; border: 0; border-radius: var(--radius); background: var(--button-bg); color: var(--button-fg); font: inherit; font-weight: 500; cursor: pointer; }
.saymake .sm-button:disabled { opacity: .55; cursor: default; }
.saymake .sm-button-secondary { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1rem; border: 1px solid var(--muted); border-radius: var(--radius); background: transparent; color: var(--fg); font: inherit; cursor: pointer; }
.saymake .sm-status { min-height: 1.55em; color: var(--muted); margin: 0 0 .75rem; }
.saymake .sm-error { padding: .75rem 1rem; border-left: 3px solid var(--link); background: var(--surface); margin: 0 0 1rem; }
.saymake .sm-result { margin: 1.5rem 0 0; }
.saymake .sm-chips { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 0 0 .75rem; }
.saymake .sm-chips li { padding: .25rem .75rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: .9375rem; }
.saymake .sm-chips .sm-object { border-color: var(--fg); font-weight: 500; }
.saymake .sm-chips .sm-unused, .saymake .sm-chips .sm-unknown { border-style: dashed; color: var(--muted); }
.saymake .sm-notes { color: var(--muted); font-size: .9375rem; padding-left: 1.25rem; margin: 0 0 1rem; }
.saymake .sm-workspace { display: grid; grid-template-columns: minmax(0, 3fr) minmax(16rem, 2fr); gap: 1.5rem; align-items: start; }
@container (max-width: 52rem) { .saymake .sm-workspace { grid-template-columns: minmax(0, 1fr); } }
.saymake .sm-preview { margin: 0; }
@container (min-width: 52.01rem) { .saymake .sm-preview { position: sticky; top: 1rem; } }
.saymake .sm-preview canvas, .saymake .sm-view2d, .saymake .sm-no3d { display: block; width: 100%; aspect-ratio: 4 / 3; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); touch-action: none; }
.saymake .sm-preview canvas { cursor: grab; }
.saymake .sm-view2d svg { width: 100%; height: 100%; display: block; }
.saymake .sm-view2d .sm-cut { stroke: var(--cut); fill: none; stroke-width: 2; }
.saymake .sm-view2d .sm-score { stroke: var(--score); fill: none; stroke-width: 2; stroke-dasharray: 6 4; }
.saymake .sm-no3d { display: grid; place-items: center; padding: 1rem; color: var(--paper-ink); text-align: center; }
.saymake .sm-preview figcaption { margin-top: .5rem; color: var(--muted); font-size: .9375rem; }
.saymake .sm-findings { list-style: none; padding: 0; margin: 0 0 1rem; }
.saymake .sm-findings li { padding: .625rem .875rem; border-left: 3px solid var(--muted); background: var(--surface); margin-bottom: .5rem; font-size: .9375rem; }
.saymake .sm-findings .sm-error-level { border-left-color: var(--link); }
.saymake .sm-findings .sm-level { display: block; font-size: .8125rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.saymake .sm-downloads { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.saymake .sm-downloads .sm-button { min-height: 2.75rem; padding: 0 1rem; }
.saymake .sm-settings { border-top: 1px solid var(--line); padding-top: .75rem; }
.saymake .sm-settings summary { cursor: pointer; font-weight: 500; display: list-item; padding: .625rem 0; }
.saymake .sm-setting { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0 .75rem; margin: .375rem 0 .75rem; }
.saymake .sm-setting label { font-size: .9375rem; }
.saymake .sm-setting .sm-value { font-variant-numeric: tabular-nums; color: var(--muted); font-size: .9375rem; }
.saymake .sm-setting input { grid-column: 1 / -1; width: 100%; min-height: 2rem; accent-color: var(--button-bg); }
.saymake .sm-chips .sm-unsupported { border-style: dashed; color: var(--muted); }
.saymake .sm-printer { margin: 0 0 1rem; }
.saymake .sm-printer summary { cursor: pointer; display: list-item; padding: .625rem 0; color: var(--muted); }
.saymake .sm-printer-size { max-width: 22rem; display: grid; gap: .5rem; margin: .25rem 0 .5rem; }
.saymake .sm-printer-size label { display: flex; justify-content: space-between; align-items: center; gap: .75rem; font-size: .9375rem; }
.saymake .sm-printer-size input { width: 6.5rem; min-height: 2.75rem; padding: 0 .5rem; border: 1px solid var(--muted); border-radius: var(--radius); background: var(--bg); color: var(--fg); font: inherit; }