/* jslc-ui.css — JSLC and Conquer content pages (Briefing, Intel, Factions) on the Cobalt kit.
 * Load order: /cobalt/cobalt-tokens.css, /cobalt/cobalt-ui.css, the page's own CSS, then this file.
 * Grey accent; glass 62% with a 12px blur for chrome; engaged controls invert (solid fill, paper text);
 * compact controls on a mouse, 44px on touch; nothing under 11px. Owner rulings 2026-10-03..05.
 */
:root, :root[data-theme="light"] {
  --cobalt: #374151; --link: #374151; --accent: #374151; --accent-subtle: rgba(55,65,81,.09); --on-accent: #f6f7fa;
  --rule: #9ca3af; --muted: #4b5563;
  --glass: rgba(246,247,250,.62); --glass-strong: rgba(246,247,250,.92); --glass-line: rgba(17,26,45,.14);
  --blur: blur(12px) saturate(140%);
  --scrim: rgba(17,26,45,.32);
  --fs-label: 11px;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --cobalt: #d1d5db; --link: #d1d5db; --accent: #d1d5db; --accent-subtle: rgba(209,213,219,.12); --on-accent: #0b1324;
  --rule: #6b7280; --muted: #b6bfcf;
  --glass: rgba(11,19,36,.62); --glass-strong: rgba(11,19,36,.92); --glass-line: rgba(243,246,255,.14);
  --scrim: rgba(0,0,0,.45);
} }
:root[data-theme="dark"] {
  --cobalt: #d1d5db; --link: #d1d5db; --accent: #d1d5db; --accent-subtle: rgba(209,213,219,.12); --on-accent: #0b1324;
  --rule: #6b7280; --muted: #b6bfcf;
  --glass: rgba(11,19,36,.62); --glass-strong: rgba(11,19,36,.92); --glass-line: rgba(243,246,255,.14);
  --scrim: rgba(0,0,0,.45);
}

/* Controls: compact on a mouse, 44px on touch. */
:root { --g-ctl: 28px; }
@media (pointer: coarse) { :root { --g-ctl: 44px; } }

/* Engaged controls invert their text: solid fill, paper-colour text. */
[aria-pressed="true"], [aria-current="page"], [aria-current="true"], [aria-selected="true"], .is-engaged {
  background: var(--cobalt) !important; border-color: var(--cobalt) !important; color: var(--on-accent) !important;
}

/* Share control: a line icon, quiet until hovered. */
.g-share, .g-x {
  position: relative; display: inline-grid; place-items: center; flex: none;
  width: var(--g-ctl); height: var(--g-ctl); min-height: 0; padding: 0; margin: 0;
  border: 0; border-radius: var(--r-ctl, 5px); background: transparent; color: var(--muted); cursor: pointer;
}
.g-share:hover, .g-x:hover { background: var(--accent-subtle); color: var(--ink); }
.g-share::after, .g-x::after { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
.g-share:focus-visible, .g-x:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 2px; }
.g-share .c-ico, .g-x .c-ico { width: 16px; height: 16px; }
/* The close is a line icon, never a glyph in a circle; its touch region is 44px everywhere. */
.g-x { width: 44px; height: 44px; margin: -8px -8px -8px 0; }

/* The sheet: bottom sheet on a phone, centred 520px card on a desktop (geometry from cobalt-ui.css). */
/* A sheet holds reading text with quiet sublines, so it takes the strong glass (92%) to hold 4.5:1 over any page. */
.c-sheet.g-sheet { background: var(--glass-strong); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); z-index: 70; }
.c-scrim { z-index: 69; }
.g-sheet .c-shd { align-items: center; }
.g-sheet .c-ttl { font-size: 15px; }
.g-acts, .c-shd > .g-acts { display: flex; align-items: center; gap: 2px; flex: none; }
@media (prefers-reduced-transparency: reduce) { .c-sheet.g-sheet { background: var(--glass-strong); -webkit-backdrop-filter: none; backdrop-filter: none; } }
@media (prefers-reduced-motion: reduce) { .c-sheet, .c-scrim, .c-toast { transition: none !important; } }

/* The card body (shared by the sheet and the game's Controls overlay). */
.g-howto { max-width: none; margin: 0; padding: 0; border-radius: 0; box-shadow: none; background: none; }
.g-howto .g-steps { margin: 0; padding: 0; list-style: none; }
.g-howto .c-step { grid-template-columns: 20px 1fr; padding: 9px 0; }
.g-howto .c-step .c-ico { width: 16px; height: 16px; margin-top: 2px; color: var(--muted); }
.g-howto .c-step b { font-size: 13px; line-height: 1.35; }
.g-howto .c-step small { font-size: 11.5px; line-height: 1.45; }
.g-howto .c-keys { margin: 10px 0 2px; line-height: 2; }
.g-howto .c-keys .c-label { margin-right: 4px; }
.g-howto .c-kbd { font-size: 11px; }
.g-howto .g-blk { padding: 10px 0 2px; border-top: 1px solid var(--line-soft); margin-top: 8px; }
.g-howto .g-blk p { margin: 3px 0 0; font-size: 12.5px; line-height: 1.5; }
.c-label { font-size: 11px; letter-spacing: .06em; }

/* Rows: bold lede, quiet subline. */
.g-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: var(--g-ctl); padding: 8px 0; border: 0; border-bottom: 1px solid var(--line-soft); background: none; color: var(--ink); text-align: left; text-decoration: none; cursor: pointer; font: inherit; }
.g-row > span { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.g-row b { font-size: 13px; }
.g-row small { color: var(--muted); font-size: 11px; }
.g-row:hover { background: var(--accent-subtle); }
.g-row .c-ico { color: var(--muted); }

.c-toast { font-size: 12px; z-index: 90; }