/* Screenshots on /work.html. The site has no figure styling, and an unconstrained
   <img> renders at its natural width and blows the layout out. */
.tf-shot{margin:26px 0 0;padding:0}
.tf-shot img{display:block;width:100%;height:auto;border-radius:12px;
  border:1px solid var(--line,#241f30);background:#0b0a10}
.tf-shot figcaption{margin-top:10px;font-size:.88rem;line-height:1.55;
  color:var(--mist,#ada4be);max-width:74ch}
.tf-shot.small img{border-radius:10px}
.tf-shot.wide img{border-radius:10px}
.tf-detail{align-items:start;margin-top:26px}
.tf-detail .card{margin:26px 0 0}
@media(max-width:900px){
  .tf-detail{grid-template-columns:1fr}
  .tf-detail .card{margin-top:0}
}

/* The Saturn crop is 490px natively; letting it stretch past that upscales a screenshot,
   which looks soft. Cap it and left-align rather than fake resolution. */
/* 314px of real pixels: cap display so the browser never upscales a screenshot. */
.tf-shot.small img{max-width:314px}

/* braillecanvas showcase: the image is the argument, so give it real width and
   set the copy beside it rather than under a wall of text. */
.bc-feature{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:34px;align-items:start;margin-top:28px}
.bc-art{margin:0}
.bc-art img{max-width:100%;image-rendering:auto}
.bc-copy h3{margin:0 0 .6em}
.bc-copy p{margin:0 0 .9em;color:var(--mist,#ada4be);line-height:1.65}
.bc-copy p strong{color:var(--ink,#f4f1f9)}
:root[data-theme="light"] .bc-copy p strong{color:#17131f}
@media(max-width:900px){
  .bc-feature{grid-template-columns:1fr;gap:22px}
}

/* 652px of real pixels — a terminal screenshot upscaled to 1036 is visibly soft. */
#packages .tf-shot.wide img{max-width:652px}

/* pnt.html evidence table. Bare <table> is unstyled on this site (1px padding,
   no rules) - see the same fix in blog.css. */
.tbl-wrap{overflow-x:auto;margin-top:22px;-webkit-overflow-scrolling:touch}
.pnt-tbl{width:100%;border-collapse:collapse;font-size:.93rem;min-width:560px}
.pnt-tbl th,.pnt-tbl td{padding:10px 16px 10px 0;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--line,#241f30)}
.pnt-tbl th{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  font-weight:600;color:var(--faint,#938aa6)}
.pnt-tbl td:first-child{white-space:nowrap;font-weight:500}
.pnt-tbl td.ok,.pnt-tbl td.mid,.pnt-tbl td.bad{white-space:nowrap;font-weight:600;font-size:.86rem}
.pnt-tbl td.ok{color:#52c993}
.pnt-tbl td.mid{color:#e0a23f}
.pnt-tbl td.bad{color:#ff6b8a}
.pnt-tbl tbody tr:last-child td{border-bottom:none}
.pnt-tbl code{font-size:.92em}
@media(max-width:640px){.pnt-tbl{font-size:.86rem}
  .pnt-tbl th,.pnt-tbl td{padding:8px 12px 8px 0}}

/* Install lines on the component cards. The whole point of publishing to a registry is that a
   stranger can run one command, so the command is the thing that must be readable and
   copyable — not decoration under a paragraph. [2026-09-10] */
.inst{margin-top:14px;font-size:.9rem;line-height:1.9}
.inst code{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:5px;
  padding:3px 8px;
  user-select:all;              /* one click selects the whole command */
  white-space:nowrap;
}
:root[data-theme="light"] .inst code{
  background:rgba(0,0,0,.05);
  border-color:rgba(0,0,0,.14);
}
@media (max-width:560px){
  .inst code{white-space:normal;word-break:break-word}
}

/* The link text and its arrow are one unit: 'source ↗' broke across lines on the longest card
   (pantheon-tool-sanitizer), leaving an orphaned arrow on a line by itself. Caught by LOOKING at
   the render -- every selector-based check passed. [2026-09-10] */
.inst a{white-space:nowrap}

/* ── /pnt measured table on a phone (seen 2026-09-26): the 560px table put the Evidence column off-screen with
   no hint to swipe. Under 640px each row becomes a card: layer + state on one line, the evidence under it. ── */
@media (max-width:640px){
  .tbl-wrap{overflow-x:visible}
  .pnt-tbl{min-width:0}
  .pnt-tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .pnt-tbl,.pnt-tbl tbody,.pnt-tbl tr{display:block}
  .pnt-tbl tr{padding:10px 0;border-bottom:1px solid var(--line2,rgba(127,127,127,.25))}
  .pnt-tbl tbody tr:last-child{border-bottom:none}
  .pnt-tbl td{display:inline-block;border-bottom:none;padding:0 12px 0 0}
  .pnt-tbl td:nth-child(3){display:block;padding:6px 0 0;white-space:normal}
}
/* light theme: the dark-theme state colours were ~2:1 on the light page. These clear 4.5:1 on white. */
[data-theme="light"] .pnt-tbl td.ok{color:#2f6d00}
[data-theme="light"] .pnt-tbl td.mid{color:#8a5300}
[data-theme="light"] .pnt-tbl td.bad{color:#b0213f}