/* =========================================================================
   Pipe — tech demos stylesheet
   Loaded by the /tech-demos/ hub and every demo page through $pageCss, after
   base.css. The demos were ported 1:1 from the Hugo site, so their markup
   keeps its original structure; every demo rule is scoped to .demo or to the
   demo's #<slug> wrapper so nothing leaks into the header, footer or shared
   components.

   Sections:
     1. Hub (filter bar, tag badges)
     2. Buttons
     3. Demo content kit (shared by every demo)
     4. Per-demo sections (one per slug)
     5. Responsive
   ========================================================================= */

/* ---- 1. Hub ---- */
.demo-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.card[hidden]{display:none}
.card .tag{display:inline-block;margin-top:12px;font-size:11.5px;font-weight:600;padding:2px 8px;border-radius:999px;background:var(--ink-soft);color:var(--slate)}
.card .tag-video{background:var(--rec-soft);color:#B3202C}
.card .tag-audio{background:#E6F0FB;color:#1F5FA8}
.card .tag-screen{background:#F1EAFB;color:#6B3FA0}
.card .tag-speech{background:#FBF3DC;color:#8A6100}

/* ---- 2. Buttons (same as free-tools.css section 1) ---- */
.tbtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;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)}
.tbtn:hover{background:#0E1830}
.tbtn:disabled{opacity:.45;cursor:not-allowed}
.tbtn-rec{background:var(--rec);border-color:var(--rec)}
.tbtn-rec:hover{background:#D12F3C}
.tbtn-ghost{background:#fff;color:var(--ink);border-color:var(--line)}
.tbtn-ghost:hover{background:#fff;border-color:var(--ink)}
.tbtn-sm{padding:6px 12px;font-size:13px}

/* ---- 3. Demo content kit ---- */
.demo-sec{padding:0 0 clamp(56px,7vw,88px)}
.demo{font-size:16px;overflow-wrap:break-word}
/* base.css pads every <section>; demo markup uses <section> as plain blocks */
.demo section{padding:0}
.demo p{margin:0 0 12px}
.demo h3{font-family:var(--body);font-weight:700;color:#005a9c;font-size:22px;letter-spacing:.01em;text-transform:uppercase;padding:20px 0 12px}
.demo h4{font-family:var(--display);font-size:18px;font-weight:700;margin:24px 0 8px}
.demo h5{font-family:var(--display);font-size:16px;font-weight:700;padding:16px 0 8px}
.demo ul{list-style:disc;margin:0 0 20px 30px}
.demo ol{list-style:decimal;margin:0 0 20px 30px}
.demo li{margin:4px 0}
.demo a{color:#0d6efd}
.demo a:hover{color:#0a58ca;text-decoration:underline}
.demo hr{border:0;border-top:1px solid var(--line);margin:24px 0;width:100%}
.demo code{font-family:var(--mono);font-size:.88em;padding:1px 5px;border-radius:4px}
.demo pre{margin:0 0 16px;max-width:100%;overflow-x:auto;border-radius:var(--r-sm);font-size:13.5px;line-height:1.55}
.demo pre>code:not(.hljs){background:none;padding:0}
.demo select,.demo textarea,.demo input[type="text"]{font-family:inherit;font-size:15px;color:var(--ink);background:#fff;border:1.5px solid var(--line);border-radius:var(--r-sm);padding:8px 10px;max-width:100%}
.demo select:focus,.demo textarea:focus,.demo input[type="text"]:focus{outline:none;border-color:var(--ink)}
.demo video,.demo canvas{max-width:100%}
.demo table{border-collapse:collapse;font-size:14px;background:#fff}
.demo th,.demo td{border:1px solid var(--line);padding:6px 10px;text-align:left;vertical-align:top}
.demo th{background:var(--paper);color:var(--slate);font-weight:600}
.demo .tbl{width:100%;max-width:100%;overflow-x:auto}
.demo #controls{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0}
.demo #recordingsList li{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:10px 0}
/* MediaRecorder-style log output */
.demo p#data{border-top:1px dotted #666;font-family:var(--mono);font-size:13px;line-height:1.4;min-height:6em;max-height:1000px;overflow-y:auto;padding:1em 0 0;width:100%}
/* Copy button added to code blocks by the inline script on code-sample demos */
.demo .code-block-wrapper{position:relative;width:100%}
.demo .copy-code-button{position:absolute;top:.5rem;right:.5rem;z-index:10;min-width:3rem;height:25px;padding:1px 6px;font-family:var(--body);font-size:.8rem;color:#222;background:#f8f9fa;border:1px solid #ccc;border-radius:4px;cursor:pointer;opacity:.8;transition:opacity .2s}
.demo .copy-code-button:hover{opacity:1}

/* ---- 4. Per-demo sections ---- */

/* Hero lede on demo pages carries links and code from the Hugo descriptions */
.hero-s .lede a{border-bottom:1px solid var(--line);color:var(--ink)}
.hero-s .lede a:hover{border-color:var(--rec)}
.hero-s .lede code{font-family:var(--mono);font-size:.8em;background:var(--ink-soft);padding:1px 5px;border-radius:4px}

/* The single-column demos stack their blocks flush left, as on Hugo */
#getusermedia-examples,#html-media-capture-demo,#media-recorder-api-demo,#media-recorder-api-demo-audio,
#getdisplaymedia-demo,#get-display-media-with-cam,#simple-recorderjs-demo,#web-speech-api-text-to-speech-demo{display:flex;flex-direction:column;align-items:flex-start}

/* 4.1 media-recorder-api-demo
   Merges the page-specific rules of the Hugo static/css/media-recorder-api-demo/main.css;
   its global body/h1/h2/p/a/button rules were dropped. */
#media-recorder-api-demo select{font-weight:600}
#media-recorder-api-demo ul{margin-bottom:10px}
#media-recorder-api-demo video{background:#222;margin:10px 5px 10px 0;width:480px;max-width:100%;aspect-ratio:16/9}
#media-recorder-api-demo #playback:not([src]){display:none}
#media-recorder-api-demo a#downloadLink{display:none;margin:0 0 1em}
#media-recorder-api-demo p#mimeInfo{font-family:var(--mono);font-size:.85em;color:#555;margin:.6em 0 0;min-height:1.2em}
#media-recorder-api-demo p#data{min-height:auto}
#media-recorder-api-demo p#data.hidden{display:none}
#media-recorder-api-demo #toggleLogsBtn{margin-top:1.5rem}
#media-recorder-api-demo #codecTable{border-collapse:collapse;width:100%;margin:1em 0;font-size:.9em}
#media-recorder-api-demo #codecTable th,#media-recorder-api-demo #codecTable td{border:1px solid #ddd;padding:8px 12px;text-align:left;vertical-align:middle}
#media-recorder-api-demo #codecTable th{background:#005A9C;color:#fff;white-space:nowrap}
#media-recorder-api-demo #codecTable td.browser{font-weight:700;background:#eef3f8;white-space:nowrap}
#media-recorder-api-demo #codecTable td.version{white-space:nowrap;color:#005A9C;font-weight:700}
#media-recorder-api-demo .footnotes{margin-top:24px;font-size:.85em;color:#555;line-height:1.9}

/* 4.2 media-recorder-api-demo-audio */
#media-recorder-api-demo-audio select{font-weight:600}

/* 4.3 getdisplaymedia-demo */
#getdisplaymedia-demo p{padding:5px 0}
#getdisplaymedia-demo video{background:#222;width:640px;max-width:100%;height:auto;aspect-ratio:16/9}
#getdisplaymedia-demo summary{cursor:pointer;width:fit-content;margin:12px 0}
#getdisplaymedia-demo .code-block{background:#222;color:#dcdcdc;padding:20px;border-radius:8px;width:fit-content;max-width:100%;overflow-x:auto;margin-bottom:20px;font-family:var(--mono);font-size:14px}
#getdisplaymedia-demo .code-block select{padding:2px 6px;font-size:14px}
#getdisplaymedia-demo .line>span,#getdisplaymedia-demo .line>span>a,#getdisplaymedia-demo .nested>span>a{color:#dcdcdc;padding-left:5px}

/* 4.4 get-display-media-with-cam */
#get-display-media-with-cam select{font-weight:600}
#get-display-media-with-cam .recording-wrapper{position:relative;width:640px;max-width:100%;aspect-ratio:16/9}
#get-display-media-with-cam video,#get-display-media-with-cam canvas{background:#222;width:100%;height:100%}
#get-display-media-with-cam video{position:relative;opacity:0}
#get-display-media-with-cam .camera-video{position:absolute;bottom:20px;right:20px;width:33.333%;height:33.333%}
#get-display-media-with-cam .recording-canvas{position:absolute;top:0;left:0;z-index:1}

/* 4.5 web-speech-api-text-to-speech-demo */
#web-speech-api-text-to-speech-demo select{font-weight:600}
#web-speech-api-text-to-speech-demo .select-content{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:10px 0}
#web-speech-api-text-to-speech-demo textarea{width:50%;margin-top:6px}

/* 4.6 getusermedia-examples */
#getusermedia-examples p{padding:10px 0;margin:0}
#getusermedia-examples .table-of-contents{padding:0 5px;margin-left:0}
#getusermedia-examples .table-of-contents li{list-style:none}
#getusermedia-examples a:visited{color:#8d75a3}

/* 4.7 html-media-capture-demo */
#html-media-capture-demo p{padding:10px 0;margin:0}
#html-media-capture-demo form{width:100%}
#html-media-capture-demo red{color:red}
#html-media-capture-demo a:visited{color:#8d75a3}

/* 4.8 simple-vmsg-demo
   The .vmsg-* rules style the recorder popup vmsg.js appends to <body>, outside
   the demo wrapper, so they cannot be scoped. The prefix keeps them from clashing. */
#simple-vmsg-demo #controls{padding:0}
.vmsg-backdrop{position:fixed;left:0;right:0;top:0;bottom:0;display:flex;background:rgba(0,0,0,.7);align-items:center;justify-content:center;z-index:60}
.vmsg-popup{box-sizing:border-box;width:250px;padding:10px;border-radius:4px;background:#e4e1e5;box-shadow:1px 1px 4px 0 rgba(59,26,84,.6);display:flex;flex-direction:column;justify-content:center;font-family:Helvetica,sans-serif;font-size:14px;line-height:1.4;color:#0a0a0a}
.vmsg-progress{width:40%;margin:0 auto;display:flex;justify-content:space-between}
.vmsg-progress-dot{width:15px;height:15px;border-radius:50%;animation:vmsg-progress 1s linear infinite}
.vmsg-progress-dot:nth-child(2){animation-delay:-.8s}
.vmsg-progress-dot:nth-child(3){animation-delay:-.6s}
@keyframes vmsg-progress{0%,60%,100%{background:none}30%{background:#9e85ad}}
.vmsg-error{font-weight:700;text-align:center}
.vmsg-record-row{display:flex;justify-content:space-between}
.vmsg-button{min-width:40px;line-height:30px;padding:0;background:transparent;border:1px solid #ccc;font-family:Helvetica,sans-serif;cursor:pointer;outline:none;user-select:none}
.vmsg-button:disabled{cursor:default;color:#999}
.vmsg-button:not(:disabled):hover{border-color:#9e85ad}
.vmsg-button::-moz-focus-inner{border:0}
.vmsg-record-button{font-size:30px;color:#f00}
.vmsg-stop-button{font-size:25px;color:#000}
.vmsg-save-button{font-size:25px;color:#090}
.vmsg-timer{line-height:32px;font-weight:700;color:#333;cursor:pointer;user-select:none}
.vmsg-slider-wrapper{position:relative;margin-top:3px}
.vmsg-slider-wrapper::after{position:absolute;left:0;right:0;top:0;bottom:0;line-height:14px;text-align:center;color:#999;pointer-events:none}
.vmsg-pitch-slider-wrapper::after{content:"pitch"}
.vmsg-gain-slider-wrapper::after{content:"gain"}
.vmsg-slider{display:block;width:100%;height:16px;margin:0;padding:0;outline:none;background:none;-webkit-appearance:none}
.vmsg-slider::-moz-focus-outer{border:0}
.vmsg-slider::-webkit-slider-runnable-track{box-sizing:border-box;height:16px;background:none;border:1px solid #ccc}
.vmsg-slider::-moz-range-track{box-sizing:border-box;height:16px;background:none;border:1px solid #ccc}
.vmsg-slider::-webkit-slider-thumb{width:39px;height:14px;background:#ccc;cursor:pointer;-webkit-appearance:none}
.vmsg-slider::-moz-range-thumb{width:40px;height:14px;background:#ccc;border:none;border-radius:0;cursor:pointer}
.vmsg-slider::-webkit-slider-thumb:hover{background:#999}
.vmsg-slider::-moz-range-thumb:hover{background:#999}

/* 4.9 webaudiorecorder-demo */
#webaudiorecorder-demo select{font-weight:600}
#webaudiorecorder-demo #controls{padding:0}
#webaudiorecorder-demo pre{font-size:13px;margin:0 0 6px}
#webaudiorecorder-demo pre#log{white-space:pre-wrap;min-height:1.5em}

/* ---- 5. Responsive ---- */
@media (max-width:640px){
  .demo #controls .tbtn{flex:1}
  #web-speech-api-text-to-speech-demo textarea{width:100%}
}