/* GxP Readiness Planner — scoped under .rp-app so nothing here can affect the rest of the site,
   and nothing from the site's global style.css (e.g. .card) can affect this tool. Colour tokens
   reuse Compval's real brand values (see assets/css/style.css :root). */
.rp-app{
  --ink:#000000; --rp-primary:#4b5563; --rp-primary-hover:#374151;
  --paper:#f1f5f9; --card:#ffffff;
  --rp-text-main:#1e293b; --rp-text-muted:#64748b; --border:#d1d5db;
  --green:#10b981; --green-bg:#d1fae5; --green-text:#047857;
  --red:#ef4444; --red-bg:#fef2f2; --red-text:#b91c1c;
  --amber:#f59e0b; --amber-bg:#fef3c7; --amber-text:#92400e;
  --band: linear-gradient(135deg, #0f172a 0%, #1e293b 60%, #334155 100%);
  --shadow: 0 4px 6px rgba(0,0,0,0.02);
  --shadow-hover: 0 12px 24px rgba(75,85,99,0.15);

  background:var(--paper); color:var(--rp-text-main);
  font-family:'Inter',Arial,sans-serif; line-height:1.6; font-size:16px;
  border-radius: var(--radius-lg, 12px); padding: 24px; margin-bottom: 20px;
}
.rp-app, .rp-app *{box-sizing:border-box;}
.rp-app h1, .rp-app h2, .rp-app h3{font-family:'Outfit',Arial,sans-serif; font-weight:700; letter-spacing:-0.02em; color:var(--ink); margin:0 0 .4em;}
.rp-app .mono{font-family:Consolas,monospace;}
.rp-app p{margin:0 0 1em;}
.rp-app a{color:var(--rp-primary);}
.rp-app button{font-family:'Inter',Arial,sans-serif; cursor:pointer;}
.rp-app .muted{color:var(--rp-text-muted);}

.rp-app .app-header{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:0 0 20px; border-bottom:1px solid var(--border); flex-wrap:wrap; margin-bottom: 20px;
}
.rp-app .brand-lockup .tag{font-family:monospace; font-size:11px; color:var(--rp-text-muted);}
.rp-app .header-actions{display:flex; gap:8px; flex-wrap:wrap;}
.rp-app .header-actions button{font-size:13px; padding:8px 12px; border-radius:8px; border:1px solid var(--border); background:var(--card); color:var(--ink);}
.rp-app .header-actions button:hover{opacity:.85;}

.rp-app .tabs{display:flex; gap:4px; margin:0 0 20px; border-bottom:1px solid var(--border); flex-wrap:wrap;}
.rp-app .tab-btn{background:none; border:none; padding:10px 16px; font-size:14px; font-weight:500; color:var(--rp-text-muted); border-bottom:2px solid transparent; margin-bottom:-1px; font-family:'Outfit',sans-serif;}
.rp-app .tab-btn.active{color:var(--ink); border-bottom-color:var(--rp-primary);}
.rp-app .tab-panel{display:none;}
.rp-app .tab-panel.active{display:block;}

.rp-app .card{background:var(--card); border:1px solid var(--border); border-radius:12px; padding:30px; margin-bottom:16px; box-shadow:var(--shadow);}
.rp-app .pill{display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:999px; font-family:monospace; font-size:12px; font-weight:500; border:1px solid var(--border);}
.rp-app .dot{width:7px; height:7px; border-radius:50%; display:inline-block;}
.rp-app .pill.green{color:var(--green-text); border-color:var(--green);} .rp-app .pill.green .dot{background:var(--green);}
.rp-app .pill.amber{color:var(--amber-text); border-color:var(--amber);} .rp-app .pill.amber .dot{background:var(--amber);}
.rp-app .pill.red{color:var(--red-text); border-color:var(--red);} .rp-app .pill.red .dot{background:var(--red);}
.rp-app .pill.invalid{color:var(--rp-text-muted); border-color:var(--rp-text-muted); border-style:dashed;}
.rp-app .pill.on-track{color:var(--green-text); border-color:var(--green);} .rp-app .pill.on-track .dot{background:var(--green);}
.rp-app .pill.at-risk{color:var(--amber-text); border-color:var(--amber);} .rp-app .pill.at-risk .dot{background:var(--amber);}
.rp-app .pill.overdue{color:var(--red-text); border-color:var(--red);} .rp-app .pill.overdue .dot{background:var(--red);}

.rp-app .intro-hero{padding:24px 0 8px;}
.rp-app .intro-hero h1{font-size:32px; max-width:640px;}
.rp-app .company-badge{display:inline-flex; align-items:center; gap:10px; margin-top:12px; padding:10px 16px; border:1px solid var(--border); border-radius:8px; background:var(--card);}

.rp-app .progress-track{height:6px; background:var(--border); border-radius:3px; overflow:hidden; margin-bottom:20px;}
.rp-app .progress-fill{height:100%; background:var(--rp-primary); transition:width .2s;}
.rp-app .question-card .q-meta{font-family:monospace; font-size:12px; color:var(--rp-text-muted); margin-bottom:8px;}
.rp-app .question-card h3{font-size:19px; margin-bottom:14px;}
.rp-app .option-list{display:flex; flex-direction:column; gap:8px; margin-bottom:20px;}
.rp-app .option-row{display:flex; align-items:center; gap:10px; padding:12px 14px; border:1px solid var(--border); border-radius:8px; cursor:pointer;}
.rp-app .option-row:hover{border-color:var(--rp-primary);}
.rp-app .option-row.selected{border-color:var(--rp-primary); border-width:2px; padding:11px 13px; background:rgba(75,85,99,0.05);}
.rp-app .wizard-nav{display:flex; justify-content:space-between; gap:10px;}
.rp-app .wizard-nav button{padding:10px 18px; border-radius:8px; border:1px solid var(--border); background:var(--card); color:var(--ink); font-size:14px;}
.rp-app .wizard-nav button.primary{background:var(--rp-primary); color:#fff; border-color:var(--rp-primary);}
.rp-app .wizard-nav button:disabled{opacity:.4; cursor:not-allowed;}

.rp-app .readiness-summary{display:flex; align-items:center; gap:24px; flex-wrap:wrap;}
.rp-app .readiness-number{font-family:'Outfit',sans-serif; font-weight:800; font-size:48px; line-height:1;}
.rp-app .clause-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:10px; margin-top:16px;}
.rp-app .clause-tile{border:1px solid var(--border); border-radius:8px; padding:12px; background:var(--card); border-left-width:4px;}
.rp-app .clause-tile.red{border-left-color:var(--red);}
.rp-app .clause-tile.amber{border-left-color:var(--amber);}
.rp-app .clause-tile.green{border-left-color:var(--green);}
.rp-app .clause-tile .cid{font-family:monospace; font-size:12px; color:var(--rp-text-muted);}
.rp-app .clause-tile .ctitle{font-size:14px; font-weight:500; margin-top:2px;}

.rp-app .cta-card{background:var(--band); color:#f1f5f9;}
.rp-app .cta-card .tag{font-family:monospace; font-size:11px; letter-spacing:.08em; color:#94a3b8; margin-bottom:8px;}
.rp-app .cta-card ul{margin:8px 0 0; padding-left:20px;}
.rp-app .cta-btn{display:inline-block; padding:10px 18px; border-radius:8px; text-decoration:none; font-size:14px; font-weight:500;}
.rp-app .cta-btn.primary{background:#fff; color:var(--ink);}
.rp-app .cta-btn.secondary{background:transparent; color:#fff; border:1px solid rgba(255,255,255,0.4);}

.rp-app .task-row{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 16px; border:1px solid var(--border); border-radius:8px; margin-bottom:8px; background:var(--card);}
.rp-app .task-row.audit-marker{border-left:4px solid var(--rp-primary); font-weight:600;}
.rp-app .task-row .left{display:flex; flex-direction:column; gap:2px;}
.rp-app .task-row .why{font-size:12px; color:var(--rp-text-muted); max-width:520px;}
.rp-app .task-row .date{font-family:monospace; font-size:13px; color:var(--rp-text-muted); white-space:nowrap;}
.rp-app .gap-flag{padding:10px 14px; border:1px solid var(--red); border-left-width:4px; border-radius:8px; margin-bottom:8px; background:rgba(239,68,68,0.06); font-size:14px;}

.rp-app .clause-detail{margin-bottom:22px; padding-bottom:18px; border-bottom:1px solid var(--border);}
.rp-app .clause-detail:last-child{border-bottom:none;}
.rp-app .evidence-list{margin:8px 0; padding-left:18px;}
.rp-app .procedure-skeleton{background:rgba(75,85,99,0.04); border:1px dashed var(--border); border-radius:8px; padding:14px; font-size:14px; margin-top:10px; white-space:pre-wrap;}

.rp-app .lead-capture-card{border-color:var(--rp-primary);}
.rp-app .lead-capture-card input[type=email], .rp-app .lead-capture-card input[type=text]{padding:10px 12px; border:1px solid var(--border); border-radius:6px; font-family:'Inter',Arial,sans-serif; font-size:14px; width:100%; max-width:340px;}
.rp-app .lead-capture-card label.consent{display:flex; align-items:flex-start; gap:8px; font-size:13px; color:var(--rp-text-muted); margin:10px 0;}
.rp-app .lead-capture-card label.consent input{margin-top:3px;}

footer.rp-app-footer{margin-top:24px; padding-top:16px; border-top:1px solid var(--border); font-family:monospace; font-size:12px; color:var(--rp-text-muted);}