/* ==========================================================================
   hi-receipt.css — the receipt stamp, as a component.
   ------------------------------------------------------------------------
   The site's signature is that it shows its receipts: a small gold-glyph
   provenance stamp under anything that claims a fact. This file turns that
   convention into one canonical object.

   ANATOMY
     [data-receipt]            the chip (resting form)
     [data-receipt="quiet"]    borderless inline variant for dense tables
     [data-receipt] ::before   the gold ◷ glyph — the ONLY gold on the site
     .hi-rcp-panel             the reveal (one shared, body-level element)

   STATES: rest · hover · focus-visible · open · reduced-motion

   The chip is complete and correct with no JS. hi-receipt.js only adds the
   reveal; it changes nothing about the chip's box, so there is no shift.

   TOKENS: every colour reads the host page's token first and falls back
   through the known per-surface names, then to a literal. Load this file
   AFTER page CSS; the doubled [data-receipt][data-receipt] selectors then
   win over legacy .asof / .rw-stamp / .do-stamp rules without !important.
   ========================================================================== */

:root{
  --hr-gold:   var(--receipt, var(--rd-receipt, var(--rw-receipt, var(--hi-receipt, #b9862e))));
  --hr-ink:    var(--ink, var(--rd-ink, var(--rw-ink, #17253d)));
  --hr-muted:  var(--muted, var(--rd-muted, var(--rw-muted, #6a7b95)));
  --hr-line:   var(--hairline, var(--rd-hairline, var(--border, #ddd3c0)));
  --hr-edge:   var(--border, var(--rd-border, #d9cdb8));
  --hr-fill:   rgba(23,37,61,.028);
  --hr-blue:   var(--blue, var(--rd-blue, var(--accent, #1f5fbf)));
  --hr-panel:  var(--card, var(--rd-card, #fdfaf3));
  --hr-shadow: 0 12px 34px rgba(23,37,61,.16), 0 2px 6px rgba(23,37,61,.08);
  --hr-mono:   var(--mono, var(--rd-mono, 'JetBrains Mono', ui-monospace, monospace));
}
.hi-rcp-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.hi-rcp-actions button{font:inherit;font-size:12px;border:1px solid var(--hr-edge);border-radius:5px;padding:8px 10px;color:var(--hr-blue);background:var(--hr-panel);cursor:pointer;min-height:40px}
.hi-rcp-actions button:focus-visible,.hi-rcp-status input:focus-visible{outline:2px solid var(--hr-blue);outline-offset:2px}
.hi-rcp-status{font-size:12px;color:var(--hr-ink);margin:8px 0 0;overflow-wrap:anywhere}
.hi-rcp-status:empty{display:none}
.hi-rcp-status input{display:block;width:100%;box-sizing:border-box;margin-top:6px;background:var(--hr-panel);color:var(--hr-ink);border:1px solid var(--hr-edge);padding:7px}
:root[data-theme="dark"]{
  --hr-gold:   var(--receipt, var(--rd-receipt, var(--rw-receipt, var(--hi-receipt, #e3c076))));
  --hr-ink:    var(--ink, var(--rd-ink, #eef4fc));
  --hr-muted:  var(--muted, var(--rd-muted, #9db2cf));
  --hr-fill:   rgba(157,184,221,.055);
  /* the panel is a RAISED surface in dark. This used to be hand-rolled
     literals (#16243c + a bespoke halo); it is now the canonical ramp —
     surface-2 fill plus --hi-ambient, which already carries the rim-light.
     Rendered result is within a hair of the old one, on purpose. */
  --hr-panel:  var(--hi-surface-2, #16263f);
  --hr-shadow: var(--hi-ambient), var(--hi-shadow);
  --hr-rim:    rgba(157,184,221,.30);
}

/* ---------- 1. the chip ------------------------------------------------- */

[data-receipt][data-receipt]{
  display:inline-flex;
  align-items:baseline;
  gap:.5em;
  max-width:100%;
  box-sizing:border-box;
  font-family:var(--hr-mono);
  font-size:.62rem;
  font-style:normal;
  font-weight:500;
  line-height:1.5;
  letter-spacing:.055em;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
  color:var(--hr-muted);
  background:var(--hr-fill);
  border:1px solid var(--hr-line);
  border-radius:5px;
  padding:.34em .68em .38em;
  text-align:left;
  text-decoration:none;
}
/* the glyph — replaces whatever ::before the host page had, same character */
[data-receipt][data-receipt]::before{
  content:"\25F7";
  color:var(--hr-gold);
  flex:0 0 auto;
  font-family:"Segoe UI Symbol", var(--hr-mono);
  font-size:1.02em;
  line-height:1;
  letter-spacing:0;
  opacity:.95;
}
[data-receipt][data-receipt]::after{ content:none }

/* live chips carry a hairline disclosure mark; it is the only added ink */
[data-receipt][data-hr-live][data-hr-live]::after{
  content:"\203A";
  flex:0 0 auto;
  align-self:center;
  font-family:var(--hr-mono);
  font-size:1.05em;
  line-height:1;
  color:var(--hr-muted);
  opacity:.6;
  transform:rotate(90deg);
  transform-origin:50% 50%;
  transition:transform .16s ease, opacity .16s ease;
}
[data-receipt][data-hr-live][aria-expanded="true"]::after{
  transform:rotate(-90deg);
  opacity:1;
}

/* quiet: borderless, for dense tables and card feet */
[data-receipt="quiet"][data-receipt]{
  background:none;
  border-color:transparent;
  padding:.1em 0;
  border-radius:0;
}

/* ---------- 1b. stale: the receipt whose date has gone cold ------------- */
/* The fourth state in the hi-states.css vocabulary. A stale mark is NOT a
   new component — it is this chip, with the date carrying the warning.
   Deliberately amber-free: amber would be a second warm colour competing
   with the ◷, and the site has exactly one gold. The chip stays muted; only
   the date inside <b> turns coral, because the date is the thing that aged.
   ADOPT ONLY where the page already knows its own snapshot date. */
[data-receipt][data-receipt-stale]{
  border-color:var(--hr-stale-line, rgba(179,78,62,.34));
}
[data-receipt][data-receipt-stale] b{
  font-weight:600;
  /* the CANONICAL coral, not the host page's local one. Several surfaces
     define a lighter --coral for large figures (team-hub's #c25a4a measures
     4.16:1 on its card); this date is 0.62rem mono and has to clear 4.5:1 in
     both themes, so it takes --hi-coral and lets a page override only via
     --hr-stale-ink if it has a checked value of its own. */
  color:var(--hr-stale-ink, var(--hi-coral, #b34e3e));
  font-variant-numeric:tabular-nums;
}
:root[data-theme="dark"] [data-receipt][data-receipt-stale]{
  --hr-stale-line:rgba(232,151,134,.34);
}
/* quiet chips have no box to tint; the coral date carries it alone */
[data-receipt="quiet"][data-receipt-stale]{ border-color:transparent }

/* ---------- 2. the reveal trigger --------------------------------------- */

[data-receipt][data-hr-live]{
  cursor:help;
  transition:border-color .16s ease, color .16s ease, background-color .16s ease;
}
[data-receipt][data-hr-live]:hover,
[data-receipt][data-hr-live][aria-expanded="true"]{
  color:var(--hr-ink);
  border-color:var(--hr-edge);
  background:var(--hr-fill);
}
[data-receipt="quiet"][data-hr-live]:hover,
[data-receipt="quiet"][data-hr-live][aria-expanded="true"]{
  border-bottom-color:var(--hr-edge);
}
[data-receipt][data-hr-live]:focus-visible{
  outline:2px solid var(--hr-blue);
  outline-offset:2px;
  color:var(--hr-ink);
}

/* ---------- 3. the panel ------------------------------------------------ */

.hi-rcp-panel{
  position:fixed;
  z-index:9999;
  top:0; left:0;
  width:max-content;
  min-width:16rem;
  max-width:min(23rem, calc(100vw - 24px));
  box-sizing:border-box;
  padding:14px 16px 13px;
  background:var(--hr-panel);
  border:1px solid var(--hr-edge);
  border-radius:10px;
  box-shadow:var(--hr-shadow);
  border-top-color:var(--hr-rim, var(--hr-edge));
  color:var(--hr-ink);
  text-align:left;
  opacity:0;
  visibility:hidden;
  transform:translate3d(0,3px,0);
  transition:opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
}
.hi-rcp-panel[data-open="1"]{
  opacity:1;
  visibility:visible;
  transform:translate3d(0,0,0);
  transition:opacity .15s ease, transform .15s ease, visibility 0s;
}
/* the gold rule at the head — the panel's only warm mark, matching the glyph */
.hi-rcp-panel .hi-rcp-head{
  display:flex;
  align-items:baseline;
  gap:.5em;
  font-family:var(--hr-mono);
  font-size:.53rem;
  font-weight:700;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--hr-muted);
  padding-bottom:9px;
  margin-bottom:10px;
  border-bottom:1px solid var(--hr-line);
}
.hi-rcp-panel .hi-rcp-head::before{
  content:"\25F7";
  color:var(--hr-gold);
  font-family:"Segoe UI Symbol", var(--hr-mono);
  letter-spacing:0;
}
/* the grid: label column is fixed so every row's value starts on one axis */
.hi-rcp-panel .hi-rcp-grid{
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:5.4rem 1fr;
  gap:7px 12px;
  align-items:baseline;
}
.hi-rcp-panel dt,
.hi-rcp-panel dd{ text-align:left; justify-self:stretch }
.hi-rcp-panel dt{
  font-family:var(--hr-mono);
  font-size:.5rem;
  font-weight:700;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--hr-muted);
  margin:0;
  line-height:1.6;
}
.hi-rcp-panel dd{
  margin:0;
  font-family:var(--hr-mono);
  font-size:.63rem;
  font-weight:500;
  line-height:1.6;
  letter-spacing:.02em;
  color:var(--hr-ink);
  font-variant-numeric:tabular-nums;
  overflow-wrap:anywhere;
}
.hi-rcp-panel dd.hi-rcp-prose{
  font-family:inherit;
  font-size:.72rem;
  letter-spacing:0;
  line-height:1.62;
  color:var(--hr-ink);
}
.hi-rcp-panel .hi-rcp-link{
  display:inline-block;
  margin-top:11px;
  padding-top:9px;
  border-top:1px solid var(--hr-line);
  width:100%;
  box-sizing:border-box;
  font-family:var(--hr-mono);
  font-size:.55rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--hr-blue);
  text-decoration:none;
}
.hi-rcp-panel .hi-rcp-link:hover{ text-decoration:underline }
.hi-rcp-panel .hi-rcp-link:focus-visible{ outline:2px solid var(--hr-blue); outline-offset:2px }

@media (max-width:560px){
  .hi-rcp-panel{ max-width:calc(100vw - 20px); padding:13px 14px }
  .hi-rcp-panel .hi-rcp-grid{ grid-template-columns:4.8rem 1fr; gap:6px 10px }
}

@media (prefers-reduced-motion: reduce){
  .hi-rcp-panel,
  [data-receipt][data-hr-live],
  [data-receipt][data-hr-live][data-hr-live]::after{ transition:none }
  .hi-rcp-panel{ transform:none }
  .hi-rcp-panel[data-open="1"]{ transform:none }
}

@media print{
  .hi-rcp-panel{ display:none }
}