/* Redline Studio - minimal UI. System fonts only (works offline). */
:root{
  --ink:#14171c; --ink-2:#4a515c; --ink-3:#8a919c; --line:#e6e8ec; --line-2:#d5d9df;
  --bg:#f6f7f9; --card:#ffffff; --red:#d33a3f; --red-soft:#fdeeee; --amber:#b86e12; --amber-soft:#fdf4e7;
  --blue:#2563b8; --blue-soft:#eaf1fb; --green:#2f8a5b; --green-soft:#e9f6ef;
  --r:10px; --shadow:0 1px 2px rgba(16,24,40,.05),0 1px 3px rgba(16,24,40,.06);
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--ink); font-size:14px; line-height:1.45;
}
*{box-sizing:border-box} html,body{margin:0;background:var(--bg)} button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer} a{color:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* top bar */
.top{position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:16px;padding:0 20px;height:56px}
.brand{display:flex;align-items:center;gap:8px;font-weight:700;letter-spacing:-.2px;white-space:nowrap}
.brand i{width:22px;height:22px;border-radius:6px;background:var(--red);display:inline-block;position:relative}
.brand i:after{content:"";position:absolute;inset:6px;border:2px solid #fff;border-radius:50%}
.steps{display:flex;gap:4px;margin:0 auto}
.step{border:0;background:none;padding:7px 12px;border-radius:999px;color:var(--ink-3);display:flex;align-items:center;gap:7px;font-weight:600}
.step b{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:11px;background:var(--line);color:var(--ink-2)}
.step.on{color:var(--ink);background:var(--bg)} .step.on b{background:var(--ink);color:#fff}
.step.done b{background:var(--green);color:#fff}
.step:disabled{cursor:default;opacity:.55}
.top-right{display:flex;gap:8px;align-items:center}
.inp{border:1px solid var(--line-2);border-radius:8px;padding:7px 10px;background:#fff;min-width:0}
.inp.sm{padding:5px 8px;font-size:13px}
select.inp{padding-right:26px}

/* buttons */
.btn{border:1px solid var(--line-2);background:#fff;border-radius:8px;padding:8px 14px;font-weight:600;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.btn:hover{background:var(--bg)}
.btn.primary{background:var(--ink);border-color:var(--ink);color:#fff}
.btn.primary:hover{background:#2a3038}
.btn.red{background:var(--red);border-color:var(--red);color:#fff}
.btn.ghost{border-color:transparent;background:none}
.btn.ghost:hover{background:var(--bg)}
.btn.sm{padding:5px 10px;font-size:13px}
.btn.lg{padding:11px 20px;font-size:15px}
.btn:disabled{opacity:.45;cursor:not-allowed}

/* layout */
.wrap{max-width:760px;margin:40px auto;padding:0 16px}
h1{font-size:26px;letter-spacing:-.4px;margin:0 0 6px}
.sub{color:var(--ink-2);margin:0 0 24px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.muted{color:var(--ink-3)} .small{font-size:12px}

/* step 1 */
.drop{display:block;border:1.5px dashed var(--line-2);border-radius:14px;background:#fff;padding:38px 20px;text-align:center;transition:.15s;cursor:pointer}
.drop:hover,.drop.over{border-color:var(--ink);background:#fbfbfc}
.drop strong{display:block;font-size:16px;margin:10px 0 4px}
.drop .icon{width:40px;height:40px;margin:0 auto;border-radius:10px;background:var(--bg);display:grid;place-items:center}
.files{margin-top:14px;display:grid;gap:8px}
.file{display:flex;align-items:center;gap:12px;padding:10px 12px}
.file .name{flex:1;min-width:0}
.file .name div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.role-target{border-left:3px solid var(--ink)} .role-reference{border-left:3px solid var(--red)} .role-requirements{border-left:3px solid var(--blue)} .role-ignore{opacity:.6}
label.lbl{display:block;font-weight:600;margin:22px 0 6px}
textarea.inp{width:100%;min-height:92px;resize:vertical}
.examples{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.chip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:3px 10px;font-size:12px;color:var(--ink-2)}
button.chip:hover{border-color:var(--ink-3)}
.actions{display:flex;justify-content:space-between;align-items:center;margin-top:22px;gap:10px;flex-wrap:wrap}
.recent{margin-top:34px}
.recent a{display:flex;justify-content:space-between;padding:9px 2px;border-bottom:1px solid var(--line);text-decoration:none}
.recent a:hover b{text-decoration:underline}

/* step 2 */
.review{display:grid;grid-template-columns:300px 1fr;height:calc(100vh - 56px)}
.side{border-right:1px solid var(--line);background:#fff;display:flex;flex-direction:column;min-height:0}
.side-head{padding:16px;border-bottom:1px solid var(--line)}
.stats{display:flex;gap:14px;margin:8px 0 12px;flex-wrap:wrap}
.stats div{font-size:12px;color:var(--ink-2)} .stats b{display:block;font-size:20px;color:var(--ink)}
.filters{display:flex;gap:2px;padding:10px 12px 0;flex-wrap:nowrap}
.filters button{border:0;background:none;padding:4px 8px;white-space:nowrap;border-radius:999px;font-size:12px;color:var(--ink-2);font-weight:600}
.filters button.on{background:var(--ink);color:#fff}
.plist{overflow:auto;flex:1;padding:8px}
.prow{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:0;background:none;padding:7px 8px;border-radius:8px}
.prow:hover{background:var(--bg)} .prow.on{background:var(--blue-soft)}
.prow .n{width:28px;font-variant-numeric:tabular-nums;color:var(--ink-3);font-size:12px}
.prow .d{flex:1;min-width:0} .prow .d div{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dot{width:8px;height:8px;border-radius:50%;flex:none}
.dot.none{background:#cfd4da}.dot.red{background:var(--red)}.dot.amber{background:var(--amber)}.dot.green{background:var(--green)}.dot.blue{background:var(--blue)}
.needs{padding:12px 16px;border-bottom:1px solid var(--line);background:var(--amber-soft)}
.needs h4{margin:0 0 6px;font-size:13px;color:var(--amber)}
.needs button{display:block;width:100%;text-align:left;border:0;background:none;padding:4px 0;font-size:13px;color:var(--ink)}
.needs button:hover{text-decoration:underline}

.main{display:flex;flex-direction:column;min-width:0;min-height:0}
.bar{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--line);background:#fff;flex-wrap:wrap}
.bar .title{font-weight:700} .bar .title span{font-weight:500;color:var(--ink-3);margin-left:6px;font-size:13px}
.spacer{flex:1}
.seg{display:inline-flex;border:1px solid var(--line-2);border-radius:8px;overflow:hidden}
.seg button{border:0;background:#fff;padding:5px 10px;font-size:12px;font-weight:600;color:var(--ink-2)}
.seg button.on{background:var(--ink);color:#fff}
.canvas{flex:1;overflow:auto;padding:16px;display:flex;gap:14px;align-items:flex-start;justify-content:center;background:var(--bg)}
.sheet{position:relative;background:#fff;box-shadow:var(--shadow);border:1px solid var(--line);flex:none}
.sheet img{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none}
.sheet svg{position:absolute;inset:0;width:100%;height:100%}
.sheet .tag{position:absolute;top:-22px;left:0;font-size:11px;font-weight:700;color:var(--ink-3);letter-spacing:.4px;text-transform:uppercase}
.canvas.two .sheet{margin-top:20px}
.drawing svg{cursor:default} .drawing.adding svg{cursor:crosshair}

.panel{border-top:1px solid var(--line);background:#fff;padding:12px 16px;display:grid;gap:10px;max-height:38vh;overflow:auto;flex:none}
.fitem{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:8px}
.fitem .txt{flex:1;min-width:0}
.fitem .txt b{display:block;font-size:13px}
.fitem .why{font-size:12px;color:var(--ink-3);margin-top:2px}
.fitem .acts{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.pill{display:inline-block;font-size:11px;font-weight:700;padding:1px 7px;border-radius:999px;margin-left:6px;vertical-align:1px}
.pill.pending{background:var(--amber-soft);color:var(--amber)} .pill.accepted{background:var(--green-soft);color:var(--green)}
.pill.rejected{background:#eef0f3;color:var(--ink-3)} .pill.rfi{background:var(--blue-soft);color:var(--blue)} .pill.manual{background:var(--red-soft);color:var(--red)}
.ask{display:flex;gap:8px}
.ask input.inp{flex:1;min-width:0} .ask select.inp{flex:none;width:auto}
.hist{display:grid;gap:6px}
.h{font-size:12.5px;padding:7px 10px;border-radius:8px;background:var(--bg)}
.h q{quotes:none;font-weight:600}
.h ul{margin:4px 0 0;padding-left:18px;color:var(--ink-2)}
.h.not_understood{background:var(--amber-soft)}
.h .st{font-size:11px;font-weight:700;text-transform:uppercase;margin-left:6px}
.h.applied .st{color:var(--green)} .h.partial .st{color:var(--amber)} .h.not_understood .st{color:var(--amber)}

/* step 3 */
.checks{display:grid;gap:8px;margin:18px 0}
.check{display:flex;gap:10px;align-items:center;padding:12px 14px}
.check .ok{color:var(--green);font-weight:800} .check .warn{color:var(--amber);font-weight:800}
.dl{display:grid;gap:8px;margin-top:18px}
.dl a{text-decoration:none;display:flex;justify-content:space-between;align-items:center;padding:13px 16px}
.dl a:hover{border-color:var(--ink-3)}
.dl a.pri{background:var(--ink);color:#fff;border-color:var(--ink)}

#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;padding:10px 16px;border-radius:10px;opacity:0;pointer-events:none;transition:.2s;z-index:50;max-width:90vw;font-size:13px}
#toast.on{opacity:1;transform:translateX(-50%)}
.busy{position:fixed;inset:0;background:rgba(255,255,255,.7);display:grid;place-items:center;z-index:40}
.busy div{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 20px;box-shadow:var(--shadow);display:flex;gap:10px;align-items:center}
.spin{width:16px;height:16px;border:2px solid var(--line-2);border-top-color:var(--ink);border-radius:50%;animation:s .8s linear infinite}
@keyframes s{to{transform:rotate(360deg)}}
.foot{color:var(--ink-3);font-size:12px;text-align:center;margin:30px 0}

@media (max-width:900px){
  .review{grid-template-columns:1fr;height:auto}
  .side{border-right:0;border-bottom:1px solid var(--line);max-height:46vh}
  .steps .lab{display:none}
  .top{gap:8px;padding:0 12px}
  #reviewer{display:none}
  .canvas{flex-direction:column;align-items:stretch;min-height:55vh}
  .canvas.two .sheet{margin-top:22px}
}