/* AI Business / Marketing Tracker — signage typography, strict black and white. */

@font-face {
  font-family: "Plex Mono";
  src: url("fonts/plex-mono-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2192, U+2197, U+2212, U+2215, U+25B8, U+25C2, U+FEFF;
}
@font-face {
  font-family: "Plex Mono";
  src: url("fonts/plex-mono-cyrillic-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Plex Mono";
  src: url("fonts/plex-mono-latin-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2192, U+2197, U+2212, U+2215, U+25B8, U+25C2, U+FEFF;
}
@font-face {
  font-family: "Plex Mono";
  src: url("fonts/plex-mono-cyrillic-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Plex Sans";
  src: url("fonts/plex-sans-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215, U+FEFF;
}
@font-face {
  font-family: "Plex Sans";
  src: url("fonts/plex-sans-cyrillic-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Plex Sans";
  src: url("fonts/plex-sans-latin-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215, U+FEFF;
}
@font-face {
  font-family: "Plex Sans";
  src: url("fonts/plex-sans-cyrillic-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

:root {
  --font-mono: "Plex Mono", ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  --font-sans: "Plex Sans", system-ui, -apple-system, sans-serif;

  /* Dark is the default. */
  --bg: #000;
  --fg: #fff;
  --dim: #8a8a8a;
  --rule: #585858;
  --rule-strong: #8a8a8a;
}

/* Light mode is deliberately NOT a mirror of dark: secondary text goes
   near-black, because light grey on white is unreadable. Hierarchy comes
   from size and letter-spacing instead. */
html[data-theme="light"] {
  --bg: #fff;
  --fg: #000;
  --dim: #2a2a2a;
  --rule: #9a9a9a;
  --rule-strong: #4a4a4a;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
}

body {
  font-family: var(--font-mono);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: 1000px;
  margin: 0 auto;
  padding: 28px 24px 60px;
}

a { color: var(--dim); }
a:hover { color: var(--fg); }

.sans { font-family: var(--font-sans); }

/* ---------- tracker selector ---------- */

.trackers {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.trackers button {
  flex: 1 1 0;
  min-width: 0;
  background: none;
  color: var(--fg);
  border: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 16px;
  letter-spacing: 2px;
  padding: 14px 12px;
  cursor: pointer;
  text-align: center;
}

.trackers button[aria-pressed="true"] {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
  font-weight: 500;
}

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

.masthead {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  border-bottom: 2px solid var(--fg);
  padding-bottom: 12px;
}

.strap {
  color: var(--dim);
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.toggles {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}

.group { display: flex; }

/* ---------- chips ---------- */

.chip {
  background: none;
  color: var(--fg);
  border: 1px solid var(--rule);
  border-radius: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 1px;
  padding: 4px 10px;
  cursor: pointer;
}

.chip:hover { border-color: var(--fg); }

.chip[aria-pressed="true"],
.chip.on {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
}

.chip[disabled] { opacity: .45; cursor: default; }

.group .chip + .chip { border-left: none; }
.group .chip[aria-pressed="true"] + .chip { border-left: 1px solid var(--rule); }

/* ---------- filters ---------- */

.frow {
  display: flex;
  gap: 14px;
  align-items: baseline;
  margin-top: 12px;
}

.frow > .flabel {
  color: var(--dim);
  font-size: 12px;
  letter-spacing: 1px;
  flex: 0 0 92px;
  padding-top: 5px;
}

.chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}

.frow > .chips { flex: 1 1 auto; }

input[type="search"],
input[type="date"],
select {
  background: none;
  color: var(--fg);
  border: 1px solid var(--rule);
  border-radius: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 1px;
  padding: 6px 10px;
}

input[type="search"] { min-width: 230px; }
input[type="search"]::placeholder { color: var(--dim); }
input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); }
html[data-theme="light"] input[type="date"]::-webkit-calendar-picker-indicator { filter: none; }

.statusbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  border-top: 1px solid var(--rule);
  margin-top: 20px;
  padding-top: 10px;
  color: var(--dim);
  font-size: 13px;
  letter-spacing: 1px;
}

/* ---------- feed ---------- */

.entry {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 18px;
  border-top: 1px dashed var(--rule);
  padding-top: 16px;
  margin-top: 16px;
}

.entry-date {
  color: var(--dim);
  font-size: 14px;
  letter-spacing: 1px;
  line-height: 1.45;
}

.entry-co {
  font-size: 18px;
  letter-spacing: 2px;
}

.entry-facets {
  color: var(--dim);
  font-size: 13px;
  letter-spacing: 1px;
}

.entry-body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  margin-top: 8px;
}

.field { margin-top: 12px; color: var(--dim); }
.field .flab { font-size: 12px; letter-spacing: 1px; display: block; }
.field .fval { font-family: var(--font-sans); font-size: 15px; line-height: 1.55; }

.field.outcome {
  border-left: 3px solid var(--rule-strong);
  padding-left: 12px;
}

.entry-links {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 12px;
  font-size: 14px;
}

.share {
  font-size: 15px;
  line-height: 1;
  padding: 5px 11px;
}

.empty {
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--dim);
  padding: 30px 0;
}

/* ---------- digest ---------- */

.digest-head {
  font-family: var(--font-sans);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.35;
  margin: 20px 0 0;
}

.digest-intro {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  margin: 12px 0 0;
}

.digest-note {
  color: var(--dim);
  font-size: 12px;
  letter-spacing: 1px;
  margin-top: 12px;
}

.digest-list {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  padding-left: 22px;
  margin-top: 16px;
}

.digest-list li { margin-bottom: 12px; }

.digest-group {
  list-style: none;
  margin-left: -22px;
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 1px;
  margin-top: 18px;
  margin-bottom: 10px;
}

/* ---------- share modal ---------- */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 50;
}

html[data-theme="light"] .modal-backdrop { background: rgba(0, 0, 0, .45); }

.modal {
  background: var(--bg);
  border: 1px solid var(--fg);
  max-width: 600px;
  width: 100%;
  max-height: 86vh;
  overflow-y: auto;
  padding: 20px;
}

.modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 10px;
}

.modal-title {
  color: var(--dim);
  font-size: 13px;
  letter-spacing: 1px;
}

.post {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  margin-top: 16px;
}

.post-meta {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--dim);
}

.post h3 {
  font-size: 17px;
  font-weight: 500;
  line-height: 1.4;
  margin: 8px 0;
}

.post-url {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--dim);
  word-break: break-all;
  margin-top: 12px;
}

.pending {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--dim);
  margin-top: 10px;
}

/* ---------- footer ---------- */

.foot {
  border-top: 1px solid var(--rule);
  margin-top: 36px;
  padding-top: 12px;
  color: var(--dim);
  font-size: 12px;
  letter-spacing: 1px;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

/* The whole filter block is always open on a wide screen; on a phone it
   collapses so the feed is not pushed below a screenful of chips. */
.filters-toggle { display: none; }

/* ---------- mobile ---------- */

@media (max-width: 680px) {
  .wrap { padding: 18px 16px 48px; }

  .filters-toggle { display: block; width: 100%; margin-top: 14px; padding: 8px; }
  .filters-toggle[aria-expanded="false"] + #filters { display: none; }

  .trackers { flex-direction: column; }
  .trackers button { font-size: 14px; padding: 12px; }

  .frow { flex-direction: column; gap: 8px; }
  .frow > .flabel { flex: none; padding-top: 0; }

  input[type="search"] { min-width: 0; width: 100%; }

  .entry { grid-template-columns: 1fr; gap: 6px; }
  .entry-date { font-size: 13px; }
  .entry-co { font-size: 17px; letter-spacing: 1.5px; }
  .entry-facets { display: block; margin-top: 3px; }

  .modal-backdrop { padding: 12px; }
}

.post-tags {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--dim);
  margin-top: 10px;
  word-break: break-word;
}

.post-links {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 14px;
  margin-top: 14px;
}