/* Layout and state presentation extend the shared UI kit. */
body { margin:0; background:var(--bg); color:var(--text); font:var(--text-base)/var(--leading-body) var(--font-sans); }
header { display:flex; align-items:center; justify-content:space-between; padding:var(--space-4); gap:var(--space-4); border-bottom:1px solid var(--border-strong); }
.internal { display:block; font-size:var(--text-sm); }
main { max-width:48rem; margin:auto; padding:var(--space-4) var(--space-4) 8rem; }
button,select,textarea { font:inherit; min-height:var(--control-height); max-width:100%; box-sizing:border-box; }
button { cursor:pointer; padding:var(--space-2) var(--space-3); border:1px solid var(--border-strong); border-radius:var(--radius-sm); background:var(--accent-soft); color:var(--text); }
button:disabled { cursor:default; opacity:.65; }
button:focus-visible,textarea:focus-visible,select:focus-visible { outline:var(--focus-width) solid var(--focus-ring); outline-offset:var(--focus-offset); }
textarea,select { display:block; width:100%; padding:var(--space-2); margin:var(--space-2) 0 var(--space-4); }
label { display:block; }
input[type=radio],input[type=checkbox] { width:1.3rem; height:1.3rem; vertical-align:middle; }
.ticket { display:block; width:100%; text-align:left; margin:var(--space-3) 0; padding:var(--space-4); background:var(--surface); }
.ticket small { display:block; }
.list-heading { display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); }
.ticket,.list-heading,#user { overflow-wrap:anywhere; min-width:0; }
#user { max-width:40%; font-size:var(--text-sm); }
#notice,#request-status { padding:var(--space-3); border-left:4px solid var(--accent-text); overflow-wrap:anywhere; }
#detail,#request-panel,#settings,#navigation { background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--radius); padding:var(--space-4); margin:var(--space-4) 0; overflow-wrap:anywhere; }
.question-section { padding:var(--space-3) 0; border-bottom:1px solid var(--border); }
.question-section p { white-space:pre-wrap; }
.playback { display:flex; flex-wrap:wrap; gap:var(--space-3); margin:var(--space-4) 0; }
fieldset { border:1px solid var(--border-strong); padding:var(--space-3); }
.option { padding:var(--space-2) 0; }
#bottom { position:fixed; bottom:0; left:0; right:0; display:flex; justify-content:center; align-items:center; gap:var(--space-1); padding:var(--space-2) var(--space-1) max(var(--space-2),env(safe-area-inset-bottom)); background:var(--surface-sunken); border-top:1px solid var(--border-strong); }
#bottom button { flex:1; max-width:8rem; min-width:0; font-size:var(--text-sm); padding:var(--space-2) var(--space-1); }
#bottom #record { border-radius:50%; min-height:4.2rem; max-width:4.2rem; background:var(--accent); color:var(--on-accent); font-weight:var(--weight-bold); }
#bottom #record[aria-pressed=true] { background:var(--danger-fill); color:var(--on-danger-fill); }
#bottom.mirrored #nav { order:5; }
#bottom.mirrored #menu { order:-1; }
[hidden] { display:none!important; }