/* Blind Structure Generator — page-specific styles.
   Extends the HPI design system (hpi.css). Uses its tokens; no new colors. */

/* Ensure [hidden] always wins over display:flex/grid rules below. */
[hidden] { display: none !important; }

.calc-wrap { max-width: 1000px; }
.calc-panel { margin-bottom: var(--space-lg); }
.calc-panel > h2 {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  letter-spacing: 1px;
  color: var(--color-text-heading);
  margin-bottom: var(--space-md);
}
.calc-hint { color: var(--color-text-muted); font-size: 0.9rem; margin-top: var(--space-xs); }
.opt-tag {
  font-size: 0.68rem; letter-spacing: 0.5px; color: var(--color-text-muted);
  border: 1px solid var(--glass-border); border-radius: 999px; padding: 1px 7px; margin-left: 4px;
}

/* ---- Form fields ---- */
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md) var(--space-lg); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field.field-full { grid-column: 1 / -1; }
.field label, .field .field-label {
  font-family: var(--font-heading); font-size: 0.82rem; letter-spacing: 1px;
  text-transform: uppercase; color: var(--color-text-muted);
}

input[type="number"], input[type="text"], select {
  width: 100%; min-height: 48px; padding: 10px 14px;
  font-family: var(--font-body); font-size: 16px; /* >=16px avoids iOS zoom */
  color: var(--color-text-heading); background: rgba(0, 0, 0, 0.28);
  border: 1px solid var(--glass-border); border-radius: 10px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
select { appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23ffcc00' d='M0 0l6 8 6-8z'/></svg>");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 34px;
}
input:focus, select:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-faint); }
input.invalid { border-color: #ff7a7a; box-shadow: 0 0 0 3px rgba(255, 60, 60, 0.18); }
input:disabled, select:disabled { opacity: 0.4; cursor: not-allowed; }

/* ---- Range slider (starting ratio) ---- */
.ratio-row { display: flex; align-items: center; gap: var(--space-md); }
.ratio-row input[type="range"] { flex: 1; accent-color: var(--color-accent); min-height: auto; padding: 0; background: none; border: none; }
.ratio-readout { font-family: var(--font-heading); color: var(--color-accent); min-width: 3.5rem; text-align: right; }

/* ---- Segmented toggles ---- */
.segmented { display: inline-flex; background: rgba(0, 0, 0, 0.28); border: 1px solid var(--glass-border); border-radius: 10px; padding: 3px; gap: 3px; flex-wrap: wrap; }
.seg { appearance: none; border: none; background: transparent; color: var(--color-text-muted);
  font-family: var(--font-heading); font-size: 0.8rem; letter-spacing: 0.5px; padding: 8px 12px;
  min-height: 42px; border-radius: 8px; cursor: pointer; transition: background 0.15s, color 0.15s; }
.seg:hover { color: var(--color-text-heading); }
.seg.active { background: var(--color-accent); color: #1a0800; font-weight: 700; }

/* ---- Toggle switch (antes / breaks on-off) ---- */
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); }
.switch { position: relative; display: inline-block; width: 48px; height: 28px; flex-shrink: 0; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .track { position: absolute; inset: 0; background: rgba(0,0,0,0.35); border: 1px solid var(--glass-border); border-radius: 999px; transition: background 0.15s; }
.switch .track::before { content: ""; position: absolute; left: 3px; top: 2px; width: 22px; height: 22px; background: var(--color-text-muted); border-radius: 50%; transition: transform 0.15s, background 0.15s; }
.switch input:checked + .track { background: var(--color-accent-faint); border-color: var(--color-accent-dim); }
.switch input:checked + .track::before { transform: translateX(20px); background: var(--color-accent); }
.switch input:focus-visible + .track { box-shadow: 0 0 0 3px var(--color-accent-faint); }

.sub-options { margin-top: var(--space-md); padding-left: var(--space-md); border-left: 2px solid var(--glass-border); display: grid; gap: var(--space-md); }

/* ---- Advanced (collapsible) ---- */
.advanced { margin-top: var(--space-md); }
.advanced > summary {
  cursor: pointer; font-family: var(--font-heading); font-size: 0.9rem; letter-spacing: 1px;
  text-transform: uppercase; color: var(--color-accent); list-style: none; padding: var(--space-sm) 0;
}
.advanced > summary::-webkit-details-marker { display: none; }
.advanced > summary::before { content: "▸ "; }
.advanced[open] > summary::before { content: "▾ "; }

/* ---- Validation banner ---- */
.calc-error { border-radius: var(--glass-radius); padding: var(--space-md) var(--space-lg); margin-bottom: var(--space-lg);
  background: rgba(120, 0, 0, 0.35); border: 1px solid #ff7a7a; color: #ffd9d9; }

/* ---- Prediction box ---- */
.prediction { display: flex; flex-direction: column; gap: 4px; }
.prediction .pred-head { font-family: var(--font-heading); font-size: 1.25rem; color: var(--color-text-heading); }
.prediction .pred-head strong { color: var(--color-accent); }
.prediction .pred-note { color: var(--color-text-muted); font-size: 0.9rem; }

/* ---- Warnings ---- */
.warnings { list-style: none; display: flex; flex-direction: column; gap: var(--space-sm); margin-top: var(--space-md); }
.warnings li { padding: var(--space-sm) var(--space-md); border-radius: 8px; background: rgba(255, 204, 0, 0.10);
  border: 1px solid var(--color-accent-dim); color: var(--color-text); font-size: 0.9rem; }
.warnings li::before { content: "⚠ "; color: var(--color-accent); }

/* ---- Summary stats ---- */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); margin-top: var(--space-md); }
.stat { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 10px; padding: var(--space-md); text-align: center; }
.stat .stat-val { font-family: var(--font-heading); font-size: 1.5rem; color: var(--color-accent); display: block; }
.stat .stat-label { color: var(--color-text-muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.5px; }

/* ---- Level table ---- */
.level-table { width: 100%; }
.level-table th.num, .level-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.level-table td.level-no { font-family: var(--font-heading); color: var(--color-text-heading); }
.level-table tr.break-row td { background: var(--color-accent-faint); color: var(--color-accent); font-family: var(--font-heading); text-align: center; letter-spacing: 1px; }
.level-table tr.ending-row td { box-shadow: inset 0 -2px 0 var(--color-accent); }

/* ---- Action buttons ---- */
.action-row { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xl); }
.action-row .btn-secondary { cursor: pointer; font-size: 0.82rem; padding: 11px 20px; }
.copied-toast { margin-top: var(--space-sm); color: var(--color-accent); font-family: var(--font-heading); font-size: 0.85rem; }

/* ---- Educational accordion ---- */
.edu-section h2 { margin-bottom: var(--space-md); }
.edu-section details { border-bottom: 1px solid var(--glass-border); padding: var(--space-sm) 0; }
.edu-section summary { cursor: pointer; font-family: var(--font-heading); font-size: 1.02rem; color: var(--color-text-heading); padding: var(--space-sm) 0; list-style: none; }
.edu-section summary::-webkit-details-marker { display: none; }
.edu-section summary::before { content: '+'; color: var(--color-accent); display: inline-block; width: 1.2em; font-weight: 700; }
.edu-section details[open] summary::before { content: '–'; }
.edu-section details > *:not(summary) { color: var(--color-text); margin: var(--space-sm) 0; }

/* ---- Print-only ---- */
.print-only { display: none; }

/* ---- Responsive ---- */
@media (max-width: 640px) {
  .field-grid { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .action-row .btn-secondary { flex: 1 1 45%; justify-content: center; }

  /* Level table -> card-per-level (the table is the longest output) */
  .level-table thead { display: none; }
  .level-table, .level-table tbody { display: block; width: 100%; }
  .level-table tr { display: block; border: 1px solid var(--glass-border); border-radius: 10px; padding: 8px 12px; margin-bottom: var(--space-sm); background: rgba(0,0,0,0.12); }
  .level-table tr.ending-row { border-color: var(--color-accent); }
  .level-table td { display: flex; justify-content: space-between; align-items: baseline; text-align: right; border: none !important; padding: 3px 0; }
  .level-table td::before { content: attr(data-label); color: var(--color-text-muted); font-family: var(--font-heading); font-size: 0.78rem; letter-spacing: 0.5px; text-transform: uppercase; }
  .level-table td.level-no { font-size: 1.1rem; padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid var(--glass-border) !important; }
  .level-table tr.break-row { background: var(--color-accent-faint); padding: 10px; }
  .level-table tr.break-row td { display: block; text-align: center; }
  .level-table tr.break-row td::before { content: ""; display: none; }
}

/* ---- Print poster stylesheet ---- */
@media print {
  html, body { background: #fff !important; background-image: none !important; color: #000 !important; }
  body::before { display: none !important; } /* hpi.css felt tint overlay */
  .site-header, .site-footer, .calc-inputs, .action-row, .copied-toast, .edu-section,
  .back-link, .page-title-block, .warnings, .stat-grid { display: none !important; }

  main { padding: 0; }
  .calc-wrap { max-width: 100%; }
  .glass-panel { background: #fff !important; border: none !important; box-shadow: none !important; backdrop-filter: none !important; padding: 0 !important; color: #000 !important; margin-bottom: 10pt; }

  .print-only { display: block; }
  .print-head h2 { font-family: var(--font-heading); font-size: 20pt; color: #000; margin-bottom: 4pt; }
  .print-head #printMeta { font-size: 12pt; color: #222; }

  .prediction .pred-head { color: #000 !important; font-size: 13pt; }
  .prediction .pred-head strong { color: #000 !important; }
  .prediction .pred-note { display: none; }

  .level-table { width: 100%; border-collapse: collapse; font-size: 12pt; }
  .level-table th, .level-table td { color: #000 !important; border-bottom: 1px solid #ccc !important; padding: 5pt 6pt; }
  .level-table th { border-bottom: 2px solid #000 !important; text-align: left; }
  .level-table th.num, .level-table td.num { text-align: right; }
  .level-table tr.break-row td { background: #eee !important; color: #000 !important; text-align: center; }
  .level-table tr.ending-row td { box-shadow: none; font-weight: 700; }
  .print-foot { margin-top: 14pt; font-size: 9pt; color: #555; }
  @page { margin: 1.4cm; }
}