/* ==========================================================================
   pages.css: shared polish for every page. Cards, section headers, the
   welcome hub, dashboard stats, quick-access cards, keyboard-first layouts
   for Key Remapping and Custom RGB, forms, the developer log and dialogs.
   ========================================================================== */

/* ------------------------------------------------------------------ cards */
.surface-card {
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  padding: var(--sp-5);
  box-shadow: var(--shadow-xs);
}
.card-header-row { margin-bottom: var(--sp-4); align-items: center; }
.card-header-row h3 { font-size: var(--fs-lg); font-weight: 600; letter-spacing: var(--tracking-tight); }
.card-title-group { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.card-subtitle { font-size: var(--fs-sm); color: var(--muted); font-weight: 400; text-align: right; }

.panel-grid-2col { gap: var(--sp-5); }

/* ------------------------------------------------------- welcome hub */
.connect-action-hub { gap: var(--sp-3); }
.connect-status-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  height: 34px;
  padding: 0 var(--sp-4);
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow-xs);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text);
  transition: border-color var(--t-med) var(--ease-out), background var(--t-med) var(--ease-out);
}
.connect-status-pill.connected { border-color: var(--success-border); background: var(--success-soft); color: var(--success-ink); }
.connect-status-pill.error     { border-color: var(--danger-border);  background: var(--danger-soft);  color: var(--danger-ink); }
.connect-status-pill.warning   { border-color: var(--warning-border); background: var(--warning-soft); color: var(--warning-ink); }
.connect-status-pill.busy      { border-color: color-mix(in srgb, var(--accent-ink) 35%, var(--line)); background: var(--accent-soft); }

.btn-connect-hero {
  height: 52px;
  padding: 0 var(--sp-6);
  font-size: var(--fs-lg);
  font-weight: 600;
}

/* connection mode tiles (Fn+1…Fn+5) */
.hardware-slots-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; justify-content: center; }
.slot-pill {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 82px;
  height: 58px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--panel);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}
.slot-pill > span { font: 500 var(--fs-2xs)/1 var(--font-mono); color: var(--muted); }
.slot-pill:hover { border-color: var(--line-strong); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.slot-pill.active { border-color: var(--ink); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--ink); }
.slot-pill.active-hardware::after,
.slot-pill.is-supported::after {
  content: '';
  position: absolute;
  top: 6px;
  right: 6px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--success);
}
.slot-pill.active-hardware { border-color: var(--success); }

/* ------------------------------------------------------- dashboard */
.device-telemetry-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4);
  border-radius: 18px;
  border: 1px solid var(--line-soft);
  background: var(--panel);
  box-shadow: var(--shadow-xs);
}
.telemetry-item-group { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); flex: 1; }
.telemetry-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  background: var(--panel-2);
}
.telemetry-label {
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--muted);
}
.telemetry-val { font-size: var(--fs-h3); font-weight: 600; color: var(--text); display: inline-flex; align-items: center; gap: var(--sp-2); }
.telemetry-val.is-key-number { font: 600 22px/1.1 var(--font-mono); letter-spacing: -0.02em; }
.telemetry-val.is-mono { font-family: var(--font-mono); }

.quick-nav-card {
  border-radius: 18px;
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-xs);
  transition: transform var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out), border-color var(--t-med) var(--ease-out);
}
.quick-nav-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }
.quick-nav-card:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

.mode-status-center { border-radius: 18px; }
.mode-box { border-radius: var(--r-card); }
.mode-box-label {
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--muted);
}

.feature-showcase-card {
  border-radius: 18px;
  transition: transform var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out);
}
.feature-showcase-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* --------------------------------- Key Remapping + Custom RGB: keyboard first */
#keymapControlGrid,
#customRgbControlGrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-5);
}
#keymapControlGrid > .visualizer-card,
#customRgbControlGrid > .visualizer-card { order: -1; }

#keymapControlGrid > .surface-card:not(.visualizer-card) {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-4) var(--sp-5);
  align-items: center;
}
/* Layer: label, dropdown and hint sit as one block, centred against the
   key panel and the two stacked actions */
.remap-layer-field { align-self: center; }
.remap-layer-field .field-hint { margin: 0; }
.remap-action-stack > button { height: var(--field-h); }
#customRgbControlGrid > .surface-card:not(.visualizer-card) {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.8fr) minmax(0, 1.4fr);
  gap: var(--sp-4) var(--sp-5);
  align-items: start;
}
:is(#keymapControlGrid, #customRgbControlGrid) > .surface-card:not(.visualizer-card) > .card-header-row { grid-column: 1 / -1; margin-bottom: 0; }
:is(#keymapControlGrid, #customRgbControlGrid) .control-field { margin: 0; }
#customRgbControlGrid > .surface-card:not(.visualizer-card) > div[style*="grid-template-columns"] { grid-column: 1 / 3; margin-top: 0 !important; }
#customRgbControlGrid #btnUploadCustomRgb { margin-top: 0 !important; justify-self: end; align-self: center; }

.remap-inspector-box {
  padding: var(--sp-4);
  border-radius: var(--r-md);
  background: var(--panel-2);
  border: 1px solid var(--line-soft);
}
.remap-key-badge { font: 600 var(--fs-h2)/1.2 var(--font-ui); letter-spacing: var(--tracking-tight); color: var(--text); margin: 4px 0 2px; }
.remap-current-binding { font-size: var(--fs-sm); color: var(--muted); }
.remap-key-index { font: 500 var(--fs-2xs)/1 var(--font-mono); color: var(--muted); }
.remap-action-stack { display: grid; gap: var(--sp-2); }

.guidance-banner {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  padding: var(--sp-4);
  border-radius: var(--r-md);
  background: var(--panel-2);
}
.guidance-banner .guidance-icon {
  width: 36px; height: 36px; border-radius: 10px; flex: none; display: grid; place-items: center;
  background: var(--ink); color: var(--lime);
}
.guidance-banner h4 { margin-bottom: var(--sp-2); }
.guidance-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.step-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px 0 4px;
  border-radius: var(--r-pill); background: var(--panel); border: 1px solid var(--line);
  font-size: var(--fs-xs); font-weight: 500; color: var(--text);
}
.step-chip-num {
  width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ink); color: var(--lime); font: 600 10px/1 var(--font-mono);
}
.color-hex { font: 500 var(--fs-sm)/1 var(--font-mono); color: var(--text); padding: 6px 10px; border-radius: var(--r-sm); background: var(--panel-2); }
input[type="color"] {
  -webkit-appearance: none; appearance: none; width: 44px; height: 36px; padding: 3px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); cursor: pointer;
}
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 6px; }
#customRgbSwatches { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* ------------------------------------------------------------ forms */
.control-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--sp-4); }
.control-field > label { font-size: var(--fs-ctl); font-weight: 600; color: var(--text); }
select, input[type="text"], input[type="search"] {
  height: var(--field-h);
  padding: 0 var(--sp-3);
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background-color: var(--panel);
  font-size: var(--fs-body);
  transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
select:hover, input[type="text"]:hover, input[type="search"]:hover { border-color: var(--line-strong); }
select {
  appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2358616f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
}

/* inline field + action rows (profiles) */
.field-row { display: flex; gap: var(--sp-2); align-items: center; }
.field-row > .bsel, .field-row > input { flex: 1; min-width: 0; }
.field-row > button { height: var(--field-h); flex: none; }
.field-icon-btn { width: var(--field-h); padding: 0 !important; justify-content: center; }
.field-btn { padding: 0 var(--sp-4) !important; white-space: nowrap; }

/* --------------------------------------------------- developer log */
.dev-log { padding: 0; overflow: hidden; margin-top: var(--sp-5); }
.dev-log > summary {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  cursor: pointer;
  list-style: none;
  transition: background var(--t-fast) var(--ease-out);
}
.dev-log > summary::-webkit-details-marker { display: none; }
.dev-log > summary:hover { background: var(--panel-2); }
.dev-log > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.dev-log-title { display: inline-flex; align-items: center; gap: var(--sp-2); font-weight: 600; }
.dev-log-hint { font-size: var(--fs-sm); color: var(--muted); }
.dev-log-chevron { transition: transform var(--t-med) var(--ease-out); color: var(--muted); }
.dev-log[open] .dev-log-chevron { transform: rotate(180deg); }
.dev-log-body { padding: 0 var(--sp-5) var(--sp-5); animation: pop-in var(--t-med) var(--ease-out) both; }
.dev-log-actions { display: flex; justify-content: flex-end; margin-bottom: var(--sp-2); }
.terminal-card { font: 500 var(--fs-xs)/1.6 var(--font-mono); border-radius: var(--r-md); }

/* ------------------------------------------------------------ dialogs */
.modal-overlay { backdrop-filter: blur(6px) saturate(1.2); }
.modal-surface {
  border-radius: 20px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
}
.modal-overlay.open .modal-surface,
.modal-overlay.active .modal-surface { animation: dialog-in 320ms var(--spring) both; }
@keyframes dialog-in { from { opacity: 0; transform: translateY(12px) scale(0.97); } to { opacity: 1; transform: none; } }
.modal-header h3 { font-size: var(--fs-h2); font-weight: 600; }
.remap-key-btn {
  border-radius: var(--r-sm);
  transition: background var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.remap-key-btn:hover { transform: translateY(-1px); }

/* ---------------------------------------------------------------- guide */
.guide-page-header {
  border-radius: 20px;
  background:
    radial-gradient(90% 140% at 100% 0%, color-mix(in srgb, var(--pastel-lavender) 30%, transparent), transparent 60%),
    radial-gradient(70% 120% at 0% 100%, color-mix(in srgb, var(--lime) 22%, transparent), transparent 60%),
    var(--panel);
  border: 1px solid var(--line-soft);
}
.guide-page-intro h2 { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; }

/* --------------------------------------------------------- responsive */
@media (max-width: 1100px) {
  #keymapControlGrid > .surface-card:not(.visualizer-card),
  #customRgbControlGrid > .surface-card:not(.visualizer-card) { grid-template-columns: minmax(0, 1fr); }
  #customRgbControlGrid > .surface-card:not(.visualizer-card) > div[style*="grid-template-columns"] { grid-column: auto; }
  #customRgbControlGrid #btnUploadCustomRgb { justify-self: stretch; }
  .telemetry-item-group { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .device-telemetry-banner { flex-direction: column; align-items: stretch; }
  .surface-card { padding: var(--sp-4); border-radius: var(--r-card); }
  .card-subtitle { text-align: left; }
  .card-header-row { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .modal-overlay.open .modal-surface, .modal-overlay.active .modal-surface, .dev-log-body { animation: none; }
}

/* ------------------------------------------------ guide: quick reference */
.quick-ref-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-5);
  align-items: stretch;
}
.quick-ref-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-radius: 18px;
}
.qref-head { display: flex; align-items: center; gap: var(--sp-3); }
.qref-icon {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  flex: none;
}
.qref-icon svg { width: 18px; height: 18px; }
.qref-head h4 { font-size: var(--fs-body); font-weight: 650; line-height: 1.3; }
.qref-note { font-size: var(--fs-sm); color: var(--muted); line-height: 1.5; margin: 0; }
.qref-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.qref-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  min-height: 34px;
  padding: 4px 4px 4px 6px;
  border-radius: var(--r-sm);
  background: var(--panel-2);
}
.qref-keys { display: inline-flex; align-items: center; gap: 3px; flex: none; }
.qref-keys kbd { font-size: 11px; min-width: 26px; height: 24px; }
.qref-plus { font: 600 11px/1 var(--font-mono); color: var(--muted); }
.qref-label { font-size: var(--fs-sm); color: var(--text); text-align: right; padding-right: 4px; }

@media (max-width: 1180px) { .quick-ref-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .quick-ref-grid { grid-template-columns: minmax(0, 1fr); } }