/* Cash vs Investing Opportunity Cost Calculator (UK) - Enhanced Wide-Width Layout */
.cvi-oc{
  --border:#083141;
  --muted:#6b7280;
  --bg:#ffffff;
  --card:#fafafa;
  --line:#e5e7eb;
  --primary:#2563eb;
  --primaryHover:#1e4fd6;
  --add:#59747C;
  --thead:#EBF2F4;
  --success:#16a34a;
  --warning:#ea580c;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  color:#111827;
  box-sizing:border-box !important;
  width:1100px !important;
  max-width:1100px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  margin-top:0;
  margin-bottom:3rem !important;
  padding:24px !important;
  display:block !important;
  background:#ffffff;
  border:2px solid #083141;
  border-radius:20px;
  box-shadow:0 4px 20px rgba(0,0,0,0.08);
}
.cvi-oc *{box-sizing:border-box;}
.cvi-oc .wrap{width:100%;max-width:100%;margin:0;padding:0;}
.cvi-oc .title{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start;justify-content:space-between;margin-bottom:24px;padding:0;}
.cvi-oc h2{margin:0 0 0.5rem 0;font-size:1.8rem;line-height:1.2;font-weight:800;color:#083141;}
.cvi-oc .sub{color:var(--muted);font-size:0.95rem;line-height:1.5;margin:0;}
.cvi-oc .grid{display:flex;flex-direction:row;gap:20px;flex-wrap:wrap;}
@media(min-width:900px){.cvi-oc .grid{flex-wrap:nowrap;}}
.cvi-oc .card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px;box-shadow:0 2px 8px rgba(0,0,0,0.03);flex:1;min-width:280px;}
.cvi-oc .card--results{background:#ffffff;border:2px solid #083141;margin-top:24px;}
.cvi-oc .card h3{margin:0 0 12px 0;font-size:1.15rem;font-weight:800;color:#083141;padding-bottom:8px;border-bottom:2px solid #2563eb;line-height:1.3;}
.cvi-oc .help{color:var(--muted);font-size:0.9rem;margin:0 0 16px 0;line-height:1.6;}
.cvi-oc .row{display:grid;grid-template-columns:1fr;gap:12px;margin-bottom:12px;}
@media(min-width:520px){.cvi-oc .row{grid-template-columns:1fr 1fr;gap:12px;}}
.cvi-oc label{display:block;font-size:0.85rem;color:#374151;font-weight:600;margin-bottom:6px;}
.cvi-oc input,.cvi-oc select{width:100%;border:1px solid #cbd5e1;border-radius:8px;padding:10px 12px;background:#fff;color:#111827;font-size:14px;transition:border-color 0.2s,box-shadow 0.2s;outline:none;}
.cvi-oc input:focus,.cvi-oc select:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,0.1);}
.cvi-oc .inst{background:#f0f9ff;border:1px solid #bae6fd;border-left:4px solid #2563eb;border-radius:12px;padding:12px 16px;font-size:0.9rem;color:#1e40af;margin:16px 0;line-height:1.6;}
.cvi-oc .btns{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:12px 0;}
.cvi-oc .btn{appearance:none;border:1px solid #cbd5e1;background:#fff;color:#111827;border-radius:8px;padding:10px 16px;font-size:14px;cursor:pointer;font-weight:600;transition:all 0.2s;line-height:1;}
.cvi-oc .btn:hover:not(:disabled){background:#f3f4f6;border-color:#2563eb;}
.cvi-oc .btn:active:not(:disabled){transform:translateY(1px);}
.cvi-oc .btn:disabled{opacity:0.5;cursor:not-allowed;}
.cvi-oc .btn--primary{background:var(--primary);border-color:var(--primary);color:#fff;}
.cvi-oc .btn--primary:hover:not(:disabled){background:var(--primaryHover);border-color:var(--primaryHover);}
.cvi-oc .kpis{display:grid;grid-template-columns:1fr;gap:12px;margin:20px 0;}
@media(min-width:900px){.cvi-oc .kpis{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1200px){.cvi-oc .kpis{grid-template-columns:repeat(4,1fr);}}
.cvi-oc .kpi{background:#fff;border:2px solid var(--line);border-radius:12px;padding:16px;box-shadow:0 2px 4px rgba(0,0,0,0.05);transition:transform 0.2s,box-shadow 0.2s;}
.cvi-oc .kpi:hover{transform:translateY(-2px);box-shadow:0 4px 8px rgba(0,0,0,0.1);}
.cvi-oc .kpi--highlight{border-color:#2563eb;background:linear-gradient(135deg,rgba(37,99,235,0.05) 0%,rgba(37,99,235,0.02) 100%);}
.cvi-oc .kpi .k{color:var(--muted);font-size:0.85rem;font-weight:700;text-transform:uppercase;letter-spacing:0.3px;margin-bottom:8px;}
.cvi-oc .kpi .v{font-size:1.8rem;font-weight:900;margin-top:4px;color:#083141;line-height:1.2;}
.cvi-oc .kpi--highlight .kpi .v{color:#2563eb;}
.cvi-oc .kpi .s{color:var(--muted);font-size:0.8rem;margin-top:6px;line-height:1.4;}
.cvi-oc .badge{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:6px 12px;font-size:13px;border:1px solid var(--line);background:#fff;font-weight:600;}
.cvi-oc .badge.ok{border-color:#bbf7d0;background:#f0fdf4;color:#166534;}
.cvi-oc .badge.warn{border-color:#fed7aa;background:#fff7ed;color:#9a3412;}
.cvi-oc .tables{display:grid;grid-template-columns:1fr;gap:12px;}
@media(min-width:900px){.cvi-oc .tables{grid-template-columns:1fr;}}
.cvi-oc table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,0.05);}
.cvi-oc thead th{background:var(--thead);text-align:left;font-size:0.85rem;padding:12px 14px;border-bottom:1px solid var(--line);font-weight:700;color:#374151;text-transform:uppercase;letter-spacing:0.3px;}
.cvi-oc tbody td{padding:12px 14px;border-bottom:1px solid #eef2f7;font-size:13px;color:#111827;}
.cvi-oc tbody td.num{text-align:right;white-space:nowrap;}
.cvi-oc tbody tr:last-child td{border-bottom:none;}
.cvi-oc tbody tr:hover{background:#f9fafb;}
.cvi-oc tbody tr.breakeven{background:#fef3c7;border-left:3px solid #f59e0b;}
.cvi-oc .scroll{overflow:auto;border-radius:12px;border:1px solid var(--line);}
.cvi-oc .foot{color:var(--muted);font-size:12px;margin-top:12px;line-height:1.5;}
.cvi-oc .small{font-size:12px;color:var(--muted);}
.cvi-oc .split{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin-top:12px;}
.cvi-oc .note{font-size:12px;color:var(--muted);line-height:1.5;padding:10px;background:#f9fafb;border-radius:8px;border-left:3px solid #d1d5db;margin-top:12px;}
/* Download CSV – front and centre, prominent CTA */
.cvi-oc .csv-download-container{
  display:flex;justify-content:center;align-items:center;
  margin-top:32px;padding:28px 24px;
  border-top:3px solid var(--primary);
  background:linear-gradient(180deg, rgba(37,99,235,0.06) 0%, rgba(37,99,235,0.02) 100%);
  border-radius:16px;
}
.cvi-oc .btn--csv{
  background:var(--primary);
  border:3px solid var(--primary);
  color:#fff;
  padding:18px 36px;
  font-size:18px;
  font-weight:800;
  border-radius:14px;
  box-shadow:0 6px 20px rgba(37,99,235,0.35);
  transition:all 0.2s;
  cursor:pointer;
  outline:none;
  min-height:56px;
  width:100%;
  max-width:420px;
  -webkit-tap-highlight-color:transparent;
}
.cvi-oc .btn--csv:hover{
  background:var(--primaryHover);
  border-color:var(--primaryHover);
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(37,99,235,0.4);
}
.cvi-oc .btn--csv:active{transform:translateY(0);}
.cvi-oc .btn--csv:focus{outline:3px solid rgba(37,99,235,0.4);outline-offset:2px;}
.cvi-oc .btn--csv:focus:not(:focus-visible){outline:none;}

/* Charts */
.cvi-oc .charts{display:grid;grid-template-columns:1fr;gap:24px;margin:24px 0;}
.cvi-oc .chart-container{border:1px solid var(--line);border-radius:12px;padding:20px;background:#ffffff;box-shadow:0 2px 4px rgba(0,0,0,0.05);}
.cvi-oc .chart-title{font-size:1.1rem;font-weight:700;color:#083141;margin-bottom:16px;padding-bottom:10px;border-bottom:2px solid #2563eb;}
.cvi-oc .chart{width:100%;height:400px;border:1px solid var(--line);border-radius:12px;background:#fff;display:block;position:relative;}
.cvi-oc .chart-toggle{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap;}
.cvi-oc .chart-toggle-btn{appearance:none;border:1px solid #cbd5e1;background:#fff;color:#111827;padding:6px 12px;border-radius:6px;font-size:12px;cursor:pointer;font-weight:600;transition:all 0.2s;}
.cvi-oc .chart-toggle-btn:hover{background:#f3f4f6;border-color:#2563eb;}
.cvi-oc .chart-toggle-btn.active{background:#2563eb;border-color:#2563eb;color:#fff;}

/* Comparison metrics */
.cvi-oc .comparison-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:16px 0;}
.cvi-oc .comparison-card{border:2px solid var(--line);border-radius:12px;padding:14px;background:#ffffff;text-align:center;transition:all 0.2s;}
.cvi-oc .comparison-card--highlight{border-color:#2563eb;background:linear-gradient(135deg,rgba(37,99,235,0.05) 0%,rgba(37,99,235,0.02) 100%);box-shadow:0 4px 8px rgba(37,99,235,0.15);}
.cvi-oc .comparison-label{font-size:0.85rem;color:#6b7280;font-weight:700;margin-bottom:8px;text-transform:uppercase;letter-spacing:0.3px;}
.cvi-oc .comparison-value{font-size:1.5rem;font-weight:900;color:#083141;margin-bottom:4px;}
.cvi-oc .comparison-card--highlight .comparison-value{color:#2563eb;}
.cvi-oc .comparison-desc{font-size:0.8rem;color:#6b7280;line-height:1.4;margin-top:6px;}

/* Inflation impact visualization */
.cvi-oc .inflation-impact{border:2px dashed #cbd5e1;border-radius:12px;padding:16px;background:#f9fafb;margin:24px 0;}
.cvi-oc .inflation-impact strong{font-weight:700;color:#991b1b;}
.cvi-oc .inflation-impact-title{font-size:1rem;font-weight:700;color:#083141;margin-bottom:12px;}
.cvi-oc .inflation-bar{width:100%;height:32px;background:#e5e7eb;border-radius:8px;overflow:hidden;margin:12px 0;position:relative;}
.cvi-oc .inflation-bar-fill{height:100%;background:linear-gradient(90deg,#ea580c,#f97316);border-radius:8px;transition:width 0.5s ease;position:relative;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:0.85rem;}
.cvi-oc .inflation-bar-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:0.85rem;font-weight:700;color:#111827;z-index:1;white-space:nowrap;}

/* Responsive - Desktop to Tablet */
@media (max-width:1160px){
  .cvi-oc{width:calc(100% - 2rem) !important;max-width:calc(100% - 2rem) !important;margin-left:1rem !important;margin-right:1rem !important;padding:20px !important;}
}

/* Tablet Landscape (1024px and below) */
@media (max-width:1024px){
  .cvi-oc .charts{grid-template-columns:1fr;}
  .cvi-oc .comparison-grid{grid-template-columns:repeat(2,1fr);}
  .cvi-oc .grid{flex-wrap:wrap;}
  .cvi-oc .card{min-width:100%;}
  .cvi-oc .chart-container{padding:16px;}
  .cvi-oc .chart{height:350px;}
}

/* Tablet Portrait (768px and below) */
@media (max-width:768px){
  .cvi-oc{padding:18px !important;}
  .cvi-oc .grid{flex-direction:column;}
  .cvi-oc .card{min-width:100%;padding:18px;}
  .cvi-oc .kpis{grid-template-columns:repeat(2,1fr);}
  .cvi-oc .comparison-grid{grid-template-columns:repeat(2,1fr);}
  .cvi-oc h2{font-size:1.6rem;}
  .cvi-oc .chart{height:320px;}
  .cvi-oc .chart-container{padding:14px;}
  .cvi-oc .chart-title{font-size:1rem;}
  .cvi-oc .kpi .v{font-size:1.6rem;}
  .cvi-oc .btn--csv{padding:12px 24px;font-size:15px;}
  .cvi-oc table{font-size:12px;}
  .cvi-oc thead th,.cvi-oc tbody td{padding:10px 12px;}
}

/* Mobile Landscape (640px and below) */
@media (max-width:640px){
  .cvi-oc{padding:16px !important;}
  .cvi-oc .title{flex-direction:column;gap:12px;}
  .cvi-oc h2{font-size:1.4rem;}
  .cvi-oc .sub{font-size:0.9rem;}
  .cvi-oc .card{padding:16px;}
  .cvi-oc .card h3{font-size:1.05rem;}
  .cvi-oc .kpis{grid-template-columns:1fr;}
  .cvi-oc .kpi .v{font-size:1.5rem;}
  .cvi-oc .comparison-grid{grid-template-columns:1fr;}
  .cvi-oc .comparison-value{font-size:1.3rem;}
  .cvi-oc .chart{height:280px;}
  .cvi-oc .chart-container{padding:12px;}
  .cvi-oc .chart-title{font-size:0.95rem;}
  .cvi-oc .chart-toggle-btn{font-size:11px;padding:5px 10px;}
  .cvi-oc .btn--csv{width:100%;padding:14px 20px;font-size:15px;}
  .cvi-oc .inflation-impact{padding:14px;}
  .cvi-oc .inflation-bar-text{font-size:0.75rem;white-space:normal;text-align:center;padding:0 4px;}
  .cvi-oc table{font-size:11px;min-width:600px;}
  .cvi-oc thead th,.cvi-oc tbody td{padding:8px 10px;}
  .cvi-oc .scroll{-webkit-overflow-scrolling:touch;overflow-x:auto;}
}

/* Mobile Portrait (480px and below) */
@media (max-width:480px){
  .cvi-oc{padding:12px !important;}
  .cvi-oc h2{font-size:1.3rem;line-height:1.3;}
  .cvi-oc .sub{font-size:0.85rem;}
  .cvi-oc .card{padding:14px;}
  .cvi-oc .card h3{font-size:1rem;}
  .cvi-oc .help{font-size:0.85rem;}
  .cvi-oc .kpi{padding:14px;}
  .cvi-oc .kpi .v{font-size:1.4rem;}
  .cvi-oc .kpi .k{font-size:0.8rem;}
  .cvi-oc .kpi .s{font-size:0.75rem;}
  .cvi-oc .chart{height:250px;}
  .cvi-oc .chart-container{padding:10px;}
  .cvi-oc .chart-title{font-size:0.9rem;margin-bottom:12px;}
  .cvi-oc .comparison-card{padding:12px;}
  .cvi-oc .comparison-value{font-size:1.2rem;}
  .cvi-oc .comparison-label{font-size:0.8rem;}
  .cvi-oc .comparison-desc{font-size:0.75rem;}
  .cvi-oc .inflation-impact{padding:12px;}
  .cvi-oc .inflation-impact-title{font-size:0.9rem;}
  .cvi-oc .inflation-bar{height:28px;}
  .cvi-oc .inflation-bar-fill{font-size:0.75rem;}
  .cvi-oc .btn--csv{padding:12px 18px;font-size:14px;}
  .cvi-oc .badge{font-size:12px;padding:5px 10px;}
  .cvi-oc .foot{font-size:11px;}
  .cvi-oc .note{font-size:11px;padding:8px;}
  .cvi-oc table{font-size:10px;min-width:550px;}
  .cvi-oc thead th,.cvi-oc tbody td{padding:6px 8px;}
}

/* Small Mobile (360px and below) */
@media (max-width:360px){
  .cvi-oc{padding:10px !important;}
  .cvi-oc h2{font-size:1.2rem;}
  .cvi-oc .card{padding:12px;}
  .cvi-oc .kpi .v{font-size:1.3rem;}
  .cvi-oc .chart{height:220px;}
  .cvi-oc .comparison-value{font-size:1.1rem;}
  .cvi-oc .btn--csv{font-size:13px;padding:10px 16px;}
}

/* Print */
@media print{
  .cvi-oc .no-print{display:none !important;}
  .cvi-oc .wrap{max-width:none;padding:0;}
  .cvi-oc .card{break-inside:avoid;}
  .cvi-oc table{font-size:11px;}
  .cvi-oc .chart{height:300px;}
  @page{size:A4; margin:12mm;}
}