/* =========================================================================
   components.css — buttons, plates, tiles, meters, rings, inputs, logs
   Tokens only: var(--tp-*). No raw colour, radius, duration or shadow.
   ========================================================================= */

/* -------------------------------------------------------------- button -- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 44px;
  padding: .6rem 1rem;
  border-radius: var(--tp-r-btn);
  border: var(--tp-bw) solid transparent;
  font-family: var(--tp-font-display);
  font-style: italic;
  font-weight: var(--tp-w-display);
  font-size: 1rem;
  letter-spacing: var(--tp-track-display);
  text-transform: var(--tp-case-display);
  white-space: nowrap;
  transition: transform var(--tp-dur) var(--tp-ease),
              background var(--tp-dur) var(--tp-ease),
              border-color var(--tp-dur) var(--tp-ease),
              color var(--tp-dur) var(--tp-ease),
              opacity var(--tp-dur) var(--tp-ease);
}

.btn:active { transform: scale(var(--tp-press)); }

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: .42;
  cursor: not-allowed;
}

.btn:disabled:active { transform: none; }

.btn-primary {
  background: var(--tp-grad);
  color: var(--tp-acc-ink);
  box-shadow: var(--tp-sh-sm);
}

.btn-acc {
  background: var(--tp-acc);
  color: var(--tp-acc-ink);
}

.btn-acc-2 {
  background: var(--tp-acc-2);
  color: var(--tp-ink);
}

.btn-outline {
  border-color: var(--tp-line);
  background: var(--tp-surf);
  color: var(--tp-ink);
}

.btn-outline:hover { border-color: var(--tp-acc); color: var(--tp-acc); }

.btn-ghost {
  background: transparent;
  color: var(--tp-mute);
}

.btn-ghost:hover { background: var(--tp-surf-2); color: var(--tp-ink); }

.btn-danger {
  background: var(--tp-danger-plate);
  border-color: var(--tp-danger);
  color: var(--tp-danger);
}

.btn-danger:hover { background: var(--tp-danger); color: var(--tp-acc-ink); }

.btn-block { width: 100%; }
.btn-sm { min-height: 38px; padding: .4rem .75rem; font-size: .88rem; }

.btn-icon {
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: var(--tp-r-btn);
  border-color: var(--tp-line);
  background: var(--tp-surf);
  color: var(--tp-mute);
}

.btn-icon:hover { color: var(--tp-acc); border-color: var(--tp-acc); }

/* Emergency — the one button that is allowed to shout. */
.btn-estop {
  min-height: 60px;
  width: 100%;
  border-radius: var(--tp-r);
  border: 2px solid var(--tp-danger);
  background: var(--tp-danger-plate);
  color: var(--tp-danger);
  font-size: 1.3rem;
}

.btn-estop:hover { background: var(--tp-danger); color: var(--tp-acc-ink); }

.btn-estop.engaged {
  background: var(--tp-danger);
  color: var(--tp-acc-ink);
  animation: tp-pulse 1.1s ease-in-out infinite;
}

/* --------------------------------------------------------------- plate -- */
.plate {
  background: var(--tp-surf);
  border: var(--tp-bw) solid var(--tp-line);
  border-radius: var(--tp-r);
  padding: .95rem;
}

.plate-pad { padding: 1.15rem; }
.plate-sunken { background: var(--tp-surf-2); }
.plate-flush { padding: 0; overflow: hidden; }

.plate-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  margin-bottom: .75rem;
}

.plate-head h3 {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: 1.05rem;
}

.plate-head h3 i { color: var(--tp-acc); font-size: .9rem; }

.plate-head .eyebrow { text-align: right; }

/* --------------------------------------------------------------- badge -- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: .32rem;
  padding: .2rem .5rem;
  border-radius: var(--tp-r-sm);
  border: var(--tp-bw) solid var(--tp-line);
  background: var(--tp-surf-2);
  color: var(--tp-mute);
  font-family: var(--tp-font-mono);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.badge .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 7px;
}

.badge.on,
.badge.ok { color: var(--tp-ok); border-color: var(--tp-ok); background: var(--tp-ok-plate); }
.badge.off { color: var(--tp-mute); }
.badge.warn { color: var(--tp-warn); border-color: var(--tp-warn); background: var(--tp-warn-plate); }
.badge.danger { color: var(--tp-danger); border-color: var(--tp-danger); background: var(--tp-danger-plate); }
.badge.acc { color: var(--tp-acc); border-color: var(--tp-acc); background: var(--tp-acc-plate); }
.badge.acc-2 { color: var(--tp-acc-2); border-color: var(--tp-acc-2); background: var(--tp-acc-2-plate); }

.badge.live .dot { animation: tp-blink 1.2s step-end infinite; }

/* ----------------------------------------------------------- stat tile -- */
.stat {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  padding: .8rem;
  border-radius: var(--tp-r);
  border: var(--tp-bw) solid var(--tp-line);
  background: var(--tp-surf);
  min-width: 0;
}

.stat-ico {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: var(--tp-r-sm);
  background: var(--tp-surf-2);
  color: var(--tp-acc);
  font-size: .9rem;
}

.stat-body { min-width: 0; }

.stat-label {
  display: block;
  font-family: var(--tp-font-mono);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tp-mute);
  margin-bottom: .15rem;
}

.stat-value {
  display: block;
  font-family: var(--tp-font-mono);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stat-sub {
  display: block;
  font-size: .72rem;
  color: var(--tp-mute);
  margin-top: .12rem;
}

/* --------------------------------------------------- hero metric block -- */
.metric-hero {
  display: flex;
  flex-direction: column;
  gap: .1rem;
}

.metric-hero .metric-number {
  font-family: var(--tp-font-display);
  font-style: italic;
  font-weight: var(--tp-w-display);
  font-size: clamp(3.4rem, 17vw, 5.4rem);
  line-height: .86;
  letter-spacing: var(--tp-track-display);
  text-transform: var(--tp-case-display);
}

.metric-hero .metric-number .unit {
  font-size: .38em;
  color: var(--tp-mute);
  margin-left: .12em;
}

/* -------------------------------------------------------------- meter -- */
.meter {
  height: 8px;
  border-radius: 999px;
  background: var(--tp-surf-2);
  overflow: hidden;
}

.meter > span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--tp-grad);
  transition: width var(--tp-dur-slow) var(--tp-ease),
              background var(--tp-dur) linear;
}

.meter.ok > span { background: var(--tp-ok); }
.meter.warn > span { background: var(--tp-warn); }
.meter.danger > span { background: var(--tp-danger); }
.meter.thin { height: 5px; }

.meter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  font-family: var(--tp-font-mono);
  font-size: .7rem;
  color: var(--tp-mute);
  margin-bottom: .3rem;
}

.meter-row strong { color: var(--tp-ink); font-weight: 700; }

/* ---------------------------------------------------------- score ring -- */
.ring {
  position: relative;
  display: grid;
  place-items: center;
  width: 168px;
  height: 168px;
  margin: 0 auto;
}

.ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.ring .ring-track {
  fill: none;
  stroke: var(--tp-surf-2);
}

.ring .ring-fill {
  fill: none;
  stroke: var(--tp-acc);
  stroke-linecap: round;
  transition: stroke-dashoffset var(--tp-dur-slow) var(--tp-ease),
              stroke var(--tp-dur) linear;
}

.ring.is-ok .ring-fill { stroke: var(--tp-ok); }
.ring.is-warn .ring-fill { stroke: var(--tp-warn); }
.ring.is-danger .ring-fill { stroke: var(--tp-danger); }
.ring.is-acc-2 .ring-fill { stroke: var(--tp-acc-2); }

.ring-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.ring-center .ring-value {
  font-family: var(--tp-font-display);
  font-style: italic;
  font-weight: var(--tp-w-display);
  font-size: 2.4rem;
  line-height: 1;
  letter-spacing: var(--tp-track-display);
}

.ring-center .ring-value .unit { font-size: .42em; color: var(--tp-mute); }

.ring-center .ring-label {
  font-family: var(--tp-font-mono);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tp-mute);
  margin-top: .2rem;
}

/* -------------------------------------------------------------- inputs -- */
.field { display: flex; flex-direction: column; gap: .3rem; }

.field > label,
.field-label {
  font-family: var(--tp-font-mono);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tp-mute);
}

.input,
.select {
  width: 100%;
  min-height: 46px;
  padding: .6rem .7rem;
  border-radius: var(--tp-r-sm);
  border: var(--tp-bw) solid var(--tp-line);
  background: var(--tp-surf-2);
  color: var(--tp-ink);
  transition: border-color var(--tp-dur) var(--tp-ease),
              background var(--tp-dur) var(--tp-ease);
}

.input::placeholder { color: var(--tp-mute); }

.input:focus,
.select:focus {
  outline: none;
  border-color: var(--tp-acc);
  background: var(--tp-surf);
}

.input-group {
  position: relative;
  display: flex;
  align-items: center;
}

.input-group > i {
  position: absolute;
  left: .8rem;
  color: var(--tp-mute);
  font-size: .88rem;
  pointer-events: none;
}

.input-group .input { padding-left: 2.4rem; }

.form-grid {
  display: grid;
  gap: .7rem;
  grid-template-columns: minmax(0, 1fr);
}

/* ------------------------------------------------------------- slider --- */
.slider-row {
  display: flex;
  align-items: center;
  gap: .7rem;
}

.slider-row input[type="range"] { flex: 1 1 auto; min-width: 0; }

.slider-row output {
  flex: 0 0 auto;
  min-width: 3.4rem;
  text-align: right;
  font-family: var(--tp-font-mono);
  font-weight: 700;
  font-size: .9rem;
  color: var(--tp-acc);
}

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 34px;
  background: transparent;
  cursor: pointer;
}

input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: var(--tp-surf-2);
  border: var(--tp-bw) solid var(--tp-line);
}

input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: var(--tp-surf-2);
  border: var(--tp-bw) solid var(--tp-line);
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -9px;
  border-radius: 50%;
  background: var(--tp-acc);
  border: 2px solid var(--tp-canvas);
  box-shadow: var(--tp-sh-sm);
}

input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--tp-acc);
  border: 2px solid var(--tp-canvas);
}

/* -------------------------------------------------------------- toggle -- */
.switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  min-height: 48px;
  padding: .35rem 0;
  border-bottom: var(--tp-bw) solid var(--tp-line);
}

.switch-row:last-child { border-bottom: 0; }

.switch-row .switch-text { min-width: 0; }

.switch-row .switch-text strong {
  display: block;
  font-size: .92rem;
  font-weight: 600;
}

.switch-row .switch-text small {
  display: block;
  font-size: .74rem;
  color: var(--tp-mute);
}

.switch {
  position: relative;
  flex: 0 0 50px;
  width: 50px;
  height: 30px;
  border-radius: 999px;
  border: var(--tp-bw) solid var(--tp-line);
  background: var(--tp-surf-2);
  transition: background var(--tp-dur) var(--tp-ease),
              border-color var(--tp-dur) var(--tp-ease);
}

.switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--tp-mute);
  transition: transform var(--tp-dur) var(--tp-ease),
              background var(--tp-dur) var(--tp-ease);
}

.switch[aria-checked="true"] {
  background: var(--tp-acc-plate);
  border-color: var(--tp-acc);
}

.switch[aria-checked="true"]::after {
  transform: translateX(20px);
  background: var(--tp-acc);
}

/* ---------------------------------------------------- segmented control -- */
.segmented {
  display: flex;
  gap: .25rem;
  padding: .25rem;
  border-radius: var(--tp-r-sm);
  border: var(--tp-bw) solid var(--tp-line);
  background: var(--tp-surf-2);
  overflow-x: auto;
  scrollbar-width: none;
}

.segmented::-webkit-scrollbar { display: none; }

.segmented button {
  flex: 1 0 auto;
  min-height: 38px;
  padding: .35rem .8rem;
  border-radius: var(--tp-r-sm);
  color: var(--tp-mute);
  font-family: var(--tp-font-mono);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background var(--tp-dur) var(--tp-ease),
              color var(--tp-dur) var(--tp-ease);
}

.segmented button.active {
  background: var(--tp-acc);
  color: var(--tp-acc-ink);
}

/* --------------------------------------------------------------- kbd ---- */
.kbd {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 .35rem;
  border-radius: var(--tp-r-sm);
  border: var(--tp-bw) solid var(--tp-line);
  background: var(--tp-surf-2);
  font-family: var(--tp-font-mono);
  font-size: .68rem;
  color: var(--tp-mute);
}

/* -------------------------------------------------------- empty/skeleton - */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  padding: 2rem 1rem;
  text-align: center;
  color: var(--tp-mute);
}

.empty i { font-size: 1.6rem; color: var(--tp-line); }
.empty strong { color: var(--tp-ink); font-size: .98rem; }
.empty small { font-size: .78rem; max-width: 34ch; }

.skeleton {
  border-radius: var(--tp-r-sm);
  background: linear-gradient(90deg,
    var(--tp-surf-2) 0%,
    color-mix(in oklab, var(--tp-surf-2) 55%, var(--tp-line)) 50%,
    var(--tp-surf-2) 100%);
  background-size: 260% 100%;
  animation: tp-shimmer 1.4s linear infinite;
}

.skeleton-line { height: 12px; margin-bottom: .5rem; }
.skeleton-line:last-child { margin-bottom: 0; width: 62%; }

/* --------------------------------------------------------------- toast -- */
.toasts {
  position: fixed;
  z-index: 90;
  left: .75rem;
  right: .75rem;
  bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: .5rem;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding: .7rem .8rem;
  border-radius: var(--tp-r-sm);
  border: var(--tp-bw) solid var(--tp-line);
  border-left: 4px solid var(--tp-acc);
  background: var(--tp-surf);
  box-shadow: var(--tp-sh);
  animation: tp-up var(--tp-dur-slow) var(--tp-ease) both;
  pointer-events: auto;
}

.toast i { color: var(--tp-acc); margin-top: .12rem; }
.toast .toast-body { min-width: 0; flex: 1; }
.toast strong { display: block; font-size: .88rem; }
.toast small { display: block; font-size: .76rem; color: var(--tp-mute); }

.toast.ok { border-left-color: var(--tp-ok); }
.toast.ok i { color: var(--tp-ok); }
.toast.warn { border-left-color: var(--tp-warn); }
.toast.warn i { color: var(--tp-warn); }
.toast.danger { border-left-color: var(--tp-danger); }
.toast.danger i { color: var(--tp-danger); }

@media (min-width: 640px) {
  .toasts {
    left: auto;
    right: 1rem;
    top: 1rem;
    bottom: auto;
    width: 340px;
  }
}