/* STNE Spy — the design agreed in the artifact: structure C, palette A.
   Red and green are reserved for exactly one thing: staleness. Nothing else
   may use them, so a red cell always means the same thing. */

:root{
  --bg:#0A121C; --surface:#0E1926; --raised:#132234; --line:#1E3348; --line-soft:#16283a;
  --ink:#DCE6EF; --dim:#7E93A8; --dimmer:#586b7e;
  --accent:#4FB3C4; --accent-dim:#2b6b78; --amber:#D9A441;
  --fresh:#5FA871; --ageing:#D08A32; --old:#B8524B; --never:#5A6B7A;
  --mono:ui-monospace,"Cascadia Mono",Consolas,Menlo,monospace;
  --sans:"Trebuchet MS","Segoe UI",system-ui,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--mono);
     font-size:13px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

/* ---- top bar ---- */
.bar{position:sticky;top:0;z-index:30;display:flex;align-items:center;height:46px;
     padding:0 14px;background:rgba(14,25,38,.96);border-bottom:1px solid var(--line)}
.logo{font-size:12px;font-weight:700;letter-spacing:.24em;color:var(--accent);
      padding-right:14px;margin-right:14px;border-right:1px solid var(--line);
      height:100%;display:flex;align-items:center;text-decoration:none}
.bar nav{display:flex;height:100%;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.bar nav::-webkit-scrollbar{display:none}
.bar nav a{display:flex;align-items:center;padding:0 13px;color:var(--dim);
           font-size:11px;letter-spacing:.11em;text-transform:uppercase;white-space:nowrap;
           border-bottom:2px solid transparent;text-decoration:none}
.bar nav a:hover{color:var(--ink);background:rgba(79,179,196,.08);text-decoration:none}
.bar nav a.on{color:var(--accent);border-bottom-color:var(--accent)}
.logout{display:flex;align-items:center;gap:9px;margin-left:12px}
.who{color:var(--dim);font-size:11px;white-space:nowrap}

/* ---- search ---- */
.search{position:relative;margin:0 12px;flex:0 1 300px;min-width:140px}
.search input{width:100%;background:var(--bg);border:1px solid var(--line);color:var(--ink);
              font:inherit;font-size:12px;padding:6px 10px 6px 26px;outline:none}
.search input:focus{border-color:var(--accent)}
.search .mag{position:absolute;left:8px;top:50%;transform:translateY(-50%);color:var(--dim);
             pointer-events:none}
.results{position:absolute;top:calc(100% + 5px);left:0;right:0;max-height:340px;
         overflow-y:auto;background:#0b1723;border:1px solid var(--accent);
         box-shadow:0 14px 40px rgba(0,0,0,.6);z-index:40}
.results:empty{display:none}
.rgroup{padding:6px 10px 4px;font-size:9px;letter-spacing:.16em;text-transform:uppercase;
        color:var(--dimmer);background:var(--raised);border-bottom:1px solid var(--line-soft)}
.ritem{display:flex;justify-content:space-between;gap:10px;padding:7px 10px;
       border-bottom:1px solid var(--line-soft);font-size:12px;text-decoration:none;color:var(--ink)}
.ritem:hover{background:rgba(79,179,196,.14);text-decoration:none}
.ritem .rid{color:var(--dim);font-size:10.5px}
.rempty{padding:12px 10px;color:var(--dim);font-size:11.5px}

/* ---- layout ---- */
.body{padding:16px;display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:16px;
      max-width:1400px;margin:0 auto}
.wide{padding:16px;max-width:1400px;margin:0 auto}
.narrow{max-width:380px;margin:12vh auto;padding:0 16px}
@media(max-width:960px){.body{grid-template-columns:1fr}}

/* ---- cards ---- */
.card{background:var(--surface);border:1px solid var(--line);margin-bottom:14px;position:relative}
.card::before,.card::after{content:"";position:absolute;width:9px;height:9px;
  border-color:var(--accent);opacity:0;transition:opacity .22s;pointer-events:none}
.card::before{top:-1px;left:-1px;border-top:2px solid;border-left:2px solid}
.card::after{bottom:-1px;right:-1px;border-bottom:2px solid;border-right:2px solid}
.card:hover::before,.card:hover::after{opacity:.85}
.card>header{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:8px 12px;border-bottom:1px solid var(--line);background:var(--raised);
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);font-weight:700}
.card>header b{color:var(--accent);letter-spacing:.08em}
.pad{padding:12px}

/* ---- tables ---- */
.scroller{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
th{text-align:left;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
   padding:8px 12px;color:var(--dim);background:var(--raised);border-bottom:1px solid var(--line);
   white-space:nowrap}
td{padding:8px 12px;font-size:12px;border-bottom:1px solid var(--line-soft)}
tbody tr:hover td{background:rgba(79,179,196,.07)}
.r{text-align:right}
.coord{color:var(--accent)}
.muted{color:var(--dim)}
.unknown{color:var(--never);font-style:italic}

/* ---- pills: staleness owns red and green ---- */
.pill{display:inline-block;padding:2px 7px;font-size:9.5px;font-weight:700;
      letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;border:1px solid currentColor}
.s-fresh{color:var(--fresh)} .s-ageing{color:var(--ageing)}
.s-old{color:var(--old)}     .s-never{color:var(--never)}
.p-acc{color:var(--accent)} .p-amber{color:var(--amber)} .p-dim{color:var(--dim)}

/* ---- target header ---- */
.target{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap}
.target h1{margin:0;font-size:19px;font-weight:700;font-family:var(--sans)}
.target .id{color:var(--dim);font-size:11.5px}
.meterlabel{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;
            font-size:10.5px;color:var(--dim);margin:10px 0 4px}
.meter{height:3px;background:var(--raised);overflow:hidden}
.meter i{display:block;height:100%;background:linear-gradient(90deg,var(--accent-dim),var(--accent))}

/* ---- key/value ---- */
dl.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;margin:0;font-size:12px}
dl.kv dt{color:var(--dim)}
dl.kv dd{margin:0;text-align:right}
.link{display:block;padding:7px 0;border-bottom:1px solid var(--line-soft);font-size:11.5px}
.link:last-child{border-bottom:0}
.link em{display:block;font-style:normal;color:var(--dim);margin-top:2px}

/* ---- colony plan: surface above, orbit below, same width ---- */
.plangroup{margin-bottom:14px;overflow-x:auto;padding-bottom:2px}
.plangroup h4{margin:0 0 7px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
              color:var(--dim);display:flex;justify-content:space-between;gap:14px}
/* Rows come from the game's grid; the width is whatever the game used, so no
   column count is hard-coded here. */
.planrow{display:flex;gap:3px;margin-bottom:3px}
.planrow:last-child{margin-bottom:0}
.f{width:44px;height:44px;border:1px solid var(--line);background:var(--raised);
   display:flex;align-items:center;justify-content:center;position:relative;font-size:8px;
   color:var(--dim)}
.f:hover{border-color:var(--accent);z-index:3}
.f img{width:32px;height:32px;image-rendering:pixelated}
.f .lvl{position:absolute;top:1px;right:3px;font-size:8px;color:var(--accent);font-weight:700}
.f.empty{border-style:dashed;border-color:#1a2c3e;background:transparent;color:var(--dimmer)}
.f.space{background:#0c1a28;border-color:#1c3a52}
.f .tip{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);
        background:#08121c;border:1px solid var(--accent);padding:5px 9px;font-size:10.5px;
        white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .13s;z-index:6;
        color:var(--ink)}
.f:hover .tip{opacity:1}

/* ---- forms & buttons ---- */
.btn{font:inherit;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;
     padding:7px 13px;cursor:pointer;border:1px solid var(--line);background:var(--raised);
     color:var(--dim)}
.btn:hover{color:var(--accent);border-color:var(--accent)}
.btn.primary{background:transparent;border-color:var(--accent);color:var(--accent)}
.btn.small{padding:4px 9px;font-size:9.5px}
input[type=text],input[type=password],input[type=search],select{
  font:inherit;font-size:12px;background:var(--bg);color:var(--ink);
  border:1px solid var(--line);padding:7px 9px;width:100%}
input:focus,select:focus{outline:none;border-color:var(--accent)}
label{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
      color:var(--dim);margin-bottom:5px}
.field{margin-bottom:12px}

.note{font-size:11px;color:var(--dim);padding:10px 12px;border-left:2px solid var(--amber);
      background:rgba(217,164,65,.05);margin:0}
.note b{color:var(--amber)}
.note.acc{border-left-color:var(--accent);background:rgba(79,179,196,.05)}
.note.acc b{color:var(--accent)}
.error{border-left-color:var(--old);background:rgba(184,82,75,.07);color:var(--ink)}

@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}