/* Trusplex Operator UI styles.
   Two layers, kept separate on purpose:
   - `tpx-*`: the Trusplex Design System COMPONENT LIBRARY (buttons, forms,
     badges, cards, status dots, tags, tabs, dialog, toast), taken from the
     system so this product renders on-brand.
   - `op-*`: this product's own layout and surfaces, authored fresh from the
     system's visual foundations (flat token surfaces, 1px borders instead
     of shadows in dark, 4px grid, tight radii, mono headlines and labels,
     the structural-rule motif). Nothing here reproduces the layouts of any
     other Trusplex application.
   Tokens live in tokens/ (verbatim). */

/* Token-collision repair (upstream DS bug, token files kept verbatim):
   tokens/colors.css defines --text-body/--text-code as COLOR aliases and
   tokens/typography.css redefines the same names as FONT shorthands, which
   load later and win — so base.css's `color:var(--text-body)` computes
   invalid and body text inherits the UA default (black on the dark theme).
   Anchor the two colors directly to the ramp; everything downstream that
   used the broken aliases as colors inherits correctly from here. */
body{color:var(--fg-2)}
code,kbd,pre{color:var(--fg-1)}

/* ==================================================== component library */

/* buttons */
.tpx-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:var(--radius-2);font-family:var(--font-sans);font-weight:500;cursor:pointer;border:1px solid transparent;transition:background var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease);white-space:nowrap}
.tpx-btn:focus-visible{outline:none;box-shadow:var(--ring)}
.tpx-btn:active:not(:disabled){transform:translateY(1px)}
.tpx-btn:disabled{opacity:.45;cursor:not-allowed}
.tpx-btn--sm{height:28px;padding:0 10px;font-size:12.5px}
.tpx-btn--md{height:var(--control-h);padding:0 14px;font-size:13px}
.tpx-btn--primary{background:var(--accent);color:var(--accent-fg)}
.tpx-btn--primary:hover:not(:disabled){background:var(--accent-hover)}
.tpx-btn--secondary{background:var(--surface-card);border-color:var(--border-2);color:var(--text-heading)}
.tpx-btn--secondary:hover:not(:disabled){background:var(--surface-raised)}
.tpx-btn--ghost{background:transparent;color:var(--fg-2)}
.tpx-btn--ghost:hover:not(:disabled){background:var(--surface-raised);color:var(--text-heading)}
.tpx-btn--danger{background:var(--danger-soft);border-color:var(--danger);color:var(--danger)}
.tpx-btn--danger:hover:not(:disabled){background:var(--danger);color:var(--accent-fg)}

/* icon button */
.tpx-iconbtn{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-2);cursor:pointer;border:1px solid transparent;background:transparent;color:var(--text-muted);transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
.tpx-iconbtn:hover:not(:disabled){background:var(--surface-raised);color:var(--text-heading)}
.tpx-iconbtn:focus-visible{outline:none;box-shadow:var(--ring)}
.tpx-iconbtn--md{width:32px;height:32px}
.tpx-iconbtn svg{width:15px;height:15px}

/* badges */
.tpx-badge{display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 7px;border-radius:var(--radius-1);font:500 11.5px var(--font-sans);border:1px solid transparent}
.tpx-badge--neutral{background:var(--surface-raised);color:var(--fg-2)}
.tpx-badge--ok{background:var(--ok-soft);color:var(--ok)}
.tpx-badge--warn{background:var(--warn-soft);color:var(--warn)}
.tpx-badge--danger{background:var(--danger-soft);color:var(--danger)}
.tpx-badge--info{background:var(--info-soft);color:var(--info)}
.tpx-badge--accent{background:var(--accent-soft);color:var(--accent-hover)}
[data-theme="light"] .tpx-badge--accent{color:var(--accent)}

/* cards */
.tpx-card{background:var(--surface-card);border:1px solid var(--border-1);border-radius:var(--radius-3);box-shadow:var(--shadow-1)}
.tpx-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border-1)}
.tpx-card-title{font:var(--text-h3);color:var(--text-heading)}
.tpx-card-body{padding:16px}
.tpx-card--flush .tpx-card-body{padding:0;overflow-x:auto}

/* status dots */
.tpx-dot{display:inline-flex;align-items:center;gap:7px;font:var(--text-small);color:var(--fg-2)}
.tpx-dot-i{width:8px;height:8px;border-radius:999px;flex:none;position:relative}
.tpx-dot-i--pulse::after{content:"";position:absolute;inset:-3px;border-radius:999px;border:1px solid currentColor;opacity:0;animation:tpxPulse 2s var(--ease) infinite}
@keyframes tpxPulse{0%{transform:scale(.6);opacity:.8}70%{transform:scale(1.4);opacity:0}100%{opacity:0}}

/* tags */
.tpx-tag{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:var(--radius-1);background:var(--surface-card);border:1px solid var(--border-1);color:var(--fg-2);font:400 12px var(--font-sans)}
.tpx-tag--mono{font:400 11.5px var(--font-mono)}

/* forms */
.tpx-field{display:flex;flex-direction:column;gap:6px}
.tpx-field-label{font:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted)}
.tpx-input{height:var(--control-h);padding:0 10px;background:var(--surface-page);border:1px solid var(--border-2);border-radius:var(--radius-2);color:var(--text-heading);font:400 13px var(--font-sans);transition:border-color var(--dur-1) var(--ease)}
.tpx-input::placeholder{color:var(--text-muted)}
.tpx-input:hover:not(:disabled){border-color:var(--fg-3)}
.tpx-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.tpx-input--mono{font:var(--text-code)}
.tpx-field-hint{font:var(--text-small);color:var(--text-muted)}
textarea.tpx-input{height:auto;min-height:64px;padding:8px 10px;resize:vertical;font:var(--text-code)}
.tpx-select-wrap{position:relative;display:inline-flex;width:100%}
.tpx-select{appearance:none;width:100%;height:var(--control-h);padding:0 28px 0 10px;background:var(--surface-page);border:1px solid var(--border-2);border-radius:var(--radius-2);color:var(--text-heading);font:400 13px var(--font-sans);cursor:pointer;transition:border-color var(--dur-1) var(--ease)}
.tpx-select:hover:not(:disabled){border-color:var(--fg-3)}
.tpx-select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.tpx-select-chev{position:absolute;right:9px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--text-muted);font:400 10px var(--font-mono)}

/* tabs */
.tpx-tabs{display:flex;gap:2px;border-bottom:1px solid var(--border-1)}
.tpx-tab{all:unset;cursor:pointer;padding:8px 12px;font:500 13px var(--font-sans);color:var(--text-muted);border-bottom:2px solid transparent;margin-bottom:-1px;transition:color var(--dur-1) var(--ease)}
.tpx-tab:hover{color:var(--text-heading)}
.tpx-tab:focus-visible{box-shadow:var(--ring);border-radius:var(--radius-1)}
.tpx-tab--active{color:var(--text-heading);border-bottom-color:var(--accent)}

/* dialog */
.tpx-dialog-scrim{position:fixed;inset:0;background:var(--scrim);display:flex;align-items:center;justify-content:center;z-index:100;animation:tpxFadeIn var(--dur-2) var(--ease)}
.tpx-dialog{width:min(480px,calc(100vw - 48px));background:var(--surface-card);border:1px solid var(--border-2);border-radius:var(--radius-3);box-shadow:var(--shadow-3);animation:tpxDialogIn var(--dur-3) var(--ease)}
.tpx-dialog-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--border-1)}
.tpx-dialog-title{font:var(--text-h3);color:var(--text-heading)}
.tpx-dialog-x{all:unset;cursor:pointer;color:var(--text-muted);font:400 14px var(--font-mono);padding:2px 6px;border-radius:var(--radius-1)}
.tpx-dialog-x:hover{color:var(--text-heading);background:var(--surface-raised)}
.tpx-dialog-body{padding:18px;font:var(--text-body);color:var(--fg-2);display:flex;flex-direction:column;gap:12px}
.tpx-dialog-foot{display:flex;justify-content:flex-end;gap:8px;padding:14px 18px;border-top:1px solid var(--border-1)}
@keyframes tpxFadeIn{from{opacity:0}}
@keyframes tpxDialogIn{from{opacity:0;transform:translateY(8px)}}

/* toast */
.tpx-toast{display:flex;align-items:flex-start;gap:10px;width:340px;background:var(--surface-raised);border:1px solid var(--border-2);border-radius:var(--radius-2);padding:12px 14px;box-shadow:var(--shadow-2);animation:tpxToastIn var(--dur-2) var(--ease)}
.tpx-toast-title{font:600 13px var(--font-sans);color:var(--text-heading)}
.tpx-toast--danger .tpx-toast-title{color:var(--danger)}
.tpx-toast-desc{font:var(--text-small);color:var(--fg-2);margin-top:2px;word-break:break-word}
.tpx-toast-x{all:unset;cursor:pointer;color:var(--text-muted);font:400 13px var(--font-mono);margin-left:auto;padding:0 2px}
.tpx-toast-x:hover{color:var(--text-heading)}
@keyframes tpxToastIn{from{opacity:0;transform:translateY(6px)}}

/* ============================================== Trusplex Operator layout */

/* header bar: wordmark + product, session on the right; nav is a tab row
   beneath, sharing one centered container */
.op-header{background:var(--surface-panel);border-bottom:1px solid var(--border-1)}
.op-container{max-width:var(--container);margin:0 auto;padding:0 24px}
.op-brandrow{display:flex;align-items:center;gap:10px;height:56px}
.op-wordmark{font:400 18px var(--font-mono);color:var(--fg-1)}
.op-wordmark b{font-weight:400;color:var(--accent)}
.op-product{font:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted);border-left:1px solid var(--border-2);padding-left:10px;margin-top:2px}
.op-session{margin-left:auto;display:flex;align-items:center;gap:8px}
.op-org{display:inline-flex;align-items:center;gap:8px;background:var(--surface-card);border:1px solid var(--border-1);border-radius:var(--radius-2);padding:5px 10px;font:400 12.5px var(--font-mono);color:var(--text-heading)}
.op-org .role{font:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted)}
.op-nav{margin-bottom:-1px}

/* page chrome */
.op-main{max-width:var(--container);margin:0 auto;padding:28px 24px 64px}
.op-page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px}
.op-h1{font:var(--text-h1);color:var(--text-heading)}
.op-sub{font:var(--text-small);color:var(--text-muted);margin-top:4px}

/* the structural rule — the brand's hairline-with-node-dots device */
.op-rule{position:relative;height:1px;background:var(--border-1);margin:18px 0}
.op-rule::before,.op-rule::after{content:"";position:absolute;top:-2.5px;width:6px;height:6px;border-radius:999px}
.op-rule::before{left:0;background:var(--accent)}
.op-rule::after{right:0;background:var(--border-2)}

/* data tables, per the foundations: uppercase mono headers, 1px row rules,
   hover raises, mono for machine values, dim for secondary */
.op-table{width:100%;border-collapse:collapse}
.op-table th{font:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted);text-align:left;padding:10px 16px;border-bottom:1px solid var(--border-1);white-space:nowrap}
.op-table td{padding:9px 16px;border-bottom:1px solid var(--border-1);font:var(--text-body);color:var(--fg-2);vertical-align:top}
.op-table tr:last-child td{border-bottom:none}
.op-table tbody tr:hover td{background:var(--surface-raised)}

/* bordered mono block; every destructive write shows one with -/+ lines */
.op-code{margin:0;background:var(--surface-page);border:1px solid var(--border-1);border-radius:var(--radius-2);padding:10px 12px;font:var(--text-code);overflow-x:auto;white-space:pre-wrap;word-break:break-all}
.op-code .del{color:var(--danger)}
.op-code .add{color:var(--ok)}

/* conversation: one flush panel, ruled rows, mono actor rail */
.op-convo{display:flex;flex-direction:column}
.op-turn{display:grid;grid-template-columns:88px 1fr;gap:12px;padding:14px 16px;border-bottom:1px solid var(--border-1)}
.op-turn:last-child{border-bottom:none}
.op-turn .actor{font:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted);padding-top:2px}
.op-turn.you .actor{color:var(--accent-hover)}
[data-theme="light"] .op-turn.you .actor{color:var(--accent)}
.op-turn .body{min-width:0;font:var(--text-body);color:var(--fg-2);white-space:pre-wrap}
.op-turn .body .op-code{margin-top:6px}
.op-turn.pending{background:var(--warn-soft)}
.op-composer{display:flex;gap:8px;align-items:flex-end;padding:12px 16px;border-top:1px solid var(--border-1)}
.op-composer .tpx-field{flex:1}

/* connect screen */
.op-connect{max-width:400px;margin:12vh auto 0;display:flex;flex-direction:column;gap:16px;padding:0 24px}
.op-connect .op-wordmark{font-size:26px}

/* org picker: one row per membership, same raised-on-hover language as tables */
.op-orgrow{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;text-align:left;background:var(--surface-card);border:1px solid var(--border-1);border-radius:var(--radius-2);padding:10px 12px;cursor:pointer;font:var(--text-body);color:var(--text-heading)}
.op-orgrow:hover{background:var(--surface-raised);border-color:var(--border-2)}
.op-orgrow .meta{font:400 12px var(--font-mono);color:var(--text-muted)}

/* live terminal: the xterm mount fills a fixed-height panel; xterm's own
   stylesheet (CDN) handles the innards */
.op-term{height:min(62vh,560px);padding:10px 12px;background:var(--surface-page);border-radius:var(--radius-2)}
.op-term>div{height:100%}
.op-term .xterm{height:100%}

/* utilities */
.op-toasts{position:fixed;right:16px;bottom:16px;display:flex;flex-direction:column;gap:8px;z-index:200}
.mono{font-family:var(--font-mono);font-size:12.5px}
.dim{color:var(--text-muted)}
svg.lucide{width:15px;height:15px}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.stack{display:flex;flex-direction:column;gap:12px}
.hidden{display:none !important}