/* Tools embedded in the portal.
   The tool markup arrives from the public pages with its own qa-/sc- styles;
   this only reconciles it with the portal's surface and adds the save bar. */

.ptool {
   background: var(--bg-card, #1F1F2A);
   border: 1px solid var(--border, rgba(255, 255, 255, .07));
   border-radius: var(--radius-lg, 16px);
   padding: 4px 20px 20px;
}

/* The public pages give each block its own card; inside a portal panel that
   is a card inside a card, so the inner chrome is flattened. */
.ptool .qa-shared,
.ptool .qa-quote,
.ptool .qa-out,
.ptool .sc-card,
.ptool .sc-out,
.ptool .sc-neg {
   background: transparent;
   border: 0;
   border-bottom: 1px solid var(--border, rgba(255, 255, 255, .07));
   border-radius: 0;
   padding: 20px 0;
   margin-bottom: 0;
   max-width: none;
}
.ptool .sc-comp {
   background: rgba(255, 255, 255, .02);
   border-color: var(--border, rgba(255, 255, 255, .08));
}
.ptool .qa-quote { border-bottom-style: dashed; }
.ptool .sc-scope { max-width: none; margin-top: 18px; }

/* ── Save to supplier ───────────────────────────────────────────────────── */
.ptool-save {
   margin-top: 18px;
   background: linear-gradient(135deg, rgba(240, 165, 30, .09), rgba(240, 165, 30, .03));
   border: 1px solid rgba(240, 165, 30, .24);
   border-radius: var(--radius-lg, 16px);
   padding: 18px 20px;
}
.ptool-save__text { margin-bottom: 14px; }
.ptool-save__text strong {
   display: block;
   font-size: 14.5px;
   color: var(--bright, #F0F0F5);
   margin-bottom: 4px;
}
.ptool-save__text span {
   font-size: 13px;
   line-height: 1.6;
   color: var(--mid, #9A9AAE);
   max-width: 66ch;
   display: block;
}
.ptool-save__row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.ptool-save__pick,
.ptool-save__note {
   background: var(--bg, #09090C);
   border: 1px solid var(--border, rgba(255, 255, 255, .13));
   border-radius: 9px;
   padding: 10px 12px;
   color: var(--bright, #F0F0F5);
   font: inherit;
   font-size: 13.5px;
   min-width: 0;
}
.ptool-save__pick { flex: 0 1 260px; }
.ptool-save__note { flex: 1 1 240px; }
.ptool-save__pick:focus,
.ptool-save__note:focus { outline: none; border-color: rgba(240, 165, 30, .55); }
.ptool-save__msg {
   margin: 12px 0 0;
   font-size: 12.5px;
   line-height: 1.5;
   color: #4ADE80;
   min-height: 1em;
}
.ptool-save__msg.is-bad { color: #FF8A7A; }

@media (max-width: 640px) {
   .ptool { padding: 4px 14px 16px; }
   .ptool-save { padding: 14px 16px; }
   .ptool-save__pick,
   .ptool-save__note { flex-basis: 100%; }
}

/* ── Regulation exposure (gated) ───────────────────────────────────────────
   The client-specific half of the regulations panel. Visually separated from
   the public catalogue below it so it is obvious which part needed the login. */
.rex { display: grid; gap: 16px; margin-bottom: 26px; }
.rex-loading { color: var(--mid); font-size: 13px; }
.rex-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.rex-summary > div {
   padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--r-md, 16px);
   background: var(--bg-card);
}
.rex-summary strong { display: block; font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--gold-t); }
.rex-summary span { display: block; margin-top: 4px; color: var(--mid); font-size: 12px; line-height: 1.45; }
.rex-summary .is-gap strong { color: var(--amber); }
.rex-rows { display: grid; gap: 10px; }
.rex-row {
   padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--r-md, 16px);
   background: var(--bg-card);
}
.rex-row.has-gap { border-color: rgba(245, 158, 11, .34); }
.rex-row header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rex-row h4 { margin: 0; font-size: 14px; color: var(--bright); }
.rex-badge { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--mid); }
.rex-applies { margin: 6px 0 10px; color: var(--mid); font-size: 12px; }
.rex-products { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.rex-products li {
   display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
   padding: 7px 10px; border-radius: 10px; background: rgba(255, 255, 255, .03);
   font-size: 12.5px;
}
.rex-products li span { color: var(--bright); }
.rex-products li em { font-style: normal; font-size: 11.5px; color: var(--mid); }
.rex-products li.is-thin em { color: var(--amber); font-weight: 700; }
.rex-products li.is-ok em { color: var(--green); }
.rex-note { margin: 0; color: var(--dim); font-size: 11.5px; line-height: 1.55; }
.rex-empty {
   padding: 26px; border: 1px dashed var(--border-m); border-radius: var(--r-md, 16px);
   background: var(--bg-card); text-align: center;
}
.rex-empty strong { display: block; color: var(--bright); font-size: 15px; }
.rex-empty p { margin: 8px auto 14px; max-width: 460px; color: var(--mid); font-size: 13px; line-height: 1.6; }
.rex-divider {
   margin: 28px 0 14px; padding-top: 20px; border-top: 1px solid var(--border);
   color: var(--mid); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}

/* ── Exposure: radar, drill-down, request modal ──────────────────────────── */
.rex-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rex-toggle {
   min-height: 34px; padding: 0 14px; border-radius: var(--r-pill, 999px);
   border: 1px solid var(--border-m); background: transparent; color: var(--mid);
   font-family: var(--font); font-size: 12px; font-weight: 700; cursor: pointer;
}
.rex-toggle:hover { color: var(--bright); border-color: rgba(240,165,30,.44); }
.rex-toggle.active { border-color: rgba(240,165,30,.5); background: var(--gold-pale); color: var(--gold-t); }
.rex-count { margin-left: auto; color: var(--dim); font-size: 11.5px; }

.rex-radar { padding: 14px 16px; border: 1px solid rgba(245,158,11,.3); border-radius: var(--r-md, 16px); background: rgba(245,158,11,.06); }
.rex-radar h4 { margin: 0 0 10px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--amber); }
.rex-radar h4 small { display: block; margin-top: 4px; letter-spacing: 0; text-transform: none; font-size: 11.5px; font-weight: 500; color: var(--mid); }
.rex-radar ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.rex-radar li { display: grid; grid-template-columns: minmax(0,auto) minmax(0,1fr) minmax(0,auto); gap: 10px; align-items: baseline; font-size: 12.5px; }
.rex-radar li span { color: var(--bright); font-weight: 700; }
.rex-radar li b { color: var(--mid); font-weight: 500; }
.rex-radar li em { font-style: normal; font-weight: 700; text-align: right; }
.rex-radar li.is-expired em { color: var(--red, #D42B1E); }
.rex-radar li.is-expiring em { color: var(--amber); }

.rex-expand { display: flex; align-items: center; gap: 8px; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; font: inherit; }
.rex-expand::before { content: "▸"; color: var(--mid); font-size: 11px; transition: transform var(--motion, 160ms) var(--ease, ease); }
.rex-expand[aria-expanded="true"]::before { transform: rotate(90deg); }
.rex-certs { display: grid; gap: 5px; margin: 6px 0 10px 14px; padding: 0 0 0 12px; border-left: 1px solid var(--border); list-style: none; }
.rex-cert { display: flex; align-items: center; gap: 10px; font-size: 12px; }
.rex-cert span { color: var(--bright); }
.rex-cert em { font-style: normal; color: var(--mid); }
.rex-cert.is-missing em, .rex-cert.is-expired em { color: var(--amber); font-weight: 700; }
.rex-cert.is-expiring em { color: var(--gold-t); font-weight: 700; }
.rex-cert.is-ok em { color: var(--green); }
.rex-act {
   margin-left: auto; min-height: 30px; padding: 0 11px; border-radius: var(--r-pill, 999px);
   border: 1px solid var(--border-m); background: transparent; color: var(--mid);
   font-family: var(--font); font-size: 11px; font-weight: 700; cursor: pointer;
}
.rex-act:hover { border-color: rgba(240,165,30,.5); color: var(--gold-t); }

.rex-modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: rgba(6,6,10,.68); padding: 20px; }
.rex-modal__panel { width: min(460px, 100%); display: grid; gap: 12px; padding: 22px; border: 1px solid var(--border-m); border-radius: var(--r-md, 16px); background: var(--bg-card); }
.rex-modal__panel h4 { margin: 0; font-size: 15px; color: var(--bright); }
.rex-modal__what { margin: 0; color: var(--mid); font-size: 12.5px; }
.rex-modal__panel label { display: grid; gap: 5px; color: var(--mid); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.rex-modal__panel select, .rex-modal__panel textarea {
   padding: 9px 11px; border-radius: 10px; border: 1px solid var(--border-m);
   background: var(--bg-mid); color: var(--bright); font-family: var(--font); font-size: 13px;
   font-weight: 400; letter-spacing: 0; text-transform: none;
}
.rex-modal__acts { display: flex; gap: 8px; justify-content: flex-end; }
@media (max-width: 640px) {
   .rex-toggle, .rex-act { min-height: 44px; }
   .rex-cert { flex-wrap: wrap; }
   .rex-radar li { grid-template-columns: 1fr; gap: 2px; }
   .rex-radar li em { text-align: left; }
}