/* calc.css — shared primitives for the three partner-assessment design options.
   Loaded AFTER site.css, which supplies every brand token. Namespaced .pc- so it can
   never touch the nine public pages.

   Two disciplines carried over from the platform round, binding here too:
   1. The accent (#2563EB) is interaction chrome and NEVER carries data — it and
      Blue/Neutral are cousins, and glyph + word + chip is what keeps them apart.
   2. Signal colours appear only on signal surfaces and always with their glyph.
      A workspace state (In The Register / Named / Not Yet Assessed) is not a verdict
      and wears a neutral chip, never Green/Amber/Red. */

/* ------------------------------------------------------- hidden-page shell */

.pc-body { background: var(--bg0); }

.pc-top {
  position: sticky; top: 0; z-index: 60;
  background: #000; border-bottom: 1px solid var(--line);
}
.pc-top-in {
  max-width: 1320px; margin-inline: auto; padding: 0 28px;
  height: 64px; display: flex; align-items: center; gap: 16px;
}
.pc-lock { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.pc-lock img { height: 30px; width: auto; }
.pc-lock-tx { display: flex; flex-direction: column; line-height: 1.05; }
.pc-lock-tx b { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.pc-lock-tx span { font-size: 8.5px; letter-spacing: 0.30em; color: var(--acc); font-weight: 600; }
.pc-top-tag {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--tx3); border-left: 1px solid var(--line2); padding-left: 16px;
}
.pc-top-r { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.pc-main { max-width: 1320px; margin-inline: auto; padding: 0 28px 96px; }
.pc-narrow { max-width: 980px; }

.pc-foot {
  border-top: 1px solid var(--line); margin-top: 64px;
  padding: 26px 28px 40px; color: var(--tx3); font-size: 12.5px;
}
.pc-foot-in { max-width: 1320px; margin-inline: auto; display: flex; flex-wrap: wrap; gap: 8px 22px; }

/* ------------------------------------------------------------- primitives */

.pc-card {
  background: var(--bg1); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 22px 24px;
}
.pc-card.pc-well { background: var(--well); }
.pc-hd { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.pc-hd h2, .pc-hd h3 { font-size: 14px; font-weight: 700; letter-spacing: 0.01em; }
.pc-hd .pc-hd-r { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.pc-eyebrow {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--tx3);
}

.pc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--acc); color: #fff; border-radius: var(--r-sm);
  padding: 11px 18px; font-size: 14px; font-weight: 600; text-decoration: none;
  border: 1px solid var(--acc); transition: background .14s ease, border-color .14s ease;
  white-space: nowrap;
}
.pc-btn:hover { background: var(--acc2); border-color: var(--acc2); }
.pc-btn.alt { background: transparent; color: var(--tx); border-color: var(--line2); }
.pc-btn.alt:hover { background: rgba(245, 247, 250, 0.05); border-color: var(--tx3); }
.pc-btn.sm { padding: 7px 13px; font-size: 12.5px; border-radius: 8px; }
.pc-btn[disabled] { opacity: .45; pointer-events: none; }

.pc-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
  border: 1px solid var(--line2); color: var(--tx2); white-space: nowrap;
}
.pc-chip.solid { background: var(--acc-wash); border-color: rgba(37, 99, 235, .4); color: #BBD0FF; }
.pc-chip.outline { background: transparent; border-style: dashed; color: var(--tx2); }
.pc-chip.quiet { background: rgba(245, 247, 250, .05); color: var(--tx3); }

/* signal glyph + colour, never one without the other */
.pc-g { font-size: 11px; line-height: 1; }
.pc-g.red { color: var(--sr); } .pc-g.amber { color: var(--sa); }
.pc-g.green { color: var(--sg); } .pc-g.blue { color: var(--sb); }
.pc-g.grey { color: var(--sy); }

/* five-band strip. 2px surface gaps between fills, per the dataviz mark spec. */
.pc-band { display: flex; gap: 2px; height: 10px; border-radius: 999px; overflow: hidden; }
.pc-band i { display: block; height: 100%; }
.pc-band i.red { background: var(--sr); } .pc-band i.amber { background: var(--sa); }
.pc-band i.green { background: var(--sg); } .pc-band i.blue { background: var(--sb); }
.pc-band i.grey { background: var(--sy); }
.pc-band.tall { height: 16px; border-radius: 6px; }

.pc-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--tx2); }
.pc-legend b { color: var(--tx); font-weight: 600; font-variant-numeric: tabular-nums; }

.pc-num { font-variant-numeric: tabular-nums; }
.pc-hero-n { font-size: 46px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.pc-sub { color: var(--tx2); font-size: 13px; }
.pc-muted { color: var(--tx3); }

/* (i) — nothing explanatory sits on the surface */
.pc-i {
  width: 16px; height: 16px; border-radius: 999px; flex: none;
  border: 1px solid var(--line2); color: var(--tx3);
  font-size: 10px; font-weight: 700; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.pc-i:hover, .pc-i:focus-visible { border-color: var(--acc); color: var(--acc); outline: none; }
/* A bracketed fragment carried over verbatim from someone else's published material. Muted
   and underlined so it reads as quoted wording rather than as a field this register measured. */
.pc-asnamed {
  color: var(--tx3); font-weight: 500;
  /* currentColor, not a line token: this mark also sits on the briefing's paper surface,
     where a translucent-white border is invisible. */
  border-bottom: 1px dotted currentColor; cursor: help;
}
#pc-tip {
  position: fixed; z-index: 200; max-width: 320px; pointer-events: none; opacity: 0;
  background: var(--bg2); border: 1px solid var(--line2); border-radius: 10px;
  padding: 10px 13px; font-size: 12.5px; line-height: 1.5; color: var(--tx2);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .55); transition: opacity .12s ease;
}
#pc-tip.on { opacity: 1; }

/* popup — a div toggled with .on, matching the approved mock (never a <dialog>) */
#pc-ov {
  position: fixed; inset: 0; z-index: 190; background: rgba(3, 6, 12, .74);
  opacity: 0; pointer-events: none; transition: opacity .16s ease;
}
#pc-ov.on { opacity: 1; pointer-events: auto; }
#pc-pop {
  position: fixed; z-index: 195; left: 50%; top: 50%; transform: translate(-50%, -46%);
  width: min(680px, calc(100vw - 40px)); max-height: 84vh; overflow: auto;
  background: var(--bg1); border: 1px solid var(--line2); border-radius: var(--r-lg);
  box-shadow: 0 40px 90px rgba(0, 0, 0, .6);
  opacity: 0; pointer-events: none; transition: opacity .16s ease, transform .16s ease;
}
#pc-pop.on { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%); }
.pc-pop-hd {
  position: sticky; top: 0; background: var(--bg1); border-bottom: 1px solid var(--line);
  padding: 16px 20px; display: flex; align-items: center; gap: 12px;
}
.pc-pop-hd h3 { font-size: 15px; }
.pc-pop-x {
  margin-left: auto; width: 28px; height: 28px; border-radius: 8px;
  border: 1px solid var(--line2); color: var(--tx2); font-size: 15px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.pc-pop-x:hover { border-color: var(--tx3); color: var(--tx); }
.pc-pop-bd { padding: 18px 20px 22px; }

/* forms */
.pc-in {
  width: 100%; background: var(--well); border: 1px solid var(--line2);
  border-radius: var(--r-sm); color: var(--tx); padding: 12px 14px; font-size: 15px;
  font-family: inherit;
}
.pc-in::placeholder { color: var(--tx3); }
.pc-in:focus { outline: 2px solid var(--focus); outline-offset: 1px; border-color: transparent; }
textarea.pc-in { min-height: 108px; resize: vertical; line-height: 1.5; }
.pc-lb { display: block; font-size: 12px; font-weight: 600; color: var(--tx2); margin-bottom: 6px; }
.pc-hint { font-size: 11.5px; color: var(--tx3); margin-top: 6px; }
.pc-err { font-size: 12px; color: var(--sr); margin-top: 6px; }

/* who is asking. Four roles, one row, always visible — before the first check and
   after it, because a broker running the same domain for two different reasons should
   not have to reload the page to change who they are reading as.

   Deliberately NOT a <select>: the four options are the product's whole claim about who
   this is for, and a collapsed dropdown hides that claim behind a click. The selected
   chip wears the accent, which is interaction chrome and carries no data — the roles are
   not a state and must never be mistaken for one. */
.pc-role {
  display: flex; gap: 7px; flex-wrap: wrap; align-items: center; justify-content: center;
}
.pc-role-l {
  font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--tx3); margin-right: 3px;
}
.pc-role-b {
  border: 1px solid var(--line2); border-radius: 999px; background: none;
  color: var(--tx2); font: inherit; font-size: 12px; padding: 6px 14px; cursor: pointer;
  transition: border-color .14s ease, color .14s ease, background .14s ease;
}
.pc-role-b:hover { border-color: var(--tx3); color: var(--tx); }
.pc-role-b.on {
  border-color: var(--acc); background: rgba(37, 99, 235, .16); color: var(--tx);
  font-weight: 600;
}
.pc-role-b:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* tables */
.pc-tw { overflow-x: auto; }
.pc-tb { width: 100%; border-collapse: collapse; font-size: 13px; }
.pc-tb th {
  text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--tx3); padding: 9px 12px;
  border-bottom: 1px solid var(--line2); vertical-align: bottom;
}
.pc-tb td { padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.pc-tb tbody tr:last-child td { border-bottom: 0; }
.pc-tb tbody tr.click { cursor: pointer; }
.pc-tb tbody tr.click:hover { background: rgba(245, 247, 250, .035); }
.pc-tb .num { text-align: right; font-variant-numeric: tabular-nums; }

/* monogram */
.pc-mono {
  width: 30px; height: 30px; flex: none; border-radius: 9px;
  background: var(--bg2); border: 1px solid var(--line2);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 700; color: var(--tx2); letter-spacing: 0.02em;
}

/* the honest empty / boundary note */
.pc-note {
  border-left: 2px solid var(--line2); padding: 2px 0 2px 14px;
  color: var(--tx2); font-size: 13px; line-height: 1.6;
}
.pc-note.acc { border-left-color: var(--acc); }

.pc-grid { display: grid; gap: 14px; }
.pc-g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pc-g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pc-g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1080px) { .pc-g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 820px) {
  .pc-g2, .pc-g3, .pc-g4 { grid-template-columns: minmax(0, 1fr); }
  .pc-top-tag { display: none; }
}

.pc-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* The URL Entity Scan renders as one block on every calculator surface — the published
   read and the live read, stacked at the same rhythm the host page uses for its cards. */
.sc-pair { display: grid; gap: 18px; }

/* The Free Insight Report offer rides at the foot of the scan, so it wears the accent the
   rest of the calculator reserves for the one thing it is asking the reader to do. */
.sc-claim { border-color: rgba(37, 99, 235, .35); background:
  linear-gradient(180deg, rgba(37, 99, 235, .07), transparent 62%), var(--bg1); }

/* MY LIST — the gated page. A watchlist is read as a set, so the numbers that answer
   "what is this list short of" sit above the table, not inside it. */
.ml-hero { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 820px) { .ml-hero { grid-template-columns: minmax(0, 1fr); } }
.ml-hero .pc-card { padding: 20px 22px; }
.ml-hero .pc-hero-n { font-size: 40px; }
.ml-hero .pc-eyebrow { display: block; margin-bottom: 10px; }
.ml-hero p { margin: 10px 0 0; }

.ml-roll { display: grid; gap: 9px; margin-top: 14px; }
.ml-roll button {
  display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center;
  width: 100%; text-align: left; padding: 11px 14px; border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--well); color: var(--tx); font-size: 13px;
}
.ml-roll button:hover { border-color: var(--acc); }
.ml-roll .ml-roll-n { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--tx); }
.ml-roll .ml-roll-s { font-size: 11.5px; color: var(--tx3); display: block; margin-top: 3px; }

.ml-sub { display: flex; align-items: center; gap: 10px; }
.ml-sub .pc-mono { width: 26px; height: 26px; border-radius: 8px; font-size: 10px; }
.ml-n { font-size: 11px; color: var(--tx3); font-variant-numeric: tabular-nums; margin-left: 7px; }
.ml-bar { display: flex; align-items: center; gap: 8px; }
.ml-bar .pc-band { width: 92px; }

/* THE TABLE SHEDS COLUMNS RATHER THAN SCROLLING. A watchlist read sideways is a watchlist
   half read, so as the screen narrows the columns that repeat something the record popup
   already holds are dropped, in order of least loss: the assessment chip, then the claim
   button, then Remove. The two read strips and the company never go — they are the page. */
@media (max-width: 1080px) {
  .ml-tb .ml-c-as { display: none; }
  .ml-bar .pc-band { width: 74px; }
}
@media (max-width: 760px) {
  .ml-tb .ml-c-rep { display: none; }
  .ml-tb th, .ml-tb td { padding-left: 8px; padding-right: 8px; }
}
@media (max-width: 560px) {
  .ml-tb .ml-c-rm { display: none; }
  .ml-tb .ml-sub .pc-mono { display: none; }
  /* A domain is one long unbreakable word, and one of those sets the whole column's
     minimum. On a phone it breaks rather than pushing the reads off the screen. */
  .ml-tb .ml-sub .pc-hint, .ml-tb .ml-sub b { white-space: normal; overflow-wrap: anywhere; }
  .ml-card { padding-left: 12px; padding-right: 12px; }
  .ml-tb th, .ml-tb td { padding-left: 6px; padding-right: 6px; }
  .ml-tb .ml-bar { flex-direction: column; align-items: flex-start; gap: 4px; }
  .ml-bar .pc-band { width: 46px; }
  .ml-bar span { font-size: 11px; }
}
.ml-bar span { font-size: 11.5px; color: var(--tx2); white-space: nowrap; }
.ml-tools { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.ml-tools select {
  border: 1px solid var(--line2); border-radius: 999px; background: var(--bg2);
  color: var(--tx); font-size: 12px; padding: 6px 12px;
}

/* ── the graded-check row ─────────────────────────────────────────────────────────────
   Moved here from self-check.html on 2026-08-15. The five graded checks are rendered by
   assets/calc-scan-ui.js, which every partner desk now calls as well, so the rules that
   dress them cannot live inside one page's <style>. */
.sc-pts { display: grid; gap: 0; }
/* The offer sits at the FOOT of the list it describes, not in a card of its own beside it.
   A reader who has just read the seventeen fields is standing where the button belongs. */
.sc-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line);
}
.sc-foot p { margin: 0; flex: 1 1 300px; }
.sc-pt {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) 130px 110px 20px;
  gap: 14px; align-items: center; padding: 11px 10px; border-bottom: 1px solid var(--line);
  width: 100%; text-align: left; cursor: pointer;
}
.sc-pt.lite { grid-template-columns: 26px minmax(0, 1fr) 20px; }
.sc-pt:last-child { border-bottom: 0; }
.sc-pt:hover { background: rgba(245, 247, 250, .035); }
.sc-pt-n {
  font-size: 10.5px; font-weight: 700; color: var(--tx3);
  border: 1px solid var(--line2); border-radius: 6px; text-align: center; padding: 2px 0;
}
.sc-pt-l { font-size: 13.5px; font-weight: 600; }
.sc-pt-g { font-size: 11px; color: var(--tx3); }
.sc-pt-c { font-size: 11.5px; color: var(--tx2); font-variant-numeric: tabular-nums; }
.sc-pt-x { color: var(--tx3); font-size: 13px; text-align: right; transition: transform .18s ease; }
/* THE FIVE CHECKS OPEN IN PLACE, ONE AT A TIME. They used to open a popup, which put the
   account of the search on top of the row it explains — the reader lost their place in the
   list and could never hold two checks side by side. The body now sits under its own row,
   indented to the row's label column so the two are visibly the same record. */
.sc-ex { border-bottom: 1px solid var(--line); }
.sc-ex:last-child { border-bottom: 0; }
.sc-ex > .sc-pt { border-bottom: 0; }
.sc-ex.on > .sc-pt { background: rgba(245, 247, 250, .035); }
.sc-ex.on .sc-pt-x { transform: rotate(90deg); }
.sc-ex-b { display: none; padding: 2px 10px 18px 50px; }
.sc-ex.on .sc-ex-b { display: block; }
@media (max-width: 700px) { .sc-ex-b { padding-left: 10px; } }
/* THE SOURCE, ON THE ROW. A row whose label and whose band word are the same word —
   "Privacy Notice Published · ● Published" — is its own proof and nothing else, so the
   address it was read from, its length and how it was found sit underneath it. */
.sc-pt-s {
  display: block; margin-top: 3px; font-size: 10.5px; color: var(--tx3);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-all;
}
/* THE REPEAT LINE. It sits above the headline, because whether this answer is the same
   answer as last time is read before the answer itself is worth reading. Coloured by the
   method's own five, and the glyph inside is a status icon, never a band word. */
.sc-rep {
  display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 9px; align-items: start;
  margin: 0 0 14px; padding: 10px 12px; border-radius: 8px; font-size: 12px;
  line-height: 1.5; color: var(--tx2); border: 1px solid var(--line);
  background: rgba(245, 247, 250, 0.03);
}
.sc-rep b { color: var(--tx1); }
.sc-rep-g {
  display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%;
  font-size: 11px; line-height: 1; border: 1px solid currentColor;
}
.sc-rep.red   { color: var(--sr); } .sc-rep.amber { color: var(--sa); }
.sc-rep.green { color: var(--sg); } .sc-rep.blue  { color: var(--sb); }
.sc-rep.grey  { color: var(--sy); }
.sc-rep .sc-rep-g { background: color-mix(in srgb, currentColor 16%, transparent); }
.sc-rep-d {
  display: block; margin-top: 6px; font-size: 10.5px; color: var(--tx3);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-all;
}
@media (max-width: 720px) {
  .sc-pt { grid-template-columns: 26px minmax(0, 1fr) auto; gap: 8px 10px; }
  .sc-pt > :nth-child(3) { grid-column: 1 / -1; grid-row: 2; }
  .sc-pt > :nth-child(4) { text-align: right; }
  .sc-pt > :nth-child(5) { display: none; }
  .sc-pt.lite > :nth-child(3) { display: none; }
}