/* B14 Composer UI (vanilla JS) */
#cs-app-root .csb14{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;padding:14px;max-width:1020px;margin:0 auto;}
#cs-app-root .csb14 h1{font-size:24px;margin:0 0 6px 0;letter-spacing:-0.2px;}
#cs-app-root .csb14 .sub{color:#6b7280;font-size:13px;margin:0 0 12px 0;}
#cs-app-root .csb14 .card{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:12px;margin:10px 0;}
#cs-app-root .csb14 .row{display:flex;gap:12px;flex-wrap:wrap;}
#cs-app-root .csb14 .col{flex:1;min-width:280px;}
/* Layout target: top controls row, then full-width resources */
#cs-app-root .csb14 .csb14TopRow{display:grid;grid-template-columns:1.3fr .9fr;gap:12px;align-items:start;}
@media (max-width:900px){#cs-app-root .csb14 .csb14TopRow{grid-template-columns:1fr;}}

/* Make the resource tabs more obvious for low-vision */
#cs-app-root .csb14 .tabBar{display:flex;gap:10px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:6px;margin-bottom:8px;}
#cs-app-root .csb14 .tabBar .btn{background:#f3f4f6;border-color:#e5e7eb;}
#cs-app-root .csb14 .tabBar .btnActive{background:#111827;color:#fff;border-color:#111827;}
#cs-app-root .csb14 .btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 12px;border-radius:12px;border:1px solid #e5e7eb;background:#fff;color:#111827;cursor:pointer;font-weight:700;}
#cs-app-root .csb14 .btnSmall{padding:6px 10px;font-size:12px;font-weight:800;border-radius:999px;}
#cs-app-root .csb14 .btnActive{background:#111827;color:#fff;border-color:#111827;}
#cs-app-root .csb14 .dt{width:100%;padding:10px 12px;border-radius:12px;border:1px solid #e5e7eb;font-size:14px;}
#cs-app-root .csb14 .btn:disabled{opacity:.55;cursor:not-allowed;color:#111827;}
#cs-app-root .csb14 .btnPrimary{background:#111827;color:#fff;border-color:#111827;}
#cs-app-root .csb14 .pill{display:inline-block;padding:2px 10px;border-radius:999px;border:1px solid #e5e7eb;background:#f9fafb;font-size:12px;color:#374151;}
#cs-app-root .csb14 .muted{color:#6b7280;}
#cs-app-root .csb14 .big{font-size:16px;font-weight:800;}
#cs-app-root .csb14 .list{max-height:420px;overflow:auto;border:1px solid #f3f4f6;border-radius:12px;padding:8px;background:#fafafa;}
#cs-app-root .csb14 .item{display:flex;align-items:flex-start;gap:10px;padding:8px;border-radius:10px;}
#cs-app-root .csb14 .item:hover{background:#fff;}
#cs-app-root .csb14 .item input{transform:scale(1.3);margin-top:3px;}
#cs-app-root .csb14 .kv{font-size:13px;color:#374151;margin:6px 0;}
#cs-app-root .csb14 .banner{border:1px solid #fed7aa;background:#fff7ed;color:#9a3412;border-radius:14px;padding:12px;margin:10px 0;}
#cs-app-root .csb14 details{margin-top:8px;}
#cs-app-root .csb14 pre{white-space:pre-wrap;background:#f9fafb;border:1px solid #f3f4f6;border-radius:12px;padding:10px;overflow:auto;max-height:260px;}

/* Plan A selection summary pills */
.pill{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;line-height:18px;border:1px solid #e5e7eb;background:#f9fafb;margin-right:6px;}
.pill-ok{border-color:#bbf7d0;background:#f0fdf4;}
.pill-bad{border-color:#fecaca;background:#fef2f2;}


/* Actionable Plans UI */

#cs-app-root .csb14 .planTabs{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px;margin-bottom:10px;}
#cs-app-root .csb14 .planTabs .btn{background:#f3f4f6;border-color:#e5e7eb;}
#cs-app-root .csb14 .planTabs .btnActive{background:#111827;color:#fff;border-color:#111827;}
#cs-app-root .csb14 .planTab{border:1px solid #e5e7eb;background:#fff;border-radius:999px;padding:8px 12px;font-weight:600;cursor:pointer;}
#cs-app-root .csb14 .planTab.active{border-color:#111827;background:#f3f4f6;}
#cs-app-root .csb14 .planTab.disabled{opacity:.5;cursor:not-allowed;}
#cs-app-root .csb14 .preview{border:1px solid #e5e7eb;border-radius:14px;padding:12px;background:#fff;margin-top:10px;}
#cs-app-root .csb14 .previewRow{border-top:1px solid #f3f4f6;padding-top:10px;margin-top:10px;}
#cs-app-root .csb14 .previewRow:first-of-type{border-top:none;padding-top:0;margin-top:0;}
#cs-app-root .csb14 .overlaps{margin-top:8px;}
#cs-app-root .csb14 .pill.ok{border-color:#bbf7d0;background:#f0fdf4;color:#166534;}
#cs-app-root .csb14 .pill.danger{border-color:#fecaca;background:#fff5f5;color:#b91c1c;}
#cs-app-root .csb14 .actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px;}
#cs-app-root .csb14 label.sug{display:flex;align-items:center;gap:8px;margin-top:6px;}

/* Horizontal resource group tabs */
#cs-app-root .csb14 .csb14GroupTabs{display:flex;gap:8px;overflow:auto;padding:6px 2px;margin:8px 0;border:1px solid #f3f4f6;border-radius:12px;background:#fff;}
#cs-app-root .csb14 .csb14GroupTab{flex:0 0 auto;border:1px solid #e5e7eb;background:#fff;border-radius:999px;padding:6px 10px;font-weight:700;cursor:pointer;white-space:nowrap;}
#cs-app-root .csb14 .csb14GroupTab[aria-pressed="true"]{border-color:#111827;background:#f3f4f6;}

/* Confirm modal */
#cs-app-root .csb14 .csb14ModalOverlay{position:fixed;inset:0;background:rgba(0,0,0,0.35);display:flex;align-items:center;justify-content:center;padding:20px;z-index:9999;}
#cs-app-root .csb14 .csb14Modal{width:min(720px, 96vw);background:#fff;border-radius:16px;border:1px solid #e5e7eb;box-shadow:0 12px 30px rgba(0,0,0,0.18);padding:16px;}
#cs-app-root .csb14 .csb14Modal h3{margin:0 0 8px 0;font-size:18px;}
#cs-app-root .csb14 .csb14Modal .row{display:flex;gap:12px;flex-wrap:wrap;margin:8px 0;}
#cs-app-root .csb14 .csb14Modal .k{color:#6b7280;font-size:12px;text-transform:uppercase;letter-spacing:0.04em;}
#cs-app-root .csb14 .csb14Modal .v{font-size:14px;}
#cs-app-root .csb14 .csb14Modal ul{margin:8px 0 0 18px;}
#cs-app-root .csb14 .csb14Modal .actions{display:flex;justify-content:flex-end;gap:10px;margin-top:14px;}
#cs-app-root .csb14 .csb14Modal .btn{padding:10px 12px;border-radius:12px;border:1px solid #e5e7eb;background:#fff;color:#111827;cursor:pointer;font-weight:600;}
#cs-app-root .csb14 .csb14Modal .btn.primary{background:#111827;color:#fff;border-color:#111827;}
#cs-app-root .csb14 .csb14GroupHdr{font-size:12px;font-weight:800;color:#6b7280;margin:10px 6px 6px;}

/* Swap Map + alternates */
.csb14SwapRow{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:8px; padding:8px 10px; border:1px solid #e5e7eb; border-radius:12px; background:#fafafa; }
.csb14SwapRow .left{ flex:1; min-width:0; }
.csb14SwapRow .right{ display:flex; gap:8px; align-items:center; }
.swapSelect{ max-width:220px; padding:6px 8px; border-radius:10px; border:1px solid #d1d5db; background:#fff; }
.pill.warn{ background:#fff7ed; border:1px solid #fed7aa; color:#9a3412; }

/* Receipt overlay */
.csb14Modal .modalList{ max-height:280px; overflow:auto; }

/* r17.6.1 visibility fixes */
.csb14 .btnSmall{color:#111827;}
.csb14 .btnSmall.btnActive{color:#fff;}

/* ===== r17.6.2 UI overrides: tab visibility + horizontal comfort ===== */
.csb14GroupTabs{
  display:flex !important;
  gap:10px !important;
  flex-wrap:nowrap !important;
  overflow-x:auto !important;
  padding:10px 10px !important;
  margin:0 0 10px 0 !important;
  background:#ffffff !important;
  position:sticky !important;
  top:0 !important;
  z-index:5 !important;
  border-bottom:1px solid #e5e7eb !important;
  scrollbar-gutter:stable both-edges;
}
.csb14GroupTab{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  padding:10px 16px !important;
  border-radius:9999px !important;
  border:1px solid #d1d5db !important;
  background:#ffffff !important;
  color:#111827 !important;
  font-weight:700 !important;
  line-height:1 !important;
  white-space:nowrap !important;
  opacity:1 !important;
}
.csb14GroupTab[aria-pressed="true"]{
  background:#111827 !important;
  border-color:#111827 !important;
  color:#ffffff !important;
}
.csb14GroupTab .pill{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:22px !important;
  height:22px !important;
  padding:0 8px !important;
  border-radius:9999px !important;
  border:1px solid #d1d5db !important;
  background:#f3f4f6 !important;
  color:#111827 !important;
  font-weight:800 !important;
  font-size:12px !important;
}
.csb14GroupTab[aria-pressed="true"] .pill{
  border-color:#111827 !important;
  background:#ffffff !important;
  color:#111827 !important;
}

/* Plan pills: force readable text even when "disabled-ish" */
.planTabs .planTab{
  color:#111827 !important;
  background:#ffffff !important;
  border:1px solid #d1d5db !important;
  opacity:1 !important;
  font-weight:800 !important;
}
.planTabs .planTab[aria-pressed="true"]{
  background:#111827 !important;
  border-color:#111827 !important;
  color:#ffffff !important;
}
.planTabs .planTab[disabled]{
  opacity:0.45 !important;
  cursor:not-allowed !important;
}

/* Composer layout: make resources card feel less cramped on wide screens */
@media (min-width: 900px){
  .csb14Row{align-items:flex-start !important;}
  .csb14Col{min-width:0 !important;}
}