/* Capture the screen (js/capture.js) and the shared area bounding tool (js/area-bound.js). */
/* div.cap, not .cap: the Auction house module has its own span.cap (a picture caption) and must not turn into this full-screen layer (ST5b) */
div.cap { position: fixed; inset: 0; z-index: 400; background: #000; color: var(--text); font-family: var(--font);
  --ab-line: #fff; --ab-shade: rgba(0, 0, 0, .65); --ab-dim: rgba(0, 0, 0, .5); --ab-handle: #fff; --ab-handle-line: var(--accent); }
.cap-frame, .cap-host { position: absolute; }
.cap-frame { pointer-events: none; }
.cap-host svg:focus, .cap-host path:focus:not(:focus-visible) { outline: none; }
.cap-host circle:focus-visible { stroke-width: 4; outline: none; }

.cap-top { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px;
  padding: 6px 8px 6px 6px; border-radius: 999px; background: var(--glass-strong); border: 1px solid var(--line); box-shadow: var(--shadow);
  max-width: calc(100vw - 16px); flex-wrap: wrap; justify-content: center; pointer-events: none; transition: opacity .15s; }
/* only the buttons catch the mouse, so a corner under the bar can still be dragged; the bar fades while dragging */
.cap-top button { pointer-events: auto; }
.cap.busy .cap-top, .cap.busy .cap-modes, .cap.busy .cap-card { opacity: .15; pointer-events: none; }
.cap.busy .cap-top button { pointer-events: none; }
.ab-pick { display: inline-flex; gap: 2px; }
.ab-pick button { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 999px; border: 0; background: transparent; color: var(--text); }
.ab-pick button:hover { background: rgba(var(--tint), .1); }
.ab-pick button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.cap-hint { font-size: calc(13px * var(--ts)); color: var(--muted); max-width: 46ch; }
.cap-sketch { font-size: calc(12px * var(--ts)); color: var(--warn); }

.cap-modes { position: absolute; display: flex; gap: 2px; padding: 4px; border-radius: 14px; background: var(--glass-strong);
  border: 1px solid var(--line); box-shadow: var(--shadow); }
.cap-modes[hidden] { display: none; }
.cap-modes button { display: flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 10px; border: 0; background: transparent; color: var(--text); }
.cap-modes button:hover { background: rgba(var(--tint), .1); }
.cap-modes button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.cap-modes small { opacity: .7; font-size: calc(11px * var(--ts)); }

.cap-card { position: absolute; width: min(380px, calc(100vw - 16px)); max-height: calc(100vh - 80px); max-height: calc(100dvh - 80px); overflow: auto; padding: 10px 14px 14px; border-radius: 14px;
  background: var(--glass-strong); border: 1px solid var(--line); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 8px; }
.cap-card[hidden] { display: none; }
.cap-card header { display: flex; align-items: center; justify-content: space-between; }
.cap-card h3 { margin: 0; font-size: calc(15px * var(--ts)); }
.cap-card p { margin: 0; }
.cap-preview { max-width: 100%; max-height: 240px; object-fit: contain; align-self: flex-start; border-radius: 6px;
  background: repeating-conic-gradient(rgba(var(--tint), .12) 0 25%, transparent 0 50%) 0 0 / 16px 16px; }
.cap-text { width: 100%; resize: vertical; font: inherit; }
.cap-fb-form, .cap-marked { display: flex; flex-direction: column; gap: 8px; }
.cap-fb-form[hidden], .cap-marked[hidden], .cap-mark[hidden] { display: none; }
.cap-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cap-ask { flex: 1; min-width: 0; }
.cap-answer { white-space: pre-wrap; max-height: 220px; overflow: auto; }
.cap-check { display: flex; align-items: center; gap: 6px; }

/* while recording: the layer steps aside — corner marks round the area and a stop button only */
.cap-marks, .cap-stop { display: none; }
.cap.recording { background: transparent; pointer-events: none; }
.cap.recording > :not(.cap-marks):not(.cap-stop) { display: none; }
.cap.recording .cap-marks { display: block; position: absolute; pointer-events: none;
  background:
    linear-gradient(#ff4d4d, #ff4d4d) top left / 18px 3px, linear-gradient(#ff4d4d, #ff4d4d) top left / 3px 18px,
    linear-gradient(#ff4d4d, #ff4d4d) top right / 18px 3px, linear-gradient(#ff4d4d, #ff4d4d) top right / 3px 18px,
    linear-gradient(#ff4d4d, #ff4d4d) bottom left / 18px 3px, linear-gradient(#ff4d4d, #ff4d4d) bottom left / 3px 18px,
    linear-gradient(#ff4d4d, #ff4d4d) bottom right / 18px 3px, linear-gradient(#ff4d4d, #ff4d4d) bottom right / 3px 18px;
  background-repeat: no-repeat; }
.cap.recording .cap-stop { display: flex; align-items: center; gap: 8px; position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  pointer-events: auto; padding: 8px 16px; border-radius: 999px; border: 0; background: var(--glass-strong); color: var(--text); box-shadow: var(--shadow); }
.cap-stop .dot { width: 10px; height: 10px; border-radius: 50%; background: #ff4d4d; }
.cap-stop .time { font-variant-numeric: tabular-nums; }
body.capturing #dew-menu { display: none; }
body.capturing #toast { z-index: 410; }

@media (max-width: 600px) {
  .cap-hint { display: none; }
  .cap-modes button span:last-of-type { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .cap-stop .dot { animation: cap-blink 1.2s infinite; }
}
@keyframes cap-blink { 50% { opacity: .3; } }