/* ============================================
   Krossing Configurator Prototypes — shared styles
   Realizzato da Palazzina Creativa per Kriptonite
   ============================================ */

:root {
  --color-background-primary: #FFFFFF;
  --color-background-secondary: #F5F4F2;
  --color-background-tertiary: #EFEEE9;
  --color-background-info: #E6F1FB;
  --color-background-warning: #FAEEDA;
  --color-background-danger: #FCEBEB;
  --color-background-success: #EAF3DE;

  --color-text-primary: #2C2C2A;
  --color-text-secondary: #5F5E5A;
  --color-text-tertiary: #888780;
  --color-text-info: #185FA5;
  --color-text-warning: #854F0B;
  --color-text-danger: #A32D2D;
  --color-text-success: #3B6D11;

  --color-border-primary: rgba(0, 0, 0, 0.4);
  --color-border-secondary: rgba(0, 0, 0, 0.28);
  --color-border-tertiary: rgba(0, 0, 0, 0.14);
  --color-border-info: #378ADD;
  --color-border-warning: #BA7517;
  --color-border-danger: #E24B4A;

  --font-sans: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  --border-radius-md: 8px;
  --border-radius-lg: 12px;
  --border-radius-xl: 16px;

  --max-width: 960px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-background-primary: #1B1B1A;
    --color-background-secondary: #232322;
    --color-background-tertiary: #2A2A29;
    --color-background-info: #0C2F50;
    --color-background-warning: #3D2308;
    --color-background-danger: #4A1414;
    --color-background-success: #1E3A09;

    --color-text-primary: #F2F1ED;
    --color-text-secondary: #B4B2A9;
    --color-text-tertiary: #888780;
    --color-text-info: #85B7EB;
    --color-text-warning: #EF9F27;
    --color-text-danger: #F09595;
    --color-text-success: #97C459;

    --color-border-primary: rgba(255, 255, 255, 0.4);
    --color-border-secondary: rgba(255, 255, 255, 0.28);
    --color-border-tertiary: rgba(255, 255, 255, 0.14);
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-background-tertiary);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--color-text-info); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { font-weight: 500; margin: 0; line-height: 1.3; color: var(--color-text-primary); }
h1 { font-size: 28px; }
h2 { font-size: 22px; }
h3 { font-size: 18px; }
h4 { font-size: 15px; }

button {
  font-family: inherit;
  font-size: 13px;
  padding: 6px 12px;
  background: var(--color-background-primary);
  border: 0.5px solid var(--color-border-secondary);
  border-radius: var(--border-radius-md);
  color: var(--color-text-primary);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, transform 0.08s;
  line-height: 1.4;
}
button:hover { background: var(--color-background-secondary); }
button:active { transform: scale(0.98); }
button:focus-visible { outline: 2px solid var(--color-border-info); outline-offset: 1px; }

input[type="checkbox"] { cursor: pointer; accent-color: var(--color-text-info); }

/* ============== Site layout ============== */

.site-header {
  background: var(--color-background-primary);
  border-bottom: 0.5px solid var(--color-border-tertiary);
  padding: 16px 24px;
}
.site-header-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  font-weight: 500;
  font-size: 15px;
  color: var(--color-text-primary);
  text-decoration: none;
}
.brand:hover { text-decoration: none; }
.brand .brand-sub { font-weight: 400; font-size: 13px; color: var(--color-text-tertiary); }

.back-link {
  font-size: 13px;
  color: var(--color-text-secondary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.back-link:hover { color: var(--color-text-primary); text-decoration: none; }

.page-header {
  max-width: var(--max-width);
  margin: 32px auto 20px;
  padding: 0 24px;
}
.version-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-info);
  background: var(--color-background-info);
  padding: 3px 8px;
  border-radius: var(--border-radius-md);
  margin-bottom: 10px;
}
.page-header h1 { font-size: 28px; margin-bottom: 6px; }
.page-header .page-desc { color: var(--color-text-secondary); font-size: 15px; margin: 0; max-width: 640px; }

.prototype-container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px 32px;
}

.site-footer {
  max-width: var(--max-width);
  margin: 32px auto 0;
  padding: 24px;
  border-top: 0.5px solid var(--color-border-tertiary);
}
.nav-prev-next {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.nav-prev-next a {
  font-size: 13px;
  color: var(--color-text-secondary);
}
.nav-prev-next a:hover { color: var(--color-text-primary); }
.site-footer .credit {
  font-size: 12px;
  color: var(--color-text-tertiary);
  text-align: center;
}

/* ============== Widget shared styles ============== */

.kp { padding: 0; font-family: var(--font-sans); }

/* Model picker (prominent top row) */
.model-picker {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.model-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 12px 14px;
  text-align: left;
  font-family: inherit;
  background: var(--color-background-primary);
  border: 0.5px solid var(--color-border-secondary);
  border-radius: var(--border-radius-md);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.model-btn:hover { background: var(--color-background-secondary); }
.model-btn .model-name { font-size: 14px; font-weight: 500; color: var(--color-text-primary); }
.model-btn .model-spec { font-size: 11px; color: var(--color-text-tertiary); line-height: 1.4; }
.model-btn.active { background: var(--color-background-info); border-color: var(--color-border-info); }
.model-btn.active .model-name { color: var(--color-text-info); }
.model-btn.active .model-spec { color: var(--color-text-info); opacity: 0.75; }

@media (max-width: 560px) {
  .model-picker { grid-template-columns: 1fr; }
}

.tb { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
.tb-l { font-size: 12px; color: var(--color-text-tertiary); margin-right: 2px; }
.tb-d { width: 0.5px; height: 20px; background: var(--color-border-tertiary); margin: 0 4px; }
.btn { padding: 6px 10px; font-size: 13px; }
.btn.active { background: var(--color-background-info); border-color: var(--color-border-info); color: var(--color-text-info); }
.ref-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--color-text-secondary); cursor: pointer; padding: 4px 6px; }
.ref-toggle input { margin: 0; cursor: pointer; }

.canvas-wrap {
  background: var(--color-background-secondary);
  border-radius: var(--border-radius-lg);
  padding: 16px;
  display: flex;
  justify-content: center;
  margin-top: 8px;
  position: relative;
}
#canvas, .canvas-2d {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.canvas-3d {
  display: none;
  width: 100%;
  max-width: 576px;
  aspect-ratio: 576/336;
  height: auto;
  cursor: grab;
  touch-action: none;
  user-select: none;
  margin: 0 auto;
  border-radius: var(--border-radius-md);
}

.preview-hint {
  display: none;
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  color: var(--color-text-tertiary);
  background: var(--color-background-primary);
  padding: 4px 10px;
  border-radius: var(--border-radius-md);
  border: 0.5px solid var(--color-border-tertiary);
}

.legend {
  display: flex;
  gap: 14px;
  font-size: 11px;
  color: var(--color-text-secondary);
  margin-top: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
.legend-item { display: inline-flex; align-items: center; gap: 6px; }
.legend-sw { width: 12px; height: 12px; border-radius: 2px; border: 0.5px solid var(--color-border-tertiary); }

.stats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: 12px; }
@media (max-width: 720px) { .stats { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 420px) { .stats { grid-template-columns: repeat(2, 1fr); } }
.stat { background: var(--color-background-secondary); padding: 10px 12px; border-radius: var(--border-radius-md); }
.stat-l { font-size: 11px; color: var(--color-text-tertiary); margin-bottom: 2px; }
.stat-v { font-size: 16px; font-weight: 500; }

.disclaimer {
  font-size: 11px;
  color: var(--color-text-tertiary);
  margin-top: 10px;
  text-align: center;
}

/* Finish swatches (v5) */
.finish-btn { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 6px; font-size: 13px; }
.finish-sw { display: inline-flex; gap: 0; height: 14px; border-radius: 2px; overflow: hidden; border: 0.5px solid var(--color-border-tertiary); }
.finish-sw span { display: block; height: 14px; }
.finish-sw .sw-t { width: 5px; }
.finish-sw .sw-s { width: 11px; }

/* SVG styles */
.grid-line { stroke: var(--color-border-tertiary); stroke-width: 0.5; stroke-dasharray: 1 4; opacity: 0.55; pointer-events: none; }
.wall-bg { fill: var(--color-background-primary); pointer-events: none; }
.block-bg { fill: var(--color-background-info); fill-opacity: 0.4; pointer-events: none; }
.piano, .tubetto { stroke-width: 2.5; stroke-linecap: round; }
.piano-default, .tubetto-default { stroke: var(--color-text-primary); }
.piano-ghost, .tubetto-ghost { stroke-width: 1.5; stroke-dasharray: 3 3; opacity: 0.5; stroke-linecap: round; }
.edge-hover { stroke-width: 4.5; stroke-linecap: round; opacity: 0.75; pointer-events: none; }

.hint-bg { fill: var(--color-background-info); fill-opacity: 0.16; stroke: var(--color-border-info); stroke-width: 0.6; stroke-dasharray: 3 3; pointer-events: none; }
.hover-add { fill: var(--color-background-info); fill-opacity: 0.25; pointer-events: none; }
.hover-remove { fill: var(--color-background-danger); fill-opacity: 0.25; pointer-events: none; }
.hover-wall { fill: var(--color-background-warning); fill-opacity: 0.22; pointer-events: none; }

.cell-empty { fill: var(--color-background-info); fill-opacity: 0; cursor: pointer; transition: fill-opacity 0.12s; }
.cell-empty:hover { fill-opacity: 0.18; }
.cell-filled { fill: var(--color-background-info); fill-opacity: 0.45; cursor: pointer; transition: fill-opacity 0.12s; }
.cell-filled:hover { fill-opacity: 0.6; }
.cell-extend-hint { fill: var(--color-background-info) !important; fill-opacity: 0.22 !important; }

.obs-bg { fill: var(--color-background-warning); fill-opacity: 0.55; stroke: var(--color-border-warning); stroke-width: 0.5; }
.obs-stroke { stroke: var(--color-text-warning); stroke-width: 1; fill: none; }
.obs-dot { fill: var(--color-text-warning); }

.ref-line { stroke-width: 1; stroke-dasharray: 5 5; stroke: var(--color-text-tertiary); pointer-events: none; }
.ref-label { fill: var(--color-text-tertiary); font-size: 11px; pointer-events: none; }

/* ============== Index page ============== */

.hero {
  max-width: var(--max-width);
  margin: 48px auto 24px;
  padding: 0 24px;
}
.hero .eyebrow {
  font-size: 12px;
  color: var(--color-text-tertiary);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.hero h1 { font-size: 36px; line-height: 1.15; margin-bottom: 14px; max-width: 700px; }
.hero p { font-size: 17px; color: var(--color-text-secondary); max-width: 680px; margin: 0; }

.intro-actions {
  max-width: var(--max-width);
  margin: 24px auto 32px;
  padding: 0 24px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.intro-actions a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--border-radius-md);
  font-size: 14px;
  text-decoration: none;
}
.intro-actions .primary {
  background: var(--color-text-primary);
  color: var(--color-background-primary);
}
.intro-actions .primary:hover { opacity: 0.9; }
.intro-actions .secondary {
  background: var(--color-background-primary);
  color: var(--color-text-primary);
  border: 0.5px solid var(--color-border-secondary);
}
.intro-actions .secondary:hover { background: var(--color-background-secondary); }

.proto-grid {
  max-width: var(--max-width);
  margin: 16px auto 48px;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.proto-card {
  background: var(--color-background-primary);
  border: 0.5px solid var(--color-border-tertiary);
  border-radius: var(--border-radius-lg);
  padding: 18px 20px;
  text-decoration: none;
  color: var(--color-text-primary);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color 0.15s, transform 0.15s;
}
.proto-card:hover {
  border-color: var(--color-border-secondary);
  text-decoration: none;
  transform: translateY(-2px);
}
.proto-card .thumb {
  background: var(--color-background-secondary);
  border-radius: var(--border-radius-md);
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.proto-card .thumb svg { display: block; }
.proto-card .proto-meta { display: flex; align-items: baseline; gap: 8px; }
.proto-card .v { font-size: 11px; font-weight: 500; color: var(--color-text-info); letter-spacing: 0.05em; text-transform: uppercase; }
.proto-card h3 { font-size: 16px; margin: 0; }
.proto-card p { font-size: 13px; color: var(--color-text-secondary); margin: 0; line-height: 1.5; }
.proto-card .open { font-size: 12px; color: var(--color-text-info); margin-top: 4px; }

/* ============== Responsive ============== */

@media (max-width: 600px) {
  .hero h1 { font-size: 28px; }
  .hero p { font-size: 15px; }
  .page-header h1 { font-size: 22px; }
}