/* ============================================================================
   microsoft.ai-inspired theme: warm cream surfaces, dark-brown ink, classical
   serif headings/body paired with a monospace for labels/nav/buttons, pill
   buttons, soft watercolor-pastel accents, generous whitespace.
   ============================================================================ */

:root {
  --ms-cream: #f4efe4;        /* page background */
  --ms-cream-card: #fbf9f3;   /* card / raised surfaces */
  --ms-tan: #eae0ce;          /* secondary button fill, code bg */
  --ms-ink: #2e2820;          /* headings */
  --ms-text: #3f3830;         /* body */
  --ms-muted: #6b6357;        /* secondary text */
  --ms-border: #e3d9c6;       /* hairline borders */
  --ms-accent: #b5654a;       /* terracotta link/accent */
  --ms-accent-dark: #934c34;
  --ms-radius: 0.3rem;        /* one tight radius: cards, corner badges, and tag chips */

  /* Type roles: body / nav / UI = Inter (set via mkdocs theme.font — readable mixed-case);
     headings = CODE (display); brand title = Pricedown. CODE is a display/all-caps face, so
     it's used ONLY for headings + the brand, never for body copy. */
}

/* Pricedown — the Grand Theft Auto (San Andreas) logo typeface — for the site/brand title. */
@font-face {
  font-family: "Pricedown";
  src: url("../assets/fonts/pricedown.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* CODE (Fontfabric) — display face for page/section headings. */
@font-face {
  font-family: "CODE";
  src: url("../assets/fonts/code-light.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "CODE";
  src: url("../assets/fonts/code-bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---- Light (default) ---- */
[data-md-color-scheme="default"] {
  --md-default-bg-color: var(--ms-cream);
  --md-default-fg-color: var(--ms-text);
  --md-default-fg-color--light: var(--ms-muted);
  --md-default-fg-color--lighter: #9a9183;
  --md-typeset-color: var(--ms-text);
  --md-typeset-a-color: var(--ms-accent);
  --md-accent-fg-color: var(--ms-accent-dark);
  --md-code-bg-color: var(--ms-tan);
  --md-code-fg-color: #5a4f3f;
  --md-footer-bg-color: #2e2820;
  --md-footer-bg-color--dark: #251f18;
}

/* ---- Layout: use more of the screen than Material's default 61rem ---- */
.md-grid {
  max-width: 84rem;
}

/* ---- Header / nav: blends with the cream page, hairline separator, mono ---- */
.md-header,
.md-tabs {
  background-color: var(--ms-cream);
  color: var(--ms-ink);
  box-shadow: none;
}
.md-header {
  border-bottom: 1px solid var(--ms-border);
}
.md-header__title,
.md-tabs__link,
.md-search__form {
  font-family: var(--md-code-font);
}
.md-header__title {
  font-weight: 700;
  letter-spacing: -0.01em;
}
.md-search__form {
  background-color: var(--ms-tan);
  border-radius: 2rem;
  box-shadow: none;
}
/* The <input> doesn't inherit the form's font, so the typed query falls back to the
   browser's default control font. Force the full body font stack (with fallbacks) so the
   text the user types matches the page and the search results — even if the webfont fails. */
.md-search__input {
  font-family: var(--md-text-font-family);
}
.md-search__input::placeholder {
  color: var(--ms-muted);
}

/* ---- Typography: serif headings, mono eyebrow labels ---- */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
  font-family: "CODE", var(--md-text-font-family);   /* display headings; body stays Inter */
  color: var(--ms-ink);
  font-weight: 600;
  letter-spacing: -0.01em;
}
/* Page / section headings use the CODE display face. */
.md-typeset h1 {
  font-family: "CODE", var(--md-text-font-family);
  font-weight: 700;          /* CODE Bold */
  letter-spacing: 0.01em;
}
/* The site/brand title ("Awesome Generative AI…") keeps the GTA "Pricedown" face,
   wherever it appears: the home H1, the header bar, and the sidebar brand title.
   ([for="__drawer"] is specifically the brand title — NOT the section/ToC nav titles.) */
/* Brand title uses Pricedown ONLY in the home H1 and the top header bar — NOT the left
   nav panel (that brand title stays in the readable body font with the rest of the menu). */
.md-typeset h1.brand-title,
.md-header__title {
  font-family: "Pricedown", var(--md-text-font-family);
  font-weight: 400;          /* Pricedown is already heavy — avoid faux-bold */
}
/* The top banner brand ("Awesome Generative AI…") is the hero banner — make it bigger. */
.md-header__title {
  font-size: 1.6rem;
}

/* Search results render their titles as <h1>/<h2> inside .md-typeset, which would pick up the
   CODE display face. Keep search results in the readable body font (size stays Material's). */
.md-search-result .md-typeset h1,
.md-search-result .md-typeset h2,
.md-search-result .md-typeset h3 {
  font-family: var(--md-text-font-family);
  letter-spacing: normal;
}
/* the "<small>Area</small>" eyebrow above task titles -> uppercase category label.
   CODE's Light weight is too faint at small sizes, so use Bold + a darker ink. */
.md-typeset small {
  font-family: var(--md-code-font);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ms-text);
}

/* ---- Pill buttons ---- */
.md-typeset .md-button {
  font-family: var(--md-code-font);
  font-weight: 700;
  border-radius: 2rem;
  border-width: 1px;
  padding: 0.55em 1.4em;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
}
.md-typeset .md-button--primary {
  background-color: var(--ms-ink);
  border-color: var(--ms-ink);
  color: var(--ms-cream);
}
.md-typeset .md-button--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 0.4rem 0.9rem rgba(46, 40, 32, 0.25);
}
.md-typeset .md-button:not(.md-button--primary) {
  background-color: var(--ms-tan);
  border-color: var(--ms-tan);
  color: var(--ms-ink);
}
.md-typeset .md-button:not(.md-button--primary):hover {
  transform: translateY(-1px);
  border-color: var(--ms-border);
}

/* ============================================================================
   Catalog card grid — TWO equal columns; cover image flush to the card's
   rounded top so every card (image or text-only) shows the SAME corner radius.
   ============================================================================ */
.md-typeset .grid.cards > ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
  margin: 1em 0;
}
@media screen and (max-width: 76em) {
  .md-typeset .grid.cards > ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media screen and (max-width: 44.9em) {
  .md-typeset .grid.cards > ul {
    grid-template-columns: 1fr;
  }
}

.md-typeset .grid.cards > ul > li {
  margin: 0;
  position: relative;              /* anchor corner badges */
  display: flex;
  flex-direction: column;
  overflow: hidden;                /* clip the cover image + corner badges to the card radius */
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius); /* uniform corner radius for ALL cards */
  padding: 1rem;                   /* default: text-only overview cards */
  background: var(--ms-cream-card);
  box-shadow: 0 1px 2px rgba(46, 40, 32, 0.04);
  transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
}
/* Hover: no lift, no drop-shadow — just outline the card in the CTA/button colour. */
.md-typeset .grid.cards > ul > li:hover {
  border-color: var(--ms-accent);
}

/* Cards WITH a cover: cover is flush to the edges, text content is padded. */
.md-typeset .grid.cards > ul > li:has(.card-thumb-link) {
  padding: 0;
}
.md-typeset .grid.cards > ul > li:has(.card-thumb-link) > * {
  padding-left: 1rem;
  padding-right: 1rem;
}
.md-typeset .grid.cards > ul > li:has(.card-thumb-link) > p:first-child {
  padding: 0;                      /* cover edge-to-edge */
}
.md-typeset .grid.cards > ul > li:has(.card-thumb-link) > p:nth-child(2) {
  padding-top: 0.7rem;
}
.md-typeset .grid.cards > ul > li:has(.card-thumb-link) > :last-child {
  padding-bottom: 1rem;
}

/* 16:9 cover (its corners come from the card's overflow:hidden). No image files exist in
   this repo: the <img> hotlinks the entry's own og:image / GitHub social card, and the
   pastel initials tile beneath it is pure CSS. A dead remote image just reveals the tile
   (thumb-fallback.js hides the broken <img>). */
.md-typeset .grid.cards .card-thumb-link {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--ms-tan);
}
.md-typeset .grid.cards .card-tile {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  color: #2e2820;
}
.md-typeset .grid.cards img.card-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0;
}
.md-typeset .grid.cards img.card-thumb.thumb-broken {
  display: none;
}
.md-typeset .grid.cards > ul > li > p:first-child > a {
  display: block;
  line-height: 0;
}

/* card title (serif) */
.md-typeset .grid.cards > ul > li strong a {
  color: var(--ms-ink);
  font-weight: 700;
}
.md-typeset .grid.cards > ul > li strong a:hover {
  color: var(--ms-accent);
}

/* Year — same colour as the arXiv/GitHub links, bold. */
.md-typeset .card-year {
  font-family: var(--md-code-font);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--md-typeset-a-color);
}

/* Corner badges: pinned to fixed card corners, flush (no margin), no pill — the outer corner
   is clipped to the card's radius by the li's overflow:hidden. Same spot on every card. */
.md-typeset .grid.cards > ul > li .card-new,
.md-typeset .grid.cards > ul > li .card-src {
  position: absolute;
  right: 0;
  margin: 0;
  z-index: 2;
  padding: 0.14rem 0.5rem;
  font-family: var(--md-code-font);
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}
/* recency -> top-right (over the cover image) */
.md-typeset .grid.cards > ul > li .card-new {
  top: 0;
  background: var(--ms-accent);
  color: #fff;
  border-bottom-left-radius: var(--ms-radius);
}
/* provenance -> bottom-right */
.md-typeset .grid.cards > ul > li .card-src {
  bottom: 0;
  background: var(--ms-tan);
  color: var(--ms-accent-dark);
  border-top-left-radius: var(--ms-radius);
}

/* Push tags + links to the bottom so they line up across a row. The summary
   absorbs the free space (no wrapper element, which would break the grid <ul>). */
.md-typeset .grid.cards > ul > li > .card-summary {
  margin-bottom: auto;
  text-align: justify;
  hyphens: auto;        /* avoid large word gaps when justifying in narrow cards */
}

/* muted mono metadata (authors · year, counts) */
.md-typeset .card-meta {
  font-family: var(--md-code-font);
  color: var(--ms-muted);
  font-size: 0.68rem;
}

/* tag chips — CODE Bold + dark ink so the small uppercase labels stay legible on the tan fill */
.md-typeset .grid.cards code {
  font-size: 0.64rem;
  font-weight: 700;
  padding: 0.08rem 0.5rem;
  background: var(--ms-tan);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius);   /* same tight radius as the cards — not a pill */
  color: var(--ms-ink);
}

/* Left-nav "NEW since last update" count badge (app-icon notification style). Injected by
   nav-badges.js onto area/task nav links that gained entries in the latest batch.
   Pinned absolutely to a fixed right offset on EVERY .md-nav__item — whose right edge is the
   same at any nesting depth — so all badges line up in one straight column just left of the
   ❯ expander, whether or not the item has one. */
/* Reserve room at the end of a badged label so a long title wraps before the badge column
   instead of running under it. */
a.md-nav__link.nav-badged {
  padding-right: 2.8rem;
}
.nav-badge {
  position: absolute;
  top: 50%;
  right: 1.7rem;                     /* same column for every badge, just before the ❯ */
  transform: translateY(-50%);       /* vertically centred on the one-line link row */
  min-width: 0.9rem;
  padding: 0 0.25em;
  font-family: var(--md-code-font);
  font-size: 0.5rem;
  font-weight: 700;
  line-height: 0.9rem;
  text-align: center;
  color: #fff;
  background: var(--ms-accent);      /* same terracotta as the card NEW badge */
  border-radius: 0.7rem;             /* rounded — reads as a notification count */
  pointer-events: none;              /* clicks pass through to the nav link */
}