/* ============================================================
 *  swapnilkhedekar.in — a running shell
 *  phosphor-green CRT, tmux chrome, zero dependencies
 * ============================================================ */

:root {
  --bg: #050807;
  --term: #0a100c;
  --panel: #0c1410;
  --line: #16241b;
  --fg: #c7e2cd;
  --dim: #628a6f;
  --dimmer: #40584a;
  --green: #3ef58b;
  --green-deep: #0e3b22;
  --amber: #ffbe5c;
  --cyan: #5fd7d7;
  --red: #ff6b5e;
  --magenta: #c792ea;
  --ink: #03130a;
  --glow-g: 0 0 9px rgba(62, 245, 139, 0.45);
  --glow-a: 0 0 9px rgba(255, 190, 92, 0.4);
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

html {
  -webkit-text-size-adjust: 100%;   /* no mobile font boosting — it inflates the
                                       banner past the viewport and zooms the page */
  text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.55;
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: minmax(0, 1fr);  /* pin the column to the viewport —
                                             an auto track blows out on mobile */
  height: 100dvh;
  overflow: hidden;
}

::selection { background: var(--green); color: var(--ink); text-shadow: none; }

/* ---------------- title bar ---------------- */

.titlebar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 12px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  user-select: none;
  z-index: 12;
}
.lights { display: flex; gap: 7px; }
.lights i {
  width: 11px; height: 11px; border-radius: 50%;
  background: #2a3a30;
}
.lights i.r { background: #b3453e; }
.lights i.y { background: #b3893e; }
.lights i.g { background: #3e9c62; }
.titlebar .title {
  flex: 1;
  text-align: center;
  color: var(--dim);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.led {
  width: 8px; height: 8px; border-radius: 50%;
  background: #1c3526;
  transition: background 0.12s, box-shadow 0.12s;
}
.led.on { background: var(--green); box-shadow: var(--glow-g); }

/* ---------------- screen ---------------- */

.screen {
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
  background:
    radial-gradient(120% 90% at 50% 0%, #0c1510 0%, var(--term) 45%, #070c09 100%);
  scrollbar-width: thin;
  scrollbar-color: var(--green-deep) transparent;
  animation: poweron 0.55s ease-out both;
  transform-origin: 50% 50%;
}
.screen::-webkit-scrollbar { width: 8px; }
.screen::-webkit-scrollbar-thumb { background: var(--green-deep); border-radius: 4px; }

@keyframes poweron {
  0%   { transform: scaleY(0.004) scaleX(0.6); filter: brightness(7); }
  50%  { transform: scaleY(0.004) scaleX(1);   filter: brightness(7); }
  72%  { transform: scaleY(1)     scaleX(1);   filter: brightness(1.6); }
  100% { transform: none; filter: brightness(1); }
}

.inner {
  max-width: 1020px;
  margin: 0 auto;
  padding: 22px clamp(14px, 4vw, 52px) 110px;
}

/* ---------------- crt overlays ---------------- */

.crt {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10;
}
.crt::before {                      /* scanlines */
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.16) 0px,
    rgba(0, 0, 0, 0.16) 1px,
    transparent 1px,
    transparent 3px
  );
}
.crt::after {                       /* vignette */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 58%, rgba(0, 0, 0, 0.42) 100%);
}
.scanband {                         /* slow CRT refresh band */
  position: fixed;
  left: 0;
  right: 0;
  top: -20%;
  height: 18vh;
  pointer-events: none;
  z-index: 11;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(120, 255, 170, 0.022) 50%,
    transparent
  );
  animation: sweep 9s linear infinite;
}
@keyframes sweep {
  from { transform: translateY(-25vh); }
  to   { transform: translateY(130vh); }
}

/* ---------------- text roles ---------------- */

.g  { color: var(--green); text-shadow: var(--glow-g); }
.a  { color: var(--amber); text-shadow: var(--glow-a); }
.c  { color: var(--cyan); }
.r  { color: var(--red); text-shadow: 0 0 8px rgba(255, 107, 94, 0.35); }
.m  { color: var(--magenta); }
.d  { color: var(--dim); }
.dd { color: var(--dimmer); }
.fg { color: var(--fg); }
b.fg, .strong { color: #eafbef; font-weight: 600; }

.line { white-space: pre-wrap; overflow-wrap: break-word; min-height: 1.55em; }
.line.gap { min-height: 0.8em; }

pre.block {
  white-space: pre;
  overflow-x: auto;
  padding: 2px 0;
  scrollbar-width: thin;
  scrollbar-color: var(--green-deep) transparent;
}

pre.banner, pre.art {
  /* IBM Plex Mono (webfont subset) lacks block glyphs — go straight to
     system monos that tile U+2580–259F seamlessly */
  font-family: Menlo, Consolas, "DejaVu Sans Mono", "Liberation Mono", monospace;
  color: var(--green);
  text-shadow: 0 0 26px rgba(62, 245, 139, 0.55);
  font-size: clamp(6px, 2.45vw, 15px);
  line-height: 1.0;
  letter-spacing: -0.045em;   /* overlap block glyphs to hide seam artifacts */
  overflow: visible;
}

/* prompt pieces */
.p-user { color: var(--green); text-shadow: var(--glow-g); font-weight: 500; }
.p-at   { color: var(--dim); }
.p-path { color: var(--cyan); }
.p-sym  { color: var(--fg); }

/* ---------------- cursor & prompt line ---------------- */

.cursor {
  display: inline-block;
  width: 0.58em;
  height: 1.12em;
  margin-left: 1px;
  background: var(--green);
  box-shadow: var(--glow-g);
  vertical-align: -0.18em;
  animation: blink 1.15s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.promptline { white-space: pre-wrap; overflow-wrap: break-word; }
.promptline[hidden] { display: none; }
.ghost { color: var(--dimmer); font-style: italic; }

/* ---------------- interactive bits ---------------- */

button.x, a.x {
  font: inherit;
  background: none;
  border: 0;
  padding: 0 1px;
  color: var(--green);
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  cursor: pointer;
}
a.ext { color: var(--cyan); text-decoration: underline dotted; text-underline-offset: 3px; }
button.x:hover, a.x:hover { background: var(--green); color: var(--ink); text-shadow: none; }
a.ext:hover { background: var(--cyan); color: var(--ink); text-shadow: none; }
button.x:focus-visible, a:focus-visible, .win:focus-visible {
  outline: 1px dashed var(--green);
  outline-offset: 2px;
}

.helpname { display: inline-block; min-width: 10ch; }

/* ---------------- skill meters ---------------- */

.meter { display: flex; align-items: baseline; gap: 0; flex-wrap: wrap; }
.meter .mname { display: inline-block; min-width: 18ch; }
.meter .brk { color: var(--dimmer); }
.track {
  display: inline-block;
  width: min(200px, 38vw);
  height: 0.78em;
  margin: 0 2px;
  vertical-align: -0.08em;
  position: relative;
}
.track i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: repeating-linear-gradient(
    90deg,
    var(--green) 0 4px,
    transparent 4px 7px
  );
  box-shadow: 0 0 7px rgba(62, 245, 139, 0.35);
  transition: width 1s cubic-bezier(0.22, 1, 0.36, 1);
}
.track.amber i {
  background: repeating-linear-gradient(
    90deg,
    var(--amber) 0 4px,
    transparent 4px 7px
  );
  box-shadow: 0 0 7px rgba(255, 190, 92, 0.35);
}
.track.go i { width: var(--w); }
.mtag { color: var(--dimmer); margin-left: 8px; }

/* neofetch layout */
.fetch { display: flex; gap: 26px; flex-wrap: wrap; align-items: flex-start; padding: 4px 0; }
.fetch .art { font-size: 14px; }
.fetch .fetchinfo { line-height: 1.5; }

/* rm -rf progress bar */
.wipe {
  display: inline-block;
  width: min(240px, 50vw);
  height: 0.75em;
  border: 1px solid var(--red);
  vertical-align: -0.08em;
  position: relative;
}
.wipe i {
  position: absolute; inset: 1px auto 1px 1px; width: 0;
  background: var(--red);
  transition: width 1.1s linear;
}
.wipe.go i { width: calc(100% - 2px); }

/* ---------------- tmux status bar ---------------- */

.tmux {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: var(--panel);
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  user-select: none;
  z-index: 12;
  min-height: 32px;
}
.sess {
  display: flex;
  align-items: center;
  padding: 0 12px;
  background: var(--green);
  color: var(--ink);
  font-weight: 600;
  letter-spacing: 0.03em;
  flex-shrink: 0;
}
.wins {
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  scrollbar-width: none;
  flex: 1;
  min-width: 0;   /* let the flex track shrink — else it forces page-wide overflow on mobile */
}
.wins::-webkit-scrollbar { display: none; }
.win {
  font: inherit;
  background: none;
  border: 0;
  color: var(--dim);
  padding: 0 10px;
  cursor: pointer;
  white-space: nowrap;
}
.win:hover { color: var(--green); }
.win.active { background: var(--green-deep); color: var(--green); }
.win .n { color: var(--dimmer); }
.win.active .n, .win:hover .n { color: inherit; }
.tmux .right {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 12px;
  color: var(--dim);
  white-space: nowrap;
  flex-shrink: 0;
}
.tmux .right .up::before { content: "↑ "; color: var(--green); }

/* ---------------- skip hint / hidden input ---------------- */

.skip {
  position: fixed;
  top: 42px;
  right: 16px;
  z-index: 13;
  color: var(--dimmer);
  font-size: 12px;
  background: rgba(5, 8, 7, 0.7);
  padding: 3px 9px;
  border: 1px solid var(--line);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: 0.45; } }

#kbd {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 2px;
  height: 2px;
  opacity: 0.01;
  font-size: 16px;           /* prevents iOS zoom-on-focus */
  background: transparent;
  color: transparent;
  border: 0;
  outline: 0;
  caret-color: transparent;
  z-index: 1;
}

/* ---------------- noscript ---------------- */

.noscript {
  padding: 40px;
  max-width: 640px;
  margin: 0 auto;
  line-height: 1.8;
}
.noscript a { color: var(--cyan); }

/* ---------------- responsive ---------------- */

@media (max-width: 680px) {
  body { font-size: 13px; }
  .inner { padding-bottom: 130px; }
  .meter .mname { min-width: 13ch; }
  .tmux .right .up { display: none; }
  .titlebar .title { font-size: 11px; }
  .helpname { min-width: 9ch; }
}

/* ---------------- reduced motion ---------------- */

@media (prefers-reduced-motion: reduce) {
  .screen { animation: none; }
  .scanband { display: none; }
  .cursor { animation: none; }
  .skip { animation: none; }
  .track i, .wipe i { transition: none; }
}