/* Oparo Telemetry console.
   Tokens only: every colour, space, radius and duration is a var(--oparo-*)
   style token from the fleet foundations in tokens.css. A hardcoded hex or px
   here is a defect, not a shortcut. */

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; background: var(--color-background); color: var(--color-text);
  font-family: var(--font-sans); font-size: var(--fs-sm); line-height: 1.5;
}

/* Visible focus on every background this can land on. Two rings, so the
   indicator survives both light and dark surfaces. Percepta `focus`. */
:focus-visible {
  outline: 2px solid var(--color-focus-ring); outline-offset: 2px;
  border-radius: var(--radius-sm);
}
:focus:not(:focus-visible) { outline: none; }

.op-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* The skip link is hidden until focused, then fully visible. */
.op-skip {
  position: absolute; left: var(--space-4); top: calc(var(--space-4) * -4);
  z-index: 100; padding: var(--space-2) var(--space-4);
  background: var(--color-surface); color: var(--color-text);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  transition: top var(--motion-fast) var(--ease-standard);
}
.op-skip:focus { top: var(--space-4); }

/* ── shell ── */
.op-header {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-4) var(--space-6); background: var(--color-surface);
  border-bottom: 1px solid var(--color-border); flex-wrap: wrap;
}
.op-header__title {
  font-family: var(--font-heading); font-size: var(--fs-xl);
  font-weight: var(--fw-semibold); margin: 0;
}
.op-header__sub { margin: 0; color: var(--color-text-muted); font-size: var(--fs-xs); }
.op-header__tools { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.op-header__who { color: var(--color-text-muted); }

.op-body { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 70vh; }
@media (max-width: 800px) { .op-body { grid-template-columns: 1fr; } }

.op-nav { padding: var(--space-4); border-right: 1px solid var(--color-border); }
.op-nav__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.op-nav__link {
  display: block; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
  color: var(--color-text); text-decoration: none;
}
.op-nav__link:hover { background: var(--color-surface-2); }
/* The current page is marked by weight and a border as well as colour, so it is
   not identified by hue alone. */
.op-nav__link[aria-current="page"] {
  background: var(--color-primary-subtle); color: var(--color-link);
  font-weight: var(--fw-semibold); box-shadow: inset 3px 0 0 var(--color-primary);
}

.op-main { padding: var(--space-6); max-width: var(--content-max); }
.op-main:focus { outline: none; }
.op-view__title {
  font-family: var(--font-heading); font-size: var(--fs-2xl);
  font-weight: var(--fw-semibold); margin: 0 0 var(--space-4);
}

/* ── tiles ── */
.op-tiles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-4); margin-bottom: var(--space-6);
}
.op-tile {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: var(--space-4); box-shadow: var(--shadow-xs);
  border-top: 3px solid var(--color-border);
}
.op-tile--danger  { border-top-color: var(--color-danger); }
.op-tile--warning { border-top-color: var(--color-warning); }
.op-tile--info    { border-top-color: var(--color-info); }
.op-tile__label { margin: 0; color: var(--color-text-muted); font-size: var(--fs-xs); }
.op-tile__value {
  margin: var(--space-1) 0; font-size: var(--fs-3xl); font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}
.op-tile__sub { margin: 0; color: var(--color-text-muted); font-size: var(--fs-xs); }

/* ── table ── */
.op-table-wrap {
  overflow-x: auto; background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  margin-bottom: var(--space-6);
}
.op-table { width: 100%; border-collapse: collapse; }
.op-table th, .op-table td {
  text-align: left; padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle); vertical-align: top;
}
.op-table thead th {
  position: sticky; top: 0; background: var(--color-surface-2);
  font-weight: var(--fw-semibold); font-size: var(--fs-xs);
  text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;
}
.op-table tbody tr:hover { background: var(--color-surface-2); }
.op-num { text-align: right; font-variant-numeric: tabular-nums; }

.op-sort {
  display: inline-flex; align-items: center; gap: var(--space-1);
  background: none; border: 0; padding: 0; cursor: pointer; color: inherit;
  font: inherit; text-transform: inherit; letter-spacing: inherit;
}
.op-sort__mark::after { content: "\2195"; opacity: .4; }
.op-sort__mark[data-dir="ascending"]::after  { content: "\2191"; opacity: 1; }
.op-sort__mark[data-dir="descending"]::after { content: "\2193"; opacity: 1; }

.op-rowopen {
  background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
  color: var(--color-link); font: inherit; font-weight: var(--fw-medium);
  text-decoration: underline; text-underline-offset: 2px;
}

/* ── badge ── */
.op-badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 2px var(--space-2); border-radius: var(--radius-full);
  font-size: var(--fs-xs); font-weight: var(--fw-medium); white-space: nowrap;
}
/* A distinct SHAPE per tone, so the badges differ by more than hue even before
   the word is read. Percepta `badge`: colour is never the meaning. */
.op-badge__mark { width: 8px; height: 8px; background: currentColor; }
.op-badge--neutral { background: var(--color-surface-2); color: var(--color-text-muted); }
.op-badge--neutral .op-badge__mark { border-radius: var(--radius-full); }
.op-badge--success { background: var(--color-success-subtle); color: var(--color-success-text); }
.op-badge--success .op-badge__mark { border-radius: var(--radius-full); }
.op-badge--warning { background: var(--color-warning-subtle); color: var(--color-warning-text); }
.op-badge--warning .op-badge__mark { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.op-badge--danger  { background: var(--color-danger-subtle);  color: var(--color-danger-text); }
.op-badge--danger .op-badge__mark { clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%); }
.op-badge--info    { background: var(--color-info-subtle);    color: var(--color-link); }
.op-badge--info .op-badge__mark { border-radius: 2px; }

/* ── buttons ── */
.op-btn {
  display: inline-flex; align-items: center; justify-content: center;
  /* 44px minimum height: a comfortable target on touch. Percepta `touch`. */
  min-height: 44px; padding: var(--space-2) var(--space-4); gap: var(--space-2);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: var(--color-surface); color: var(--color-text);
  font: inherit; font-weight: var(--fw-medium); cursor: pointer;
  transition: background var(--motion-fast) var(--ease-standard);
}
.op-btn:hover { background: var(--color-surface-2); }
.op-btn--primary {
  background: var(--color-primary); color: var(--color-on-primary);
  border-color: var(--color-primary);
}
.op-btn--primary:hover { background: var(--color-primary-hover); }
.op-btn--danger { background: var(--color-danger); color: #fff; border-color: var(--color-danger); }
.op-btn--quiet { background: none; border-color: transparent; }
.op-btn--sm { min-height: 36px; padding: var(--space-1) var(--space-3); font-size: var(--fs-xs); }

/* ── fields ── */
.op-field--inline {
  display: inline-flex; align-items: center; gap: var(--space-2);
  margin: 0 var(--space-4) var(--space-4) 0;
}
.op-label { color: var(--color-text-muted); font-size: var(--fs-xs); }
.op-select {
  min-height: 44px; padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: var(--color-surface); color: var(--color-text); font: inherit;
}

/* ── states ── */
.op-empty, .op-error, .op-loading, .op-callout {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: var(--space-6);
  margin-bottom: var(--space-6);
}
.op-empty { text-align: center; }
.op-empty__title, .op-error__title {
  font-family: var(--font-heading); font-size: var(--fs-lg);
  font-weight: var(--fw-semibold); margin: 0 0 var(--space-2);
}
.op-empty__body, .op-error__body { margin: 0 0 var(--space-4); color: var(--color-text-muted); }
.op-error { border-left: 4px solid var(--color-danger); }
.op-callout--warning { border-left: 4px solid var(--color-warning); }
.op-callout--success { border-left: 4px solid var(--color-success); }
.op-callout p { margin: 0; }
.op-loading { display: flex; align-items: center; gap: var(--space-3); color: var(--color-text-muted); }
.op-spinner {
  width: 16px; height: 16px; border-radius: var(--radius-full);
  border: 2px solid var(--color-border); border-top-color: var(--color-primary);
  animation: op-spin 900ms linear infinite;
}
@keyframes op-spin { to { transform: rotate(360deg); } }

/* ── overlay ── */
.op-panel-host { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; }
.op-scrim { position: absolute; inset: 0; background: rgb(15 23 42 / .5); }
.op-panel {
  position: relative; width: min(720px, 92vw); max-height: 86vh; overflow: auto;
  background: var(--color-surface-elevated); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.op-panel__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--color-border);
  position: sticky; top: 0; background: var(--color-surface-elevated);
}
.op-panel__title {
  font-family: var(--font-heading); font-size: var(--fs-lg);
  font-weight: var(--fw-semibold); margin: 0; overflow-wrap: anywhere;
}
.op-panel__close {
  min-width: 44px; min-height: 44px; border: 0; border-radius: var(--radius-sm);
  background: none; color: var(--color-text); font-size: var(--fs-xl); cursor: pointer;
}
.op-panel__close:hover { background: var(--color-surface-2); }
.op-panel__body { padding: var(--space-6); }
.op-locked { overflow: hidden; }

.op-deflist {
  display: grid; grid-template-columns: minmax(120px, auto) 1fr;
  gap: var(--space-2) var(--space-4); margin: 0 0 var(--space-5);
}
.op-deflist dt { color: var(--color-text-muted); font-size: var(--fs-xs); }
.op-deflist dd { margin: 0; overflow-wrap: anywhere; }
.op-detail__h {
  font-family: var(--font-heading); font-size: var(--fs-md);
  font-weight: var(--fw-semibold); margin: var(--space-5) 0 var(--space-2);
}
.op-detail__culprit {
  font-family: ui-monospace, monospace; color: var(--color-text-muted);
  margin: 0 0 var(--space-4); overflow-wrap: anywhere;
}
.op-frames, .op-crumbs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.op-frame {
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
  background: var(--color-surface-2); font-size: var(--fs-xs); overflow-wrap: anywhere;
}
/* The app's own frames are the ones that matter, marked by a border as well as
   weight so the distinction is not carried by colour alone. */
.op-frame--app { border-left: 3px solid var(--color-primary); font-weight: var(--fw-medium); }
.op-crumbs li { display: flex; gap: var(--space-2); align-items: baseline; }
.op-detail__actions, .op-confirm__actions {
  display: flex; gap: var(--space-3); margin-top: var(--space-6); flex-wrap: wrap;
}
.op-confirm__text { margin: 0 0 var(--space-4); }

.op-livebar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); margin-bottom: var(--space-4); flex-wrap: wrap;
}
.op-livestatus { margin: 0; color: var(--color-text-muted); font-size: var(--fs-xs); }

.op-signin {
  max-width: 480px; margin: var(--space-16) auto; padding: var(--space-8);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); text-align: center;
}
.op-signin__title { font-family: var(--font-heading); margin: 0 0 var(--space-3); }
.op-signin__body { color: var(--color-text-muted); margin: 0 0 var(--space-6); }

/* Reduced motion: no spinner rotation, no transitions. Percepta `motion`. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .op-spinner { border-top-color: var(--color-primary); }
}

/* Forced-colours (Windows high contrast): keep borders and focus visible. */
@media (forced-colors: active) {
  .op-tile, .op-table-wrap, .op-panel, .op-btn { border: 1px solid CanvasText; }
  :focus-visible { outline: 2px solid Highlight; }
}