/* ===== TRS:80 – style.css ===== */

/* ---------- Core theme ---------- */
:root{
  --bg:#0b0f14; --panel:#121826; --ink:#e8eef6; --muted:#93a4b8; --border:#1f2a3a;
  --bt-amber:#ffd06e; --bt-amber-dim:#e0b45c;
  --accent:var(--bt-amber); --accent-dim:var(--bt-amber-dim);
  --radius:8px; --transition:.2s ease;
  --embed-font:12.5px; --embed-pad:6px; --embed-gap:6px;
  --vheat-h:96px;
}

/* ---------- Base ---------- */
html,body{height:100%;margin:0;background:var(--bg);color:var(--ink);
  font-family:ui-sans-serif, system-ui, Segoe UI, Roboto, Arial, sans-serif; font-size:15px; line-height:1.4;}
button,input,select{font:inherit;color:inherit}

/* ---------- App shell ---------- */
.app {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Topbar (single line, left-aligned) */
.ui-topbar {
  display: flex;
  align-items: center;
  justify-content: flex-start;   /* ⬅️ keep everything on the left */
  gap: 10px;
  flex-wrap: nowrap;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  padding: 8px 12px;
}

.topbar-left,
.topbar-right {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

/* give a little breathing room between brand + actions */
.topbar-right {
  margin-left: 8px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}
.brand-text {
  color: var(--accent);
}


/* Actions */
.actions--top .btn{padding:4px 8px;font-size:12px;line-height:1;border-radius:6px}
.divider{width:1px;height:20px;background:var(--border)}

/* ---------- Layout: sidebar + main ---------- */
main.layout{display:grid;grid-template-columns:280px 1fr;gap:12px;}
.col-left{padding:12px}
.col-right{padding:12px;min-width:0}

/* Sidebar panel with sticky header and independent scroll for list */
#mech-sidebar .panel{display:flex;flex-direction:column;height:calc(100vh - 96px);max-height:calc(100vh - 96px);}
#mech-sidebar .panel-h{position:sticky;top:0;z-index:1;background:var(--panel);border-bottom:1px solid var(--border)}
#mech-sidebar .panel-c{padding:0}
#side-search{flex:1 1 auto;min-width:0;padding:6px 8px;border-radius:6px;border:1px solid var(--border);background:#0e1522;color:var(--ink)}
#mech-list{max-height:calc(100vh - 96px - 44px);overflow:auto;border:1px solid var(--border);border-radius:6px;background:rgba(0,0,0,.05)}
/* Optional visible scrollbars for the list */
#mech-list{scrollbar-width:auto}
#mech-list::-webkit-scrollbar{width:8px} #mech-list::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}

/* Mech rows */
.mech-row{padding:6px 8px;border-bottom:1px solid var(--border);cursor:pointer;display:flex;align-items:center;gap:6px;line-height:1.2}
.mech-row:last-child{border-bottom:0}
.mech-row:hover,.mech-row:focus{background:var(--accent-dim);color:#000;outline:none}
.mech-row.is-active{background:var(--accent-dim);color:#000}
.mech-row .name{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mech-row .variant{margin-left:auto;opacity:.6;font-size:12px}

/* ---------- Cards / Panels ---------- */
.card,.panel{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:12px}
.card-h,
.panel-h {
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: flex-start;  /* ⬅️ was space-between */
  gap: 10px;
  font-weight: 600;
  font-size: 14px;
}

.card-c,.panel-c{padding:8px 10px}

/* ---------- Tabs ---------- */
.tabs{display:flex;gap:4px;margin-bottom:8px}
.tab{padding:6px 10px;background:transparent;border:1px solid var(--border);border-radius:var(--radius);font-size:13px;cursor:pointer;transition:background var(--transition)}
.tab.is-active{background:var(--accent-dim);border-color:var(--accent);color:#000}
.swap-pane{display:none} .swap-pane.is-active{display:block}

/* ---------- Buttons ---------- */
.btn{padding:6px 10px;border-radius:var(--radius);border:1px solid var(--border);background:var(--accent-dim);color:#000;cursor:pointer;transition:background var(--transition)}
.btn:hover{background:var(--accent)}
.btn.ghost{background:transparent;color:var(--ink)} .btn.ghost:hover{background:var(--border)}
.btn.sm{padding:4px 8px;font-size:13px}
.btn.icon{padding:4px;width:28px;height:28px;font-size:16px;display:inline-flex;align-items:center;justify-content:center}
.icon-btn{border:0;background:transparent;padding:6px;width:32px;height:32px;border-radius:6px;cursor:pointer}

/* ---------- Overview ---------- */
.overview-flex{display:flex;gap:10px;align-items:stretch}
.vheat{width:28px;display:flex;flex-direction:column;align-items:center;gap:4px}
.vheat-bar{position:relative;width:12px;height:var(--vheat-h);background:var(--border);border-radius:6px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.vheat-bar::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(to top,transparent 0,transparent calc(10% - 1px),rgba(0,0,0,.45) calc(10% - 1px),rgba(0,0,0,.45) 10%);mix-blend-mode:multiply}
.vheat-fill{position:absolute;left:0;bottom:0;width:100%;height:0%;background:var(--accent);transition:height var(--transition)}
.vheat-legend{font-size:11.5px;color:var(--muted)}
.overview-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 8px;flex:1}
.overview-grid label{display:block;font-size:11px;color:var(--muted);margin-bottom:2px}

/* ---------- Tech Readout ---------- */
.tro-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.fullw{width:100%;border-collapse:collapse;margin-top:6px} .fullw th,.fullw td{padding:6px 0;text-align:left}
.mt6{margin-top:6px}

/* ---------- GATOR (compact) ---------- */
.gtr-compact{display:flex;flex-direction:column;gap:8px}
.gtr-col{background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(0,0,0,.02));border:1px solid var(--border);border-radius:8px;padding:8px;display:flex;flex-direction:column;gap:6px}
.gtr-title{font-size:12px;font-weight:700;color:var(--muted);display:flex;align-items:center;gap:6px}
.dot{width:10px;height:10px;border-radius:10px;display:inline-block}.dot-att{background:#8ad}.dot-tgt{background:#d88}
.gtr-lab{font-size:11.5px;color:var(--muted)}
.gtr-sel{width:100%;padding:6px 8px;border-radius:6px;border:1px solid var(--border);background:#0e1522;color:var(--ink)}
.gtr-sel.xs{width:auto;min-width:170px} .gtr-sel.tiny{width:70px}
.gtr-in.tiny{width:64px;padding:6px 8px;border-radius:6px;border:1px solid var(--border);background:#0e1522;color:var(--ink);text-align:center}
.gtr-toggles{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;font-size:12px;color:var(--muted)}
.chk input{vertical-align:middle;margin-right:4px}
.gtr-groups{display:flex;flex-wrap:wrap;gap:6px}
.gtr-roller{display:flex;align-items:center;gap:6px}
.result-badge{min-width:44px;text-align:center;padding:6px 8px;border-radius:999px;background:rgba(255,255,255,.04);font-weight:800;font-size:13px}
.gtr-footer{display:flex;align-items:center;gap:10px;border-top:1px solid var(--border);padding-top:8px}
.gtr-tn{margin-right:auto} .tn{font-weight:900;font-size:20px}.tn-auto{color:lime}.tn-yellow{color:yellow}.tn-red{color:#ff6b6b}
/* Segmented buttons */
.gtr-seg{display:inline-flex;flex-wrap:nowrap;border:1px solid var(--border);border-radius:6px;overflow:hidden}
.gtr-seg button{border:0;background:#0e1522;color:var(--ink);padding:4px 8px;font-size:12px;line-height:1;cursor:pointer}
.gtr-seg button+button{border-left:1px solid var(--border)}
.gtr-seg button.is-active{background:var(--accent-dim);color:#000}

/* ---------- Toast ---------- */
.toast{position:fixed;bottom:12px;right:12px;background:var(--panel);border:1px solid var(--accent);border-radius:var(--radius);padding:8px 12px;font-size:14px;display:none}
.toast[hidden]{display:none}

/* ---------- Footer ---------- */
.app-footer{margin-top:auto;background:var(--panel);border-top:1px solid var(--border);padding:6px 10px;font-size:.65em;line-height:1.2;color:#888;text-align:center}
.linklike{background:transparent;border:0;color:var(--accent);cursor:pointer;text-decoration:underline;padding:0 2px}

/* ---------- Modal ---------- */
.modal[hidden]{display:none}
.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.5);z-index:1000}
.modal-card{width:min(640px,92vw);background:var(--panel);border:1px solid var(--border);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.45)}
.modal-h{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid var(--border)}
.modal-c{padding:12px}
.modal-f{padding:10px 12px;border-top:1px solid var(--border);display:flex;justify-content:flex-end}
.modal-divider{border:0;border-top:1px solid var(--border);margin:10px 0}

/* ---------- Utility ---------- */
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace}
.dim{color:var(--muted)} .small{font-size:12.5px}
.noscript{padding:20px;background:#600;color:#fff;font-weight:bold;text-align:center}

/* ---------- Embed Mode (optional) ---------- */
.app.is-embed{font-size:var(--embed-font);line-height:1.25;border:1px solid var(--border);border-radius:10px;overflow:auto;background:var(--panel);box-shadow:0 8px 24px rgba(0,0,0,.35)}
.app.is-embed .ui-topbar{padding:var(--embed-pad)} .app.is-embed .btn{padding:4px 8px}
.app.is-embed main.layout{grid-template-columns:240px 1fr}
.app.is-embed .col-right{padding:var(--embed-pad)}
.app.is-embed .card,.app.is-embed .panel{margin-bottom:var(--embed-gap)}
.app.is-embed .card-h,.app.is-embed .panel-h{padding:4px 6px}
.app.is-embed .card-c,.app.is-embed .panel-c{padding:6px}
.app.is-embed #top-swapper .tab{padding:3px 6px;font-size:12px}
.app.is-embed .toast{position:absolute;bottom:8px;right:8px;font-size:12px;padding:6px 8px}

/* ---------- Search dropdown (injected by JS) ---------- */
#search-results{position:absolute;z-index:9999;pointer-events:auto;max-height:300px;overflow:auto;background:rgba(0,0,0,.8);border:1px solid var(--border);border-radius:6px}
#search-results .result-item{display:block;width:100%;padding:.4rem .6rem;cursor:pointer;user-select:none;transition:background var(--transition),color var(--transition)}
#search-results .result-item:hover,#search-results .result-item:focus{background:var(--bt-amber)!important;color:#000!important}
#search-results .result-item:hover .result-variant,#search-results .result-item:focus .result-variant{color:#222!important}

/* ---------- GATOR sub-tabs ---------- */
.gtr-subtabs{display:flex;gap:6px;margin-bottom:6px}
.gtr-subtab{padding:4px 8px;font-size:12px;line-height:1;background:transparent;border:1px solid var(--border);border-radius:6px;cursor:pointer}
.gtr-subtab.is-active{background:var(--accent-dim);color:#000;border-color:var(--accent)}
.gtr-pane{display:none} .gtr-pane.is-active{display:block}
#pane-gator .card-c{overflow:visible}
#btn-roll-att,#btn-roll-both{background:var(--bt-amber);color:#000;font-weight:400}

/* ---------- Filter modal layout helpers ---------- */
.filter-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
.filter-grid fieldset{margin:0;padding:0;border:0}
.filter-grid legend{margin-bottom:6px}
.weight-choices{display:flex;gap:10px;flex-wrap:wrap}
.bv-range{display:flex;gap:8px;align-items:end}
.roles{grid-column:1 / -1}
.role-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.source{grid-column:1 / -1}
#filter-modal .gtr-in.tiny{width:100%}
#filter-modal .chk{user-select:none}

/* ---------- Global scrollbar hiding inside app (except mech list) ---------- */
.app, .app *{-ms-overflow-style:none;scrollbar-width:none}
.app *::-webkit-scrollbar{width:0;height:0;display:none}

/* ---------- Mobile: sidebar as slide-in drawer ---------- */
#sidebar-scrim{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:998}
#sidebar-scrim[hidden]{display:none}

@media (max-width:800px){
  main.layout{position:relative;grid-template-columns:1fr} /* content takes full width */
  .col-left{position:fixed;top:46px;left:0;bottom:0;width:min(86vw,320px);padding:8px;z-index:999;transform:translateX(-100%);transition:transform var(--transition)}
  .col-left.is-open{transform:translateX(0)}
  /* Hide hamburger only on wide screens; visible here by default */
}

@media (min-width:801px){
  #btn-side-toggle{display:none}
}

/* ===== TRS:80 • Technical Readout Boot (namespaced) ===== */
:root{
  --tro-bg:#141310;        /* deep paper-tan/ink background */
  --tro-ink:#d7d0c0;       /* text ink */
  --tro-amber:#e7c06a;     /* accent amber */
  --tro-amber-deep:#a5792e;
  --tro-rule:#3b2e10;      /* paper rule/ink line */
}

.tro-boot{
  position:fixed; inset:0; z-index:2000;
  background: radial-gradient(1200px 700px at 50% 38%, #191814 0%, #151410 60%, #0e0d0a 100%);
  color:var(--tro-ink);
  font:14px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  letter-spacing:.01em;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  transition:opacity .55s ease, visibility .55s ease;
}

.tro-boot--hidden{ opacity:0; visibility:hidden; pointer-events:none; }

.tro-boot__vignette{
  position:absolute; inset:-8%;
  box-shadow: inset 0 0 160px 60px rgba(0,0,0,.85), inset 0 0 320px 120px rgba(0,0,0,.55);
  pointer-events:none;
}
.tro-boot__scan{
  position:absolute; inset:0;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,.14) 0px, rgba(0,0,0,.14) 2px, transparent 2px, transparent 4px);
  mix-blend-mode:multiply; animation:tro-scan 6s linear infinite;
  pointer-events:none;
}
@keyframes tro-scan{ 0%{opacity:.3;} 50%{opacity:.2;} 100%{opacity:.3;} }

.tro-boot__grid{
  position:absolute; inset:0;
  background:
    linear-gradient(to right, rgba(231,192,106,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(231,192,106,.06) 1px, transparent 1px);
  background-size: 24px 24px, 24px 24px;
  opacity:.25; pointer-events:none;
}
.tro-boot__watermark{
  position:absolute; inset:0; pointer-events:none; opacity:.06;
  background-position:center; background-repeat:no-repeat;
  background-size:min(60vmin,720px) auto;
  /* Optional silhouettes — swap class in JS if you add more */
  background-image: radial-gradient(transparent 40%, rgba(231,192,106,.12) 41%, transparent 42%),
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="640" height="640" viewBox="0 0 640 640"><path fill="%23e7c06a" fill-opacity=".25" d="M120 420l80-40 30-85 110-30 40-90 70 30-40 110 60 45-20 70-90 10-30 80-70-20-35-65-85-10z"/></svg>');
}

.tro-boot__panel{
  width:min(860px, 90vw);
  padding:28px 24px;
  background: rgba(14,12,9,.35);
  border:1px solid var(--tro-rule);
  border-radius:12px;
  position:relative;
  box-shadow:
    0 10px 40px rgba(0,0,0,.45),
    inset 0 0 24px rgba(0,0,0,.35);
}

.tro-boot__title{
  margin:0 0 6px; font-size:19px; letter-spacing:.14em; text-transform:uppercase; color:var(--tro-amber);
  text-shadow:0 0 8px rgba(231,192,106,.22), 0 0 2px var(--tro-amber-deep);
}
.tro-boot__meta{
  color:#c6b892; opacity:.9; margin-bottom:14px; padding-bottom:8px; border-bottom:1px solid var(--tro-rule);
}

.tro-boot__log{
  height:min(44vh, 320px);
  margin:0; padding:14px 16px;
  overflow:auto; white-space:pre-wrap;
  background:rgba(14,12,9,.35);
  border:1px solid var(--tro-rule);
  border-radius:10px;
  color:#f6eacd;
  text-shadow:0 0 1px rgba(255,210,120,.28);
  box-shadow: inset 0 0 24px rgba(0,0,0,.35);
  position:relative;
}
.tro-boot__log::before{
  content:""; position:absolute; left:10px; top:10px; bottom:10px; width:2px; background:linear-gradient(to bottom, transparent, rgba(231,192,106,.25) 20%, rgba(231,192,106,.25) 80%, transparent);
  opacity:.4; pointer-events:none;
}

.tro-boot__progress{
  height:10px; margin-top:14px;
  border:1px solid var(--tro-rule); border-radius:999px;
  background:#1a1408; box-shadow: inset 0 0 8px rgba(0,0,0,.6);
}
.tro-boot__bar{
  height:100%; width:0%;
  border-radius:999px;
  background: linear-gradient(90deg, #8d6b1f, var(--tro-amber), #ffe19b);
  box-shadow: 0 0 8px rgba(242,180,80,.5), inset 0 0 6px #2b1c00;
  transition: width .18s ease;
}

.tro-boot__hint{
  margin-top:10px; color:#c6b892; opacity:.85; text-align:right; font-size:12px;
  animation:tro-blink 1.2s steps(2, jump-none) infinite;
}
@keyframes tro-blink{ 50%{ opacity:.35; } }
.tro-boot__hint kbd{
  font:inherit; background:#1a1408; border:1px solid var(--tro-rule); border-bottom-color:#2a210c; padding:.05em .4em; border-radius:4px;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .tro-boot__scan{ animation:none; }
  .tro-boot, .tro-boot__bar{ transition:none; }
  .tro-boot__hint{ animation:none; }
}