/* GhostCalc web setup — layered on top of info-pages.css, reusing its tokens
   (--bg/--panel/--cyan/--grad/--mono ...) so this page is the same site. */

/* The browser's own [hidden]{display:none} is only a UA rule, so ANY author
   rule that sets display beats it — .btn{display:inline-flex}, .actions and
   .statgrid{display:grid}, .preview-shell{display:flex}. Without this every
   el.hidden toggle on a styled element would silently do nothing (the
   Disconnect button stayed on screen while offline). Keep this first. */
[hidden]{display:none!important}

/* ── Connection bar ─────────────────────────────────────────────────────── */
.connbar{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:20px 24px;margin-bottom:18px}
/* flex-basis follows the main axis, so this must stay width-only — the mobile
   rule below switches the bar to a column, where a 320px basis would become
   320px of dead vertical space. */
.connbar-main{display:flex;align-items:center;gap:16px;min-width:0;flex:1 1 320px}
.connbar-copy{display:flex;flex-direction:column;gap:3px;min-width:0}
.connbar-copy strong{font-family:var(--display);font-size:1.05rem;color:var(--ink)}
.connbar-copy span{font-size:.88rem;color:var(--ink2);line-height:1.5}
.connbar-actions{display:flex;gap:10px;flex-wrap:wrap}
.conn-chip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--ink3);border-radius:999px;padding:8px 13px;font:700 .7rem var(--mono);letter-spacing:.12em;white-space:nowrap}
.conn-dot{width:8px;height:8px;border-radius:50%;background:var(--ink3);flex:none}
.conn-chip.is-online{border-color:rgba(46,230,160,.35);background:rgba(46,230,160,.09);color:var(--ok)}
.conn-chip.is-online .conn-dot{background:var(--ok);box-shadow:0 0 0 0 rgba(46,230,160,.5);animation:pulse 1.8s infinite}
.conn-chip.is-busy{border-color:rgba(90,139,255,.35);background:rgba(90,139,255,.09);color:var(--blue)}
.conn-chip.is-busy .conn-dot{background:var(--blue)}
.conn-chip.is-error{border-color:rgba(255,122,89,.35);background:rgba(255,122,89,.09);color:var(--warn)}
.conn-chip.is-error .conn-dot{background:var(--warn)}

.status-pill.is-online{border-color:rgba(46,230,160,.32);background:rgba(46,230,160,.08);color:var(--ok)}
.status-pill.is-online .status-dot{background:var(--ok)}
.status-pill.is-error{border-color:rgba(255,122,89,.32);background:rgba(255,122,89,.08);color:var(--warn)}
.status-pill.is-error .status-dot{background:var(--warn);animation:none}
.status-code b{color:var(--ink);font-weight:700;word-break:break-word}

/* ── Support gate ───────────────────────────────────────────────────────── */
.gate{border-color:rgba(255,122,89,.3);background:rgba(255,122,89,.06);margin-bottom:18px}
.gate h2{color:#ffd1c6}
.gate ul{margin-top:14px}
.gate.is-info{border-color:rgba(46,230,207,.28);background:rgba(46,230,207,.05)}
.gate.is-info h2{color:var(--cyan)}

/* ── Tabs ───────────────────────────────────────────────────────────────── */
.tabbar{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 10px;margin-bottom:18px;scrollbar-width:thin}
.tabbar::-webkit-scrollbar{height:4px}
.tabbar::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
.tab{flex:none;border:1px solid var(--line);background:rgba(255,255,255,.035);color:var(--ink2);border-radius:999px;padding:10px 17px;font:700 .85rem var(--display);cursor:pointer;white-space:nowrap;transition:border-color .2s,color .2s,background .2s,transform .2s var(--ease)}
.tab:hover{color:#fff;border-color:rgba(46,230,207,.35);transform:translateY(-1px)}
.tab.is-active{background:var(--grad);border-color:transparent;color:#04130f}

/* Every track is minmax(0,…): a bare 1fr floors at min-content, so one long
   unbreakable firmware string in the activity log would otherwise widen the
   whole column past the viewport. html/body carry overflow-x:hidden sitewide,
   which hides that blowout instead of revealing it. */
.tab-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.36fr);gap:24px;align-items:start}
.tab-main{min-width:0}
.tab-side{display:grid;gap:16px;position:sticky;top:92px;min-width:0}
.tabpanel{display:none}
.tabpanel.is-active{display:block;animation:rise .38s var(--ease) both}

/* ── Fields ─────────────────────────────────────────────────────────────── */
.field{margin-top:18px}
.field label{display:block;font:700 .72rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);margin-bottom:8px}
.field input[type=text],.field input[type=url],.field input[type=password],.field select,.field textarea{
  width:100%;border:1px solid var(--line);background:var(--panel2);color:var(--ink);border-radius:14px;
  padding:13px 15px;font:500 .95rem var(--sans);outline:none;transition:border-color .2s,box-shadow .2s}
.field textarea{resize:vertical;line-height:1.6;font-family:var(--mono);font-size:.88rem}
.field select{appearance:none;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--ink3) 50%),linear-gradient(135deg,var(--ink3) 50%,transparent 50%);background-position:calc(100% - 20px) 21px,calc(100% - 14px) 21px;background-size:6px 6px;background-repeat:no-repeat;padding-right:42px}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(46,230,207,.14)}
.field input::placeholder,.field textarea::placeholder{color:var(--ink3)}
.hint{display:block;margin-top:7px;font-size:.82rem;color:var(--ink3);line-height:1.55}
.hint.is-ok{color:var(--ok)}
.hint.is-warn{color:var(--warn)}

.secret{position:relative;display:flex}
.secret input{padding-right:78px!important}
.reveal{position:absolute;right:7px;top:50%;transform:translateY(-50%);border:1px solid var(--line);background:rgba(255,255,255,.05);color:var(--ink2);border-radius:999px;padding:7px 12px;font:700 .68rem var(--mono);letter-spacing:.1em;cursor:pointer;transition:color .2s,border-color .2s}
.reveal:hover{color:#fff;border-color:rgba(46,230,207,.4)}

.remember{display:flex;align-items:flex-start;gap:10px;margin-top:18px;font-size:.85rem;color:var(--ink2);line-height:1.55;cursor:pointer}
.remember.inline{margin-top:0;align-items:center}
.remember input{margin-top:3px;accent-color:var(--cyan);width:16px;height:16px;flex:none}
.remember.inline input{margin-top:0}

/* ── Buttons & rows ─────────────────────────────────────────────────────── */
.btn-sm{font-size:.82rem;padding:.72em 1.2em}
.btn-warn{background:rgba(255,122,89,.12);border-color:rgba(255,122,89,.4);color:#ffd1c6}
.btn-warn:hover{border-color:rgba(255,122,89,.75);color:#fff}
.btn[disabled],.btn[aria-disabled=true]{opacity:.45;pointer-events:none}
.rowline{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}

/* ── Stat grid ──────────────────────────────────────────────────────────── */
.statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:16px}
.stat{border:1px solid var(--line2);background:rgba(255,255,255,.03);border-radius:14px;padding:13px 15px}
.stat-k{display:block;font:500 .74rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);margin-bottom:6px}
.stat-v{display:block;font-family:var(--display);font-size:1.02rem;font-weight:700;color:var(--ink);word-break:break-word;line-height:1.35}

/* ── Chips ──────────────────────────────────────────────────────────────── */
.chipwrap{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.chip{border-radius:999px;padding:7px 13px;font:700 .72rem var(--mono);letter-spacing:.07em;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--ink3)}
.chip.is-set{border-color:rgba(46,230,160,.35);background:rgba(46,230,160,.09);color:var(--ok)}
.chip.is-missing{border-color:var(--line);color:var(--ink3)}
.chip-idle{color:var(--ink3)}

/* ── Action rows ────────────────────────────────────────────────────────── */
.actions{display:grid;gap:10px;margin-top:14px}
.action{display:flex;align-items:center;justify-content:space-between;gap:16px;border:1px solid var(--line2);background:rgba(255,255,255,.03);border-radius:16px;padding:15px 17px}
.action>div{min-width:0}
.action b{display:block;font-family:var(--display);font-size:1rem;color:var(--ink);margin-bottom:4px}
.action span{display:block;font-size:.86rem;color:var(--ink2);line-height:1.5}
.action .btn{flex:none}

/* ── Callouts ───────────────────────────────────────────────────────────── */
.callout{border:1px solid var(--line);background:rgba(255,255,255,.03);border-radius:16px;padding:15px 17px;margin-top:16px;font-size:.9rem;color:var(--ink2);line-height:1.6}
.callout b{color:var(--ink);font-family:var(--display)}
.callout.is-ok{border-color:rgba(46,230,160,.3);background:rgba(46,230,160,.07);color:#bdf9dd}
.callout.is-warn{border-color:rgba(255,122,89,.3);background:rgba(255,122,89,.07);color:#ffd1c6}
.callout.is-err{border-color:rgba(255,122,89,.42);background:rgba(255,122,89,.1);color:#ffd1c6}
.callout ul{margin:10px 0 0;padding-left:20px}
.callout li{font-size:.88rem}
.mono-block{display:block;margin-top:12px;font-family:var(--mono);font-size:.8rem;color:var(--cyan);word-break:break-all;background:rgba(0,0,0,.28);border-radius:10px;padding:10px 12px;line-height:1.6}
.dim{color:var(--ink3)!important;font-size:.88rem}

.kv{display:grid;gap:8px;margin-top:14px}
.kv-row{display:flex;justify-content:space-between;gap:14px;border:1px solid var(--line2);background:rgba(255,255,255,.03);border-radius:12px;padding:11px 14px;font-size:.88rem;flex-wrap:wrap}
.kv-row span{color:var(--ink3);font:500 .74rem var(--mono);letter-spacing:.1em;text-transform:uppercase}
.kv-row b{color:var(--ink);font-family:var(--mono);font-size:.88rem;word-break:break-all}

/* ── Network identity card ──────────────────────────────────────────────── */
.idcard{border:1px solid var(--line);background:rgba(255,255,255,.03);border-radius:18px;padding:18px;margin-top:16px}
.idrow{display:flex;align-items:center;justify-content:space-between;gap:14px}
.idrow.spaced{margin-top:26px;padding-top:20px;border-top:1px solid var(--line2)}
.idlabel{font:700 .72rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink2)}
.idvalue{font:700 .8rem var(--mono);letter-spacing:.1em;color:var(--ink3)}
.idvalue.is-on{color:var(--ok)}
.idmono{font-family:var(--mono);font-size:.86rem;color:var(--ink);margin-top:10px;word-break:break-all}

/* ── Notes / image ──────────────────────────────────────────────────────── */
.imgrow{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:16px}
.filebtn{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--ink);border-radius:999px;padding:.72em 1.2em;font:700 .82rem var(--display);cursor:pointer;transition:border-color .2s,color .2s}
.filebtn:hover{border-color:rgba(46,230,207,.5);color:#fff}
.filebtn input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.preview-shell{margin-top:16px;display:flex;justify-content:center;border:1px solid var(--line);background:rgba(0,0,0,.3);border-radius:16px;padding:18px}
#imagePreview{width:min(384px,100%);height:auto;image-rendering:pixelated;border-radius:6px;box-shadow:0 10px 30px -12px rgba(0,0,0,.8)}

/* ── Progress ───────────────────────────────────────────────────────────── */
.progress{height:8px;border-radius:999px;background:rgba(255,255,255,.06);overflow:hidden;margin-top:14px}
.progress-fill{height:100%;width:0;border-radius:999px;background:var(--grad);transition:width .35s var(--ease)}

/* ── Activity feed ──────────────────────────────────────────────────────── */
.activity-card{background:rgba(14,17,32,.86);border-color:var(--line)}
.help-card{background:var(--grad-soft)}
.activity{display:flex;flex-direction:column-reverse;gap:8px;max-height:min(46vh,420px);overflow-y:auto;margin-top:16px;padding-right:4px}
.activity:empty::after{content:'Nothing yet.';color:var(--ink3);font:500 .85rem var(--sans)}
.log{display:flex;gap:9px;border-left:2px solid var(--line);padding:7px 0 7px 11px;font-size:.85rem;color:var(--ink2);line-height:1.5}
.log time{flex:none;font:500 .72rem var(--mono);color:var(--ink3);padding-top:1px}
/* Firmware can emit a long token with no spaces (a status record, a URL). Let
   it wrap anywhere rather than widen the column. */
.log span{min-width:0;overflow-wrap:anywhere}
.log.is-ok{border-left-color:var(--ok)}
.log.is-warn{border-left-color:var(--warn)}
.log.is-err{border-left-color:#ff6a6a;color:#ffd1c6}
.log.is-info{border-left-color:var(--blue)}
.tips{margin:14px 0 0;padding-left:20px;display:grid;gap:8px}
.tips li{font-size:.87rem;color:var(--ink2);line-height:1.5}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media(max-width:1000px){
  .tab-grid{grid-template-columns:1fr}
  .tab-side{position:relative;top:0}
}
@media(max-width:620px){
  .connbar{padding:18px;flex-direction:column;align-items:stretch}
  /* The bar is a column here, so reset the row-axis basis to auto. */
  .connbar-main{flex:0 0 auto;align-items:flex-start}
  .connbar-actions .btn{flex:1 1 auto}
  .action{flex-direction:column;align-items:flex-start}
  .action .btn{width:100%}
  .rowline .btn{flex:1 1 auto}
  .statgrid{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
}