/* Instant-Voxel components. Requires tokens.css. */
/* Base components. Reads tokens.css only; the system's own flavour follows below. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: var(--control-h, 40px); padding: 0 var(--btn-pad, 18px); border-radius: var(--radius-control, var(--radius-sm)); border: 1px solid transparent; font: var(--btn-weight, 500) var(--text-base)/1 var(--font-sans); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background var(--motion-fast), border-color var(--motion-fast), transform var(--motion-fast), box-shadow var(--motion-fast); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.btn-primary { background: var(--accent); color: var(--accent-on); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-secondary { background: var(--surface); color: var(--fg); border-color: var(--border); }
.btn-secondary:hover { border-color: var(--border-strong); }
.btn-ghost { background: transparent; color: var(--fg-2); }
.btn-ghost:hover { background: var(--surface-hover); color: var(--fg); }
.btn-danger { background: transparent; color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.btn[disabled] { background: var(--surface-warm); color: var(--muted); border-color: transparent; box-shadow: none; cursor: not-allowed; transform: none; opacity: .7; }
.btn-sm { height: calc(var(--control-h, 40px) - 8px); padding: 0 12px; font-size: var(--text-sm); }

.field { display: grid; gap: var(--space-2); align-content: start; }
.field > label, .field > .label { font-size: var(--text-sm); font-weight: 500; color: var(--fg-2); }
.input { height: var(--control-h, 40px); padding: 0 var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-control, var(--radius-sm)); background: var(--surface); color: var(--fg); font: 400 var(--text-base) var(--font-sans); width: 100%; min-width: 0; }
textarea.input { height: auto; min-height: 96px; padding: var(--space-3); line-height: var(--leading-body); resize: vertical; }
.input::placeholder { color: var(--muted); opacity: 1; }
.input:focus { outline: none; border-color: var(--focus, var(--accent)); box-shadow: var(--ring-focus); }
.input.is-error { border-color: var(--danger); }
.help { font-size: var(--text-sm); color: var(--muted); }
.error { font-size: var(--text-sm); color: var(--danger); }

.badge { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; border: 1px solid var(--border); border-radius: var(--radius-badge, var(--radius-sm)); font-size: var(--text-xs); font-weight: 500; color: var(--fg-2); background: var(--surface); white-space: nowrap; }
.badge.ok { color: var(--success); border-color: color-mix(in srgb, var(--success) 35%, transparent); background: var(--success-subtle); }
.badge.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 35%, transparent); background: var(--warn-subtle); }
.badge.danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, transparent); background: var(--danger-subtle); }

.tabs { display: flex; gap: var(--space-6); border-bottom: 1px solid var(--border); overflow-x: auto; }
.tabs > * { padding: var(--space-3) 0; font-size: var(--text-sm); font-weight: 500; color: var(--muted); text-decoration: none; background: none; border: 0; cursor: pointer; white-space: nowrap; font-family: inherit; }
.tabs > .on, .tabs > [aria-selected="true"] { color: var(--fg); box-shadow: inset 0 -2px 0 var(--tab-rule, var(--accent)); }

.card { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-card, var(--radius-md)); padding: var(--space-6); display: grid; gap: var(--space-4); }
.empty { border: 1px dashed var(--border-strong); border-radius: var(--radius-card, var(--radius-md)); padding: var(--space-10) var(--space-8); display: grid; gap: var(--space-3); justify-items: start; color: var(--fg-2); }
.empty h3 { margin: 0; font-size: var(--text-lg); font-weight: 600; color: var(--fg); }

.table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.table th { text-align: left; font-weight: 500; color: var(--muted); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border); white-space: nowrap; }
.table td { padding: var(--space-3); border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---- Instant-Voxel ---- */
/* Material Symbols, outlined, 20px */
.ms { font-family: var(--font-icon); font-weight: 400; font-style: normal; font-size: 20px; line-height: 1; letter-spacing: normal; text-transform: none; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; font-feature-settings: "liga"; font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 20; }
.mono { font-family: var(--font-mono); font-size: .92em; font-variant-numeric: tabular-nums; }

/* Buttons: pills, no borders. Solid moss is the one decisive action. */
.btn { border: 0; }
.btn-soft { background: var(--accent-subtle); color: var(--accent-subtle-on); }
.btn-soft:hover { background: #98BD90; }
.btn-secondary { background: var(--surface-high); color: var(--fg); }
.btn-secondary:hover { background: var(--surface-highest); }
.btn-ghost { color: var(--accent); }
.btn-ghost:hover { background: transparent; text-decoration: underline; text-underline-offset: 4px; }
.btn-danger { background: var(--danger-subtle); border: 0; }
.btn-wide { width: 100%; }
.btn[disabled] { background: var(--surface-low); color: var(--muted); opacity: 1; }

/* Panel card and its label */
.pcard { background: var(--bg); border-radius: var(--radius-lg); padding: var(--space-5); display: grid; gap: var(--space-4); }
.pcard-label { font-size: var(--text-2xs); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--muted); }
.pcard-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }

/* Fields: tonal wells */
.input, .select { height: var(--control-h); border: 0; border-radius: var(--radius-md); background: var(--surface-low); font-size: var(--text-base); }
.select { appearance: none; padding: 0 36px 0 14px; width: 100%; color: var(--fg); font-family: var(--font-sans); background-image: none; cursor: pointer; }
.select-wrap { position: relative; }
.select-wrap::after { content: "expand_more"; position: absolute; right: 10px; top: 50%; translate: 0 -50%; font: 20px var(--font-icon); color: var(--muted); pointer-events: none; }
.input:focus, .select:focus { outline: none; box-shadow: var(--ring-focus); }
.field > label { font-size: var(--text-sm); font-weight: 600; color: var(--fg-2); }
.field .row { display: flex; justify-content: space-between; align-items: baseline; }
.field .val { font: 500 var(--text-sm) var(--font-mono); color: var(--fg); }

/* Range: native, moss accent, no gradient track */
.range { width: 100%; height: 24px; margin: 0; accent-color: var(--accent); cursor: pointer; }

/* Segmented pill */
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; background: var(--surface-low); border-radius: var(--radius-pill); }
.seg button { height: 32px; padding: 0 10px; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--fg-2); font: 600 var(--text-sm) var(--font-sans); cursor: pointer; white-space: nowrap; }
.seg button[aria-pressed="true"] { background: var(--bg); color: var(--fg); box-shadow: 0 1px 3px rgba(26, 28, 28, 0.08); }
.seg button:focus-visible { outline: none; box-shadow: var(--ring-focus); }

/* Chips */
.chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border: 0; border-radius: var(--radius-pill); background: var(--surface-warm); color: var(--fg-2); font: 600 var(--text-sm) var(--font-sans); cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--lichen); color: var(--lichen-on); }

/* Tool grid */
.tools { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.tools button { display: grid; place-items: center; aspect-ratio: 1; border: 0; border-radius: var(--radius-md); background: var(--surface-low); color: var(--fg-2); cursor: pointer; transition: background var(--motion-fast); }
.tools button:hover { background: var(--surface-warm); color: var(--fg); }
.tools button[aria-pressed="true"] { background: var(--accent-subtle); color: var(--accent-subtle-on); }
.tools button:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.tools .ms { font-size: 22px; }

/* Icon button */
.icon-btn { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: var(--fg-2); cursor: pointer; }
.icon-btn:hover { background: var(--surface-low); color: var(--fg); }
.icon-btn[disabled] { color: var(--meta); cursor: default; background: transparent; }
.icon-btn:focus-visible { outline: none; box-shadow: var(--ring-focus); }

/* Switch */
.switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: var(--text-sm); font-weight: 500; color: var(--fg-2); cursor: pointer; }
.switch input { appearance: none; width: 40px; height: 24px; margin: 0; border-radius: var(--radius-pill); background: var(--surface-highest); position: relative; cursor: pointer; transition: background var(--motion-fast); flex: none; }
.switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--bg); box-shadow: 0 1px 2px rgba(26, 28, 28, 0.2); transition: translate var(--motion-fast) var(--ease-out); }
.switch input:checked { background: var(--accent); }
.switch input:checked::after { translate: 16px 0; }
.switch input:focus-visible { outline: none; box-shadow: var(--ring-focus); }

/* Drop zone: a tonal well, never a dashed line */
.drop { display: grid; justify-items: center; gap: 6px; padding: var(--space-6) var(--space-4); border-radius: var(--radius-md); background: var(--surface-low); text-align: center; color: var(--fg-2); font-size: var(--text-sm); cursor: pointer; transition: background var(--motion-fast); }
.drop:hover, .drop.over { background: var(--lichen); color: var(--lichen-on); }
.drop .ms { font-size: 28px; color: var(--accent); }
.drop b { color: var(--fg); font-weight: 600; }
.file { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-md); background: var(--surface-low); font-size: var(--text-sm); }
.file .ms { color: var(--accent); }
.file .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Swatches */
.swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.swatches i { width: 22px; height: 22px; border-radius: 7px; background: var(--c, var(--vx-grass)); }

/* Glass pill (floating status) */
.glass { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: var(--radius-pill); background: var(--glass); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: var(--elev-raised); font-size: var(--text-sm); font-weight: 600; color: var(--fg); }
.glass .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.glass .dot.busy { background: var(--accent-subtle); animation: pulse 1.2s var(--ease-out) infinite; }
@keyframes pulse { 50% { scale: 1.6; opacity: .5; } }
@media (prefers-reduced-transparency: reduce) { .glass { background: var(--bg); backdrop-filter: none; } }