/* ═══════════════════════════════════════════
   Linux as a Confession — Main Stylesheet
   ═══════════════════════════════════════════ */

/* ── DESIGN TOKENS ── */
:root {
  --bg:        #080b0f;
  --bg2:       #0d1117;
  --bg3:       #13191f;
  --border:    #1c2330;
  --green:     #00e5a0;
  --green-dim: #009e6e;
  --amber:     #ffb547;
  --red:       #ff5f5f;
  --blue:      #58c4f8;
  --purple:    #c792ea;
  --text:      #c9d1d9;
  --text-dim:  #6a7280;
  --bright:    #e6edf3;
  --accent:    #00e5a0;
}

[data-theme="pink"] {
  --green:     #ff2a6d;
  --green-dim: #c5144b;
  --amber:     #05d9e8;
}

[data-theme="amber"] {
  --green:     #ffb547;
  --green-dim: #d98f24;
  --amber:     #00e5a0;
}

[data-theme="orange"] {
  --green:     #e95420;
  --green-dim: #c53c12;
  --amber:     #f6c342;
}

/* ── PROGRESS BAR ── */
.progress-container {
  position: fixed; top: 0; left: 0; width: 100%; height: 2px;
  background: transparent; z-index: 9999;
}
.progress-bar {
  height: 100%; width: 0%; background: var(--green);
  transition: width 0.1s ease-out;
}

/* ── THEME SWITCHER ── */
.theme-switcher {
  position: absolute; top: 28px; right: 28px;
  display: flex; gap: 8px; z-index: 10;
}
.theme-btn {
  width: 14px; height: 14px; border-radius: 50%;
  border: 1px solid var(--border); cursor: pointer;
  transition: transform 0.2s;
}
.theme-btn:hover { transform: scale(1.2); }
.theme-btn.active { border: 2px solid var(--bright); }
.theme-btn[data-theme="green"] { background: #00e5a0; }
.theme-btn[data-theme="pink"] { background: #ff2a6d; }
.theme-btn[data-theme="amber"] { background: #ffb547; }
.theme-btn[data-theme="orange"] { background: #e95420; }

/* ── TOOLTIPS ── */
.tooltip {
  border-bottom: 1px dashed var(--green-dim);
  cursor: help; position: relative; color: var(--bright);
}
.tooltip::after {
  content: attr(data-tooltip);
  position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%) translateY(4px);
  background: var(--bg3); border: 1px solid var(--border); border-left: 2px solid var(--green);
  padding: 6px 12px; border-radius: 4px; font-size: 11px; font-family: 'JetBrains Mono', monospace;
  color: var(--text); white-space: nowrap; font-weight: normal;
  opacity: 0; pointer-events: none; transition: all 0.2s ease; z-index: 100;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
.tooltip:hover::after {
  opacity: 1; transform: translateX(-50%) translateY(-4px);
}

/* ── FADE ANIMATIONS ── */
.fade-up {
  opacity: 0; transform: translateY(20px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.fade-up.visible {
  opacity: 1; transform: translateY(0);
}


/* ── RESET & BASE ── */
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  background:var(--bg);
  color:var(--text);
  font-family:'JetBrains Mono',monospace;
  font-size:14px;
  line-height:1.85;
  overflow-x:hidden;
}

/* subtle grid */
body::before{
  content:'';
  position:fixed; inset:0;
  background-image:
    linear-gradient(rgba(0,229,160,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,229,160,.025) 1px,transparent 1px);
  background-size:44px 44px;
  pointer-events:none; z-index:0;
}

/* ── LAYOUT ── */
.wrap{
  max-width:880px;
  margin:0 auto;
  padding:0 28px;
  position:relative; z-index:1;
}

/* ── HEADER ── */
header{ padding:88px 0 64px; border-bottom:1px solid var(--border); }

.chip{
  display:inline-block;
  font-size:10px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--green);
  background:rgba(0,229,160,.07);
  border:1px solid rgba(0,229,160,.22);
  padding:4px 14px; border-radius:2px;
  margin-bottom:28px;
}

h1{
  font-family:'Syne',sans-serif;
  font-size:clamp(2rem,5vw,3.4rem);
  font-weight:800;
  color:var(--bright);
  line-height:1.12;
  letter-spacing:-.025em;
  margin-bottom:22px;
}
h1 .hl{ color:var(--green); }

.subtitle{
  font-size:15px; color:var(--text-dim);
  max-width:580px; line-height:1.75;
  margin-bottom:36px;
}

.meta{
  display:flex; gap:28px; flex-wrap:wrap;
  font-size:11px; color:var(--text-dim);
}
.meta b{ color:var(--green); margin-right:4px; }

/* ── SYSTEM SNAPSHOT ── */
.snapshot{
  background:var(--bg2);
  border:1px solid var(--border);
  border-top:2px solid var(--green);
  padding:24px 28px;
  margin:48px 0 0;
  border-radius:0 0 4px 4px;
}
.snapshot-title{
  font-size:10px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--green); margin-bottom:16px;
}
.snap-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:12px;
}
.snap-item{ font-size:12px; line-height:1.6; }
.snap-item .k{ color:var(--text-dim); }
.snap-item .v{ color:var(--bright); }

/* ── TOC ── */
.toc{
  background:var(--bg2);
  border:1px solid var(--border);
  border-left:3px solid var(--green);
  padding:28px 32px;
  margin:48px 0;
  border-radius:0 4px 4px 0;
}
.toc-title{
  font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--green); margin-bottom:0; font-weight:700;
  cursor:pointer; display:flex; align-items:center; gap:8px;
  user-select:none;
}
.toc-title svg{
  width:14px; height:14px; fill:var(--green);
  transition:transform .25s;
}
.toc-title.collapsed svg{ transform:rotate(-90deg); }
.toc ol{
  padding-left:28px;
  max-height:500px; overflow:hidden;
  transition:max-height .35s ease, opacity .3s ease, margin .3s ease;
  opacity:1; margin-top:18px;
}
.toc ol.toc-hidden{
  max-height:0; opacity:0; margin-top:0;
}
.toc li{ margin:6px 0; }
.toc a{
  color:var(--text-dim); text-decoration:none;
  font-size:13px; transition:color .2s;
}
.toc a:hover{ color:var(--green); }
.toc .bonus{ color:var(--amber); }

/* ── INTRO ── */
.intro{
  font-size:15px; color:var(--text);
  line-height:1.9; padding:44px 0;
  border-bottom:1px solid var(--border);
}
.intro p+p{ margin-top:16px; }

/* ── FINDING ── */
.finding{
  padding:60px 0;
  border-bottom:1px solid var(--border);
}

/* ── TERMINAL LINE ANIMATIONS ── */
.term-body .ln,
.term-body .ou {
  opacity:0;
  transition:opacity .3s ease, clip-path .5s ease;
}
.term-body .line-show {
  opacity:1;
}

/* Typing cursor */
.type-cursor::after {
  content:'\2588';
  color:var(--green);
  animation:blink .6s step-end infinite;
  margin-left:1px;
  font-weight:400;
}

@keyframes valGlow {
  0%,100%{text-shadow:none}
  50%{text-shadow:0 0 14px rgba(0,229,160,.55)}
}
.val-glow{ animation:valGlow 1.4s ease-in-out; }

@media(prefers-reduced-motion:reduce){
  .term-body .ln,
  .term-body .ou {
    opacity:1 !important;
    clip-path:none !important;
    transition:none !important;
    animation:none !important;
  }
}

.finding-header{
  display:flex; align-items:flex-start;
  gap:22px; margin-bottom:30px;
}
.num{
  font-family:'JetBrains Mono',monospace;
  font-size:40px; font-weight:700;
  color:rgba(0,229,160,.15);
  line-height:1; flex-shrink:0;
  margin-top:2px; min-width:54px;
  letter-spacing:-.04em;
}
.num.bonus{ color:rgba(255,181,71,.20); }
.title-block h2{
  font-family:'Syne',sans-serif;
  font-size:1.5rem; font-weight:700;
  color:var(--bright); letter-spacing:-.02em;
  margin-bottom:6px;
}
.finding-path{
  font-size:11px; color:var(--green-dim);
  letter-spacing:.06em;
}

.finding p{
  font-size:14px; color:var(--text);
  line-height:1.88; margin-bottom:16px;
}
.finding strong{ color:var(--bright); font-weight:600; }
.finding em{ color:var(--amber); font-style:normal; }
.finding code{
  background:rgba(0,229,160,.07);
  color:var(--green);
  padding:1px 6px; border-radius:3px; font-size:12.5px;
}

/* ── SECTION LABELS ── */
.lbl{
  display:block; font-size:10px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--text-dim); margin-bottom:10px;
  margin-top:4px;
}
.lbl.problem{ color:var(--amber); }

/* ── INSIGHT BOX ── */
.box{
  border-left:3px solid var(--green);
  background:rgba(0,229,160,.04);
  border:1px solid rgba(0,229,160,.14);
  border-left:3px solid var(--green);
  padding:16px 20px; margin:20px 0;
  border-radius:0 4px 4px 0;
}
.box-lbl{
  font-size:10px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--green); margin-bottom:8px;
}
.box p{
  font-size:13px; color:var(--text);
  margin:0 !important; line-height:1.72;
}
.box.warn{
  background:rgba(255,181,71,.04);
  border:1px solid rgba(255,181,71,.14);
  border-left:3px solid var(--amber);
}
.box.warn .box-lbl{ color:var(--amber); }
.box.danger{
  background:rgba(255,95,95,.04);
  border:1px solid rgba(255,95,95,.14);
  border-left:3px solid var(--red);
}
.box.danger .box-lbl{ color:var(--red); }
.box.bonus-box{
  background:rgba(255,181,71,.04);
  border:1px solid rgba(255,181,71,.14);
  border-left:3px solid var(--amber);
}
.box.bonus-box .box-lbl{ color:var(--amber); }

/* ── TERMINAL ── */
.term{
  background:#050709;
  border:1px solid var(--border);
  border-radius:6px; overflow:hidden;
  margin:22px 0;
  box-shadow:0 10px 36px rgba(0,0,0,.45);
}
.term-bar{
  background:var(--bg3); padding:10px 16px;
  display:flex; align-items:center; gap:8px;
  border-bottom:1px solid var(--border);
  position:relative;
}

.copy-btn{
  margin-left:auto;
  background:none; border:1px solid var(--border);
  color:var(--text-dim); cursor:pointer;
  font-family:'JetBrains Mono',monospace;
  font-size:10px; letter-spacing:.06em;
  padding:3px 10px; border-radius:3px;
  transition:all .2s;
  display:flex; align-items:center; gap:5px;
}
.copy-btn:hover{ color:var(--green); border-color:var(--green); }
.copy-btn.copied{ color:var(--green); border-color:var(--green); }
.copy-btn svg{ width:12px; height:12px; fill:currentColor; }

.replay-btn, .skip-btn{
  background:none; border:none;
  color:var(--text-dim); cursor:pointer;
  padding:3px 6px; border-radius:3px;
  transition:all .2s;
  display:flex; align-items:center;
}
.term-bar .replay-btn {
  margin-left: auto;
}
.term-bar .replay-btn + .skip-btn {
  margin-left: 2px;
}
.term-bar .skip-btn + .copy-btn {
  margin-left: 8px; /* Override auto margin */
}
.replay-btn:hover, .skip-btn:hover { color:var(--green); transform:scale(1.1); }
.replay-btn svg, .skip-btn svg { width:16px; height:16px; fill:currentColor; }

.dot{ width:12px; height:12px; border-radius:50%; }
.dot.r{background:#ff5f56}
.dot.y{background:#ffbd2e}
.dot.g{background:#27c93f}
.term-ttl{
  font-size:11px; color:var(--text-dim);
  margin-left:8px; letter-spacing:.05em;
}
.term-body{
  padding:20px 24px; font-size:13px;
  line-height:1.72; overflow-x:auto;
}
.ln{ display:block; }
.ln+.ln{ margin-top:2px; }
.cmd-clickable{ cursor:pointer; position:relative; }
.cmd-clickable:hover .pr { color:var(--bright); text-shadow:0 0 8px rgba(0,229,160,.6); }
.cmd-clickable::before{ 
  content:'Copy'; position:absolute; right:0; top:50%; transform:translateY(-50%);
  font-size:10px; color:var(--green); opacity:0; transition:opacity .2s; pointer-events:none;
  background:var(--bg3); padding:0 6px; border-radius:3px;
}
.cmd-clickable:hover::before{ opacity:1; }
.cmd-clickable.just-copied::before{ content:'Copied!'; opacity:1; }
.pr{ color:var(--green); transition:all .2s;}
.cm{ color:var(--text-dim); }
.ou{ color:#8b949e; display:block; margin-top:2px; }
.hi{ color:var(--amber); }
.gr{ color:var(--green); }
.re{ color:var(--red); }
.bl{ color:var(--blue); }

/* ── TABLE ── */
.tbl{
  width:100%; border-collapse:collapse;
  margin:18px 0; font-size:13px;
  display:block; overflow-x:auto; -webkit-overflow-scrolling:touch;
}
.tbl th{
  text-align:left; padding:8px 12px;
  background:var(--bg3); color:var(--text-dim);
  font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  border-bottom:1px solid var(--border);
}
.tbl td{
  padding:10px 12px; border-bottom:1px solid rgba(28,35,48,.5);
  color:var(--text); vertical-align:top;
}
.tbl td:first-child{ color:var(--green); font-weight:600; }
.tbl tr:last-child td{ border-bottom:none; }

/* ── FOOTER ── */
footer{
  padding:64px 0 80px; text-align:center;
}
.foot-line{
  width:52px; height:2px;
  background:var(--green); opacity:.35;
  margin:0 auto 32px;
}
footer p{ font-size:12px; color:var(--text-dim); line-height:1.9; }
footer code{
  color:var(--green);
  background:rgba(0,229,160,.07);
  padding:1px 6px; border-radius:3px;
}

/* ── CREDIT CARD ── */
.credit-toggle{
  display:inline-flex; align-items:center; gap:6px;
  background:none; border:1px solid var(--border);
  color:var(--text-dim); cursor:pointer;
  font-family:'JetBrains Mono',monospace;
  font-size:11px; padding:5px 14px;
  border-radius:3px; margin-top:28px;
  transition:all .25s;
}
.credit-toggle:hover{ color:var(--green); border-color:var(--green); }
.credit-toggle svg{
  width:12px; height:12px; fill:currentColor;
  transition:transform .25s;
}
.credit-toggle.open svg{ transform:rotate(180deg); }

.credit-card{
  display:flex; align-items:center; gap:20px;
  margin:20px auto 0;
  max-width:520px;
  text-align:left;
  justify-content:center;
  max-height:0; overflow:hidden;
  opacity:0;
  transition:max-height .35s ease, opacity .3s ease, margin .3s ease;
}
.credit-card.visible{
  max-height:200px;
  opacity:1;
}
.credit-avatar{
  width:52px; height:52px; border-radius:50%;
  border:2px solid rgba(0,229,160,.3);
  flex-shrink:0;
  object-fit:cover;
}
.credit-info{ flex:1; }
.credit-name{
  font-family:'Syne',sans-serif;
  font-size:16px; font-weight:700;
  color:var(--bright);
  margin-bottom:4px;
}
.credit-role{
  font-size:11px; color:var(--text-dim);
  margin-bottom:10px;
}
.credit-socials{
  display:flex; gap:16px; flex-wrap:wrap;
}
.credit-socials a{
  font-size:11px; color:var(--text-dim);
  text-decoration:none;
  transition:color .2s;
  display:flex; align-items:center; gap:5px;
}
.credit-socials a:hover{ color:var(--green); }
.credit-socials svg{
  width:14px; height:14px;
  fill:currentColor; flex-shrink:0;
}

/* ── SIDE NAV (desktop: left, tablet/mobile: top) ── */
.side-nav{
  position:fixed;
  left:28px;
  top:50%;
  transform:translateY(-50%);
  z-index:100;
  display:flex;
  flex-direction:column;
  gap:2px;
  opacity:0;
  transition:opacity .3s ease;
  pointer-events:none;
  font-size:11px;
  max-height:80vh; overflow-y:auto;
}
.side-nav.visible{
  opacity:1; pointer-events:auto;
}
.side-nav-title {
  font-size:9px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--text-dim); margin-bottom:12px;
}
.nav-dir {
  color:var(--bright); font-weight:600; margin-top:8px;
  display:flex; align-items:center; gap:6px;
}
.nav-dir svg { width:12px; height:12px; fill:var(--green); }
.side-nav a {
  display:block; padding:4px 0 4px 20px; color:var(--text-dim);
  text-decoration:none; transition:all .2s; position:relative;
}
.side-nav a::before {
  content:''; position:absolute; left:6px; top:0; bottom:0; width:1px; background:var(--border);
}
.side-nav a::after {
  content:''; position:absolute; left:6px; top:50%; width:8px; height:1px; background:var(--border);
}
.side-nav a:hover {
  color:var(--green);
}
.side-nav a.active {
  color:var(--green); font-weight:700;
}
.side-nav a.active::after { background:var(--green); }

.nav-hamburger { display: none; }


/* cursor */
.cur::after{
  content:'█'; color:var(--green);
  animation:blink 1s step-end infinite;
}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}

/* ═══════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   ═══════════════════════════════════════════ */

@media(max-width:1100px){
    .nav-hamburger {
      display: flex; position: fixed; bottom: 24px; right: 24px; z-index: 1000;
      width: 48px; height: 48px; border-radius: 50%;
      background: var(--green); color: var(--bg); border: none;
      align-items: center; justify-content: center; cursor: pointer;
      box-shadow: 0 4px 16px rgba(0,0,0,0.4);
      transition: transform 0.2s;
    }
    .nav-hamburger:active { transform: scale(0.9); }
    .nav-hamburger svg { width: 24px; height: 24px; fill: currentColor; }

    .side-nav {
      top: 0; bottom: 0; left: 0; right: auto; width: 260px;
      transform: translateX(-100%);
      flex-direction: column; justify-content: flex-start; gap: 2px;
      padding: 40px 20px; border-radius: 0; border: none; border-right: 1px solid var(--border);
      max-height: 100vh; z-index: 999;
      background: var(--bg2);
      overflow-y: auto; overflow-x: hidden;
      opacity: 1 !important; pointer-events: auto; /* Handle visibility strictly by transform */
      transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
      box-shadow: 10px 0 30px rgba(0,0,0,0.5);
    }
    
    .side-nav.mobile-open {
      transform: translateX(0);
    }
    
    /* Restore the file tree visual styles that we hid in the previous mobile override */
    .side-nav-title { display: block; }
    .nav-dir { display: flex; margin-top: 12px; color: var(--bright); }
    .nav-dir svg { display: block; }
    .side-nav a { display: block; padding: 4px 0 4px 20px; white-space: normal; }
    .side-nav a::before, .side-nav a::after { display: block; }
}

@media(max-width:600px){
  .wrap{padding:0 16px;}
  header{padding:60px 0 40px;}
  h1{font-size:clamp(1.7rem,6vw,2.4rem);}
  .finding-header{flex-direction:column;gap:8px;}
  .num{font-size:30px;}
  .term{margin:16px 0;border-radius:6px;}
  .term-bar{padding:8px 14px;gap:6px;}
  .dot{width:10px;height:10px;}
  .term-ttl{font-size:10px;}
  .copy-btn{font-size:9px;padding:2px 8px;}
  .term-body{font-size:11px;padding:16px 18px;line-height:1.65;}
  .snap-grid{grid-template-columns:1fr;}
  .snapshot{padding:20px;}
  .toc{padding:20px 24px;}
  .finding{padding:40px 0;}
  .box{padding:14px 16px;}
  .tbl th,.tbl td{padding:6px 8px;font-size:11px;}
}

@media(max-width:380px){
  body{font-size:13px;}
  .wrap{padding:0 12px;}
  header{padding:40px 0 32px;}
  h1{font-size:1.5rem;margin-bottom:16px;}
  .subtitle{font-size:13px;margin-bottom:24px;}
  .chip{font-size:9px;padding:4px 10px;margin-bottom:20px;}
  .meta{gap:12px;font-size:10px;}
  .num{font-size:24px;min-width:36px;}
  .title-block h2{font-size:1.25rem;}
  .snap-grid{grid-template-columns:1fr;}
  .snapshot{padding:16px;}
  .toc{padding:16px;}
  .finding{padding:30px 0;}
  .box{padding:12px 14px;}
  .box p{font-size:12px;}
  .term-body{font-size:11px;padding:10px 12px;}
  .term-bar{padding:8px 12px;}
  .tbl th,.tbl td{padding:8px;font-size:11px;}
  footer{padding:40px 0 50px;}
  .cur::after{content:'';} /* Simplify blink on ultra-small screens */
}