/* GATEWAY//OPS — monochrome operations console. White-on-black or black-on-white, user's choice (data-theme on ). Chivo Mono for machine voice, Instrument Sans for human voice. Historical var names (--phosphor/--amber/--red/--blue) kept as the accent-tone scale: primary, secondary, danger, tertiary. */ :root, :root[data-theme="dark"] { --bg: #050505; --panel: #0d0d0d; --panel-2: #151515; --line: #272727; --ink: #f2f2f2; --dim: #8c8c8c; --phosphor: #ffffff; --phosphor-soft: rgba(255, 255, 255, .09); --amber: #c4c4c4; --amber-soft: rgba(255, 255, 255, .06); --red: #f2f2f2; --red-soft: rgba(255, 255, 255, .14); --blue: #dcdcdc; --blue-soft: rgba(255, 255, 255, .05); --glow: rgba(255, 255, 255, .22); --mono: "Chivo Mono", ui-monospace, monospace; --sans: "Instrument Sans", system-ui, sans-serif; } :root[data-theme="light"] { --bg: #ffffff; --panel: #fafafa; --panel-2: #f1f1f1; --line: #dedede; --ink: #121212; --dim: #6f6f6f; --phosphor: #000000; --phosphor-soft: rgba(0, 0, 0, .06); --amber: #3d3d3d; --amber-soft: rgba(0, 0, 0, .05); --red: #121212; --red-soft: rgba(0, 0, 0, .09); --blue: #2c2c2c; --blue-soft: rgba(0, 0, 0, .04); --glow: rgba(0, 0, 0, .12); } * { box-sizing: border-box; margin: 0; } html { background: var(--bg); } body { font-family: var(--sans); color: var(--ink); min-height: 100vh; background: var(--bg); } .crt { display: none; } /* ---- login ---- */ .login { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; background: var(--bg); } .login.hidden { display: none; } .login-box { width: min(420px, 90vw); text-align: center; } .login-brand { font-family: var(--mono); font-weight: 800; font-size: 1.6rem; letter-spacing: .35em; color: var(--phosphor); text-shadow: 0 0 24px var(--glow); animation: flicker 4s infinite; } .login-sub { font-family: var(--mono); color: var(--dim); font-size: .75rem; letter-spacing: .2em; margin: .5rem 0 2.5rem; } .login-box input { width: 100%; padding: .9rem 1rem; background: var(--panel); border: 1px solid var(--line); color: var(--ink); font-family: var(--mono); letter-spacing: .1em; outline: none; } .login-box input:focus { border-color: var(--phosphor); box-shadow: 0 0 0 1px var(--phosphor-soft); } .login-box button { width: 100%; margin-top: .75rem; padding: .9rem; cursor: pointer; background: var(--phosphor); border: 0; color: var(--bg); font-family: var(--mono); font-weight: 800; letter-spacing: .25em; } .login-box button:hover { filter: brightness(1.15); } .login-err { color: var(--red); font-family: var(--mono); font-size: .75rem; margin-top: 1rem; min-height: 1em; } @keyframes flicker { 0%,92%,96%,100% { opacity: 1 } 94% { opacity: .55 } } /* ---- chrome ---- */ header { display: flex; justify-content: space-between; align-items: center; padding: 1.1rem 2rem .9rem; border-bottom: 1px solid var(--line); } .brand { display: flex; align-items: center; gap: .8rem; } .brand-mark { width: 10px; height: 10px; background: var(--phosphor); border-radius: 50%; box-shadow: 0 0 12px var(--phosphor); animation: beat 2.4s infinite; } @keyframes beat { 0%,100% { transform: scale(1) } 8% { transform: scale(1.5) } 16% { transform: scale(1) } } h1 { font-family: var(--mono); font-size: 1.05rem; font-weight: 800; letter-spacing: .3em; } .dim { color: var(--dim); } .head-right { display: flex; align-items: center; gap: 1.2rem; } .estate { font-family: var(--mono); font-size: .72rem; color: var(--dim); letter-spacing: .08em; text-align: right; } .estate b { color: var(--ink); font-weight: 600; } #signout, #theme-toggle { background: none; border: 1px solid var(--line); color: var(--dim); cursor: pointer; padding: .3rem .55rem; } #signout:hover, #theme-toggle:hover { color: var(--ink); border-color: var(--ink); } nav { display: flex; gap: .25rem; padding: 0 2rem; border-bottom: 1px solid var(--line); overflow-x: auto; } nav button { position: relative; background: none; border: 0; cursor: pointer; font-family: var(--mono); font-size: .74rem; letter-spacing: .2em; color: var(--dim); padding: .95rem 1.1rem .8rem; border-bottom: 2px solid transparent; white-space: nowrap; } nav button:hover { color: var(--ink); } nav button.active { color: var(--phosphor); border-bottom-color: var(--phosphor); } .lock { margin-left: .45em; font-size: .85em; } .lock[data-state="planned"]::before { content: "▫"; color: var(--dim); } .lock[data-state="next"]::before { content: "◦"; color: var(--amber); } .lock[data-state="live"]::before { content: ""; } .pulse-dot { display: inline-block; width: 6px; height: 6px; margin-left: .5em; background: var(--amber); border-radius: 50%; animation: beat 2s infinite; } main { padding: 1.6rem 2rem 4rem; } .tab { display: none; animation: rise .25s ease; } .tab.active { display: block; } @keyframes rise { from { opacity: 0; transform: translateY(6px) } } /* ---- session cards ---- */ .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.1rem; } .card { background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); padding: 1.2rem 1.3rem; position: relative; } .card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--state-color, var(--dim)); } .card h3 { font-family: var(--mono); font-size: 1rem; letter-spacing: .12em; font-weight: 600; } .chip { float: right; font-family: var(--mono); font-size: .62rem; letter-spacing: .18em; padding: .28em .7em; border: 1px solid var(--state-color, var(--line)); color: var(--state-color, var(--dim)); background: var(--state-soft, transparent); } .card .jid { font-family: var(--mono); font-size: .68rem; color: var(--dim); margin: .5rem 0 1rem; word-break: break-all; min-height: 1em; } .stats { display: flex; gap: 1.6rem; border-top: 1px dashed var(--line); padding-top: .95rem; } .stat b { display: block; font-family: var(--mono); font-size: 1.5rem; font-weight: 300; font-variant-numeric: tabular-nums; } .stat span { font-family: var(--mono); font-size: .6rem; letter-spacing: .2em; color: var(--dim); } .card .actions { margin-top: 1.05rem; display: flex; gap: .6rem; } .card .actions button { flex: 1; background: none; border: 1px solid var(--line); color: var(--ink); font-family: var(--mono); font-size: .66rem; letter-spacing: .15em; padding: .55rem; cursor: pointer; } .card .actions button:hover { border-color: var(--phosphor); color: var(--phosphor); } .card .actions .danger { flex: 0 0 auto; padding: .55rem .7rem; color: var(--dim); } .card .actions .danger:hover { border-color: var(--ink); color: var(--ink); background: var(--red-soft); } .card.connected { --state-color: var(--phosphor); --state-soft: var(--phosphor-soft); } .card.pairing { --state-color: var(--amber); --state-soft: var(--amber-soft); } .card.disconnected, .card.logged_out { --state-color: var(--red); --state-soft: var(--red-soft); } /* monochrome states: live = solid, dead = dashed, pairing = mid gray */ .card.disconnected .chip, .card.logged_out .chip, .mcp-card.disconnected .chip, .mcp-card.logged_out .chip { border-style: dashed; } .card.disconnected::before, .card.logged_out::before, .mcp-card.disconnected::before, .mcp-card.logged_out::before { background: repeating-linear-gradient(0deg, var(--ink) 0 6px, transparent 6px 12px); } /* ---- messages ---- */ .msg-layout { display: grid; grid-template-columns: 300px 1fr; gap: 1.1rem; min-height: 60vh; } .msg-side select { width: 100%; background: var(--panel); color: var(--ink); border: 1px solid var(--line); font-family: var(--mono); padding: .6rem; margin-bottom: .8rem; } .chat-list { border: 1px solid var(--line); max-height: 62vh; overflow-y: auto; } .chat-item { padding: .65rem .8rem; border-bottom: 1px solid var(--line); cursor: pointer; } .chat-item:hover, .chat-item.sel { background: var(--phosphor-soft); } .chat-item .cn { font-size: .85rem; font-weight: 600; } .chat-item .cj { font-family: var(--mono); font-size: .6rem; color: var(--dim); } .chat-item .g { color: var(--amber); font-family: var(--mono); font-size: .6rem; } .msg-pane { border: 1px solid var(--line); background: var(--panel); padding: 1rem; max-height: 66vh; overflow-y: auto; display: flex; flex-direction: column-reverse; } .placeholder { color: var(--dim); font-family: var(--mono); font-size: .75rem; letter-spacing: .2em; margin: auto; } .bubble { max-width: 72%; margin: .3rem 0; padding: .55rem .8rem; font-size: .86rem; border: 1px solid var(--line); background: var(--panel-2); align-self: flex-start; } .bubble.me { align-self: flex-end; border-color: var(--dim); background: var(--phosphor-soft); } .bubble .meta { font-family: var(--mono); font-size: .58rem; color: var(--dim); margin-top: .35rem; } .bubble .media { font-family: var(--mono); font-size: .68rem; color: var(--amber); } /* ---- tenants ---- */ .bar { display: flex; gap: .7rem; margin-bottom: 1.2rem; } .bar input { background: var(--panel); border: 1px solid var(--line); color: var(--ink); font-family: var(--mono); padding: .6rem .9rem; width: 260px; } .bar button { background: none; border: 1px solid var(--phosphor); color: var(--phosphor); font-family: var(--mono); font-size: .7rem; letter-spacing: .15em; padding: .6rem 1rem; cursor: pointer; } .bar button:hover { background: var(--phosphor-soft); } .key-reveal { margin-top: 1.2rem; padding: 1rem 1.2rem; border: 1px dashed var(--amber); background: var(--amber-soft); font-family: var(--mono); font-size: .78rem; word-break: break-all; } .key-reveal b { color: var(--amber); display: block; font-size: .62rem; letter-spacing: .2em; margin-bottom: .5rem; } /* ---- construction ---- */ .construction { border: 1px dashed var(--line); padding: 3rem 2rem; text-align: center; font-family: var(--mono); color: var(--dim); background: repeating-linear-gradient(-45deg, transparent 0 14px, var(--amber-soft) 14px 28px); } .construction h2 { color: var(--amber); font-size: .85rem; letter-spacing: .3em; margin-bottom: 1rem; } .construction p { font-size: .74rem; line-height: 1.9; max-width: 560px; margin: 0 auto; } /* ---- build log ---- */ .timeline { max-width: 720px; } .step { display: grid; grid-template-columns: 28px 1fr; gap: 1rem; padding-bottom: 1.4rem; position: relative; } .step::before { content: ""; position: absolute; left: 13px; top: 22px; bottom: 0; width: 1px; background: var(--line); } .step:last-child::before { display: none; } .step .dot { width: 27px; height: 27px; border-radius: 50%; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: .65rem; background: var(--panel); z-index: 1; } .step.done .dot { border-color: var(--phosphor); color: var(--phosphor); box-shadow: 0 0 10px var(--glow); } .step.next .dot { border-color: var(--amber); color: var(--amber); animation: beat 2s infinite; } .step h4 { font-family: var(--mono); font-size: .82rem; letter-spacing: .12em; } .step h4 .st { font-size: .6rem; letter-spacing: .2em; margin-left: .7em; } .step.done h4 .st { color: var(--phosphor); } .step.next h4 .st { color: var(--amber); } .step p { font-size: .8rem; color: var(--dim); line-height: 1.6; margin-top: .3rem; } /* ---- modal ---- */ .modal { position: fixed; inset: 0; z-index: 90; background: rgba(4,8,5,.88); display: flex; align-items: center; justify-content: center; } .modal.hidden, .hidden { display: none; } .modal-box { background: var(--panel); border: 1px solid var(--phosphor); padding: 1.6rem; text-align: center; box-shadow: 0 0 60px var(--glow); } .modal-title { font-family: var(--mono); letter-spacing: .25em; color: var(--phosphor); font-size: .8rem; } .modal-hint { font-size: .72rem; color: var(--dim); margin: .6rem 0 1rem; } #qr-img { width: 280px; height: 280px; background: #fff; padding: 10px; image-rendering: pixelated; } .modal-state { font-family: var(--mono); font-size: .68rem; color: var(--amber); margin: .9rem 0; letter-spacing: .15em; } #qr-close { background: none; border: 1px solid var(--line); color: var(--dim); font-family: var(--mono); letter-spacing: .2em; font-size: .65rem; padding: .5rem 1.4rem; cursor: pointer; } footer { position: fixed; bottom: 0; left: 0; right: 0; display: flex; justify-content: space-between; padding: .5rem 2rem; border-top: 1px solid var(--line); background: var(--bg); font-family: var(--mono); font-size: .62rem; color: var(--dim); letter-spacing: .12em; } #foot-status.err { color: var(--red); } @media (max-width: 760px) { header, nav, main, footer { padding-left: 1rem; padding-right: 1rem; } .msg-layout { grid-template-columns: 1fr; } } /* ---- webhooks ---- */ .wh-layout { display: grid; grid-template-columns: 300px 1fr; gap: 1.25rem; align-items: start; } .wh-side { display: flex; flex-direction: column; gap: .75rem; } .wh-new { width: 100%; padding: .8rem; background: var(--phosphor-soft); border: 1px solid var(--phosphor); color: var(--phosphor); font-family: var(--mono); letter-spacing: .15em; cursor: pointer; } .wh-new:hover { background: var(--phosphor); color: var(--bg); } .wh-endpoints { display: flex; flex-direction: column; gap: .5rem; } .wh-item { padding: .7rem .8rem; background: var(--panel); border: 1px solid var(--line); cursor: pointer; font-family: var(--mono); } .wh-item:hover { border-color: var(--dim); } .wh-item.sel { border-color: var(--phosphor); background: var(--panel-2); } .wh-item-top { display: flex; align-items: center; gap: .5rem; font-size: .85rem; } .wh-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; } .wh-dot.on { background: var(--phosphor); box-shadow: 0 0 6px var(--phosphor); } .wh-dot.off { background: var(--dim); } .wh-item-url { font-size: .68rem; color: var(--dim); margin-top: .3rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wh-item-ev { font-size: .65rem; color: var(--dim); margin-top: .2rem; letter-spacing: .1em; } .wh-standard { font-family: var(--mono); font-size: .65rem; color: var(--dim); line-height: 1.7; border: 1px dashed var(--line); padding: .7rem .8rem; } .wh-standard code { color: var(--phosphor); } .wh-detail { background: var(--panel); border: 1px solid var(--line); padding: 1.25rem; min-height: 300px; } .wh-head { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .wh-head h2 { font-family: var(--mono); font-size: 1.05rem; letter-spacing: .05em; } .wh-head .jid { margin-top: .35rem; } .wh-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .6rem; } .wh-chip { font-family: var(--mono); font-size: .62rem; letter-spacing: .05em; padding: .15rem .5rem; border: 1px solid var(--line); color: var(--ink); background: var(--panel-2); } .wh-head-actions { display: flex; gap: .5rem; align-items: flex-start; flex-wrap: wrap; } .wh-head-actions button, .mini { padding: .45rem .7rem; background: none; border: 1px solid var(--line); color: var(--ink); font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; cursor: pointer; } .wh-head-actions button:hover, .mini:hover { border-color: var(--phosphor); color: var(--phosphor); } .wh-head-actions .danger { border-color: var(--red); color: var(--red); } .wh-head-actions .danger:hover { background: var(--red-soft); border-color: var(--red); color: var(--red); } .mini { padding: .25rem .5rem; font-size: .6rem; } .wh-log-title { font-family: var(--mono); font-size: .75rem; letter-spacing: .2em; color: var(--dim); margin: 1.5rem 0 .6rem; } .wh-rate { font-family: var(--mono); font-size: .68rem; color: var(--dim); margin-bottom: .5rem; } .dtable { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: .72rem; } .dtable th { text-align: left; color: var(--dim); letter-spacing: .15em; font-weight: 400; padding: .4rem .6rem; border-bottom: 1px solid var(--line); } .dtable td { padding: .4rem .6rem; border-bottom: 1px solid var(--line); color: var(--ink); } .wh-row { cursor: pointer; } .wh-row:hover td { background: var(--panel-2); } .dtable tr.d-ok td:nth-child(4) { color: var(--phosphor); } .dtable tr.d-failed td:nth-child(4), .dtable tr.d-pending td:nth-child(4) { color: var(--amber); } .dtable tr.d-dead td:nth-child(4) { color: var(--red); } .wh-payload pre { font-size: .68rem; color: var(--dim); background: var(--bg); padding: .8rem; overflow-x: auto; white-space: pre-wrap; word-break: break-all; } .placeholder.small { font-size: .75rem; padding: 1rem; } /* create + secret modals */ .wh-modal { max-width: 560px; width: 92vw; text-align: left; max-height: 88vh; overflow-y: auto; } .wh-field { display: block; font-family: var(--mono); font-size: .68rem; letter-spacing: .15em; color: var(--dim); margin-top: 1.1rem; } .wh-field input[type="text"], .wh-field input:not([type]) { display: block; width: 100%; margin-top: .45rem; padding: .7rem .8rem; background: var(--bg); border: 1px solid var(--line); color: var(--ink); font-family: var(--mono); font-size: .8rem; outline: none; } .wh-field input:focus { border-color: var(--phosphor); } .wh-ev-all { margin: .6rem 0 .4rem; font-size: .78rem; color: var(--ink); letter-spacing: 0; } .wh-ev-groups.dimmed { opacity: .35; pointer-events: none; } .wh-ev-group { margin-top: .7rem; } .wh-ev-name { font-size: .62rem; color: var(--phosphor); letter-spacing: .25em; margin-bottom: .35rem; } .wh-ev { display: flex; gap: .6rem; padding: .3rem 0; cursor: pointer; letter-spacing: 0; align-items: baseline; } .wh-ev code { color: var(--ink); font-size: .72rem; } .wh-ev small { display: block; color: var(--dim); font-size: .66rem; margin-top: .1rem; font-family: var(--sans); } .modal-actions { display: flex; gap: .6rem; justify-content: flex-end; margin-top: 1.4rem; } .modal-actions button { padding: .6rem 1rem; background: none; border: 1px solid var(--line); color: var(--ink); font-family: var(--mono); letter-spacing: .1em; cursor: pointer; } .modal-actions .primary { border-color: var(--phosphor); color: var(--phosphor); } .modal-actions .primary:hover { background: var(--phosphor); color: var(--bg); } .wh-secret { margin-top: 1rem; padding: .9rem; background: var(--bg); border: 1px dashed var(--phosphor); font-family: var(--mono); font-size: .78rem; color: var(--phosphor); word-break: break-all; } @media (max-width: 900px) { .wh-layout { grid-template-columns: 1fr; } } .card .quota { font-family: var(--mono); font-size: .62rem; color: var(--dim); margin-top: .6rem; letter-spacing: .08em; } /* ---- groups tab polish ---- */ .bar select { background: var(--panel); border: 1px solid var(--line); color: var(--ink); font-family: var(--mono); font-size: .78rem; padding: .6rem .9rem; letter-spacing: .05em; outline: none; cursor: pointer; } .bar select:focus, .bar input:focus { border-color: var(--phosphor); } #gr-list { max-height: 68vh; overflow-y: auto; padding-right: .25rem; } #gr-list::-webkit-scrollbar, #whd-log::-webkit-scrollbar { width: 6px; } #gr-list::-webkit-scrollbar-thumb { background: var(--line); } .gr-meta { font-family: var(--mono); font-size: .68rem; color: var(--dim); margin-top: .4rem; } .gr-flags { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .6rem; } .role-owner { color: var(--amber); border-color: var(--amber); } .role-admin { color: var(--phosphor); border-color: var(--phosphor); } .dtable td.dim-cell { color: var(--dim); } .gr-member-bar { margin: .4rem 0 .6rem; } .gr-member-bar input { background: var(--bg); border: 1px solid var(--line); color: var(--ink); font-family: var(--mono); font-size: .7rem; padding: .45rem .7rem; width: 240px; outline: none; } /* ---- api spec tab ---- */ .api-doc { font-size: .85rem; } .api-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 2.2rem; align-items: start; } /* sticky section nav */ .api-toc { position: sticky; top: 1.2rem; } .api-toc-head { font-family: var(--mono); font-size: .6rem; letter-spacing: .3em; color: var(--dim); margin-bottom: .7rem; } .api-toc nav { display: flex; flex-direction: column; border-left: 1px solid var(--line); } .api-toc a { font-family: var(--mono); font-size: .7rem; letter-spacing: .06em; text-decoration: none; color: var(--dim); padding: .42rem .85rem; border-left: 2px solid transparent; margin-left: -1px; } .api-toc a.sub { padding-left: 1.7rem; font-size: .64rem; } .api-toc a:hover { color: var(--ink); } .api-toc a.active { color: var(--phosphor); border-left-color: var(--phosphor); background: var(--phosphor-soft); } .api-body { min-width: 0; max-width: 1120px; } .api-intro h2 { font-family: var(--mono); color: var(--ink); font-size: .95rem; letter-spacing: .18em; margin: .1rem 0 .8rem; } .api-meta { background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--phosphor); padding: .9rem 1.2rem; } .api-meta p { font-size: .78rem; color: var(--ink); line-height: 1.8; margin: .2rem 0; } /* key cards */ .api-keys { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; } .api-key-card { background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); padding: 1.05rem 1.2rem; } .api-key-card h4 { margin: 0 0 .55rem; font-family: var(--mono); font-size: .68rem; letter-spacing: .22em; color: var(--phosphor); } .api-key-card p { font-size: .76rem; color: var(--dim); margin: .35rem 0; line-height: 1.65; } .api-key-card p b { color: var(--ink); font-weight: 500; } .api-key-card .keyval { font-family: var(--mono); font-size: .74rem; color: var(--ink); background: var(--bg); border: 1px solid var(--line); padding: .5rem .65rem; margin: .6rem 0 .5rem; word-break: break-all; } .api-key-actions { display: flex; gap: .45rem; } .api-quickstart { grid-column: 1 / -1; } .api-key-card pre { font-family: var(--mono); font-size: .74rem; line-height: 1.7; color: var(--ink); background: var(--bg); border: 1px solid var(--line); padding: .8rem 1rem; margin: .6rem 0 .5rem; overflow-x: auto; } .qs-var { color: var(--amber); } /* spec sections */ .api-sec { margin-top: 2.4rem; scroll-margin-top: 1rem; } .api-sec-title { font-family: var(--mono); font-size: .78rem; letter-spacing: .28em; text-transform: uppercase; color: var(--phosphor); border-bottom: 1px solid var(--line); padding-bottom: .55rem; margin: 0 0 1rem; } .api-sub { font-family: var(--mono); font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: var(--dim); margin: 1.8rem 0 .6rem; scroll-margin-top: 1rem; } .api-sec p { font-size: .79rem; line-height: 1.75; color: var(--ink); margin: .55rem 0; max-width: 82ch; } .api-sec ul { margin: .5rem 0 .5rem 1.2rem; padding: 0; max-width: 82ch; } .api-sec li { margin: .3rem 0; font-size: .79rem; line-height: 1.65; } .api-doc code { font-family: var(--mono); font-size: .8em; color: var(--phosphor); background: var(--phosphor-soft); padding: .1em .38em; border-radius: 2px; } .api-sec pre { font-family: var(--mono); font-size: .72rem; background: var(--panel-2); border: 1px solid var(--line); padding: .8rem; overflow-x: auto; margin: .6rem 0; } .api-doc table { margin: .6rem 0 1rem; } /* endpoint rows */ .ep-list { display: grid; grid-template-columns: max-content minmax(180px, max-content) minmax(0, 1fr); border: 1px solid var(--line); background: var(--panel); margin: .2rem 0 .9rem; } .ep { display: contents; } .ep > * { padding: .6rem .9rem; border-bottom: 1px solid var(--line); min-width: 0; } .ep:last-child > * { border-bottom: 0; } .ep:hover > * { background: var(--panel-2); } .ep-m { font-family: var(--mono); font-size: .62rem; font-weight: 800; letter-spacing: .12em; align-self: start; justify-self: start; margin: .55rem 0 0 .9rem; padding: .22em .55em !important; border: 1px solid currentColor; min-width: 4.6em; text-align: center; } .ep-m.get { color: var(--phosphor); background: var(--phosphor-soft); } .ep-m.post { color: var(--amber); background: var(--amber-soft); } .ep-m.patch { color: var(--blue); background: var(--blue-soft); } .ep-m.delete { color: var(--red); background: var(--red-soft); } .ep-p { font-family: var(--mono); font-size: .74rem; color: var(--ink); background: none !important; border-radius: 0; padding: .66rem .9rem; word-break: break-all; cursor: copy; align-self: start; } .ep-p:hover, .ep-p.copied { color: var(--phosphor); } .ep-d { font-size: .75rem; color: var(--dim); line-height: 1.65; align-self: center; } .ep-d b { color: var(--ink); font-weight: 500; } .ep-d code { color: var(--ink); background: var(--phosphor-soft); } .ep.planned > * { opacity: .48; } .ep-chip { font-family: var(--mono); font-size: .56rem; letter-spacing: .18em; border: 1px solid var(--amber); color: var(--amber); padding: .12em .5em; margin-right: .55em; white-space: nowrap; } /* filter + base picker */ .api-tools { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; margin-top: 1rem; position: sticky; top: 0; z-index: 5; background: var(--bg); padding: .6rem 0; } #api-filter { flex: 1; min-width: 240px; background: var(--panel); border: 1px solid var(--line); color: var(--ink); font-family: var(--mono); font-size: .74rem; padding: .55rem .8rem; outline: none; } #api-filter:focus { border-color: var(--phosphor); } .api-base-pick { font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; color: var(--dim); display: flex; gap: .35rem; align-items: center; } .api-base-pick button { background: none; border: 1px solid var(--line); color: var(--dim); font-family: var(--mono); font-size: .62rem; padding: .3rem .55rem; cursor: pointer; } .api-base-pick button:hover { color: var(--ink); } .api-base-pick button.sel { border-color: var(--phosphor); color: var(--phosphor); background: var(--phosphor-soft); } .ep.hide > * { display: none; } .api-sec.hide-sec { display: none; } @media (max-width: 1000px) { .api-layout { grid-template-columns: 1fr; gap: 1rem; } .api-toc { position: static; } .api-toc nav { flex-direction: row; flex-wrap: wrap; border-left: 0; gap: .1rem; } .api-toc a, .api-toc a.active { border-left: 0; border-bottom: 2px solid transparent; } .api-toc a.active { border-bottom-color: var(--phosphor); } .api-toc a.sub { display: none; } .ep-list { grid-template-columns: max-content minmax(0, 1fr); } .ep-d { grid-column: 1 / -1; padding-top: 0; } } /* ---- mcp tab ---- */ .mcp-head h2 { font-family: var(--mono); font-size: .95rem; letter-spacing: .18em; color: var(--ink); margin-bottom: .5rem; } .mcp-head .chip.on { color: var(--phosphor); border-color: var(--phosphor); background: var(--phosphor-soft); float: none; margin-left: .6em; } .mcp-head .chip.off { color: var(--red); border-color: var(--red); background: var(--red-soft); float: none; margin-left: .6em; } .mcp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.1rem; } .mcp-card { background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); padding: 1.15rem 1.25rem; position: relative; } .mcp-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--state-color, var(--dim)); } .mcp-card.connected { --state-color: var(--phosphor); --state-soft: var(--phosphor-soft); } .mcp-card.logged_out, .mcp-card.disconnected { --state-color: var(--red); --state-soft: var(--red-soft); } .mcp-card.pairing { --state-color: var(--amber); --state-soft: var(--amber-soft); } .mcp-card h3 { font-family: var(--mono); font-size: .92rem; letter-spacing: .1em; font-weight: 600; } .mcp-card .jid { font-family: var(--mono); font-size: .68rem; color: var(--dim); margin-top: .5rem; word-break: break-all; } .mcp-card .jid b { color: var(--ink); font-weight: 500; } .mcp-card .jid code { color: var(--ink); background: none; padding: 0; } .mcp-card-actions { display: flex; gap: .5rem; margin-top: .9rem; flex-wrap: wrap; } .mcp-hint { margin-top: .9rem; } .hint.mcp-hint { font-family: var(--sans); font-size: .75rem; color: var(--dim); line-height: 1.7; border: 1px dashed var(--line); padding: .7rem .9rem; } .hint.mcp-hint code { font-family: var(--mono); color: var(--phosphor); font-size: .9em; } .mcp-connect { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; } .mcp-connect-card { background: var(--panel); border: 1px solid var(--line); padding: 1rem 1.1rem; } .mcp-connect-card h4 { font-family: var(--mono); font-size: .66rem; letter-spacing: .22em; color: var(--phosphor); margin-bottom: .5rem; } .mcp-connect-card p { font-size: .75rem; color: var(--dim); line-height: 1.7; } .mcp-connect-card code { font-family: var(--mono); font-size: .85em; color: var(--ink); background: var(--phosphor-soft); padding: .08em .35em; border-radius: 2px; word-break: break-all; } .mcp-tool-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.2rem; align-items: start; } .mcp-tool-group { background: var(--panel); border: 1px solid var(--line); padding: .9rem 1rem; } .mcp-tool { display: grid; grid-template-columns: max-content 1fr; gap: .8rem; padding: .32rem 0; align-items: baseline; } .mcp-tool code { font-family: var(--mono); font-size: .72rem; color: var(--ink); } .mcp-tool small { font-family: var(--sans); font-size: .68rem; color: var(--dim); line-height: 1.5; } #mcp-live > .wh-log-title { margin-top: 1.6rem; } .card .sid { cursor: pointer; font-size: .62rem; margin-top: .15rem; } .card .sid b { color: var(--dim); font-weight: 400; } .card .sid:hover b { color: var(--phosphor); }