/* PHOSPHOR shell for blog.v1tz.me — ported from 终端博客三版/2-phosphor-v2.
   Everything is scoped under #stage so it never fights global.css on the static pages. */

html[data-phos="amber"]{
  --bg:#0d0802; --fg:#e8a13a; --bright:#ffc46a; --dim:#a1752f; --faint:#4d3814;
  --glowc:rgba(255,177,48,.28); --ghost:#98917f; --bandc:rgba(255,205,130,.05);
  --codebg:rgba(255,177,48,.06); --sel:#e8a13a;
}
html[data-phos="green"]{
  --bg:#040a05; --fg:#45d96a; --bright:#93f7ae; --dim:#2f9c50; --faint:#174a26;
  --glowc:rgba(80,240,120,.20); --ghost:#8b958c; --bandc:rgba(220,255,230,.05);
  --codebg:rgba(90,240,130,.06); --sel:#45d96a;
}
html[data-phos="paper"]{
  --bg:#0b0b0d; --fg:#cfcabd; --bright:#f4f1e8; --dim:#8d897f; --faint:#3c3a36;
  --glowc:rgba(240,236,220,.16); --ghost:#6f6d68; --bandc:rgba(255,255,255,.04);
  --codebg:rgba(255,255,255,.05); --sel:#cfcabd;
}
/* secondary tokens: single-hue phosphors reuse the base hue; tokyo gets real colours */
html{--tag:var(--dim); --date:var(--dim); --sbarbg:var(--fg); --sbarfg:var(--bg); --sbarline:transparent;
     --ps-u:var(--bright); --ps-h:var(--fg); --ps-p:var(--fg)}
html[data-phos="tokyo"]{
  --bg:#1a1b26; --fg:#c0caf5; --bright:#7aa2f7; --dim:#737aa2; --faint:#2f3449;
  --glowc:rgba(122,162,247,.10); --ghost:#565f89; --bandc:rgba(192,202,245,.03);
  --codebg:#1f2335; --sel:#33467c;
  --tag:#bb9af7; --date:#7dcfff; --sbarbg:#1f2335; --sbarfg:#a9b1d6; --sbarline:#292e42;
  --ps-u:#9ece6a; --ps-h:#bb9af7; --ps-p:#7aa2f7;
}

/* ---- shell on / off ---- */
#stage{display:none}
html.shell-on body{overflow:hidden;background-image:none;background:#000}
html.shell-on body::before{display:none}
html.shell-on body>header.site,html.shell-on body>main,html.shell-on body>footer.site{display:none}
html.shell-on #stage{display:flex}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

#stage{position:fixed;inset:0;z-index:50;flex-direction:column;background:var(--bg);
  font-family:'IBM Plex Mono','Sarasa Mono SC','Noto Sans Mono CJK SC','Noto Sans SC','PingFang SC','Hiragino Sans GB','Microsoft YaHei',ui-monospace,Menlo,monospace;
  line-height:1.52;-webkit-font-smoothing:antialiased}
#stage *{box-sizing:border-box;margin:0;padding:0}
#stage.off #sh-screen{animation:sh-crtOff .72s cubic-bezier(.25,.6,.3,1) forwards;transform-origin:50% 50%}
#stage.off #sh-bar{opacity:0;transition:opacity .3s}

#sh-screen{flex:1;min-height:0;display:flex;flex-direction:column;padding:14px 20px 4px;
  color:var(--fg);text-shadow:0 0 6px var(--glowc);font-size:clamp(12.5px,.5vw + 10px,15px)}
#sh-out{flex:1;overflow-y:auto;padding-bottom:12px;scrollbar-width:thin;scrollbar-color:var(--faint) transparent;overscroll-behavior:contain}
#sh-out::-webkit-scrollbar{width:8px}
#sh-out::-webkit-scrollbar-track{background:transparent}
#sh-out::-webkit-scrollbar-thumb{background:var(--faint)}

#stage .line{white-space:pre-wrap;word-break:break-word}
#stage .dim{color:var(--dim)} #stage .bright{color:var(--bright);font-weight:600}
#stage .faint{color:var(--faint)}
#stage .chip{background:var(--fg);color:var(--bg);padding:0 7px;font-weight:600;text-shadow:none}
#stage .cl{cursor:pointer;text-decoration:underline dotted var(--dim);text-underline-offset:3px;color:inherit}
#stage .cl:hover{background:var(--fg);color:var(--bg);text-shadow:none;text-decoration:none}
#stage .hit{background:var(--fg);color:var(--bg);text-shadow:none}
#stage .cols{display:flex;flex-wrap:wrap;gap:2px 4ch}
#stage .d{color:var(--date)} #stage .ttl{color:var(--dim)} #stage .tag{color:var(--tag)} #stage .kind{color:var(--tag)}
#stage ::selection{background:var(--sel);color:var(--bg);text-shadow:none}
#stage a{color:var(--bright)}

/* ---- the prompt ---- */
#sh-pline{flex:none;white-space:pre-wrap;word-break:break-all;padding:4px 0 10px}
#sh-pline .u{color:var(--ps-u);font-weight:600}
#sh-pline .h{color:var(--ps-h);font-weight:600}
#sh-pline .p{color:var(--ps-p)}
#sh-pline .at,#sh-pline .d{color:var(--dim)}
#sh-pline.blur #sh-cur{animation:none;background:transparent;border:1px solid var(--dim);color:var(--fg)}
#sh-cur{display:inline-block;min-width:1ch;background:var(--fg);color:var(--bg);
  animation:sh-blink 1.06s step-end infinite;text-shadow:none}
@keyframes sh-blink{0%,54%{background:var(--fg);color:var(--bg)}55%,100%{background:transparent;color:inherit}}

/* ---- tab-completion ghost ---- */
#sh-ghost{color:var(--ghost);opacity:0;white-space:pre;text-shadow:none}
#sh-ghost.on{animation:sh-gflick .16s steps(3,end) forwards}
@keyframes sh-gflick{0%{opacity:0}30%{opacity:.85}60%{opacity:.2}100%{opacity:.65}}

/* ---- status bar (tmux style, inverse video) ---- */
#sh-bar{flex:none;display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:4px 12px;background:var(--sbarbg);color:var(--sbarfg);font-weight:500;border-top:1px solid var(--sbarline);
  font-size:12.5px;letter-spacing:.3px;user-select:none;text-shadow:none}
#sh-bar .sep{opacity:.45;padding:0 5px}
#stage .sbtn{background:none;border:none;font:inherit;color:inherit;cursor:pointer;padding:0;
  text-decoration:underline dotted currentColor;text-underline-offset:3px}
#stage .sbtn:focus-visible{outline:1px solid currentColor;outline-offset:2px}
#sh-bar-m{opacity:.75;cursor:pointer}
#sh-keys{display:none;gap:6px}
#sh-keys .sbtn{border:1px solid currentColor;padding:0 8px;text-decoration:none;opacity:.85}

/* ---- CRT overlay ---- */
#sh-fx{position:fixed;inset:0;pointer-events:none;z-index:60}
#sh-fx[hidden]{display:none}
#sh-fx .scan{position:absolute;inset:0;opacity:.75;
  background:repeating-linear-gradient(to bottom,rgba(0,0,0,.26) 0 1px,transparent 1px 3px)}
#sh-fx .vig{position:absolute;inset:0;
  background:radial-gradient(120% 95% at 50% 42%,transparent 58%,rgba(0,0,0,.44) 100%)}
#sh-fx .band{position:absolute;left:0;right:0;height:150px;top:-170px;
  background:linear-gradient(to bottom,transparent,var(--bandc),transparent);
  animation:sh-band 7.5s linear infinite}
@keyframes sh-band{to{transform:translateY(125vh)}}
@media (prefers-reduced-motion:reduce){#sh-fx .band{display:none}}

@keyframes sh-crtOff{
  0%{transform:scale(1,1);filter:brightness(1)}
  55%{transform:scale(1,.012);filter:brightness(2.6)}
  78%{transform:scale(1,.012);filter:brightness(3.4)}
  100%{transform:scale(.35,.004);opacity:0;filter:brightness(5)}
}
#sh-halt{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:20px;
  background:#000;color:#5a5147;font-size:14px;letter-spacing:1px;z-index:70;
  animation:sh-haltblink 1.8s step-end infinite;cursor:pointer}
#sh-halt[hidden]{display:none}
@keyframes sh-haltblink{0%,60%{opacity:1}61%,100%{opacity:.35}}

/* ---- rendered markdown (terminal-flavored, like glow(1)) ---- */
#stage .md{max-width:min(100%,76ch);margin:2px 0 8px;text-shadow:none}
#stage .md[lang="zh-CN"]{max-width:min(100%,46em);line-height:1.78}
#stage .pmeta{color:var(--dim);margin:2px 0 0;white-space:pre-wrap}
#stage .pmeta b{color:var(--fg);font-weight:400}
#stage .md .mh1{color:var(--bright);font-weight:700;font-size:1.28em;margin:12px 0 0;
  border-bottom:1px solid var(--faint);padding-bottom:6px;line-height:1.4}
#stage .md .desc{color:var(--dim);margin:8px 0 4px;padding-left:12px;border-left:2px solid var(--faint)}
#stage .md .mh2{color:var(--bright);font-weight:700;margin:16px 0 2px}
#stage .md .mh3{color:var(--bright);font-weight:600;margin:12px 0 2px}
#stage .md .mh4{color:var(--fg);font-weight:600;margin:8px 0 2px}
#stage .md p{margin:7px 0}
#stage .md .cb{background:var(--codebg);border-left:2px solid var(--dim);padding:8px 14px;
  margin:9px 0;white-space:pre;overflow-x:auto}
#stage .md .cb .lang{color:var(--dim);font-size:.85em;display:block;margin-bottom:4px}
#stage .md .ic{background:var(--codebg);color:var(--bright);padding:0 4px}
#stage .md .mi{display:flex;gap:11px;margin:2px 0}
#stage .md .mi.n2{margin-left:3ch}
#stage .md .mi .dot{color:var(--dim)} #stage .md .mi .num{color:var(--dim);min-width:2ch;text-align:right}
#stage .md .mq{border-left:2px solid var(--dim);padding:2px 0 2px 14px;margin:9px 0;color:var(--dim);font-style:italic}
#stage .md .mhr{border-top:1px dashed var(--faint);margin:12px 0}
#stage .md a{color:var(--bright);text-decoration:underline;text-underline-offset:3px}
#stage .md strong{color:var(--bright)}
#stage .md em{font-style:italic}
#stage .md .tw{overflow-x:auto;max-width:100%;margin:10px 0}
#stage .md table{border-collapse:collapse;font-size:.94em;min-width:100%;line-height:1.5}
#stage .md th{color:var(--bright);font-weight:600;text-align:left;border-bottom:1px solid var(--dim);padding:5px 14px 5px 0;white-space:nowrap}
#stage .md td{border-bottom:1px solid var(--faint);padding:5px 14px 5px 0;vertical-align:top}
#stage .md th.c,#stage .md td.c{text-align:center} #stage .md th.r,#stage .md td.r{text-align:right}
#stage .md .mimg{margin:14px 0;border:1px solid var(--faint);padding:6px;background:var(--codebg)}
#stage .md .mimg img{display:block;width:100%;height:auto}
#stage .md .mimg figcaption{color:var(--dim);font-size:.85em;margin-top:5px}
#stage .md .mimg figcaption::before{content:"img: "}
#stage .fhead{color:var(--dim);margin-top:6px}
#stage .ffoot{color:var(--faint);margin-bottom:8px}

/* ---- man page ---- */
#stage .man{white-space:pre-wrap;word-break:break-word}
#stage .man.h{color:var(--bright);font-weight:700;margin-top:8px}
#stage .man .k{color:var(--bright)}
#stage .man.end{display:inline-block;background:var(--fg);color:var(--bg);padding:0 7px;text-shadow:none;margin-top:8px}

#stage .fetch{display:grid;grid-template-columns:auto 1fr;gap:0 24px;margin:6px 0}
#stage .fetch .logo{white-space:pre;color:var(--bright);line-height:1.15}
#stage .fetch .kv{white-space:pre-wrap}
#stage .fetch .kv b{color:var(--bright)}

#sh-kbd{position:fixed;left:0;bottom:0;width:2px;height:2px;opacity:0;border:0;padding:0;
  background:transparent;color:transparent;caret-color:transparent;font-size:16px;z-index:-1}

@media (max-width:720px){
  #sh-screen{padding:10px 12px 2px}
  #sh-bar{font-size:11.5px;flex-wrap:wrap;gap:4px 10px}
  #sh-bar-m,#sh-bar .clk{display:none}
  #sh-keys{display:flex}
}
