/* =====================================================================
   RAYPCB Interactive Tools — front-end styles
   Palette taken from the RAYPCB instant-quote reference UI.
   ===================================================================== */
.raypcb-tool{
  --ray-blue:#1273c9;
  --ray-blue-d:#0d5aa3;
  --ray-blue-l:#eaf3fc;
  --ray-blue-l2:#f4f9fe;
  --ray-ink:#1f2933;
  --ray-muted:#5b6b7b;
  --ray-line:#e3e9f0;
  --ray-ok:#1f9d55;
  --ray-warn:#c47f17;
  --ray-bad:#d64545;
  --ray-amber-bg:#fdf6e3;
  --ray-radius:12px;
  --ray-shadow:0 1px 2px rgba(16,42,67,.06),0 8px 24px rgba(16,42,67,.06);
  box-sizing:border-box;
  color:var(--ray-ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:15px;
  line-height:1.55;
  max-width:1080px;
  margin:0 auto;
}
.raypcb-tool *,.raypcb-tool *::before,.raypcb-tool *::after{box-sizing:border-box;}
.raypcb-boot{padding:26px;color:var(--ray-muted);font-size:14px;}
.raypcb-error{padding:16px;border:1px solid var(--ray-bad);border-radius:8px;color:var(--ray-bad);}

/* ---------- shell / heading ---------- */
.ray-head{text-align:center;margin:0 0 14px;}
.ray-head h2{
  margin:0;font-size:26px;font-weight:800;letter-spacing:.2px;
  background:linear-gradient(90deg,#12a3e0,#1273c9 60%,#0d5aa3);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.ray-head p{margin:6px 0 0;color:var(--ray-muted);font-size:14px;}
.ray-head a{color:var(--ray-blue);font-weight:600;text-decoration:none;}
.ray-head a:hover{text-decoration:underline;}

/* ---------- tabs ---------- */
.ray-tabs{display:flex;flex-wrap:wrap;gap:2px;border:1px solid var(--ray-line);
  background:#fff;border-radius:12px;padding:6px;box-shadow:var(--ray-shadow);margin-bottom:16px;}
.ray-tab{display:inline-flex;align-items:center;gap:7px;border:0;cursor:pointer;
  padding:9px 14px;border-radius:8px;font-size:13.5px;font-weight:600;color:var(--ray-muted);
  background:transparent;white-space:nowrap;transition:.15s;}
.ray-tab svg{width:15px;height:15px;}
.ray-tab:hover{color:var(--ray-blue);background:var(--ray-blue-l);}
.ray-tab.is-active{color:#fff;background:var(--ray-blue);box-shadow:0 3px 8px rgba(18,115,201,.35);}

/* ---------- layout ---------- */
.ray-grid{display:grid;grid-template-columns:1fr 340px;gap:18px;align-items:start;}
.ray-grid.single{grid-template-columns:1fr;}
@media(max-width:820px){.ray-grid{grid-template-columns:1fr;}}

.ray-card{background:#fff;border:1px solid var(--ray-line);border-radius:var(--ray-radius);
  box-shadow:var(--ray-shadow);padding:20px;}
.ray-card+.ray-card{margin-top:16px;}

.ray-typepill{display:inline-flex;align-items:center;gap:7px;background:var(--ray-blue-l);
  color:var(--ray-blue-d);font-weight:700;font-size:12.5px;padding:5px 11px;border-radius:20px;}
.ray-typepill .dot{width:8px;height:8px;border-radius:50%;background:var(--ray-blue);}
.ray-type-desc{color:var(--ray-muted);font-size:13.5px;margin:10px 0 4px;}
.ray-type-desc a{color:var(--ray-blue);text-decoration:none;}

/* ---------- section titles ---------- */
.ray-sect{display:flex;align-items:center;gap:9px;margin:22px 0 12px;
  font-size:12.5px;font-weight:800;letter-spacing:.9px;text-transform:uppercase;color:var(--ray-blue-d);}
.ray-sect:first-of-type{margin-top:4px;}
.ray-sect::before{content:"";width:4px;height:15px;border-radius:3px;background:var(--ray-blue);}

/* ---------- fields ---------- */
.ray-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px;}
.ray-fields.one{grid-template-columns:1fr;}
.ray-fields.three{grid-template-columns:1fr 1fr 1fr;}
@media(max-width:560px){.ray-fields,.ray-fields.three{grid-template-columns:1fr;}}
.ray-field label,.ray-field>span.lbl{display:block;font-size:12.5px;font-weight:600;color:var(--ray-ink);margin-bottom:6px;}
.ray-field .hint{font-size:11.5px;color:var(--ray-muted);margin-top:5px;}
.ray-input,.ray-select{width:100%;height:42px;padding:0 12px;border:1px solid var(--ray-line);
  border-radius:9px;font-size:14px;color:var(--ray-ink);background:#fff;transition:.15s;outline:none;appearance:none;}
select.ray-select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235b6b7b' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:32px;}
.ray-input:focus,.ray-select:focus{border-color:var(--ray-blue);box-shadow:0 0 0 3px rgba(18,115,201,.15);}
.ray-input.invalid{border-color:var(--ray-bad);box-shadow:0 0 0 3px rgba(214,69,69,.12);}
.ray-dim{display:grid;grid-template-columns:1fr 22px 1fr;align-items:center;gap:6px;}
.ray-dim .x{text-align:center;color:var(--ray-muted);font-weight:600;}
.ray-suffix{position:relative;}
.ray-suffix .u{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--ray-muted);font-size:12px;pointer-events:none;}
.ray-suffix .ray-input{padding-right:44px;}
.ray-range{width:100%;accent-color:var(--ray-blue);}

/* ---------- pills & swatches ---------- */
.ray-pills{display:flex;flex-wrap:wrap;gap:8px;}
.ray-pill{border:1px solid var(--ray-line);background:#fff;color:var(--ray-muted);
  padding:8px 14px;border-radius:22px;font-size:13px;font-weight:600;cursor:pointer;transition:.15s;}
.ray-pill:hover{border-color:var(--ray-blue);color:var(--ray-blue);}
.ray-pill.is-active{background:var(--ray-blue);border-color:var(--ray-blue);color:#fff;}
.ray-swatches{display:flex;flex-wrap:wrap;gap:14px;}
.ray-swatch{display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer;font-size:11px;color:var(--ray-muted);}
.ray-swatch .dot{width:26px;height:26px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--ray-line);transition:.15s;}
.ray-swatch.is-active .dot{box-shadow:0 0 0 2px var(--ray-blue);transform:scale(1.08);}
.ray-swatch.is-active{color:var(--ray-blue);font-weight:700;}

/* ---------- result panel (quote) ---------- */
.ray-result{position:sticky;top:16px;}
.ray-result .cap{font-size:11px;font-weight:700;letter-spacing:1px;color:var(--ray-muted);text-transform:uppercase;text-align:center;}
.ray-price{font-size:44px;font-weight:800;color:var(--ray-blue-d);text-align:center;line-height:1.1;margin:2px 0;}
.ray-range{font-size:12px;color:var(--ray-muted);text-align:center;}
.ray-unit{display:block;margin:12px auto 0;text-align:center;border:1px solid var(--ray-blue);color:var(--ray-blue-d);
  font-weight:700;border-radius:9px;padding:9px;background:var(--ray-blue-l2);}
.ray-break{margin:18px 0 0;border-top:1px dashed var(--ray-line);padding-top:12px;}
.ray-break .row{display:flex;justify-content:space-between;font-size:13px;padding:4px 0;color:var(--ray-ink);}
.ray-break .row .k{color:var(--ray-muted);}
.ray-break .row.total{border-top:1px solid var(--ray-line);margin-top:6px;padding-top:9px;font-weight:800;font-size:15px;}
.ray-break .row.total .v{color:var(--ray-blue-d);}
.ray-note{background:var(--ray-amber-bg);border:1px solid #f0e0b0;border-radius:9px;padding:10px 12px;
  font-size:11.5px;color:#8a6d1f;margin:14px 0;}
.ray-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;border:0;cursor:pointer;
  border-radius:9px;padding:12px;font-size:14px;font-weight:700;text-decoration:none;transition:.15s;}
.ray-btn.primary{background:var(--ray-blue);color:#fff;}
.ray-btn.primary:hover{background:var(--ray-blue-d);}
.ray-btn.ghost{background:#fff;color:var(--ray-blue-d);border:1px solid var(--ray-blue);margin-top:9px;}
.ray-btn.ghost:hover{background:var(--ray-blue-l);}
.ray-meta{margin-top:14px;font-size:11.5px;color:var(--ray-muted);}
.ray-meta .r{display:flex;gap:8px;align-items:flex-start;padding:5px 0;}
.ray-meta .r svg{flex:0 0 auto;width:15px;height:15px;color:var(--ray-blue);margin-top:1px;}
.ray-meta a{color:var(--ray-blue);text-decoration:none;}

/* ---------- generic result blocks ---------- */
.ray-out{background:var(--ray-blue-l2);border:1px solid var(--ray-line);border-radius:var(--ray-radius);padding:18px;}
.ray-out h4{margin:0 0 12px;font-size:13px;text-transform:uppercase;letter-spacing:.8px;color:var(--ray-blue-d);}
.ray-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;}
.ray-kpi{background:#fff;border:1px solid var(--ray-line);border-radius:10px;padding:12px 14px;text-align:center;}
.ray-kpi .v{font-size:24px;font-weight:800;color:var(--ray-blue-d);line-height:1.1;}
.ray-kpi .v small{font-size:13px;font-weight:600;color:var(--ray-muted);}
.ray-kpi .k{font-size:11.5px;color:var(--ray-muted);margin-top:4px;}
.ray-rows{margin-top:12px;}
.ray-rows .row{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px dashed var(--ray-line);font-size:13.5px;}
.ray-rows .row:last-child{border-bottom:0;}
.ray-rows .row .k{color:var(--ray-muted);}
.ray-rows .row .v{font-weight:700;}

.ray-flag{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;padding:3px 9px;border-radius:20px;}
.ray-flag.ok{background:#e6f6ee;color:var(--ray-ok);}
.ray-flag.warn{background:#fdf3e0;color:var(--ray-warn);}
.ray-flag.bad{background:#fbe7e7;color:var(--ray-bad);}

/* ---------- tables / matrices ---------- */
.ray-table-wrap{overflow-x:auto;border:1px solid var(--ray-line);border-radius:var(--ray-radius);}
table.ray-table{width:100%;border-collapse:collapse;font-size:13px;min-width:520px;}
table.ray-table th,table.ray-table td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--ray-line);}
table.ray-table thead th{background:var(--ray-blue-l);color:var(--ray-blue-d);font-weight:700;position:sticky;top:0;}
table.ray-table tbody tr:hover{background:var(--ray-blue-l2);}
table.ray-table td.num{text-align:right;font-variant-numeric:tabular-nums;}
.ray-rate{display:inline-block;width:auto;}
.ray-rate .d{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:2px;background:var(--ray-line);}
.ray-rate .d.on{background:var(--ray-blue);}

/* ---------- checklists (DFM) ---------- */
.ray-check{border:1px solid var(--ray-line);border-radius:10px;overflow:hidden;}
.ray-check .item{display:grid;grid-template-columns:1fr 130px 90px;gap:12px;align-items:center;
  padding:11px 14px;border-bottom:1px solid var(--ray-line);}
.ray-check .item:last-child{border-bottom:0;}
.ray-check .item .name{font-weight:600;font-size:13.5px;}
.ray-check .item .name small{display:block;color:var(--ray-muted);font-weight:400;font-size:11.5px;}
@media(max-width:560px){.ray-check .item{grid-template-columns:1fr;gap:6px;}}
.ray-score-ring{display:flex;align-items:center;gap:18px;margin-bottom:16px;}
.ray-score-ring svg{flex:0 0 auto;}
.ray-score-ring .lab .n{font-size:34px;font-weight:800;color:var(--ray-blue-d);}
.ray-score-ring .lab .t{color:var(--ray-muted);font-size:13px;}

/* ---------- wizard steps ---------- */
.ray-wiz-steps{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap;}
.ray-wiz-steps .s{flex:1;min-width:80px;text-align:center;padding:8px;border-radius:8px;background:var(--ray-blue-l2);
  border:1px solid var(--ray-line);font-size:12px;color:var(--ray-muted);font-weight:600;}
.ray-wiz-steps .s.is-active{background:var(--ray-blue);color:#fff;border-color:var(--ray-blue);}
.ray-wiz-steps .s.done{border-color:var(--ray-blue);color:var(--ray-blue-d);}

/* ---------- SVG visualizations ---------- */
.ray-viz{background:#fff;border:1px solid var(--ray-line);border-radius:var(--ray-radius);padding:12px;overflow:hidden;}
.ray-viz svg{display:block;width:100%;height:auto;}
.ray-figcap{font-size:12.5px;color:var(--ray-muted);margin-top:10px;padding:0 4px;}
.ray-flow-step{cursor:pointer;}
.ray-flow-info{margin-top:14px;background:var(--ray-blue-l2);border:1px solid var(--ray-line);border-radius:10px;padding:14px 16px;}
.ray-flow-info h5{margin:0 0 4px;color:var(--ray-blue-d);font-size:15px;}
.ray-flow-info p{margin:0;font-size:13.5px;color:var(--ray-ink);}
@keyframes ray-dash{to{stroke-dashoffset:-24;}}
.ray-conveyor{stroke-dasharray:8 6;animation:ray-dash 1.1s linear infinite;}
.ray-pulse{animation:ray-pulse 1.6s ease-in-out infinite;}
@keyframes ray-pulse{0%,100%{opacity:.35;}50%{opacity:1;}}

/* ---------- hub grid ---------- */
.ray-hub{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;}
.ray-hub .g{grid-column:1/-1;font-size:12.5px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--ray-blue-d);margin-top:8px;}
.ray-hub .g:first-child{margin-top:0;}
.ray-hub-card{border:1px solid var(--ray-line);border-radius:var(--ray-radius);padding:16px;background:#fff;box-shadow:var(--ray-shadow);}
.ray-hub-card .t{font-weight:700;font-size:14.5px;margin-bottom:6px;}
.ray-hub-card code{font-size:11.5px;background:var(--ray-blue-l);color:var(--ray-blue-d);padding:2px 6px;border-radius:5px;word-break:break-all;}

.ray-inline-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;}
.ray-inline-actions .ray-btn{width:auto;padding:10px 16px;}
.ray-foot{font-size:11.5px;color:var(--ray-muted);margin-top:12px;}
.ray-foot a{color:var(--ray-blue);text-decoration:none;}

/* ---- v1.1 additions: muted flag, checkbox rows, accordion, roadmap ---- */
.ray-flag.muted{background:#eef2f7;color:#7a8794;}
.ray-check .item.ray-cbrow{display:flex;gap:12px;align-items:flex-start;cursor:pointer;}
.ray-cb{width:18px;height:18px;margin-top:2px;flex:0 0 auto;accent-color:var(--ray-blue);}
.ray-accordion{border:1px solid var(--ray-line);border-radius:10px;overflow:hidden;}
.ray-acc-item{border-bottom:1px solid var(--ray-line);}
.ray-acc-item:last-child{border-bottom:0;}
.ray-acc-head{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;
  text-align:left;background:#fff;border:0;cursor:pointer;padding:14px 16px;font-size:14.5px;
  font-weight:700;color:var(--ray-ink);}
.ray-acc-head:hover{background:#f7fafd;}
.ray-acc-head.open{color:var(--ray-blue-d);background:#f4f9fe;}
.ray-acc-mark{flex:0 0 auto;width:22px;height:22px;border-radius:50%;display:inline-flex;
  align-items:center;justify-content:center;background:#eaf3fc;color:var(--ray-blue-d);font-weight:800;}
.ray-acc-body{padding:0 16px 16px;color:var(--ray-muted);font-size:13.5px;line-height:1.65;}
.ray-roadmap td code{font-size:11px;background:#f4f9fe;padding:2px 6px;border-radius:5px;color:var(--ray-blue-d);}
.ray-roadmap tr.is-planned td{color:#7a8794;}
.ray-roadmap tr.is-live td:first-child{font-weight:700;color:var(--ray-blue-d);}
.raypcb-planned{padding:16px 18px;border:1px dashed var(--ray-line);border-radius:10px;
  background:#f7fafd;color:var(--ray-muted);font-size:13.5px;line-height:1.6;}
.raypcb-planned code{background:#eef2f7;padding:2px 6px;border-radius:5px;color:var(--ray-blue-d);}

/* ---- v1.2 additions: step list, related tools, textarea ---- */
textarea.ray-input{min-height:96px;resize:vertical;font-family:inherit;line-height:1.5;}
.ray-steps{margin:2px 0 0;padding-left:20px;}
.ray-steps li{margin:6px 0;font-size:14px;color:var(--ray-ink);}
.ray-rellist{border:1px solid var(--ray-line);border-radius:10px;overflow:hidden;}
.ray-relrow{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:11px 14px;border-bottom:1px solid var(--ray-line);}
.ray-relrow:last-child{border-bottom:0;}
.ray-relrow .t{font-weight:600;font-size:13.5px;color:var(--ray-ink);}
.ray-relrow code{font-size:11.5px;background:#f4f9fe;padding:2px 6px;border-radius:5px;color:var(--ray-blue-d);white-space:nowrap;}