/* v5 additive layer — kept out of style.css, which make_v5.py regenerates from the
   approved v4 sheet, so a rebuild can never drop these.
   1. real artwork in the plugin / screensaver cards (monogram tile stays underneath
      as the fallback: if the image is missing or 404s it is simply revealed)
   2. brand lockup scaled by height, so the wordmark is never squashed
   3. AA contrast repairs on the labels the v4 sheet left too faint */

.plug .plug-tile {
  position: relative;
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  border-radius: 11px;
  overflow: hidden;
  display: block;
}
.plug .plug-tile .mono-tile {
  width: 100%;
  height: 100%;
  border-radius: 0;
  flex: none;
}
.plug .plug-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  border-radius: inherit;
}
/* the real screenshot is the card's face: give it a hairline so dark art doesn't vanish */
.plug .plug-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
  pointer-events: none;
}
body[data-mode="white"] .plug .plug-tile::after,
body[data-skin="term"] .plug .plug-tile::after {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .16);
}

/* ── brand: the lockup is 1618x260, so it must scale by HEIGHT only.
   The base sheet sized every brand image to 34x34 / 26x26, which squashed the
   wordmark into an unreadable square in the sidebar and the top bar. */
.g-logo .brandlock      { width: auto; height: 30px; max-width: 100%; }
.t-bar .lg img.brandlock{ width: auto; height: 21px; }

/* ── AA contrast on the two labels the base sheet left too faint ── */
.g-cat { color: #8b90b8; }
body[data-skin="glass"][data-mode="white"] .g-look button { color: #3d4665; }
body[data-skin="glass"][data-mode="white"] .g-cat        { color: #5b627e; }

.t-hero img.brandlock   { width: auto; height: 54px; }
.ch-top .brandlock      { width: auto; height: 40px; }

/* hero app summary: was an inline #b6bad8, unreadable on the light hero in White */
.g-hero .hsub { color: #b6bad8; font-size: 13px; }
body[data-skin="glass"][data-mode="white"] .g-hero .hsub { color: #4a5470; }
body[data-skin="glass"][data-mode="white"] .g-app .get { color: #1f4fd0; }
body[data-skin="glass"][data-mode="white"] .legal    { color: #5b627e; }

/* ── tablets and small laptops: the v4 grids are sized for ≥1366 and
   overflow the viewport on anything narrower. ───────────────────────────────── */
@media (max-width: 1366px) {
  .g-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .g-themes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .g-pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .g-hero h2 { font-size: 38px; }
}

@media (max-width: 1200px) {
  .g-wrap { grid-template-columns: 210px 1fr; }
  .g-hero h2 { font-size: 34px; }
  .g-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-themes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .g-pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-hero h2 { font-size: 36px; }
  .g-hero .bigicon { width: 190px; height: 190px; }
  .t-bar { flex-wrap: wrap; }
  .t-search { min-width: 0; flex: 1 1 260px; margin-left: auto; }
  .t-keys { grid-template-columns: repeat(4, 1fr); }
  .t-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .t-list { grid-template-columns: 1fr; }
  .g-main, .t-sec, .pg-wrap, .pg-h, .t-keys { min-width: 0; }
}

/* ── phones (390px and up): v5 had no media queries at all, so the layout was
   1200px wide and every phone showed a zoomed-out desktop page. ─────────────── */
@media (max-width: 820px) {
  /* chooser */
  #choose { padding: 22px 16px 28px; }
  .ch-h { font-size: 30px; }
  .ch-sub { font-size: 14.5px; margin: 10px auto 20px; }
  .ch-cards { grid-template-columns: 1fr; gap: 16px; }
  .card h2 { font-size: 24px; }
  .ch-foot { font-size: 12px; }

  /* ── Glass ── */
  .g-wrap { grid-template-columns: 1fr; }
  .g-side {
    position: static; height: auto; flex-direction: row; flex-wrap: wrap;
    align-items: center; gap: 8px; padding: 9px 10px;
    border-right: 0; border-bottom: 1px solid var(--ln); z-index: 6;
  }
  .g-logo { padding: 0 4px 0 0; }
  .g-logo .brandlock { height: 22px; }
  .g-search { display: none; }              /* no room in the rail; ⌘ search lives in the bar */
  .g-nav { display: flex; gap: 6px; flex: 1 1 auto; overflow-x: auto; scrollbar-width: none; order: 3; }
  .g-nav::-webkit-scrollbar { display: none; }
  .g-nav a { padding: 7px 10px; font-size: 13px; white-space: nowrap; border-radius: 9px; gap: 7px; }
  .g-nav .g-cat, .g-nav a i { display: none; }
  .g-foot { margin: 0; display: flex; gap: 8px; align-items: center; order: 2; margin-left: auto; }
  .g-look { display: none; }
  .g-modes { width: auto; padding: 3px; }
  .g-modes button { padding: 6px 10px; font-size: 11.5px; }
  .g-main { padding: 16px 14px 30px; }
  .g-main h1 { font-size: 26px; }
  .g-hero { border-radius: 20px; min-height: 0; }
  .g-hero .in { padding: 20px 18px; max-width: none; }
  .g-hero h2 { font-size: 27px; }
  .g-hero .bigicon { display: none; }
  .g-hero p { font-size: 13.5px; }
  .g-hero .row { flex-wrap: wrap; gap: 10px; }
  .g-row { grid-template-columns: minmax(0, 1fr); }
  .g-themes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .g-pgrid { grid-template-columns: minmax(0, 1fr); }
  .g-th div { padding: 8px 10px; }
  .g-th b { font-size: 12.5px; }
  .g-th span { font-size: 11px; }
  .shelf { margin-top: 22px; }
  .shelf-h h2 { font-size: 18px; }
  .shelf-h span { font-size: 11.5px; }
  .chart { grid-template-columns: 26px 1fr auto; gap: 8px; font-size: 12.5px; }
  .chart .st:nth-last-child(2) { display: none; }
  .spons-big { margin-top: 26px; }
  .spons-bar { flex-wrap: wrap; gap: 8px; font-size: 12px; }

  /* ── Terminal ── */
  .t-bar { flex-wrap: wrap; gap: 7px; padding: 8px 10px; }
  .t-bar .k { font-size: 12px; padding: 3px 8px; }
  .t-search { order: 9; flex: 1 1 100%; min-width: 0; margin-left: 0; padding: 6px 10px; }
  .t-look { margin-left: auto; }
  .t-hero { padding: 24px 14px 6px; }
  .t-hero img.brandlock { height: 40px !important; }
  .t-hero h1 { font-size: 26px; }
  .t-keys { grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 22px; padding: 0 12px; }
  .t-sec { margin-top: 26px; padding: 0 12px; }
  .pg-h { margin-top: 20px; padding: 0 12px; }
  .pg-wrap { padding: 0 12px; }
  .t-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .pg-wrap, .t-grid { max-width: 100%; }
  .skins { width: 100%; }

  /* nothing may push the page wider than the phone */
  .g-wrap, .g-side, .g-main, .t-grid, .pg-wrap, .t-sec, .t-list { min-width: 0; max-width: 100%; }
  .g-nav { min-width: 0; max-width: 100%; }
  .t-list { grid-template-columns: 1fr; }
  .t-li { grid-template-columns: 40px 1fr; }
  .t-li code { display: none; }         /* the package name is in the sheet anyway */
  .t-th div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html, body { max-width: 100%; overflow-x: hidden; }
}

/* the legal line was 4.2:1 on the dark canvas (13px) — nudge it over AA */
.legal { color: #8b90b8; }
body[data-skin="glass"][data-mode="white"] .legal { color: #5b627e; }
/* the Spotify CTA is brand green #1ed760 — 1.8:1 on the white finish */
body[data-skin="glass"][data-mode="white"] .spons-bar .cta { color: #0d7a3f; }

/* the app/theme sheet: 10.5px section label and the copy button were just under AA */
.sh h4 { color: #8fb0ff; }   /* the sheet panel is always dark (#12141d), in all finishes */
.sh .acts button.p { background: #4d82ff; color: #05070f; }
#samplenote { color: #8b90b8; }

/* Glass shelf summaries were clamped to a single line, so most read "Free and open…" */
.g-app .sm { -webkit-line-clamp: 2; }

/* a grid column may not be widened by its widest row: app rows clamp instead */
.g-app, .g-app > div, .plug > span:last-child, .theme-card { min-width: 0; }
.g-app .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-search, #gq { min-width: 0; }
#gq { width: 100%; }
.g-app > div { overflow: hidden; }

/* the sheet's definition list (package / method / licence) overflows a phone width */
@media (max-width: 520px) {
  .sh dl { grid-template-columns: 1fr; gap: 2px 0; }
  .sh dl dt { margin-top: 6px; }
  .sh dd, .sh code { overflow-wrap: anywhere; }
}

/* ══════════════ TERMINAL SKIN: the hard-coded dark chrome ══════════════
   The v4 comp was a dark-only design: the bar (#16161e), the hero headline
   (#c0caf5) and the "text on accent" ink (#16161e) were fixed colours. Once
   the skin started wearing real palettes that include light themes
   (ayu-light, solarized-light, dayfox…), a white page got a black bar, a
   near-invisible headline, and dark-on-accent labels at 2.9:1. These read
   the live variables instead, so every skin gets its own surfaces. */
body[data-skin="term"] .t-bar { background: var(--bar, #16161e); }
body[data-skin="term"] .t-hero h2,
body[data-skin="term"] .tw { color: var(--tx); }
body[data-skin="term"] .t-hero .ey,
body[data-skin="term"] .t-sec h3,
body[data-skin="term"] .k b { color: var(--ac-tx, var(--ac)); }
body[data-skin="term"] .t-sec h3:before,
body[data-skin="term"] .t-li code { color: var(--ok-tx, #9ece6a); }
body[data-skin="term"] .t-cta .p,
body[data-skin="term"] .t-look button.on { background: var(--ac); color: var(--ac-on, #16161e); }
/* the terminal bar's keycap labels were the skin's body colour on the card
   surface — 4.3:1 on solarized, so the active view was just under AA */
body[data-skin="term"] .t-bar .k { color: var(--tx-on, var(--tx)); }
/* the Spotify CTA and its green are fixed brand colours; on a light card
   surface they are 1.5:1, so use the readable shade of the same green */
body[data-skin="term"] .spons-bar .cta { color: var(--spot, #1ed760); }
body[data-skin="term"] .spons-bar .play { color: #06220f; }
/* list rows paint the theme's body colour on the lighter card surface:
   4.3:1 on solarized, 3.7:1 on solarized-osaka — lift to the surface's own shade */
body[data-skin="term"] .t-li,
body[data-skin="term"] .t-li b { color: var(--tx-on, var(--tx)); }
/* theme tiles paint the body colour on the tile surface too (solarized 4.3:1) */
body[data-skin="term"] .t-th div,
body[data-skin="term"] .t-th b { color: var(--tx-on, var(--tx)); }
/* the outlined CTA sits straight on the page: solarized-osaka's body colour
   was 4.03:1 there */
body[data-skin="term"] .t-cta .s { color: var(--tx-bg, var(--tx)); }

/* ══════════════ GLASS · WHITE FINISH: hover, focus, and the light lockup ══════════════
   The white finish was the last skin without real interaction states: a row
   hovered to pure #ffffff on a #ffffff page (no visible change), the theme
   tiles only moved 4px, the mode switch had no hover at all, and nothing in
   the store had a :focus-visible ring, so keyboard users could not see where
   they were. */
body[data-skin="glass"][data-mode="white"] .g-app:hover {
  background: #eef3ff;
  box-shadow: inset 0 0 0 1px #2f6bff33;
}
body[data-skin="glass"][data-mode="white"] .g-th:hover {
  box-shadow: inset 0 0 0 1.5px #2f6bff59, 0 16px 34px #33405c1f;
}
body[data-skin="glass"][data-mode="white"] .g-modes button:hover:not(.on) {
  background: #0d15300a; color: #1b2438;
}
body[data-skin="glass"][data-mode="dark"] .g-modes button:hover:not(.on),
body[data-skin="glass"][data-mode="glass"] .g-modes button:hover:not(.on) {
  background: #ffffff14; color: #eef1ff;
}
body[data-skin="glass"][data-mode="white"] .plug:hover,
body[data-skin="glass"][data-mode="white"] .chart:hover {
  box-shadow: inset 0 0 0 1.5px #2f6bff40, 0 10px 22px #33405c14;
}

/* every clickable thing gets the same visible ring, in both skins */
:where(a, button, input, [data-app], [data-theme], [data-view], [data-act],
       [data-mode], [data-pick], .k, .sk, .plug, .chart, .g-app, .g-th):focus-visible {
  outline: 2px solid var(--ac, #2f6bff);
  outline-offset: 2px;
}
body[data-skin="glass"][data-mode="white"] :where(a, button, input, [data-app], [data-theme],
       [data-view], [data-act], [data-mode], [data-pick], .k, .sk, .plug, .chart, .g-app, .g-th):focus-visible {
  outline-color: #2f6bff;
}