/* beindie tool — regional pricing & net calculator */

.rp-head{display:flex;align-items:baseline;justify-content:space-between;gap:18px;flex-wrap:wrap}

#rpRoot .split > .stack{min-width:0;grid-template-columns:minmax(0,1fr)}
#rpRoot .panel{min-width:0}

table.rp-table{min-width:600px;font-size:14px}
.rp-table th,.rp-table td{padding:8px 10px}
.rp-table th:first-child,.rp-table td:first-child{min-width:104px}
.rp-table td{vertical-align:middle}
.rp-table b{font-weight:600;font-variant-numeric:tabular-nums}

.rp-note{
  display:block;font-size:11.5px;color:var(--muted);margin-top:4px;line-height:1.35;font-weight:400;
}

.rp-table input.rp-in{
  width:76px;padding:6px 7px;font-size:13.5px;text-align:right;
  font-variant-numeric:tabular-nums;background:var(--paper-3);
  border:1px solid var(--line);
}
.rp-table input.rp-in--sm{width:58px}
.rp-table input.rp-in:focus{outline-width:2px;outline-offset:0}

.rp-steps{padding-left:20px;display:grid;gap:8px;font-size:15px;color:var(--muted)}
.rp-steps b{color:var(--ink)}

.rp-scale{display:grid;gap:6px;font-size:14px;color:var(--muted)}
.rp-scale b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}

@media (max-width:620px){
  .rp-table input.rp-in{width:74px}
  .rp-table input.rp-in--sm{width:56px}
}

/* tone colours must win over .rp-note's muted default */
.rp-table .rp-note.c-red{color:#c81f1f}
.rp-table .rp-note.c-orange{color:#a85d00}
:root[data-theme="dark"] .rp-table .rp-note.c-red{color:#ff6a6a}
:root[data-theme="dark"] .rp-table .rp-note.c-orange{color:var(--orange)}

/* Shareable-state bar under the tool head (CONTRACT-v4 §4.F.3).
   The button is a plain .copy from site.css; the JS keeps its data-copy
   attribute pointed at the current URL, hash and all. */
.tool-share{border-bottom:1px solid var(--line);background:var(--paper-2)}
.tool-share .wrap{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding-block:14px}
.tool-share .hint{margin:0;max-width:74ch}
/* The hint is the only place that says what a shared link carries. It used
   to be hidden below 560px, which is where most people read it. */
@media (max-width:560px){.tool-share .hint{flex:1 1 100%}}

/* ---------- copy buttons: the failure has to be as loud as the success ----------
   site.css styles .is-copied, and site.js only ever reaches that branch. A
   clipboard that is unavailable (a non-secure origin) or refused (a denied
   permission) left the button sitting still, which reads exactly like a
   silent success. The tool scripts handle their own copy buttons and set one
   of these two states every time. */
.is-copyfail{background:var(--red);color:#141414;border-color:var(--ink)}
.copy-note{
  flex:1 1 100%;margin:0;font-size:12.5px;line-height:1.45;
  color:var(--red);font-weight:600;
}
.copy-note:empty{display:none}

/* Anything driven by a thumb: the shared chrome is sized for a mouse, and
   30px of button is not a tap target. */
@media (pointer:coarse){
  .copy,.chip,.seg button,.btn-sm{min-height:40px}
  .copy,.seg button{display:inline-flex;align-items:center;justify-content:center}
}

/* Six columns at 600px minimum: on a phone the region name has to stay put or
   the price, the VAT and the net belong to nobody. */
@media (max-width:620px){
  .rp-table thead th:first-child,
  .rp-table tbody td:first-child{position:sticky;left:0;z-index:1;background:var(--paper-2)}
}