/* CloudPulse – AWS Weekly Digest
   One stylesheet for every page. No web fonts, no external assets, no JS.

   Design language: a systems/engineering log, not a marketing page. Data
   (numbers, dates, tags, section marks) is set in the system monospace
   stack; prose stays in the system sans stack. Structure is drawn with
   hairline rules and CSS-counter numbering instead of rounded cards, so
   colour is reserved for things that mean something (severity, the current
   target, the AWS brand rule) rather than decorating every block the same way.

   Colours are tokens; dark scheme overrides them under prefers-color-scheme.
   Contrast (WCAG 2.2) is verified by tools/contrast_check.py for both schemes. */

:root {
  color-scheme: light dark;

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --navy: #232f3e;
  --orange: #ff9900;

  --bg: #ffffff;
  --surface: #f4f6f8;
  --text: #16191f;
  --muted: #545b64;
  --border: #7c8ba3;
  --link: #0b5cad;
  --link-hover: #083f78;
  --focus: #0b5cad;

  --grid-dot: rgba(35, 47, 62, 0.07);

  --band-primary-bg: #e9eef5;
  --band-primary-text: #232f3e;
  --band-secondary-bg: #f4f6f8;
  --band-secondary-text: #16191f;

  --header-bg: var(--navy);
  --header-text: #ffffff;
  --header-muted: #c7ced6;
  --header-focus: var(--orange);
  --header-rule: rgba(255, 255, 255, 0.16);

  --chip-opex-bg: #e6edfb;       --chip-opex-text: #1d3f8f;
  --chip-security-bg: #fce8e8;   --chip-security-text: #9b1c1c;
  --chip-reliability-bg: #e5f3e9; --chip-reliability-text: #1b6431;
  --chip-performance-bg: #f1e7fc; --chip-performance-text: #6b21a8;
  --chip-cost-bg: #fff1dc;       --chip-cost-text: #8a4500;
  --chip-sustainability-bg: #e0f4f2; --chip-sustainability-text: #0e5c56;

  --anti-edge: #d13212;  --anti-label: #a8290e;
  --action-edge: #1d8102; --action-label: #176702;
  --tradeoff-edge: #687078; --tradeoff-label: #454c53;

  --four-bg: var(--navy);
  --four-text: #ffffff;
  --four-num: var(--orange);

  --share-bg: transparent;
  --share-border: #7d8998;
  --share-text: #0b5cad;
  --share-hover-bg: #e9f1fa;

  --radius: 2px;
  --measure: 46rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b0f16;
    --surface: #151c26;
    --text: #e6e9ed;
    --muted: #a9b2bc;
    --border: #516080;
    --link: #82bbff;
    --link-hover: #b3d5ff;
    --focus: #ffb84d;

    --grid-dot: rgba(255, 255, 255, 0.05);

    --band-primary-bg: #161f2e;
    --band-primary-text: #e6e9ed;
    --band-secondary-bg: #10161f;
    --band-secondary-text: #e6e9ed;

    --header-bg: #0e1520;
    --header-text: #ffffff;
    --header-muted: #b9c2cc;
    --header-rule: rgba(255, 255, 255, 0.1);

    --chip-opex-bg: #1c2a4a;        --chip-opex-text: #b0c8ff;
    --chip-security-bg: #3d1b1b;    --chip-security-text: #ffb8b8;
    --chip-reliability-bg: #15301e; --chip-reliability-text: #a3e3b4;
    --chip-performance-bg: #2d1a45; --chip-performance-text: #dcc0ff;
    --chip-cost-bg: #3a2810;        --chip-cost-text: #ffd08a;
    --chip-sustainability-bg: #0f3331; --chip-sustainability-text: #92e5dd;

    --anti-edge: #ff7a61;  --anti-label: #ff9d8a;
    --action-edge: #6dd04a; --action-label: #8ee06f;
    --tradeoff-edge: #8d98a3; --tradeoff-label: #c3cad1;

    --four-bg: #0e1520;

    --share-border: #6b7a8c;
    --share-text: #82bbff;
    --share-hover-bg: #16202c;
  }
}

/* ---- Base ---------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-wrap: break-word;
}

a { color: var(--link); text-underline-offset: 0.15em; }
a:hover { color: var(--link-hover); }

:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.05em 0.3em;
}

h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 0.5rem; text-wrap: balance; }

table { border-collapse: collapse; width: 100%; margin: 1rem 0; display: block; overflow-x: auto; }
th, td { border: 1px solid var(--border); padding: 0.4rem 0.6rem; text-align: left; vertical-align: top; }
th { background: var(--surface); font-family: var(--font-mono); font-size: 0.85em; }
td { font-variant-numeric: tabular-nums; }

.wrap { max-width: var(--measure); margin: 0 auto; padding: 0 1rem; }

.skip-link {
  position: absolute;
  left: 0.5rem;
  top: -3rem;
  background: var(--bg);
  color: var(--link);
  padding: 0.5rem 0.75rem;
  z-index: 10;
}
.skip-link:focus-visible { top: 0.5rem; }

/* ---- Site header: navy band + orange accent rule + status strip ----------- */

.site-header {
  background: var(--header-bg);
  color: var(--header-text);
  border-bottom: 3px solid var(--orange);
}
.site-header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  padding-top: 0.9rem;
  padding-bottom: 0.9rem;
}
.site-header a { color: var(--header-text); text-decoration: none; }
.site-header a:hover { color: var(--header-text); text-decoration: underline; text-decoration-color: var(--orange); }
.site-header :focus-visible { outline-color: var(--header-focus); }

.site-title { display: inline-flex; align-items: baseline; font-weight: 800; font-size: 1.2rem; letter-spacing: -0.01em; }
.site-title::before {
  content: "\258C";
  font-family: var(--font-mono);
  color: var(--orange);
  margin-right: 0.4em;
}
.site-subtitle { font-weight: 400; color: var(--header-muted); font-size: 0.95rem; margin-left: 0.5em; }

.site-nav {
  display: flex;
  gap: 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.site-nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; }

.status-strip { border-top: 1px solid var(--header-rule); }
.status-line {
  margin: 0;
  padding: 0.4rem 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  color: var(--header-muted);
  overflow-wrap: anywhere;
}

.page { padding-top: 1rem; padding-bottom: 2.5rem; }
.breadcrumb { margin: 0 0 1rem; font-size: 0.9rem; }
.breadcrumb a::before { content: "\2039 "; }

/* ---- Digest header --------------------------------------------------------- */

.digest-header {
  border-left: 3px solid var(--orange);
  padding: 0.2rem 0 0.2rem 1rem;
  margin: 0 0 1.75rem;
}
.kicker {
  margin: 0;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.digest-header h1 { font-size: clamp(1.6rem, 5vw, 2.2rem); font-weight: 800; letter-spacing: -0.01em; margin: 0.25rem 0 0.4rem; }
.dek { color: var(--muted); font-size: 1.1rem; margin: 0 0 0.25rem; }
.digest-header .meta { color: var(--muted); font-size: 0.95rem; margin: 0; }

/* ---- Section bands ---------------------------------------------------------
   Numbered with a real CSS counter (§1, §2…), so the mark encodes the
   document's actual structure instead of decorating it. */

.digest { counter-reset: band; }

.band {
  counter-increment: band;
  margin: 0 -1rem 2rem;
  padding: 1.25rem 1rem 0.25rem;
}
.band-primary {
  background-color: var(--band-primary-bg);
  background-image: radial-gradient(var(--grid-dot) 1px, transparent 1px);
  background-size: 15px 15px;
  color: var(--band-primary-text);
}
.band-secondary { background: var(--band-secondary-bg); color: var(--band-secondary-text); }
.band-title {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--orange);
  margin-bottom: 0.25rem;
}
.band-title::before { content: "\A7" counter(band) "  "; color: var(--muted); }

@media (min-width: 48rem) {
  .band { margin-left: 0; margin-right: 0; border-radius: var(--radius); padding-left: 1.5rem; padding-right: 1.5rem; }
}

/* ---- Items -----------------------------------------------------------------
   No cards: items are rows in a ledger, separated by a hairline rule. The
   only colour is on the item currently linked to (:target), so colour marks
   something real instead of decorating every row the same way. */

.item {
  border-top: 1px solid var(--border);
  border-left: 3px solid transparent;
  padding: 1.15rem 0 1.15rem 0.85rem;
  margin: 0;
  scroll-margin-top: 1rem;
}
.item:first-of-type { border-top: 0; }
.item:target { border-left-color: var(--orange); background: var(--surface); }

.item-header {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.85rem;
  align-items: start;
  margin-bottom: 0.6rem;
}
.item-num {
  grid-row: span 2;
  align-self: stretch;
  margin: 0;
  padding: 0.1rem 0.6rem 0 0;
  border-right: 1px solid var(--border);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.85rem;
  color: var(--muted);
}
.item:target .item-num { color: var(--orange); border-right-color: var(--orange); }
.item-title { font-size: 1.18rem; margin: 0.1rem 0 0.2rem; letter-spacing: -0.005em; }
.item-title a { color: inherit; text-decoration-color: var(--orange); }
.item-title a:hover { color: var(--link); }
.item-meta {
  margin: 0;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}
.service { font-weight: 600; }
.item p { margin: 0 0 0.75rem; }

/* ---- Well-Architected pillar tags ------------------------------------------
   Bracketed tokens, not pill badges: [COST OPTIMIZATION] reads like a build
   label rather than a chip in a marketing UI. */

.pillars {
  list-style: none;
  padding: 0;
  margin: 0.3rem 0 0.85rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.6rem;
}
.pillar {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--text);
}
.pillar::before { content: "["; }
.pillar::after { content: "]"; }
.pillar-operational-excellence { color: var(--chip-opex-text); }
.pillar-security { color: var(--chip-security-text); }
.pillar-reliability { color: var(--chip-reliability-text); }
.pillar-performance { color: var(--chip-performance-text); }
.pillar-cost { color: var(--chip-cost-text); }
.pillar-sustainability { color: var(--chip-sustainability-text); }

/* ---- Callouts ----------------------------------------------------------------
   Styled like log output: a neutral panel, a coloured rule and a glyph carry
   the severity; the prose itself stays in the readable body face. */

.callout, .note {
  background: var(--surface);
  border-left: 3px solid;
  padding: 0.65rem 0.9rem;
  margin: 0 0 0.75rem;
}
.callout p:last-child, .note:last-child { margin-bottom: 0; }
.callout p { margin: 0 0 0.4rem; }
.callout strong, .note strong {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 0.85em;
}
.callout-antipattern { border-left-color: var(--anti-edge); }
.callout-antipattern strong { color: var(--anti-label); }
.callout-antipattern p:first-of-type::before { content: "\25B2  "; color: var(--anti-edge); font-family: var(--font-mono); }
.callout-action { border-left-color: var(--action-edge); }
.callout-action strong { color: var(--action-label); }
.callout-action p:first-of-type::before { content: "\2713  "; color: var(--action-edge); font-family: var(--font-mono); }
.note-tradeoff {
  border-left-color: var(--tradeoff-edge);
  font-size: 0.95rem;
}
.note-tradeoff strong { color: var(--tradeoff-label); }
.note-tradeoff::before { content: "\BB  "; color: var(--tradeoff-edge); font-family: var(--font-mono); }

/* ---- Share links (publisher-rendered) --------------------------------------
   Bracketed like the pillar tags, so the whole page shares one tag language. */

.share {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0.75rem 0 0.25rem;
  padding-top: 0.6rem;
  border-top: 1px dashed var(--border);
}
.share-link {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0.2rem 0.15rem;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--share-text);
  background: var(--share-bg);
  text-decoration: none;
}
.share-link::before { content: "[ "; color: var(--share-border); }
.share-link::after { content: " ]"; color: var(--share-border); }
.share-link:hover { background: var(--share-hover-bg); color: var(--share-text); }

.share-issue {
  margin-top: 1.5rem;
  padding: 1rem;
  border: 1px solid var(--border);
  background: var(--surface);
}
.share-issue h2 {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 0;
}
.share-issue .share { border-top: 0; padding-top: 0; margin-bottom: 0; }

/* ---- "If you do four things this week" -------------------------------------
   Framed as a command: the heading reads as a shell prompt, and the list
   markers are a real CSS counter, e.g. [1] [2] [3] [4]. */

.four-things {
  background: var(--four-bg);
  color: var(--four-text);
  border-top: 3px solid var(--orange);
  padding: 1.25rem 1.25rem 0.9rem;
  margin: 2rem 0 0;
}
.four-things h2 {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  margin-bottom: 0.85rem;
}
.four-things h2::before { content: "$ "; color: var(--four-num); }
.four-things ol { list-style: none; counter-reset: step; margin: 0; padding: 0; }
.four-things li {
  counter-increment: step;
  margin-bottom: 0.6rem;
  padding-left: 2.4rem;
  position: relative;
}
.four-things li::before {
  content: "[" counter(step) "]";
  position: absolute;
  left: 0;
  color: var(--four-num);
  font-family: var(--font-mono);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.four-things a { color: var(--four-text); text-decoration-color: var(--orange); }
.four-things :focus-visible { outline-color: var(--orange); }
.four-things code { background: transparent; color: inherit; border-color: #56677a; }

/* ---- Archive -----------------------------------------------------------------
   A ledger, not a card grid: each row is numbered with a real reverse-
   chronological counter (#01 is the newest issue). */

.archive h1 { font-size: clamp(1.6rem, 5vw, 2.1rem); font-weight: 800; letter-spacing: -0.01em; margin-top: 0.5rem; }
.archive-intro { color: var(--muted); margin-top: 0; }

.archive-list { list-style: none; padding: 0; margin: 1.5rem 0 0; counter-reset: entry; }
.archive-item {
  counter-increment: entry;
  border-top: 1px solid var(--border);
  padding: 1rem 0;
  display: grid;
  grid-template-columns: 3.25rem 1fr;
  column-gap: 1rem;
}
.archive-item:first-child { border-top: 0; }
.archive-item::before {
  content: "#" counter(entry, decimal-leading-zero);
  grid-row: 1 / span 3;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--muted);
  padding-top: 0.15rem;
}
.archive-item h2 { grid-column: 2; font-size: 1.1rem; margin: 0 0 0.2rem; }
.archive-meta { grid-column: 2; color: var(--muted); font-family: var(--font-mono); font-size: 0.82rem; margin: 0 0 0.35rem; font-variant-numeric: tabular-nums; }
.archive-summary { grid-column: 2; margin: 0; }
.archive-empty { color: var(--muted); }

@media (max-width: 30rem) {
  .archive-item { grid-template-columns: 1fr; row-gap: 0.2rem; }
  .archive-item::before, .archive-item h2, .archive-meta, .archive-summary { grid-column: 1; }
  .archive-item::before { grid-row: auto; }
}

/* ---- Footer ---------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  padding: 1rem 0 2rem;
}
.site-footer p { margin: 0.25rem 0; }

/* ---- 404 ------------------------------------------------------------------- */

.not-found h1 { font-size: 2rem; font-weight: 800; margin-top: 1rem; }

/* ---- Small screens (down to 360px) ----------------------------------------- */

@media (max-width: 30rem) {
  body { font-size: 1rem; }
  .site-subtitle { display: block; margin-left: 0; }
  .status-line { font-size: 0.72rem; }
  .item { padding: 0.9rem 0 0.9rem 0.6rem; }
  .item-num { font-size: 0.78rem; padding-right: 0.4rem; }
  .four-things { padding: 1rem 1rem 0.65rem; }
  .four-things li { padding-left: 2.1rem; }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

@media print {
  .site-header, .share, .share-issue, .skip-link, .breadcrumb { display: none; }
  .band, .four-things { background: none; color: inherit; background-image: none; }
}