/* Flow Pros Reports — app UI (namespaced .fp-* so it never collides with the report template) */
:root{
  --blue:#4A7FE8; --blue-deep:#2E5BC7; --blue-bright:#6b9bff;
  --ink:#0a0a0c; --panel:#14161c; --panel-2:#1b1e26; --panel-3:#23272f;
  --line:#2c313b; --line-soft:#22262e;
  --text:#e9edf5; --mute:#8b93a3; --faint:#5b626f;
  --green:#16a34a; --green-soft:#0f2a1c;
  --yellow:#d97706; --yellow-soft:#2a2010;
  --red:#dc2626; --red-soft:#2a1414;
  --radius:16px;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  background:var(--ink); color:var(--text);
  font-family:'Manrope',sans-serif; font-size:16px; line-height:1.45;
  -webkit-font-smoothing:antialiased; overscroll-behavior-y:none;
}
button{font-family:inherit; cursor:pointer; color:inherit}
input,textarea,select{font-family:inherit; font-size:16px} /* 16px stops iOS zoom-on-focus */

/* ---- App frame ---- */
#app{ max-width:760px; margin:0 auto; min-height:100dvh; display:flex; flex-direction:column;
  padding-top:env(safe-area-inset-top); }
.fp-topbar{
  display:flex; align-items:center; gap:12px; padding:14px 20px 12px;
  position:sticky; top:0; background:linear-gradient(180deg,var(--ink),rgba(10,10,12,.92)); z-index:5;
  backdrop-filter:blur(8px);
}
.fp-topbar img{height:26px; width:auto}
.fp-topbar .fp-back{
  background:var(--panel-2); border:1px solid var(--line); border-radius:10px;
  width:40px; height:40px; display:flex; align-items:center; justify-content:center; font-size:20px; color:var(--mute);
}
.fp-topbar .fp-spacer{flex:1}
.fp-topbar .fp-gear{background:none; border:none; color:var(--mute); font-size:22px; padding:8px}
.fp-progress{height:3px; background:var(--line-soft)}
.fp-progress > i{display:block; height:100%; background:linear-gradient(90deg,var(--blue),var(--blue-bright)); transition:width .25s ease}

.fp-screen{flex:1; padding:18px 20px 140px; animation:fpFade .25s ease both}
@keyframes fpFade{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}

.fp-eyebrow{font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:3px; text-transform:uppercase; color:var(--blue); margin-bottom:6px}
.fp-h1{font-family:'Oswald',sans-serif; font-weight:600; font-size:30px; line-height:1.05; letter-spacing:.3px; text-transform:uppercase; margin-bottom:6px}
.fp-sub{color:var(--mute); font-size:14px; margin-bottom:22px}

/* ---- Fields ---- */
.fp-field{margin-bottom:18px}
.fp-label{display:block; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--mute); margin-bottom:8px}
.fp-label .req{color:var(--blue-bright)}
.fp-input,.fp-textarea,.fp-select{
  width:100%; background:var(--panel-2); border:1px solid var(--line); border-radius:12px;
  padding:14px 15px; color:var(--text); outline:none; transition:border-color .15s, background .15s;
}
.fp-input:focus,.fp-textarea:focus,.fp-select:focus{border-color:var(--blue); background:var(--panel-3)}
.fp-textarea{min-height:150px; resize:vertical; line-height:1.5}
.fp-select{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%238b93a3' stroke-width='2'%3E%3Cpath d='M2 5l5 5 5-5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 15px center; padding-right:40px}
.fp-input::placeholder,.fp-textarea::placeholder{color:var(--faint)}
.fp-hint{font-size:12.5px; color:var(--faint); margin-top:7px; line-height:1.4}
.fp-inline-btn{margin-top:10px; background:var(--panel-3); border:1px solid var(--line); color:var(--blue-bright);
  border-radius:10px; padding:9px 14px; font-size:13px; font-weight:600; display:inline-flex; align-items:center; gap:7px}
.fp-inline-btn:active{background:var(--panel-2)}

/* ---- Big choice cards (severity / cleanout) ---- */
.fp-cards{display:flex; flex-direction:column; gap:14px}
.fp-card{
  text-align:left; background:var(--panel-2); border:1.5px solid var(--line); border-radius:var(--radius);
  padding:20px; display:flex; align-items:center; gap:16px; transition:transform .08s, border-color .15s, background .15s;
}
.fp-card:active{transform:scale(.99)}
.fp-card.sel{border-color:var(--blue); background:var(--panel-3)}
.fp-card .fp-dot{width:14px; height:14px; border-radius:50%; flex-shrink:0}
.fp-card .fp-card-body{flex:1}
.fp-card .fp-card-t{font-family:'Oswald',sans-serif; font-weight:600; font-size:18px; letter-spacing:.5px; text-transform:uppercase}
.fp-card .fp-card-d{color:var(--mute); font-size:13.5px; margin-top:2px}
.fp-card .fp-chev{color:var(--faint); font-size:20px}
.fp-card.sev-red .fp-dot{background:var(--red)} .fp-card.sev-red.sel{border-color:var(--red)}
.fp-card.sev-yellow .fp-dot{background:var(--yellow)} .fp-card.sev-yellow.sel{border-color:var(--yellow)}
.fp-card.sev-green .fp-dot{background:var(--green)} .fp-card.sev-green.sel{border-color:var(--green)}

/* ---- Preset list (recommended steps) ---- */
.fp-preset{display:flex; flex-direction:column; gap:10px; margin-bottom:16px}
.fp-preset button{
  text-align:left; background:var(--panel-2); border:1.5px solid var(--line); border-radius:12px;
  padding:13px 15px; font-size:14.5px; font-weight:600;
}
.fp-preset button.sel{border-color:var(--blue); background:var(--panel-3); color:var(--blue-bright)}

/* ---- Bottom action bar ---- */
.fp-actions{
  position:fixed; left:0; right:0; bottom:0; z-index:6;
  display:flex; gap:12px; padding:14px 20px calc(14px + env(safe-area-inset-bottom));
  background:linear-gradient(0deg,var(--ink) 60%,rgba(10,10,12,0)); 
  max-width:760px; margin:0 auto;
}
.fp-btn{
  flex:1; border:none; border-radius:14px; padding:17px; font-family:'Oswald',sans-serif;
  font-weight:600; font-size:16px; letter-spacing:1px; text-transform:uppercase;
}
.fp-btn-primary{background:var(--blue); color:#fff}
.fp-btn-primary:disabled{background:var(--panel-3); color:var(--faint)}
.fp-btn-primary:active:not(:disabled){background:var(--blue-deep)}
.fp-btn-ghost{flex:0 0 auto; background:var(--panel-2); border:1px solid var(--line); color:var(--mute); padding:17px 22px}

/* ---- Home screen ---- */
.fp-hero-btn{
  width:100%; background:var(--blue); color:#fff; border:none; border-radius:var(--radius);
  padding:22px; font-family:'Oswald',sans-serif; font-weight:600; font-size:20px; letter-spacing:1px;
  text-transform:uppercase; margin-bottom:26px; display:flex; align-items:center; justify-content:center; gap:10px;
}
.fp-hero-btn:active{background:var(--blue-deep)}
.fp-list-h{font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--mute); margin:0 2px 10px}
.fp-row{
  display:flex; align-items:center; gap:12px; background:var(--panel-2); border:1px solid var(--line);
  border-radius:12px; padding:14px 15px; margin-bottom:10px; width:100%; text-align:left;
}
.fp-row .fp-row-body{flex:1; min-width:0}
.fp-row .fp-row-t{font-weight:700; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.fp-row .fp-row-d{color:var(--mute); font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.fp-badge{font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:1px; padding:4px 8px; border-radius:20px; text-transform:uppercase; font-weight:700; flex-shrink:0}
.fp-badge.red{color:#ff8a8a; background:var(--red-soft)} .fp-badge.yellow{color:#f0b964; background:var(--yellow-soft)} .fp-badge.green{color:#5ed98c; background:var(--green-soft)}
.fp-row .fp-del{background:none; border:none; color:var(--faint); font-size:18px; padding:6px}
.fp-empty{color:var(--faint); font-size:13.5px; padding:6px 2px 20px}
.fp-section-gap{height:26px}

/* ---- Report preview screen ---- */
.fp-report-frame{
  background:#e8e8e8; border-radius:12px; padding:14px; overflow:hidden; margin-bottom:18px;
  display:flex; justify-content:center;
}
.fp-report-scaler{transform-origin:top center}
#fp-report-root{box-shadow:0 8px 30px rgba(0,0,0,.4)}

/* ---- Review summary ---- */
.fp-review-sec{background:var(--panel-2); border:1px solid var(--line); border-radius:12px; padding:14px 16px; margin-bottom:12px}
.fp-review-sec h4{font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--blue); margin-bottom:10px; display:flex; justify-content:space-between; align-items:center}
.fp-review-sec h4 button{background:none;border:none;color:var(--blue-bright);font-size:12px;font-weight:700;font-family:'Manrope',sans-serif}
.fp-rev-row{display:flex; justify-content:space-between; gap:14px; padding:5px 0; font-size:13.5px; border-bottom:1px solid var(--line-soft)}
.fp-rev-row:last-child{border-bottom:none}
.fp-rev-row .k{color:var(--mute); flex-shrink:0}
.fp-rev-row .v{text-align:right; font-weight:600; word-break:break-word}

/* ---- Modal (settings) ---- */
.fp-modal-bg{position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:20; display:flex; align-items:flex-end; justify-content:center}
.fp-modal{background:var(--panel); border:1px solid var(--line); border-radius:18px 18px 0 0; width:100%; max-width:760px; padding:22px 20px calc(22px + env(safe-area-inset-bottom)); animation:fpUp .25s ease both}
@keyframes fpUp{from{transform:translateY(40px); opacity:0}to{transform:none; opacity:1}}
.fp-toast{position:fixed; left:50%; bottom:96px; transform:translateX(-50%); background:var(--panel-3); border:1px solid var(--line); color:var(--text); padding:11px 18px; border-radius:24px; font-size:13.5px; z-index:30; box-shadow:0 6px 20px rgba(0,0,0,.4)}

/* ---- Print: show ONLY the standalone report copy (powers Save-to-PDF) ---- */
#fp-print-root { display:none; }
@media print {
  @page { size: letter; margin: 0; }
  html, body { background:#fff !important; }
  body.fp-printing #app { display:none !important; }
  body.fp-printing #fp-print-root { display:block !important; }
  body.fp-printing #fp-print-root .page { box-shadow:none !important; }
}