/* ============================================================
   VONHOLTENCODES — LCARS design system
   Shared shell for every page. Development-oriented, text-forward.
   ============================================================ */

:root{
  /* canonical LCARS palette */
  --lc-orange:#ff9900;
  --lc-tan:#ffcc99;
  --lc-lilac:#cc99cc;
  --lc-blue:#9999ff;
  --lc-ice:#99ccff;
  --lc-red:#cc6666;
  --lc-gold:#ffcc66;
  --lc-green:#66cc99;

  --bg:#000;
  --panel:#0a0a0c;
  --ink:#ffcc99;
  --ink-dim:#9a8877;
  --rule:#1c1c22;

  --bar:2.15rem;         /* elbow bar thickness */
  --sidebar:190px;
  --gap:0.5rem;
  --radius:1.6rem;

  --mono:"IBM Plex Mono","SF Mono",ui-monospace,Menlo,Consolas,monospace;
  --disp:"Antonio","Oswald","Helvetica Neue Condensed","Arial Narrow",
         system-ui,sans-serif;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{scroll-behavior:smooth;}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--mono);
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  padding:var(--gap);
  min-height:100vh;
}

a{color:var(--lc-gold);text-decoration:none;}
a:hover,a:focus-visible{color:#fff;text-decoration:underline;}
:focus-visible{outline:2px solid var(--lc-ice);outline-offset:2px;}

/* ---------- LCARS frame -------------------------------------- */

.lcars{
  display:grid;
  grid-template-columns:var(--sidebar) 1fr;
  grid-template-rows:auto 1fr auto;
  gap:var(--gap);
  max-width:1500px;
  margin:0 auto;
  min-height:calc(100vh - 2*var(--gap));
}

/* top sweep: elbow + title bar */
.lcars-top{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:var(--sidebar) 1fr auto;
  gap:var(--gap);
  align-items:end;
}
.elbow-tl{
  height:5.2rem;
  background:var(--lc-orange);
  border-radius:var(--radius) 0 0 0;
  position:relative;
}
.elbow-tl::after{
  content:"";position:absolute;right:0;bottom:0;
  width:2.4rem;height:var(--bar);background:var(--lc-orange);
}
.topbar{
  height:var(--bar);
  background:var(--lc-lilac);
  border-radius:0 0 0 0;
  display:flex;align-items:center;justify-content:flex-end;
  padding:0 1rem;gap:1rem;
  color:#000;font-family:var(--disp);
  font-size:1.05rem;letter-spacing:.18em;text-transform:uppercase;
  font-weight:700;
  min-width:0;
}
.topbar .sep{width:.6rem;height:var(--bar);background:var(--bg);}
.topcap{
  height:var(--bar);width:5.5rem;background:var(--lc-gold);
  border-radius:0 var(--radius) 0 0;
}

/* left rail of stacked buttons */
.lcars-side{
  display:flex;flex-direction:column;gap:var(--gap);
}
.rail-btn{
  display:block;
  background:var(--lc-blue);
  color:#000;
  font-family:var(--disp);
  font-size:1rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:700;
  text-align:right;
  padding:.55rem .85rem .45rem;
  border-radius:0 0 0 0;
  border:none;
  cursor:pointer;
  line-height:1.15;
  transition:background .12s linear,color .12s linear;
  text-decoration:none;
}
.rail-btn:hover,.rail-btn:focus-visible{background:#fff;color:#000;text-decoration:none;}
.rail-btn.is-current{background:var(--lc-orange);}
.rail-btn.c-lilac{background:var(--lc-lilac);}
.rail-btn.c-tan{background:var(--lc-tan);}
.rail-btn.c-red{background:var(--lc-red);}
.rail-btn.c-gold{background:var(--lc-gold);}
.rail-btn.c-ice{background:var(--lc-ice);}
.rail-fill{
  flex:1 1 auto;min-height:2.5rem;
  background:var(--lc-orange);
  border-radius:0 0 0 var(--radius);
}
.rail-stub{height:1.1rem;background:var(--lc-tan);}

/* main content column */
.lcars-main{
  min-width:0;
  padding:.25rem .25rem .25rem .75rem;
  border-left:3px solid var(--rule);
}

/* bottom sweep */
.lcars-bottom{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:var(--sidebar) 1fr auto;
  gap:var(--gap);
  align-items:start;
}
.elbow-bl{
  height:3.4rem;background:var(--lc-orange);
  border-radius:0 0 0 var(--radius);position:relative;
}
.botbar{
  height:var(--bar);background:var(--lc-tan);
  display:flex;align-items:center;padding:0 1rem;gap:1rem;
  color:#000;font-family:var(--disp);font-size:.85rem;
  letter-spacing:.16em;text-transform:uppercase;font-weight:700;
}
.botcap{height:var(--bar);width:5.5rem;background:var(--lc-red);
  border-radius:0 0 var(--radius) 0;}

/* ---------- typography --------------------------------------- */

.wordmark{
  font-family:var(--disp);
  font-size:clamp(1.9rem,5.5vw,3.4rem);
  letter-spacing:.06em;
  line-height:.95;
  color:var(--lc-orange);
  text-transform:uppercase;
  margin:0 0 .2rem;
  font-weight:700;
}
.wordmark .dim{color:var(--lc-tan);}
.tagline{
  color:var(--ink-dim);font-size:.85rem;letter-spacing:.14em;
  text-transform:uppercase;margin:0 0 1.4rem;
}

h2.sect{
  font-family:var(--disp);
  font-size:1.5rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--lc-gold);
  margin:2.2rem 0 .9rem;
  display:flex;align-items:center;gap:.9rem;font-weight:700;
}
h2.sect::after{
  content:"";flex:1;height:3px;background:var(--rule);
}
h2.sect .idx{
  font-family:var(--mono);font-size:.8rem;color:var(--lc-lilac);
  letter-spacing:.1em;
}
.lede{color:var(--ink-dim);max-width:74ch;margin:0 0 1.2rem;font-size:.93rem;}

/* ---------- data panels -------------------------------------- */

.stat-row{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:var(--gap);margin-bottom:1.2rem;
}
.stat{
  background:var(--panel);border-left:5px solid var(--lc-orange);
  padding:.7rem .9rem;
}
.stat .k{
  display:block;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-dim);margin-bottom:.15rem;
}
.stat .v{
  font-family:var(--disp);font-size:1.85rem;line-height:1;color:var(--lc-gold);
  font-weight:700;
}
.stat.c-lilac{border-left-color:var(--lc-lilac);}
.stat.c-blue{border-left-color:var(--lc-blue);}
.stat.c-green{border-left-color:var(--lc-green);}

/* text-forward listing rows (the "textualized" catalogue) */
.rows{border-top:2px solid var(--rule);}
.row{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:.9rem;align-items:baseline;
  padding:.6rem .3rem;
  border-bottom:1px solid var(--rule);
  color:inherit;text-decoration:none;
}
.row:hover,.row:focus-visible{background:#12121a;text-decoration:none;}
.row .tag{
  font-family:var(--disp);font-size:.75rem;letter-spacing:.14em;
  text-transform:uppercase;color:#000;background:var(--lc-blue);
  padding:.1rem .5rem;border-radius:.6rem;white-space:nowrap;font-weight:700;
}
.row .tag.t-tool{background:var(--lc-gold);}
.row .tag.t-repo{background:var(--lc-lilac);}
.row .tag.t-game{background:var(--lc-green);}
.row .tag.t-ext{background:var(--lc-tan);}
.row .tag.t-priv{background:var(--lc-red);}
.row .nm{color:var(--lc-tan);font-weight:600;}
.row .ds{color:var(--ink-dim);font-size:.85rem;display:block;font-weight:400;}
.row .meta{color:var(--ink-dim);font-size:.78rem;white-space:nowrap;}

/* card grid where a grid genuinely helps */
.grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));
  gap:var(--gap);
}
.card{
  background:var(--panel);border-top:4px solid var(--lc-orange);
  padding:.85rem .95rem;color:inherit;text-decoration:none;display:block;
  transition:background .12s linear;
}
.card:hover,.card:focus-visible{background:#14141c;text-decoration:none;}
.card h3{
  font-family:var(--disp);font-size:1.12rem;letter-spacing:.1em;
  text-transform:uppercase;margin:0 0 .3rem;color:var(--lc-gold);font-weight:700;
}
.card p{margin:0;color:var(--ink-dim);font-size:.85rem;}
.card.c-lilac{border-top-color:var(--lc-lilac);}
.card.c-blue{border-top-color:var(--lc-blue);}
.card.c-green{border-top-color:var(--lc-green);}
.card.c-red{border-top-color:var(--lc-red);}

/* terminal-ish readout block */
.readout{
  background:var(--panel);border-left:5px solid var(--lc-lilac);
  padding:.8rem 1rem;font-size:.85rem;color:var(--ink-dim);
  overflow-x:auto;
}
.readout b{color:var(--lc-tan);font-weight:600;}

.notice{
  background:#16110a;border-left:5px solid var(--lc-red);
  padding:.7rem 1rem;font-size:.85rem;color:var(--lc-tan);margin:1rem 0;
}

/* ---------- responsive ---------------------------------------
   Long repo names, URLs and descriptions must never push the page
   sideways; nothing here may create horizontal scroll.
   -------------------------------------------------------------- */
.wordmark,.row .nm,.row .ds,.card h3,.card p,.readout,h2.sect{
  overflow-wrap:anywhere;
}

/* tablet / small laptop */
@media (max-width:900px){
  :root{--sidebar:132px;--radius:1.2rem;}
  .wordmark{font-size:clamp(1.7rem,6vw,2.4rem);}
  .rail-btn{font-size:.85rem;padding:.6rem .6rem .5rem;}
  .topbar{font-size:.85rem;letter-spacing:.1em;}
  .row{grid-template-columns:auto 1fr;}
  .row .meta{grid-column:2;padding-top:.15rem;}
}

/* ---------- phone ---------- */
@media (max-width:620px){
  :root{--sidebar:0px;--gap:.4rem;--radius:.9rem;}

  body{font-size:16px;padding:.4rem;}

  .lcars{grid-template-columns:1fr;gap:.45rem;}
  .lcars-top,.lcars-bottom{grid-template-columns:1fr auto;}
  .elbow-tl,.elbow-bl{display:none;}

  /* keep the LCARS bar, but let it shrink instead of overflowing */
  .topbar{
    height:auto;min-height:2.1rem;font-size:.72rem;letter-spacing:.08em;
    padding:.35rem .7rem;justify-content:space-between;gap:.5rem;
    border-radius:.9rem 0 0 0;
  }
  .topbar span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .topbar .sep{display:none;}
  .topcap,.botcap{width:2.6rem;border-radius:0 .9rem 0 0;}
  .botbar{
    height:auto;min-height:2.1rem;font-size:.66rem;letter-spacing:.06em;
    padding:.35rem .7rem;flex-wrap:wrap;gap:.3rem;
  }
  .botcap{border-radius:0 0 .9rem 0;}

  /* nav becomes a wrapping button bar with real tap targets */
  .lcars-side{flex-direction:row;flex-wrap:wrap;gap:.35rem;}
  .rail-btn{
    flex:1 1 auto;min-width:5.4rem;min-height:44px;
    display:flex;align-items:center;justify-content:center;
    text-align:center;border-radius:.7rem;
    font-size:.8rem;letter-spacing:.06em;padding:.4rem .5rem;
  }
  .rail-btn br{display:none;}      /* "Mission Control" on one line */
  .rail-fill,.rail-stub{display:none;}

  .lcars-main{border-left:none;padding:.2rem .1rem;}

  .tagline{font-size:.72rem;letter-spacing:.1em;margin-bottom:1rem;}
  .lede{font-size:.95rem;}
  h2.sect{font-size:1.2rem;margin:1.6rem 0 .7rem;gap:.6rem;}

  /* two stats per row reads better than four cramped ones */
  .stat-row{grid-template-columns:repeat(2,1fr);gap:.4rem;}
  .stat{padding:.55rem .6rem;}
  .stat .v{font-size:1.5rem;}
  .stat .k{font-size:.62rem;letter-spacing:.12em;}

  /* catalogue rows: tag above, generous tap height */
  .row{
    grid-template-columns:1fr;gap:.25rem;
    padding:.85rem .35rem;min-height:44px;
  }
  .row .tag{justify-self:start;font-size:.68rem;}
  .row .nm{font-size:.98rem;}
  .row .ds{font-size:.85rem;margin-top:.1rem;}
  .row .meta{grid-column:1;font-size:.72rem;}

  .grid{grid-template-columns:1fr;}
  .card{padding:.8rem .85rem;}
  .card h3{font-size:1.05rem;}

  .readout{font-size:.82rem;padding:.7rem .8rem;}
}

@media (max-width:380px){
  .rail-btn{min-width:4.6rem;font-size:.74rem;}
  .stat-row{grid-template-columns:1fr;}
  .wordmark{font-size:1.6rem;}
}


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