/* petscii.nw - assets/css/petsciiterm.css: PETSCIITerm v0.1 (the Call buttons, the lines, the tray, the Switchboard). 31 Oct 2026. */
:root{--pt-bg:#141022;--pt-bar:#1b1630;--pt-line:#2c2547;--pt-ink:#d9d4f2;--pt-dim:#9a93c0;--pt-green:#5fe08a;--pt-red:#ffb4b4}
.pt-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--pt-green);box-shadow:0 0 6px var(--pt-green);flex:none}

/* the Call button on a board */
.pt-callrow{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:-4px}
.pt-k{font:600 .68rem var(--ps-mono,monospace);letter-spacing:.12em;color:var(--ps-muted,#777)}
.pt-split{position:relative;display:inline-flex}
.pt-call,.pt-more{height:32px;border:1px solid var(--ps-accent,#4b3fc4);background:var(--ps-accent,#4b3fc4);color:#fff;font:600 .8125rem var(--ps-sans,sans-serif);cursor:pointer;display:inline-flex;align-items:center;gap:7px}
.pt-call{padding:0 14px;border-radius:999px 0 0 999px}
.pt-more{padding:0 10px;border-radius:0 999px 999px 0;border-left-color:rgba(255,255,255,.35)}
.pt-call:hover,.pt-more:hover{filter:brightness(1.12)}
.pt-call.live{background:#0f3a24;border-color:#1f7a4a}
.pt-idle .pt-call{border-radius:999px}
.pt-menu{position:absolute;left:0;top:36px;z-index:40;min-width:170px;background:var(--ps-card,#fff);border:1px solid var(--ps-line,#ddd);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.18);padding:6px;display:flex;flex-direction:column}
.pt-menu[hidden]{display:none}
.pt-mitem{height:34px;text-align:left;padding:0 10px;border:0;border-radius:6px;background:transparent;color:var(--ps-ink,#222);font:500 .875rem var(--ps-sans,sans-serif);cursor:pointer}
.pt-mitem:hover{background:var(--ps-accent-soft,#eee)}
.pt-mem{font-size:.8125rem;color:var(--ps-muted,#777)}

/* a line: the bar and the screen */
.pt-line{background:var(--pt-bg);border:1px solid var(--pt-line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;min-height:0}
.pt-line.is-active{border-color:var(--pt-green);box-shadow:0 0 0 2px rgba(95,224,138,.28)}
.pt-bar{display:flex;align-items:center;gap:8px;padding:7px 10px;background:var(--pt-bar);border-bottom:1px solid var(--pt-line);color:var(--pt-ink);flex:none;flex-wrap:wrap}
.pt-title{font:600 .75rem var(--ps-mono,monospace);letter-spacing:.06em;flex:1;min-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pt-sel,.pt-btn{height:28px;padding:0 9px;border-radius:7px;border:1px solid #3a3160;background:#120e22;color:var(--pt-ink);font:500 .75rem var(--ps-sans,sans-serif);cursor:pointer;display:inline-flex;align-items:center;text-decoration:none}
.pt-sel{padding-right:4px}
.pt-btn:hover,.pt-sel:hover{border-color:#a5a0e8}
.pt-icon{font-size:.95rem;padding:0 8px}
.pt-hang{border-color:#6b2b2b;color:var(--pt-red)}
.pt-frame{display:block;width:100%;flex:1;border:0;background:#000;min-height:0}
.pt-off{display:none!important}

/* on the call page: the line fills the middle column */
.pt-inline{height:min(78vh,820px)}
.pt-idle{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;height:min(60vh,600px);border:1px dashed var(--ps-line,#ccc);border-radius:12px;color:var(--ps-muted,#777)}

/* the tray along the bottom */
.pt-tray{position:fixed;left:0;right:0;bottom:0;z-index:80;background:#0e0b1a;border-top:1px solid var(--pt-line);box-shadow:0 -10px 30px rgba(0,0,0,.35);display:none;flex-direction:column}
.pt-tray.on{display:flex}
.pt-tray-head{display:flex;align-items:center;gap:8px;padding:6px 12px;color:var(--pt-ink);min-height:40px}
.pt-brand{display:inline-flex;align-items:center;gap:8px;font:600 .72rem var(--ps-mono,monospace);letter-spacing:.12em;margin-right:6px;white-space:nowrap}
.pt-brand b{color:var(--pt-green);font-weight:600}
.pt-tabs{display:flex;gap:6px;flex:1;min-width:0;overflow-x:auto}
.pt-tab{height:28px;padding:0 12px;border-radius:999px;border:1px solid #3a3160;background:transparent;color:var(--pt-dim);font:500 .78rem var(--ps-sans,sans-serif);cursor:pointer;display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.pt-tab.on{color:#fff;border-color:var(--pt-green);background:#15122a}
.pt-tbtn{height:28px;padding:0 12px;border-radius:7px;border:1px solid #3a3160;background:transparent;color:var(--pt-ink);font:500 .78rem var(--ps-sans,sans-serif);cursor:pointer}
.pt-tbtn:hover{border-color:#a5a0e8}
.pt-tray-body{height:min(62vh,640px);padding:0 12px 12px;display:flex;flex-direction:column}
.pt-tray-body>.pt-line{flex:1}
.pt-tray.is-min .pt-tray-body{height:0;padding:0;overflow:hidden}

/* big: the line floats over the page */
.pt-backdrop{position:fixed;inset:0;background:rgba(6,4,14,.72);z-index:90}
.pt-line.pt-big{position:fixed!important;left:4vw!important;top:4vh!important;width:92vw!important;height:92vh!important;z-index:91}
.pt-hasbig .pt-tray{z-index:92}
.pt-line:fullscreen{border-radius:0;border:0;width:100vw;height:100vh}

/* the Switchboard: every tray line at once; the lines don't move in the page, so no call drops */
.pt-sb-top{display:none}
body.pt-sb{overflow:hidden}
body.pt-sb .pt-sb-top{display:flex;position:fixed;left:0;right:0;top:0;height:44px;z-index:96;align-items:center;gap:10px;padding:0 16px;background:#0b0916;color:var(--pt-ink);font:600 .78rem var(--ps-mono,monospace);letter-spacing:.1em}
body.pt-sb .pt-sb-top .sp{flex:1}
body.pt-sb .pt-sb-top .hint{font-weight:400;letter-spacing:0;color:var(--pt-dim)}
body.pt-sb .pt-tray{top:0;z-index:95;background:#0b0916;border:0}
body.pt-sb .pt-tray-head{display:none}
body.pt-sb .pt-tray-body{height:auto;padding:0}
body.pt-sb .pt-tray-body>.pt-line{position:fixed;flex:none}

.pt-flash{position:fixed;left:50%;bottom:90px;transform:translate(-50%,20px);opacity:0;transition:.25s;z-index:120;background:#1d1736;color:#fff;padding:10px 16px;border-radius:10px;font:500 .875rem var(--ps-sans,sans-serif);box-shadow:0 8px 24px rgba(0,0,0,.35)}
.pt-flash.on{opacity:1;transform:translate(-50%,0)}
@media (max-width:820px){.pt-tray-body{height:56vh}.pt-brand b{display:none}.pt-title{flex-basis:100%}}