/* ============================================================
   AI Solutions Channel — styles.css
   Editorial, restrained, desktop-first with mobile reflow.
   No JS, no frameworks. CSS variables drive theming.
   ============================================================ */


/* ---------- Fonts ------------------------------------------------ */
/* IBM Plex Sans (body) + IBM Plex Serif (headings).
   Loaded via <link> tags in index.html with preconnect, so the
   browser can start fetching fonts in parallel with this stylesheet
   instead of waiting for the CSS to parse an @import. */


/* ---------- Tokens ----------------------------------------------- */

:root {
  /* Light theme (default) */
  --bg:           #FAFAF7;
  --text:         #1A1A1A;
  --text-muted:   #595959;
  --text-subtle:  #767676;
  --rule:         #E5E5E5;
  --accent:       #2E5C8A;   /* muted editorial blue */
  --accent-hover: #1F4570;

  /* Type */
  --font-sans:  'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif: 'IBM Plex Serif', Georgia, 'Times New Roman', serif;

  --fs-body:    1.0625rem;   /* 17px */
  --fs-small:   0.9375rem;   /* 15px */
  --fs-h1:      1.5rem;      /* 24px — modest, per spec */
  --fs-h2:      1.375rem;    /* 22px */
  --fs-intro:   1.125rem;    /* 18px */

  --lh-body:    1.65;
  --lh-tight:   1.35;

  /* Layout */
  --col-prose:  680px;
  --col-list:   760px;
  --pad-x:      24px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:           #1A1A1A;
    --text:         #E8E8E8;
    --text-muted:   #A8A8A8;
    --text-subtle:  #8A8A8A;
    --rule:         #2E2E2E;
    --accent:       #7FA7C9;   /* desaturated for dark */
    --accent-hover: #A4C2DD;
  }
}


/* ---------- Reset / base ----------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
}

h1, h2, h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: var(--lh-tight);
  margin: 0;
}

p { margin: 0 0 1em 0; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color 120ms ease;
}
a:hover { color: var(--accent-hover); }
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 1px;
}

ul { margin: 0; padding: 0; list-style: none; }


/* ---------- Page layout ------------------------------------------ */

.page {
  max-width: var(--col-prose);
  margin: 0 auto;
  padding: 96px var(--pad-x) 120px;
}


/* ---------- Header ----------------------------------------------- */

.site-header {
  margin-bottom: 56px;
}

.site-title {
  font-family: var(--font-serif);
  font-size: var(--fs-h1);
  font-weight: 500;
  letter-spacing: -0.005em;
}

.site-tagline {
  margin: 8px 0 0 0;
  color: var(--text-muted);
  font-size: var(--fs-small);
  font-family: var(--font-sans);
  font-style: normal;
}


/* ---------- Intro ------------------------------------------------ */

.intro {
  font-size: var(--fs-intro);
  margin-bottom: 64px;
}

.intro p { margin-bottom: 1.1em; }

.intro .updated {
  margin-top: 1.6em;
  color: var(--text-subtle);
  font-size: var(--fs-small);
  font-family: var(--font-sans);
  letter-spacing: 0.01em;
}


/* ---------- Horizontal rules ------------------------------------- */

.rule {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 0;
  /* The category sections supply their own vertical breathing room. */
}


/* ---------- Category sections ------------------------------------ */

.category {
  /* Slightly wider column for the list section, per spec.
     We widen by offsetting the section against the centered page
     column with negative margins so the heading aligns with prose
     but the list can breathe. */
  max-width: var(--col-list);
  margin-left: auto;
  margin-right: auto;
  padding: 64px 0;
}

.category-title {
  font-size: var(--fs-h2);
  font-weight: 500;
  margin-bottom: 12px;
  letter-spacing: -0.005em;
}

.category-frame {
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-style: normal;
  font-size: var(--fs-body);
  margin-bottom: 36px;
  max-width: var(--col-prose);
}


/* ---------- Tool entries ----------------------------------------- */

.tools {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.tool {
  display: block;
}

.tool-name {
  display: inline;
  font-weight: 600;
  color: var(--text);
  font-family: var(--font-sans);
  text-decoration: none;
  /* Subtle marker: a thin underline that thickens on hover. */
  border-bottom: 1px solid var(--rule);
  padding-bottom: 1px;
  transition: border-color 120ms ease, color 120ms ease;
}
.tool-name:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.tool-name:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 1px;
}

/* Each metadata line drops to its own row.
   We use a small inline em-dash marker on the description and note
   for typographic rhythm — restrained, no icons. */

.tool-desc,
.tool-note {
  display: block;
  margin-top: 4px;
  font-size: var(--fs-body);
}

.tool-desc {
  color: var(--text);
}

.tool-note {
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-style: normal;
  margin-top: 2px;
}


/* ---------- Closing ---------------------------------------------- */

.closing {
  margin-top: 32px;
  max-width: var(--col-prose);
  margin-left: auto;
  margin-right: auto;
}

.closing-title {
  font-size: var(--fs-h2);
  font-weight: 500;
  margin-bottom: 16px;
}

.closing .contact {
  color: var(--text-muted);
  margin-top: 1.2em;
}


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

.site-footer {
  margin-top: 80px;
  padding-top: 32px;
  border-top: 1px solid var(--rule);
  max-width: var(--col-prose);
  margin-left: auto;
  margin-right: auto;
  color: var(--text-subtle);
  font-size: var(--fs-small);
}


/* ---------- Mobile reflow ---------------------------------------- */

@media (max-width: 720px) {
  :root {
    --pad-x: 20px;
    --fs-h1: 1.375rem;
    --fs-h2: 1.25rem;
    --fs-intro: 1.0625rem;
  }
  .page { padding: 56px var(--pad-x) 80px; }
  .site-header { margin-bottom: 40px; }
  .intro { margin-bottom: 48px; }
  .category { padding: 48px 0; }
}

@media (max-width: 420px) {
  :root { --pad-x: 16px; }
}


/* ---------- Print ------------------------------------------------ */

@media print {
  :root {
    --bg: #fff;
    --text: #000;
    --text-muted: #333;
    --rule: #ccc;
    --accent: #000;
  }
  .page { padding: 24px; max-width: none; }
  a { text-decoration: none; color: inherit; }
}