/* Kalkulator Harga Laser Cut (from the UV Print calculator).
   The token block below is the same one the other tools use, so the family
   stays one family in both light and dark. */

:root {
  --bg: #f4f5f7;
  --surface: #ffffff;
  --surface-2: #fafbfc;
  --line: #e3e5e9;
  --line-strong: #d0d4da;
  --text: #16181d;
  --muted: #6b7280;
  --accent: #2f7d4f;
  --accent-soft: #e7f3ec;
  --danger: #d4383d;
  --warn: #a35b06;
  --warn-soft: #fdf3e3;
  --warn-line: #e8c98e;
  --grid: #e8eaee;
  --shadow: 0 1px 2px rgba(16, 18, 21, .06), 0 8px 24px rgba(16, 18, 21, .06);
  --radius: 10px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16181c;
    --surface: #1e2126;
    --surface-2: #23262c;
    --line: #2e323a;
    --line-strong: #3a3f48;
    --text: #e8eaed;
    --muted: #9aa1ad;
    --accent: #4ade80;
    --accent-soft: #1c2f24;
    --danger: #f87171;
    --warn: #f0b45e;
    --warn-soft: #2c2415;
    --warn-line: #5c4a22;
    --grid: #262a31;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.45 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

#app { display: flex; flex-direction: column; min-height: 100vh; }

button { font-family: inherit; }

.primary {
  border: 0; background: var(--accent); color: #fff;
  font-family: inherit; font-weight: 600; font-size: 13px; line-height: 1;
  padding: 11px 18px; border-radius: 8px; cursor: pointer;
}
@media (prefers-color-scheme: dark) { .primary { color: #0b1410; } }
.primary:hover:not(:disabled) { filter: brightness(1.06); }
.primary:disabled { opacity: .4; cursor: default; }
.primary.wide { width: 100%; padding: 13px 18px; font-size: 14px; }

.ghost {
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--text);
  font-family: inherit; font-weight: 600; font-size: 13px; line-height: 1;
  padding: 9px 14px; border-radius: 8px; cursor: pointer;
}
.ghost:hover { background: var(--surface-2); }
.ghost.small { padding: 7px 11px; font-size: 12px; }

code {
  font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 4px; padding: 0 4px;
}

/* ---------- top bar ---------- */

.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px; background: var(--surface); border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.logo { color: var(--accent); font-size: 18px; }
.app-title { margin: 0; font-size: 16px; font-weight: 600; }
.status { color: var(--accent); font-size: 12px; white-space: nowrap; }

/* The sentence that separates this tool from Template Adjuster. It is never
   collapsed and never behind a toggle - to a stranger the two tools look the
   same, and the difference is the whole point of each. */
.differ {
  margin: 0; padding: 10px 16px; font-size: 13px; line-height: 1.5;
  background: var(--accent-soft); color: var(--text);
  border-bottom: 1px solid var(--line);
}
.differ a { color: var(--accent); font-weight: 600; text-decoration: none; }
.differ a:hover { text-decoration: underline; }

.banner {
  margin: 12px 16px 0; padding: 11px 13px; border-radius: var(--radius);
  background: var(--warn-soft); border: 1px solid var(--warn-line);
  color: var(--warn); font-size: 13px;
}
.banner[hidden] { display: none; }

/* ---------- uv print: layout ---------- */

/* minmax(0, 1fr), never a bare 1fr: a bare 1fr is minmax(auto, 1fr), and the
   piece table's minimum width would push the preview column narrower. */
.layout {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 16px; align-items: start; align-content: start; padding: 16px; flex: 1;
  width: 100%; max-width: 1180px; margin: 0 auto;
}
.layout[hidden] { display: none; }
.col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.col-body { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.col-body[hidden] { display: none; }

.pane {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden;
}
.pane[hidden] { display: none; }
.pane-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding: 9px 12px; font-size: 12px; border-bottom: 1px solid var(--line);
}
.pane-title { color: var(--muted); font-weight: 600; letter-spacing: .02em; }
.pane-size { color: var(--text); font-variant-numeric: tabular-nums; }
.pane .preview {
  width: 100%; height: 380px; display: block;
  background:
    linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 20px 20px,
    linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / 20px 20px,
    var(--surface-2);
}
.pane-note {
  margin: 0; padding: 8px 12px; font-size: 11.5px; color: var(--muted);
  border-top: 1px solid var(--line); background: var(--surface-2);
}
.pane-empty-text { fill: var(--muted); font-family: inherit; }

.legend { display: flex; gap: 16px; flex-wrap: wrap; }
.key { display: inline-flex; align-items: center; gap: 6px; }
.key::before { content: ""; width: 18px; height: 0; border-top: 2px solid; }
.key-cut::before { border-color: var(--cut); }
.key-score::before { border-color: var(--score); }
.key-engrave::before { height: 10px; width: 14px; border: 0; background: var(--engrave); border-radius: 2px; box-shadow: 0 0 0 1px var(--art); }
.key[hidden] { display: none; }

:root {
  --cut: #e0262d; --score: #2563eb; --engrave: #2b2f36; --board: #f1e4cc; --art: #c3c9d2;
  --cut-soft: rgba(224, 38, 45, .16); --wa: #1c9d55;
}
@media (prefers-color-scheme: dark) {
  :root { --cut: #ff5a5f; --score: #6ea0ff; --engrave: #0e1013; --board: #4a3f2e; --art: #5b6370; --cut-soft: rgba(255, 90, 95, .2); --wa: #25d366; }
}

.board { stroke: none; }
.art { fill: none; stroke: var(--art); stroke-width: 1px; stroke-linejoin: round; }
.engrave { fill: var(--engrave); stroke: none; }
.engrave.raster { opacity: .55; }
.engrave-line { fill: none; stroke: var(--engrave); stroke-linecap: round; stroke-linejoin: round; }
.score { fill: none; stroke: var(--score); stroke-width: 1.5px; stroke-linejoin: round; }
.cut { fill: none; stroke: var(--cut); stroke-width: 2px; stroke-linejoin: round; }
.cut.piece-bad { fill: var(--cut-soft); stroke-width: 3px; }
.label {
  fill: var(--cut); font-family: inherit; font-weight: 700;
  paint-order: stroke; stroke: var(--surface-2); stroke-width: 3px;
  stroke-linejoin: round; font-variant-numeric: tabular-nums;
}
.label { vector-effect: non-scaling-stroke; }

/* ---------- file information ---------- */

.file-row { display: flex; align-items: center; gap: 8px; }
.file-row .ghost { min-height: 40px; }
.file-name {
  flex: 1; font-size: 13px; font-weight: 600; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rule-line {
  margin: 0; font-size: 13px; padding: 9px 11px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--cut);
}
.block-title {
  margin: 4px 0 0; font-size: 12px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted); display: block;
}
.chip {
  display: inline-block; font-size: 11px; line-height: 1.3; white-space: nowrap;
  padding: 2px 7px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--muted);
}
.chip-bad { margin-left: 6px; background: var(--cut-soft); border-color: var(--cut); color: var(--cut); }
.fineprint { margin: 0; font-size: 12px; color: var(--muted); line-height: 1.55; }
.fineprint.center { text-align: center; }
.warn-box {
  background: var(--warn-soft); border: 1px solid var(--warn-line);
  border-radius: var(--radius); padding: 11px 13px; color: var(--warn);
}
.warn-box h4 { margin: 0 0 6px; font-size: 12.5px; }
.warn-box ul { margin: 0; padding-left: 18px; font-size: 12.5px; line-height: 1.55; }

/* ---------- controls ---------- */

.target-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.target-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  min-height: 56px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text);
  font-family: inherit; font-weight: 600; font-size: 15px; line-height: 1.1;
  padding: 9px 6px; border-radius: 8px; cursor: pointer;
}
.target-btn .m-rate { font-size: 11px; font-weight: 500; color: var(--muted); }
.target-btn:hover { background: var(--surface-2); }
.target-btn.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
.target-btn.is-on .m-rate { color: inherit; opacity: .9; }
@media (prefers-color-scheme: dark) { .target-btn.is-on { color: #0b1410; } }

.stepper { display: grid; grid-template-columns: 52px minmax(0, 1fr) 52px; gap: 8px; }
.stepper .step { min-height: 46px; font-size: 20px; padding: 0; }
.stepper input {
  /* 16px or more: iOS Safari zooms the page into any smaller input. */
  min-height: 46px; width: 100%; text-align: center;
  font-family: inherit; font-weight: 600; font-size: 18px; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--text); background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: 8px; padding: 0 8px;
}
.stepper input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.stepper input[aria-invalid="true"] { border-color: var(--danger); }

/* ---------- the quote ---------- */

.banner-inline {
  margin: 0; padding: 11px 13px; border-radius: var(--radius); font-size: 13.5px; line-height: 1.5;
  background: var(--warn-soft); border: 1px solid var(--warn-line); color: var(--warn); font-weight: 600;
}
.total-card {
  display: flex; flex-direction: column; gap: 10px; padding: 14px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.sum { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; margin: 0; font-size: 13px; }
.sum dt { color: var(--muted); }
.sum dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.min-note {
  margin: 0; font-size: 13px; font-weight: 600; color: var(--warn);
  background: var(--warn-soft); border: 1px solid var(--warn-line); border-radius: 8px; padding: 7px 10px;
}
.total-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  border-top: 1px solid var(--line); padding-top: 10px;
}
.total-label { font-size: 14px; font-weight: 600; }
.total { font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.disclaimer { margin: 0; font-size: 12.5px; color: var(--muted); }

.wa-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 16px; border-radius: 10px;
  background: var(--wa); color: #fff; font-weight: 700; font-size: 15px; text-decoration: none;
}
.wa-btn:hover { filter: brightness(1.05); }
.wa-btn:focus-visible { outline: 3px solid var(--text); outline-offset: 2px; }
@media (prefers-color-scheme: dark) { .wa-btn { color: #062b15; } }
.wa-icon { font-size: 17px; line-height: 1; }

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.pieces { width: 100%; border-collapse: collapse; font-size: 13px; }
.pieces th, .pieces td { padding: 7px 10px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
.pieces th { font-size: 11.5px; color: var(--muted); font-weight: 600; background: var(--surface-2); }
.pieces tr:last-child td { border-bottom: 0; }
.pieces .num { text-align: right; font-variant-numeric: tabular-nums; }
.pieces td.num:first-child, .pieces th.num:first-child { text-align: left; width: 2.5em; }
.row-bad td { color: var(--cut); font-weight: 600; }

/* ---------- empty state and drop target ---------- */

.primary.big { padding: 15px 26px; font-size: 16px; min-height: 52px; }
.empty-state {
  flex: 1; display: grid; align-content: center; justify-items: center;
  gap: 12px; text-align: center; padding: 36px 24px;
}
.empty-state[hidden] { display: none; }
.empty-state h2 { margin: 0; font-size: 22px; }
.empty-state p { margin: 0; max-width: 48ch; color: var(--muted); font-size: 13.5px; line-height: 1.55; }
.empty-actions { margin-top: 4px; }
.rate-card {
  list-style: none; margin: 6px 0 0; padding: 0; width: 100%; max-width: 360px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.rate-card li { display: flex; justify-content: space-between; padding: 9px 14px; font-size: 13.5px; border-bottom: 1px solid var(--line); }
.rate-card li:last-child { border-bottom: 0; }
.rate-card strong { font-variant-numeric: tabular-nums; }

.drop-veil {
  position: fixed; inset: 12px; z-index: 5; display: grid; place-items: center;
  border: 2px dashed var(--accent); border-radius: 14px; background: var(--accent-soft);
  color: var(--accent); font-size: 15px; font-weight: 600; pointer-events: none;
}
.drop-veil[hidden] { display: none; }

/* ---------- phone ---------- */

@media (max-width: 760px) {
  .layout { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 12px; }
  .pane .preview { height: 260px; }
  .topbar { padding: 9px 12px; }
  .differ { padding: 9px 12px; font-size: 12.5px; }
  .total { font-size: 26px; }
}

/* ---------- laser: how the price is made ---------- */

.breakdown { margin-top: 4px; border-top: 1px solid var(--line); padding-top: 10px; }
.breakdown summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--muted); min-height: 32px; display: flex; align-items: center; }
.breakdown summary:hover { color: var(--text); }
.breakdown .sum { margin-top: 8px; }
.tips { margin: 12px 0 0; padding-left: 18px; color: var(--muted); font-size: 13px; text-align: left; }
.tips li { margin: 4px 0; }
.tips .sw { display: inline-block; width: 14px; height: 0; border-top: 2px solid; vertical-align: middle; margin-right: 4px; }
.tips .sw-fill { height: 10px; border: 0; border-radius: 2px; background: var(--engrave); }
.total-card > .total-row:first-child { border-top: 0; padding-top: 0; }

/* ---------- laser: the material picker ----------
   A card per material with a swatch that looks like the board - wood grain,
   glassy acrylic, glossy black, brushed mirror - and the thicknesses it comes
   in. The chosen card lifts and gets a tick; mirrors catch a moving shine on
   hover. Below it, the thickness as a segmented row. */

.mat-picker { display: flex; flex-direction: column; gap: 10px; }
.mat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mat-card {
  position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 0;
  padding: 0; overflow: hidden; text-align: left; cursor: pointer;
  background: var(--surface); color: var(--text);
  border: 1.5px solid var(--line); border-radius: 12px;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.mat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.mat-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mat-card.is-on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow); transform: translateY(-2px); }
.mat-swatch { position: relative; display: block; height: 52px; overflow: hidden; border-bottom: 1px solid var(--line); }
.mat-shine {
  position: absolute; inset: -40% -60%; display: block;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .55) 50%, transparent 60%);
  transform: translateX(-60%); transition: transform .6s ease;
}
.mat-card:hover .mat-shine, .mat-card.is-on .mat-shine { transform: translateX(60%); }
.mat-text { display: flex; flex-direction: column; padding: 7px 9px 8px; min-width: 0; }
.mat-name { font-size: 13px; font-weight: 700; line-height: 1.2; }
.mat-sub { font-size: 11px; color: var(--muted); margin-top: 2px; font-variant-numeric: tabular-nums; }
.mat-check {
  position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px; font-weight: 800;
  background: var(--accent); color: #fff; opacity: 0; transform: scale(.6);
  transition: opacity .15s ease, transform .15s ease;
}
.mat-card.is-on .mat-check { opacity: 1; transform: scale(1); }
@media (prefers-color-scheme: dark) { .mat-check { color: #0b1410; } }

.mat-ply .mat-swatch {
  background:
    radial-gradient(ellipse 9px 4px at 72% 58%, rgba(120, 76, 30, .35), transparent 70%),
    repeating-linear-gradient(176deg, #e6c48f 0 5px, #dcb67c 5px 7px, #edd2a3 7px 12px, #d9b277 12px 13px);
}
.mat-mdf .mat-swatch {
  background:
    radial-gradient(circle at 20% 30%, rgba(0, 0, 0, .08) 1px, transparent 1.5px) 0 0 / 7px 7px,
    radial-gradient(circle at 70% 60%, rgba(255, 255, 255, .12) 1px, transparent 1.5px) 0 0 / 9px 9px,
    #b98a5e;
}
.mat-clear .mat-swatch {
  background:
    linear-gradient(135deg, rgba(207, 232, 245, .85), rgba(255, 255, 255, .35) 50%, rgba(185, 220, 239, .8)),
    repeating-conic-gradient(#e9edf1 0 25%, #ffffff 0 50%) 0 0 / 12px 12px;
}
.mat-black .mat-swatch { background: linear-gradient(160deg, #3b3e44 0%, #1d1e21 45%, #2c2e33 55%, #0f1012 100%); }
.mat-gold .mat-swatch { background: linear-gradient(120deg, #9c7a26 0%, #f6dc87 30%, #b8902f 52%, #fff0b3 70%, #a7832b 100%); }
.mat-silver .mat-swatch { background: linear-gradient(120deg, #8c9198 0%, #f2f4f6 30%, #a5abb2 52%, #ffffff 70%, #8a9097 100%); }
.mat-black .mat-shine { background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .28) 50%, transparent 60%); }

.thick-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.thick-label { font-size: 12px; font-weight: 600; color: var(--muted); margin-right: 4px; }
.thick-chip {
  min-height: 40px; min-width: 64px; padding: 0 14px; border-radius: 999px; cursor: pointer;
  font: inherit; font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums;
  background: var(--surface); color: var(--text); border: 1.5px solid var(--line-strong);
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.thick-chip:hover { border-color: var(--accent); }
.thick-chip.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
@media (prefers-color-scheme: dark) { .thick-chip.is-on { color: #0b1410; } }

/* ---------- laser: size ---------- */

.size-row { display: flex; align-items: flex-end; gap: 8px; }
.size-field { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 6px; align-items: center; }
.size-label { grid-column: 1 / -1; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.size-field input {
  min-height: 44px; width: 100%; text-align: center;
  font-family: inherit; font-weight: 600; font-size: 17px; font-variant-numeric: tabular-nums;
  color: var(--text); background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: 8px; padding: 0 8px;
}
.size-field input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.size-unit { font-size: 13px; color: var(--muted); }
.size-lock { padding-bottom: 12px; color: var(--muted); font-weight: 700; }
.size-note { margin-top: 6px; }
.link-btn {
  background: none; border: 0; padding: 0; font: inherit; color: var(--accent);
  font-weight: 600; text-decoration: underline; cursor: pointer;
}
.link-btn[hidden] { display: none; }

/* ---------- laser: layers ---------- */

.layer-list { list-style: none; margin: 0 0 6px; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.layer-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.layer-row:last-child { border-bottom: 0; }
.layer-row.role-ignore .layer-text, .layer-row.role-ignore .layer-swatch { opacity: .45; }
.layer-swatch { width: 24px; height: 24px; border-radius: 6px; position: relative; --sw: #888; }
.sw-fill { background: var(--sw); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.sw-line::after, .sw-thick::after {
  content: ""; position: absolute; left: 2px; right: 2px; top: 50%;
  border-top: 2px solid var(--sw); transform: rotate(-30deg);
}
.sw-thick::after { border-top-width: 5px; margin-top: -2px; }
.sw-line, .sw-thick { box-shadow: inset 0 0 0 1px var(--line-strong); }
.sw-image { background: linear-gradient(135deg, #7bb3d6, #f3d27a 60%, #6aa86a); }
.sw-frame { border: 2px dashed var(--muted); }
.sw-spot::after, .sw-named::after { content: "\2702"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--cut); font-size: 15px; }
.sw-spot, .sw-named { box-shadow: inset 0 0 0 1px var(--line-strong); }
.layer-text { display: flex; flex-direction: column; min-width: 0; }
.layer-name { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.layer-kind { font-size: 11.5px; color: var(--muted); }
.role-select {
  min-height: 40px; padding: 0 30px 0 12px; border-radius: 8px; cursor: pointer;
  font: inherit; font-size: 13.5px; font-weight: 700;
  color: var(--text); background-color: var(--surface);
  border: 1.5px solid var(--line-strong); border-left-width: 5px;
  appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%;
  background-size: 5px 5px; background-repeat: no-repeat;
}
.role-select[data-role="cut"] { border-left-color: var(--cut); }
.role-select[data-role="engrave"] { border-left-color: #2b2f36; }
.role-select[data-role="score"] { border-left-color: var(--score); }
.role-select[data-role="ignore"] { border-left-color: var(--line-strong); color: var(--muted); }
@media (prefers-color-scheme: dark) { .role-select[data-role="engrave"] { border-left-color: #9aa1ad; } }

.board-box { stroke: var(--muted); stroke-dasharray: 4 3; stroke-width: 1px; }

@media (min-width: 1100px) {
  .mat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 360px) {
  .mat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- the static price guide (for people and AI assistants) ----------
   Plain HTML written by tools/build-ai-files.mjs, readable without JavaScript.
   Closed by default so it stays out of the way of the calculator. */

.ai-guide {
  width: min(980px, calc(100% - 32px)); margin: 8px auto 28px; padding: 4px 16px 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  font-size: 13px; color: var(--text);
}
.ai-guide summary { cursor: pointer; font-weight: 700; min-height: 40px; display: flex; align-items: center; color: var(--muted); }
.ai-guide summary:hover { color: var(--text); }
.ai-guide p { margin: 8px 0; line-height: 1.55; }
.ai-guide a { color: var(--accent); font-weight: 600; }
.ai-table { width: 100%; border-collapse: collapse; margin: 8px 0; font-variant-numeric: tabular-nums; }
.ai-table th, .ai-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.ai-table th { font-size: 12px; color: var(--muted); font-weight: 600; }