/* Orbit D3 stylesheet for the orbit-mcp admin console.
 *
 * Lifted verbatim from docs/wireframes/admin-console.html so the token values
 * cannot drift from the approved design. A handful of rules below only styled
 * the wireframe gallery (.board, .cap, .ann, .harness, .page-head) and are
 * unused here; they are left in place rather than pruned, because editing this
 * block by hand is exactly how it would come adrift from the wireframe.
 *
 * Application-only additions are at the end, clearly marked. Anything a real
 * console needs that a static gallery did not — a modal backdrop, the app
 * shell — belongs there, not woven into the lifted rules.
 */

/* ============================================================
   Orbit D3 token contract — orbit-component-library/CLAUDE.md §5.
   Components below read var(--orbit-*) only; no raw values.
   ============================================================ */
:root{
  /* Brand (tenant layer) */
  --orbit-brand-primary:#92248E;
  --orbit-brand-primary-light:#A04E9C;
  --orbit-brand-primary-dark:#8B1586;
  --orbit-brand-secondary:#FE4A00;
  --orbit-brand-font:'Inter',system-ui,-apple-system,"Segoe UI",sans-serif;

  /* Surface (colour-mode layer) */
  --orbit-bg:#f9fafb; --orbit-surface:#ffffff;
  --orbit-text:#1f2937; --orbit-muted:#6b7280; --orbit-border:#e5e7eb;

  /* Semantic (a11y-safe pairs) */
  --orbit-success:#16a34a; --orbit-success-bg:#dcfce7;
  --orbit-warning:#d97706; --orbit-warning-bg:#fef3c7;
  --orbit-error:#dc2626;   --orbit-error-bg:#fee2e2;
  --orbit-info:#2563eb;    --orbit-info-bg:#dbeafe;

  /* Spacing + scale */
  --orbit-spacing-unit:8px; --orbit-font-scale:1;
  --orbit-radius-control:8px; --orbit-radius-panel:12px;
  --orbit-min-touch:44px;
  --orbit-focus-ring:0 0 0 3px rgba(146,36,142,.40);

  --s1:calc(var(--orbit-spacing-unit)*1); --s2:calc(var(--orbit-spacing-unit)*2);
  --s3:calc(var(--orbit-spacing-unit)*3); --s4:calc(var(--orbit-spacing-unit)*4);
}
/* Layer 2 — density */
:root[data-spacing="compact"]{--orbit-spacing-unit:6px}
:root[data-spacing="spacious"]{--orbit-spacing-unit:10px}
/* Layer 4 — font size */
:root[data-font-size="large"]{--orbit-font-scale:1.15}
:root[data-font-size="xl"]{--orbit-font-scale:1.30}
/* Layer 3 — colour mode. Explicit choice wins in both directions. */
@media (prefers-color-scheme:dark){
  :root:not([data-color-mode="light"]){
    --orbit-bg:#1a1a1a; --orbit-surface:#2d2d2d;
    --orbit-text:#f9fafb; --orbit-muted:#9ca3af; --orbit-border:#374151;
    --orbit-success-bg:#0f2e1a; --orbit-warning-bg:#33250a;
    --orbit-error-bg:#3a1414;   --orbit-info-bg:#0f2036;
  }
}
:root[data-color-mode="dark"]{
  --orbit-bg:#1a1a1a; --orbit-surface:#2d2d2d;
  --orbit-text:#f9fafb; --orbit-muted:#9ca3af; --orbit-border:#374151;
  --orbit-success-bg:#0f2e1a; --orbit-warning-bg:#33250a;
  --orbit-error-bg:#3a1414;   --orbit-info-bg:#0f2036;
}

*{box-sizing:border-box}
html{font-size:calc(1rem*var(--orbit-font-scale))}
body{margin:0;background:var(--orbit-bg);color:var(--orbit-text);
     font-family:var(--orbit-brand-font);font-size:1rem;line-height:1.5}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Focus ring — never outline:none without a replacement (ACCESSIBILITY §1.2) */
a:focus-visible,button:focus-visible,[tabindex]:focus-visible,
.control:focus-visible,select:focus-visible,input:focus-visible{
  outline:2px solid transparent;box-shadow:var(--orbit-focus-ring);border-radius:var(--orbit-radius-control)}

.skip{position:absolute;left:-9999px;top:0;background:var(--orbit-surface);color:var(--orbit-text);
      padding:var(--s1) var(--s2);z-index:10;border-radius:var(--orbit-radius-control)}
.skip:focus{left:var(--s2);top:var(--s2)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.wrap{max-width:60rem;margin:0 auto;padding:var(--s3) var(--s2)}
.page-head h1{font-size:1.35rem;margin:0 0 var(--s1)}
.page-head p{margin:0 0 var(--s1);color:var(--orbit-muted);max-width:70ch}

/* Review harness — NOT part of the product */
.harness{position:sticky;top:0;z-index:5;background:var(--orbit-surface);
  border:1px solid var(--orbit-border);border-radius:var(--orbit-radius-panel);
  padding:var(--s1) var(--s2);margin-bottom:var(--s3);display:flex;gap:var(--s2);
  flex-wrap:wrap;align-items:center}
.harness p{margin:0;font-size:.8rem;color:var(--orbit-muted);flex:1 1 12rem}
.harness label{font-size:.75rem;color:var(--orbit-muted);display:flex;gap:var(--s1)/2;align-items:center;gap:6px}
.harness select{font:inherit;font-size:.8rem;padding:6px 8px;background:var(--orbit-surface);
  color:var(--orbit-text);border:1px solid var(--orbit-border);border-radius:var(--orbit-radius-control)}

/* Artboard */
.board{background:var(--orbit-surface);border:1px solid var(--orbit-border);
  border-radius:var(--orbit-radius-panel);margin-bottom:var(--s3);overflow:hidden}
.board > .cap{padding:var(--s1) var(--s2);border-bottom:1px solid var(--orbit-border);
  background:var(--orbit-bg);display:flex;gap:var(--s2);flex-wrap:wrap;align-items:baseline}
.cap h2{margin:0;font-size:.95rem;font-weight:600}
.cap .ep{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.75rem;color:var(--orbit-muted)}
.screen{padding:var(--s2)}
.ann{border-top:1px dashed var(--orbit-border);background:var(--orbit-bg);
  padding:var(--s1) var(--s2);font-size:.8rem;color:var(--orbit-muted)}
.ann b{color:var(--orbit-text)}
.ann code{font-size:.75rem}

/* App chrome inside an artboard */
.appbar{display:flex;align-items:center;gap:var(--s2);padding:var(--s1) 0 var(--s2);
  border-bottom:1px solid var(--orbit-border);flex-wrap:wrap}
.logo{font-weight:700;letter-spacing:-.01em}
.logo em{font-style:normal;color:var(--orbit-brand-primary)}
.spacer{flex:1}
.appnav{display:flex;gap:2px;padding-top:var(--s1);flex-wrap:wrap}
.appnav a{display:inline-flex;align-items:center;min-height:var(--orbit-min-touch);
  padding:0 var(--s2);color:var(--orbit-muted);text-decoration:none;
  border-bottom:3px solid transparent;font-weight:500}
.appnav a[aria-current="page"]{color:var(--orbit-text);font-weight:600;
  border-bottom-color:var(--orbit-brand-primary)}
.appnav a:hover{color:var(--orbit-text)}

h3.t{margin:var(--s2) 0 4px;font-size:1.1rem;font-weight:600}
p.sub{margin:0 0 var(--s2);color:var(--orbit-muted)}
.row{display:flex;gap:var(--s1);flex-wrap:wrap;align-items:center}
.grow{flex:1 1 12rem;min-width:0}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
@media (max-width:40rem){.cols{grid-template-columns:1fr}}

/* Button — inputs/Button.md. One primary per screen. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:var(--orbit-min-touch);padding:0 var(--s2);font:inherit;font-weight:500;
  border-radius:var(--orbit-radius-control);border:1px solid transparent;cursor:pointer;
  background:var(--orbit-brand-primary);color:#fff}
.btn:hover{background:var(--orbit-brand-primary-dark)}
.btn.secondary{background:var(--orbit-surface);color:var(--orbit-text);border-color:var(--orbit-border)}
.btn.secondary:hover{background:var(--orbit-bg)}
.btn.ghost{background:transparent;color:var(--orbit-text)}
.btn.ghost:hover{background:var(--orbit-bg)}
.btn.destructive{background:var(--orbit-error);color:#fff}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5;pointer-events:none}

/* FormField — inputs/FormField.md */
.field{margin-bottom:var(--s2)}
.field > label{display:block;font-weight:500;margin-bottom:6px}
.req{color:var(--orbit-muted);font-weight:400;font-size:.8rem}
.control{display:block;width:100%;min-height:var(--orbit-min-touch);padding:0 var(--s1);
  font:inherit;background:var(--orbit-surface);color:var(--orbit-text);
  border:1px solid var(--orbit-border);border-radius:var(--orbit-radius-control)}
textarea.control{min-height:6rem;padding:var(--s1);line-height:1.5}
.help{margin:6px 0 0;font-size:.8rem;color:var(--orbit-muted)}
.err{margin:6px 0 0;font-size:.8rem;color:var(--orbit-error);display:flex;gap:6px;align-items:flex-start}
.control[aria-invalid="true"]{border-color:var(--orbit-error);border-width:2px}
.drop{border:2px dashed var(--orbit-border);border-radius:var(--orbit-radius-control);
  padding:var(--s3) var(--s2);text-align:center;color:var(--orbit-muted)}

/* Badge — data-display/Badge.md. icon + text + colour, always all three. */
.badge{display:inline-flex;align-items:center;gap:6px;border-radius:9999px;
  padding:2px 10px;font-size:.8rem;font-weight:500;border:1px solid transparent}
.badge.success{background:var(--orbit-success-bg);color:var(--orbit-success);border-color:var(--orbit-success)}
.badge.error{background:var(--orbit-error-bg);color:var(--orbit-error);border-color:var(--orbit-error)}
.badge.warning{background:var(--orbit-warning-bg);color:var(--orbit-warning);border-color:var(--orbit-warning)}
.badge.info{background:var(--orbit-info-bg);color:var(--orbit-info);border-color:var(--orbit-info)}
.badge.neutral{background:var(--orbit-bg);color:var(--orbit-muted);border-color:var(--orbit-border)}
.tag{display:inline-block;border:1px solid var(--orbit-border);border-radius:9999px;
  padding:1px 10px;margin:0 4px 4px 0;font-size:.8rem;color:var(--orbit-muted)}

/* Alert — feedback/Alert.md */
.alert{display:flex;gap:var(--s1);padding:var(--s1) var(--s2);border-radius:var(--orbit-radius-control);
  border:1px solid;margin:var(--s2) 0;font-size:.9rem}
.alert h4{margin:0 0 2px;font-size:.9rem;font-weight:600}
.alert p{margin:0}
.alert.info{background:var(--orbit-info-bg);border-color:var(--orbit-info);color:var(--orbit-text)}
.alert.warning{background:var(--orbit-warning-bg);border-color:var(--orbit-warning);color:var(--orbit-text)}
.alert.error{background:var(--orbit-error-bg);border-color:var(--orbit-error);color:var(--orbit-text)}
.alert.success{background:var(--orbit-success-bg);border-color:var(--orbit-success);color:var(--orbit-text)}
.alert .ico{flex:none}
.alert.info .ico{color:var(--orbit-info)} .alert.warning .ico{color:var(--orbit-warning)}
.alert.error .ico{color:var(--orbit-error)} .alert.success .ico{color:var(--orbit-success)}

/* Table — data-display/Table.md. Semantic table, caption, th scope. */
.tablewrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.9rem}
caption{text-align:left;color:var(--orbit-muted);font-size:.8rem;padding-bottom:var(--s1)}
th,td{text-align:left;padding:var(--s1);border-bottom:1px solid var(--orbit-border);vertical-align:top}
th{font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;color:var(--orbit-muted);font-weight:600}
th button{background:none;border:0;font:inherit;color:inherit;cursor:pointer;padding:0;
  display:inline-flex;gap:4px;align-items:center;min-height:var(--orbit-min-touch)}
td.actions{text-align:right;white-space:nowrap}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85rem}
.skel{display:block;height:.9rem;border-radius:4px;background:var(--orbit-border);opacity:.6}

/* Card / description list — for single records (Table.md "when NOT to use") */
.card{border:1px solid var(--orbit-border);border-radius:var(--orbit-radius-panel);
  padding:var(--s2);background:var(--orbit-surface)}
dl.meta{margin:0;display:grid;grid-template-columns:auto 1fr;gap:var(--s1) var(--s2);font-size:.9rem}
dl.meta dt{color:var(--orbit-muted)}
dl.meta dd{margin:0}

/* EmptyState — feedback/EmptyState.md. Never a dead end. */
.empty{text-align:center;padding:var(--s4) var(--s2);color:var(--orbit-muted)}
.empty h4{margin:var(--s1) 0 4px;color:var(--orbit-text);font-size:1rem}
.empty p{margin:0 0 var(--s2)}

/* Modal — overlays/Modal.md */
.modalshell{background:var(--orbit-bg);border:1px solid var(--orbit-border);
  border-radius:var(--orbit-radius-panel);padding:var(--s3) var(--s2)}
.modal{max-width:30rem;margin:0 auto;background:var(--orbit-surface);
  border:1px solid var(--orbit-border);border-radius:var(--orbit-radius-panel);
  padding:var(--s2);box-shadow:0 10px 30px rgba(0,0,0,.18)}
.modal .mhead{display:flex;align-items:flex-start;gap:var(--s1)}
.modal h4{margin:0;font-size:1.05rem;flex:1}
.secret{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85rem;
  background:var(--orbit-bg);border:1px dashed var(--orbit-border);
  border-radius:var(--orbit-radius-control);padding:var(--s1);word-break:break-all;margin:var(--s1) 0}
.modal .foot{display:flex;gap:var(--s1);justify-content:flex-end;margin-top:var(--s2);flex-wrap:wrap}
svg.ico{width:1em;height:1em;flex:none}

/* ── Application additions ───────────────────────────────────────────────
 * Not present in the wireframe, which drew modals inline rather than over
 * the page, and had no app shell because every screen was an artboard.
 */

/* App shell. The gallery used .wrap; a real page needs a full-height column
   so the footer of a short screen does not float mid-viewport. */
.app{min-height:100vh;display:flex;flex-direction:column}
.app > main{flex:1;max-width:60rem;width:100%;margin:0 auto;padding:var(--s2)}
.app > header{border-bottom:1px solid var(--orbit-border);background:var(--orbit-surface)}
.app > header > .inner{max-width:60rem;margin:0 auto;padding:0 var(--s2)}

/* Real modal: a backdrop that covers the page and traps the eye. The gallery
   showed dialogs inline inside .modalshell, which has no backdrop at all. */
.backdrop{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;
  align-items:center;justify-content:center;padding:var(--s2);z-index:20}
.backdrop > .modal{margin:0;width:100%}

/* Toast region for transient confirmations. */
.toasts{position:fixed;right:var(--s2);bottom:var(--s2);z-index:30;
  display:flex;flex-direction:column;gap:var(--s1);max-width:24rem}

/* Inline spinner for buttons in flight. Honours reduced motion via the
   blanket rule in the lifted block above. */
.spinner{width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;
  border-radius:9999px;display:inline-block;animation:spin .6s linear infinite}
@keyframes spin{to{transform:rotate(1turn)}}