/* AEGIS — signature Default skin (2026-10-01, Claude).
 *
 * The Default skin was the family's navy-and-teal dashboard. It now carries AEGIS's own world — deciding what to protect
 * and how to prepare, with limited resources and under uncertainty — in the language of civil-defence signage:
 *
 *   light   Shelter Signage — concrete-grey paper, a black-and-safety-yellow hazard band under the header, olive drab
 *           for what is ready, stencil numerals, grid references (A1, B2 …) on the cards like squares on a planning map.
 *   dark    Red Light — the command post at night: black olive, everything lit in dim red so eyes stay adapted to the
 *           dark, a radar sweep turning slowly behind the opening panel.
 *
 * Saira Stencil One for display, Saira (variable width) to read, Share Tech Mono for readings; Hangul stays in
 * Pretendard, set heavier. The five branch colours (Argus … Talos) keep their meaning. Ember is untouched: everything
 * here is scoped to html without data-skin="ember". Fonts are linked from index.html.
 */

html:not([data-skin="ember"]) body {
  --ag-concrete: #e6e7e1;
  --ag-slab: #f3f3ee;
  --ag-black: #131512;
  --ag-ink-2: #3f453b;
  --ag-mute: #6c7266;
  --ag-rule: #c7cabe;
  --ag-yellow: #ffc300;
  --ag-olive: #4d5b23;
  --ag-olive-2: #6e7f35;
  --ag-red: #c9301e;
  --ag-stencil: "Saira Stencil One", "Pretendard Variable", Pretendard, sans-serif;
  --ag-text: "Saira", "Pretendard Variable", Pretendard, "Noto Sans KR", sans-serif;
  --ag-mono: "Share Tech Mono", "Pretendard Variable", ui-monospace, monospace;
  --ag-hazard: repeating-linear-gradient(-45deg, var(--ag-yellow) 0 14px, var(--ag-black) 14px 28px);
  --paper: var(--ag-concrete); --card: var(--ag-slab); --ink: var(--ag-black); --muted: var(--ag-mute); --line: var(--ag-rule);
  --blue: var(--ag-olive); --blue-soft: #e3e7cf; --teal: var(--ag-olive); --navy-900: var(--ag-black); --navy-950: #0b0c0a;
  background:
    linear-gradient(rgba(19, 21, 18, .045) 1px, transparent 1px) 0 0 / 96px 96px,
    linear-gradient(90deg, rgba(19, 21, 18, .045) 1px, transparent 1px) 0 0 / 96px 96px,
    var(--ag-concrete);
  color: var(--ag-black);
  font-family: var(--ag-text);
}
html:not([data-skin="ember"]) { background: var(--ag-concrete, #e6e7e1); }
html:not([data-skin="ember"]) body.dark {
  --ag-concrete: #0e0c0b;
  --ag-slab: #171311;
  --ag-black: #f1c9c1;
  --ag-ink-2: #d79b90;
  --ag-mute: #a0726a;
  --ag-rule: #3a2420;
  --ag-yellow: #ff4a36;
  --ag-olive: #ff5a45;
  --ag-olive-2: #ff8573;
  --ag-red: #ff5a45;
  --ag-hazard: repeating-linear-gradient(-45deg, #ff4a36 0 14px, #160e0c 14px 28px);
  --paper: var(--ag-concrete); --card: var(--ag-slab); --ink: var(--ag-black); --muted: var(--ag-mute); --line: var(--ag-rule);
  --blue: var(--ag-olive); --blue-soft: #2a1612; --teal: var(--ag-olive); --navy-900: #090706; --navy-950: #050403;
  background:
    linear-gradient(rgba(255, 74, 54, .05) 1px, transparent 1px) 0 0 / 96px 96px,
    linear-gradient(90deg, rgba(255, 74, 54, .05) 1px, transparent 1px) 0 0 / 96px 96px,
    var(--ag-concrete);
}
html:not([data-skin="ember"]):has(body.dark) { background: #0e0c0b; }
html:not([data-skin="ember"]) ::selection { background: var(--ag-yellow); color: #131512; }

/* the header: a black bar on a hazard band */
html:not([data-skin="ember"]) .topbar {
  background: var(--navy-900) !important; color: #f3f3ee; border-bottom: 0 !important;
}
html:not([data-skin="ember"]) .topbar::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 7px; background: var(--ag-hazard); pointer-events: none; }
html:not([data-skin="ember"]) body.dark .topbar { color: var(--ag-black); }
html:not([data-skin="ember"]) .brand strong { font-family: var(--ag-stencil); font-weight: 400; font-size: 22px; letter-spacing: .14em; }
html:not([data-skin="ember"]) .brand em { font-family: var(--ag-mono); color: var(--ag-yellow); letter-spacing: .12em; }
html:not([data-skin="ember"]) .brand-mark { transform: none; width: 26px; height: 26px; align-items: stretch; gap: 0; border: 2px solid var(--ag-yellow); border-radius: 50% 50% 46% 46% / 30% 30% 70% 70%; padding: 4px; }
html:not([data-skin="ember"]) .brand-mark span { width: 100%; border-radius: 0; background: var(--ag-yellow) !important; opacity: 1 !important; height: auto !important; }
html:not([data-skin="ember"]) .brand-mark span:not(:nth-child(2)) { display: none; }
html:not([data-skin="ember"]) .topnav a { font-family: var(--ag-text); font-stretch: 85%; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: 12.5px; color: #b9bdb1; }
html:not([data-skin="ember"]) body.dark .topnav a { color: #a0726a; }
html:not([data-skin="ember"]) .topnav a:hover, html:not([data-skin="ember"]) .topnav a.active { color: var(--ag-yellow); }
html:not([data-skin="ember"]) .topnav a.active::after { background: var(--ag-yellow); height: 3px; }
html:not([data-skin="ember"]) .topnav { gap: 18px; }
html:not([data-skin="ember"]) .topbar .riscon-status { margin-left: 8px; border-radius: 0; border-color: var(--ag-yellow); color: var(--ag-yellow); opacity: 1; font-family: var(--ag-mono); }
/* the public-screen badge kept running into the last section's name: on narrower screens it shows only its icon */
@media (max-width: 1560px) { html:not([data-skin="ember"]) .topbar .riscon-status > span { display: none; } html:not([data-skin="ember"]) .topbar .riscon-status { padding: 2px 6px; } }
html:not([data-skin="ember"]) :is(.icon-button, .full-menu-button) { border-radius: 0; border-color: rgba(255, 195, 0, .4); }

/* type */
html:not([data-skin="ember"]) :is(h1, h2, h3, .section-title) { font-family: var(--ag-text); font-stretch: 82%; font-weight: 800; letter-spacing: -.01em; text-transform: none; }
html:not([data-skin="ember"]):lang(ko) :is(h1, h2, h3, .section-title) { font-family: "Pretendard Variable", Pretendard, sans-serif; font-weight: 800; }
html:not([data-skin="ember"]) .eyebrow { font-family: var(--ag-mono); letter-spacing: .14em; color: var(--ag-olive); }
html:not([data-skin="ember"]) body.dark .eyebrow { color: var(--ag-red); }
html:not([data-skin="ember"]) .section-title { text-transform: uppercase; letter-spacing: .02em; display: flex; align-items: center; gap: 12px; }
html:not([data-skin="ember"]) .section-title::before { content: ""; width: 14px; height: 14px; background: var(--ag-yellow); box-shadow: 3px 3px 0 var(--ag-black); flex: none; }

/* the opening panel: a shelter sign — black, the yellow band on its top edge, stencil numbers */
html:not([data-skin="ember"]) .hero-panel {
  position: relative; isolation: isolate; overflow: hidden; border-radius: 0 !important; box-shadow: none !important;
  background:
    linear-gradient(rgba(255, 195, 0, .06) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgba(255, 195, 0, .06) 1px, transparent 1px) 0 0 / 32px 32px,
    #131512 !important;
  border-top: 10px solid transparent; border-image: var(--ag-hazard) 10 0 0 0 / 10px 0 0 0;
}
html:not([data-skin="ember"]) body.dark .hero-panel {
  background:
    linear-gradient(rgba(255, 74, 54, .07) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgba(255, 74, 54, .07) 1px, transparent 1px) 0 0 / 32px 32px,
    #0a0706 !important;
  color: var(--ag-black);
}
/* in the red-light room a radar sweep turns behind the panel */
html:not([data-skin="ember"]) body.dark .hero-panel::before {
  content: ""; position: absolute; z-index: -1; width: 900px; height: 900px; right: -260px; top: 50%; margin-top: -450px; border-radius: 50%;
  background:
    conic-gradient(from 0deg, rgba(255, 74, 54, .28), rgba(255, 74, 54, 0) 60deg, transparent 360deg),
    repeating-radial-gradient(circle, transparent 0 89px, rgba(255, 74, 54, .16) 89px 90px);
  animation: aegis-sweep 9s linear infinite;
}
@keyframes aegis-sweep { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { html:not([data-skin="ember"]) body.dark .hero-panel::before { animation: none; } }
html:not([data-skin="ember"]) .hero-panel h1 { font-family: var(--ag-text); font-stretch: 75%; font-weight: 800; text-transform: uppercase; letter-spacing: 0; line-height: .98; color: #f3f3ee; font-size: clamp(40px, 4.6vw, 68px); }
html:not([data-skin="ember"]):lang(ko) .hero-panel h1 { text-transform: none; line-height: 1.15; }
html:not([data-skin="ember"]) body.dark .hero-panel h1 { color: #ffd2ca; text-shadow: 0 0 22px rgba(255, 74, 54, .45); }
html:not([data-skin="ember"]) .hero-panel .eyebrow { color: var(--ag-yellow); }
html:not([data-skin="ember"]) .hero-stats { align-self: start; height: max-content; border-radius: 0 !important; background: rgba(255, 195, 0, .35) !important; border: 2px solid var(--ag-yellow) !important; }
html:not([data-skin="ember"]) body.dark .hero-stats { background: rgba(255, 74, 54, .35) !important; border-color: #ff4a36 !important; }
html:not([data-skin="ember"]) .hero-stats > div { background: #131512 !important; }
html:not([data-skin="ember"]) body.dark .hero-stats > div { background: #0a0706 !important; }
html:not([data-skin="ember"]) .hero-stats dt { font-family: var(--ag-mono); color: #b9bdb1 !important; text-transform: uppercase; }
html:not([data-skin="ember"]) .hero-stats dd { font-family: var(--ag-stencil); font-weight: 400; font-size: 36px; letter-spacing: .02em; color: var(--ag-yellow); }
html:not([data-skin="ember"]) body.dark .hero-stats dd { color: #ff6b58; }
html:not([data-skin="ember"]) .hero-panel .button { border-radius: 0; font-family: var(--ag-text); font-stretch: 85%; text-transform: uppercase; letter-spacing: .06em; }
html:not([data-skin="ember"]) body:not(.dark) .hero-panel .button:not(.ghost):not(.subtle) { background: var(--ag-yellow); color: #131512; border-color: var(--ag-yellow); }
html:not([data-skin="ember"]) body.dark .hero-panel .button:not(.ghost):not(.subtle) { background: #ff4a36; border-color: #ff4a36; color: #0a0706; box-shadow: none; }
html:not([data-skin="ember"]) .hero-panel .button.ghost { color: #f3f3ee; border-color: rgba(243, 243, 238, .4); background: transparent; }
html:not([data-skin="ember"]) .hero-fresh { font-family: var(--ag-mono); color: #b9bdb1; }

/* cards are signs bolted to a wall: square, a heavy rule, a grid reference in the corner */
html:not([data-skin="ember"]) :is(.status-tile, .attention-card, .entry-card, .branch-card, .panel) { border-radius: 0 !important; box-shadow: none; }
html:not([data-skin="ember"]) :is(.attention-card, .branch-card, .entry-card, .status-tile) { position: relative; background: var(--ag-slab); border: 2px solid var(--ag-black); }
html:not([data-skin="ember"]) body.dark :is(.attention-card, .branch-card, .entry-card, .status-tile) { border-color: var(--ag-rule); }
html:not([data-skin="ember"]) .attention-card { border-left: 2px solid var(--ag-black); box-shadow: inset 0 6px 0 var(--ag-yellow); }
html:not([data-skin="ember"]) body.dark .attention-card { border-left-color: var(--ag-rule); box-shadow: inset 0 3px 0 #ff4a36; }
html:not([data-skin="ember"]) .attention-card strong { font-family: var(--ag-stencil); font-weight: 400; font-size: 34px; letter-spacing: .02em; }
html:not([data-skin="ember"]) :is(.attention-grid, .branch-cards, .entry-grid) { counter-reset: aegis-grid; }
html:not([data-skin="ember"]) :is(.attention-card, .branch-card, .entry-card) { counter-increment: aegis-grid; }
html:not([data-skin="ember"]) :is(.attention-card, .branch-card, .entry-card)::after {
  content: counter(aegis-grid, upper-alpha) "-" counter(aegis-grid); position: absolute; top: 8px; right: 10px;
  font: 400 10px/1 var(--ag-mono); letter-spacing: .1em; color: var(--ag-mute);
}
html:not([data-skin="ember"]) .branch-card { border-top-width: 8px !important; }
html:not([data-skin="ember"]) .branch-code { font-family: var(--ag-stencil) !important; font-weight: 400 !important; font-size: 15px !important; letter-spacing: .14em !important; }
html:not([data-skin="ember"]) .branch-stats { font-family: var(--ag-mono); }
html:not([data-skin="ember"]) .attention-card:hover, html:not([data-skin="ember"]) .entry-card:hover, html:not([data-skin="ember"]) .branch-card:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--ag-black); }
html:not([data-skin="ember"]) body.dark :is(.attention-card, .entry-card, .branch-card):hover { box-shadow: 0 0 0 1px #ff4a36, 0 0 24px -8px #ff4a36; transform: none; }
html:not([data-skin="ember"]) .status-tile strong { font-family: var(--ag-stencil); font-weight: 400; }
html:not([data-skin="ember"]) .status-tile span { font-family: var(--ag-mono); }

html:not([data-skin="ember"]) :is(.button, .search-input, .select-input, .case-sort-trigger, .case-sort-shuffle) { border-radius: 0 !important; }
html:not([data-skin="ember"]) body:not(.dark) .button:not(.ghost):not(.subtle) { background: var(--ag-black); color: var(--ag-yellow); border-color: var(--ag-black); }
html:not([data-skin="ember"]) .principles-strip { border-top: 7px solid transparent; border-image: var(--ag-hazard) 7 0 0 0 / 7px 0 0 0; }
html:not([data-skin="ember"]) :is(.riscon-pill) { border-radius: 0 !important; }

/* every other box on the inner pages: square, on the slab colour */
html:not([data-skin="ember"]) .page :is(.panel, .issue-card, .library-toolbar, .connector-card, .ask-card, .detail-field, .relation-link, .stat-card, [class*="-card"], [class*="-panel"], [class*="toolbar"], [class*="chip"], [class*="badge"], [class*="tag"]) { border-radius: 0 !important; }
html:not([data-skin="ember"]) body:not(.dark) .panel { background: var(--ag-slab); }
html:not([data-skin="ember"]) .issue-card { border: 1px solid var(--ag-rule); box-shadow: inset 4px 0 0 var(--ag-olive); }
html:not([data-skin="ember"]) body.dark .issue-card { box-shadow: inset 3px 0 0 #ff4a36; }
html:not([data-skin="ember"]) .page-heading h1, html:not([data-skin="ember"]) .page > header h1 { font-size: clamp(34px, 3.4vw, 52px); }
@media (max-width: 700px) {
  html:not([data-skin="ember"]) .hero-stats dd { font-size: 26px; }
  html:not([data-skin="ember"]) .brand em { display: none; }
}