/* Core interactive controls: buttons, metrics, pips, segmented controls.
   Every state that uses color also uses shape, label, or pattern. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--touch-min);
  min-width: var(--touch-min);
  padding: var(--sp-2) var(--sp-5);
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  background: var(--bg-elevated);
  color: var(--text-primary);
  font-size: var(--fs-body);
  font-weight: 600;
  transition: transform var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out);
}

.btn:active {
  transform: scale(0.97);
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn-primary {
  background: linear-gradient(160deg, var(--life-core), var(--life-glow));
  color: var(--text-inverse);
  border-color: transparent;
  font-weight: 700;
  box-shadow: 0 8px 32px rgba(201, 158, 69, 0.18);
}

button[data-action="quiet"] { color: var(--text-secondary); border-color: var(--border-faint); box-shadow: none; }
button[data-action="available"] { color: var(--text-primary); border-color: var(--action-available); box-shadow: inset 0 0 0 1px rgba(159, 203, 179, .12); }
button[data-action="recommended"] { color: var(--text-inverse); border-color: transparent;
  background: linear-gradient(155deg, #f4dea0, var(--action-recommended)); font-weight: 750;
  box-shadow: 0 .45rem 1.8rem rgba(240, 200, 111, .2); }
button[data-action="urgent"] { color: var(--text-inverse); border-color: transparent;
  background: linear-gradient(155deg, #ffd28b, var(--action-urgent)); font-weight: 800; }
button[data-action="destructive"] { color: #f0a99b; border-color: rgba(223, 109, 85, .5); background: rgba(60, 24, 20, .28); }
.context-confirm button[data-action="destructive"] { color: #fff2ed; background: #8f382c; border-color: var(--action-destructive); }
button[data-action]:disabled { opacity: .38; filter: saturate(.4); box-shadow: none; cursor: not-allowed; }

.btn-ghost {
  background: transparent;
  border-color: var(--border-faint);
  color: var(--text-secondary);
}

.btn-icon {
  padding: var(--sp-2);
  border-radius: var(--radius-m);
}

/* Metrics remain compact while visibly presenting as interactive controls at rest. */
.metric {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-right: var(--sp-3);
  min-width: 4.5rem;
  text-shadow: 0 1px 10px var(--bg-deep);
}

.metric-button { position: relative; min-height: var(--touch-min); padding: var(--sp-1) var(--sp-5) var(--sp-1) var(--sp-2); color: inherit;
  cursor: pointer; background: rgba(18, 27, 26, .68); border: 1px solid rgba(230, 213, 167, .28); border-radius: var(--radius-s); text-align: left;
  box-shadow: inset 0 0 0 1px rgba(210, 235, 219, .045), 0 2px 10px rgba(0, 0, 0, .18);
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.metric-button::after { content: "›"; position: absolute; right: var(--sp-2); top: 50%; transform: translateY(-50%); color: var(--text-secondary); font-size: 1rem; }
.metric-button:hover, .metric-button[aria-expanded="true"] { border-color: var(--border-strong); background: rgba(29, 40, 37, .88); }
.metric-button:active { transform: scale(.97); background: rgba(36, 48, 44, .92); }
.metric-button[aria-expanded="true"] { box-shadow: inset 0 0 0 1px rgba(241, 221, 161, .16), 0 3px 14px rgba(0, 0, 0, .24); }
.metric-button[aria-expanded="true"]::after { content: "⌄"; color: var(--text-primary); }
.metric-button:focus-visible { outline: 2px solid var(--life-glow); outline-offset: 2px; }

.result-control { position: relative; min-height: var(--touch-min); min-width: 5.5rem; padding: var(--sp-1) var(--sp-3); cursor: pointer;
  color: var(--text-primary); background: rgba(18, 27, 26, .68); border: 1px solid var(--border-strong);
  border-radius: var(--radius-s); text-align: left; box-shadow: inset 0 0 0 1px rgba(210, 235, 219, .045), 0 2px 10px rgba(0, 0, 0, .18);
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.result-control .metric-label { color: var(--text-faint); font-weight: 700; }
.result-control-value { font-size: var(--fs-body); letter-spacing: .04em; }
.result-control:active { transform: scale(.97); }
.result-control[aria-expanded="true"] { border-color: var(--action-available); background: rgba(29, 40, 37, .88); box-shadow: inset 0 0 0 1px rgba(159, 203, 179, .16), 0 3px 14px rgba(0, 0, 0, .24); }
.result-control:focus-visible { outline: 2px solid var(--life-glow); outline-offset: 2px; }

.metric-label {
  font-size: var(--fs-caption);
  color: var(--text-faint);
  letter-spacing: 0.11em;
}

.metric-value {
  display: block;
  min-width: 0;
  overflow: hidden;
  font-size: var(--fs-lead);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.metric-trace {
  overflow: hidden;
  color: var(--accent-gold);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Speed control segmented control. */
.segmented {
  display: flex;
  background: var(--bg-panel);
  border: 1px solid var(--border-faint);
  border-radius: var(--radius-pill);
  padding: 2px;
}

.segmented button {
  min-height: 40px;
  min-width: 40px;
  padding: 0 var(--sp-2);
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
  font-size: var(--fs-caption);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.segmented button[aria-pressed="true"] {
  background: var(--bg-elevated);
  color: var(--text-primary);
  box-shadow: inset 0 0 0 1px var(--border-strong);
}

.segmented button.is-turbo[aria-pressed="true"] {
  color: var(--accent-gold);
}