:root{font-family:system-ui,sans-serif;color-scheme:light dark;--bg:#f7f8f6;--surface:#fff;--text:#172c2a;--muted:#526765;--border:#cad8d3;--accent:#126d5e;--warn:#fff5df;--warntext:#60480e} :root[data-theme=dark]{color-scheme:dark;--bg:#101c1b;--surface:#192b29;--text:#e8f3ee;--muted:#b1c7be;--border:#46635b;--accent:#8cdbc4;--warn:#443519;--warntext:#ffe3a5} @media(prefers-color-scheme:dark){:root:not([data-theme]){color-scheme:dark;--bg:#101c1b;--surface:#192b29;--text:#e8f3ee;--muted:#b1c7be;--border:#46635b;--accent:#8cdbc4;--warn:#443519;--warntext:#ffe3a5}} *{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);line-height:1.7}header{border-bottom:1px solid var(--border);background:var(--surface)}.bar{max-width:980px;margin:auto;padding:16px 24px;display:flex;justify-content:space-between;align-items:center;gap:1rem}.bar label{font-size:.85rem}main{max-width:850px;margin:auto;padding:56px 24px}.intro{margin-bottom:32px}.eyebrow{color:var(--accent);font-size:.75rem;font-weight:700;letter-spacing:.12em}h1{font-size:clamp(2rem,5vw,3.4rem);line-height:1.25;letter-spacing:-.035em;margin:12px 0}h2{font-size:1.35rem;margin:0 0 8px}p{color:var(--muted);margin:.5rem 0}section{padding:32px 0;border-bottom:1px solid var(--border)}.notice{padding:18px 22px;background:var(--warn);color:var(--warntext);border:1px solid var(--warntext);border-radius:10px}.notice p{color:inherit}label{display:block;font-weight:650}textarea,select{font:inherit;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:8px}textarea{display:block;width:100%;padding:14px;margin:8px 0 16px;resize:vertical}select{padding:4px}.actions{display:flex;gap:10px;flex-wrap:wrap}button{font:inherit;font-weight:700;padding:11px 22px;border:1px solid var(--accent);border-radius:8px;background:var(--accent);color:var(--bg);cursor:pointer}.secondary{background:transparent;color:var(--text);border-color:var(--border)}:focus-visible{outline:3px solid #e39c28;outline-offset:3px}.caution{margin-top:18px;color:var(--warntext);background:var(--warn);padding:14px;border-radius:8px}footer{color:var(--muted);font-size:.85rem;margin-top:28px}@media(max-width:500px){main{padding:36px 18px}.bar{padding:14px 18px}section{padding:24px 0}}
.drop-zone{position:relative;margin:20px 0;padding:32px 20px;text-align:center;border:2px dashed var(--border);border-radius:12px;background:var(--surface)}.drop-zone.dragging,.drop-zone:focus-within{border-color:var(--accent);outline:2px solid var(--accent);outline-offset:2px}.drop-zone label{cursor:pointer;font-size:1.08rem}.drop-zone label span{display:inline-block;color:var(--accent);text-decoration:underline;margin-top:8px}.drop-zone p{font-size:.83rem}.file-input{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.table-scroll{max-width:100%;overflow:auto;border:1px solid var(--border);border-radius:8px;background:var(--surface)}.table-scroll table{border-collapse:collapse;min-width:100%;font-size:.9rem}.table-scroll th,.table-scroll td{padding:9px 12px;text-align:left;border-bottom:1px solid var(--border);white-space:nowrap}.table-scroll th{background:var(--bg)}.table-scroll input{width:12rem;max-width:100%;padding:7px;font:inherit;border:1px solid var(--border);border-radius:6px;color:var(--text);background:var(--surface)}#review h3{margin:22px 0 8px;font-size:1rem}
.review-controls{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}.review-controls button{font-size:.85rem;padding:7px 12px}.review-controls button:disabled{opacity:.5;cursor:not-allowed}.table-scroll small{display:block;white-space:pre-wrap;max-width:18rem;overflow-wrap:anywhere;color:var(--muted);font-size:.78rem;margin-top:6px}
.column-settings{display:flex;gap:5px;align-items:center;margin-top:6px}.column-settings select,.column-settings button{font-size:.78rem;padding:5px 7px;max-width:12rem}
label[hidden],.review-controls[hidden]{display:none}

/* Interactive surfaces stay distinct from cards in both color schemes. */
:root{--hover:#e5f3ee;--selected:#d2ebe2;--focus:#925b00;--button-text:#fff;--placeholder:#526765}
:root[data-theme=dark]{--hover:#26413b;--selected:#305a4e;--focus:#ffbf58;--button-text:#101c1b;--placeholder:#b1c7be}
@media(prefers-color-scheme:dark){:root:not([data-theme]){--hover:#26413b;--selected:#305a4e;--focus:#ffbf58;--button-text:#101c1b;--placeholder:#b1c7be}}
button{color:var(--button-text)}
button:hover:not(:disabled){background:var(--hover);color:var(--text);border-color:var(--accent)}
.secondary:hover:not(:disabled){background:var(--hover)}
button:active:not(:disabled){background:var(--selected);color:var(--text)}
select:hover,textarea:hover,.table-scroll input:hover{border-color:var(--accent)}
textarea::placeholder,.table-scroll input::placeholder{color:var(--placeholder);opacity:1}
:focus-visible{outline-color:var(--focus)}
.drop-zone.dragging,.drop-zone:focus-within{background:var(--selected)}
.caution{border:1px solid var(--warntext)}
select{max-width:100%}
@media(max-width:500px){.bar{flex-wrap:wrap}.bar>*{min-width:0}.actions button{flex:1 1 9rem}.table-scroll{scrollbar-width:thin}}

/* The preview keeps one clear path from input to review and output checking. */
:root{--subtle:#edf3ef;--card-border:#c6d9d0;--shadow:0 14px 38px rgba(20,61,50,.055)}
:root[data-theme=dark]{--subtle:#20332e;--card-border:#506b61;--shadow:none}
@media(prefers-color-scheme:dark){:root:not([data-theme]){--subtle:#20332e;--card-border:#506b61;--shadow:none}}
body{background:var(--bg)}
.site-header{background:var(--surface)}
.brand{font-size:1rem;letter-spacing:.01em}
.theme-control{display:flex;align-items:center;gap:.5rem;white-space:nowrap}
main{max-width:960px;padding-top:42px}
.intro{margin-bottom:24px}
.intro h1{font-size:clamp(2rem,4vw,3rem);line-height:1.25;margin:8px 0 12px}
.intro p{font-size:1.05rem}
.eyebrow{letter-spacing:.08em}
.notice{max-width:none;border-color:var(--card-border);border-left:5px solid var(--warntext);padding:14px 18px}
.notice p{margin:.15rem 0 0}
.flow{display:flex;flex-wrap:wrap;gap:.75rem;list-style:none;padding:0;margin:24px 0}
.flow li{display:flex;align-items:center;gap:.55rem;font-weight:700;color:var(--muted);font-size:.9rem}
.flow li span{display:grid;place-items:center;width:1.7rem;height:1.7rem;border-radius:50%;background:var(--selected);color:var(--text);font-size:.8rem;flex:none}
.step-card{padding:28px;background:var(--surface);border:1px solid var(--card-border);border-radius:16px;box-shadow:var(--shadow);margin:18px 0}
.step-heading{display:flex;gap:14px;align-items:flex-start;margin-bottom:22px}
.step-heading>div{min-width:0}
.step-heading h2{margin:0;font-size:1.45rem}
.step-heading p{margin:.25rem 0 0}
.step-number{font-size:.85rem;font-weight:800;color:var(--accent);background:var(--subtle);border:1px solid var(--card-border);border-radius:9px;padding:.35rem .55rem;line-height:1.4}
.drop-zone{margin:0;padding:28px 18px;background:var(--subtle);border-color:var(--card-border)}
.drop-zone:hover{border-color:var(--accent)}
.input-divider{display:flex;align-items:center;gap:.9rem;color:var(--muted);font-size:.85rem;margin:16px 0}
.input-divider:before,.input-divider:after{content:"";height:1px;background:var(--border);flex:1}
.phone-options{background:var(--subtle);border:1px solid var(--card-border);border-radius:10px;padding:14px 16px;margin:12px 0 20px}
.phone-options select{display:block;width:min(100%,27rem);margin:.45rem 0}
.phone-options p{margin:.4rem 0;font-size:.9rem}
details{margin-top:.5rem}
summary{cursor:pointer;font-weight:700;color:var(--accent);width:fit-content}
summary:hover{text-decoration:underline}
details p{margin-top:.5rem}
#encoding{display:block;width:min(10rem,100%);margin:6px 0 14px}
label[for=encoding]{margin-top:14px}
textarea{min-height:10rem}
.actions{margin-top:12px}
button:disabled{opacity:.58;cursor:not-allowed}
#progress:empty,#review-status:empty,#output-status:empty{display:none}
#results .step-heading{margin-bottom:12px}
#review{min-width:0}
.output-card{background:var(--subtle);border:1px solid var(--card-border);border-radius:10px;padding:16px;margin-top:18px}
.output-card h3{font-size:1.05rem;margin:0 0 8px}
.output-card label{margin-bottom:5px}
.output-card button{margin-top:8px}
.caution{margin-top:18px;border-color:var(--card-border);border-left:5px solid var(--warntext);padding:15px 17px}
.caution p{color:inherit;margin:.2rem 0}
.table-scroll{margin-top:8px}
.table-scroll td,.table-scroll th{min-width:10rem}
footer{padding:18px 0 8px}
@media(max-width:600px){main{padding:28px 16px}.step-card{padding:18px 14px;border-radius:12px}.step-heading{gap:9px}.step-number{font-size:.7rem;padding:.3rem .4rem}.flow{gap:.5rem 1rem;margin:18px 0}.drop-zone{padding:22px 12px}.output-card{padding:12px}.intro h1 br{display:none}}
@media(max-width:360px){.bar{padding:12px 16px}.step-card{padding:16px 12px}.flow li{font-size:.8rem}}

/* Keep optional explanations behind their controls while safety guidance remains visible. */
.phone-options{margin:0 0 16px;padding:12px 16px}
.phone-options>summary{color:var(--text);font-size:.95rem}
.phone-options[open]>summary{margin-bottom:12px}
.phone-options label{margin-top:8px}
.phone-options details{border-top:1px solid var(--card-border);padding-top:10px;margin-top:10px}
.field-hint{font-size:.85rem;margin:-8px 0 12px}
#summary{overflow-wrap:anywhere}
#summary.is-collapsed:not(.is-expanded){display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;max-height:3.4em;overflow:hidden}
.text-button{background:transparent;color:var(--accent);border:0;border-radius:0;text-decoration:underline;padding:0;font-size:.9rem;text-align:left}
.text-button:hover:not(:disabled),.text-button:active:not(:disabled){background:transparent;color:var(--text);border:0}
.next-action{background:var(--subtle);border-left:4px solid var(--accent);padding:9px 12px;border-radius:4px;color:var(--text);font-weight:650;margin:14px 0 18px}
.save-caveat{font-size:.88rem;margin:12px 0 8px}
.review-help{background:var(--subtle);border:1px solid var(--card-border);border-radius:8px;padding:8px 12px;margin:8px 0 14px}
.review-help p{margin:.5rem 0 0;font-size:.9rem}
.text-entry{border-top:1px solid var(--card-border);padding-top:14px;margin-top:18px}
.text-entry>summary{color:var(--text);font-size:.95rem}
.text-entry[open]>summary{margin-bottom:10px}
.text-entry p{font-size:.9rem}
.text-entry textarea{min-height:8rem}
.load-settings{margin:16px 0;padding:12px 0;border-top:1px solid var(--card-border)}
.load-settings>summary{color:var(--text)}
.load-settings .phone-options{margin:14px 0;background:transparent}
.drop-zone label span{background:var(--accent);color:var(--button-text);padding:10px 24px;border-radius:8px;text-decoration:none}
.demo-card{margin-top:12px!important;background:transparent!important;border:0!important;padding:0!important}
.demo-card strong{font-size:.9rem}
.demo-card p{display:none}
.scroll-hint{font-size:.85rem;color:var(--accent)}
.table-scroll .needs-review{background:var(--warn);color:var(--warntext)}
#save-state:not(:empty){font-weight:700;color:var(--text);padding:10px 0}
.inspection-details{font-size:.9rem;border-top:1px solid var(--card-border);padding-top:10px}
.demo-card{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 16px;margin:0 0 16px;background:var(--subtle);border:1px solid var(--card-border);border-radius:10px}
.demo-card strong{display:block}
.demo-card p{margin:2px 0 0;font-size:.9rem}
.demo-card button{flex:none}
@media(max-width:600px){.demo-card{align-items:stretch;flex-direction:column}.demo-card button{width:100%}}

button:disabled{opacity:1;background:var(--subtle);color:var(--muted);border-color:var(--border)}
.public-sample{margin-top:14px;padding:12px 14px;border:1px solid var(--border);border-radius:10px;background:var(--subtle)}
.public-sample summary{cursor:pointer;font-weight:600}.public-sample p{display:block;font-size:.9rem;line-height:1.7;overflow-wrap:anywhere}.public-sample a{color:var(--accent);text-decoration:underline}.public-sample .text-button{white-space:normal;text-align:left}

.output-header{font-size:.8rem;font-weight:normal;margin:.4rem 0}.full-value{max-width:22rem;margin-top:.4rem;font-size:.85rem}.full-value p{overflow-wrap:anywhere;white-space:pre-wrap;margin:.5rem 0}.full-value summary{cursor:pointer}