/* Signal for the holding page: tokens.css, base.css (font self-hosted, live dot left out because nothing here is live),
   then button.css, play-button.css and show-card.css, copied unchanged from design-system-signal (7 Nov 2026). */

/* Signal tokens, generated from tokens.json (the published Signal design system, 7 Nov 2026).
   Night is the default theme. Day is for print, email and long reading:
   set data-theme="day" on <html>, or it applies automatically when printing. */

:root,
[data-theme="night"] {
  color-scheme: dark;
  /* Colour */
  --ground: #000000;
  --panel: #111111;
  --scrim: rgba(0, 0, 0, 0.8);
  --ink: #ffffff;
  --ink-muted: #cccccc;
  --ink-subtle: #999999;
  --rule: #4c4c4c;
  --live: #e81717;
  --on-live: #ffffff;
  --on-ink: var(--ground);
  --focus: var(--ink);

  /* Type families */
  --font-condensed: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;

  /* Type scale: --type-<style> is a font shorthand; letter-spacing where the style sets one */
  --type-display: 700 64px/0.92 var(--font-condensed);
  --type-display-size: 64px;
  --type-display-tracking: -0.5px;
  --type-title-lg: 700 24px/28px var(--font-condensed);
  --type-title-lg-size: 24px;
  --type-title: 700 22px/24px var(--font-condensed);
  --type-title-size: 22px;
  --type-title-sm: 700 18px/20px var(--font-condensed);
  --type-title-sm-size: 18px;
  --type-label: 700 16px/18px var(--font-condensed);
  --type-label-size: 16px;
  --type-body: 400 16px/22.4px var(--font-condensed);
  --type-body-size: 16px;
  --type-body-sm: 400 14px/16px var(--font-condensed);
  --type-body-sm-size: 14px;
  --type-body-sm-tracking: 0.1px;
  --type-meta: 700 12px/14px var(--font-condensed);
  --type-meta-size: 12px;
  --type-caption: 400 12px/18px var(--font-condensed);
  --type-caption-size: 12px;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-20: 80px;

  /* Radius */
  --radius-0: 0;
  --radius-sm: 4px;
  --radius-round: 50%;

  /* Shadow */
  --shadow-none: none;
}

[data-theme="day"] {
  color-scheme: light;
  --ground: #ffffff;
  --panel: #f1f1f1;
  --scrim: rgba(255, 255, 255, 0.85);
  --ink: #000000;
  --ink-muted: #4c4c4c;
  --ink-subtle: #666666;
  --rule: #cccccc;
  --live: #e81717;
  --on-live: #ffffff;
  --on-ink: var(--ground);
  --focus: var(--ink);
}

@media print {
  :root {
    --ground: #ffffff;
    --panel: #f1f1f1;
    --scrim: rgba(255, 255, 255, 0.85);
    --ink: #000000;
    --ink-muted: #4c4c4c;
    --ink-subtle: #666666;
    --rule: #cccccc;
    --live: #e81717;
    --on-live: #ffffff;
    --on-ink: var(--ground);
    --focus: var(--ink);
  }
}

/* Signal base, with the Google Fonts @import replaced by self-hosted files (SIL Open Font License, see fonts/OFL.txt). */
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/barlow-condensed-400-latin.woff2") format("woff2")}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/barlow-condensed-700-latin.woff2") format("woff2")}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--font-condensed);font-size:16px;line-height:22.4px}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* Button. Needs tokens.css and base.css. */
/* Button */
.sg-btn{display:inline-flex;align-items:center;gap:var(--space-1);height:28px;padding:5px 10px;box-sizing:border-box;border:1px solid var(--ink);border-radius:var(--radius-0);background:var(--ink);color:var(--on-ink);font:700 14px/16px var(--font-condensed);text-transform:uppercase;cursor:pointer;text-decoration:none}
.sg-btn:hover{background:var(--ground);color:var(--ink)}
.sg-btn--outline{background:transparent;color:var(--ink);border-color:var(--ink-subtle)}
.sg-btn--outline:hover{border-color:var(--ink)}
.sg-btn--ghost{background:transparent;color:var(--ink);border-color:transparent;padding-left:0;padding-right:0}
.sg-btn--ghost:hover{text-decoration:underline;text-underline-offset:4px}
.sg-btn--lg{height:44px;padding:13px 24px;font-size:16px;line-height:18px}
.sg-btn[disabled]{opacity:.4;cursor:not-allowed}

/* Play button. Needs tokens.css and base.css. */
/* Play button */
.sg-play{display:inline-grid;place-items:center;width:48px;height:48px;padding:0;background:var(--ink);border:0;border-radius:var(--radius-0);cursor:pointer}
.sg-play::before{content:"";border-left:16px solid var(--on-ink);border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:4px}
.sg-play[aria-pressed="true"]::before{border:0;width:14px;height:18px;margin:0;background:linear-gradient(90deg,var(--on-ink) 0 5px,transparent 5px 9px,var(--on-ink) 9px)}
.sg-play--sm{width:28px;height:28px}
.sg-play--sm::before{border-left-width:10px;border-top-width:6px;border-bottom-width:6px;margin-left:2px}
.sg-play--sm[aria-pressed="true"]::before{width:10px;height:12px;background:linear-gradient(90deg,var(--on-ink) 0 3px,transparent 3px 7px,var(--on-ink) 7px)}

/* Show card. Needs tokens.css, base.css and play-button.css. */
/* Show card */
.sg-card{display:block;color:inherit;text-decoration:none}
.sg-card__media{position:relative;aspect-ratio:1;background:var(--panel);border:1px solid var(--rule);overflow:hidden}
.sg-card__media img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1)}
.sg-card:hover .sg-card__media img{filter:none}
.sg-card__media .sg-play{position:absolute;left:0;bottom:0}
.sg-card__body{padding:var(--space-2) 0}
.sg-card__title{font:700 18px/20px var(--font-condensed);text-transform:uppercase;margin:0}
.sg-card__meta{font:700 12px/14px var(--font-condensed);text-transform:uppercase;color:var(--ink-subtle);margin:var(--space-1) 0 0}
.sg-card__desc{font:400 14px/16px var(--font-condensed);letter-spacing:.1px;color:var(--ink-muted);margin:var(--space-2) 0 0}