/* ==========================================================================
   components.css , every reusable UI object
   ==========================================================================
   NO HEX VALUES IN THIS FILE. See tokens.css.

   RULES OF THIS FILE
   1. Every colour comes from a Tier 2 semantic token.
   2. Every gap/pad comes from the 8-step spacing scale.
   3. Every font-size comes from the 7-step type scale.
   4. Every interactive element is >= var(--tap-min) (44px) on its short axis.
   5. Focus rings are inherited from base.css. Never restyle outline here.
   6. Components own their internals. They never set their own outer margin,
      that belongs to the parent's .stack / .grid gap.
   ========================================================================== */

@layer components {

  /* ========================================================================
     BRAND MARK
     ======================================================================== */
  .brand {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-family: var(--font-mono);
    font-weight: var(--fw-bold);
    font-size: var(--fs-2);
    letter-spacing: var(--tracking-mega);
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .brand__mark {
    background-image: var(--brand-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .brand:hover { text-decoration: none; }


  /* ========================================================================
     BUTTONS
     ========================================================================
     Orange primary, per operator direction. Orange is the only warm hue in a
     cold cyan/magenta palette, so it reads instantly as "press this" without
     competing with links (cyan) or brand (magenta).

     Dark text on orange, not white: ~8.6:1 vs ~3.0:1.
     ======================================================================== */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);

    min-block-size: var(--tap-min);
    padding-inline: var(--sp-4);
    padding-block: var(--sp-2);

    font-family: var(--font-ui);
    font-size: var(--fs-2);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-tight);
    text-align: center;
    white-space: nowrap;

    border: var(--bw-hair) solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    user-select: none;

    transition: background-color var(--dur-fast) var(--ease-out),
                border-color     var(--dur-fast) var(--ease-out),
                color            var(--dur-fast) var(--ease-out),
                transform        var(--dur-instant) var(--ease-out),
                box-shadow       var(--dur-fast) var(--ease-out);
  }
  .btn:hover { text-decoration: none; }
  .btn:active { transform: translateY(1px); }
  .btn:disabled,
  .btn[aria-disabled="true"] {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
  }

  /* --- Primary: THE orange button --- */
  .btn--primary {
    background-color: var(--btn-primary-bg);
    border-color: var(--btn-primary-border);
    color: var(--btn-primary-fg);
  }
  .btn--primary:hover:not(:disabled) {
    background-color: var(--btn-primary-bg-hover);
    border-color: var(--btn-primary-bg-hover);
    /* A restrained glow. This is the cyberpunk nod, on the one element that
       earns it, rather than on every surface like v1 did. */
    box-shadow: 0 0 0 1px var(--btn-primary-glow), var(--shadow-md);
  }
  .btn--primary:active:not(:disabled) {
    background-color: var(--btn-primary-bg-active);
  }

  /* --- Secondary: outlined --- */
  .btn--secondary {
    background-color: var(--btn-secondary-bg);
    border-color: var(--btn-secondary-border);
    color: var(--btn-secondary-fg);
  }
  .btn--secondary:hover:not(:disabled) {
    background-color: var(--btn-secondary-bg-hover);
    border-color: var(--color-accent);
    color: var(--color-accent);
  }

  /* --- Ghost: chrome-level, icon-first --- */
  .btn--ghost {
    background-color: transparent;
    color: var(--btn-ghost-fg);
  }
  .btn--ghost:hover:not(:disabled) {
    background-color: var(--btn-ghost-bg-hover);
    color: var(--btn-ghost-fg-hover);
  }

  /* --- Danger --- */
  .btn--danger {
    background-color: var(--btn-danger-bg);
    border-color: var(--btn-danger-bg);
    color: var(--btn-danger-fg);
  }
  .btn--danger:hover:not(:disabled) {
    background-color: var(--btn-danger-bg-hover);
    border-color: var(--btn-danger-bg-hover);
  }

  /* --- Modifiers --- */
  .btn--block { inline-size: 100%; }
  .btn--sm {
    min-block-size: auto;
    padding: var(--sp-1) var(--sp-3);
    font-size: var(--fs-1);
  }
  /* Square icon-only button. Still 44px, still tappable. */
  .btn--icon {
    padding: 0;
    inline-size: var(--tap-min);
    min-inline-size: var(--tap-min);
    --icon-size: 1.25rem;
  }


  /* ========================================================================
     CARD , the base surface everything sits on
     ======================================================================== */
  .card {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    padding: var(--sp-4);
    background-color: var(--color-surface);
    border: var(--bw-hair) solid var(--color-border);
    border-radius: var(--radius-lg);
    min-inline-size: 0;          /* lets long content ellipsize, not overflow */
  }

  .card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
  }
  .card__title {
    font-size: var(--fs-2);
    font-weight: var(--fw-semibold);
    color: var(--color-text);
  }
  .card__label {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-1);
    font-family: var(--font-mono);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-text-dim);
  }
  .card__foot {
    margin-block-start: auto;    /* pins the footer to the bottom in a grid */
    padding-block-start: var(--sp-3);
    border-block-start: var(--bw-hair) solid var(--color-border-subtle);
  }

  /* Interactive card (whole surface is a link/button) */
  .card--link {
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    transition: border-color var(--dur-fast) var(--ease-out),
                background-color var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-out);
  }
  .card--link:hover {
    background-color: var(--color-surface-hover);
    border-color: var(--color-accent);
    text-decoration: none;
    transform: translateY(-2px);
  }
  .card--link:active { transform: translateY(0); }


  /* ========================================================================
     STAT CARD , CPU / RAM / GPU / DISK
     ======================================================================== */
  .stat {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    padding: var(--sp-4);
    background-color: var(--color-surface);
    border: var(--bw-hair) solid var(--color-border);
    border-radius: var(--radius-lg);
    text-align: start;
    inline-size: 100%;
    transition: border-color var(--dur-fast) var(--ease-out),
                background-color var(--dur-fast) var(--ease-out);
  }
  .stat:hover {
    border-color: var(--color-border-strong);
    background-color: var(--color-surface-hover);
  }

  .stat__label {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-family: var(--font-mono);
    font-size: var(--fs-1);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-text-dim);
  }
  .stat__value {
    font-family: var(--font-mono);
    font-size: var(--fs-6);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    color: var(--color-text);
    font-variant-numeric: tabular-nums;   /* no jitter on live updates */
  }
  .stat__unit {
    font-size: var(--fs-2);
    font-weight: var(--fw-regular);
    color: var(--color-text-dim);
  }
  .stat__sub {
    font-size: var(--fs-1);
    color: var(--color-text-muted);
    font-family: var(--font-mono);
  }

  /* --- Meter. The bar under a stat. --- */
  .meter {
    block-size: 6px;
    inline-size: 100%;
    background-color: var(--color-bg-sunken);
    border-radius: var(--radius-pill);
    overflow: hidden;
  }
  .meter__fill {
    display: block;
    block-size: 100%;
    inline-size: var(--meter-value, 0%);
    border-radius: inherit;
    background-color: var(--meter-color, var(--color-accent));
    transition: inline-size var(--dur-slow) var(--ease-out),
                background-color var(--dur-base) var(--ease-out);
  }
  /* Threshold colours are driven by a data attribute set in JS, so the
     mapping lives in CSS where the tokens are, not in a JS colour string. */
  .meter[data-level="ok"]    .meter__fill { --meter-color: var(--color-ok); }
  .meter[data-level="warn"]  .meter__fill { --meter-color: var(--color-warn); }
  .meter[data-level="high"]  .meter__fill { --meter-color: var(--color-danger); }


  /* ========================================================================
     NAV ITEM , the drawer's service rows
     ======================================================================== */
  .nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .nav-item {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    inline-size: 100%;
    min-block-size: var(--tap-min);
    padding: var(--sp-2) var(--sp-4);

    font-size: var(--fs-2);
    font-weight: var(--fw-medium);
    color: var(--color-text-secondary);
    text-align: start;
    text-decoration: none;

    border-inline-start: var(--bw-thick) solid transparent;
    transition: background-color var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out);
  }
  .nav-item:hover {
    background-color: var(--color-surface-hover);
    color: var(--color-accent);
    border-inline-start-color: var(--color-accent);
    text-decoration: none;
  }
  .nav-item[aria-current="page"] {
    background-color: var(--color-surface-hover);
    color: var(--color-accent);
    border-inline-start-color: var(--color-accent);
  }

  .nav-item__icon  { --icon-size: 1.125rem; color: var(--color-text-dim); }
  .nav-item:hover .nav-item__icon,
  .nav-item[aria-current="page"] .nav-item__icon { color: inherit; }

  .nav-item__label {
    flex: 1;
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .nav-item__hint {
    --icon-size: 0.75rem;
    color: var(--color-text-muted);
    opacity: 0;
    transition: opacity var(--dur-fast) var(--ease-out);
  }
  .nav-item:hover .nav-item__hint,
  .nav-item:focus-visible .nav-item__hint { opacity: 1; }


  /* ========================================================================
     ACCORDION , groups the 20 services in the drawer
     ========================================================================
     Built on <details>/<summary>, so it works with zero JavaScript, is
     keyboard accessible for free, and is announced correctly by screen
     readers. JS only adds the single-open-at-a-time behaviour on mobile.
     ======================================================================== */
  .acc { border-block-end: var(--bw-hair) solid var(--color-border-subtle); }
  .acc:last-child { border-block-end: none; }

  .acc__summary {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    min-block-size: var(--tap-min);
    padding: var(--sp-2) var(--sp-4);
    cursor: pointer;
    list-style: none;
    user-select: none;

    font-family: var(--font-mono);
    font-size: var(--fs-1);
    font-weight: var(--fw-bold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-text-dim);

    transition: color var(--dur-fast) var(--ease-out);
  }
  /* Kill the native disclosure triangle in every engine. */
  .acc__summary::-webkit-details-marker { display: none; }
  .acc__summary::marker { content: ""; }

  .acc__summary:hover { color: var(--color-text); }

  .acc__count {
    font-size: var(--fs-1);
    color: var(--color-text-muted);
    font-weight: var(--fw-regular);
  }

  .acc__chevron {
    margin-inline-start: auto;
    --icon-size: 0.875rem;
    transition: transform var(--dur-fast) var(--ease-out);
  }
  .acc[open] > .acc__summary .acc__chevron { transform: rotate(180deg); }
  .acc[open] > .acc__summary { color: var(--color-text); }

  .acc__panel { padding-block-end: var(--sp-2); }


  /* ========================================================================
     SERVICE CARD , the home-canvas tile
     ======================================================================== */
  .svc {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-4);
    background-color: var(--color-surface);
    border: var(--bw-hair) solid var(--color-border);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: inherit;
    min-inline-size: 0;
    transition: border-color var(--dur-fast) var(--ease-out),
                background-color var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-out);
  }
  .svc:hover {
    background-color: var(--color-surface-hover);
    border-color: var(--color-accent);
    text-decoration: none;
    transform: translateY(-2px);
  }
  .svc:active { transform: translateY(0); }

  .svc__icon {
    --icon-size: 1.25rem;
    display: grid;
    place-items: center;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    flex: none;
    border-radius: var(--radius-md);
    background-color: var(--color-bg-sunken);
    color: var(--color-accent);
  }
  .svc__body { flex: 1; min-inline-size: 0; }
  .svc__name {
    display: block;
    font-size: var(--fs-2);
    font-weight: var(--fw-semibold);
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .svc__meta {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--fs-1);
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }


  /* ========================================================================
     CHIP / BADGE / STATUS DOT
     ======================================================================== */
  .chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    padding: var(--sp-1) var(--sp-2);
    font-family: var(--font-mono);
    font-size: var(--fs-1);
    line-height: var(--lh-tight);
    color: var(--color-text-dim);
    background-color: var(--color-bg-sunken);
    border: var(--bw-hair) solid var(--color-border);
    border-radius: var(--radius-sm);
    white-space: nowrap;
  }
  .chip--ok     { color: var(--color-ok);      border-color: var(--color-ok); }
  .chip--warn   { color: var(--color-warn);    border-color: var(--color-warn); }
  .chip--danger { color: var(--color-danger);  border-color: var(--color-danger); }
  .chip--accent { color: var(--color-accent);  border-color: var(--color-accent); }
  .chip--brand  { color: var(--color-brand);   border-color: var(--color-brand); }

  .dot {
    inline-size: 8px;
    block-size: 8px;
    border-radius: var(--radius-pill);
    background-color: var(--color-text-muted);
    flex: none;
  }
  .dot--ok     { background-color: var(--color-ok); }
  .dot--warn   { background-color: var(--color-warn); }
  .dot--danger { background-color: var(--color-danger); }

  /* Live pulse. Purely decorative, so it is safe for reduced-motion to
     flatten it, which the global override does automatically. */
  .dot--live { position: relative; }
  .dot--live::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-color: inherit;
    animation: dot-pulse 2s var(--ease-out) infinite;
  }
  @keyframes dot-pulse {
    0%   { transform: scale(1);   opacity: 0.7; }
    70%  { transform: scale(2.6); opacity: 0; }
    100% { transform: scale(2.6); opacity: 0; }
  }


  /* ========================================================================
     SESSION PILL , who you are, top-right
     ======================================================================== */
  .session {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-1) var(--sp-2) var(--sp-1) var(--sp-1);
    border: var(--bw-hair) solid var(--color-border);
    border-radius: var(--radius-pill);
    background-color: var(--color-surface);
    max-inline-size: 100%;
  }
  .session__avatar {
    display: grid;
    place-items: center;
    inline-size: 1.75rem;
    block-size: 1.75rem;
    flex: none;
    border-radius: var(--radius-pill);
    background-image: var(--brand-gradient);
    color: var(--color-text-inverse);
    font-family: var(--font-mono);
    font-size: var(--fs-1);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
  }
  .session__name {
    font-size: var(--fs-2);
    font-weight: var(--fw-medium);
    color: var(--color-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* Below tablet the name is dropped, the avatar carries the identity.
     v1 did the same, but by hiding a whole element with display:none and
     nothing in its place. */
  @media (max-width: 639px) {
    .session__name { display: none; }
  }


  /* ========================================================================
     MODAL , <dialog>, so focus trapping and ESC are the browser's job
     ========================================================================
     v1 hand-rolled overlays with display:flex toggles and no focus
     management at all: tab order leaked to the page behind, ESC did nothing.
     Native <dialog>.showModal() gives correct focus trap, inert background,
     ESC-to-close and top-layer stacking for free.
     ======================================================================== */
  .modal {
    inline-size: min(92vw, 640px);
    max-block-size: min(85svh, 800px);
    padding: 0;
    background-color: var(--color-surface);
    color: var(--color-text);
    border: var(--bw-hair) solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
  }
  .modal::backdrop {
    background-color: var(--scrim);
    backdrop-filter: blur(2px);
  }
  .modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-5);
    border-block-end: var(--bw-hair) solid var(--color-border);
  }
  .modal__title {
    font-family: var(--font-mono);
    font-size: var(--fs-4);
    font-weight: var(--fw-bold);
  }
  .modal__body {
    padding: var(--sp-5);
    overflow-y: auto;
    max-block-size: 60svh;
  }
  .modal__foot {
    display: flex;
    justify-content: flex-end;
    gap: var(--sp-2);
    padding: var(--sp-4) var(--sp-5);
    border-block-start: var(--bw-hair) solid var(--color-border);
  }


  /* ========================================================================
     TOAST
     ======================================================================== */
  .toasts {
    position: fixed;
    inset-block-end: var(--sp-4);
    inset-inline: var(--sp-4);
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-2);
    pointer-events: none;
  }
  @media (min-width: 640px) {
    .toasts { inset-inline: auto var(--sp-5); align-items: flex-end; }
  }
  .toast {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    max-inline-size: min(92vw, 420px);
    background-color: var(--color-surface-raised);
    border: var(--bw-hair) solid var(--color-border-strong);
    border-inline-start: var(--bw-thick) solid var(--color-accent);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    font-size: var(--fs-2);
    pointer-events: auto;
    animation: toast-in var(--dur-base) var(--ease-out);
  }
  .toast--ok     { border-inline-start-color: var(--color-ok); }
  .toast--warn   { border-inline-start-color: var(--color-warn); }
  .toast--danger { border-inline-start-color: var(--color-danger); }
  @keyframes toast-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
  }


  /* ========================================================================
     TABLE , scrolls itself, never the page
     ======================================================================== */
  .table-wrap {
    inline-size: 100%;
    overflow-x: auto;
    border: var(--bw-hair) solid var(--color-border);
    border-radius: var(--radius-lg);
  }
  .table {
    inline-size: 100%;
    min-inline-size: 480px;      /* forces the wrapper to scroll, not the body */
    font-size: var(--fs-2);
  }
  .table th,
  .table td {
    padding: var(--sp-3) var(--sp-4);
    text-align: start;
    border-block-end: var(--bw-hair) solid var(--color-border-subtle);
  }
  .table th {
    font-family: var(--font-mono);
    font-size: var(--fs-1);
    font-weight: var(--fw-bold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-text-dim);
    background-color: var(--color-bg-sunken);
    position: sticky;
    inset-block-start: 0;
  }
  .table tbody tr:last-child td { border-block-end: none; }
  .table tbody tr:hover { background-color: var(--color-surface-hover); }


  /* ========================================================================
     EMPTY STATE
     ======================================================================== */
  .empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-7) var(--sp-4);
    text-align: center;
    color: var(--color-text-dim);
  }
  .empty__icon { --icon-size: 2rem; color: var(--color-text-muted); }


  /* ========================================================================
     SKELETON , loading placeholder
     ======================================================================== */
  .skeleton {
    background-color: var(--color-surface-hover);
    border-radius: var(--radius-sm);
    position: relative;
    overflow: hidden;
    color: transparent;
  }
  .skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(
      90deg,
      transparent,
      var(--color-border-strong),
      transparent
    );
    transform: translateX(-100%);
    animation: skeleton-sweep 1.4s var(--ease-in-out) infinite;
  }
  @keyframes skeleton-sweep { to { transform: translateX(100%); } }
}