/* landscape — a grouped capability comparison.
   Cells are filled by js/landscape.js from the researched booleans, so this
   stylesheet owns appearance only. If a cell looks wrong here, the fix is in
   the data, not in CSS. The visual vocabulary is the appendix matrix's:
   uppercase muted column heads on surface-2, green checks for the field,
   accent for our column. */

/* the grid: one label column, three group columns */
[data-slide="landscape"] .versus { display: grid; grid-template-columns: 1.35fr 1fr 1fr 1fr;
                                   border: 1px solid var(--border); background: var(--border);
                                   gap: 1px; margin-top: 0.3rem; }
[data-slide="landscape"] .vc { background: var(--bg); padding: 0.5rem 0.75rem;
                               display: flex; align-items: center; gap: 0.3rem; }

/* header cells: the group name set like the appendix's column heads, then its
   members, small */
[data-slide="landscape"] .vc.head { flex-direction: column; align-items: flex-start; gap: 0.25rem;
                                    background: var(--surface-2); padding: 0.65rem 0.75rem; }
[data-slide="landscape"] .vc.head strong { font-size: 0.7rem; font-weight: 500;
                                           letter-spacing: 0.07em; text-transform: uppercase;
                                           color: var(--fg); }
[data-slide="landscape"] .vc.head em { font-style: normal; font-size: 0.62rem; line-height: 1.45;
                                       color: var(--fg-muted); }

/* the row label */
[data-slide="landscape"] .vc.lbl { font-size: 0.8rem; font-weight: 500; color: var(--fg); }

/* values: a check, a dash, or a quiet word. Checks are the appendix's green
   so the two surfaces read as one system; our column's stay accent. */
[data-slide="landscape"] .vc.val { justify-content: center; }
[data-slide="landscape"] .vc.val svg { width: 15px; height: 15px; color: var(--success); }
[data-slide="landscape"] .vc.val .dash { color: var(--fg-muted); opacity: 0.55; }
[data-slide="landscape"] .vc.val .word { font-family: var(--font-mono); font-size: 0.6rem;
                                         letter-spacing: 0.06em; text-transform: uppercase;
                                         color: var(--fg-muted); }

/* our column: same readable ground as every other cell, marked by accent
   edges rather than an accent wash (the wash drowned the text in dark mode). */
[data-slide="landscape"] .vc.us { background: var(--surface);
                                  box-shadow: inset 2px 0 0 var(--accent), inset -2px 0 0 var(--accent); }
[data-slide="landscape"] .vc.head.us { box-shadow: inset 2px 0 0 var(--accent), inset -2px 0 0 var(--accent),
                                                   inset 0 2px 0 var(--accent); }
[data-slide="landscape"] .vc.head.us strong { color: var(--accent); }
/* the last row's cell closes the box: rows aren't wrapped in their own
   element (the whole table is a flat CSS grid, see above), so the last
   .vc.us in DOM order is also the last cell of the last row - the same
   trick .head.us uses for the top edge, mirrored for the bottom. Without
   this the accent frame was open on one side, which is the bug this fixes. */
[data-slide="landscape"] .vc.us:last-child { box-shadow: inset 2px 0 0 var(--accent), inset -2px 0 0 var(--accent),
                                                         inset 0 -2px 0 var(--accent); }
[data-slide="landscape"] .vc.val.us svg { color: var(--accent); }
[data-slide="landscape"] .vc.val.us.yes .word { color: var(--accent); }

[data-slide="landscape"] .map-caption { font-size: 0.82rem; line-height: 1.5; max-width: none;
                                        color: var(--fg-muted); margin: 0.9rem 0 0; }
[data-slide="landscape"] .map-caption strong { color: var(--fg); }

/* the appendix deep link: quiet accent, same weight as the caption around it */
[data-slide="landscape"] .appx-link { color: var(--accent); text-decoration: none;
                                      border-bottom: 1px solid rgb(var(--accent-rgb) / 0.4); }
[data-slide="landscape"] .appx-link:hover { border-bottom-color: var(--accent); }

[data-slide="landscape"] .source-note { margin-top: 0.45rem; }

@media (max-height: 780px) {
  [data-slide="landscape"] .vc { padding: 0.38rem 0.65rem; }
  [data-slide="landscape"] .vc.head { padding: 0.5rem 0.65rem; }
  [data-slide="landscape"] .map-caption { margin-top: 0.6rem; }
}

@media (max-width: 760px) {
  [data-slide="landscape"] .versus { grid-template-columns: 1fr 1fr 1fr 1fr; }
  [data-slide="landscape"] .vc.head em { display: none; }
  [data-slide="landscape"] .vc.lbl { font-size: 0.7rem; }
}