/* Component styling. Drawably attaches SVG chrome to these; CSS only handles layout, spacing, colour. */

/* big button: record, mark, stop, submit. Tone (danger/neutral) comes from sketch.js's drawablyButton call, not CSS. */
.big-btn { display: flex; align-items: center; justify-content: center; width: 100%; height: 64px; font-size: 17px; font-weight: 500; cursor: pointer; text-decoration: none; }
.big-btn:disabled { opacity: .5; }
/* match the neutral tone drawably ships to our ink-2 token instead of its default grey */
.drawably-button--neutral { --drawably-stroke: var(--ink-2); --drawably-fill: var(--ink-2); }

/* record card: timer + recording dot */
.record-card { padding: var(--sp-4); margin-bottom: var(--sp-4); }
.rec-dot-row { display: flex; align-items: center; gap: var(--sp-3); }
.rec-dot { width: 12px; height: 12px; margin: 6px 8px 6px 6px; flex-shrink: 0; display: inline-block; --drawably-stroke: var(--error); --drawably-fill: var(--error); }
.rec-dot .drawably-svg { animation: pulse 1.2s infinite; }
@media (prefers-reduced-motion: reduce) { .rec-dot .drawably-svg { animation: none; } }
.timer-display { font-family: var(--font-mono); font-size: 48px; margin: 0; }
.live-text { color: var(--ink-3); white-space: pre-wrap; max-height: 22vh; overflow: auto; margin: var(--sp-2) 0 var(--sp-4); }

/* row */
.row { display: flex; align-items: center; gap: var(--sp-3); min-height: 56px; padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; }
.row:last-child { border-bottom: 0; }
.row .row-main { flex: 1; min-width: 0; }
.row .row-title { font-weight: 500; }
.row .row-sub { font-size: 13px; color: var(--ink-3); }
.row .chevron { color: var(--ink-3); }
.rowlist { padding: 0 var(--sp-2); }

/* chip */
.chip { display: inline-flex; align-items: center; height: 32px; padding: 0 var(--sp-3); border-radius: 999px; font-family: var(--font-mono); font-size: 13px; margin: 0 var(--sp-2) var(--sp-2) 0; cursor: pointer; color: var(--pen); background: none; border: 0; text-decoration: none; }
.chip.unnamed { --drawably-stroke: var(--warn); --drawably-fill: var(--warn); color: var(--warn); }

/* sheet */
.sheet-overlay { position: fixed; inset: 0; background: rgba(24,24,27,.4); display: flex; align-items: flex-end; z-index: 50; }
.sheet { background: var(--paper); color: var(--ink); width: 100%; padding: var(--sp-5); padding-bottom: calc(var(--sp-5) + env(safe-area-inset-bottom)); max-width: 680px; margin: 0 auto var(--sp-4); }
.sheet-handle { width: 36px; height: 4px; background: var(--ink-3); border-radius: 2px; margin: 0 auto var(--sp-4); }
.sheet .field { margin-bottom: var(--sp-3); }

/* banner */
.banner { position: fixed; top: calc(var(--sp-3) + env(safe-area-inset-top)); left: var(--sp-3); right: var(--sp-3); max-width: 420px; margin: 0 auto; background: var(--success); color: #fff; padding: var(--sp-3); border-radius: var(--radius-sm); text-align: center; font-weight: 500; z-index: 60; opacity: 0; transform: translateY(-8px); transition: opacity .16s, transform .16s; pointer-events: none; }
.banner.show { opacity: 1; transform: translateY(0); }
.banner.warn { background: var(--warn); }

/* stage line */
.stage-line { font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); display: flex; align-items: center; gap: 6px; }
.stage-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pen); }
.stage-line.working .stage-dot { animation: pulse 1.2s infinite; }
@media (prefers-reduced-motion: reduce) { .stage-dot { animation: none !important; } }

/* fields: .field is spacing + label, unsketched; .field-box wraps only the input and gets drawablyInput's chrome */
.field { margin-bottom: var(--sp-4); }
.field-box { display: block; width: 100%; }
.field-box input, .field-box textarea { width: 100%; }
label { display: block; font-size: 13px; color: var(--ink-3); margin-bottom: var(--sp-1); }
button.link { background: none; border: 0; color: var(--pen); cursor: pointer; padding: var(--sp-2) 0; text-align: left; }
button.link:disabled { color: var(--ink-3); cursor: default; }
button.ghost { padding: var(--sp-2) var(--sp-3); cursor: pointer; min-height: 44px; color: var(--ink-2); }
.sk-toggle, .sk-check { display: inline-block; }

/* states */
.skeleton { background: linear-gradient(90deg, var(--line), var(--paper), var(--line)); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: var(--radius-sm); height: 56px; margin-bottom: var(--sp-2); }
.install-hint { display: flex; align-items: center; gap: var(--sp-3); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-5); }
.install-hint p { flex: 1; color: var(--ink-2); font-size: 14px; }
.install-hint button { flex: none; }
.empty-state { padding: var(--sp-5) 0; }
.empty-state p { color: var(--ink-3); }
.error-state { padding: var(--sp-4) 0; color: var(--ink-3); }
.error-state .msg { margin-bottom: var(--sp-3); }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none !important; } }

/* ios armed overlay */
.arm-overlay { position: fixed; inset: 0; background: var(--paper); color: var(--ink); display: flex; align-items: center; justify-content: center; text-align: center; padding: calc(var(--sp-6) + env(safe-area-inset-top)) var(--sp-6) calc(var(--sp-6) + env(safe-area-inset-bottom)); z-index: 70; font-size: 22px; cursor: pointer; }

.actions-list { list-style: none; padding: 0; margin: 0; }
.actions-list li { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-2) 0; }
.actions-list .sk-check { margin-top: 2px; }
.quote { border-left: 3px solid var(--pen); padding-left: var(--sp-3); margin: var(--sp-2) 0; font-style: italic; }
.note-actions { display: flex; justify-content: flex-end; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-3); }
#deleteBtn { color: var(--error); }
details.transcript summary { cursor: pointer; font-weight: 500; padding: var(--sp-2) 0; }

.people-index { position: fixed; right: 4px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; font-size: 11px; color: var(--ink-3); z-index: 5; }
.people-index button { background: none; border: 0; color: var(--ink-3); font: inherit; padding: 2px 5px; cursor: pointer; }