/* The reading pages, from Figma: Blog (21:1661), a blog post (49:3179),
   Research tips (21:1933) and the Citation guide (21:2153). They share the
   page header, toolbar and table pieces in site.css; this adds the post cards,
   the article and its rail, the numbered lists, the format tables and tabs.
   Everything is scoped to classes only these pages use.
   Line heights in px: Figma rounds a percentage line height to whole pixels
   (17 px at 175% sets 30 px lines), and Chrome does not, so rows would drift.
   Where blocks stack (the post, the format card, the tabs) even auto-height
   lines take the whole pixels Figma gives them (13 px text, 16 px line). */

/* a heading with what sits under it; the page's own 24 px gap runs inside too */
.art-group { display: flex; flex-direction: column; gap: 24px; }
.art-group[hidden], .art-none[hidden] { display: none; }
.art-none { color: var(--body); font-size: 14px; line-height: 1.5; }
.art-tbl .tbl-head { line-height: 19px; }
.art-tbl .tbl-row { color: var(--body); font-size: 14px; line-height: 22px; }
.art-tbl .tbl-row > :first-child { color: var(--ink); font-weight: 600; }
.art-tbl .tbl-row[hidden] { display: none; }
.art-tbl a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* ── Blog: posts by month, as cards (the design's view) or as a list ── */
/* the order menu: Chrome measures "Newest first" a pixel narrower than Figma's 81 */
#post-sort { min-width: 151px; }
.post-grid { display: grid; grid-template-columns: repeat(auto-fill, 264px); gap: 16px; }
.post-card {
  position: relative;
  display: flex; flex-direction: column; gap: 10px;
  height: 141px; padding: 16px; border: 1px solid #e8e0d5; border-radius: 14px; background: #fff;
  transition: border-color .15s ease, background-color .15s ease;
}
.post-card:hover { border-color: #d6c9b8; }
.post-card[hidden] { display: none; }
.pc-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pc-kind { color: var(--orange-ink); font-size: 12px; font-weight: 600; line-height: var(--lh); white-space: nowrap; }
.pc-actions { position: relative; z-index: 1; display: flex; flex: none; gap: 10px; }
.pc-act { display: flex; width: 16px; height: 16px; border-radius: 4px; }
.pc-act img { width: 16px; height: 16px; }
.pc-act:hover { background: rgba(20, 20, 20, .06); }
.pc-title { font-size: 15px; font-weight: 700; line-height: 20px; }
/* the title's link covers the card; the star and the menu sit above it */
.pc-title a::after { content: ""; position: absolute; inset: -1px; border-radius: 14px; }
.pc-title a:focus-visible { outline: 0; }
.pc-title a:focus-visible::after { outline: 2px solid var(--orange); outline-offset: 2px; }
.pc-meta { margin-top: auto; color: var(--faint); font-size: 12px; line-height: var(--lh); white-space: nowrap; }

.post-grid[data-mode="list"] {
  display: flex; flex-direction: column; gap: 0;
  border: 1px solid #e8e0d5; border-radius: 16px; background: #fff; overflow: hidden;
}
.post-grid[data-mode="list"] .post-card { flex-direction: row; align-items: center; gap: 24px; height: auto; min-height: 0; padding: 15px 20px; border: 0; border-radius: 0; }
.post-grid[data-mode="list"] .post-card:not(:last-child) { border-bottom: 1px solid #e8e0d5; }
.post-grid[data-mode="list"] .post-card:hover { background: #fbf8f4; }
.post-grid[data-mode="list"] .pc-top { display: contents; }
.post-grid[data-mode="list"] .pc-kind { order: 0; flex: none; width: 80px; }
.post-grid[data-mode="list"] .pc-title { order: 1; flex: 1 0 0; min-width: 0; }
.post-grid[data-mode="list"] .pc-title a::after { inset: 0; border-radius: 0; }
.post-grid[data-mode="list"] .pc-meta { order: 2; margin-top: 0; }
.post-grid[data-mode="list"] .pc-actions { order: 3; }

/* ── a blog post ── */
.crumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; line-height: 16px; white-space: nowrap; }
.crumbs a { color: var(--body); }
.crumbs a:hover { color: var(--ink); }
.crumbs .sep { color: var(--faint); }
.crumbs [aria-current] { color: var(--ink); font-weight: 600; }

.post { display: flex; align-items: flex-start; gap: 56px; }
.post-body { display: flex; flex: 1 0 0; flex-direction: column; gap: 20px; min-width: 0; }
.post-kind { color: var(--orange-ink); font-size: 13px; font-weight: 600; line-height: 16px; }
.post-body h1 { font-size: 44px; font-weight: 700; line-height: 48px; letter-spacing: -1.32px; }
.post-meta { color: var(--faint); font-size: 14px; font-weight: 500; line-height: 17px; }
.post-body > p { color: #2e2e33; font-size: 17px; line-height: 30px; }
.post-body h2 { font-size: 24px; font-weight: 700; line-height: 29px; letter-spacing: -0.48px; scroll-margin-top: 84px; }
.pull { margin: 0; padding: 6px 0 6px 22px; border-left: 3px solid #ff3d00; }
.pull p { color: var(--ink); font-size: 24px; font-weight: 600; line-height: 34px; letter-spacing: -0.36px; }

/* the rail stretches beside the article so its contents can stay in view */
.post-rail { flex: none; align-self: stretch; width: 300px; padding-top: 120px; }
.rail-in { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 16px; }
.toc { display: flex; flex-direction: column; gap: 2px; }
.toc-title { color: var(--faint); font-size: 12px; font-weight: 600; line-height: 15px; white-space: nowrap; }
.toc a {
  padding: 7px 10px; border-radius: 8px;
  color: var(--body); font-size: 13px; font-weight: 500; line-height: 18px;
  transition: background-color .15s ease, color .15s ease;
}
.toc a:hover { background: rgba(20, 20, 20, .04); color: var(--ink); }
.toc a.on { background: rgba(255, 87, 34, .1); color: var(--orange-ink); font-weight: 600; }
.try { display: flex; flex-direction: column; gap: 10px; padding: 20px; border-radius: 16px; background: #fff0e3; }
.try h2 { font-size: 16px; font-weight: 700; line-height: 19px; }
.try p { color: var(--body); font-size: 13px; line-height: 20px; }
.try .btn { width: 100%; }

.more { display: flex; flex-direction: column; gap: 16px; padding-top: 40px; }
.more h2 { font-size: 22px; font-weight: 700; line-height: 27px; letter-spacing: -0.33px; }
.related { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.rel-card {
  display: flex; flex-direction: column; gap: 8px;
  height: 126px; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: #fff;
  transition: border-color .15s ease;
}
.rel-card:hover { border-color: #d6c9b8; }
.rel-kind { color: var(--orange-ink); font-size: 12px; font-weight: 600; line-height: var(--lh); }
.rel-title { font-size: 16px; font-weight: 700; line-height: 21px; letter-spacing: -0.16px; }
.rel-meta { color: var(--faint); font-size: 12px; line-height: var(--lh); }

@media (prefers-reduced-motion: no-preference) {
  html:has(body[data-page="blog-post"]) { scroll-behavior: smooth; }
}

/* ── numbered lists: research tips and the citation rules ── */
.num-list { display: flex; flex-direction: column; }
.num-row { display: flex; align-items: center; gap: 16px; padding: 16px 20px; }
.num-row:not(:last-child) { border-bottom: 1px solid #e8e0d5; }
.num-row[hidden] { display: none; }
a.num-row { transition: background-color .15s ease; }
a.num-row:hover { background: #fbf8f4; }
.num-row .n { flex: none; width: 26px; height: 18px; color: var(--orange-ink); font-size: 15px; font-weight: 600; line-height: var(--lh); }
.num-row .t { display: flex; flex: 1 0 0; flex-direction: column; gap: 4px; min-width: 0; }
.num-row h3 { font-size: 15px; font-weight: 600; line-height: 21px; }
.num-row p { color: var(--body); font-size: 13px; line-height: 20px; }
.num-row > img { flex: none; width: 16px; height: 16px; }

.num-list[data-mode="grid"] {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
  border: 0; border-radius: 0; background: none; overflow: visible;
}
.num-list[data-mode="grid"] .num-row { flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px; border: 1px solid #e8e0d5; border-radius: 14px; background: #fff; }
.num-list[data-mode="grid"] a.num-row:hover { background: #fbf8f4; }
.num-list[data-mode="grid"] .num-row > img { display: none; }
.num-list[data-mode="grid"] .num-row .t { flex: none; }

/* where to look */
.where .c-place { flex: none; width: 260px; }
.where .c-good { flex: 1 0 0; min-width: 0; }
.where .c-cost { flex: none; width: 150px; }

/* ── the citation guide: format tabs and tables ── */
.tabs { display: flex; align-self: flex-start; gap: 4px; padding: 4px; border-radius: 10px; background: #efe7dc; }
.tabs button {
  padding: 7px 16px; border-radius: 8px;
  color: var(--body); font-size: 13px; font-weight: 500; line-height: 16px; white-space: nowrap;
  transition: color .15s ease;
}
.tabs button:hover { color: var(--ink); }
/* Figma's tab widths; Chrome sets these labels a pixel narrower */
#tab-mla { min-width: 73px; }
#tab-apa { min-width: 69px; }
#tab-chicago { min-width: 101px; }
.tabs button[aria-selected="true"] { background: #fff; color: var(--ink); font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.fmt[hidden] { display: none; }
.fmt-about { display: flex; flex-direction: column; gap: 8px; padding: 20px 20px 18px; border-bottom: 1px solid #e8e0d5; }
.fmt-name { display: flex; align-items: center; gap: 10px; }
.fmt-name h2 { font-size: 20px; font-weight: 700; line-height: 24px; white-space: nowrap; }
.fmt-chip {
  padding: 3px 9px; border-radius: 999px; background: rgba(255, 87, 34, .12);
  color: var(--orange-ink); font-size: 12px; font-weight: 600; line-height: 15px; white-space: nowrap;
}
.fmt-about p { color: var(--body); font-size: 14px; line-height: 22px; }
.fmt .tbl-row { align-items: flex-start; }
.fmt .c-src { flex: none; width: 150px; }
.fmt .c-pat { flex: none; width: 400px; }
.fmt .c-ex { flex: 1 0 0; min-width: 0; overflow-wrap: anywhere; }

.does { display: flex; align-items: center; gap: 20px; padding: 20px 22px; border-radius: 14px; background: #fff0e3; }
.does-text { display: flex; flex: 1 0 0; flex-direction: column; gap: 6px; min-width: 0; }
.does h2 { font-size: 16px; font-weight: 700; line-height: 19px; }
.does p { color: var(--body); font-size: 13px; line-height: 20px; }
.does .btn { flex: none; }

/* ── narrower screens ── */
@media (max-width: 1180px) {
  .post { gap: 40px; }
  .post-rail { width: 260px; }
  .fmt .c-pat { width: 300px; }
}

@media (max-width: 960px) {
  .post { flex-direction: column; gap: 32px; }
  .post-rail { align-self: auto; width: 100%; padding-top: 0; }
  .rail-in { position: static; }
  .toc { display: none; }
  .try .btn { width: auto; align-self: flex-start; }
  .related { grid-template-columns: minmax(0, 1fr); }
  .rel-card { height: auto; }
  .num-list[data-mode="grid"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* tables lose their header row (site.css), so each cell says what it is */
  .where .c-place, .where .c-good, .fmt .c-src, .fmt .c-pat, .fmt .c-ex { flex: 1 0 100%; width: 100%; }
  .where .c-cost { width: auto; }
  .where .c-cost::before { content: "Cost: "; }
  .fmt .c-pat::before, .fmt .c-ex::before { display: block; color: var(--faint); font-size: 12px; font-weight: 600; }
  .fmt .c-pat::before { content: "Pattern"; }
  .fmt .c-ex::before { content: "Example"; }
  .post-grid[data-mode="list"] .post-card { flex-wrap: wrap; gap: 6px 16px; }
  .post-grid[data-mode="list"] .pc-title { flex-basis: 100%; order: 1; }
  .post-grid[data-mode="list"] .pc-kind { width: auto; }
  .post-grid[data-mode="list"] .pc-actions { margin-left: auto; order: 0; }
}

@media (max-width: 640px) {
  .post-grid { grid-template-columns: minmax(0, 1fr); }
  .post-card { height: auto; min-height: 141px; }
  .post-body h1 { font-size: 32px; line-height: 1.12; letter-spacing: -0.9px; }
  .post-body > p { font-size: 16px; line-height: 1.7; }
  .pull p { font-size: 20px; line-height: 1.4; letter-spacing: -0.3px; }
  .num-list[data-mode="grid"] { grid-template-columns: minmax(0, 1fr); }
  .num-row { padding: 14px 16px; }
  .does { flex-direction: column; align-items: flex-start; }
  .tabs { max-width: 100%; overflow-x: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .post-card, .rel-card, .toc a, a.num-row, .tabs button { transition: none; }
}