/* Signal Desk / Editorial Console UI Kit
   Portable, dependency-free, and scoped under .sd. */

.sd {
  --sd-paper: #f3f0e8;
  --sd-surface: #fff;
  --sd-panel: #ece9df;
  --sd-console: #111719;
  --sd-ink: #151c1f;
  --sd-muted: #4d585b;
  --sd-line: #c9ccc5;
  --sd-line-strong: #aeb4ad;
  --sd-acid: #d7ff35;
  --sd-alert: #e5472e;
  --sd-excluded: #5b3832;
  --sd-excluded-line: #c92f22;
  --sd-ok: #087a55;
  --sd-warn: #8a5800;
  --sd-link: #1769aa;
  /* Zero webfonts on purpose. The timeline is read on first paint and a CJK
     webfont is 4-8 MB even subsetted; every one of these faces is already on
     the device, so text renders in the first frame with no FOUT and no
     network round-trip. system-ui leads so each OS uses its own UI face
     (PingFang SC / HarmonyOS Sans / Microsoft YaHei UI), and the rest are
     named explicitly for the systems whose system-ui is a Latin face. */
  --sd-sans: system-ui, -apple-system, "PingFang SC", "HarmonyOS Sans SC",
             "Source Han Sans SC", "Noto Sans CJK SC", "Noto Sans SC",
             "Microsoft YaHei UI", "Microsoft YaHei", "WenQuanYi Micro Hei",
             Arial, sans-serif;
  /* Monospace is for digits and shard ids; the CJK fallbacks are appended so a
     Chinese label inside a mono block does not drop to a serif last resort. */
  --sd-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Roboto Mono",
             monospace, "PingFang SC", "Microsoft YaHei", sans-serif;
  box-sizing: border-box;
  margin: 0;
  min-height: 100%;
  color: var(--sd-ink);
  background: radial-gradient(circle at 80% 5%, #fff 0, transparent 24%), var(--sd-paper);
  font-family: var(--sd-sans);
}

.sd *, .sd *::before, .sd *::after { box-sizing: border-box; }
.sd a { color: inherit; }
.sd button, .sd input, .sd select { border: 0; border-radius: 0; font: 600 12px var(--sd-sans); }
.sd-frame { max-width: 1440px; margin: auto; padding: 22px 30px 50px; }

/* 1. Control-room header */
.sd-console {
  position: sticky; top: 0; z-index: 10;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px;
  margin: 0 -30px; padding: 9px 30px;
  border-bottom: 3px solid var(--sd-acid);
  background: var(--sd-console); color: #f7f7f2;
  font: 700 10px/1.2 var(--sd-mono); letter-spacing: .06em;
}
.sd-console__brand::before {
  content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px;
  border-radius: 50%; background: var(--sd-alert);
}
.sd-console__tag { margin-left: 7px; padding: 3px 5px; background: var(--sd-acid); color: #111; font-size: 8px; }
.sd-tabs { display: flex; }
.sd-tabs a { padding: 8px 12px; border-left: 1px solid #354042; color: #c3ccca; text-decoration: none; }
.sd-tabs a:last-child { border-right: 1px solid #354042; }
.sd-tabs a[aria-current="page"], .sd-tabs a:hover { background: var(--sd-acid); color: #111; }
.sd-console__meta { color: #aab3b2; text-align: right; }

/* 2. Editorial hero */
.sd-kicker {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 12px; border-bottom: 1px solid var(--sd-ink);
  font: 700 11px/1.2 var(--sd-mono); letter-spacing: .16em;
}
.sd-live { display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--sd-alert); box-shadow: 0 0 0 4px #e5472e22; }
.sd-hero { display: grid; grid-template-columns: 1fr 360px; gap: 38px; align-items: end; padding: 34px 0 27px; }
.sd-hero h1 { margin: 0; font-size: clamp(54px, 7vw, 104px); font-weight: 900; line-height: .8; letter-spacing: -.07em; }
.sd-outline { color: var(--sd-paper); font-style: normal; text-shadow: 1px 0 var(--sd-ink), -1px 0 var(--sd-ink), 0 1px var(--sd-ink), 0 -1px var(--sd-ink); }
@supports (-webkit-text-stroke: 2px #000) {
  .sd-outline { color: transparent; text-shadow: none; -webkit-text-stroke: 2px var(--sd-ink); }
}
.sd-hero p { max-width: 650px; margin: 20px 0 0; font-size: 14px; line-height: 1.55; }
.sd-clock { display: flex; flex-direction: column; padding: 15px 0 15px 22px; border-left: 1px solid var(--sd-ink); }
.sd-clock span, .sd-clock small { color: var(--sd-muted); font: 700 10px/1.4 var(--sd-mono); letter-spacing: .1em; }
.sd-clock strong { margin: 8px 0; font: 800 20px/1.2 var(--sd-mono); }

/* 3. Flat dashboard grid */
.sd-dashboard { margin: 18px 0 24px; border: 1px solid var(--sd-line-strong); background: var(--sd-panel); }
.sd-dashboard__head { display: flex; justify-content: space-between; padding: 9px 12px; border-bottom: 1px solid var(--sd-line-strong); font: 800 10px var(--sd-mono); letter-spacing: .12em; }
.sd-dashboard__head em { color: var(--sd-ok); font-style: normal; }
.sd-metrics { display: grid; grid-template-columns: repeat(4, 1fr); }
.sd-metric { padding: 13px 14px; border-right: 1px solid var(--sd-line-strong); }
.sd-metric:last-child { border-right: 0; }
.sd-metric strong { display: block; font: 900 27px/1 var(--sd-mono); }
.sd-metric span { display: block; margin-top: 5px; color: var(--sd-muted); font: 700 9px var(--sd-mono); letter-spacing: .08em; }

/* 4. Controls and semantic status */
.sd-controls { display: grid; grid-template-columns: auto 1fr 220px; gap: 8px; padding: 9px; background: var(--sd-ink); }
.sd-controls button, .sd-controls input, .sd-controls select { min-width: 0; padding: 9px 11px; background: #fff; color: #111; }
.sd-controls button { cursor: pointer; background: #2a3336; color: #fff; }
.sd-controls button[aria-pressed="true"] { background: var(--sd-acid); color: #111; }
.sd-link { color: var(--sd-link) !important; font: 800 9px var(--sd-mono); text-decoration: none; }
.sd-link:hover { text-decoration: underline; }
.sd-badge { display: inline-block; padding: 3px 8px; border-radius: 999px; font: 800 9px var(--sd-mono); white-space: nowrap; }
.sd-badge--ok { background: #dff4ea; color: var(--sd-ok); }
.sd-badge--warn { background: #fff0d2; color: var(--sd-warn); }
.sd-badge--alert { background: #fee8e4; color: #a82016; }
.sd-badge--acid { background: var(--sd-acid); color: #263000; }
.sd-badge--muted { background: #edf0f4; color: #555f70; }

/* 5. Dense timeline */
.sd-stream { margin-top: 20px; border-top: 4px solid var(--sd-ink); }
.sd-stream__head { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--sd-ink); font: 800 10px var(--sd-mono); letter-spacing: .14em; }
.sd-row { display: grid; grid-template-columns: 178px 160px 1fr 40px; gap: 13px; min-height: 58px; padding: 8px 0; border-bottom: 1px solid var(--sd-line); }
.sd-time { position: relative; min-height: 42px; padding-left: 18px; color: #354044; font: 700 11px/1.4 var(--sd-mono); }
.sd-time span { display: block; color: var(--sd-muted); font-size: 8px; letter-spacing: .08em; }
.sd-time::before { content: ""; position: absolute; left: 0; top: 4px; z-index: 1; width: 9px; height: 9px; border: 2px solid var(--sd-ink); border-radius: 50%; background: var(--sd-acid); }
.sd-time::after { content: ""; position: absolute; left: 4px; top: 13px; bottom: -20px; width: 1px; background: #aeb3ad; }
.sd-row:last-child .sd-time::after { display: none; }
.sd-source { font-size: 12px; font-weight: 800; line-height: 1.25; }
.sd-source small { display: block; margin-top: 2px; color: var(--sd-muted); font: 700 10px/1.4 var(--sd-mono); }
.sd-story a { font-size: 15px; font-weight: 760; line-height: 1.18; text-decoration: none; }
.sd-story a:hover { text-decoration: underline; text-decoration-color: #a9ce00; text-decoration-thickness: 3px; }
.sd-story p { max-width: 900px; margin: 4px 0 0; color: #596366; font-size: 11px; line-height: 1.32; }
.sd-story--excluded a { color: var(--sd-excluded); text-decoration: line-through 2px var(--sd-excluded-line); }
.sd-rank { color: var(--sd-muted); text-align: right; font: 700 9px var(--sd-mono); }

/* 6. Source/status cards */
.sd-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sd-card { min-width: 0; padding: 13px; border: 1px solid var(--sd-line); background: var(--sd-surface); }
.sd-card__head { display: grid; grid-template-columns: 40px 1fr auto; gap: 9px; align-items: center; }
.sd-mark { display: grid; place-items: center; width: 40px; height: 40px; background: var(--sd-ink); color: var(--sd-acid); font: 900 10px var(--sd-mono); }
.sd-card h3 { margin: 0; font-size: 13px; }
.sd-card small { color: var(--sd-muted); font: 700 8px var(--sd-mono); }
.sd-card p { min-height: 30px; color: #596366; font-size: 10px; line-height: 1.5; }
.sd-card__badges { display: flex; flex-wrap: wrap; gap: 4px; padding-top: 8px; border-top: 1px solid var(--sd-line); }
.sd-section { margin-top: 28px; }
.sd-section .sd-card-grid { margin-top: 12px; }

@media (max-width: 800px) {
  .sd-frame { padding: 16px 13px 36px; }
  .sd-console { grid-template-columns: 1fr; margin: 0 -13px; padding: 9px 13px; }
  .sd-console__meta { display: none; }
  .sd-tabs { overflow-x: auto; }
  .sd-hero { grid-template-columns: 1fr; }
  .sd-clock { padding-left: 0; border-top: 1px solid; border-left: 0; }
  .sd-metrics { grid-template-columns: repeat(2, 1fr); }
  .sd-metric:nth-child(2n) { border-right: 0; }
  .sd-metric:nth-child(n + 3) { border-top: 1px solid var(--sd-line-strong); }
  .sd-controls { grid-template-columns: 1fr; }
  .sd-row { grid-template-columns: 145px 1fr 30px; }
  .sd-time { grid-column: 1; grid-row: 1 / 3; }
  .sd-source { grid-column: 2; grid-row: 1; }
  .sd-story { grid-column: 2 / 4; grid-row: 2; }
  .sd-rank { grid-column: 3; grid-row: 1; }
  .sd-card-grid { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .sd-row { grid-template-columns: 1fr auto; gap: 6px 10px; }
  .sd-time { grid-column: 1; grid-row: 1; min-height: 0; padding-left: 18px; }
  .sd-time::after { display: none; }
  .sd-source { grid-column: 1 / 3; grid-row: 2; padding-left: 18px; }
  .sd-story { grid-column: 1 / 3; grid-row: 3; padding-left: 18px; }
  .sd-rank { grid-column: 2; grid-row: 1; }
}