/* Intake form (intake.html). Uses tokens from styles.css. */
.ix { --keep: #8a5a1f; --keep-tint: #f8eedf; --danger: #a33a2c; display: flex; flex-direction: column; gap: 24px; }
.ix [hidden], .ix[hidden] { display: none !important; }
.ix-top { max-width: 44rem; }
.ix-meta { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 4px 20px; }
.ix-meta strong { color: var(--ink); }

.ix-layout { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 48px; align-items: start; }
@media (max-width: 860px) { .ix-layout { grid-template-columns: minmax(0, 1fr); gap: 0; } .ix-rail { display: none; } }

.ix-rail { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 2px; }
.ix-rail a { display: flex; gap: 10px; align-items: baseline; padding: 6px 8px; border-radius: var(--radius-sm); color: var(--muted); text-decoration: none; font-size: 14px; }
.ix-rail a span { font-size: 12px; width: 14px; font-variant-numeric: tabular-nums; }
.ix-rail a:hover { background: var(--accent-tint); color: var(--ink); }
.ix-rail a.done { color: var(--ink); }
.ix-rail a.done span { color: var(--accent-text); }
.ix-bar { height: 4px; margin: 12px 8px 0; background: var(--border); border-radius: 4px; overflow: hidden; }
.ix-bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .3s; }
.ix-save { padding: 10px 8px 0; font-size: 12px; }
.ix-save.on::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--accent); vertical-align: 1px; }

.ix-form { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.ix-step { display: flex; flex-direction: column; gap: 20px; scroll-margin-top: 16px; }
@media (max-width: 480px) { .ix-step { padding: 18px; } }
.ix-h { font-family: var(--serif); font-weight: 500; font-size: 26px; line-height: 1.2; }
.ix-opt { color: var(--keep); margin-left: 6px; }

.ix-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 560px) { .ix-grid { grid-template-columns: minmax(0, 1fr); } }
.ix-full { grid-column: 1 / -1; }
.ix-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.ix-field > label, .ix-field > legend, .ix-q { font-weight: 600; font-size: 15px; line-height: 22px; padding: 0; }
.ix-field > legend { margin-bottom: 6px; }
.ix input[type=text], .ix input[type=email], .ix input[type=tel], .ix input[type=url], .ix select, .ix textarea {
  width: 100%; min-height: 44px; padding: 10px 12px; font: inherit; font-size: 16px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
}
.ix textarea { min-height: 84px; resize: vertical; line-height: 1.55; }
.ix select:focus-visible, .ix textarea:focus-visible, .ix label:focus-within { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.ix .ix-invalid { border-color: var(--danger); }
.ix-err { color: var(--danger); min-height: 0; }
.ix-err:empty { display: none; }
.ix-req { margin-left: 6px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-text); }
.ix-emailrow { display: flex; gap: 10px; align-items: center; }
.ix-emailrow input { flex: 1; font-size: 17px; }
.ix-captured { color: var(--accent-text); font-weight: 600; white-space: nowrap; }

.ix-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ix-chip { position: relative; }
.ix-chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.ix-chip span { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 12px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface); font-size: 14px; cursor: pointer; user-select: none; }
.ix-chip input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.ix-chip input:focus-visible + span { outline: 2px solid var(--accent-text); outline-offset: 2px; }

.ix-toolgrid { display: flex; flex-direction: column; gap: 14px; }
.ix-toolrow { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; align-items: start; margin: 0; padding: 0; border: 0; }
.ix-toolrow legend { float: left; width: 150px; padding-top: 7px; font-weight: 600; font-size: 14px; }
@media (max-width: 560px) { .ix-toolrow { grid-template-columns: minmax(0, 1fr); gap: 6px; } .ix-toolrow legend { float: none; padding-top: 0; } }

/* In your own words */
.ix-own { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: var(--radius-md); background: var(--accent-tint); }
.ix-own-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; }
.ix-composer { display: flex; flex-direction: column; background: var(--surface-raised); border: 1px solid var(--border-strong); border-radius: 12px; }
.ix-composer:focus-within { border-color: var(--accent-text); }
.ix .ix-composer textarea { min-height: 140px; border: 0; background: transparent; padding: 14px 16px 6px; border-radius: 12px 12px 0 0; }
.ix .ix-composer textarea:focus-visible { outline: none; }
.ix-interim { padding: 0 16px 8px; color: var(--muted); font-style: italic; }
.ix-interim::before { content: "Hearing: "; font-style: normal; font-weight: 600; color: var(--accent-text); }
.ix-tools, .ix-recbar { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-top: 1px solid var(--border); }
.ix-spacer { flex: 1; }
.ix-count { white-space: nowrap; padding-left: 4px; font-variant-numeric: tabular-nums; }
@media (max-width: 400px) { .ix-count { display: none; } }
.ix-icon { position: relative; flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--muted); cursor: pointer; }
.ix-icon:hover { background: var(--accent-tint); color: var(--ink); }
.ix-mic[aria-pressed=true] { background: var(--accent); color: var(--on-accent); }
.ix-mic[aria-pressed=true]::after { content: ""; position: absolute; inset: -4px; border: 2px solid var(--accent-text); border-radius: 12px; animation: ix-ring 1.4s ease-out infinite; }
@keyframes ix-ring { from { opacity: .7; transform: scale(.9); } to { opacity: 0; transform: scale(1.2); } }
.ix-pill { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 13px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface-raised); color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.ix-pill:hover { border-color: var(--accent-text); color: var(--accent-text); }
.ix-recdot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--danger); animation: ix-blink 1.1s steps(2) infinite; }
@keyframes ix-blink { 50% { opacity: .25; } }
.ix-rectime { min-width: 38px; font-weight: 600; font-size: 14px; font-variant-numeric: tabular-nums; }
#wave { flex: 1; min-width: 0; width: 100%; height: 32px; }
.btn.ix-btn-sm { min-height: 40px; padding: 0 14px; font-size: 14px; flex: none; }
.ix-memo { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 6px 10px; margin: 0 12px 10px; padding: 8px 6px 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.ix-memo-icon { display: inline-grid; color: var(--accent-text); }
.ix-memo-meta { display: flex; flex-direction: column; min-width: 0; }
.ix-memo-meta strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.ix-memo audio { grid-column: 1 / -1; width: 100%; height: 36px; }
.ix-memo audio[hidden] { display: none; }
.ix-transcript { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border: 1px dashed var(--border-strong); border-radius: var(--radius-md); background: var(--surface-raised); }
.ix-transcript #transcript-text { white-space: pre-wrap; }
.ix-notice { padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-raised); color: var(--muted); }
.ix-divider { display: flex; align-items: center; gap: 12px; color: var(--muted); }
.ix-divider::before, .ix-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }

/* Task rows */
.ix-procs { display: flex; flex-direction: column; gap: 14px; }
.ix-proc { display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.ix-proc.keep { border-color: var(--keep); background: var(--keep-tint); }
.ix-proc-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 12px; }
.ix-proc-top strong { font-family: var(--serif); font-weight: 500; font-size: 18px; }
.ix-proc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ix-seg { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface-raised); }
.ix-seg button { min-height: 36px; padding: 6px 14px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.ix-seg button.fix[aria-pressed=true] { background: var(--accent); color: var(--on-accent); }
.ix-seg button.keepbtn[aria-pressed=true] { background: var(--keep); color: #fff; }
.ix-keepnote { color: var(--keep); font-size: 14px; }
.ix-linkbtn { min-height: 40px; padding: 4px 8px; border: 0; background: none; color: var(--muted); font: inherit; font-size: 14px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.ix-linkbtn:hover { color: var(--danger); }
.ix-addbtn { align-self: flex-start; min-height: 44px; padding: 0 16px; border: 1px dashed var(--accent-text); border-radius: var(--radius-md); background: transparent; color: var(--accent-text); font: inherit; font-weight: 600; cursor: pointer; }

.ix-privacy { padding-left: 12px; border-left: 3px solid var(--border-strong); color: var(--muted); }
.ix-resume { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; padding: 8px 14px; border-radius: var(--radius-md); background: var(--accent-tint); }
.ix-preview { padding: 8px 12px; border: 1px dashed var(--border-strong); border-radius: var(--radius-md); color: var(--muted); }
.ix button.btn { border: 0; font: inherit; font-weight: 600; cursor: pointer; }
.ix button.btn:disabled { opacity: .6; cursor: progress; }

.ix-thanks { max-width: 44rem; }
.ix-summary { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 6px 16px; margin: 0; }
.ix-summary dt { color: var(--muted); }
.ix-summary dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) { .ix-summary { grid-template-columns: minmax(0, 1fr); } .ix-summary dd { margin-bottom: 6px; } }
.ix-status:empty { display: none; }

.ix-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ix-tools:has(#audio-file:focus-visible) label.ix-icon { outline: 2px solid var(--accent-text); }
@media (prefers-reduced-motion: reduce) { .ix *, .ix *::before, .ix *::after { animation: none !important; transition: none !important; } }