:root {
  color-scheme: light;
  --ink: #1d1d1f;
  --muted: #6e6e73;
  --paper: #f5f5f7;
  --panel: #fff;
  --line: #e5e5ea;
  --blue: #0066cc;
  --blue-tint: #eaf3ff;
  --green: #247346;
  font: 112.5%/1.5 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Hiragino Sans", "Yu Gothic UI", system-ui, sans-serif;
  font-optical-sizing: auto;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
[hidden] { display: none !important; }
button, input, textarea, select { font: inherit; color: inherit; }
button, summary { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button { cursor: pointer; border: 0; border-radius: .65rem; background: #efeff2; padding: .65rem .85rem; min-height: 2.75rem; font-size: .8125rem; font-weight: 600; }
button:hover { background: #e5e5eb; }
button:active { filter: brightness(.94); }
button:disabled { cursor: not-allowed; color: #78787d; background: #efeff2; }
:is(button, input, textarea, select, summary, a):focus-visible { outline: 3px solid #0071e3; outline-offset: 3px; }
input, textarea, select { width: 100%; min-width: 0; min-height: 2.75rem; border: 1px solid #d3d3d8; border-radius: .65rem; background: #fff; padding: .65rem .75rem; font-size: .875rem; box-shadow: 0 1px 2px #00000003; }
input::placeholder, textarea::placeholder { color: #85858a; }
input[readonly], textarea[readonly], select:disabled { background: #f6f6f8; border-color: #e8e8ed; color: #747479; box-shadow: none; }
textarea { resize: vertical; line-height: 1.8; }
input[type="checkbox"], input[type="radio"] { width: 1.125rem; min-height: 1.125rem; margin: 0; accent-color: var(--blue); box-shadow: none; }
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 1.5rem; height: 4.5rem; padding: 0 max(2rem, calc((100vw - 1360px) / 2)); background: rgba(250,250,252,.86); backdrop-filter: saturate(160%) blur(22px); -webkit-backdrop-filter: saturate(160%) blur(22px); box-shadow: 0 1px 0 #00000006, 0 8px 16px #f5f5f780; }
.brand { display: flex; align-items: center; gap: .7rem; color: var(--ink); text-decoration: none; font-size: 1.1rem; letter-spacing: -.03em; font-weight: 650; }
.brand small { display: block; margin-top: .08rem; font-size: .5625rem; font-weight: 550; letter-spacing: .1em; color: var(--muted); }
.brand-icon { display: grid; place-items: center; width: 2.2rem; height: 2.4rem; border: 1px solid #d6e4f7; background: #e6f0ff; color: var(--blue); border-radius: .65rem; font-size: 1.25rem; font-weight: 500; }
.pill { font-size: .6875rem; color: var(--muted); padding: .35rem .7rem; border-radius: 1rem; background: #eaeaf0; }
.account { margin-left: auto; display: flex; align-items: center; gap: .75rem; font-size: .75rem; color: var(--muted); }
.account button { font-size: .75rem; }
main { max-width: 1424px; margin: 0 auto; padding: 1.75rem 2rem 3.5rem; }
.page-title { display: flex; justify-content: flex-end; margin-bottom: .8rem; }
.sync-status { display: inline-flex; align-items: center; gap: .4rem; color: var(--muted); font-size: .6875rem; }
.sync-status::before { content: ""; width: .375rem; height: .375rem; background: #8e8e93; border-radius: 50%; }
.notice { color: #6b5424; background: #fbf5e8; border: 1px solid #eee4cf; border-radius: .75rem; padding: .85rem 1rem; margin: 0 0 1.5rem; font-size: .75rem; line-height: 1.7; }
#previewNotice { color: #63636a; background: #eeeeF2; border: 0; margin-bottom: 1.5rem; }
.layout { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.voice-card { position: relative; padding: 1.75rem 1.5rem; border: 1px solid #e6e6ed; border-radius: 1.4rem; background: #f0f0f5; box-shadow: 0 2px 6px #1d1d1f03; }
.eyebrow { color: #727279; font-size: .6875rem; font-weight: 600; letter-spacing: .06em; margin: 0 0 .625rem; }
h1 { font-size: 1.75rem; letter-spacing: -.035em; line-height: 1.3; }
.voice-card h2 { margin: 0 0 .5rem; font-size: 1.6rem; font-weight: 650; letter-spacing: -.04em; line-height: 1.35; }
.muted, .small { color: var(--muted); font-size: .75rem; line-height: 1.75; }
.voice-card > .muted { margin: 0; }
.mode-switch { display: grid; grid-template-columns: 1fr 1fr; padding: .2rem; gap: .15rem; margin-top: 1.5rem; border-radius: .7rem; background: #e3e3e9; }
.mode-switch button { min-height: 2.3rem; padding: .5rem .25rem; border-radius: .5rem; background: transparent; font-size: .6875rem; color: #64646b; }
.mode-switch button.selected { background: #fff; color: var(--ink); box-shadow: 0 1px 4px #00000013, 0 0 0 .5px #00000005; }
.mic { --press-scale: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; width: 100%; min-height: 14rem; padding: 1.5rem 0 1rem; margin: .5rem auto 0; background: transparent; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.mic:hover, .mic:active { background: transparent; filter: none; }
.mic-core { display: grid; place-items: center; width: 6.5rem; height: 6.5rem; margin: .75rem 0 1.1rem; background: #0071e3; color: #fff; border: 1px solid #0064cf; border-radius: 50%; box-shadow: 0 0 0 .75rem #e0eaff, 0 0 0 1.5rem #e9edf7, 0 .6rem 1.5rem #0066cc20; transform: scale(var(--press-scale)); }
.mic svg { width: 2.4rem; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; }
.mic strong { font-size: .875rem; font-weight: 600; }
.mic small { font-size: .6875rem; color: var(--muted); font-weight: 400; }
.mic.listening .mic-core { background: #d73537; border-color: #c72a2d; box-shadow: 0 0 0 .75rem #f9dddd, 0 0 0 1.5rem #f3e5e8, 0 .6rem 1.5rem #d7353720; }
.mic:disabled .mic-core { background: #a2a4ad; border-color: #999ba3; box-shadow: 0 0 0 .75rem #e4e4e9, 0 0 0 1.5rem #eaeaf0; }
#speechHint { margin: .25rem 0 1.5rem; font-size: .625rem; text-align: center; color: #75757d; }
.transcript-label { display: flex; justify-content: space-between; gap: .5rem; font-size: .75rem; font-weight: 600; margin-bottom: .6rem; }
.transcript-label span { font-size: .625rem; font-weight: 400; color: var(--muted); }
#transcript { font-size: .8125rem; min-height: 6.5rem; border-color: #dedee5; }
.primary { color: #fff; background: var(--blue); font-size: .8125rem; padding: .8rem 1.25rem; border: 0; }
.primary:hover { background: #0071e3; }
.secondary { color: var(--blue); background: #e8eff9; }
.secondary:hover { background: #dce8f9; }
.wide { display: flex; align-items: center; justify-content: space-between; gap: .5rem; width: 100%; margin-top: .625rem; }
.voice-result { color: var(--green); font-size: .6875rem; line-height: 1.8; white-space: pre-line; margin-top: .75rem; }
.examples { border-top: 1px solid #dcdce4; padding-top: 1rem; margin-top: 1.25rem; color: var(--muted); font-size: .6875rem; line-height: 1.8; }
summary { cursor: pointer; }
.examples h3 { font-size: .875rem; font-weight: 600; color: var(--ink); margin: 0 0 .75rem; line-height: 1.7; }
.examples h3 span { display: block; font-size: .75rem; font-weight: 400; color: var(--muted); }
.examples p { margin: .6rem 0; }
.examples button { text-align: left; width: 100%; background: #e7e7ee; font-size: .8125rem; line-height: 1.7; padding: .8rem; }
.report-column { min-width: 0; }
.prompt-box { background: #eaf2ff; border: 1px solid #d7e5fa; border-radius: 1.25rem; padding: 1.35rem 1.5rem; margin: 0 0 1.5rem; }
.prompt-heading { display: flex; align-items: center; gap: .5rem; color: #43668f; font-size: .6875rem; font-weight: 600; letter-spacing: .015em; margin-bottom: .6rem; }
.live-dot { width: .4rem; height: .4rem; border-radius: 50%; background: var(--blue); }
#progress { margin-left: auto; color: var(--blue); font-size: .8125rem; font-variant-numeric: tabular-nums; }
#prompt { display: block; font-size: 1.125rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.7; color: #22344c; }
#requiredChips { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .5rem; margin-top: 1rem; }
#requiredChips .chip { display: grid; grid-template-columns: 1.25rem minmax(0,1fr); column-gap: .35rem; align-items: center; text-align: left; min-height: 3.5rem; padding: .6rem .65rem; background: #e1eaf8; color: #62748a; border: 1px solid transparent; border-radius: .65rem; }
#requiredChips .chip:hover { background: #d9e5f6; }
.required-mark { grid-row: span 2; font-size: 1rem; align-self: center; font-weight: 600; }
.required-name { font-size: .75rem; font-weight: 600; white-space: nowrap; }
.required-state { font-size: .625rem; font-weight: 400; margin-top: .15rem; }
#requiredChips .chip.next { color: #0057b5; border-color: #a3c5f5; background: #fff; box-shadow: 0 1px 3px #0066cc09; }
#requiredChips .chip.done { color: #316349; background: #ddece5; }
#requiredProgress { display: block; width: 100%; height: .25rem; border: 0; border-radius: .25rem; overflow: hidden; margin-top: 1rem; appearance: none; background: #d6e3f5; accent-color: var(--blue); }
#requiredProgress::-webkit-progress-bar { background: #d6e3f5; }
#requiredProgress::-webkit-progress-value { background: var(--blue); border-radius: .25rem; }
#requiredProgress::-moz-progress-bar { background: var(--blue); border-radius: .25rem; }
.form-card { background: #fff; border: 1px solid #e6e6eb; border-radius: 1.25rem; overflow: hidden; box-shadow: 0 3px 12px #1d1d1f03; }
.form-title { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.5rem 1.75rem; border-bottom: 1px solid #eeeef1; }
.form-title h2 { font-size: 1.25rem; line-height: 1.4; font-weight: 650; letter-spacing: -.035em; margin: 0; }
.form-title .eyebrow { margin-bottom: .35rem; }
.form-title > .small { font-size: .625rem; color: var(--muted); white-space: nowrap; }
.form-section { padding: 1.5rem 1.75rem 1.75rem; border-bottom: 1px solid #eeeef1; }
.section-heading { display: flex; align-items: center; gap: .65rem; font-size: .875rem; font-weight: 600; margin: 0 0 1.25rem; letter-spacing: -.01em; }
.section-number { font-size: .625rem; color: #85858c; font-weight: 500; font-variant-numeric: tabular-nums; }
.field-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1.3rem 1.25rem; }
.field { min-width: 0; scroll-margin-top: 6rem; }
.field.wide-field { grid-column: 1 / -1; }
.field-label { display: block; font-size: .75rem; font-weight: 550; line-height: 1.7; color: #515157; margin-bottom: .5rem; }
.required { font-size: .5rem; color: var(--blue); margin-left: .3rem; vertical-align: middle; }
.options { display: flex; flex-wrap: wrap; gap: .5rem; }
.option { display: flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: .55rem .75rem; border: 1px solid #e0e0e6; border-radius: .65rem; font-size: .75rem; cursor: pointer; background: #fafafb; }
.option:hover { background: #f0f3f9; }
.option:has(input:checked) { color: #005bb8; background: #edf4ff; border-color: #bdd5f8; }
.option:has(input:disabled) { color: #79797e; background: #f5f5f7; }
.field-note { font-size: .625rem; line-height: 1.7; color: #7b7b82; margin-top: .45rem; }
.lookup-row { display: flex; gap: .375rem; align-items: stretch; }
.lookup-row input { flex: 1; }
.lookup-row button { white-space: nowrap; color: var(--blue); font-size: .6875rem; padding: .55rem .65rem; background: #eef2f8; }
.lookup-name { font-size: .75rem; color: var(--green); margin-top: .5rem; overflow-wrap: anywhere; }
.lookup-name button { margin-left: .5rem; min-height: 2rem; font-size: .625rem; padding: .25rem .5rem; }
.field.changed :is(input,textarea,select) { border-color: #77bca0; background: #f2faf5; }
.control-group { padding: 1.4rem 1.75rem; font-size: .8125rem; color: var(--muted); }
.control-group summary { min-height: 1.75rem; font-weight: 550; }
.control-group .field-grid { margin-top: 1.25rem; }
.form-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.75rem; background: #fafafb; border-top: 1px solid #eeeef1; }
.form-footer > span { font-size: .6875rem; color: var(--muted); }
.applied-popup { position: fixed; z-index: 50; top: 1rem; left: 50%; transform: translateX(-50%); display: flex; align-items: flex-start; gap: .85rem; width: min(520px,calc(100vw - 24px)); max-height: 60dvh; overflow: auto; padding: 1.1rem; background: rgba(250,252,255,.96); border: 1px solid #ffffffdd; border-radius: 1.25rem; box-shadow: 0 16px 60px #17253826,0 2px 8px #1725380d; backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%); }
.applied-icon { display: grid; place-items: center; flex: 0 0 2.25rem; height: 2.25rem; color: #fff; background: var(--green); border-radius: 50%; font-size: 1.3rem; font-weight: 600; }
.applied-body { flex: 1; min-width: 0; }
.applied-body > strong { display: block; font-size: .9375rem; margin: .1rem 0 .5rem; }
.applied-detail + .applied-detail { margin-top: .65rem; border-top: 1px solid #e2e5e9; padding-top: .65rem; }
.applied-detail small { display: block; font-size: .6875rem; color: var(--muted); }
.applied-detail p { font-size: .875rem; font-weight: 550; margin: .2rem 0 0; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
#closeApplied, .dialog-top button { display: grid; place-items: center; min-width: 2.75rem; min-height: 2.75rem; padding: .25rem; border-radius: 50%; background: #e9e9ee; color: #6e6e73; font-size: 1.25rem; }
#message:not(:empty) { position: fixed; bottom: 1.5rem; left: 50%; z-index: 60; transform: translateX(-50%); width: max-content; max-width: calc(100vw - 32px); border-radius: 1rem; background: #292b30; color: #fff; padding: 1rem 1.25rem; font-size: .8125rem; line-height: 1.6; box-shadow: 0 8px 30px #0002; }
dialog { width: min(680px,calc(100% - 32px)); max-height: 85dvh; padding: 1.75rem; border: 1px solid #e5e5eb; border-radius: 1.5rem; background: #fcfcfe; box-shadow: 0 24px 100px #0003; color: var(--ink); }
dialog::backdrop { background: #171b254f; }
.dialog-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .75rem; }
.dialog-top h2 { font-size: 1.3rem; font-weight: 600; letter-spacing: -.03em; margin: 0; }
.search-row { display: flex; gap: .5rem; }
.result-item { display: flex; justify-content: space-between; gap: 1rem; width: 100%; text-align: left; margin-top: .5rem; background: #f0f2f6; padding: 1rem; }
.result-item small { color: var(--muted); }
.dialog-actions { display: flex; justify-content: flex-end; gap: .65rem; margin-top: 1.5rem; }
dl { margin: 0; } dt { color: var(--muted); font-size: .6875rem; margin-top: 1rem; } dd { margin: .35rem 0 0; padding-bottom: .85rem; border-bottom: 1px solid var(--line); font-size: .875rem; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.login-card { max-width: 440px; margin: 3rem auto; background: #fff; border: 1px solid var(--line); border-radius: 1.5rem; padding: 2rem; }
.login-card label { display: block; font-size: .8125rem; margin: 1.25rem 0; }
.login-card input { margin-top: .5rem; }
.login-card button { width: 100%; }
.boot-status { text-align: center; margin: 4rem auto; color: var(--muted); }
.login-card { max-width: 440px; margin: clamp(1rem,6vh,4rem) auto; padding: 2.5rem; box-shadow: 0 12px 40px #1d1d1f06; }
.login-symbol { display: grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: 1.75rem; background: var(--blue); color: #fff; border-radius: .875rem; font-size: 1.25rem; font-weight: 700; }
.login-card h1 { margin: .5rem 0 .875rem; }
.login-intro { color: var(--muted); font-size: .875rem; line-height: 1.8; margin: 0 0 1.75rem; }
.login-card input { min-height: 48px; font-size: 16px; }
.login-card label[for="loginPassword"] { margin-bottom: .5rem; }
.password-control { display: flex; align-items: center; position: relative; }
.password-control input { margin: 0; padding-right: 4rem; }
.password-control button { position: absolute; right: .25rem; width: auto; min-height: 44px; padding: .5rem .75rem; color: var(--muted); background: transparent; font-size: .75rem; }
.login-card #loginSubmit { margin-top: 1.5rem; min-height: 48px; display: flex; align-items: center; justify-content: center; gap: .75rem; }
.login-error { color: #a1251b; background: #fff2f0; border: 1px solid #f0ccc7; border-radius: .625rem; padding: .875rem; font-size: .8125rem; line-height: 1.7; overflow-wrap: anywhere; }
.login-help { margin: 1.5rem 0 0; color: var(--muted); font-size: .75rem; line-height: 1.8; }
@media(max-width:480px) { .login-card { padding: 1.75rem 1.25rem; } }
.site-footer { display: flex; justify-content: space-between; gap: 1rem; max-width: 1424px; margin: 0 auto; padding: 0 2rem 2rem; color: #85858c; font-size: .625rem; }
@media (min-width:1500px) { .layout { grid-template-columns: 360px minmax(0,1fr); gap: 2rem; } }
@media (max-width:1100px) { .layout { grid-template-columns: 300px minmax(0,1fr); gap: 1.25rem; } main { padding-inline: 1.5rem; } .voice-card { padding: 1.5rem 1.25rem; } .form-title, .form-section, .form-footer, .control-group { padding-inline: 1.25rem; } .field-grid { grid-template-columns: minmax(0,1fr); } }
@media (max-width:760px) {
  .topbar { height: 4rem; padding-inline: 1rem; gap: .75rem; }
  .brand { font-size: 1rem; } .pill { display: none; } .account { font-size: .6875rem; }
  main { padding: 1.1rem 1rem 2rem; }
  .page-title { margin-bottom: .65rem; } #previewNotice { margin-bottom: 1rem; padding: .75rem; font-size: .6875rem; }
  .layout { grid-template-columns: minmax(0,1fr); gap: 1rem; }
  .voice-card { position: static; padding: 1.25rem; }
  .voice-card h2 { font-size: 1.4rem; }
  .mode-switch { margin-top: 1rem; }
  .mic { min-height: 12rem; padding-top: 1rem; }
  .mic-core { width: 5.75rem; height: 5.75rem; }
  .prompt-box { padding: 1.1rem; margin-bottom: 1rem; }
  #prompt { font-size: 1rem; }
  #requiredChips { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .form-title, .form-section, .form-footer, .control-group { padding: 1.25rem; }
  .form-footer { flex-wrap: wrap; }
  .form-footer .primary { width: 100%; }
  .field { scroll-margin-top: 5rem; }
  input,textarea,select,#transcript { font-size: 1rem; }
  .site-footer { padding-inline: 1rem; }
  dialog { padding: 1.25rem; }
}
@media (prefers-reduced-transparency:reduce) { .topbar,.applied-popup { background: #fafafc; backdrop-filter: none; -webkit-backdrop-filter: none; } }
@media (prefers-contrast:more) {
  :root { --muted: #444; --line: #a3a3ad; }
  .topbar,.applied-popup { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; border: 1px solid #666; }
  .form-card,.voice-card,.prompt-box,input,textarea,select,.option,#requiredChips .chip { border: 1px solid #8b8b95; }
  .field-label,.field-note,.small,.eyebrow { color: #444; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; } }

/* Comfortable reading size throughout, including guidance and field captions. */
.eyebrow,.sync-status,.pill,.account,.prompt-heading { font-size: .75rem; }
.muted,.small,.notice,#previewNotice,.field-label,.option,.transcript-label,.control-group { font-size: .8125rem; }
.field-note,.form-title>.small,.form-footer>span,.required-state,.section-number,.transcript-label span,#speechHint,.site-footer { font-size: .75rem; }
.mode-switch button,.lookup-row button,.required-name { font-size: .8125rem; }
.brand small { font-size: .625rem; }
.voice-result { font-size: .8125rem; }
#applyVoice.is-applied { color: #74747c; background: #e4e4ea; box-shadow: none; }
#applyVoice.is-applied span { color: #74747c; }
.draft-bar { display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:0 0 1.25rem;padding:.9rem 1rem;border:1px solid #dcdfe7;border-radius:.8rem;background:#eff2f7;color:#535b68; }
.draft-bar strong { display:block;font-size:.8125rem;font-weight:500; }
.draft-bar span { display:block;font-size:.6875rem;margin-top:.25rem; }
.draft-actions { display:flex;gap:.5rem;flex-shrink:0; }
.draft-actions button { font-size:.75rem; }
.draft-actions button:not(.primary):not(:disabled) { color:var(--blue); }
.draft-entry { padding:1rem 0;border-bottom:1px solid var(--line); }
.draft-entry strong { display:block;font-size:.875rem; }
.draft-entry p { font-size:.75rem;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--muted); }
.draft-entry .draft-actions { justify-content:flex-end; }
.draft-reselect { color:#95651e; }
@media(max-width:760px) { .draft-bar { align-items:flex-start;flex-direction:column; } }
#requiredChips { grid-template-columns: repeat(auto-fit,minmax(145px,1fr)); }
@media(max-width:760px) { #requiredChips { grid-template-columns: repeat(2,minmax(0,1fr)); } .required-name { white-space: normal; } }