/* Tuning Dashboard — fullscreen modal styling.
   Follows the project Visual Style Guide:
     Fraunces 700 (display) + Space Grotesk (body)
     warm gradient bg-1 → bg-2, glassy white cards, ink-tinted borders,
     accent #ff6b4a for spec-delta warnings, accent-2 #0f9aa7 for ok.

   Fraunces + Space Grotesk are loaded via a non-blocking <link> in index.html
   so this file doesn't @import them (the @import was blocking page render
   under headless Playwright and tripping toolbar visibility tests).
*/

#tuning-dashboard {
  --bg-1: #f5efe6;
  --bg-2: #e3f1ee;
  --card: rgba(255, 255, 255, 0.78);
  --card-solid: #fffdf7;
  --ink: #1d1b17;
  --muted: #6d685f;
  --accent: #ff6b4a;
  --accent-2: #0f9aa7;
  --neutral: #d6cec2;
  --grid: #eee6da;
  --shadow: 0 18px 45px rgba(29, 27, 23, 0.12);
  --border: 1px solid rgba(29, 27, 23, 0.08);
  position: fixed;
  inset: 0;
  z-index: 10000;
  font-family: "Space Grotesk", -apple-system, system-ui, sans-serif;
  color: var(--ink);
}

#tuning-dashboard .td-overlay {
  position: absolute;
  inset: 0;
  background: rgba(29, 27, 23, 0.55);
  backdrop-filter: blur(2px);
}

#tuning-dashboard .td-panel {
  position: absolute;
  inset: 24px;
  background:
    radial-gradient(ellipse at 0% 0%, rgba(15, 154, 167, 0.12), transparent 50%),
    radial-gradient(ellipse at 100% 100%, rgba(255, 107, 74, 0.08), transparent 50%),
    linear-gradient(135deg, var(--bg-1) 0%, var(--bg-2) 100%);
  border-radius: 18px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── HEADER ──────────────────────────────────────────────────────────── */

#tuning-dashboard .td-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 28px 12px;
}

#tuning-dashboard .td-head-left h1 {
  margin: 0;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 700;
  font-size: 28px;
  letter-spacing: -0.01em;
}

#tuning-dashboard .td-subtitle {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--muted);
}

#tuning-dashboard .td-head-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

#tuning-dashboard .td-btn {
  font: 500 12px/1 "Space Grotesk", sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: 8px;
  border: var(--border);
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
  transition: background 120ms, transform 80ms;
}
#tuning-dashboard .td-btn:hover { background: var(--card-solid); transform: translateY(-1px); }
#tuning-dashboard .td-btn-close {
  font-size: 22px;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
}

/* ── SUMMARY BAR ────────────────────────────────────────────────────── */

#tuning-dashboard .td-summary {
  display: flex;
  gap: 18px;
  padding: 12px 28px;
  border-top: var(--border);
  border-bottom: var(--border);
  background: rgba(255, 255, 255, 0.4);
}

#tuning-dashboard .td-summary-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#tuning-dashboard .td-summary-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
}

#tuning-dashboard .td-summary-val {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 700;
  font-size: 18px;
}

#tuning-dashboard .td-summary-warn { color: var(--accent); }
#tuning-dashboard .td-summary-ok   { color: var(--accent-2); }

/* ── TABS ──────────────────────────────────────────────────────────── */

#tuning-dashboard .td-tabs {
  display: flex;
  gap: 4px;
  padding: 12px 28px 0;
  flex-wrap: wrap;
}

#tuning-dashboard .td-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 10px 10px 0 0;
  border: var(--border);
  border-bottom: none;
  background: rgba(255, 255, 255, 0.45);
  color: var(--ink);
  cursor: pointer;
  font: 500 12px/1 "Space Grotesk", sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background 120ms;
}

#tuning-dashboard .td-tab:hover { background: rgba(255, 255, 255, 0.7); }

#tuning-dashboard .td-tab.active {
  background: var(--card-solid);
  border-bottom: 1px solid var(--card-solid);
  margin-bottom: -1px;
  color: var(--accent);
}

#tuning-dashboard .td-tab-glyph { font-size: 14px; }

/* ── CONTENT ───────────────────────────────────────────────────────── */

#tuning-dashboard .td-content {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 20px 28px;
  border-top: var(--border);
  background: rgba(255, 255, 255, 0.18);
}

#tuning-dashboard .td-cat-header {
  margin-bottom: 16px;
}
#tuning-dashboard .td-cat-header h2 {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 700;
  font-size: 22px;
  margin: 0;
}
#tuning-dashboard .td-cat-header p {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--muted);
}

#tuning-dashboard .td-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}

/* ── CARD ──────────────────────────────────────────────────────────── */

#tuning-dashboard .td-card {
  background: var(--card);
  backdrop-filter: blur(8px);
  border: var(--border);
  border-radius: 14px;
  padding: 16px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 4px 14px rgba(29, 27, 23, 0.06);
  transition: box-shadow 160ms, transform 100ms;
}

#tuning-dashboard .td-card:hover {
  box-shadow: 0 10px 28px rgba(29, 27, 23, 0.12);
  transform: translateY(-1px);
}

#tuning-dashboard .td-card-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

#tuning-dashboard .td-icon {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(15, 154, 167, 0.12), rgba(255, 107, 74, 0.10));
  border: var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
}

#tuning-dashboard .td-icon-img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  image-rendering: pixelated; /* sprites are low-res */
}

#tuning-dashboard .td-icon-glyph {
  font-size: 22px;
  line-height: 1;
}

#tuning-dashboard .td-card-title {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

#tuning-dashboard .td-card-title h3 {
  margin: 0;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.005em;
}

#tuning-dashboard .td-key {
  font: 500 10px/1.2 "JetBrains Mono", "SF Mono", monospace;
  color: var(--muted);
  word-break: break-all;
}

#tuning-dashboard .td-live-flag {
  flex: 0 0 auto;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(255, 107, 74, 0.10);
  border-radius: 4px;
  padding: 3px 6px;
  height: fit-content;
}

#tuning-dashboard .td-card-value {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

#tuning-dashboard .td-value-num {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 700;
  font-size: 26px;
  line-height: 1;
  color: var(--ink);
}

#tuning-dashboard .td-badge {
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

#tuning-dashboard .td-badge-ok {
  background: rgba(15, 154, 167, 0.10);
  color: var(--accent-2);
}

#tuning-dashboard .td-badge-warn {
  background: rgba(255, 107, 74, 0.12);
  color: var(--accent);
}

#tuning-dashboard .td-control-row {
  display: grid;
  grid-template-columns: 1fr 84px 36px;
  gap: 8px;
  align-items: center;
}

#tuning-dashboard input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 4px;
  background: var(--neutral);
  cursor: pointer;
}

#tuning-dashboard input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(255, 107, 74, 0.4);
  cursor: pointer;
}

#tuning-dashboard input[type="number"] {
  font: 500 13px/1 "JetBrains Mono", "SF Mono", monospace;
  padding: 6px 8px;
  border-radius: 6px;
  border: var(--border);
  background: var(--card-solid);
  color: var(--ink);
  text-align: right;
  width: 100%;
}

#tuning-dashboard .td-unit {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
}

#tuning-dashboard .td-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}

#tuning-dashboard .td-toggle input { display: none; }

#tuning-dashboard .td-toggle-track {
  width: 38px;
  height: 22px;
  background: var(--neutral);
  border-radius: 12px;
  position: relative;
  transition: background 160ms;
}
#tuning-dashboard .td-toggle-track::before {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  transition: transform 160ms;
}
#tuning-dashboard .td-toggle input:checked + .td-toggle-track { background: var(--accent-2); }
#tuning-dashboard .td-toggle input:checked + .td-toggle-track::before { transform: translateX(16px); }
#tuning-dashboard .td-toggle-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
}

#tuning-dashboard .td-desc {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--muted);
}

#tuning-dashboard .td-card-foot {
  display: flex;
  gap: 14px;
  border-top: 1px dashed rgba(29, 27, 23, 0.08);
  padding-top: 8px;
}

#tuning-dashboard .td-link {
  font: 500 10px/1 "Space Grotesk", sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  padding: 0;
}
#tuning-dashboard .td-link:hover { color: var(--accent); }

/* ── FOOTER ────────────────────────────────────────────────────────── */

#tuning-dashboard .td-foot {
  display: flex;
  justify-content: space-between;
  padding: 10px 28px;
  border-top: var(--border);
  background: rgba(255, 255, 255, 0.4);
  font-size: 11px;
  color: var(--muted);
}

#tuning-dashboard .td-foot code {
  font: 500 10.5px/1 "JetBrains Mono", "SF Mono", monospace;
  background: rgba(29, 27, 23, 0.06);
  padding: 1.5px 5px;
  border-radius: 4px;
}

/* ── TIER STATUS PANEL ─────────────────────────────────────────────── */

#tuning-dashboard .td-tier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 16px;
}

#tuning-dashboard .td-tier-card {
  background: var(--card);
  border: var(--border);
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 4px 14px rgba(29, 27, 23, 0.06);
  border-left: 4px solid var(--neutral);
  transition: border-color 200ms;
}

#tuning-dashboard .td-tier-card.met {
  border-left-color: var(--accent-2);
  background: linear-gradient(135deg, rgba(15, 154, 167, 0.06), var(--card));
}

#tuning-dashboard .td-tier-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px dashed rgba(29, 27, 23, 0.10);
}

#tuning-dashboard .td-tier-num {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 700;
  font-size: 24px;
  color: var(--ink);
}

#tuning-dashboard .td-tier-name {
  flex: 1 1 auto;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--muted);
}

#tuning-dashboard .td-tier-status {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(29, 27, 23, 0.06);
  color: var(--muted);
}

#tuning-dashboard .td-tier-card.met .td-tier-status {
  background: rgba(15, 154, 167, 0.12);
  color: var(--accent-2);
}

#tuning-dashboard .td-req-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#tuning-dashboard .td-req {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

#tuning-dashboard .td-req-icon {
  font-size: 14px;
  text-align: center;
  color: var(--muted);
}

#tuning-dashboard .td-req.met .td-req-icon { color: var(--accent-2); }

#tuning-dashboard .td-req-label {
  color: var(--ink);
}

#tuning-dashboard .td-req.unmet .td-req-label { color: var(--muted); }

#tuning-dashboard .td-req-value {
  font: 500 11px/1 "JetBrains Mono", "SF Mono", monospace;
  color: var(--muted);
  background: rgba(29, 27, 23, 0.04);
  padding: 3px 6px;
  border-radius: 4px;
}

#tuning-dashboard .td-req.met .td-req-value {
  color: var(--accent-2);
  background: rgba(15, 154, 167, 0.08);
}

#tuning-dashboard .td-empty {
  font-size: 14px;
  color: var(--muted);
  padding: 24px;
  text-align: center;
  font-style: italic;
}

/* ── BUILDINGS PANEL ───────────────────────────────────────────────── */

#tuning-dashboard .td-bld-group {
  margin-bottom: 24px;
}

#tuning-dashboard .td-bld-group-title {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(29, 27, 23, 0.08);
}

#tuning-dashboard .td-bld-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}

#tuning-dashboard .td-bld-card {
  background: var(--card);
  border: var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 2px 8px rgba(29, 27, 23, 0.04);
}

#tuning-dashboard .td-bld-head {
  display: flex;
  gap: 10px;
  align-items: center;
}

#tuning-dashboard .td-bld-icon {
  width: 32px;
  height: 32px;
  object-fit: contain;
  image-rendering: pixelated;
}

#tuning-dashboard .td-bld-icon-placeholder {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(29, 27, 23, 0.05);
  border-radius: 6px;
  font-size: 14px;
  color: var(--muted);
}

#tuning-dashboard .td-bld-titles {
  flex: 1 1 auto;
  min-width: 0;
}

#tuning-dashboard .td-bld-titles h4 {
  margin: 0;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.2;
}

#tuning-dashboard .td-bld-titles code {
  font: 500 9px/1.2 "JetBrains Mono", "SF Mono", monospace;
  color: var(--muted);
}

#tuning-dashboard .td-bld-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 8px;
}

#tuning-dashboard .td-bld-field {
  display: grid;
  grid-template-columns: 40px 1fr 28px;
  gap: 4px;
  align-items: center;
  font-size: 10px;
}

#tuning-dashboard .td-bld-field-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

#tuning-dashboard .td-bld-field input[type="number"] {
  font: 500 11px/1 "JetBrains Mono", "SF Mono", monospace;
  padding: 3px 5px;
  border-radius: 4px;
  border: var(--border);
  background: var(--card-solid);
  text-align: right;
  width: 100%;
}

#tuning-dashboard .td-bld-field-unit {
  font-size: 9px;
  letter-spacing: 0.06em;
  color: var(--muted);
}

#tuning-dashboard .td-bld-desc {
  margin: 0;
  font-size: 11px;
  line-height: 1.4;
  color: var(--muted);
}

/* Active state for the menubar TUNE button */
#btn-tune.active {
  color: var(--accent, #ff6b4a);
  border-color: var(--accent, #ff6b4a);
}