/* ==========================================================================
   Rojgarpath Tools — shared UI (matches rojgarpath.com theme)
   Navy #0a3477 · Orange #e65c00 · Tint #f2f6fc · site font inherited
   ========================================================================== */
.rjp-tool{
  --rjp-navy:#0a3477;
  --rjp-navy-2:#123f8c;
  --rjp-navy-3:#1b56b5;
  --rjp-orange:#e65c00;
  --rjp-orange-2:#f86a08;
  --rjp-tint:#f2f6fc;
  --rjp-tint-2:#e8eff9;
  --rjp-border:#d6e0ef;
  --rjp-text:#1f2733;
  --rjp-muted:#5b6678;
  --rjp-green:#14804a;
  --rjp-green-bg:#e8f6ee;
  --rjp-red:#c0392b;
  --rjp-red-bg:#fdecea;
  --rjp-radius:12px;
  --rjp-radius-sm:8px;
  --rjp-shadow:0 2px 10px rgba(10,52,119,.07);

  font-family:inherit;
  color:var(--rjp-text);
  font-size:16px;
  line-height:1.55;
  max-width:100%;
  margin:28px 0;
  background:#fff;
  border:1px solid var(--rjp-border);
  border-radius:var(--rjp-radius);
  box-shadow:var(--rjp-shadow);
  overflow:hidden;
  box-sizing:border-box;
}
.rjp-tool *,.rjp-tool *::before,.rjp-tool *::after{box-sizing:border-box;}

/* ---------- Header (same gradient as site page header) ---------- */
.rjp-tool .rjp-header{
  background:linear-gradient(135deg,var(--rjp-navy) 0%,var(--rjp-navy-2) 60%,var(--rjp-navy-3) 100%);
  color:#fff;
  padding:22px 24px 20px;
  border-bottom:4px solid var(--rjp-orange);
  text-align:left;
}
.rjp-tool .rjp-eyebrow{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--rjp-orange); color:#fff;
  font-size:12px; font-weight:600; letter-spacing:.02em;
  padding:3px 10px; border-radius:999px; margin:0 0 10px;
}
.rjp-tool .rjp-header .rjp-title{
  font-family:inherit; font-size:clamp(21px,3.4vw,26px); font-weight:700; line-height:1.3;
  color:#fff; margin:0 0 6px; padding:0; background:none; border:0; border-radius:0; box-shadow:none;
}
.rjp-tool .rjp-header .rjp-title::before,.rjp-tool .rjp-header .rjp-title::after{display:none;}
.rjp-tool .rjp-sub{color:rgba(255,255,255,.88); font-size:14.5px; margin:0; max-width:640px;}
.rjp-tool .rjp-chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; padding:0; list-style:none;}
.rjp-tool .rjp-chips li{
  margin:0; font-size:12.5px; color:#fff; background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22); padding:3px 10px; border-radius:999px;
}

/* ---------- Body: form + result ---------- */
.rjp-tool .rjp-body{padding:20px;}
.rjp-tool .rjp-board{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:18px; align-items:start;}
.rjp-tool .rjp-form-side,.rjp-tool .rjp-result-side{
  background:#fff; border:1px solid var(--rjp-border); border-radius:var(--rjp-radius); padding:20px;
}
.rjp-tool .rjp-result-side{
  background:var(--rjp-tint); min-height:260px;
  display:flex; flex-direction:column; justify-content:center;
  position:sticky; top:90px;
}
.rjp-tool .rjp-panel-title{
  display:flex; align-items:center; gap:8px;
  font-size:15px; font-weight:700; color:var(--rjp-navy); margin:0 0 14px;
}
.rjp-tool .rjp-step{
  display:inline-grid; place-items:center; width:22px; height:22px; border-radius:50%;
  background:var(--rjp-orange); color:#fff; font-size:12px; font-weight:700; flex:none;
}

/* ---------- Fields ---------- */
.rjp-tool .rjp-field{margin:0 0 16px;}
.rjp-tool .rjp-field > label,.rjp-tool .rjp-label{
  display:block; font-size:14px; font-weight:600; color:var(--rjp-navy); margin:0 0 6px;
  text-transform:none; letter-spacing:0;
}
.rjp-tool .rjp-hint{font-size:12.5px; color:var(--rjp-muted); margin-top:6px; line-height:1.5;}
.rjp-tool .rjp-grid-2{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.rjp-tool .rjp-grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:10px;}
.rjp-tool .rjp-grid-2 .rjp-field,.rjp-tool .rjp-grid-3 .rjp-field{margin-bottom:0;}
.rjp-tool .rjp-grid-2 + .rjp-hint,.rjp-tool .rjp-grid-2 + .rjp-field,.rjp-tool .rjp-grid-2 + .rjp-check-row{margin-top:14px;}
.rjp-tool .rjp-grid-2:not(:last-child),.rjp-tool .rjp-grid-3:not(:last-child){margin-bottom:16px;}

.rjp-tool input[type="number"],.rjp-tool input[type="date"],.rjp-tool input[type="text"],.rjp-tool select{
  display:block; width:100%; min-height:46px; margin:0;
  font-family:inherit; font-size:16px; /* 16px stops iOS zoom-on-focus */
  color:var(--rjp-text); background:#fff;
  padding:10px 12px; border:1.5px solid var(--rjp-border); border-radius:var(--rjp-radius-sm);
  box-shadow:none; transition:border-color .15s, box-shadow .15s;
  -webkit-appearance:none; appearance:none;
}
.rjp-tool select{
  padding-right:36px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230a3477' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:12px 8px;
}
.rjp-tool input:focus,.rjp-tool select:focus{
  outline:none; border-color:var(--rjp-navy-3); box-shadow:0 0 0 3px rgba(27,86,181,.15);
}
.rjp-tool input.rjp-invalid{border-color:var(--rjp-red); box-shadow:0 0 0 3px rgba(192,57,43,.12);}

/* checkbox row */
.rjp-tool .rjp-check-row{
  display:flex; align-items:center; gap:10px; margin:0 0 16px;
  padding:10px 12px; background:var(--rjp-tint); border:1px solid var(--rjp-border); border-radius:var(--rjp-radius-sm);
  cursor:pointer;
}
.rjp-tool .rjp-check-row input{width:20px; height:20px; margin:0; accent-color:var(--rjp-orange); flex:none;}
.rjp-tool .rjp-check-row label{font-size:14px; font-weight:600; color:var(--rjp-navy); margin:0; cursor:pointer;}

/* ---------- Segmented toggle ---------- */
.rjp-tool .rjp-toggle{
  display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:4px;
  padding:4px; margin:0 0 16px; background:var(--rjp-tint); border:1px solid var(--rjp-border); border-radius:10px;
}
.rjp-tool .rjp-toggle button{
  min-height:42px; margin:0; padding:8px 12px; border:0; border-radius:7px;
  background:transparent; color:var(--rjp-navy); box-shadow:none;
  font-family:inherit; font-size:15px; font-weight:600; line-height:1.2; cursor:pointer; text-transform:none;
  transition:background .15s,color .15s;
}
.rjp-tool .rjp-toggle button:hover{background:#fff; color:var(--rjp-navy);}
.rjp-tool .rjp-toggle button.rjp-active{background:var(--rjp-navy); color:#fff;}

/* ---------- Buttons ---------- */
.rjp-tool .rjp-btn{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; min-height:50px; margin:4px 0 0; padding:12px 18px;
  font-family:inherit; font-size:16px; font-weight:700; line-height:1.2; letter-spacing:0; text-transform:none;
  color:#fff; background:var(--rjp-orange); border:0; border-radius:var(--rjp-radius-sm);
  box-shadow:0 3px 0 #b84a00; cursor:pointer; text-decoration:none;
  transition:background .15s, transform .05s, box-shadow .05s;
}
.rjp-tool .rjp-btn:hover,.rjp-tool .rjp-btn:focus-visible{background:var(--rjp-orange-2); color:#fff;}
.rjp-tool .rjp-btn:active{transform:translateY(2px); box-shadow:0 1px 0 #b84a00;}
.rjp-tool .rjp-btn:focus-visible{outline:3px solid rgba(230,92,0,.35); outline-offset:2px;}
.rjp-tool .rjp-btn[disabled]{background:#c9d2e0; box-shadow:none; cursor:not-allowed; color:#fff;}
.rjp-tool .rjp-btn svg{width:18px; height:18px; flex:none;}
.rjp-tool .rjp-btn-ghost{
  background:#fff; color:var(--rjp-navy); border:1.5px solid var(--rjp-border); box-shadow:none; min-height:44px; font-size:15px;
}
.rjp-tool .rjp-btn-ghost:hover{background:var(--rjp-tint); color:var(--rjp-navy);}

/* inline error */
.rjp-tool .rjp-error{
  display:none; margin:10px 0 0; padding:10px 12px; font-size:14px;
  color:var(--rjp-red); background:var(--rjp-red-bg); border-radius:var(--rjp-radius-sm); border-left:4px solid var(--rjp-red);
}
.rjp-tool .rjp-error.rjp-show{display:block;}

/* ---------- Placeholder state ---------- */
.rjp-tool .rjp-placeholder{text-align:center; color:var(--rjp-muted); font-size:14.5px; line-height:1.6; padding:10px; max-width:280px; margin:0 auto;}
.rjp-tool .rjp-placeholder-icon{
  display:grid; place-items:center; width:64px; height:64px; margin:0 auto 12px;
  border-radius:50%; background:#fff; border:2px dashed var(--rjp-border); color:var(--rjp-navy-3);
}
.rjp-tool .rjp-placeholder-icon svg{width:28px; height:28px;}

/* ---------- Status badges ---------- */
.rjp-tool .rjp-badge{
  display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:700;
  padding:6px 12px; border-radius:999px;
}
.rjp-tool .rjp-badge.rjp-pass{color:var(--rjp-green); background:var(--rjp-green-bg);}
.rjp-tool .rjp-badge.rjp-fail{color:var(--rjp-red); background:var(--rjp-red-bg);}
.rjp-tool .rjp-badge.rjp-warn{color:#9a5b00; background:#fff4e0;}

.rjp-tool .rjp-fade-in{animation:rjp-fade .3s ease both;}
@keyframes rjp-fade{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;}}

/* ---------- Reference table ---------- */
.rjp-tool .rjp-table-section{margin-top:22px;}
.rjp-tool .rjp-table-section .rjp-section-title{
  font-family:inherit; font-size:18px; font-weight:700; line-height:1.35; color:var(--rjp-navy);
  margin:0 0 4px; padding:8px 12px; background:var(--rjp-tint); border:0; border-left:5px solid var(--rjp-orange);
  border-radius:0 8px 8px 0;
}
.rjp-tool .rjp-sub2{font-size:13.5px; color:var(--rjp-muted); margin:8px 0 12px;}
.rjp-tool .rjp-table-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--rjp-border); border-radius:var(--rjp-radius-sm);}
.rjp-tool table{width:100%; margin:0; border-collapse:collapse; border:0; font-size:14.5px; background:#fff;}
.rjp-tool table th,.rjp-tool table td{border:0; border-bottom:1px solid var(--rjp-border); padding:11px 14px; text-align:left; vertical-align:top;}
.rjp-tool thead th{
  background:var(--rjp-navy); color:#fff; font-size:13.5px; font-weight:600; text-transform:none; letter-spacing:0; white-space:nowrap;
}
.rjp-tool tbody td:first-child{font-weight:600; color:var(--rjp-navy);}
.rjp-tool tbody tr:nth-child(even) td{background:#f8fafd;}
.rjp-tool tbody tr:last-child td{border-bottom:0;}

/* ---------- Footer note ---------- */
.rjp-tool .rjp-footer{
  margin:18px 0 0; padding:12px 14px; font-size:13px; line-height:1.6; color:#6b5200;
  background:#fff8e6; border:1px solid #f3e1b0; border-radius:var(--rjp-radius-sm);
  display:flex; gap:10px; align-items:flex-start;
}
.rjp-tool .rjp-footer svg{width:18px; height:18px; flex:none; margin-top:2px; color:#c98a00;}

/* ---------- Responsive ---------- */
@media (max-width:768px){
  .rjp-tool .rjp-board{grid-template-columns:1fr;}
  .rjp-tool .rjp-result-side{position:static; min-height:0;}
}
@media (max-width:540px){
  .rjp-tool{margin:20px 0; border-radius:10px;}
  .rjp-tool .rjp-header{padding:18px 16px 16px;}
  .rjp-tool .rjp-sub{font-size:14px;}
  .rjp-tool .rjp-body{padding:12px;}
  .rjp-tool .rjp-form-side,.rjp-tool .rjp-result-side{padding:16px;}
  .rjp-tool .rjp-toggle button{font-size:14px; padding:8px 6px;}
  .rjp-tool .rjp-grid-3{grid-template-columns:1fr 1fr;}
  .rjp-tool .rjp-grid-2.rjp-grid-stack{grid-template-columns:1fr;}
  .rjp-tool .rjp-table-wrap:not(.rjp-stack) td{white-space:nowrap;}
  .rjp-tool .rjp-grid-3 > :last-child{grid-column:1 / -1;}
  .rjp-tool table{font-size:13.5px;}
  .rjp-tool table th,.rjp-tool table td{padding:9px 10px;}
  /* Stack reference tables as cards on phones */
  .rjp-tool .rjp-table-wrap.rjp-stack{border:0; overflow:visible;}
  .rjp-tool .rjp-stack table,.rjp-tool .rjp-stack tbody,.rjp-tool .rjp-stack tr,.rjp-tool .rjp-stack td{display:block; width:100%;}
  .rjp-tool .rjp-stack thead{display:none;}
  .rjp-tool .rjp-stack tr{border:1px solid var(--rjp-border); border-radius:var(--rjp-radius-sm); margin:0 0 10px; overflow:hidden;}
  .rjp-tool .rjp-stack tbody tr:nth-child(even) td{background:#fff;}
  .rjp-tool .rjp-stack td{display:flex; justify-content:space-between; gap:12px; border-bottom:1px solid var(--rjp-border); text-align:right;}
  .rjp-tool .rjp-stack td:last-child{border-bottom:0;}
  .rjp-tool .rjp-stack td::before{content:attr(data-label); font-weight:600; color:var(--rjp-muted); text-align:left; flex:none; max-width:45%;}
  .rjp-tool .rjp-stack td:first-child{background:var(--rjp-tint) !important; color:var(--rjp-navy); justify-content:flex-start; text-align:left;}
  .rjp-tool .rjp-stack td:first-child::before{display:none;}
}
@media (prefers-reduced-motion:reduce){
  .rjp-tool *{animation:none !important; transition:none !important;}
}