/* Shared styles for the interactive toolkit pages. Loaded after styles.css. */

.tool-header{padding:40px 0 24px;}
.tool-header .eyebrow{margin-bottom:14px;}
.tool-header h1{font-size:28px;color:var(--navy);margin:0 0 10px;}
.tool-header p{color:var(--text-soft);font-size:15px;max-width:640px;}
.tool-back{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--blue);text-decoration:none;margin-bottom:18px;}

.tool-layout{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start;}
.tool-layout.single{grid-template-columns:1fr;max-width:760px;margin:0 auto;}

.panel{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:26px;}
.panel h2{font-size:15px;color:var(--navy);margin:0 0 18px;font-family:'Montserrat',sans-serif;}

/* form fields */
.field{margin-bottom:16px;}
.field label{display:block;font-size:12.5px;font-weight:600;color:var(--navy);margin-bottom:6px;}
.field .hint{font-size:11.5px;color:var(--text-soft);margin-top:5px;display:block;}
.field input[type=text],.field input[type=date],.field input[type=number],.field textarea{
  width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:9px;
  font-family:'Inter',sans-serif;font-size:13.5px;color:var(--text);background:var(--bg);
  transition:border-color .15s ease;
}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--blue);background:#fff;}
.field textarea{resize:vertical;min-height:64px;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}

/* status pills / radio group */
.pill-group{display:flex;gap:8px;}
.pill-choice{
  flex:1;text-align:center;padding:10px 8px;border-radius:9px;border:1.5px solid var(--border);
  font-size:12.5px;font-weight:600;cursor:pointer;color:var(--text-soft);background:#fff;transition:all .15s ease;
}
.pill-choice input{display:none;}
.pill-choice.on-track.active{background:#EAF3DE;border-color:#639922;color:#3B6D11;}
.pill-choice.at-risk.active{background:#FAEEDA;border-color:#BA7517;color:#854F0B;}
.pill-choice.off-track.active{background:#FCEBEB;border-color:#A32D2D;color:#791F1F;}

/* buttons */
.tool-actions{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap;}

/* export preview document — driven by --doc-accent / --doc-head-font / --doc-body-font */
.doc-preview{
  --doc-accent:#1E3557; --doc-head-font:'Montserrat',sans-serif; --doc-body-font:'Source Serif 4',serif;
  background:#fff;border:1px solid var(--border);border-radius:var(--radius);
  padding:30px;font-family:var(--doc-body-font);
}
.doc-preview h3{font-family:var(--doc-head-font);color:var(--doc-accent);font-size:18px;margin:0 0 4px;}
.doc-preview .doc-sub{font-size:12px;color:var(--text-soft);margin-bottom:20px;font-family:'Inter',sans-serif;}
.doc-row{display:flex;gap:14px;padding:10px 0;border-bottom:1px solid var(--border);font-size:13.5px;}
.doc-row:last-child{border-bottom:none;}
.doc-row .k{width:140px;flex-shrink:0;font-family:'Inter',sans-serif;font-weight:600;font-size:11.5px;color:var(--doc-accent);opacity:.75;text-transform:uppercase;letter-spacing:.4px;padding-top:2px;}
.doc-row .v{flex:1;white-space:pre-wrap;}
.doc-status-tag{display:inline-block;padding:4px 12px;border-radius:20px;font-size:11.5px;font-weight:700;font-family:'Inter',sans-serif;}
.doc-empty{color:var(--text-soft);font-style:italic;font-size:13px;}
.doc-brand-header span{color:var(--doc-accent);}

/* style customization bar (preview.html) */
.style-bar{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding:14px 0;margin-bottom:8px;}
.style-group{display:flex;align-items:center;gap:8px;}
.style-group label{font-size:11.5px;font-weight:600;color:var(--text-soft);text-transform:uppercase;letter-spacing:.4px;}
.style-group select{padding:7px 10px;border:1px solid var(--border);border-radius:8px;font-size:12.5px;background:#fff;}
.swatch{width:22px;height:22px;border-radius:50%;cursor:pointer;border:2px solid transparent;flex-shrink:0;}
.swatch.active{border-color:var(--text-primary,#000);box-shadow:0 0 0 2px #fff inset;}
.preview-shell{max-width:760px;margin:0 auto;padding:0 24px;}
.preview-topbar{display:flex;justify-content:space-between;align-items:center;padding:16px 0;border-bottom:1px solid var(--border);margin-bottom:8px;position:sticky;top:0;background:var(--bg);z-index:10;}

/* RAID / list rows */
.raid-row{display:grid;grid-template-columns:110px 1fr 130px 120px 34px;gap:10px;align-items:center;background:var(--bg);border-radius:10px;padding:10px 12px;margin-bottom:8px;}
.raid-row select,.raid-row input{border:1px solid var(--border);border-radius:7px;padding:7px 9px;font-size:12.5px;font-family:'Inter',sans-serif;background:#fff;}
.type-pill,.status-pill{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;padding:5px 8px;border-radius:7px;text-align:center;}
.raid-del{background:none;border:none;color:#A32D2D;cursor:pointer;font-size:16px;line-height:1;padding:6px;border-radius:6px;}
.raid-del:hover{background:#FCEBEB;}

/* checklist */
.checklist-item{
  display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border-radius:10px;
  border:1px solid var(--border);margin-bottom:8px;cursor:pointer;background:#fff;transition:background .15s ease;
}
.checklist-item:hover{background:var(--bg);}
.checklist-item.checked{background:#E1F5EE;border-color:#9FE1CB;}
.checklist-item .box{
  width:20px;height:20px;border-radius:6px;border:2px solid var(--border);flex-shrink:0;margin-top:1px;
  display:flex;align-items:center;justify-content:center;background:#fff;
}
.checklist-item.checked .box{background:#0F6E56;border-color:#0F6E56;}
.checklist-item.checked span.txt{color:#085041;text-decoration:line-through;text-decoration-color:#9FE1CB;}
.progress-bar{height:8px;border-radius:6px;background:var(--border);overflow:hidden;margin:14px 0 22px;}
.progress-fill{height:100%;background:var(--teal);border-radius:6px;transition:width .25s ease;}

/* 2D grids (risk plotter / stakeholder mapper) */
.grid2d-wrap{position:relative;}
.grid2d{
  position:relative;width:100%;aspect-ratio:1/1;border-radius:14px;overflow:hidden;
  border:1px solid var(--border);
}
.grid2d .quad{position:absolute;width:50%;height:50%;display:flex;align-items:center;justify-content:center;text-align:center;padding:14px;font-size:12px;font-weight:600;}
.grid2d .quad span{opacity:.85;}
.grid2d .axis-label{position:absolute;font-size:11px;font-weight:600;color:var(--text-soft);text-transform:uppercase;letter-spacing:.5px;}
.grid-dot{
  position:absolute;width:26px;height:26px;border-radius:50%;background:var(--navy);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;
  transform:translate(-50%,50%);box-shadow:0 2px 6px rgba(30,53,87,.35);border:2px solid #fff;cursor:default;
}
.grid-slider-panel .field input[type=range]{width:100%;accent-color:var(--blue);}
.plotted-list{margin-top:18px;}
.plotted-item{display:flex;align-items:center;gap:12px;padding:10px 12px;background:var(--bg);border-radius:9px;margin-bottom:6px;font-size:13px;}
.plotted-item .num{width:22px;height:22px;border-radius:50%;background:var(--navy);color:#fff;font-size:10.5px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.plotted-item .zone-tag{margin-left:auto;font-size:10.5px;font-weight:700;padding:4px 9px;border-radius:12px;text-transform:uppercase;letter-spacing:.3px;}

/* calculator */
.calc-result{background:var(--navy);color:#fff;border-radius:14px;padding:22px;margin-top:18px;}
.calc-result .big{font-family:'Montserrat',sans-serif;font-size:32px;font-weight:700;margin:4px 0;}
.calc-result .label{font-size:11.5px;color:#9FB6CE;text-transform:uppercase;letter-spacing:.5px;}
.calc-bar{height:14px;border-radius:8px;background:rgba(255,255,255,.15);overflow:hidden;display:flex;margin-top:14px;}
.calc-bar .base{background:var(--blue);}
.calc-bar .buffer{background:var(--amber);}
.calc-legend{display:flex;gap:16px;margin-top:10px;font-size:11.5px;color:#C7D2E3;}
.calc-legend span{display:inline-flex;align-items:center;gap:6px;}
.calc-legend i{width:9px;height:9px;border-radius:2px;display:inline-block;}

/* triage quiz */
.quiz-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:36px;text-align:center;max-width:560px;margin:0 auto;}
.quiz-q{font-family:'Montserrat',sans-serif;font-size:19px;color:var(--navy);margin:0 0 24px;}
.quiz-btns{display:flex;gap:12px;justify-content:center;}
.quiz-btn{padding:12px 28px;border-radius:10px;border:1.5px solid var(--border);background:#fff;font-weight:700;font-size:14px;cursor:pointer;transition:all .15s ease;}
.quiz-btn:hover{border-color:var(--blue);}
.quiz-result{border-radius:14px;padding:26px;margin-top:6px;text-align:left;}
.quiz-result.good{background:#E1F5EE;color:#085041;}
.quiz-result.warn{background:#FAEEDA;color:#854F0B;}
.quiz-result.critical{background:#FCEBEB;color:#791F1F;}
.quiz-result h3{margin:0 0 8px;font-family:'Montserrat',sans-serif;}
.quiz-result ul{margin:12px 0 0;padding-left:20px;}
.quiz-result li{margin-bottom:6px;font-size:13.5px;line-height:1.5;}
.quiz-progress{display:flex;gap:6px;justify-content:center;margin-bottom:24px;}
.quiz-progress div{width:26px;height:4px;border-radius:3px;background:var(--border);}
.quiz-progress div.done{background:var(--teal);}
.signal-chip{display:inline-flex;align-items:center;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;padding:5px 10px;border-radius:20px;background:var(--bg);color:var(--navy);border:1px solid var(--border);margin:0 6px 6px 0;}
.quiz-textarea{width:100%;min-height:110px;padding:14px;border:1px solid var(--border);border-radius:10px;font-family:inherit;font-size:14px;resize:vertical;background:var(--bg);}
.quiz-textarea:focus{outline:none;border-color:var(--blue);}

/* plan builder */
.phase-card{background:var(--bg);border-radius:12px;padding:16px;margin-bottom:14px;}
.phase-head{display:flex;gap:10px;align-items:center;margin-bottom:10px;}
.phase-head input{flex:1;font-weight:600;font-family:'Montserrat',sans-serif;font-size:14px;border:none;background:transparent;color:var(--navy);padding:4px 0;}
.task-row{display:grid;grid-template-columns:1fr 80px 90px 120px 30px;gap:8px;margin-bottom:6px;align-items:center;}
.task-row input,.task-row select{font-size:12.5px;padding:7px 9px;border:1px solid var(--border);border-radius:7px;background:#fff;}
.small-btn{font-size:12px;font-weight:600;color:var(--blue);background:none;border:none;cursor:pointer;padding:4px 0;}
.remove-x{background:none;border:none;color:#A32D2D;cursor:pointer;font-size:16px;}

/* toast */
.pm-toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--navy);color:#fff;padding:11px 20px;border-radius:10px;font-size:13.5px;font-weight:600;
  opacity:0;pointer-events:none;transition:all .2s ease;z-index:200;box-shadow:0 10px 30px rgba(0,0,0,.2);
}
.pm-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* branding */
.brand-block{display:flex;gap:14px;align-items:flex-start;background:var(--bg);border-radius:12px;padding:14px;margin-bottom:20px;}
.brand-logo{
  width:56px;height:56px;border-radius:10px;border:1.5px dashed var(--border);background:#fff;
  display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;position:relative;overflow:visible;
}
.brand-logo img{width:100%;height:100%;object-fit:contain;border-radius:9px;}
.brand-logo-empty{font-size:10.5px;color:var(--text-soft);font-weight:600;text-align:center;padding:0 4px;}
.brand-logo-x{
  position:absolute;top:-8px;right:-8px;width:20px;height:20px;border-radius:50%;background:#A32D2D;color:#fff;
  border:2px solid #fff;font-size:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.doc-brand-header{display:flex;align-items:center;gap:10px;margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid var(--border);}
.doc-brand-header img{height:32px;width:auto;max-width:120px;object-fit:contain;}
.doc-brand-header span{font-family:'Montserrat',sans-serif;font-weight:600;font-size:13.5px;color:var(--navy);}

/* Quill rich text field overrides, matched to our tokens */
.rt-field{margin-bottom:16px;}
.rt-field > label{display:block;font-size:12.5px;font-weight:600;color:var(--navy);margin-bottom:6px;}
.ql-toolbar.ql-snow{border:1px solid var(--border);border-bottom:none;border-radius:9px 9px 0 0;background:var(--bg);padding:6px 8px;}
.ql-container.ql-snow{border:1px solid var(--border);border-radius:0 0 9px 9px;font-family:'Inter',sans-serif;font-size:13.5px;background:var(--bg);min-height:70px;}
.ql-editor{min-height:70px;padding:10px 12px;}
.ql-editor.ql-blank::before{color:var(--text-soft);font-style:normal;font-size:13px;}
.ql-snow .ql-stroke{stroke:var(--text-soft);}
.ql-snow .ql-picker{color:var(--text-soft);}
.ql-snow.ql-toolbar button:hover, .ql-snow .ql-toolbar button:hover{color:var(--blue);}
.ql-snow.ql-toolbar button:hover .ql-stroke{stroke:var(--blue);}
.doc-preview .v ul, .doc-preview .v ol{margin:0;padding-left:20px;}
.doc-preview .v p{margin:0 0 6px;}
.doc-preview .v p:last-child{margin-bottom:0;}

/* risk/entry cards with owner + mitigation */
.entry-card{background:var(--bg);border-radius:12px;margin-bottom:10px;overflow:hidden;border:1px solid var(--border);}
.entry-head{display:flex;align-items:center;gap:10px;padding:12px 14px;cursor:pointer;}
.entry-head .grow{flex:1;font-size:13px;font-weight:600;color:var(--navy);}
.entry-body{padding:0 14px 14px;display:none;}
.entry-card.open .entry-body{display:block;}
.entry-card.open .entry-chevron{transform:rotate(180deg);}
.entry-chevron{transition:transform .2s ease;color:var(--text-soft);flex-shrink:0;}
.entry-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px;}
.entry-grid label{display:block;font-size:11px;font-weight:600;color:var(--text-soft);text-transform:uppercase;letter-spacing:.4px;margin-bottom:4px;}
.entry-grid input,.entry-grid select,.entry-grid textarea{width:100%;padding:8px 10px;border:1px solid var(--border);border-radius:8px;font-size:12.5px;background:#fff;font-family:'Inter',sans-serif;}
.entry-grid textarea{min-height:50px;resize:vertical;}

@media (max-width:840px){
  .tool-layout{grid-template-columns:1fr;}
  .field-row{grid-template-columns:1fr;}
  .raid-row{grid-template-columns:1fr;}
  .task-row{grid-template-columns:1fr;}
}

@media print{
  @page{ margin: 14mm; }
  nav.site,.tool-actions,.tool-back,footer,.style-bar,.preview-topbar{display:none !important;}
  body{background:#fff;}
  .preview-shell{max-width:none;padding:0;margin:0;}
  .doc-preview{border:none;padding:0;border-radius:0;}
  .doc-row{break-inside:avoid;}
}