/* ============================================================================
   SOFT PRODUCT — components.css
   Requires theme.css first.

   No uppercase labels, no hairline cages. Surfaces are separated by rounding
   and soft shadow; emphasis comes from weight and tinted fills.
   ============================================================================ */

/* ------------------------------------------------------------- BUTTONS ----- */
.btn {
  --_bg: var(--panel);
  --_fg: var(--ink-800);
  --_bd: var(--line-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 9px 16px;
  font-family: var(--font-ui);
  font-size: var(--fs-2);
  font-weight: 550;
  letter-spacing: 0;
  color: var(--_fg);
  background: var(--_bg);
  border: 1px solid var(--_bd);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.btn:active { transform: translateY(0); box-shadow: var(--shadow-1); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

.btn--primary {
  --_bg: var(--accent);
  --_fg: #fff;
  --_bd: transparent;
  box-shadow: 0 1px 2px rgba(30, 27, 57, .18), 0 2px 8px rgba(91, 91, 214, .28);
}

.btn--ghost {
  --_bg: transparent;
  --_bd: transparent;
  --_fg: var(--ink-600);
  box-shadow: none;
}

.btn--danger { --_bg: var(--danger); --_fg: #fff; --_bd: transparent; }

.btn--sm { padding: 6px 12px; font-size: var(--fs-1); border-radius: 6px; }
.btn--notch { border-radius: var(--radius-lg); }
.btn--notch.clip-notch-tr { border: 0; }

.btn-icon {
  display: inline-grid; place-items: center;
  width: 34px; height: 34px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--ink-600);
  box-shadow: var(--shadow-1);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

/* Every hover state lives here rather than beside its component, because on a
   touch device :hover latches after a tap and stays latched until something
   else is tapped — the lift on .btn is the obvious one, but a stuck fill reads
   just as wrong. Gate the lot; :active and :focus-visible carry touch feedback. */
@media (hover: hover) {
  .btn:hover          { background: var(--panel-2); box-shadow: var(--shadow-2); transform: translateY(-1px); }
  .btn--primary:hover { --_bg: var(--accent-hi); color: #fff; }
  .btn--ghost:hover   { --_bg: var(--panel-3); box-shadow: none; }
  .btn--danger:hover  { background: var(--danger); color: #fff; filter: brightness(1.07); }
  .btn-icon:hover     { background: var(--panel-2); color: var(--accent-ink); }

  .tab:hover                 { color: var(--ink-900); }
  .data-table tbody tr:hover { background: var(--panel-2); }
  .modal__close:hover        { color: var(--ink-900); background: var(--panel-3); }
}

/* .btn--sm lands at ~29px tall, which is fine under a mouse and too small for
   a thumb. Coarse pointers get a 44px target; the compact size is kept for
   pointing devices, where the density is the point. */
@media (pointer: coarse) {
  .btn--sm  { min-height: 44px; padding-inline: var(--sp-3); }
  .btn-icon { width: 44px; height: 44px; }
}

/* ------------------------------------------------------------- TABS -------- */
/* A segmented control rather than filing tabs. */
.tabs {
  display: inline-flex;
  gap: 3px;
  padding: 4px;
  background: var(--panel-3);
  border-radius: var(--radius-lg);
  border: 0;
}
.tab {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink-600);
  font-family: var(--font-ui);
  font-size: var(--fs-1);
  font-weight: 550;
  letter-spacing: 0;
  padding: 7px 15px;
  border-radius: 8px;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.tab.is-active {
  background: var(--panel);
  color: var(--ink-900);
  box-shadow: var(--shadow-1);
}

/* ------------------------------------------------------------ PANELS ------- */
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
}
.panel__head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-4) var(--sp-3);
  border-bottom: 1px solid var(--line);
}
.panel__title {
  font-size: var(--fs-3);
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--ink-900);
}
.panel__body { padding: var(--sp-4); }
.panel__foot {
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--line);
  background: var(--panel-2);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* Dark feature panel — stays dark in both modes */
.panel--ink {
  background: var(--console-bg);
  border-color: transparent;
  color: var(--console-fg);
  box-shadow: var(--shadow-2);
}
.panel--ink .panel__head { border-color: var(--console-line); }
.panel--ink .panel__foot { background: transparent; border-color: var(--console-line); }
.panel--ink .panel__title,
.panel--ink .stat__value { color: #fff; }
.panel--ink .stat__label,
.panel--ink .muted { color: #b3b0cc; }

/* -------------------------------------------------- READOUTS / KEY-VALUES -- */
/* Plain label/value rows — no leaders, no dotted rules. */
.readout {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}
.readout:last-child { border-bottom: 0; }
.readout__label {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-2);
  font-weight: 450;
  color: var(--ink-500);
}
.readout__dots { flex: 1; }
.readout__value {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-2);
  color: var(--ink-900);
}
.readout__value--accent { color: var(--accent-ink); }
.readout__value--ok     { color: var(--ok); }
.readout__value--warn   { color: var(--warn); }
.readout__value--fail   { color: var(--danger); }

.stat { display: flex; flex-direction: column; gap: 4px; }
.stat__value {
  font-family: var(--font-ui);
  font-size: var(--fs-6);
  font-weight: 650;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
}
.stat__unit  { font-size: var(--fs-3); font-weight: 500; color: var(--ink-400); }
.stat__label { font-size: var(--fs-1); color: var(--ink-500); }

/* ------------------------------------------------------- FORM CONTROLS ----- */
.field { margin-bottom: var(--sp-4); }
.field > label,
.field-label {
  display: block;
  margin-bottom: var(--sp-2);
  font-size: var(--fs-2);
  font-weight: 550;
  letter-spacing: 0;
  color: var(--ink-800);
}
.input, .select, .textarea,
input[type="text"].hud, input[type="number"].hud, select.hud, textarea.hud {
  width: 100%;
  padding: 10px 12px;
  font-family: var(--font-ui);
  font-size: var(--fs-2);
  color: var(--ink-900);
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--ink-400); }
.input:focus, .select:focus, .textarea:focus,
input.hud:focus, select.hud:focus, textarea.hud:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.input:disabled, .select:disabled, input.hud:disabled, select.hud:disabled {
  opacity: 1; color: var(--ink-400); background: var(--panel-2); cursor: not-allowed;
}
.field-hint { margin-top: 6px; font-size: var(--fs-1); color: var(--ink-500); }

input[type="number"].hud { font-family: var(--font-mono); }

.check {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-2); color: var(--ink-700); cursor: pointer;
}
.check input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--accent); margin: 0; cursor: pointer; }

/* ------------------------------------------------------------ TOOLBAR ------ */
.toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.toolbar__group { display: flex; align-items: center; gap: var(--sp-2); }
.toolbar__label { font-size: var(--fs-1); color: var(--ink-500); }
.toolbar__sep { width: 1px; align-self: stretch; background: var(--line); margin: 4px 0; }

/* ------------------------------------------------------------- TABLE ------- */
.data-table { width: 100%; border-collapse: collapse; font-size: var(--fs-2); }
.data-table thead th {
  text-align: left;
  padding: 11px 14px;
  background: var(--panel-2);
  color: var(--ink-500);
  font-size: var(--fs-1);
  font-weight: 550;
  letter-spacing: 0;
  border-bottom: 1px solid var(--line);
}
.data-table tbody td { padding: 12px 14px; border-bottom: 1px solid var(--line); }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table .num { font-family: var(--font-mono); text-align: right; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------- BADGES ------ */
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  font-size: var(--fs-1);
  font-weight: 550;
  letter-spacing: 0;
  border: 0;
  border-radius: 999px;
  color: var(--ink-600);
  background: var(--panel-3);
}
.tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.tag--ok     { color: var(--ok);        background: var(--ok-soft); }
.tag--warn   { color: var(--warn);      background: var(--warn-soft); }
.tag--danger { color: var(--danger);    background: var(--danger-soft); }
.tag--accent { color: var(--accent-ink); background: var(--accent-soft); }

/* --------------------------------------------------------- PROGRESS -------- */
.progress {
  height: 8px;
  background: var(--panel-3);
  border: 0;
  border-radius: 999px;
  overflow: hidden;
}
.progress__fill { height: 100%; background: var(--accent); border-radius: 999px; }
.progress__fill.dotgrid--accent { background-color: var(--accent-hi); background-image: none; }

/* --------------------------------------------------------- MODAL ----------- */
.modal-overlay {
  position: fixed; inset: 0;
  display: none;
  place-items: center;
  background: rgba(30, 27, 57, .45);
  backdrop-filter: blur(4px);
  z-index: 1000;
}
.modal-overlay.is-open { display: grid; }
.modal {
  width: min(560px, 92vw);
  background: var(--panel);
  border: 0;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
}
.modal__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-4);
  border-bottom: 1px solid var(--line);
}
.modal__title { font-size: var(--fs-4); font-weight: 650; letter-spacing: -0.015em; }
.modal__body { padding: var(--sp-4); }
.modal__close {
  background: none; border: 0; font-size: 18px;
  color: var(--ink-400); cursor: pointer; border-radius: 6px; padding: 2px 6px;
}

/* --------------------------------------------------- APP SHELL ------------- */
/* A light header, not a dark console bar. */
.app-header {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  background: var(--panel);
  color: var(--ink-800);
  border-bottom: 1px solid var(--line);
}
.app-header__brand { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; }
.app-header__logo {
  font-weight: 700; font-size: var(--fs-4);
  letter-spacing: -0.02em;
  color: var(--ink-900);
}
.app-header__sub { font-size: var(--fs-1); color: var(--ink-500); }