/* Read This Doc 1.4 – Brief This Doc calm look: warm paper, ink blue, soft grey cards, rust accent */
:root{
  color-scheme:light;
  --paper:#fffaf3;--card:#fffdf9;--ink:#202b35;--muted:#5c6872;--line:#dddeda;
  --accent:#b64b24;--accent-dark:#943b1b;--blue:#243e52;--blue-dark:#192e3e;
  --soft:#f0f3f3;--soft-line:#dce3e4;--field:#cbd4d6;--steel:#708896;
  --hilite:#fbece4;
  --font:21px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:28px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;line-height:1.65;-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
a{color:inherit;text-underline-offset:4px}
img{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit}
button{cursor:pointer;color:inherit;background:transparent;border:1px solid var(--field);border-radius:5px;min-height:44px;padding:10px 16px;transition:background .15s,border-color .15s}
button:hover{background:var(--soft)}
button:disabled{cursor:default;opacity:.5}
button,a,input,textarea,select{touch-action:manipulation}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.orange{color:var(--accent)}

/* Site bar – same as the other Brief This Doc pages */
.siteBar{border-bottom:1px solid var(--line)}
.siteInner{max-width:1160px;margin:0 auto;padding:0 40px;min-height:100px;display:flex;align-items:center;justify-content:space-between;gap:30px}
.logo{color:var(--ink);font-size:27px;font-weight:800;letter-spacing:-1.2px;text-decoration:none;white-space:nowrap}
.siteInner nav{display:flex;flex-wrap:wrap;gap:12px 25px;font-size:13px}
.siteInner nav a{color:var(--muted);text-decoration:none}
.siteInner nav a:hover{color:var(--accent)}
.siteInner nav a[aria-current]{color:var(--accent);text-decoration:underline;text-underline-offset:7px}

/* App header */
.appHead{max-width:1160px;margin:0 auto;padding:48px 40px 28px;display:flex;justify-content:space-between;align-items:center;gap:28px}
.pageTitle{min-width:0}
.pageTitle h1{margin:0 0 16px;font-size:clamp(36px,4.8vw,56px);font-weight:650;line-height:1.1;letter-spacing:-2px}
.brand{color:var(--ink);text-decoration:none}
.brand:hover{color:var(--accent)}
.mark{display:inline-grid;place-items:center;vertical-align:middle;width:42px;height:42px;margin-right:10px;border:1px solid #cdd8db;border-radius:50%;background:var(--soft);color:var(--accent);font-size:16px;letter-spacing:0}
.tagline{margin:0;max-width:760px;font-size:15px;color:var(--muted);line-height:1.75}
.settingsBtn,.stepBtn{display:inline-flex;align-items:center;gap:8px;flex-shrink:0;color:var(--blue);border-color:#c5cfd2;font-size:13px;font-weight:600}
.settingsBtn:hover,.stepBtn:hover{background:var(--soft);border-color:var(--blue)}
.gear{font-size:16px;line-height:1}

main{width:100%;max-width:1160px;margin:0 auto;padding:0 40px 30px}

/* Voice hint */
.voiceHint{display:flex;gap:14px;align-items:center;background:var(--soft);color:var(--muted);border:1px solid var(--soft-line);border-left:3px solid var(--steel);border-radius:5px;margin:0 0 30px;padding:15px 19px;font-size:13px}
.voiceHint p{margin:0;flex:1 1 220px;line-height:1.7}
.voiceHint strong{color:var(--ink)}
.voiceHint a{color:var(--blue)}
.hintIcon{font-size:17px}
a.hintAction{flex-shrink:0;font-size:12px;font-weight:600;color:var(--blue);border-bottom:1px solid var(--blue);padding:3px 0;text-decoration:none;white-space:nowrap}
a.hintAction:hover{color:var(--accent);border-color:var(--accent)}

/* Start card */
.startGrid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.8fr);gap:48px;align-items:center;padding:30px;background:var(--soft);border:1px solid var(--soft-line);border-radius:10px}
.actions{display:grid;gap:18px;min-width:0}
.upload,.paste{display:grid;grid-template-columns:42px minmax(0,1fr) 20px;grid-template-rows:auto auto;column-gap:15px;row-gap:5px;align-items:center;text-align:left;width:100%;min-height:135px;padding:25px 24px;border-radius:6px;border:1px solid #c7d2d6;background:var(--paper);color:var(--ink)}
.upload{background:var(--blue);border-color:var(--blue);color:#fff}
.upload:hover{background:var(--blue-dark)}
.paste:hover{background:#fff;border-color:var(--blue)}
.upload strong,.paste strong{grid-column:2;grid-row:1;font-size:22px;line-height:1.25;font-weight:600;letter-spacing:-.5px}
.upload>span:nth-child(3),.paste>span:nth-child(3){grid-column:2;grid-row:2;font-size:12px;line-height:1.6;color:var(--muted)}
.upload>span:nth-child(3){color:#dbe4eb}
.uploadIcon,.pasteIcon{grid-column:1;grid-row:1 / span 2;font-size:28px;line-height:1;width:42px;text-align:center}
.paste .pasteIcon,.paste .arrow{color:var(--accent)}
.arrow{grid-column:3;grid-row:1 / span 2;align-self:center;font-size:20px}
.art{margin:0;min-width:0;max-width:300px;justify-self:end}
.art img{width:100%;border-radius:5px}

.metaRow{display:flex;padding:20px 0 0;margin:0}
.textlink{min-height:0;color:var(--accent);border:0;border-bottom:1px solid var(--accent);border-radius:0;padding:4px 0;font-size:13px;font-weight:600}
.textlink:hover{background:none;color:var(--accent-dark)}
.resume{width:100%;display:grid;gap:6px;padding:22px 25px;text-align:left;margin:23px 0 0;border-color:var(--field);background:var(--card)}
.resume:hover{background:#fff;border-color:var(--blue)}
.resume strong{font-size:20px;overflow-wrap:anywhere}
.resume>span:last-child{font-size:13px;color:var(--blue)}
.eyebrow{display:block;color:var(--accent);font-size:10px;font-weight:700;letter-spacing:.13em;line-height:1.6;margin:0 0 12px}

/* Guide */
#guide{margin:45px 0 0;padding:28px 0 0;border-top:1px solid var(--ink)}
#guide h2{font-size:32px;line-height:1.2;font-weight:600;letter-spacing:-1px;margin:0 0 28px}
.guideSteps{display:grid;grid-template-columns:1fr 1fr;gap:0 38px;list-style:none;counter-reset:guide;margin:0;padding:0}
.guideSteps>li{position:relative;counter-increment:guide;padding:25px 0 25px 40px;border-top:1px solid var(--line);min-width:0;scroll-margin-top:20px}
.guideSteps>li:before{content:counter(guide,decimal-leading-zero);position:absolute;left:0;top:26px;color:var(--accent);font-size:11px;font-weight:700;letter-spacing:.04em}
.guideSteps>li.keyStep{border-top:2px solid var(--steel)}
.guideSteps h3{margin:0 0 13px;font-size:20px;line-height:1.3;font-weight:600;letter-spacing:-.4px}
.guideSteps p,.guideSteps ul{font-size:14px;line-height:1.8;color:var(--muted);margin:0 0 13px}
.guideSteps ul{padding-left:19px}
.guideSteps li li{margin-bottom:10px}
.guideSteps strong{color:var(--ink)}
.stepBtn{margin-top:6px}

.appFoot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:25px 0;margin:28px 0 0;border-top:1px solid var(--line);color:var(--muted);font-size:11px;letter-spacing:.02em}
.appFoot span{font-size:12px;letter-spacing:0}
.appFoot a{color:var(--ink)}

/* Reader */
#reader{max-width:850px;margin:0 auto;padding:20px 0 0}
body.reading main{padding-bottom:230px}
.readerLabel{margin-top:30px}
#docTitle{font-size:clamp(30px,4vw,46px);line-height:1.15;letter-spacing:-1.2px;font-weight:600;overflow-wrap:anywhere;margin:15px 0 23px}
.readTools{display:flex;flex-wrap:wrap;align-items:center;gap:9px;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
#docInfo{margin-right:auto;font-size:12px;color:var(--muted)}
.readTools button{min-height:36px;border-radius:4px;padding:6px 11px;font-size:13px}
.small{font-size:12px;line-height:1.75;color:var(--muted)}
article{font-family:Georgia,"Times New Roman",serif;font-size:var(--font);line-height:1.8;overflow-wrap:break-word}
article button{display:block;width:100%;text-align:left;font:inherit;line-height:inherit;min-height:0;border:0;border-radius:4px;margin:6px 0;padding:10px 16px;background:none;transition:background .15s}
article button:hover{background:var(--soft)}
article button.current{background:var(--hilite);box-shadow:inset 3px 0 var(--accent)}
#status{color:var(--accent);font-size:13px;font-weight:600;line-height:1.6}
#status:empty{display:none}
body.reading #status{max-width:850px;margin:0 auto}

/* Player */
#player{position:fixed;z-index:100;bottom:16px;left:50%;transform:translateX(-50%);width:min(760px,calc(100% - 32px));padding:16px 24px;background:var(--card);border:1px solid #ccd5d8;border-radius:10px;box-shadow:0 8px 35px #172d3b1c}
.progressRow,.playerBottom{display:flex;justify-content:space-between;align-items:center;gap:15px;font-size:11px;color:var(--muted)}
#progress{display:block;width:100%;height:4px;margin:9px 0 14px;border:0;accent-color:var(--accent);background:#e0e6e8;appearance:none}
#progress::-webkit-progress-bar{background:#e0e6e8}
#progress::-webkit-progress-value{background:var(--accent)}
#progress::-moz-progress-bar{background:var(--accent)}
.controls{display:flex;align-items:center;justify-content:center;gap:18px;margin:6px 0 12px}
.controls button{min-width:65px;min-height:43px;padding:8px 15px;border-color:#d1dadd;color:var(--blue);font-size:17px;line-height:1.2}
.controls small{display:block;font-size:10px}
.controls #play{min-width:145px;min-height:50px;background:var(--blue);border-color:var(--blue);color:#fff;font-size:15px;font-weight:600}
.controls #play:hover{background:var(--blue-dark)}
#rate{border:1px solid var(--line);border-radius:4px;background:var(--paper);padding:4px;color:var(--ink);font-size:12px}
#voiceLabel{max-width:60%;text-align:right;overflow-wrap:anywhere}
#voiceLabel.fallback{color:var(--accent);font-weight:700}

/* Dialogs */
dialog{width:min(620px,calc(100% - 32px));max-height:85vh;overflow:auto;padding:30px;background:var(--paper);color:var(--ink);border:1px solid var(--field);border-radius:10px;box-shadow:0 15px 70px #172d3b26}
dialog::backdrop{background:#172d3b70}
.dialogHead{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:24px}
.dialogHead h2{font-size:28px;line-height:1.2;font-weight:600;letter-spacing:-.8px;margin:0}
.dialogHead button{min-width:36px;min-height:36px;padding:0;border-color:var(--line);font-size:23px;line-height:1;color:var(--muted)}
dialog label{display:block;font-size:13px;font-weight:600;margin:18px 0 12px}
dialog input:not([type=checkbox]),dialog textarea,dialog select{display:block;width:100%;margin-top:8px;border:1px solid #bcc9cf;border-radius:5px;padding:11px 12px;background:var(--card);color:var(--ink);font-size:15px;font-weight:400}
dialog input:not([type=checkbox]):focus,dialog textarea:focus,dialog select:focus{border-color:var(--blue);outline:none}
dialog textarea{resize:vertical;line-height:1.65}
dialog .check{display:flex;gap:12px;align-items:flex-start;line-height:1.7;font-weight:400}
dialog input[type=checkbox]{accent-color:var(--blue);width:17px;height:17px;flex-shrink:0;margin-top:3px}
.formActions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:20px 0 0}
.formActions button{min-height:45px;padding:12px 17px;font-size:13px;font-weight:600}
.formActions .primary{background:var(--blue);border-color:var(--blue);color:#fff}
.formActions .primary:hover{background:var(--blue-dark)}
.clearBtn{color:var(--accent)}
.formNote{margin:12px 0 0;color:var(--accent);font-weight:700}
.formNote:empty{display:none}
.formHint{margin:12px 0 0}
.notice{padding:15px;border:1px solid #d5dfe2;border-left:3px solid var(--steel);background:var(--soft);border-radius:4px;color:var(--muted);font-size:12px;line-height:1.7}

@media(max-width:850px){
  .siteInner{flex-direction:column;align-items:flex-start;justify-content:center;gap:16px;padding-top:23px;padding-bottom:23px}
  .appHead{flex-direction:column;align-items:flex-start;gap:19px}
  .startGrid{gap:25px;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);padding:24px}
  .upload,.paste{padding:20px 15px;grid-template-columns:30px minmax(0,1fr) 16px;column-gap:9px}
  .upload strong,.paste strong{font-size:19px}
  .uploadIcon,.pasteIcon{width:30px}
  .guideSteps{gap:0 25px}
}
@media(max-width:600px){
  .siteInner{padding-left:23px;padding-right:23px}
  .logo{font-size:26px}
  .siteInner nav{gap:10px 19px;font-size:12px}
  .appHead{padding:32px 23px 23px}
  .pageTitle h1{font-size:36px;letter-spacing:-1.5px}
  .mark{width:32px;height:32px;font-size:12px;margin-right:5px}
  .tagline{font-size:14px}
  main{padding:0 23px 25px}
  .voiceHint{align-items:flex-start;flex-wrap:wrap;padding:14px;font-size:12px;gap:8px}
  .voiceHint p{min-width:190px}
  a.hintAction{margin-left:25px}
  .startGrid{grid-template-columns:minmax(0,1fr);gap:24px;padding:20px}
  .upload,.paste{min-height:118px;padding:20px 17px}
  .upload strong,.paste strong{font-size:21px}
  .art{width:min(100%,240px);justify-self:center}
  .guideSteps{grid-template-columns:minmax(0,1fr)}
  #guide{margin-top:34px}
  #guide h2{font-size:28px}
  .guideSteps>li{padding-left:35px}
  dialog{padding:23px}
  .formActions>button{flex:1 1 100%}
  #player{padding:13px 17px;bottom:8px;width:calc(100% - 16px)}
  .controls{gap:12px}
  .controls button{min-width:55px}
  .controls #play{min-width:125px}
  article button{padding:8px 10px}
  .appFoot{display:block}
  .appFoot span{display:block;margin-top:10px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}