/* Styles for Log a call (views/call.js).
   Loaded after /app/app.css on every /app/ page. Only the builder of that view edits this file, so
   parallel work never touches the same file. Use the shared classes in app.css first (see the
   class list at its top and CONTRACTS.md §10); put only this screen's own additions here, and
   start every selector with the view's root class (for example .view-call) so nothing leaks into
   other screens. Tokens (colors, fonts) come from /shared/tokens.css. */

/* A label + switch row inside a .fields card. tokens' `.fields > label` (a caption stacked over
   its input) is more specific than .check-row, so the row layout is set again here, with the
   label in body text rather than the small caption style. */
.view-call .fields > label.check-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:8px 16px}
.view-call .fields > label.check-row > span{font-size:1rem;color:var(--ink)}
/* `.fields input` gives every input a 32px minimum height and padding; the switch keeps its own. */
.view-call .fields input.toggle{min-height:0;padding:0}

/* The label's pen wash already shows which field has focus; keep the ring clear of the caption. */
.view-call .fields input:not(.toggle):focus-visible{outline-offset:1px}

/* 'What counts as an emergency?' */
.view-call .call-help{justify-self:start;padding-inline:4px}

/* The screenshots picked so far: a row each with the preview, the capture time and Remove. */
.view-call .call-photos{display:grid;gap:10px}
.view-call .call-photos .photo-item{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:8px 8px 8px 12px;background:var(--card);border:1px solid var(--line);border-radius:14px}
.view-call .call-photos .thumb{--thumb-size:64px;cursor:default}
.view-call .photo-meta{font-size:.92rem;color:var(--muted)}
.view-call .photo-item.is-preparing .photo-meta{color:var(--ink)}
.view-call .call-photo-note:empty{display:none}