/* WARP Admin — Cloudflare-dashboard-inspired UI (no third-party assets).
   Modern platform features: cascade layers, OKLCH tokens, light-dark(), CSS nesting, :has(),
   container queries, popover + anchor positioning, <dialog>, cross-document View Transitions,
   linear() easing, prefers-reduced-motion. */
@layer reset, tokens, base, layout, components, pages, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body, h1, h2, h3, p, dl, dd, ol, ul, figure, fieldset { margin: 0; }
  fieldset { border: 0; padding: 0; min-inline-size: 0; }
  img, svg { display: block; max-inline-size: 100%; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { cursor: pointer; }
  [hidden] { display: none !important; }
}

@layer tokens {
  :root {
    color-scheme: light;
    --font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, "Liberation Mono", monospace;

    /* Cloudflare-like palette: orange accent, blue links, neutral greys */
    --orange: oklch(0.71 0.18 52);        /* ≈ #F6821F */
    --orange-strong: oklch(0.66 0.19 48); /* ≈ #F38020 hover */
    --orange-soft: light-dark(oklch(0.96 0.04 60), oklch(0.32 0.07 50));
    --blue: light-dark(oklch(0.48 0.19 259), oklch(0.74 0.13 250)); /* ≈ #0051C3 / light blue */

    --bg: light-dark(oklch(0.975 0.002 260), oklch(0.18 0.004 260));
    --surface: light-dark(#fff, oklch(0.225 0.004 260));
    --surface-2: light-dark(oklch(0.965 0.003 260), oklch(0.26 0.005 260));
    --sidebar: light-dark(#fff, oklch(0.205 0.004 260));
    --border: light-dark(oklch(0.89 0.004 260), oklch(0.33 0.006 260));
    --border-strong: light-dark(oklch(0.8 0.006 260), oklch(0.42 0.008 260));
    --text: light-dark(oklch(0.25 0.01 260), oklch(0.95 0.003 260));
    --muted: light-dark(oklch(0.5 0.012 260), oklch(0.72 0.01 260));

    --ok: light-dark(oklch(0.52 0.14 150), oklch(0.78 0.15 150));
    --ok-bg: light-dark(oklch(0.95 0.04 150), oklch(0.3 0.06 150));
    --warn: light-dark(oklch(0.55 0.13 75), oklch(0.83 0.14 80));
    --warn-bg: light-dark(oklch(0.96 0.05 85), oklch(0.32 0.06 75));
    --err: light-dark(oklch(0.53 0.2 27), oklch(0.74 0.16 25));
    --err-bg: light-dark(oklch(0.95 0.03 25), oklch(0.31 0.07 25));

    --radius: 8px;
    --radius-lg: 12px;
    --shadow: 0 1px 2px light-dark(oklch(0 0 0 / .06), oklch(0 0 0 / .4)), 0 1px 3px light-dark(oklch(0 0 0 / .05), oklch(0 0 0 / .3));
    --shadow-lg: 0 10px 30px light-dark(oklch(0 0 0 / .12), oklch(0 0 0 / .55)), 0 2px 6px oklch(0 0 0 / .08);
    --ring: 0 0 0 3px light-dark(oklch(0.71 0.18 52 / .35), oklch(0.71 0.18 52 / .5));
    --ease-spring: linear(0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%, 0.849 31.5%, 0.937 38.1%, 0.968 41.8%, 0.991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001 85.9%, 1);
    --ease: cubic-bezier(.2, .7, .2, 1);

    --step-0: clamp(0.94rem, 0.9rem + 0.15vw, 1rem);
    --step-1: clamp(1.1rem, 1.02rem + 0.35vw, 1.25rem);
    --step-2: clamp(1.4rem, 1.2rem + 0.9vw, 1.85rem);
    --step-3: clamp(1.7rem, 1.35rem + 1.6vw, 2.6rem);
    --sidebar-w: 248px;
  }
  :root[data-theme="dark"] { color-scheme: dark; }
  :root[data-theme="auto"] { color-scheme: light dark; }
}

@layer base {
  @view-transition { navigation: auto; }
  html { background: var(--bg); }
  body {
    font: 400 var(--step-0)/1.5 var(--font);
    color: var(--text); background: var(--bg);
    min-block-size: 100dvh; -webkit-font-smoothing: antialiased;
  }
  h1 { font-size: var(--step-2); font-weight: 650; letter-spacing: -0.015em; line-height: 1.2; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
  h2 { font-size: var(--step-1); font-weight: 600; letter-spacing: -0.01em; }
  a { color: var(--blue); text-underline-offset: .18em; text-decoration-thickness: 1px;
      &:hover { text-decoration-thickness: 2px; } }
  code, .mono { font-family: var(--mono); font-size: .92em; }
  code { background: var(--surface-2); border: 1px solid var(--border); padding: .05rem .35rem; border-radius: 5px; overflow-wrap: anywhere; }
  :focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; border-radius: 4px; }
  ::selection { background: oklch(0.71 0.18 52 / .3); }
  .ico { inline-size: 1.1em; block-size: 1.1em; flex: none; }
}

@layer layout {
  .skip-link { position: absolute; inset-inline-start: .5rem; inset-block-start: .5rem; z-index: 100;
    background: var(--surface); padding: .5rem .8rem; border-radius: var(--radius); box-shadow: var(--shadow-lg);
    translate: 0 -200%; visibility: hidden;
    &:focus { translate: 0; visibility: visible; } }

  .shell { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-block-size: 100dvh;
    background: linear-gradient(to right, var(--sidebar) calc(var(--sidebar-w) - 1px), var(--border) 0 var(--sidebar-w), transparent 0); }
  .sidebar {
    position: sticky; inset-block-start: 0; block-size: 100dvh; display: flex; flex-direction: column; gap: 1rem;
    padding: 1rem .75rem; background: var(--sidebar); border-inline-end: 1px solid var(--border);
  }
  .brand { display: flex; align-items: center; gap: .6rem; padding: .35rem .5rem; color: var(--text); text-decoration: none; font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; }
  .brand-mark { inline-size: 28px; block-size: 28px; &.lg { inline-size: 44px; block-size: 44px; } }
  .nav { display: flex; flex-direction: column; gap: 2px; }
  .nav-short { display: none; }
  .nav-link {
    display: flex; align-items: center; gap: .7rem; padding: .55rem .7rem; border-radius: var(--radius);
    color: var(--text); text-decoration: none; font-weight: 500; position: relative;
    transition: background-color .15s var(--ease), color .15s var(--ease);
    & .ico { color: var(--muted); }
    &:hover { background: var(--surface-2); text-decoration: none; }
    &.active { background: var(--orange-soft); color: light-dark(oklch(0.45 0.13 50), oklch(0.9 0.08 60)); font-weight: 600;
      & .ico { color: var(--orange); }
      &::before { content: ""; position: absolute; inset-inline-start: -.75rem; inset-block: .35rem; inline-size: 3px; border-radius: 0 3px 3px 0; background: var(--orange); }
    }
  }
  .side-actions { margin-block-start: auto; display: flex; align-items: center; gap: .4rem; padding-block-start: .75rem; border-block-start: 1px solid var(--border); }
  .logout { gap: .45rem; inline-size: auto; padding-inline: .6rem; }
  .main { padding: clamp(1rem, 0.6rem + 2vw, 2.25rem); max-inline-size: 1240px; inline-size: 100%; margin-inline: auto; display: flex; flex-direction: column; gap: 1rem; view-transition-name: main; outline: none; }
  .guest { min-block-size: 100dvh; display: grid; place-content: center; gap: 1rem; padding: 1.25rem; justify-items: center; outline: none; }
  .guest-alert { inline-size: min(420px, 92vw); }

  @media (max-width: 860px) {
    .shell { grid-template-columns: 1fr; grid-template-rows: auto 1fr; background: none; }
    .sidebar { display: contents; }
    .brand { grid-row: 1; grid-column: 1; padding: .8rem 1rem; position: sticky; inset-block-start: 0; z-index: 20;
      background: color-mix(in oklch, var(--sidebar) 85%, transparent); backdrop-filter: blur(12px) saturate(1.4);
      border-block-end: 1px solid var(--border); }
    .side-actions { grid-row: 1; grid-column: 1; justify-self: end; align-self: center; margin: 0; padding: 0 .75rem; border: 0; position: sticky; inset-block-start: 0; z-index: 21; }
    .logout-label { display: none; }
    .logout { inline-size: 40px; padding: 0; }
    .main { grid-row: 2; grid-column: 1; padding-block-end: calc(5.25rem + env(safe-area-inset-bottom)); }
    .nav {
      position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 30; flex-direction: row; justify-content: space-around;
      padding: .35rem .25rem calc(.35rem + env(safe-area-inset-bottom));
      background: color-mix(in oklch, var(--sidebar) 88%, transparent); backdrop-filter: blur(14px) saturate(1.5);
      border-block-start: 1px solid var(--border);
    }
    .nav-link { flex-direction: column; gap: .15rem; padding: .4rem .3rem; font-size: .72rem; flex: 1; text-align: center; min-inline-size: 0;
      & .ico { inline-size: 1.35rem; block-size: 1.35rem; }
      & .nav-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-inline-size: 100%; }
      & .nav-long:has(+ .nav-short) { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
      & .nav-short { display: inline; }
      &.active { background: transparent; &::before { inset-inline: 30%; inset-block: -.36rem auto; block-size: 3px; inline-size: auto; border-radius: 0 0 3px 3px; } }
    }
  }
}

@layer components {
  .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: clamp(1rem, .8rem + .8vw, 1.5rem); }
  .narrow { max-inline-size: 640px; }
  .center-card { margin-inline: auto; inline-size: 100%; display: grid; gap: .8rem; }
  .card-title { display: flex; align-items: center; gap: .5rem; margin-block-end: .75rem; & .ico { color: var(--orange); } }
  .page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; & p { margin-block-start: .25rem; } }
  .back-link { display: inline-flex; align-items: center; gap: .35rem; font-size: .9rem; margin-block-end: .35rem; text-decoration: none; }
  .eyebrow { display: flex; align-items: center; gap: .4rem; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; }
  .muted { color: var(--muted); }
  .small { font-size: .85rem; }
  .hint { color: var(--muted); font-size: .88rem; & > .ico { display: inline-block; vertical-align: -.15em; margin-inline-end: .2rem; } }
  .card > p + :is(form, .stack, .scan-box), .card > .scan-box.hidden + form { margin-block-start: 1rem; }
  .stack { display: grid; gap: 1rem; }
  .actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-block: .75rem; }
  .inline { display: inline; margin: 0; }
  .grid-2 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 1rem; align-items: start;
    @media (max-width: 960px) { grid-template-columns: 1fr; } }

  /* buttons */
  .btn {
    --_bg: var(--surface); --_fg: var(--text); --_bd: var(--border-strong);
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-block-size: 2.4rem;
    padding: .45rem .95rem; border: 1px solid var(--_bd); border-radius: var(--radius); background: var(--_bg); color: var(--_fg);
    font-weight: 600; font-size: .93rem; text-decoration: none; white-space: nowrap; line-height: 1.2;
    transition: background-color .15s var(--ease), border-color .15s var(--ease), transform .35s var(--ease-spring), box-shadow .15s;
    &:hover { text-decoration: none; background: var(--surface-2); }
    &:active { transform: scale(.97); }
    &:focus-visible { outline: none; box-shadow: var(--ring); }
    &[disabled] { opacity: .6; cursor: progress; }
  }
  .btn-primary { --_bg: var(--orange); --_fg: #fff; --_bd: var(--orange); &:hover { background: var(--orange-strong); border-color: var(--orange-strong); } }
  .btn-secondary { --_fg: var(--blue); }
  .btn-danger { --_fg: var(--err); --_bd: color-mix(in oklch, var(--err) 45%, var(--border)); &:hover { background: var(--err-bg); } }
  .btn-danger-solid { --_bg: var(--err); --_fg: #fff; --_bd: var(--err); &:hover { background: color-mix(in oklch, var(--err) 85%, black); } }
  .btn-ghost { --_bg: transparent; --_bd: transparent; --_fg: var(--blue); }
  .btn-sm { min-block-size: 2rem; padding: .3rem .65rem; font-size: .85rem; }
  .btn-lg { min-block-size: 2.85rem; padding-inline: 1.25rem; font-size: 1rem; }
  .btn-block { inline-size: 100%; }
  .icon-btn { display: inline-grid; place-items: center; inline-size: 40px; block-size: 40px; border-radius: var(--radius); border: 1px solid transparent; background: transparent; color: var(--muted);
    &:hover { background: var(--surface-2); color: var(--text); } &.logout { display: inline-flex; } }
  .spin { animation: spin 1.2s linear infinite; }
  @keyframes spin { to { rotate: 360deg; } }

  /* theme icons follow the chosen mode */
  .when-light, .when-dark, .when-auto { display: none; }
  :root[data-theme="light"] .when-light, :root[data-theme="dark"] .when-dark, :root[data-theme="auto"] .when-auto { display: block; }

  /* popover menu (anchor positioned when supported) */
  .theme-switch { position: relative; anchor-scope: --theme; & > .icon-btn { anchor-name: --theme; }
    &.guest-theme { position: fixed; inset-block-start: 1rem; inset-inline-end: 1rem; z-index: 10; } }
  .menu {
    margin: auto; padding: .35rem; min-inline-size: 200px; border: 1px solid var(--border); border-radius: var(--radius-lg);
    background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg);
    opacity: 0; scale: .96; transition: opacity .18s var(--ease), scale .3s var(--ease-spring), overlay .18s allow-discrete, display .18s allow-discrete;
    &:popover-open { opacity: 1; scale: 1; @starting-style { opacity: 0; scale: .96; } }
  }
  @supports (position-area: top) {
    .menu { position-anchor: --theme; position-area: top span-right; margin: 0 0 .4rem; position-try-fallbacks: flip-block, flip-inline; }
  }
  .menu-title { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: .35rem .6rem; font-weight: 600; }
  .menu-item { display: flex; inline-size: 100%; align-items: center; gap: .6rem; padding: .5rem .6rem; border: 0; border-radius: 6px; background: transparent; text-align: start;
    &:hover { background: var(--surface-2); }
    &[aria-pressed="true"] { color: var(--orange-strong); font-weight: 600; &::after { content: "✓"; margin-inline-start: auto; } } }

  /* forms */
  .field { display: grid; gap: .35rem; }
  .label { font-weight: 600; font-size: .9rem; }
  legend.label { padding: 0; margin-block-end: .4rem; }
  .label-sub { font-size: .85rem; color: var(--muted); }
  .req { color: var(--err); }
  .input {
    inline-size: 100%; min-block-size: 2.6rem; padding: .5rem .75rem; border: 1px solid var(--border-strong); border-radius: var(--radius);
    background: var(--surface); transition: border-color .15s, box-shadow .15s;
    &:hover { border-color: color-mix(in oklch, var(--border-strong) 60%, var(--text)); }
    &:focus { outline: none; border-color: var(--orange); box-shadow: var(--ring); }
    &:user-invalid { border-color: var(--err); }
    &::placeholder { color: color-mix(in oklch, var(--muted) 75%, transparent); }
  }
  .input-code { font-family: var(--mono); font-size: 1.35rem; letter-spacing: .3em; text-align: center; max-inline-size: 14rem; }
  .row-form { display: flex; flex-wrap: wrap; gap: .75rem; align-items: end; }
  .disclosure > summary { cursor: pointer; color: var(--blue); font-weight: 500; padding-block: .25rem; list-style-position: inside; }
  .disclosure[open] > summary { margin-block-end: .6rem; }

  /* segmented control (radio pickers) */
  .segmented { display: inline-flex; flex-wrap: wrap; gap: 0; padding: 3px; border: 1px solid var(--border); border-radius: calc(var(--radius) + 3px); background: var(--surface-2); max-inline-size: 100%; }
  .seg { position: relative; display: flex;
    & input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
    & span { display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .85rem; border-radius: var(--radius); font-weight: 500; font-size: .9rem; color: var(--muted); transition: background-color .18s var(--ease), color .18s, box-shadow .18s; }
    &:hover span { color: var(--text); }
    &:has(input:checked) span { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: var(--shadow); outline: 1px solid var(--border); }
    &:has(input:focus-visible) span { box-shadow: var(--ring); }
  }
  .term .end-date { margin-block-start: .6rem; }
  .term:not(:has(input[value="date"]:checked)) .end-date { display: none; }

  /* alerts / badges */
  .alert { display: flex; gap: .65rem; align-items: flex-start; padding: .75rem 1rem; border-radius: var(--radius); border: 1px solid; font-size: .93rem;
    & .ico { margin-block-start: .15rem; } }
  .alert-ok { background: var(--ok-bg); border-color: color-mix(in oklch, var(--ok) 35%, transparent); color: var(--text); & .ico { color: var(--ok); } }
  .alert-warn { background: var(--warn-bg); border-color: color-mix(in oklch, var(--warn) 40%, transparent); color: var(--text); & .ico { color: var(--warn); } }
  .alert-error { background: var(--err-bg); border-color: color-mix(in oklch, var(--err) 40%, transparent); color: var(--text); & .ico { color: var(--err); } }
  .badge { display: inline-flex; align-items: center; gap: .3rem; padding: .12rem .55rem; border-radius: 999px; font-size: .78rem; font-weight: 600; line-height: 1.5; white-space: nowrap; vertical-align: middle;
    &::before { content: ""; inline-size: .45rem; block-size: .45rem; border-radius: 50%; background: currentColor; } }
  .badge-ok { background: var(--ok-bg); color: var(--ok); }
  .badge-warn { background: var(--warn-bg); color: var(--warn); }
  .badge-err { background: var(--err-bg); color: var(--err); }
  .badge-muted { background: var(--surface-2); color: var(--muted); }
  .err-text { color: var(--err); font-size: .8rem; max-inline-size: 260px; overflow-wrap: anywhere; margin-block-start: .2rem; }

  /* meta list */
  .meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .9rem 1.5rem;
    & dt { color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
    & dd { font-weight: 550; overflow-wrap: anywhere; }
    & .span-2 { grid-column: 1 / -1; } }
  .meta + .alert { margin-block-start: 1rem; }

  /* code areas */
  .code-area { inline-size: 100%; padding: .75rem .85rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2);
    font: .8rem/1.45 var(--mono); resize: vertical; word-break: break-all; color: var(--text);
    &.json { word-break: normal; white-space: pre; overflow: auto; tab-size: 2; }
    &:focus { outline: none; border-color: var(--orange); box-shadow: var(--ring); } }

  /* status card — WARP-app-like hero */
  .status-card { display: grid; grid-template-columns: 1fr auto auto; gap: 1.25rem 2rem; align-items: center; position: relative; overflow: clip;
    border-block-start: 3px solid var(--border-strong);
    &.is-fast { border-block-start-color: var(--orange); }
    container-type: inline-size; }
  .status-main { display: flex; gap: 1rem; align-items: flex-start; min-inline-size: 0; }
  .status-dot { inline-size: .9rem; block-size: .9rem; border-radius: 50%; margin-block-start: .35rem; flex: none; background: var(--muted);
    box-shadow: 0 0 0 5px color-mix(in oklch, var(--muted) 18%, transparent); }
  .is-fast .status-dot { background: var(--ok); box-shadow: 0 0 0 5px color-mix(in oklch, var(--ok) 22%, transparent); animation: pulse 2.4s var(--ease) infinite; }
  @keyframes pulse { 50% { box-shadow: 0 0 0 9px color-mix(in oklch, var(--ok) 6%, transparent); } }
  .status-endpoint { font-size: var(--step-3); font-weight: 650; letter-spacing: -0.02em; line-height: 1.15; overflow-wrap: anywhere; margin-block: .1rem .25rem; }
  .status-metric { display: grid; justify-items: end; text-align: end; }
  .metric-num { font-size: var(--step-3); font-weight: 700; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
  .metric-unit { color: var(--muted); font-size: .85rem; }
  .status-cta { display: grid; gap: .4rem; justify-items: end; }
  @media (max-width: 760px) {
    .status-card { grid-template-columns: 1fr; }
    .status-metric, .status-cta { justify-items: start; text-align: start; }
  }
  .endpoint-mini { display: grid; gap: .5rem; align-content: start; }
  .big { font-size: var(--step-1); font-weight: 650; overflow-wrap: anywhere; }

  /* stats */
  .stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem;
    @media (max-width: 760px) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .stat { display: grid; gap: .25rem; text-decoration: none; color: var(--text); transition: border-color .15s, transform .35s var(--ease-spring);
    &:is(a):hover { border-color: var(--orange); transform: translateY(-1px); text-decoration: none; } }
  .stat-num { font-size: var(--step-2); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
  .stat-label { display: flex; align-items: center; gap: .4rem; color: var(--muted); font-size: .88rem; }
  .stat-warn .stat-num { color: var(--warn); }
  .stat-err .stat-num { color: var(--err); }

  /* toolbar, tabs, search */
  .table-card { padding: 0; overflow: clip; }
  .toolbar { display: flex; justify-content: space-between; gap: .75rem 1rem; flex-wrap: wrap; align-items: center; padding: .75rem 1rem; border-block-end: 1px solid var(--border); }
  .tabs { display: flex; gap: .25rem; flex-wrap: wrap; }
  .tab { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .7rem; border-radius: var(--radius); color: var(--muted); text-decoration: none; font-weight: 500; font-size: .9rem;
    &:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
    &.active { color: var(--text); background: var(--orange-soft); font-weight: 600; }
    & .count { font-size: .75rem; padding: 0 .4rem; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-variant-numeric: tabular-nums; } }
  .search { display: flex; gap: .5rem; flex: 1 1 320px; justify-content: flex-end; flex-wrap: wrap; }
  .search-box { position: relative; flex: 1 1 200px; max-inline-size: 360px;
    & .ico { position: absolute; inset-inline-start: .7rem; inset-block-start: 50%; translate: 0 -50%; color: var(--muted); pointer-events: none; }
    & .input { padding-inline-start: 2.2rem; } }

  /* data table → cards in narrow containers (container query) */
  .table-wrap { container: table / inline-size; overflow-x: auto; }
  table.data { inline-size: 100%; border-collapse: collapse; font-size: .92rem;
    & th, & td { padding: .7rem 1rem; text-align: start; vertical-align: top; border-block-end: 1px solid var(--border); }
    & thead th { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; background: var(--surface-2); white-space: nowrap; }
    & tbody tr { transition: background-color .12s; &:hover { background: color-mix(in oklch, var(--surface-2) 60%, transparent); } }
    & tbody tr:last-child > * { border-block-end: 0; }
    & tbody th { font-weight: 600; }
    & .row-warn { background: color-mix(in oklch, var(--warn-bg) 55%, transparent); }
    & .row-muted { color: var(--muted); & .client-link { color: var(--muted); } }
    & .note { max-inline-size: 260px; overflow-wrap: anywhere; }
    &.compact { & th, & td { padding: .5rem .75rem; } }
  }
  .client-link { font-weight: 600; text-decoration: none; white-space: nowrap; &:hover { text-decoration: underline; } }
  table.data .nowrap { white-space: nowrap; }
  /* medium table width: icon-only row actions (labels stay for screen readers) */
  @container table (760px <= width < 1120px) {
    .row-actions .btn-label { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .row-actions .btn-sm { padding-inline: .5rem; }
    table.data :is(th, td) { padding-inline: .75rem; }
  }
  .row-actions { white-space: nowrap; text-align: end; & > * { margin: .1rem 0 .1rem .25rem; } }
  @container table (width < 760px) {
    table.data thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
    table.data, table.data tbody, table.data tr { display: block; }
    table.data tr { padding: .75rem 1rem; border-block-end: 1px solid var(--border); }
    table.data tbody tr:last-child { border-block-end: 0; }
    table.data :is(th, td) { display: flex; gap: .75rem; padding: .2rem 0; border: 0; align-items: baseline; }
    table.data :is(th, td)[data-l]::before { content: attr(data-l); flex: 0 0 7.5rem; color: var(--muted); font-size: .8rem; font-weight: 500; }
    table.data .row-actions { justify-content: flex-start; flex-wrap: wrap; padding-block-start: .5rem; gap: .4rem; text-align: start; white-space: normal; & > * { margin: 0; } }
    table.data .note { max-inline-size: none; }
    table.data .client-link { white-space: normal; overflow-wrap: anywhere; }
  }
  .empty { display: grid; justify-items: center; gap: .75rem; padding: 2.5rem 1rem; color: var(--muted); }
  .empty-ico { inline-size: 2.5rem; block-size: 2.5rem; color: var(--border-strong); }
  .run-check { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }

  /* scan progress (with shimmer) */
  .scan-box { display: grid; gap: .6rem; padding: 1rem; margin-block: 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
  .scan-row { display: flex; justify-content: space-between; gap: 1rem; font-weight: 600; }
  .progress { inline-size: 100%; block-size: .6rem; appearance: none; border: 0; border-radius: 999px; overflow: hidden; background: var(--border); accent-color: var(--orange);
    &::-webkit-progress-bar { background: var(--border); border-radius: 999px; }
    &::-webkit-progress-value { border-radius: 999px; background: linear-gradient(90deg, var(--orange) 0 40%, oklch(0.82 0.14 70) 50%, var(--orange) 60% 100%) 0 0 / 300% 100%; animation: shimmer 1.8s linear infinite; transition: inline-size .5s var(--ease); }
    &::-moz-progress-bar { background: var(--orange); border-radius: 999px; } }
  @keyframes shimmer { to { background-position: -150% 0; } }

  /* dialog */
  .dialog { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.5rem; inline-size: min(440px, calc(100vw - 2rem)); background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg);
    opacity: 0; translate: 0 8px; transition: opacity .2s var(--ease), translate .4s var(--ease-spring), overlay .2s allow-discrete, display .2s allow-discrete;
    &[open] { opacity: 1; translate: 0 0; @starting-style { opacity: 0; translate: 0 8px; } }
    &::backdrop { background: oklch(0.2 0.01 260 / .45); backdrop-filter: blur(3px); transition: opacity .2s, overlay .2s allow-discrete, display .2s allow-discrete; opacity: 0; }
    &[open]::backdrop { opacity: 1; @starting-style { opacity: 0; } } }
  .dialog-title { font-size: 1.15rem; margin-block-end: .5rem; }
  .dialog-text { color: var(--muted); }
  .dialog-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-block-start: 1.25rem; flex-wrap: wrap; }

  /* toasts */
  .toasts { position: fixed; inset-block-end: 1.25rem; inset-inline: 0; display: grid; justify-items: center; gap: .5rem; pointer-events: none; z-index: 60;
    @media (max-width: 860px) { inset-block-end: calc(5.5rem + env(safe-area-inset-bottom)); } }
  .toast { pointer-events: auto; display: flex; align-items: center; gap: .5rem; padding: .6rem 1rem; border-radius: 999px; background: oklch(0.25 0.01 260); color: #fff; box-shadow: var(--shadow-lg); font-weight: 500; font-size: .92rem;
    animation: toast-in .45s var(--ease-spring) both; & .ico { color: oklch(0.8 0.15 150); }
    &.out { animation: toast-out .25s var(--ease) both; } }
  @keyframes toast-in { from { opacity: 0; translate: 0 12px; scale: .96; } }
  @keyframes toast-out { to { opacity: 0; translate: 0 6px; } }

  /* auth pages */
  .auth-card { inline-size: min(420px, 92vw); display: grid; gap: 1.25rem; padding: 2rem; }
  .auth-brand { display: flex; gap: .85rem; align-items: center; & h1 { font-size: 1.4rem; } & p { font-size: .9rem; } }

  /* 2FA */
  .steps { padding-inline-start: 1.2rem; display: grid; gap: .3rem; margin-block-end: 1rem; }
  .totp-setup { display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: flex-start; }
  .qr { inline-size: 220px; block-size: 220px; border-radius: var(--radius); background: #fff; padding: 6px; border: 1px solid var(--border); }
}

@layer pages {
  ::view-transition-old(main) { animation: vt-out .16s var(--ease) both; }
  ::view-transition-new(main) { animation: vt-in .28s var(--ease) both; }
  @keyframes vt-out { to { opacity: 0; translate: 0 -4px; } }
  @keyframes vt-in { from { opacity: 0; translate: 0 6px; } }
}

@layer utilities {
  .eyebrow .badge { text-transform: none; letter-spacing: 0; margin-inline-start: .35rem; vertical-align: .05em; }
  .sub-title { font-size: .95rem; font-weight: 600; margin-block: 1.1rem .5rem; }
  .seg-compact .seg span { padding-inline: .7rem; font-variant-numeric: tabular-nums; min-inline-size: 3.2rem; justify-content: center; }
  table.data .row-current { background: color-mix(in oklch, var(--orange-soft) 70%, transparent); }
  table.data .row-dim :is(td:not(.row-actions)) { color: var(--muted); }
  .ep-table .badge .ico { display: inline-block; vertical-align: -.15em; }
  .sr-only { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .hidden { display: none !important; }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
    ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  }
  @media (forced-colors: active) { .btn, .card, .seg span { border: 1px solid CanvasText; } }
  @media print { .sidebar, .nav, .actions, .row-actions, .toasts { display: none !important; } .shell { display: block; } }
}