/* GameJobsRemote — calculator UI. Matches the board's dark design tokens. */

.gjrc{
  --bg:#0D0D0D; --card:#161618; --card2:#1C1C1F; --line:#26262A;
  --text:#EDEDEF; --muted:#9B9BA3; --dim:#6E6E76;
  --cyan:#22D3EE; --purple:#A78BFA; --orange:#F97316; --green:#34D399; --red:#F87171;
  background:var(--card); border:1px solid var(--line); border-radius:10px;
  padding:26px; margin:30px 0; color:var(--text);
  font-family:inherit; line-height:1.55;
}
.gjrc *{box-sizing:border-box}

.gjrc-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:4px}
.gjrc-head h3{margin:0;font-size:19px;font-weight:700;color:var(--text);letter-spacing:-.01em}
.gjrc-tag{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--cyan);
  background:rgba(34,211,238,.10);border:1px solid rgba(34,211,238,.28);padding:3px 9px;border-radius:3px;white-space:nowrap}
.gjrc-sub{color:var(--muted);font-size:14.5px;margin:6px 0 20px}

.gjrc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:20px}
.gjrc-f{display:flex;flex-direction:column;gap:6px;min-width:0}
.gjrc-f label{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--dim);font-weight:600}
.gjrc-f select,.gjrc-f input[type=number],.gjrc-f input[type=text]{
  width:100%;background:var(--bg);border:1px solid var(--line);color:var(--text);
  padding:10px 12px;border-radius:6px;font-size:15px;font-family:inherit;
  appearance:none;-webkit-appearance:none;
}
.gjrc-f select{
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%239B9BA3' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:34px;
}
.gjrc-f select:focus,.gjrc-f input:focus{outline:2px solid var(--cyan);outline-offset:1px;border-color:transparent}
.gjrc-f .hint{font-size:12px;color:var(--dim)}

.gjrc-range{display:flex;align-items:center;gap:10px}
.gjrc-range input[type=range]{flex:1;accent-color:var(--cyan);background:transparent}
.gjrc-range output{font-variant-numeric:tabular-nums;font-size:14px;color:var(--cyan);min-width:48px;text-align:right;font-weight:600}

.gjrc-out{border-top:1px solid var(--line);padding-top:20px;margin-top:4px}
.gjrc-headline{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.gjrc-big{font-size:34px;font-weight:800;letter-spacing:-.025em;color:var(--cyan);font-variant-numeric:tabular-nums;line-height:1.05}
.gjrc-big.warn{color:var(--orange)}
.gjrc-big.good{color:var(--green)}
.gjrc-big.bad{color:var(--red)}
.gjrc-unit{font-size:14px;color:var(--muted)}
.gjrc-expl{color:var(--muted);font-size:14.5px;margin:10px 0 0}
.gjrc-expl strong{color:var(--text)}

.gjrc-bars{display:flex;flex-direction:column;gap:9px;margin:18px 0 0}
.gjrc-bar{display:grid;grid-template-columns:118px 1fr 92px;align-items:center;gap:12px;font-size:13.5px}
.gjrc-bar .bl{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gjrc-bar .bt{height:9px;background:var(--bg);border-radius:5px;overflow:hidden;border:1px solid var(--line)}
.gjrc-bar .bf{height:100%;background:linear-gradient(90deg,var(--purple),var(--cyan));border-radius:5px;transition:width .35s ease}
.gjrc-bar.me .bf{background:linear-gradient(90deg,var(--orange),#FBBF24)}
.gjrc-bar .bv{text-align:right;font-variant-numeric:tabular-nums;color:var(--text);font-weight:600}

.gjrc-split{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-top:18px}
.gjrc-stat{background:var(--card2);border:1px solid var(--line);border-radius:7px;padding:13px 14px}
.gjrc-stat .k{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--dim);display:block;margin-bottom:5px}
.gjrc-stat .v{font-size:21px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.015em}
.gjrc-stat .s{font-size:12px;color:var(--muted);display:block;margin-top:3px}

.gjrc-note{background:var(--card2);border-left:3px solid var(--orange);padding:12px 15px;margin-top:18px;
  font-size:13.5px;color:var(--muted);border-radius:0 5px 5px 0}
.gjrc-note strong{color:var(--text)}
.gjrc-note.info{border-left-color:var(--cyan)}

.gjrc-src{font-size:12.5px;color:var(--dim);margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.gjrc-src a{color:var(--muted);text-decoration:underline}
.gjrc-src a:hover{color:var(--cyan)}

.gjrc-cta{display:inline-block;margin-top:16px;background:var(--cyan);color:#06222A;font-weight:700;
  padding:11px 20px;border-radius:6px;text-decoration:none;font-size:14.5px}
.gjrc-cta:hover{background:#67E8F9;color:#06222A}

/* server-rendered reference tables — these are what actually rank */
.gjr-datatable{overflow-x:auto;margin:28px 0;border:1px solid #26262A;border-radius:9px;background:#161618}
.gjr-datatable table{border-collapse:collapse;width:100%;min-width:560px;font-size:14.5px;color:#EDEDEF}
.gjr-datatable th,.gjr-datatable td{padding:11px 15px;text-align:right;border-bottom:1px solid #1F1F23;white-space:nowrap}
.gjr-datatable th:first-child,.gjr-datatable td:first-child{text-align:left}
.gjr-datatable thead th{background:#1C1C1F;color:#9B9BA3;font-size:11px;letter-spacing:.07em;
  text-transform:uppercase;font-weight:600;border-bottom:1px solid #26262A}
.gjr-datatable tbody tr:last-child td{border-bottom:none}
.gjr-datatable td{font-variant-numeric:tabular-nums}
.gjr-datatable caption{caption-side:bottom;text-align:left;padding:11px 15px;font-size:12.5px;color:#6E6E76}

@media (max-width:640px){
  .gjrc{padding:20px 17px}
  .gjrc-big{font-size:28px}
  .gjrc-bar{grid-template-columns:94px 1fr 78px;gap:9px;font-size:12.5px}
}