/* ═══════════════════════════════════════════════════════════════════════════
   THE SITE CARD — the pictures ARE the card, the numbers stand beside them.

   Owner, 2026-09-05: "the screenshot of the horizontal web desktop view must
   be wider and the mobile one almost the same height as the total; don't group
   needs-work/strong; a more powerful layout, to go to the full report then."

   So: the desktop shot is a real browser view (a cream chrome strip with three
   dots, wide), the phone stands beside it at the full height of the picture
   area — the way a phone actually stands next to a laptop — and the right
   column is ONE ranked list, worst first, with a clay bar per row. The footer
   carries the count and a pill that is the card's natural next step.

   ⛔ Every rule is `body.os.inthread …` at the same specificity as before, so
   the base `.shots .desk img{width:236px}` from index.html (0,2,1) is beaten
   here (0,5,1) and nothing in work-clay.css touches `.osSite` — measured
   2026-09-05 with a grep, because a themed rule outranking this one silently
   is the trap that cost this surface three bugs in a week.
   ═══════════════════════════════════════════════════════════════════════════ */
body.os.inthread .osSite{
  display:grid;grid-template-columns:minmax(0,3fr) minmax(210px,2fr);
  margin:14px auto;max-width:880px;cursor:pointer;
  border:1px solid var(--line);border-radius:var(--r,14px);overflow:hidden;
  background:var(--glass);backdrop-filter:blur(18px);box-shadow:var(--lift);
  transition:border-color .16s,transform .16s cubic-bezier(.2,.8,.2,1),box-shadow .16s}
body.os.inthread .osSite:hover{
  border-color:var(--line2);transform:translateY(-2px);box-shadow:var(--lift-2)}
body.os.inthread .osSite:focus-visible{outline:2px solid var(--violet);outline-offset:2px}

/* ── the pictures ────────────────────────────────────────────────────────── */
body.os.inthread .osSite .shots{
  grid-column:1;margin:0;padding:14px 8px 14px 14px;
  display:grid;grid-template-columns:minmax(0,1fr) 23%;gap:10px;align-items:stretch;
  align-self:start;flex-wrap:nowrap}
body.os.inthread .osSite .shots .shot{
  position:relative;display:block;min-width:0;margin:0;border-radius:12px;overflow:hidden;
  border:1px solid var(--line2);background:var(--cream2,#f8f2e8);box-shadow:var(--lift);
  transition:transform .16s cubic-bezier(.2,.8,.2,1),box-shadow .16s}
body.os.inthread .osSite .shots .shot:hover{transform:translateY(-2px);box-shadow:var(--lift-2)}
/* the browser: a cream chrome strip with the three window dots, drawn in CSS
   so the markup index.html renders stays exactly what it is */
body.os.inthread .osSite .shots .shot.desk::before{
  content:'';display:block;height:16px;background:var(--cream2,#f8f2e8);
  border-bottom:1px solid var(--line);
  background-image:radial-gradient(circle,var(--line2) 2.4px,transparent 2.8px),
                   radial-gradient(circle,var(--line2) 2.4px,transparent 2.8px),
                   radial-gradient(circle,var(--line2) 2.4px,transparent 2.8px);
  background-size:8px 8px;background-repeat:no-repeat;
  background-position:7px 4px,16px 4px,25px 4px}
body.os.inthread .osSite .shots .shot.desk img{
  display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top}
/* the phone: as tall as the picture area, framed like a handset */
body.os.inthread .osSite .shots .shot.mob{border-width:2px;border-radius:14px}
body.os.inthread .osSite .shots .shot.mob::before{
  content:'';position:absolute;top:5px;left:50%;transform:translateX(-50%);width:34%;height:4px;
  border-radius:99px;background:var(--line2);z-index:1}
body.os.inthread .osSite .shots .shot.mob img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
body.os.inthread .osSite .shots .shot span{
  position:absolute;left:0;right:0;bottom:0;padding:3px 7px;
  font:600 9.5px/1.3 var(--osMono,ui-monospace);letter-spacing:.06em;text-transform:uppercase;
  color:var(--cream,#fffbf4);background:linear-gradient(180deg,transparent,rgba(43,36,64,.62))}
/* the caption belongs with the numbers, not under the pictures */
body.os.inthread .osSite .shots .shots-cap{display:none}

/* ── the numbers ─────────────────────────────────────────────────────────── */
body.os.inthread .osSiteBody{grid-column:2;padding:13px 16px 12px 8px;min-width:0;display:flex;flex-direction:column}
body.os.inthread .osSiteHost{
  font:400 11px/1.4 var(--osMono);color:var(--faint);margin-bottom:8px;overflow-wrap:anywhere}
body.os.inthread .osSiteList{display:flex;flex-direction:column;gap:1px}
body.os.inthread .osMark{
  display:grid;grid-template-columns:minmax(0,1fr) 52px 26px;gap:8px;align-items:center;
  padding:4px 0;font-size:12px;color:var(--ink);
  border-bottom:1px dashed var(--line)}
body.os.inthread .osMark:last-child{border-bottom:0}
body.os.inthread .osMark .k{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* one hue — the bar's LENGTH is the verdict, not its colour */
/* ⛔ index.html has a generic `.bar{order:9}` + `.bar i{animation:slide}` for
   the thinking indicator; both are reset here or the bar lands AFTER the score
   and glides back and forth. */
body.os.inthread .osMark .bar{
  position:relative;order:0;width:auto;height:7px;border-radius:99px;background:var(--cream2,#f8f2e8);
  box-shadow:inset 0 1px 2px rgba(43,36,64,.12);overflow:hidden}
body.os.inthread .osMark .bar i{
  position:absolute;inset:0 auto 0 0;height:100%;border-radius:99px;background:var(--violet);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45);animation:none}
body.os.inthread .osMark .v{font:600 11.5px var(--osMono);color:var(--ink);text-align:right}
body.os.inthread .osSiteMore{font:400 10.5px var(--osMono);color:var(--faint);padding:6px 0 0}
body.os.inthread .osSiteNone{font-size:12.5px;color:var(--faint);padding:10px 0 4px}
/* the door: count on the left, the pill on the right, and the pill is the
   whole card's affordance — the card is the link, the pill says where it goes */
body.os.inthread .osSiteFoot{
  display:flex;flex-direction:column;align-items:stretch;gap:8px;margin-top:auto;padding-top:10px;
  border-top:1px solid var(--line);font:400 10.5px var(--osMono);color:var(--faint)}
body.os.inthread .osSiteFoot .go{
  display:block;text-align:center;padding:9px 12px;border-radius:var(--r-pill,999px);
  background:var(--fill,#7c5cff);color:var(--onfill,#fff);
  font:700 11.5px/1 var(--f-body,Inter,sans-serif);letter-spacing:.01em;white-space:nowrap;
  box-shadow:var(--clay,0 6px 14px rgba(124,92,255,.25));transition:transform .16s,box-shadow .16s}
body.os.inthread .osSite:hover .osSiteFoot .go{transform:translateY(-1px)}

/* ── a phone: pictures on top at full width, the list below ───────────────── */
@media (max-width:760px){
  body.os.inthread .osSite{grid-template-columns:1fr}
  body.os.inthread .osSite .shots{grid-column:1;padding:12px 12px 0;grid-template-columns:minmax(0,1fr) 26%}
  body.os.inthread .osSiteBody{grid-column:1;padding:10px 12px 12px}
}
@media (prefers-reduced-motion:reduce){
  body.os.inthread .osSite,body.os.inthread .osSite .shots .shot,body.os.inthread .osSiteFoot .go{transition:none}
}