/* DevOpsInsider interactive terminal: styles for the terminal, its helpers and the page effects.
   The terminal card stays dark in both themes (same as the original hero card). */

/* ---------- terminal card ---------- */
.tl-wrap{min-width:0}
.term.tl-ready .out{height:300px;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;cursor:text;scrollbar-width:thin;scrollbar-color:#2a3550 transparent;transition:height .45s ease,padding .45s ease}
.term.tl-focus{border-color:#38d6f566}
.term .bar{flex-wrap:wrap;row-gap:6px}
.tl-bar-r{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.tl-tog,.tl-hint{font:500 .72rem "JetBrains Mono",ui-monospace,monospace;border-radius:999px;padding:3px 10px;cursor:pointer;line-height:1.5}
.tl-tog{background:transparent;color:#8e9ab1;border:1px solid #2a3550}
.tl-tog:hover{border-color:#38d6f5;color:#38d6f5}
.tl-tog[aria-pressed=true]{color:#34d399;border-color:#34d39966}
.tl-count{font:500 .72rem "JetBrains Mono",ui-monospace,monospace;color:#a78bfa}
.tl-hint{display:inline-flex;align-items:center;gap:6px;border:1px solid #38d6f566;background:#38d6f514;color:#38d6f5;animation:tl-pulse 1.8s ease-in-out infinite}
.tl-hint svg{width:14px;height:14px;flex:none}
.tl-hint.gone{display:none}
.term.tl-glow{animation:tl-ring 1.6s ease-out 2}
@keyframes tl-pulse{0%,100%{box-shadow:0 0 0 0 #38d6f544}50%{box-shadow:0 0 0 6px #38d6f500}}
@keyframes tl-ring{0%{box-shadow:0 0 0 0 #38d6f599,0 60px 120px -60px #22d3ee33}100%{box-shadow:0 0 0 16px #38d6f500,0 60px 120px -60px #22d3ee33}}

/* output lines */
.tl-l{white-space:pre-wrap;word-break:break-word}
.tl-pre{white-space:pre;overflow-x:auto;scrollbar-width:thin;scrollbar-color:#2a3550 transparent}
.tl-echo{color:#e7ecf3}
.tl-d{color:#7a87a5}
.tl-note{color:#8b98b8;font-style:italic}
.tl-err{color:#f87171}
.tl-ok{color:#34d399}
.tl-warn{color:#fbbf24}
.tl-h{color:#a78bfa;font-weight:500;margin-top:.5em}
.tl-q{color:#e7ecf3;margin-top:.4em}
.tl-prog{color:#8e9ab1}
.tl-c{color:#38d6f5}.tl-p{color:#a78bfa}
.tl-box{border-left:2px solid #38d6f5;padding:2px 0 2px 12px;margin:.4em 0;color:#d5ddee}
.tl-box b{color:#fff}
.tl-opts{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;margin:.2em 0 .4em}
.tl-opt,.tl-cmd{font:inherit;font-size:.82rem;cursor:pointer}
.tl-opt{background:#111a2b;color:#38d6f5;border:1px solid #2a3550;border-radius:6px;padding:1px 9px;line-height:1.7}
.tl-opt:hover:not(:disabled){border-color:#38d6f5;background:#38d6f51a}
.tl-opt:disabled{opacity:.55;cursor:default}
.tl-opt.sel{background:#38d6f530;border-color:#38d6f5;opacity:1}
.tl-cmd{background:none;border:0;padding:0;color:#38d6f5;text-decoration:underline dotted;text-underline-offset:3px}
.tl-hrow{display:grid;grid-template-columns:19ch 1fr;align-items:baseline}
.tl-hrow .tl-cmd{justify-self:start;text-align:left}
.tl-hd{color:#9fb0cc}
.tl-cmd:hover{text-decoration-style:solid}
.tl-link{color:#38d6f5;text-decoration:underline;text-underline-offset:3px}
.tl-flash-row{animation:tl-rowflash 1.2s ease}
@keyframes tl-rowflash{0%{background:#34d39933}100%{background:transparent}}

/* prompt line + mirrored input */
.tl-pl{position:relative;display:flex;align-items:baseline;min-height:1.8em}
.tl-sym{color:#a78bfa;margin-right:1ch;flex:none}
.tl-disp{white-space:pre-wrap;word-break:break-all;color:#e7ecf3}
.tl-cur{display:inline-block;width:.6em;height:1.1em;background:#38d6f5;vertical-align:text-bottom;margin:0 1px;animation:tl-blink 1.1s steps(1) infinite}
.tl-ghost{color:#56637f}
.tl-in{position:absolute;inset:0;width:100%;height:100%;opacity:0;border:0;padding:0;margin:0;background:none;color:transparent;caret-color:transparent;font:16px/1.8 "JetBrains Mono",monospace;cursor:text}
.tl-pl.tl-busy{opacity:0}
@keyframes tl-blink{50%{opacity:0}}

/* pipeline stages */
.term .stages{position:relative}
.term .stages div{cursor:pointer;transition:color .2s,background .2s}
.term .stages div:hover{color:#e7ecf3}
.term .stages div:focus-visible{outline:2px solid #38d6f5;outline-offset:-2px}
.term .stages div.tl-hot,[data-theme=light] .term .stages div.tl-hot{color:#07101c;background:#38d6f5;font-weight:500}
.tl-packet{position:absolute;top:-5px;left:10%;width:9px;height:9px;border-radius:50%;background:#38d6f5;box-shadow:0 0 12px 4px #38d6f5aa;transform:translateX(-50%);transition:left .55s ease;pointer-events:none;opacity:0;z-index:2}
.tl-packet.on{opacity:1}
.tl-cap{min-height:2.5em;padding:8px 14px;border-top:1px solid #1e2638;background:#0c111c;color:#9fb0cc;font:.76rem/1.5 "JetBrains Mono",ui-monospace,monospace;text-align:center;display:flex;align-items:center;justify-content:center}
.tl-cap b{color:#38d6f5;font-weight:500;margin-right:.6ch}

/* exit command: collapse and reopen */
.term.tl-closed .out{height:0;padding-top:0;padding-bottom:0;overflow:hidden}
.term.tl-closed .stages,.term.tl-closed .tl-cap{display:none}

/* ---------- helpers under the card ---------- */
.tl-tools{margin-top:14px;display:grid;gap:10px}
.tl-chips{display:flex;gap:8px;flex-wrap:wrap}
.tl-chip,.tl-tour{font:500 .8rem "JetBrains Mono",ui-monospace,monospace;color:var(--txt);background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:6px 13px;cursor:pointer;white-space:nowrap;flex:none;transition:border-color .15s,color .15s,transform .15s}
.tl-chip:hover,.tl-tour:hover{border-color:var(--cy);color:var(--cy);transform:translateY(-1px)}
.tl-chip:disabled,.tl-tour:disabled{opacity:.5;cursor:default;transform:none}
.tl-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.tl-tour{background:var(--grad);color:#07101c;border:0;font-weight:700}
[data-theme=light] .tl-tour{color:#fff}
.tl-tour:hover{color:#07101c}[data-theme=light] .tl-tour:hover{color:#fff}
.tl-tip{color:var(--mut);font-size:.8rem}
.tl-greet{display:inline-block;margin-bottom:16px;padding:5px 14px;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--cy);font:500 .85rem "JetBrains Mono",ui-monospace,monospace}

/* ---------- page effects ---------- */
.tl-topbar{position:fixed;inset:0 0 auto 0;height:3px;z-index:9998;pointer-events:none;transition:opacity .5s}
.tl-topbar i{display:block;height:100%;background:linear-gradient(90deg,#22d3ee,#a78bfa);transform:scaleX(0);transform-origin:left;transition:transform .5s ease;box-shadow:0 0 12px #22d3ee}
.tl-topbar.out{opacity:0}
.tl-canvas{position:fixed;inset:0;width:100vw;height:100vh;z-index:9997;pointer-events:none;transition:opacity .6s}
.tl-rocket{position:fixed;left:0;top:0;z-index:9997;pointer-events:none;width:64px;height:64px}
.tl-glitch{animation:tl-gl .28s steps(2,end) 5}
@keyframes tl-gl{0%{transform:translate(0);filter:none}25%{transform:translate(-4px,1px) skewX(2deg);filter:hue-rotate(90deg) saturate(1.8)}50%{transform:translate(3px,-2px);filter:hue-rotate(-60deg)}75%{transform:translate(-2px,2px) skewX(-2deg);filter:saturate(2) contrast(1.2)}100%{transform:translate(0);filter:none}}
.tl-flash{animation:tl-sectionflash 1.8s ease}
@keyframes tl-sectionflash{0%{background:#38d6f522}100%{background:transparent}}
.step.tl-lit::before{border-color:var(--cy);background:var(--cy);box-shadow:0 0 0 5px #38d6f533}
.step.tl-lit>button{color:var(--cy)}

/* outage banner (break / fix) */
.tl-alert{position:fixed;left:0;right:0;top:80px;z-index:15;display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;padding:9px 16px;background:#7f1d1d;color:#fff;font:500 .85rem "JetBrains Mono",ui-monospace,monospace;border-bottom:1px solid #f87171;animation:tl-slide .4s ease}
.tl-alert.ok{background:#14532d;border-color:#34d399}
.tl-alert button{font:inherit;color:#fff;background:#ffffff22;border:1px solid #ffffff55;border-radius:6px;padding:2px 10px;cursor:pointer}
.tl-alert button:hover{background:#ffffff33}
.tl-alert svg{width:120px;height:28px;flex:none}
.tl-alert polyline{fill:none;stroke:#fecaca;stroke-width:2;stroke-linejoin:round;stroke-dasharray:400;stroke-dashoffset:400;animation:tl-draw 1.4s ease forwards}
.tl-alert.ok polyline{stroke:#bbf7d0}
@keyframes tl-draw{to{stroke-dashoffset:0}}
@keyframes tl-slide{from{transform:translateY(-100%);opacity:0}}

/* floating container cards */
.tl-cards{position:fixed;right:16px;bottom:16px;z-index:40;display:flex;flex-direction:column;gap:8px;align-items:flex-end;max-width:calc(100vw - 32px)}
.tl-card{display:flex;align-items:center;gap:10px;background:#0c111c;color:#e7ecf3;border:1px solid #1e2638;border-radius:12px;padding:8px 12px;font:500 .8rem "JetBrains Mono",ui-monospace,monospace;cursor:pointer;box-shadow:0 10px 30px -10px #000a;animation:tl-in .5s ease both}
.tl-card:hover{border-color:#38d6f5}
.tl-card i{width:8px;height:8px;border-radius:50%;background:#34d399;box-shadow:0 0 8px #34d399;flex:none}
.tl-card small{color:#7a87a5;font-size:.72rem}
.tl-cards-x{align-self:flex-end;background:#0c111c;color:#9aa3bf;border:1px solid #1e2638;border-radius:999px;font:.75rem "JetBrains Mono",monospace;padding:2px 10px;cursor:pointer}
@keyframes tl-in{from{opacity:0;transform:translateY(24px)}}
@media(max-width:640px){.tl-cards{left:12px;right:12px;bottom:12px;flex-direction:row;overflow-x:auto;align-items:center;max-width:none}.tl-card{flex:none}}

/* toast + badge modal */
.tl-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:120;background:#0c111c;color:#e7ecf3;border:1px solid #38d6f5;border-radius:12px;padding:10px 16px;font:500 .85rem "JetBrains Mono",ui-monospace,monospace;box-shadow:0 14px 40px -10px #000c;animation:tl-in .4s ease both;max-width:calc(100vw - 32px);text-align:center}
.tl-modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:16px;background:#05080fcc;backdrop-filter:blur(4px);animation:tl-fade .25s ease}
.tl-dialog{background:#0c111c;color:#e7ecf3;border:1px solid #232a3d;border-radius:16px;padding:16px;width:min(760px,100%);max-height:100%;overflow:auto;display:grid;gap:12px}
.tl-dialog canvas{width:100%;height:auto;border-radius:10px;display:block;background:#0a0d14}
.tl-dialog p{color:#9aa3bf;font-size:.92rem;margin:0}
.tl-dialog .row2{display:flex;gap:10px;flex-wrap:wrap}
.tl-dialog .btn{background:transparent;color:#e7ecf3;cursor:pointer;font-family:inherit}
.tl-dialog .btn.main{color:#07101c;background:var(--grad);border:0}
@keyframes tl-fade{from{opacity:0}}

/* theme switch: circle reveal (View Transitions) with a simple fade fallback */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-old(root){z-index:1}
::view-transition-new(root){z-index:2}
html.tl-themefade *,html.tl-themefade *::before,html.tl-themefade *::after{transition:background-color .45s,color .45s,border-color .45s!important}

@media(max-width:640px){
  .term.tl-ready .out{height:280px;font-size:.8rem}
  .tl-chips{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
  .tl-chips::-webkit-scrollbar{display:none}
  .tl-tip{display:none}
  .tl-hrow{grid-template-columns:1fr;margin-bottom:.3em}
  .tl-hd{padding-left:2ch;color:#7a87a5}
  .tl-alert{top:80px;font-size:.78rem}
}
@media(prefers-reduced-motion:reduce){
  .tl-hint,.tl-cur,.term.tl-glow,.tl-glitch,.tl-flash,.tl-flash-row,.tl-card,.tl-toast,.tl-modal,.tl-alert,.tl-alert polyline{animation:none!important}
  .tl-alert polyline{stroke-dashoffset:0}
  .tl-packet{transition:none}
}