/* =========================================================================
   Pipe — developer demos stylesheet
   Loaded after base.css and tech-demos.css by the developer demo pages:
   embed-code-v2-demos/*.php, react-demo.php and stress-test.php.
   tech-demos.css provides .demo-sec, the .demo content kit and the .tbtn
   buttons; this file only adds what those pages need on top. Every rule is
   scoped to .demo or to the page's #<slug> wrapper.

   Sections:
     1. Shared (controls row, event log)
     2. embed-javascript
     3. custom-form
     4. video-recorder-with-teleprompter
     5. react-demo
     6. stress-test
     7. Responsive
   ========================================================================= */

/* ---- 1. Shared ---- */
#embed-html,#embed-javascript,#custom-form,#video-recorder-with-teleprompter,#react-demo{max-width:760px}
.demo .controls{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0}
.demo pre.log{background:#0F1A33;color:#DDE3EA;font-family:var(--mono);font-size:13px;line-height:1.55;padding:14px 16px;min-height:8em;max-height:420px;overflow:auto;white-space:pre-wrap;width:100%}

/* ---- 2. embed-javascript ---- */
#embed-javascript #first-recorder{max-width:100%;background:transparent}
#embed-javascript #first-recorder>span{color:var(--slate)}

/* ---- 3. custom-form (replaces the Bootstrap form styles of the original) ---- */
#custom-form form{width:100%}
#custom-form .field{margin:0 0 20px}
#custom-form .field>label,#custom-form .field>.label{display:block;font-weight:600;font-size:15px;margin-bottom:6px}
#custom-form sup{color:var(--rec);font-size:.8em;margin-left:2px}
#custom-form .field p{font-size:15px;color:var(--slate);margin:0 0 10px}
#custom-form input[type="text"],#custom-form input[type="email"],#custom-form textarea{display:block;width:100%;font-family:inherit;font-size:15px;color:var(--ink);background:#fff;border:1.5px solid var(--line);border-radius:var(--r-sm);padding:10px 12px}
#custom-form input[type="text"]:focus,#custom-form input[type="email"]:focus,#custom-form textarea:focus{outline:none;border-color:var(--ink)}
#custom-form label.check{display:flex;align-items:center;gap:10px;font-weight:500;font-size:15px;cursor:pointer}
#custom-form label.check input{width:18px;height:18px;accent-color:var(--ink);flex-shrink:0}

/* ---- 4. video-recorder-with-teleprompter ---- */
#video-recorder-with-teleprompter .prompter-container{position:relative;width:100%;height:300px;overflow:hidden;margin-top:20px;background:#0F1A33;border:1px solid var(--line);border-radius:var(--r-md)}
#video-recorder-with-teleprompter .prompter-text{position:absolute;top:100%;left:0;right:0;padding:20px;color:#fff;font-size:24px;line-height:1.6;text-align:center}
#video-recorder-with-teleprompter .prompter-text p{max-width:none;margin:0 0 1em}

/* ---- 5. react-demo
   The scoped part of the CRA build's main.css (its body, h1, a and bare
   button rules were dropped). The app renders its own <h1>Pipe React Demo</h1>;
   the page hero already carries that h1, so the app's copy is hidden. The
   proper fix is to remove it from App.js in the pipe-react-demo repo and rebuild.
   Buttons are styled only inside .navigation-top and #controls so the Pipe
   recorder's own buttons keep pipe's styling. ---- */
#react-demo h1{display:none}
#react-demo h2{font-family:var(--body);font-weight:700;color:#005a9c;font-size:22px;letter-spacing:.01em;text-transform:uppercase;padding:20px 0 12px}
#react-demo h3{font-family:var(--body);font-weight:600;font-size:16px;color:var(--slate);text-transform:none;letter-spacing:0;padding:16px 0 8px}
#react-demo .navigation-top{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;width:100%}
#react-demo #controls{flex-direction:row}
#react-demo .navigation-top button,#react-demo #controls button{display:inline-flex;align-items:center;justify-content:center;padding:11px 18px;border-radius:999px;border:1.5px solid var(--ink);background:var(--ink);color:#fff;font-family:inherit;font-weight:600;font-size:15px;line-height:1.2;cursor:pointer;white-space:nowrap;transition:background .2s var(--ease),border-color .2s var(--ease)}
#react-demo .navigation-top button:hover,#react-demo #controls button:hover{background:#0E1830}
#react-demo #controls button:disabled{opacity:.45;cursor:not-allowed}
/* In the view switcher, the disabled button is the view on screen */
#react-demo .navigation-top button:disabled{background:#fff;color:var(--ink);border-color:var(--line);cursor:default}
#react-demo .placeholder{display:flex;align-items:center;justify-content:center;width:100%;max-width:640px;height:390px;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);color:var(--slate)}
#react-demo a#downloadLink{display:block;margin:0 0 1em;min-height:1.2em}

/* ---- 6. stress-test
   Ported from the Hugo page. Its dark console look is kept inside the demo
   wrapper: the tokens live on #stress-test, the Syne and JetBrains Mono faces
   map to the site's --display and --mono, and the keyframes are prefixed so
   they don't replace base.css's blink. The JS sets colors to var(--good) etc.,
   which resolve against these tokens. ---- */
#stress-test{--bg:#0a0a0f;--surface:#111118;--border:#222230;--accent:#e8ff47;--accent2:#ff4747;--accent3:#47c5ff;--text:#e8e8f0;--muted:#eeeeeec7;--good:#47ff8a;--warn:#ffb347;--bad:#ff4747;font-family:var(--mono)}
#stress-test #st-head{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:20px 32px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:0 0 20px}
#stress-test #st-head h2{font-family:var(--display);font-weight:800;font-size:1.2rem;letter-spacing:-.02em;color:var(--accent)}
#stress-test #st-head h2 span{color:var(--muted);font-weight:400;font-size:.85rem}
#stress-test #stats-bar{display:flex;gap:24px;align-items:center}
#stress-test .stat{display:flex;flex-direction:column;align-items:flex-end}
#stress-test .stat-label{font-size:.6rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
#stress-test .stat-value{font-size:1rem;font-weight:700;transition:color .3s}
#stress-test #fps-val,#stress-test #jank-val{color:var(--good)}
#stress-test #frame-val{color:var(--accent3)}
#stress-test .recorder-block{margin:0 0 20px}
#stress-test #graph-wrap{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:16px;position:relative;margin:20px 0}
#stress-test #graph-title{font-size:.65rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px}
#stress-test #frame-canvas{width:100%;height:100px;display:block;border-radius:4px}
#stress-test #master-bar{background:var(--surface);border:1px solid var(--accent);border-radius:8px;padding:20px 24px;display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin:20px 0}
#stress-test #master-label{font-family:var(--display);font-weight:800;font-size:.85rem;color:var(--accent);white-space:nowrap}
#stress-test .master-slider-wrap{flex:1;min-width:200px}
#stress-test #nuke-btn{background:var(--accent2);color:#fff;border:none;font-family:var(--mono);font-weight:700;font-size:.8rem;padding:10px 20px;border-radius:4px;cursor:pointer;letter-spacing:.04em;text-transform:uppercase;transition:transform .1s,box-shadow .2s;white-space:nowrap}
#stress-test #nuke-btn:hover{box-shadow:0 0 20px rgba(255,71,71,.5);transform:scale(1.03)}
#stress-test #nuke-btn:active{transform:scale(.97)}
#stress-test #nuke-btn.nuking{animation:st-nuke-pulse .3s infinite alternate}
@keyframes st-nuke-pulse{from{box-shadow:0 0 10px rgba(255,71,71,.4)}to{box-shadow:0 0 40px rgba(255,71,71,.9)}}
#stress-test #reset-btn{background:none;color:var(--muted);border:1px solid var(--border);font-family:var(--mono);font-size:.75rem;padding:10px 16px;border-radius:4px;cursor:pointer;text-transform:uppercase;letter-spacing:.04em;transition:color .2s,border-color .2s;white-space:nowrap}
#stress-test #reset-btn:hover{color:var(--text);border-color:var(--text)}
#stress-test .content-stress-card{display:grid;grid-template-columns:1fr 1fr;gap:16px}
#stress-test .stress-card{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:20px;display:flex;flex-direction:column;gap:14px;transition:border-color .3s}
#stress-test .stress-card.active{border-color:var(--accent2)}
#stress-test .card-header{display:flex;align-items:center;justify-content:space-between}
#stress-test .card-title{font-family:var(--display);font-weight:700;font-size:.9rem;display:flex;align-items:center;gap:10px;color:var(--text)}
#stress-test .card-icon{font-size:1.1rem}
#stress-test .card-desc{font-size:.75rem;color:var(--muted);line-height:1.6}
#stress-test .card-desc code{background:var(--bg);color:var(--warn)}
#stress-test .toggle{position:relative;width:40px;height:22px;flex-shrink:0}
#stress-test .toggle input{position:absolute;opacity:0;width:0;height:0}
#stress-test .toggle-track{position:absolute;inset:0;background:var(--border);border-radius:11px;cursor:pointer;transition:background .25s}
#stress-test .toggle-track::after{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;background:var(--muted);border-radius:50%;transition:transform .25s,background .25s}
#stress-test .toggle input:checked+.toggle-track{background:rgba(232,255,71,.2);border:1px solid var(--accent)}
#stress-test .toggle input:checked+.toggle-track::after{transform:translateX(18px);background:var(--accent)}
#stress-test .toggle input:focus-visible+.toggle-track{outline:3px solid var(--rec);outline-offset:3px}
#stress-test .toggle-sm{width:32px;height:18px}
#stress-test .toggle-sm .toggle-track{border-radius:9px}
#stress-test .toggle-sm .toggle-track::after{width:12px;height:12px}
#stress-test .toggle-sm input:checked+.toggle-track::after{transform:translateX(14px)}
#stress-test .hold-row{display:flex;align-items:center;gap:10px;font-size:.68rem;color:var(--muted)}
#stress-test .slider-row{display:flex;flex-direction:column;gap:6px}
#stress-test .slider-labels{display:flex;justify-content:space-between;gap:12px;font-size:.7rem;color:var(--muted)}
#stress-test .slider-labels span:first-child{color:var(--text);font-weight:700;font-size:.75rem}
#stress-test input[type="range"]{-webkit-appearance:none;appearance:none;width:100%;height:4px;background:var(--border);border-radius:2px;outline:none;cursor:pointer}
#stress-test input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--accent);cursor:pointer;transition:transform .15s}
#stress-test input[type="range"]::-webkit-slider-thumb:hover{transform:scale(1.3)}
#stress-test input[type="range"]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--accent);border:none;cursor:pointer}
#stress-test input[type="range"]:focus-visible{outline:3px solid var(--rec);outline-offset:4px}
#stress-test .activity-dot{width:8px;height:8px;border-radius:50%;background:var(--muted);flex-shrink:0;transition:background .3s}
#stress-test .stress-card.active .activity-dot{background:var(--accent2);animation:st-blink .8s infinite}
@keyframes st-blink{0%,100%{opacity:1}50%{opacity:.3}}
#stress-test #dom-sandbox{position:fixed;top:-9999px;left:0;width:200px;overflow:hidden;pointer-events:none}
#stress-test #docs{margin-top:28px}
#stress-test #docs-toggle-btn{display:flex;align-items:center;gap:10px;background:#fff;border:1.5px solid var(--line);color:var(--ink);font-family:var(--mono);font-size:.75rem;padding:10px 16px;border-radius:6px;cursor:pointer;text-transform:uppercase;letter-spacing:.06em;margin-bottom:12px;transition:border-color .2s}
#stress-test #docs-toggle-btn:hover{border-color:var(--ink)}
#stress-test #docs-toggle-btn .chevron{transition:transform .3s}
#stress-test #docs-toggle-btn.open .chevron{transform:rotate(180deg)}
#stress-test #docs-content{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:28px 32px;display:none;line-height:1.8}
#stress-test #docs-content.visible{display:block}
#stress-test #docs-content h2{font-family:var(--display);font-weight:800;font-size:1rem;color:var(--accent);margin-bottom:20px;letter-spacing:-.01em}
#stress-test #docs-content h3{font-family:var(--display);font-weight:700;font-size:.82rem;color:var(--accent3);margin:24px 0 8px;padding:0;text-transform:uppercase;letter-spacing:.06em}
#stress-test #docs-content p,#stress-test #docs-content li{font-size:.72rem;color:var(--muted);max-width:800px}
#stress-test #docs-content code{background:var(--bg);padding:1px 6px;border-radius:3px;color:var(--warn);font-size:.68rem}
#stress-test #docs-content strong{color:var(--text)}
#stress-test .doc-table{width:100%;border-collapse:collapse;margin-top:8px;font-size:.68rem;background:none}
#stress-test .doc-table th{text-align:left;color:var(--muted);background:none;border:0;border-bottom:1px solid var(--border);padding:6px 12px;font-size:.6rem;text-transform:uppercase;letter-spacing:.06em}
#stress-test .doc-table td{padding:8px 12px;border:0;border-bottom:1px solid #1a1a25;color:var(--muted);vertical-align:top}
#stress-test .doc-table td:first-child{color:var(--text);white-space:nowrap}
#stress-test .doc-table tr:last-child td{border-bottom:none}

/* ---- 7. Responsive ---- */
@media (max-width:640px){
  .demo .controls .tbtn{flex:1}
  /* The recorder's fixed pixel size, from the original style.css */
  .demo #pipeRecordRTC-custom-id,.demo #pipeVrec-custom-id{width:100%!important;height:100%!important}
  #stress-test .content-stress-card{grid-template-columns:1fr}
  #stress-test #st-head{padding:16px 18px}
  #stress-test #docs-content{padding:20px 18px}
}