/* The free tools (/tools/). Uses the site's tokens from site.css. */
.crumb { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 18px; font-size: 13.5px; color: var(--text-3); }
.crumb a { color: var(--text-2); text-decoration: none; }
.crumb a:hover { color: var(--text); }

.tool { margin-top: clamp(28px, 4vw, 44px); padding: clamp(20px, 3.5vw, 32px); border-radius: var(--radius); background: var(--bg-1); box-shadow: inset 0 0 0 1px var(--line); }
.tool-drop { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: clamp(28px, 5vw, 48px) 20px; border-radius: 14px; border: 1.5px dashed var(--line-2); text-align: center; transition: border-color 0.2s, background 0.2s; }
.tool-drop.over { border-color: var(--aqua); background: var(--aqua-dim); }
.tool-drop-title { font-size: 17px; font-weight: 500; letter-spacing: -0.01em; }
.tool-choose { cursor: pointer; }
.tool-file { font-weight: 500; overflow-wrap: anywhere; }
.tool-opts { display: flex; flex-wrap: wrap; gap: 14px; margin: 18px 0; }
.tool-opts:empty { display: none; }
.opt { display: grid; gap: 6px; font-size: 13px; color: var(--text-3); }
.opt select, .opt input { height: 38px; min-width: 130px; padding: 0 12px; border: 0; border-radius: 10px; background: var(--bg-3); color: var(--text); font: 400 14.5px var(--sans); box-shadow: inset 0 0 0 1px var(--line); }
.tool-work .cta { margin-top: 4px; }
.tool-progress { margin-top: 18px; }
.tool-bar { height: 8px; border-radius: 999px; background: var(--bg-3); overflow: hidden; }
.tool-bar span { display: block; height: 100%; width: 0; background: var(--aqua); transition: width 0.2s; }
.tool-progress .fine { margin-top: 8px; }
.tool-error { margin-top: 16px; padding: 12px 14px; border-radius: 10px; background: rgba(255, 92, 79, 0.1); color: #ff8a80; font-size: 14.5px; }
.tool-out { margin-top: 22px; }
.tool-out video, .tool-out img { max-height: 420px; border-radius: 12px; background: #000; }
.tool-out audio { width: 100%; }
.tool-out .cta { margin-top: 14px; }
.tool-privacy { margin-top: 18px; }

.tool-doc { margin-top: clamp(40px, 6vw, 64px); }
.tool-doc h2 { margin-top: 0; }
.tool-steps { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.app-box { margin-top: clamp(40px, 6vw, 64px); }
.app-title { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 8px; }
.app-box p + p { color: var(--text-2); }
.app-box .cta { margin-top: 18px; }
.tool-cards { list-style: none; padding: 0; margin: 18px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.tool-cards a { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 16px; border-radius: 14px; text-decoration: none; background: var(--bg-1); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow 0.2s, transform 0.2s; }
.tool-cards a:hover { box-shadow: inset 0 0 0 1px var(--line-2); transform: translateY(-2px); }
.tool-cards b { color: var(--text); font-weight: 500; font-size: 15.5px; letter-spacing: -0.01em; }
.tool-cards span { font-size: 13.5px; line-height: 1.5; color: var(--text-3); }
@media (max-width: 860px) { .tool-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .tool-cards { grid-template-columns: minmax(0, 1fr); } }

/* The record-and-plan tools (tools-live.js). .btn and .tool-opts set display, so [hidden] needs the override. */
.live-tool [hidden] { display: none !important; }
.live-status { margin-top: 14px; font-size: 14.5px; color: var(--text-2); }
.live-check { display: inline-flex; align-items: center; gap: 8px; margin: 10px 18px 0 0; font-size: 14.5px; color: var(--text-2); cursor: pointer; }
.live-modes { border: 0; padding: 0; margin: 0 0 6px; }
.live-modes legend { font-size: 13px; color: var(--text-3); margin-bottom: 4px; }
.live-custom { display: contents; }
.live-wide { display: grid; width: 100%; }
.live-wide textarea { width: 100%; min-height: 150px; padding: 12px; border: 0; border-radius: 10px; background: var(--bg-3); color: var(--text); font: 400 15px/1.6 var(--sans); box-shadow: inset 0 0 0 1px var(--line); resize: vertical; }
.live-count.warn { color: #ff8a80; }
.live-tool :focus-visible { outline: 2px solid var(--aqua, #5ee7df); outline-offset: 2px; }
.meter { position: relative; height: 18px; margin-top: 18px; border-radius: 9px; background: var(--bg-3); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.meter-level { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, #3ddc97, #f5c451 75%, #ff6b5e); transition: width 0.06s linear; }
.meter-peak { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: var(--text); }
.live-stage { margin-top: 16px; border-radius: 14px; overflow: hidden; background: #000; max-width: 720px; }
.live-stage video { display: block; width: 100%; height: auto; }
.live-stage.mirrored video { transform: scaleX(-1); }
.live-result { margin-top: 16px; }
.live-result p { margin: 4px 0; color: var(--text-2); }
.live-result .big { font-size: 30px; font-weight: 500; letter-spacing: -0.01em; color: var(--text); }
.live-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin: 18px 0 8px; }
.live-stats div { padding: 14px; border-radius: 12px; background: var(--bg-1); box-shadow: inset 0 0 0 1px var(--line); }
.live-stats dt { font-size: 13px; color: var(--text-3); }
.live-stats dd { margin: 4px 0 0; font-size: 24px; font-weight: 500; color: var(--text); }
.prompter { position: relative; height: min(70vh, 560px); margin-top: 16px; overflow: auto; border-radius: 14px; background: #000; color: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.prompter-text { padding: 40vh 6%; font-size: 44px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.prompter.mirrored .prompter-text { transform: scaleX(-1); }
.prompter:fullscreen { height: 100vh; border-radius: 0; }
.prompter.pseudo-full { position: fixed; inset: 0; z-index: 1000; height: auto; margin: 0; border-radius: 0; }
html.prompter-open { overflow: hidden; }
.prompter-exit { position: fixed; top: 16px; right: 16px; z-index: 1001; }
@media (max-width: 560px) {
  .live-stats { grid-template-columns: minmax(0, 1fr); }
  .live-tool .opt select, .live-tool .opt input { min-width: 0; width: 100%; }
  .live-tool .tool-opts .opt { flex: 1 1 100%; }
  .prompter-text { padding: 40vh 5%; }
}
/* Wave 2: microphone test recording, webcam snapshot, timer paragraphs, blur tool. */
.live-sub { margin: 18px 0 6px; font-size: 15px; font-weight: 500; color: var(--text); }
.live-rec { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.live-rec .cta, .live-snap .cta { margin-top: 10px; }
.live-snap { margin-top: 16px; }
.live-snap canvas { display: block; max-width: 100%; height: auto; max-height: 420px; border-radius: 12px; background: #000; }
.live-paras { margin: 8px 0 0; padding-left: 22px; color: var(--text-2); font-size: 14.5px; line-height: 1.7; }
.live-error { margin-top: 8px; color: #ff8a80; font-size: 14px; }
.blur-tool [hidden] { display: none !important; }
.blur-note { margin: 10px 0; color: var(--text-2); font-size: 14.5px; }
.blur-stage { position: relative; max-width: 820px; max-height: 70vh; margin: 12px 0; border-radius: 12px; overflow: hidden; background: #000; }
.blur-stage video { display: block; width: 100%; height: 100%; object-fit: contain; }
.blur-layer { position: absolute; inset: 0; touch-action: none; cursor: crosshair; user-select: none; }
.blur-area { position: absolute; border: 2px solid var(--aqua, #5ee7df); background: rgba(94, 231, 223, 0.18); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); cursor: move; box-sizing: border-box; }
.blur-area.on { border-color: #fff; box-shadow: 0 0 0 1px #000; }
.blur-handle { position: absolute; right: -9px; bottom: -9px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--aqua, #5ee7df); cursor: nwse-resize; }
.blur-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; padding: 0; list-style: none; }
.blur-list .btn { font-size: 13.5px; }
.blur-list .btn.on { box-shadow: inset 0 0 0 2px var(--aqua, #5ee7df); }
.blur-tool :focus-visible { outline: 2px solid var(--aqua, #5ee7df); outline-offset: 2px; }
@media (max-width: 560px) { .live-stats { grid-template-columns: 1fr; } }
/* Touch layouts: every button and control is at least 44px tall (Apple HIG, WCAG 2.5.5). */
@media (max-width: 860px), (pointer: coarse) {
  .btn:not(.btn-lg) { --h: 44px; }
  .opt select, .opt input { height: 44px; }
  .live-check { min-height: 44px; margin-top: 0; }
  .live-copytext { min-height: 44px; }
}