/* harrhys.com · new-c.css · webcam/mic test (.med-), keyboard tester (.kb-), speed test (.spd-), screenshot annotator (.ann-) */

/* ---------- media ---------- */
.med-sel{flex:1;min-width:0;width:auto}
.med-stage{position:relative;margin:12px auto 0;aspect-ratio:16/9;max-height:60vh;background:var(--paper);border:1px solid var(--line);border-radius:10px;overflow:hidden;display:grid;place-items:center}
.med-v{width:100%;height:100%;object-fit:contain;display:block;background:#000}/* video letterboxing stays black */
.med-v.med-mir{transform:scaleX(-1)}
.med-off{margin:0;color:var(--muted);font-weight:700}
.med-snap{margin-top:12px}.med-snap img{display:block;max-width:min(100%,480px);border-radius:8px;border:1px solid var(--line)}
.med-hear{color:var(--muted)}.med-hear.on{color:var(--done)}
.med-db{font-size:.85rem;color:var(--muted)}
.med-meter{position:relative;height:18px;margin-top:8px;background:var(--paper);border:1px solid var(--line);border-radius:9px;overflow:hidden}
.med-lvl{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--sage)}
.med-pk{position:absolute;top:0;bottom:0;left:0;width:3px;background:var(--danger)}
.med-audio{display:block;width:100%;margin-top:10px}
.med-help{margin:8px 0 0;padding-left:20px}.med-help li{margin:4px 0}

/* ---------- keyboard ---------- */
.kb-count{font-size:1.05rem}
.kb-wrap{container-type:inline-size}
.kb-board{--k:calc(100cqw * 4 / var(--cols));display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));grid-template-rows:var(--k) calc(var(--k) * .35) repeat(5,var(--k));user-select:none}
.kb-k{margin:max(1px,calc(var(--k) * .04));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;min-width:0;overflow:hidden;
  background:var(--card);border:1px solid var(--line);border-bottom-width:max(2px,calc(var(--k) * .07));border-radius:max(3px,calc(var(--k) * .12));
  font:700 calc(var(--k) * .3)/1.05 "Exo 2",sans-serif;color:var(--ink);text-align:center;white-space:nowrap;transition:background-color .12s,border-color .12s,color .12s,transform .08s}
.kb-k.kb-w{font-size:calc(var(--k) * .22)}
.kb-k.kb-2 span:first-child{font-size:.8em;color:var(--muted)}
.kb-k.done{background:var(--sage-l);border-color:var(--sage-d);color:var(--sage-d)}
.kb-k.done.kb-2 span:first-child{color:var(--sage-d)}
.kb-k.on{background:var(--sage);border-color:var(--sage-d);color:var(--paper);transform:translateY(1px)}
.kb-k.on.kb-2 span:first-child{color:inherit}
/* ISO Enter is two pieces that join into an L */
.kb-k.kb-e1{margin-bottom:0;border-bottom-width:1px;border-bottom-right-radius:0}
.kb-k.kb-e2{margin-top:-3px;border-top:0;border-top-left-radius:0;border-top-right-radius:0;position:relative;z-index:1}
.kb-extra{margin-top:12px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.kb-x{display:inline-block;padding:3px 10px;border:1px solid var(--sage-d);border-radius:6px;background:var(--sage-l);color:var(--sage-d);font:600 .85rem "Share Tech Mono",ui-monospace,monospace}
.kb-x.on{background:var(--sage);color:var(--paper)}
.kb-sw{display:inline-block;width:14px;height:14px;border-radius:3px;border:1px solid var(--sage-d);vertical-align:-2px;margin:0 2px 0 6px}
.kb-sw.on{background:var(--sage)}.kb-sw.done{background:var(--sage-l)}
.kb-notes{margin:8px 0 0;padding-left:20px}.kb-notes li{margin:5px 0}

/* ---------- speed ---------- */
.spd-big{font:700 clamp(2.4rem,8vw,3.6rem)/1 Rajdhani,"Exo 2",sans-serif;font-variant-numeric:tabular-nums}
.spd-big small{font-size:.4em;color:var(--muted);font-weight:700}
#spd-live:empty+small{display:none}
.spd-prog{margin-top:14px}
.spd-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.spd-tiles:empty{display:none}
.spd-tile{background:var(--tile);border:1px solid var(--line);border-radius:10px;padding:14px 16px;box-shadow:var(--shadow);display:flex;flex-direction:column;min-width:0}
.spd-lab{color:var(--muted);font-size:.85rem;font-weight:700}
.spd-tile strong{font:700 2rem/1.1 Rajdhani,"Exo 2",sans-serif;margin:4px 0 2px;font-variant-numeric:tabular-nums}
.spd-tile strong small{font-size:.5em;color:var(--muted)}
.spd-sub{color:var(--muted);font-size:.85rem}
.spd-spark{display:block;width:100%;height:28px;margin-top:8px;overflow:visible}
.spd-spark polyline{fill:none;stroke:var(--sage-d);stroke-width:1.6;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.spd-spark polygon{fill:var(--sage-l);stroke:none}
.spd-spark.spd-lat polyline{stroke:var(--blue-ink)}.spd-spark.spd-lat polygon{fill:var(--blue-l)}
.spd-g strong{font-size:2.6rem}
.spd-g.g-ap strong,.spd-g.g-a strong{color:var(--done)}
.spd-g.g-b strong,.spd-g.g-c strong{color:var(--blue-ink)}
.spd-g.g-d strong,.spd-g.g-f strong{color:var(--danger)}
.spd-notes{margin:8px 0 0;padding-left:20px}.spd-notes li{margin:5px 0}

/* ---------- annotate ---------- */
.ann-tb .spread{align-items:center;margin-bottom:10px}
.ann-tools{margin:0;flex-wrap:wrap}
.ann-cols{gap:6px}
.ann-sw{width:30px;height:30px;padding:0;border-radius:50%;border:2px solid var(--line);box-shadow:inset 0 0 0 2px var(--card)}
.ann-sw.on{border-color:var(--ink);outline:2px solid var(--sage);outline-offset:1px}
.ann-size{font-size:.85rem;color:var(--muted)}
.ann-stage{position:relative;margin-top:12px;border-radius:10px;min-height:120px}
.ann-stage.ann-over{outline:3px dashed var(--sage);outline-offset:2px}
.ann-drop{padding:40px 18px;border:2px dashed var(--line);border-radius:10px;text-align:center;background:var(--paper)}
.ann-drop p{margin:0 0 8px}
.ann-cv{display:block;max-width:100%;height:auto;margin:0 auto;touch-action:none;cursor:crosshair;border:1px solid var(--line);border-radius:4px;
  background:repeating-conic-gradient(var(--line) 0 25%,var(--card) 0 50%) 0 0/16px 16px}
.ann-cv[data-tool="text"]{cursor:text}
.ann-txt{position:absolute;z-index:2;min-width:140px;width:auto;padding:0 4px;border:1px dashed var(--sage);border-radius:4px;background:rgba(127,127,127,.15);font-family:"Segoe UI",system-ui,sans-serif;font-weight:600;line-height:1.2;outline:none}
@media (max-width:640px){.ann-sw{width:34px;height:34px}.ann-tools button{padding:6px 9px}}