/* Concept skin. The existing Doc2FAQ browser engine and workflow stay intact. */
:root{color-scheme:light;--bg:#f0f3f1;--surface:#fffefa;--surface2:#fff7e6;--line:#26333b;--muted:#5e6a72;--text:#202b34;--mint:#ec9179;--gold:#b76549;--danger:#a43232;font-family:'DM Sans',system-ui,sans-serif}
html{scroll-behavior:smooth}body{background:#f0f3f1;color:var(--text)}body::before,#ambient-background{display:none!important}
button,input,select,textarea{font-family:'DM Sans',system-ui,sans-serif}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid #dc7054;outline-offset:3px}
.app-shell{max-width:1330px;padding:0 34px}.site-header{height:92px;border-bottom:3px solid var(--line);gap:20px}.brand{font-family:'Space Grotesk',sans-serif;font-size:27px;font-weight:700;letter-spacing:-.075em;color:var(--text)}.brand-mark{background:#f9d77b;color:var(--text);border:2px solid var(--line);border-radius:8px;box-shadow:3px 3px 0 var(--line);transform:rotate(-5deg)}.brand-accent{color:#e9866d}
.retro-nav{margin-left:auto;display:flex;gap:24px;align-items:center;font-size:12px;font-weight:900;letter-spacing:.02em}.retro-nav a{text-decoration:none}.retro-nav a:hover{text-decoration:underline;text-underline-offset:4px}.preview-pill{border:2px solid var(--line);border-radius:7px;background:#f8d77b;color:var(--text);font-size:10px;font-weight:900;box-shadow:3px 3px 0 var(--line)}.signal-dot{background:#6dc59b;box-shadow:none;border:1px solid var(--line)}
.hero{padding:66px 0 76px;gap:70px;grid-template-columns:1.15fr .85fr}.hero .eyebrow{color:#ad634f;font-weight:900;letter-spacing:.12em;margin-bottom:17px}.hero h1{font-family:'DM Sans',sans-serif;font-size:clamp(49px,5.5vw,80px);font-weight:900;letter-spacing:-.08em;line-height:1.06;max-width:740px}.hero h1 em{color:#df806b;font-weight:900}.hero-copy{color:#54636b;font-size:16px;line-height:1.7;margin:22px 0}.hero-chips{color:#3d4e55;font-size:12px;font-weight:700}.hero-chips span{display:inline-flex;align-items:center;background:#e0e9e4;border:1px solid #b5c4bf;padding:7px 11px;border-radius:20px}
.hero-art{border:3px solid var(--line);border-radius:12px;background:#f9d777;box-shadow:11px 12px 0 var(--line);transform:rotate(3deg);padding:25px}.art-top,.art-bottom{color:#344851}.art-skeleton{background:#d9b85f}.art-question,.art-answer{border:2px solid var(--line);border-radius:7px;background:#fffefa;color:var(--text);font-weight:700;box-shadow:3px 3px 0 #202b3423}.art-answer{background:#b4dbd0;color:var(--text)}.art-question span{background:#f9b19d;color:var(--text);border:1px solid var(--line)}.art-answer span{background:#f8e2a3;color:var(--text);border:1px solid var(--line)}.art-bottom{border-color:#9e8345}.art-bottom span:last-child{color:#344851}
.demo-links{gap:12px;margin:0 0 18px}.demo-disclosure{color:#68737c;font-size:12px}.demo-disclosure a{color:#995f4e;text-decoration:underline}
.workspace{border-top:3px solid var(--line);padding-top:44px}.workspace-heading{margin-bottom:27px}.workspace-heading .eyebrow{color:#a85e4a}.workspace h2{font-family:'DM Sans',sans-serif;font-size:35px;font-weight:900;letter-spacing:-.07em}.step-number{color:#67747a;font-weight:900}
.project-toolbar{border:2px solid var(--line);border-radius:10px;background:#fbe7b9;padding:21px;gap:12px;box-shadow:4px 5px 0 var(--line)}.project-name input,.mode-select,.export-select,.result-actions input,.review-filters select,.review-status-select,.faq-edit-question,.faq-edit-answer,.download-name-field,input#search-input,textarea{background:#fffefa;color:var(--text);border:2px solid #374751;border-radius:7px}.project-name input{min-height:42px}.project-toolbar .field-label{color:#34434c}.save-work-help,.autosave-controls,.field-help{color:#66727b}.autosave-controls input,.export-options input{accent-color:#e68b73}
.panel{border:3px solid var(--line);border-radius:12px;background:#fffefa;box-shadow:7px 8px 0 var(--line);padding:27px}.workspace-grid{gap:29px;margin-bottom:32px}.step-label{display:inline-block;background:#f5d97b;padding:6px 10px;border:2px solid var(--line);border-radius:5px;color:var(--text);font-weight:900}.panel h3{font-size:23px;font-weight:900;letter-spacing:-.055em;margin-top:14px}.panel-intro,.mode-description{color:#53636c;font-size:12px}.panel-intro code{color:#8d4f3f;background:#fcead6}.file-symbol{color:#df806b}.field-label{color:#37454d;font-weight:900}.input-meta,.source-filename{color:#66737b}textarea::placeholder{color:#8a969b}
.button{border:2px solid var(--line);border-radius:7px;padding:11px 14px;font-weight:900;box-shadow:2px 3px 0 var(--line);transition:transform .18s,box-shadow .18s}.button:not(:disabled):hover{transform:translate(1px,1px);box-shadow:1px 2px 0 var(--line)}.button-primary{background:#f69e84;color:var(--text)}.button-primary:hover{background:#ffa98e}.button-secondary{background:#fffefa;color:var(--text)}.button-secondary:hover{background:#f4e5c5}.button-quiet{color:#7f493d;box-shadow:none;border:0;background:transparent;padding:7px 8px}.button:disabled{box-shadow:none;opacity:.44}.status{color:#59666d}.status.success{color:#247554}.status.error{color:#a43232}
/* Give autosave and helper text the requested high-contrast treatment. */
.autosave-controls,.field-help{color:#000}
/* This is a destructive browser-storage action, not a subtle text link. */
#clear-saved-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:43px;padding:5px 5px;border:2px solid #8d3b32;border-radius:8px;background:#ffe0d9;color:#131313;font-size:12px;font-weight:900;box-shadow:3px 3px 0 #7d2d24;white-space:nowrap}
#clear-saved-btn::before{content:"✕";display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#a53932;color:#fff;font-size:13px;font-weight:900}
#clear-saved-btn:not(:disabled):hover{background:#ffc9bd;box-shadow:2px 2px 0 #8d3b32;transform:translate(1px,1px)}
.count{color:var(--text);background:#add8ca;border:2px solid var(--line);border-radius:6px;font-weight:900}.result-actions input{color:var(--text);background:#fffefa}.result-actions input:disabled{opacity:.5}.review-toolbar .button{color:#874b3f}.export-options{color:#5e6a72}.empty-state{border:2px dashed #8c9c9d;border-radius:8px;background:#f9f8f0}.empty-icon{background:#f9d779;border:2px solid var(--line);color:var(--text);box-shadow:3px 3px 0 var(--line)}.empty-state p{color:#647179}
.faq-editor,.faq-item{border:2px solid var(--line);border-radius:8px;background:#f5f8f5}.faq-editor-index{color:#925643;font-weight:900}.faq-editor .field-label{color:#3e4b52}.editor-action{background:#fffefa;color:var(--text);border:1px solid #374751;border-radius:5px}.editor-action:hover{background:#fce5bd}.editor-action.editor-remove{color:#ad3434}.faq-edit-question{font-weight:750}.faq-edit-answer{color:var(--text)}.faq-item p{color:#52616a;border-color:#bdc9c6}.faq-item summary::after{color:#e08b74}
.review-filters .field-label{color:#303e47}.source-badge{color:#8d4e33}.source-details,.similar-review{border-color:#cbd4d1}.source-details summary,.similar-review summary{color:#89513f}.source-details pre,.source-viewer-content{color:#3d4c54;background:#f2f2eb}.source-viewer{background:#f4f5ec;border:2px solid var(--line)}.source-line-number{color:#78868b}.source-line-selected{background:#bdebdc;border-color:#619c86}.source-line mark{color:#244538}.download-name-field{background:#fffefa;color:var(--text);border:2px solid var(--line)}.download-name-field input{color:var(--text)}.download-name-field span{color:#925440;border-color:#a9b5b1}
.footnote{border:2px solid var(--line);background:#e0eae3;border-radius:10px;margin:44px 0 60px}.footnote-icon{color:var(--text);border:2px solid var(--line);font-weight:900}.footnote p{color:#4f5d63}.footnote strong{color:var(--text)}.site-footer{border-top:3px solid var(--line);color:#647078;font-weight:800;padding-bottom:45px}.site-footer a{text-decoration:underline;text-underline-offset:3px}
#export-preview{background:#fffefa;color:var(--text);border:3px solid var(--line);border-radius:12px;box-shadow:9px 10px 0 var(--line)}#export-preview::backdrop{background:#23313ab3}.preview-note{color:#526069}#preview-content{border:2px solid #d6deda}
@media(max-width:1100px){.retro-nav{gap:12px}.preview-pill{font-size:9px}.hero{gap:35px}.panel{padding:22px}.workspace-grid{gap:21px}}
@media(max-width:800px){.app-shell{padding:0 22px}.site-header{height:auto;min-height:89px;flex-wrap:wrap;padding:15px 0}.preview-pill{order:3;width:100%;justify-content:center}.hero{grid-template-columns:1fr;gap:40px}.hero-art{max-width:520px}.workspace-grid{grid-template-columns:1fr}.results-list{max-height:none}}
@media(max-width:520px){.app-shell{padding:0 16px}.brand{font-size:24px}.retro-nav{font-size:10px;gap:10px}.hero{padding:52px 0}.hero h1{font-size:47px}.hero-copy{font-size:14px}.hero-art{display:none}.workspace h2{font-size:28px}.panel{padding:17px;box-shadow:4px 5px 0 var(--line)}.result-actions{display:grid;grid-template-columns:1fr 1fr}.result-actions input{grid-column:1/-1}.result-actions .export-select{grid-column:1/-1}.result-actions button{white-space:normal}.field-label{letter-spacing:.08em}.review-filters{align-items:flex-start}.review-toolbar{gap:6px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.button{transition:none}}
/* Mobile workspace: prevent horizontal scrolling and keep every control thumb-friendly. */
@media(max-width:650px){
  .site-header{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;height:auto;padding:17px 0}
  .retro-nav{margin-left:0;display:flex;justify-content:flex-start;flex-wrap:wrap;gap:12px 20px;line-height:1.5}
  .retro-nav a{min-height:34px;display:inline-flex;align-items:center}
  .preview-pill{order:initial;width:100%;min-height:38px;justify-content:center}
  .hero h1{font-size:clamp(38px,10vw,53px);overflow-wrap:anywhere}
  .hero-chips{gap:8px}
  .workspace-heading{align-items:start;gap:9px}
  .workspace-heading .step-number{flex-shrink:0}
  .project-toolbar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;padding:17px}
  .project-name,.save-work-help,.autosave-controls{grid-column:1/-1;min-width:0}
  #save-project-btn,#open-project-btn{width:100%;min-width:0;white-space:normal}
  .autosave-controls{display:grid;grid-template-columns:minmax(0,1fr);gap:11px}
  .autosave-controls label{min-width:0}
  #clear-saved-btn{width:100%;min-height:44px;white-space:normal}
  #save-status{overflow-wrap:anywhere}
  .panel,.project-toolbar,.workspace-grid{min-width:0}
  .button,.editor-action,.mode-select,.export-select,.review-filters select,.review-status-select{min-height:44px}
  .actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
  .actions #generate-btn{grid-column:1/-1;min-width:0}
  .actions #choose-file-btn,.actions #sample-btn{min-width:0;white-space:normal}
  .result-actions{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:9px}
  .result-actions input,.result-actions .export-select{grid-column:1/-1;width:100%;min-width:0}
  .result-actions button{min-width:0;white-space:normal;padding:10px}
  .review-filters{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
  .review-filters .field-label{grid-column:1/-1}
  .review-filters select{width:100%;min-width:0}
  .review-filters .button{white-space:normal}
  .review-toolbar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
  .review-toolbar .button{min-width:0;white-space:normal}
  .export-options{align-items:stretch;flex-direction:column;gap:10px}
  .export-options .button{width:100%}
  .faq-editor{padding:12px}
  .faq-editor-heading{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
  .faq-editor-actions{flex-wrap:wrap;gap:7px}
  .editor-action{min-height:42px}
  .source-viewer{min-width:0}
  .input-meta{gap:8px;flex-wrap:wrap}
  #export-preview{width:calc(100% - 20px);padding:15px}
  #preview-content{padding:14px}
  input[type=text],input[type=search],select,textarea{font-size:16px}
}
@media(max-width:370px){
  .app-shell{padding:0 12px}
  .brand{font-size:22px}
  .panel{padding:14px}
  .panel-top{gap:8px}
  .hero h1{font-size:36px}
  .workspace h2{font-size:clamp(25px,8vw,28px)}
  .review-toolbar{grid-template-columns:minmax(0,1fr)}
  .review-toolbar .button{width:100%}
  .input-meta{font-size:10px}
}