/* =========================================================================
   Pipe — free tools stylesheet
   Loaded by the six tool pages through $pageCss, after base.css.
   Every rule is scoped to a tool wrapper so nothing leaks into the header,
   footer or shared components.

   Sections:
     1. Tool stage and shared buttons
     2. Pipe recorder embeds
     3. Webcam tester (library injects its own CSS, we only retheme it)
     4. Webcam resolution tester
     5. Video bitrate tester
     6. Responsive
   ========================================================================= */

/* ---- 1. Tool stage and shared buttons ---- */
.made-by{margin-top:14px;font-size:14px;color:var(--slate)}
.made-by a{border-bottom:1px solid var(--line)}
.made-by a:hover{border-color:var(--rec)}
.tool-sec{padding:clamp(40px,5vw,64px) 0}
.tool-stage{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(16px,3vw,32px)}
.tool-src{margin-top:18px;font-size:14.5px;color:var(--slate);text-align:center;max-width:none}
.tool-src a{border-bottom:1px solid var(--line);color:var(--ink)}
.tool-src a:hover{border-color:var(--rec)}
.fcards.four{grid-template-columns:repeat(4,1fr)}
.btn-wrap{white-space:normal;text-align:center}
.badge{font-family:var(--body);font-size:11.5px;font-weight:600;padding:2px 8px;border-radius:999px;background:var(--rec-soft);color:var(--rec);letter-spacing:0}

.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}

/* ---- 2. Pipe recorder embeds ---- */
.tool-recorder{max-width:720px;margin:0 auto}
.tool-recorder.wide{max-width:none}

/* ---- 3. Webcam tester ---- */
/* The library replaces #webcam-tester-container with .media-tester and injects
   its own <style>. Higher specificity here swaps its palette for ours. */
.tool-webcam .media-tester{
  --bg-primary:var(--paper); --bg-secondary:#fff; --bg-tertiary:var(--ink-soft);
  --text-primary:var(--ink); --text-secondary:var(--slate); --text-muted:var(--slate);
  --border-color:var(--line);
  --success-bg:var(--ok-soft); --success-color:#137A52; --success-border:var(--ok);
  --error-bg:var(--rec-soft); --error-color:#B3202C; --error-border:var(--rec);
  --info-bg:var(--ink-soft); --info-color:var(--ink); --info-border:var(--line);
  --button-bg:var(--ink); --button-hover:#0E1830; --button-disabled:var(--slate);
  font-family:var(--body);max-width:640px
}
.tool-webcam .media-tester h1:empty{display:none}
.tool-webcam .media-tester .main-button,
.tool-webcam .media-tester .export-button{border-radius:999px;font-weight:600}
.tool-webcam .media-tester .secondary-button{border-radius:999px}
.tool-webcam .media-tester .camera-preview{width:100%;max-width:360px;height:auto;aspect-ratio:4/3;border-radius:var(--r-md)}
.tool-webcam .media-tester .test-result{border-radius:var(--r-sm)}

/* ---- 4. Webcam resolution tester ---- */
.wrt{display:flex;flex-direction:column;align-items:center;gap:16px}
.wrt .hide{display:none}
.wrt .red{color:var(--rec);font-weight:600}
.wrt .orange{color:#B7791F;font-weight:600}
.wrt .flex-center{display:flex;justify-content:center;align-items:center;flex-wrap:wrap}
.wrt video{width:100%;max-width:600px;border-radius:var(--r-sm);background:#0F1A33;display:block}
.wrt .video-section-wrapper{background:#0F1A33;color:#DDE3EA;padding:10px;border-radius:var(--r-md);max-width:fit-content;font-family:var(--mono);font-size:13px}
.wrt .video-section-wrapper p{max-width:none;margin-top:8px}
.wrt .video-with-buttons{display:flex;flex-direction:column;gap:15px}
.wrt .actionButtons{display:flex;flex-wrap:wrap;max-width:620px;gap:10px;align-items:center}
.wrt select,.wrt input[type="text"],.wrt input[type="number"]{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}
.wrt input[type="text"],.wrt input[type="number"]{width:100%}
.wrt select:focus,.wrt input:focus{outline:none;border-color:var(--ink)}
.wrt #videoSource{width:100%}
.wrt h2{font-size:22px}
.wrt h4{font-family:var(--display);font-size:16px;font-weight:700}
.wrt .tbl{width:100%;overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-md);background:#fff}
.wrt table{width:100%;border-collapse:collapse;font-size:14px;min-width:560px}
.wrt th,.wrt td{border-bottom:1px solid var(--line);padding:8px 10px;text-align:center;vertical-align:middle}
.wrt th{background:var(--paper);color:var(--slate);font-weight:600;font-size:13px}
.wrt tbody tr:last-child td{border-bottom:0}
.wrt td>u{text-decoration-color:rgba(20,33,61,.3)}
.wrt .applyResolution{margin-top:6px}
.wrt #progress{font-size:14.5px;color:var(--slate);margin-bottom:10px;max-width:none}
.wrt #actionButtons,.wrt #resultsSection,.wrt #capabilitiesSection{display:none}
.wrt #videoFeedSection{display:none;flex-wrap:wrap;gap:15px;justify-content:center}
.wrt #resultsSection,.wrt #capabilitiesSection,.wrt #customTableSection{width:100%}
.wrt .export-btns{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-block:15px}
.wrt details{width:100%;margin-top:8px}
.wrt summary{cursor:pointer;font-size:14.5px;color:var(--slate)}
.wrt summary code{font-family:var(--mono);font-size:13px;background:var(--ink-soft);padding:1px 5px;border-radius:4px}
.wrt #capabilities{width:100%;overflow:auto;font-family:var(--mono);font-size:12.5px;background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);padding:12px;margin-top:8px;max-height:360px}
.wrt #logsWrapper{width:100%;border-radius:var(--r-md);padding:12px;background:#0F1A33;color:#DDE3EA;max-height:400px;overflow-y:auto;font-family:var(--mono);font-size:12.5px;margin-top:8px}
.wrt #logsWrapper>p{word-break:break-word;max-width:none}
.wrt #logsWrapper>p>span{color:#F5D67B}
.wrt #logsWrapper>p>hr{border:0;border-top:1px solid rgba(255,255,255,.1);margin:6px 0}

/* ---- 5. Video bitrate tester ---- */
.vbt .video-section{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px}
.vbt .video-wrapper{background:#0F1A33;border-radius:var(--r-md);overflow:hidden;position:relative;aspect-ratio:16/9}
.vbt video{width:100%;height:100%;object-fit:contain;display:block}
.vbt .video-label{position:absolute;top:10px;left:10px;background:rgba(0,0,0,.55);color:#fff;padding:4px 10px;border-radius:999px;font-family:var(--mono);font-size:12px;z-index:1}
.vbt .br-status{display:none;padding:10px 14px;border-radius:var(--r-sm);margin-bottom:16px;font-size:15px;font-weight:500}
.vbt .br-status.info{background:var(--ink-soft);color:var(--ink)}
.vbt .br-status.recording{background:var(--rec-soft);color:#B3202C}
.vbt .controls{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:20px;display:grid;grid-template-columns:1fr 1fr;gap:14px 20px}
.vbt .control-group label{display:block;margin-bottom:5px;font-weight:600;font-size:14px;color:var(--ink)}
.vbt select,.vbt input{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:9px 10px;transition:border-color .2s}
.vbt select:focus,.vbt input:focus{outline:none;border-color:var(--ink)}
.vbt .fps-options,.vbt .bitrate-options{display:grid;grid-template-columns:1fr auto;gap:10px}
.vbt #customBitrateInput,.vbt #customFpsInput{display:none}
.vbt .button-group{grid-column:1/-1;display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.vbt .results{margin-top:28px}
.vbt .results h2{font-size:22px;margin-bottom:12px}
.vbt #recordingsTable{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-md);background:#fff}
.vbt table{width:100%;border-collapse:collapse;font-size:14px;min-width:900px}
.vbt th,.vbt td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--line)}
.vbt th{background:var(--paper);color:var(--slate);font-weight:600;font-size:13px}
.vbt td{font-family:var(--mono);font-size:13px}
.vbt tbody tr:last-child td{border-bottom:0}
.vbt .action-buttons{display:flex;gap:6px}
.vbt .no-recordings{text-align:center;padding:36px;color:var(--slate);font-size:15px}

/* ---- 6. Responsive ---- */
@media (max-width:1000px){
  .fcards.four{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .fcards.four{grid-template-columns:1fr}
  .vbt .video-section,.vbt .controls{grid-template-columns:1fr}
  .vbt .fps-options,.vbt .bitrate-options{grid-template-columns:1fr}
  .vbt .button-group .tbtn,.wrt .actionButtons .tbtn{flex:1}
}