@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400&display=swap');

:root {
  /* NN colour system — white is the base, orange is used only for type/icons/charts, never as a large fill */
  --bg:#ffffff; --bg2:#f1edeb; --bg3:#e5ded9;
  --orange:#ee7f00; --orange-mid:#ea650d; --orange-dark:#e64415;
  --text:#000000; --text-dim:#666666; --border:#cac7c7;
  --none-col:#666666; --low:#2e7d4f; --medium:#ea650d; --high:#b3261e; --vhigh:#000000; --vhigh-text:#ff5449;
  --green:#2e7d4f; --blue:#3d6a86; --r:10px;
  --pad-x:16px; --body-max:600px; --fs-title:22px; --fs-card:14px; --fs-desc:12px;
}
@media(min-width:640px){:root{--pad-x:32px;--body-max:720px;--fs-title:26px;--fs-card:15px;--fs-desc:13px;}}
@media(min-width:1024px){:root{--pad-x:48px;--body-max:860px;--fs-title:28px;}}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}

body{background:var(--bg);color:var(--text);font-family:'Atkinson Hyperlegible',Georgia,serif;
  min-height:100dvh;display:flex;flex-direction:column;max-width:var(--body-max);margin:0 auto;}

header{padding:var(--pad-y,20px) var(--pad-x) 0;display:flex;align-items:baseline;gap:10px;}
header h1{font-size:13px;font-weight:400;color:var(--text-dim);letter-spacing:.12em;text-transform:uppercase;flex:1;}

.lang-toggle{background:var(--bg2);border:1.5px solid var(--border);border-radius:6px;display:flex;overflow:hidden;flex-shrink:0;}
.lang-btn{padding:3px 9px;font-family:inherit;font-size:11px;font-weight:700;cursor:pointer;border:none;
  background:transparent;color:var(--text-dim);letter-spacing:.06em;transition:background .15s,color .15s;}
.lang-btn.active{background:var(--orange);color:var(--text);}

.progress-bar{display:flex;gap:4px;padding:16px var(--pad-x) 0;}
.prog-step{flex:1;height:3px;background:var(--border);border-radius:2px;transition:background .3s;}
.prog-step.done{background:var(--orange);}
.prog-step.active{background:var(--orange);opacity:.5;}
.step-label{padding:10px var(--pad-x) 0;font-size:11px;color:var(--text-dim);letter-spacing:.08em;text-transform:uppercase;}

main{flex:1;padding:20px var(--pad-x);overflow-y:auto;}
.screen{display:none;} .screen.active{display:block;}

@media(min-width:768px){.result-cols{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
  .result-cols>*{min-width:0;}}

.screen-title{font-size:var(--fs-title);font-weight:700;line-height:1.2;margin-bottom:6px;}
.screen-sub{font-size:13px;color:var(--text-dim);margin-bottom:24px;line-height:1.5;}

.section-head{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--orange);
  margin:20px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--border);}
.section-head:first-of-type{margin-top:0;}

.option-card{background:var(--bg2);border:1.5px solid var(--border);border-radius:var(--r);
  padding:14px 16px;margin-bottom:8px;cursor:pointer;transition:border-color .15s,background .15s;
  display:flex;align-items:flex-start;gap:12px;}
.option-card:hover{border-color:color-mix(in srgb,var(--orange) 40%,var(--border));}
.option-card:active{background:var(--bg3);}
.option-card.selected{border-color:var(--orange);background:var(--bg3);}

.card-indicator{width:18px;height:18px;border-radius:50%;border:2px solid var(--border);
  flex-shrink:0;margin-top:2px;transition:border-color .15s,background .15s;
  display:flex;align-items:center;justify-content:center;}
.option-card.selected .card-indicator{border-color:var(--orange);background:var(--orange);}
.option-card.selected .card-indicator::after{content:'';width:6px;height:6px;background:var(--bg);border-radius:50%;}
.option-card.checkbox .card-indicator{border-radius:4px;}
.option-card.checkbox.selected .card-indicator::after{content:'✓';font-size:11px;color:var(--text);
  border-radius:0;background:transparent;width:auto;height:auto;font-weight:700;}

.card-body{flex:1;min-width:0;}
.card-title{font-size:var(--fs-card);font-weight:700;margin-bottom:3px;line-height:1.3;}
.card-desc{font-size:var(--fs-desc);color:var(--text-dim);line-height:1.45;}
.card-score{font-size:18px;font-weight:700;color:var(--orange);flex-shrink:0;align-self:center;min-width:36px;text-align:right;}
.card-score.negative{color:var(--green);} .card-score.knockout{color:var(--blue);font-size:13px;}

.cat-group{background:var(--bg2);border:1.5px solid var(--border);border-radius:var(--r);
  margin-bottom:10px;overflow:hidden;transition:border-color .15s;}
.cat-group.has-selection{border-color:var(--orange);}
.cat-header{padding:14px 16px;cursor:pointer;display:flex;align-items:center;
  gap:12px;background:var(--bg2);transition:background .15s;user-select:none;}
.cat-header:hover{background:var(--bg3);} .cat-header:active{background:var(--bg3);}
.cat-check{width:18px;height:18px;border-radius:4px;border:2px solid var(--border);
  flex-shrink:0;display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;color:var(--bg);transition:all .15s;}
.cat-group.has-selection .cat-check{border-color:var(--orange);background:var(--orange);color:var(--text);}
.cat-label{flex:1;font-size:var(--fs-card);font-weight:700;}
.cat-score-badge{font-size:16px;font-weight:700;color:var(--orange);min-width:28px;text-align:right;opacity:0;transition:opacity .2s;}
.cat-group.has-selection .cat-score-badge{opacity:1;}
.cat-options{display:none;border-top:1px solid var(--border);}
.cat-group.expanded .cat-options{display:block;}
.cat-option{padding:11px 16px 11px 46px;cursor:pointer;display:flex;align-items:flex-start;
  gap:10px;transition:background .1s;border-bottom:1px solid var(--border);}
.cat-option:last-child{border-bottom:none;}
.cat-option:hover{background:var(--bg3);} .cat-option:active{background:var(--bg3);}
.cat-option.selected{background:var(--bg3);}
.opt-radio{width:14px;height:14px;border-radius:50%;border:2px solid var(--border);flex-shrink:0;margin-top:2px;transition:all .15s;}
.cat-option.selected .opt-radio{border-color:var(--orange);background:var(--orange);}
.opt-text{flex:1;font-size:var(--fs-desc);color:var(--text-dim);line-height:1.4;}
.cat-option.selected .opt-text{color:var(--text);}
.opt-score{font-size:14px;font-weight:700;color:var(--orange);flex-shrink:0;}

.note-area{display:none;margin-top:8px;}
.cat-group.has-selection .note-area,.option-card.selected .note-area{display:block;}
textarea.note-input{width:100%;background:var(--bg);border:1px solid var(--border);
  border-radius:6px;color:var(--text);font-family:inherit;font-size:var(--fs-desc);
  padding:8px 10px;resize:vertical;min-height:52px;line-height:1.5;transition:border-color .15s;}
textarea.note-input:focus{outline:none;border-color:var(--orange);}
textarea.note-input::placeholder{color:var(--text-dim);opacity:.6;}
.option-card .note-area{padding-top:8px;}
.cat-note-wrap{padding:10px 16px 12px;border-top:1px solid var(--border);display:none;}
.cat-group.has-selection .cat-note-wrap{display:block;}

.result-block{background:var(--bg2);border-radius:var(--r);padding:28px 20px;text-align:center;margin-bottom:20px;}
.result-label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim);margin-bottom:12px;}
.result-level{font-size:28px;font-weight:700;line-height:1.2;margin-bottom:10px;display:inline-block;
  padding:12px 22px;border-radius:12px;}
.result-score{font-size:14px;color:var(--text-dim);}
.result-formula{font-size:12px;color:var(--text-dim);margin-top:6px;font-style:italic;}
.result-desc{background:var(--bg3);border-radius:8px;padding:16px;font-size:13px;line-height:1.6;color:var(--text-dim);margin-bottom:16px;}
.breakdown-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--border);font-size:13px;}
.breakdown-row:last-child{border-bottom:none;}
.breakdown-label{color:var(--text-dim);} .breakdown-val{font-weight:700;color:var(--text);}
/* Severity scale: grey (none) -> green (low) -> orange (medium) -> red (high) -> black with red text (very high) */
.level-none{background:var(--none-col);color:var(--bg);}
.level-low{background:var(--low);color:var(--bg);}
.level-medium{background:var(--medium);color:var(--bg);}
.level-high{background:var(--high);color:var(--bg);}
.level-veryhigh{background:var(--vhigh);color:var(--vhigh-text);}

.field-group{margin-bottom:16px;}
.field-label{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim);margin-bottom:6px;display:block;}
@media(min-width:640px){.field-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:0 20px;}}
input.text-input,textarea.text-input{width:100%;background:var(--bg);border:1.5px solid var(--border);
  border-radius:var(--r);color:var(--text);font-family:inherit;font-size:14px;padding:12px 14px;
  resize:vertical;transition:border-color .15s;}
input.text-input:focus,textarea.text-input:focus{outline:none;border-color:var(--orange);}
input.text-input::placeholder,textarea.text-input::placeholder{color:var(--text-dim);opacity:.5;}

.feedback-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:100;align-items:flex-end;justify-content:center;}
.feedback-overlay.open{display:flex;}
.feedback-sheet{background:var(--bg);border-radius:16px 16px 0 0;box-shadow:0 -8px 32px rgba(0,0,0,.12);
  padding:24px var(--pad-x) max(24px,env(safe-area-inset-bottom));width:100%;max-width:var(--body-max);}
@media(min-width:640px){.feedback-overlay{align-items:center;}
  .feedback-sheet{border-radius:16px;max-width:480px;margin-bottom:40px;}}
.feedback-title{font-size:18px;font-weight:700;margin-bottom:6px;}
.feedback-sub{font-size:13px;color:var(--text-dim);margin-bottom:16px;}
.star-row{display:flex;gap:8px;margin-bottom:16px;}
.star-btn{flex:1;padding:10px 4px;background:var(--bg2);border:1.5px solid var(--border);
  border-radius:8px;color:var(--text-dim);font-size:22px;cursor:pointer;
  transition:border-color .15s,background .15s;text-align:center;font-family:inherit;}
.star-btn.active{border-color:var(--orange);background:var(--bg3);}
.feedback-actions{display:flex;gap:10px;margin-top:12px;}

footer{padding:14px var(--pad-x) max(14px,env(safe-area-inset-bottom));
  display:flex;gap:10px;border-top:1px solid var(--border);background:var(--bg);align-items:center;}
.btn{flex:1;padding:13px;border-radius:var(--r);font-family:inherit;font-size:14px;font-weight:700;
  cursor:pointer;border:none;transition:background .15s,opacity .15s,transform .1s;letter-spacing:.03em;}
.btn:active{transform:scale(.97);}
.btn-back{background:var(--bg2);color:var(--text-dim);border:1.5px solid var(--border);flex:0 0 auto;min-width:80px;}
.btn-next{background:var(--orange);color:var(--text);}
.btn-next:hover:not(:disabled){background:var(--orange-mid);}
.btn-next:disabled{background:var(--border);color:var(--text-dim);cursor:default;}
.feedback-trigger{flex:0 0 44px;height:44px;background:var(--bg2);border:1.5px solid var(--border);
  border-radius:8px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:18px;transition:border-color .15s;padding:0;font-family:inherit;}
.feedback-trigger:hover{border-color:color-mix(in srgb,var(--orange) 50%,var(--border));}
.feedback-trigger:active{border-color:var(--orange);}
.hint{font-size:11px;color:var(--text-dim);text-align:center;padding:0 var(--pad-x) 6px;min-height:20px;}
.action-row{display:flex;gap:10px;margin-bottom:16px;}
.btn-export{flex:1;padding:13px;border-radius:var(--r);font-family:inherit;font-size:13px;font-weight:700;
  cursor:pointer;border:1.5px solid var(--orange-dark);background:transparent;color:var(--orange-dark);
  letter-spacing:.03em;transition:background .15s;}
.btn-export:hover{background:var(--bg3);} .btn-export:active{background:var(--bg2);}
.btn-export svg{vertical-align:middle;margin-right:6px;}