/* procurement.css — /procurement/ only.
   Layers on sds-detail.css (chrome) + solutions.css (.sol-* layout) +
   about.css (.about-facts identifier card, reused verbatim). Everything
   here is either the copy-to-clipboard affordance on the identifiers or
   the two link grids below it. */

/* ── COPYABLE IDENTIFIERS ──
   The <dd> values inside .about-facts become buttons. They must not read
   as buttons at rest (the card is a facts panel, not a toolbar), but they
   must be an obvious hit target on hover/focus. */
.about-facts .proc-ids dd{display:flex}
.copy-val{
  font:inherit;color:#fff;font-weight:700;letter-spacing:.02em;
  background:transparent;border:1px solid transparent;border-radius:5px;
  padding:.18rem .45rem;margin:-.18rem -.45rem;
  display:inline-flex;align-items:center;gap:.55rem;
  cursor:pointer;text-align:left;
  transition:background .15s,border-color .15s;
}
.copy-val:hover,.copy-val:focus-visible{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.28)}
.copy-val:focus-visible{outline:2px solid var(--green-lt);outline-offset:2px}
.copy-hint{
  font-size:.62rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em;
  color:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.24);
  border-radius:3px;padding:.1rem .3rem;
  opacity:0;transition:opacity .15s;
}
.copy-val:hover .copy-hint,.copy-val:focus-visible .copy-hint{opacity:1}
.copy-val.copied{background:rgba(0,157,195,.24);border-color:var(--green-lt)}
/* Swap the label to "Copied" without touching the DOM: zero out the span's
   own text, print the new one from ::after at the real size. */
.copy-val.copied .copy-hint{opacity:1;color:var(--green-lt);border-color:var(--green-lt);font-size:0}
.copy-val.copied .copy-hint::after{content:'Copied';font-size:.62rem}

/* Live region for the copy confirmation. Present in the DOM from load so
   screen readers announce into it; visually revealed only once used. */
.proc-status{
  min-height:1.2em;margin:-2.4rem 0 2.4rem;
  color:var(--green);font-size:.88rem;font-weight:700;
  opacity:0;transition:opacity .2s;
}
.proc-status.is-visible{opacity:1}

/* ── LINK GRIDS (What We Supply / Documentation) ── */
.proc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.4rem}
.proc-grid-2{grid-template-columns:repeat(2,1fr);max-width:640px}
.proc-card{
  display:block;text-decoration:none;
  border:1px solid var(--line);border-left:3px solid var(--green);
  border-radius:6px;padding:1.1rem 1.2rem;background:#fff;
  transition:border-color .16s,box-shadow .16s,transform .16s;
}
.proc-card:hover,.proc-card:focus-visible{border-color:var(--blue);border-left-color:var(--blue);box-shadow:var(--shadow-md);transform:translateY(-2px)}
.proc-card:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.proc-card h3{
  font-size:.95rem;font-weight:800;color:var(--navy);
  text-transform:none;letter-spacing:0;margin:0 0 .35rem;
}
.proc-card p{color:var(--muted);font-size:.86rem;line-height:1.55;margin:0;max-width:none}

/* ── PAST PERFORMANCE LIST ── */
.proc-perf{list-style:none;margin:1.2rem 0 1.4rem;display:grid;gap:.1rem}
.proc-perf li{border-bottom:1px solid var(--line)}
.proc-perf li:first-child{border-top:1px solid var(--line)}
.proc-perf a{
  display:block;padding:.78rem .2rem;
  color:var(--slate);font-size:.96rem;line-height:1.5;text-decoration:none;
  transition:color .14s,padding-left .14s,background .14s;
}
.proc-perf a:hover,.proc-perf a:focus-visible{color:var(--blue);background:var(--panel);padding-left:.7rem}
.proc-perf a:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}

.proc-more{
  display:inline-flex;align-items:center;gap:.45rem;
  color:var(--blue);font-weight:800;font-size:.9rem;text-decoration:none;
}
.proc-more svg{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none}
.proc-more:hover{color:var(--navy)}

/* ── RESPONSIVE ── */
@media (max-width:900px){
  .proc-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
  .proc-grid,.proc-grid-2{grid-template-columns:1fr}
  .proc-status{margin:-1.8rem 0 2rem}
  /* Copying an identifier is the main thing done here on a phone — grow the
     tap target past the 32px the desktop padding gives. Negative margins keep
     the dl rows aligned as they were. */
  .copy-val{padding:.44rem .55rem;margin:-.44rem -.55rem}
}
@media (prefers-reduced-motion:reduce){
  .proc-card,.proc-perf a,.copy-val,.copy-hint,.proc-status{transition:none}
  .proc-card:hover,.proc-card:focus-visible{transform:none}
  .proc-perf a:hover,.proc-perf a:focus-visible{padding-left:.2rem}
}