/* ============================================================
   CE OS — COMPONENT LIBRARY · components.css (v1 · rebuild)
   Load AFTER tokens.css. Premium software-grade primitives.
   Namespaced: none (uses semantic classes). Documented in /system.
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--bg-1);color:var(--ink);font-family:var(--font-body);
  font-size:var(--fs-base);line-height:var(--lh-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
::selection{background:var(--mint);color:var(--on-accent)}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:var(--lh-tight);letter-spacing:-.02em;color:var(--ink)}
h1{font-size:var(--fs-h1)} h2{font-size:var(--fs-h2);line-height:var(--lh-snug)} h3{font-size:var(--fs-h3)}
p{color:var(--ink-2)}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--r-xs)}

/* ---- layout helpers ---- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--s5)}
.eyebrow{font-family:var(--font-mono);font-size:var(--fs-eyebrow);font-weight:500;
  letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--mint)}
.muted{color:var(--ink-3)} .mono{font-family:var(--font-mono)}
.stack{display:flex;flex-direction:column;gap:var(--s3)}
.row{display:flex;align-items:center;gap:var(--s3)}

/* ---- BUTTONS ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  font-family:var(--font-body);font-weight:600;font-size:var(--fs-sm);line-height:1;
  padding:.62rem .95rem;border-radius:var(--r-sm);border:1px solid var(--line-2);
  background:transparent;color:var(--ink);cursor:pointer;white-space:nowrap;
  transition:background var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease),color var(--dur-2) var(--ease),transform var(--dur-1) var(--ease)}
.btn:hover{border-color:var(--line-3);background:var(--surface-2)}
.btn:active{transform:translateY(.5px)}
.btn .i{width:16px;height:16px;flex:none}
.btn-primary{background:var(--mint);color:var(--on-accent);border-color:var(--mint)}
.btn-primary:hover{background:var(--mint-hi);border-color:var(--mint-hi)}
.btn-primary:active{background:var(--mint-lo)}
.btn-secondary{background:var(--surface-2);border-color:var(--line-2)}
.btn-secondary:hover{background:var(--surface-3)}
.btn-ghost{border-color:transparent;background:transparent;color:var(--ink-2)}
.btn-ghost:hover{background:var(--surface-2);color:var(--ink)}
.btn-danger{background:transparent;border-color:var(--danger);color:var(--danger)}
.btn-danger:hover{background:var(--danger-dim)}
.btn-sm{padding:.42rem .7rem;font-size:var(--fs-xs)}
.btn-lg{padding:.8rem 1.3rem;font-size:var(--fs-md)}
.btn-icon{padding:.5rem;width:34px;height:34px}
.btn[disabled]{opacity:.45;pointer-events:none}

/* ---- CARD ---- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s5);
  transition:border-color var(--dur-2) var(--ease),transform var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease)}
.card-hover:hover{border-color:var(--line-3);transform:translateY(-2px);box-shadow:var(--sh-3)}
.card-pad-sm{padding:var(--s4)}
.card-glow{position:relative;overflow:hidden}
.card-glow::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 60% at 50% -10%,var(--mint-dim),transparent 70%)}

/* ---- BADGE / TAG / KBD / DOT ---- */
.badge{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-mono);font-size:.68rem;
  font-weight:500;letter-spacing:.04em;text-transform:uppercase;padding:.28em .6em;border-radius:var(--r-xs);
  border:1px solid var(--line-2);color:var(--ink-2);background:var(--surface-2)}
.badge-mint{color:var(--mint);border-color:var(--mint-dim);background:var(--mint-dim)}
.badge-indigo{color:var(--indigo);border-color:var(--indigo-dim);background:var(--indigo-dim)}
.badge-amber{color:var(--amber);border-color:rgba(246,196,83,.2);background:rgba(246,196,83,.1)}
.badge-danger{color:var(--danger);border-color:var(--danger-dim);background:var(--danger-dim)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--ink-3);display:inline-block}
.dot-live{background:var(--success);box-shadow:0 0 0 3px rgba(57,217,138,.2)}
.kbd{font-family:var(--font-mono);font-size:.72rem;padding:.15em .45em;border-radius:var(--r-xs);
  border:1px solid var(--line-2);border-bottom-width:2px;background:var(--surface-2);color:var(--ink-2)}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-xs);padding:.4em .8em;
  border:1px solid var(--line);border-radius:var(--r-pill);color:var(--ink-2);background:var(--surface-2)}

/* ---- FORM ---- */
.field{display:flex;flex-direction:column;gap:6px}
.label{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.input,.textarea,.select{width:100%;font-family:var(--font-body);font-size:var(--fs-sm);color:var(--ink);
  background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--r-sm);padding:.62rem .75rem;
  transition:border-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease)}
.input::placeholder,.textarea::placeholder{color:var(--ink-4)}
.input:focus,.textarea:focus,.select:focus{outline:none;border-color:var(--mint);box-shadow:var(--ring)}
.textarea{resize:vertical;min-height:88px;line-height:1.5}
.select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 18px) 55%,calc(100% - 13px) 55%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:36px}
.switch{position:relative;width:38px;height:22px;border-radius:var(--r-pill);background:var(--surface-3);border:1px solid var(--line-2);cursor:pointer;transition:background var(--dur-2)}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--ink-2);transition:transform var(--dur-2) var(--ease),background var(--dur-2)}
.switch[aria-checked="true"]{background:var(--mint);border-color:var(--mint)}
.switch[aria-checked="true"]::after{transform:translateX(16px);background:var(--on-accent)}
.check{width:18px;height:18px;border-radius:5px;border:1px solid var(--line-3);background:var(--surface-2);display:inline-grid;place-items:center;cursor:pointer}
.check[aria-checked="true"]{background:var(--mint);border-color:var(--mint);color:var(--on-accent)}

/* ---- ALERT ---- */
.alert{display:flex;gap:var(--s3);padding:var(--s3) var(--s4);border-radius:var(--r-sm);border:1px solid var(--line-2);
  background:var(--surface-2);font-size:var(--fs-sm);color:var(--ink-2);border-left-width:3px}
.alert b{color:var(--ink);font-weight:600;display:block;margin-bottom:2px}
.alert-info{border-left-color:var(--indigo)}
.alert-success{border-left-color:var(--success)}
.alert-warn{border-left-color:var(--amber)}
.alert-danger{border-left-color:var(--danger)}

/* ---- TABLE ---- */
.table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.table th{text-align:left;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);font-weight:500;padding:10px 14px;border-bottom:1px solid var(--line-2)}
.table td{padding:12px 14px;border-bottom:1px solid var(--line);color:var(--ink-2)}
.table td b{color:var(--ink);font-weight:500}
.table tbody tr{transition:background var(--dur-1)}
.table tbody tr:hover{background:var(--surface-2)}
.table .num{text-align:right;font-variant-numeric:tabular-nums;font-family:var(--font-mono)}

/* ---- TABS ---- */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:var(--s5)}
.tab{padding:.6rem .9rem;font-size:var(--fs-sm);color:var(--ink-3);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color var(--dur-2)}
.tab:hover{color:var(--ink-2)}
.tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--mint)}

/* ---- STAT / METRIC ---- */
.stat{border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);padding:var(--s4)}
.stat .t{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
.stat .v{font-family:var(--font-display);font-weight:700;font-size:1.5rem;color:var(--ink);margin-top:6px;font-variant-numeric:tabular-nums}
.stat .d{font-size:var(--fs-xs);color:var(--ink-3);margin-top:4px}
.stat .up{color:var(--success)} .stat .down{color:var(--danger)}

/* ---- PROGRESS / METER ---- */
.progress{height:6px;border-radius:var(--r-pill);background:var(--surface-3);overflow:hidden}
.progress>i{display:block;height:100%;border-radius:inherit;background:var(--mint)}

/* ---- TOOLTIP ---- */
.tip{position:relative;display:inline-flex}
.tip::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(4px);
  background:var(--surface-3);color:var(--ink);font-size:var(--fs-xs);padding:.35em .6em;border-radius:var(--r-xs);border:1px solid var(--line-2);
  white-space:nowrap;opacity:0;pointer-events:none;transition:opacity var(--dur-2),transform var(--dur-2);box-shadow:var(--sh-2)}
.tip:hover::after{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---- DIALOG / MODAL ---- */
.scrim{position:fixed;inset:0;background:var(--overlay);backdrop-filter:blur(3px);display:grid;place-items:center;z-index:100;padding:var(--s5)}
.dialog{width:100%;max-width:440px;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-lg);
  box-shadow:var(--sh-4);padding:var(--s6)}
.dialog h3{margin-bottom:var(--s2)} .dialog p{font-size:var(--fs-sm);margin-bottom:var(--s5)}
.dialog .actions{display:flex;justify-content:flex-end;gap:var(--s2)}

/* ---- COMMAND PALETTE ---- */
.cmdk{width:100%;max-width:560px;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-lg);
  box-shadow:var(--sh-4);overflow:hidden}
.cmdk-in{display:flex;align-items:center;gap:var(--s3);padding:var(--s4);border-bottom:1px solid var(--line)}
.cmdk-in input{flex:1;background:transparent;border:none;outline:none;color:var(--ink);font-size:var(--fs-md);font-family:var(--font-body)}
.cmdk-in input::placeholder{color:var(--ink-4)}
.cmdk-list{max-height:320px;overflow:auto;padding:var(--s2)}
.cmdk-sec{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4);padding:var(--s2) var(--s3) 4px}
.cmdk-item{display:flex;align-items:center;gap:var(--s3);padding:.6rem var(--s3);border-radius:var(--r-sm);color:var(--ink-2);cursor:pointer;font-size:var(--fs-sm)}
.cmdk-item[aria-selected="true"],.cmdk-item:hover{background:var(--surface-3);color:var(--ink)}
.cmdk-item .k{margin-left:auto}

/* ---- SIDEBAR + APP SHELL ---- */
.shell{display:grid;grid-template-columns:236px 1fr;min-height:100%}
.side{background:var(--surface);border-right:1px solid var(--line);padding:var(--s4);display:flex;flex-direction:column;gap:2px}
.side-sec{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4);padding:var(--s4) var(--s3) 4px}
.side-link{display:flex;align-items:center;gap:var(--s3);padding:.5rem var(--s3);border-radius:var(--r-sm);color:var(--ink-3);font-size:var(--fs-sm);cursor:pointer;transition:background var(--dur-1),color var(--dur-1)}
.side-link:hover{background:var(--surface-2);color:var(--ink-2)}
.side-link.on{background:var(--surface-3);color:var(--ink)}
.side-link .i{width:16px;height:16px;flex:none;opacity:.8}

/* ---- TOPBAR ---- */
.topbar{position:sticky;top:0;z-index:40;height:60px;display:flex;align-items:center;
  background:color-mix(in srgb,var(--bg-1) 82%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}

/* ---- BRAND LOCKUP (swap-slot logo) ---- */
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--ink);font-family:var(--font-display);font-weight:700}
.brand-mark{width:28px;height:28px;border-radius:8px;flex:none;background:var(--mint);color:var(--on-accent);
  display:grid;place-items:center;font-size:14px;font-weight:800;letter-spacing:-.04em}
.brand-mark img{width:100%;height:100%;border-radius:inherit}

/* ---- section rhythm + reveal ---- */
.section{padding-block:var(--s9)}
.section-line{border-top:1px solid var(--line)}
.rv{opacity:0;transform:translateY(10px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

@media(max-width:820px){.shell{grid-template-columns:1fr}.side{display:none}}