/* NAMI_LIGHT_TOOL_V1
   Canonical reference: Tile Edge-Cut Symmetry Planner.
   Product logic stays product-specific; typography, palette, spacing, cards,
   controls, support placement, and aftercare geometry stay Nami-consistent. */

html:has(body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"]) {
  background:#eef3f9;
}

body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"] {
  --nami-ink:#102039;
  --nami-muted:#5e6b7d;
  --nami-line:#d9e0e9;
  --nami-soft:#f4f7fb;
  --nami-paper:#ffffff;
  --nami-page:#eef3f9;
  --nami-accent:#0c5df6;
  --nami-accent-dark:#0848bd;
  --nami-accent-soft:#eaf1ff;
  --nami-good:#08765a;
  --nami-good-soft:#e7f7f1;
  --nami-warn:#a44900;
  --nami-warn-soft:#fff1df;
  --nami-danger:#b42318;
  --nami-danger-soft:#fff0ee;
  --nami-shadow:0 18px 60px rgba(16,32,57,.10);
  --nami-radius:20px;

  margin:0 !important;
  color:var(--nami-ink) !important;
  background:
    radial-gradient(circle at 8% -15%, rgba(12,93,246,.15), transparent 33rem),
    linear-gradient(180deg,#f9fbfe 0,#eef3f9 38rem) !important;
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
}

body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"] *,
body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"] *::before,
body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"] *::after {
  box-sizing:border-box;
}

body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"] > header.masthead,
body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"] > main,
body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"] .shell {
  width:min(1180px,calc(100% - 2rem)) !important;
  margin-inline:auto !important;
}

body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"] .shell {
  padding:2.8rem 0 3.5rem !important;
}

body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"] > header.masthead {
  padding:2.8rem 0 0 !important;
  margin-bottom:2rem !important;
}

body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"] > main {
  padding-bottom:3.5rem;
}

body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"] .masthead,
body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"] .hero {
  display:flex !important;
  align-items:flex-start !important;
  justify-content:space-between !important;
  gap:2rem !important;
}

body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"] .hero {
  grid-template-columns:none !important;
  padding:0 0 2rem !important;
  margin-bottom:2rem !important;
  border-bottom:1px solid var(--nami-line) !important;
}

body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"] .hero-meta {
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:1.25rem;
}

body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"] .masthead-copy,
body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"] .hero > div:first-child {
  min-width:0;
  flex:1 1 auto;
}

body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"] .eyebrow {
  margin:0 0 .8rem !important;
  color:var(--nami-accent) !important;
  font-size:.78rem !important;
  font-weight:800 !important;
  letter-spacing:.12em !important;
  line-height:1.2 !important;
  text-transform:uppercase !important;
}

body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"] h1,
body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"] h2,
body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"] h3,
body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"] legend {
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
  color:var(--nami-ink);
}

body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"] h1 {
  max-width:750px !important;
  margin:0 !important;
  font-size:clamp(2.05rem,4.7vw,4.3rem) !important;
  font-weight:800 !important;
  letter-spacing:-.055em !important;
  line-height:.98 !important;
}

body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"] h2 {
  font-weight:760 !important;
  letter-spacing:-.025em !important;
}

body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"] h3 {
  font-weight:760 !important;
}

body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"] .lede,
body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"] .hero-copy {
  max-width:760px;
  color:var(--nami-muted) !important;
  font-size:1.05rem !important;
  line-height:1.6 !important;
}

body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"] .notice,
body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"] .note {
  border-left:4px solid var(--nami-warn) !important;
  background:var(--nami-warn-soft) !important;
  color:#6d3900 !important;
}

body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"] .card,
body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"] fieldset,
body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"] .assumptions,
body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"] .results,
body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"] .method,
body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"] .wall,
body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"] .roll {
  border-color:var(--nami-line) !important;
  background:rgba(255,255,255,.94) !important;
  border-radius:var(--nami-radius) !important;
  box-shadow:var(--nami-shadow);
}

body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"] .card-head,
body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"] .wall-top,
body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"] .roll-head {
  border-color:var(--nami-line) !important;
  background:transparent !important;
}

body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"] label,
body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"] small,
body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"] caption {
  color:var(--nami-muted) !important;
}

body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"] input,
body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"] select,
body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"] textarea {
  border:1px solid #cbd5e1 !important;
  border-radius:10px !important;
  color:var(--nami-ink) !important;
  background:#fff !important;
  font:inherit !important;
}

body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"] input:focus,
body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"] select:focus,
body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"] textarea:focus,
body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"] button:focus-visible,
body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"] a:focus-visible {
  outline:3px solid rgba(12,93,246,.35) !important;
  outline-offset:2px !important;
}

body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"] .segmented,
body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"] .segmented-control {
  border-color:var(--nami-line) !important;
  background:#eef2f7 !important;
}

body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"] .segmented button[aria-pressed="true"],
body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"] .segmented-control button.active {
  color:var(--nami-accent) !important;
  background:#fff !important;
}

body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"] button {
  font-family:inherit !important;
}

body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"] button[type="submit"],
body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"] .btn:not(.secondary):not(.ghost),
body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"] .primary-button {
  border-color:var(--nami-accent) !important;
  color:#fff !important;
  background:var(--nami-accent) !important;
}

body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"] button[type="submit"]:hover,
body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"] .btn:not(.secondary):not(.ghost):hover,
body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"] .primary-button:hover {
  background:var(--nami-accent-dark) !important;
}

body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"] .btn.secondary {
  border:1px solid var(--nami-line) !important;
  color:var(--nami-ink) !important;
  background:#fff !important;
}

body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"] .btn.ghost {
  border:1px solid transparent !important;
  color:var(--nami-danger) !important;
  background:transparent !important;
}

body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"] legend,
body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"] .tier-heading {
  color:var(--nami-accent) !important;
}

body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"] th {
  color:#42516a !important;
  background:#f4f7fb !important;
}

body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"] th,
body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"] td {
  border-color:var(--nami-line) !important;
}

body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"] .result-summary {
  color:var(--nami-ink) !important;
  background:var(--nami-accent-soft) !important;
}

body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"] tr.recommended td {
  background:var(--nami-good-soft) !important;
}

body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"] .choice input:checked + .choice-body {
  border-color:var(--nami-accent) !important;
  background:var(--nami-accent-soft) !important;
  box-shadow:0 0 0 1px var(--nami-accent) inset !important;
}

body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"] .choice input:checked + .choice-body strong {
  color:var(--nami-accent) !important;
}

body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"] .wall-number,
body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"] .kpi.primary {
  color:#fff !important;
  background:var(--nami-accent) !important;
}

body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"] .status-line,
body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"] .status-dot {
  color:var(--nami-good) !important;
}

body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"] .hero-mark {
  border-color:var(--nami-ink) !important;
  background:
    repeating-radial-gradient(circle,transparent 0 13px,var(--nami-ink) 14px 15px,transparent 16px 27px) !important;
}

body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"] .hero-mark span {
  color:var(--nami-ink) !important;
  background:#f7faff !important;
}

body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"] .surface-header-support {
  margin-top:0 !important;
  border-color:#b9c9e6 !important;
  color:var(--nami-accent) !important;
  background:rgba(255,255,255,.82) !important;
}

body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"] .surface-header-support:hover {
  border-color:var(--nami-accent) !important;
  color:var(--nami-accent-dark) !important;
  background:#fff !important;
}

body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"] .tool-surface-strip,
body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"] .surface-footer,
body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"] .share-nudge {
  width:100% !important;
  max-width:none !important;
  margin-left:0 !important;
  margin-right:0 !important;
}

body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"] .tool-surface-strip {
  color:var(--nami-ink) !important;
  border-color:var(--nami-line) !important;
  background:rgba(255,255,255,.90) !important;
}

body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"] .surface-button {
  border-color:#cbd5e1 !important;
  color:#17345f !important;
  background:transparent !important;
}

body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"] .surface-support-link {
  border-color:var(--nami-accent) !important;
  color:#fff !important;
  background:var(--nami-accent) !important;
  box-shadow:0 8px 22px rgba(12,93,246,.22) !important;
}

body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"] .surface-footer {
  color:var(--nami-muted) !important;
  border-color:var(--nami-line) !important;
  background:transparent !important;
  box-shadow:none !important;
  border-radius:0 !important;
}

body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"] main > footer:not(.surface-footer) {
  width:100% !important;
  display:flex;
  justify-content:space-between;
  gap:1.25rem;
  margin:1.7rem 0 0 !important;
  padding:1rem 0 0 !important;
  color:var(--nami-muted) !important;
  border-top:1px solid var(--nami-line) !important;
  background:transparent !important;
  box-shadow:none !important;
  border-radius:0 !important;
  font-size:.72rem !important;
}

body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"] .wall-title,
body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"] .kpi .value,
body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"] .roll-head strong {
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
}

body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"] code {
  color:#17345f !important;
  background:#eef3f9 !important;
}

@media (max-width:850px) {
  body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"] .masthead,
  body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"] .hero {
    flex-direction:column !important;
    gap:1rem !important;
  }

  body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"] .hero-meta {
    width:100%;
    align-items:flex-start;
  }
}

@media (max-width:520px) {
  body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"] > header.masthead,
  body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"] > main,
  body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"] .shell {
    width:min(100% - 1rem,1180px) !important;
  }

  body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"] .shell,
  body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"] > header.masthead {
    padding-top:2rem !important;
  }

  body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"] main > footer:not(.surface-footer) {
    flex-direction:column;
  }
}