/* Layout redesign (2026-09-25): styles for the news page type package.
   News pages put items first (L19), wide tables stack on phones (L20), and
   search results can be scanned (L10). Loaded after extra.css and
   layout.css, so equal-specificity rules here win. */

:root,
[data-md-color-scheme="default"] {
  --news-chip-on-bg: rgba(7, 97, 140, 0.1);
  --news-chip-on-fg: #1b4165;
  --news-sticky-edge: rgba(0, 0, 0, 0.12);
}

[data-md-color-scheme="slate"] {
  --news-chip-on-bg: rgba(90, 163, 199, 0.18);
  --news-chip-on-fg: #e3f1f8;
  --news-sticky-edge: rgba(255, 255, 255, 0.16);
}

/* --- News page width ---------------------------------------------------------
   News pages are shelves (no "on this page" column), but a news card
   stretched across the full 78rem ran titles and summaries to about 150
   characters a line. The list, brief and chips share one centred column
   instead, with the section row alongside on This Week. */
@media screen and (min-width: 60em) {
  /* Outranks Material's sidebar margin rule (five classes). */
  body[data-page-type="shelf"] .md-main .md-content > .md-content__inner:has(> .news-list) {
    max-width: 44rem;
    margin-left: auto;
    margin-right: auto;
  }
}

/* The selection note stays on the first screen as a quiet meta line. */
.md-typeset p.news-note {
  font-size: 0.72rem;
  color: var(--md-default-fg-color--light);
}

/* --- This Week: jump links to each section (L19) -------------------------
   Links, not filters: link-coloured text with a downward arrow, so they
   read as "go to", unlike the topic chips below each heading. From 60em,
   where the header stays put, the row sticks under it while you read, and
   layout-news.js marks the section in view (aria-current). */
.md-typeset .section-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: -0.4rem 0 1rem;
}

.md-typeset .section-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 2rem;
  padding: 0 0.6rem;
  border: 1px solid var(--hub-row-rule);
  border-radius: 0.3rem;
  background: var(--md-default-bg-color);
  font-size: 0.7rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--md-typeset-a-color);
}

.md-typeset .section-chip::after {
  content: "\2193";
  content: "\2193" / "";
  font-weight: 400;
}

.md-typeset .section-chip:hover,
.md-typeset .section-chip[aria-current] {
  border-color: var(--md-typeset-a-color);
  background: var(--news-chip-on-bg);
}

.md-typeset .section-chip[aria-current] {
  color: var(--news-chip-on-fg);
}

/* Phones: the arrows go, so the five sections fit on two rows, and the
   space above each section heading tightens. */
@media screen and (max-width: 44.9375em) {
  .md-typeset .section-chip::after {
    display: none;
  }

  body[data-page-type="shelf"] .md-content__inner:has(> .news-list) > h2 {
    margin-top: 1.6em;
  }

  .md-typeset .section-brief {
    margin-bottom: 0.7rem;
  }

  .md-typeset .topic-chips {
    margin-top: 0;
  }

  body[data-page-type="shelf"] .md-content__inner:has(> .news-list) > .news-list {
    margin-top: 0.6rem;
  }
}

@media screen and (min-width: 60em) {
  .md-typeset .section-chips {
    position: sticky;
    top: var(--news-sticky-top, 4.8rem);
    z-index: 2;
    margin: -0.4rem -0.4rem 1rem;
    padding: 0.4rem;
    background: var(--md-default-bg-color);
  }

  .md-typeset .section-chips.is-stuck {
    box-shadow: 0 1px 0 var(--hub-row-rule), 0 0.3rem 0.5rem -0.3rem rgba(0, 0, 0, 0.15);
  }

  .md-content__inner:has(> .section-chips) > h2 {
    scroll-margin-top: 3rem;
  }

  /* A feed panel's heading sits inside the panel's padding: the extra
     margin brings the whole panel, and its outline, clear of the row. */
  .md-content__inner:has(> .section-chips) .wk-feed > h2 {
    scroll-margin-top: 4.6rem;
  }
}

/* A feed chip's panel, for a moment after the chip is used
   (layout-news.js): an outline that fades, or stays still and then goes
   under reduced motion. The heading inside takes focus without a ring of
   its own. */
.md-typeset .wk-feed {
  transition: outline-color 1.4s ease-out;
  outline: 3px solid transparent;
  outline-offset: 3px;
}

.md-typeset .wk-feed.is-picked {
  outline-color: var(--hub-focus);
  transition: none;
}

.md-typeset .wk-feed > h2[tabindex="-1"]:focus {
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  .md-typeset .wk-feed {
    transition: none;
  }
}

.md-typeset .section-chip__n,
.md-typeset .topic-chip__n {
  font-weight: 400;
  color: var(--md-default-fg-color--light);
}

/* --- Section brief: a two-sentence lede, the rest in a quiet fold (L19) --
   The brief used to be the whole first screen of a news page on a phone
   (1,084px before the first item). The fold holds the rest of the brief,
   the player and the date line; "or listen" shows only when a player is
   there, since audio exists only where the narration step has run. */
.md-typeset .section-brief {
  margin: 0 0 1rem;
  padding: 0.75rem 1rem 0;
  border-left: 0.2rem solid var(--md-typeset-a-color);
  border-radius: 0 0.4rem 0.4rem 0;
  background: var(--hub-quiet-bg);
}

.md-typeset .section-brief .section-brief-lede {
  margin: 0 0 0.6rem;
}

/* A brief with no fold (the weekly digest's "The week in brief") keeps
   its bottom padding, and its paragraphs get the space between them they
   never had. */
.md-typeset .section-brief:not(:has(.section-brief-more)) {
  padding-bottom: 0.75rem;
}

.md-typeset .section-brief > p + p {
  margin-top: 0.6em;
}

.md-typeset .section-brief details.section-brief-more {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--hub-row-rule);
  border-bottom: 0;
  font-size: inherit;
}

.md-typeset .section-brief details.section-brief-more > summary {
  min-height: 2.2rem;
  margin: 0;
  color: var(--md-typeset-a-color);
}

.md-typeset .section-brief details.section-brief-more > summary:hover {
  background: none;
  text-decoration: underline;
}

/* Material colours a focused summary with the amber accent (1.9:1). */
.md-typeset .section-brief details.section-brief-more > summary:focus-visible {
  outline: 2px solid var(--hub-focus);
  outline-offset: 2px;
}

.md-typeset .section-brief details.section-brief-more > p {
  margin: 0 0 0.6rem;
}

.md-typeset .section-brief details.section-brief-more:not(:has(.listen)) .section-brief-listen {
  display: none;
}

.md-typeset .section-brief details.section-brief-more .section-brief-date {
  margin: 0 0 0.8rem !important;
}

/* --- News cards: the whole card is the link (L6) --------------------------
   A card lifted on hover but only its title could be tapped (MA-2). The
   title link now covers the card, the one destination it has. The source
   becomes plain small capitals instead of a grey pill that measured about
   4.4:1, and a long source name wraps instead of being cut to "PUBMED AI
   IN M...". */
.md-typeset .news-card {
  position: relative;
}

.md-typeset .news-card .news-card-title::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

/* Where it goes (2026-09-27): the site's external mark for another
   website, a chevron for a page on the Hub. */
.md-typeset .news-card .news-card-title[href^="http"]::after,
.md-typeset a.timely-title[href^="http"]::after {
  content: "\2197";
  content: "\2197" / "";
  margin-left: 0.2em;
  font-size: 0.75em;
  font-weight: 400;
  opacity: 0.7;
}

.md-typeset .news-card .news-card-title:not([href^="http"])::after,
.md-typeset a.timely-title:not([href^="http"])::after {
  content: "\203a";
  content: "\203a" / "";
  margin-left: 0.25em;
  font-weight: 400;
  opacity: 0.7;
}

.md-typeset .news-card:has(.news-card-title:focus-visible) {
  outline: 2px solid var(--hub-focus);
  outline-offset: 2px;
}

.md-typeset .news-card .news-card-title:focus-visible {
  outline: none;
}

.md-typeset .news-card .news-card-title:is(:hover, :focus-visible) {
  color: var(--md-typeset-a-color) !important;
  text-decoration: underline;
}

.md-typeset .news-card .source-chip {
  max-width: none;
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--md-default-fg-color--light);
  font-size: 0.68rem;
  white-space: normal;
  overflow: visible;
}

.md-typeset .news-card .news-card-head {
  align-items: baseline;
}

/* Video and podcast descriptions are cut to three lines; their bottom
   padding sat inside the cut, so the top of a fourth line showed through
   under the ellipsis. The space moves outside the clipped box. */
.video-card .video-card-desc {
  padding-bottom: 0;
  margin-bottom: 0.65rem;
}

/* --- Topic chips: one labelled row (L19) ----------------------------------
   Toggle buttons with aria-pressed. The pressed chip is tinted and ticked
   rather than filled: filled means a button that starts something. On
   phones the row scrolls sideways instead of wrapping into a block that
   pushed the first card down (141 to 178px); from 45em it wraps, so a
   mouse never needs a hidden scroll. */
.md-typeset .topic-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0.2rem 0 0;
  padding: 0.15rem 0.1rem;
}

/* The row ships hidden until topics.js can make it work; display: flex
   above would otherwise outrank the browser's own [hidden] rule. */
.md-typeset .topic-chips[hidden] {
  display: none;
}

.md-typeset .topic-chips__label {
  flex: none;
  margin-right: 0.15rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--md-default-fg-color--light);
}

.md-typeset .topic-chips .topic-chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 2rem;
  margin: 0;
  padding: 0 0.75rem;
  border: 1px solid var(--md-default-fg-color--light);
  border-radius: 1rem;
  background: transparent;
  color: var(--md-default-fg-color);
  font-family: inherit;
  font-size: 0.72rem;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
}

.md-typeset .topic-chips .topic-chip:hover {
  border-color: var(--md-typeset-a-color);
  color: var(--md-typeset-a-color);
}

.md-typeset .topic-chips .topic-chip[aria-pressed="true"] {
  border-color: var(--md-typeset-a-color);
  background: var(--news-chip-on-bg);
  color: var(--news-chip-on-fg);
  font-weight: 700;
}

.md-typeset .topic-chips .topic-chip[aria-pressed="true"]::before {
  content: "\2713";
  content: "\2713" / "";
}

.md-typeset .topic-status {
  margin: 0.3rem 0 0;
  font-size: 0.72rem;
  color: var(--md-default-fg-color--light);
}

.md-typeset .topic-status:empty {
  margin: 0;
}

@media screen and (min-width: 45em) {
  .md-typeset .topic-chips .topic-chip {
    min-height: 1.7rem;
  }
}

@media screen and (max-width: 44.9375em) {
  .md-typeset .topic-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-right: 1.5rem;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 1.5rem), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 1.5rem), transparent);
  }

  .md-typeset .topic-chips::-webkit-scrollbar {
    display: none;
  }
}

/* --- Wide tables stack into labelled rows on phones (L20) -----------------
   scripts/layout_news.py marks registered tables data-stack and labels
   each body cell with its column. Below 45em each row becomes a card: the
   first cell as its heading, the rest as "Label: value" lines, empty cells
   left out. From 45em the table is an ordinary table. */
@media screen and (max-width: 44.9375em) {
  .md-typeset table[data-stack]:not([class]) {
    display: block;
    width: 100%;
    border: 0;
    border-radius: 0;
    background: none;
    overflow: visible;
  }

  .md-typeset table[data-stack]:not([class]) thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .md-typeset table[data-stack]:not([class]) tbody {
    display: block;
  }

  .md-typeset table[data-stack]:not([class]) tbody tr {
    display: block;
    margin: 0 0 0.6rem;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--md-typeset-table-color);
    border-radius: 0.4rem;
    background: var(--md-default-bg-color);
  }

  .md-typeset table[data-stack]:not([class]) tbody tr:hover {
    background: var(--md-default-bg-color);
    box-shadow: none;
  }

  .md-typeset table[data-stack]:not([class]) tbody tr {
    transition: none;
  }

  .md-typeset table[data-stack]:not([class]) td {
    display: block;
    padding: 0.15rem 0;
    border: 0;
  }

  .md-typeset table[data-stack]:not([class]) td:first-child {
    padding-bottom: 0.3rem;
    font-size: 0.8rem;
    font-weight: 700;
  }

  .md-typeset table[data-stack]:not([class]) td:not(:first-child)::before {
    content: attr(data-label) ": ";
    font-weight: 600;
    color: var(--md-default-fg-color--light);
  }

  .md-typeset table[data-stack]:not([class]) td:empty {
    display: none;
  }

  /* Material's scroll wrapper has nothing left to scroll. */
  .md-typeset .md-typeset__scrollwrap:has(> .md-typeset__table > table[data-stack]) {
    margin-left: 0;
    margin-right: 0;
    overflow: visible;
  }

  .md-typeset .md-typeset__table:has(> table[data-stack]) {
    padding: 0;
  }
}

/* --- LiveBench keeps a scrolling table (L20) -------------------------------
   A numeric comparison reads better sideways than stacked: rank and model
   stay put while the category scores scroll under them. layout-news.js
   adds .is-scrollable when the table is wider than its column, which is
   when the swipe hint shows. */
.md-typeset .livebench-table table:not([class]) {
  overflow: visible;
}

.md-typeset .livebench-table table:not([class]) :is(th, td):nth-child(-n + 2) {
  position: sticky;
  z-index: 1;
  background-color: var(--md-default-bg-color);
}

.md-typeset .livebench-table table:not([class]) :is(th, td):nth-child(1) {
  left: 0;
  box-sizing: border-box;
  width: 2.4rem;
  min-width: 2.4rem;
  max-width: 2.4rem;
}

.md-typeset .livebench-table table:not([class]) :is(th, td):nth-child(2) {
  left: 2.4rem;
  box-shadow: inset -1px 0 0 var(--news-sticky-edge);
}

/* On phones the held model column may wrap at its hyphens, so it takes
   under half the width and two score columns show beside it. */
@media screen and (max-width: 44.9375em) {
  .md-typeset .livebench-table table:not([class]) td:nth-child(2) {
    min-width: 8rem;
    max-width: 8rem;
    white-space: normal;
  }
}

.md-typeset .livebench-table.is-scrollable::before {
  content: "Swipe for category scores";
  display: block;
  margin-bottom: -0.4rem;
  font-size: 0.72rem;
  color: var(--md-default-fg-color--light);
}

/* --- Search results that can be scanned (L10) ------------------------------
   Matched words were amber at 1.91:1; they are now bold in the link
   colour. On phones each result's text stops at three lines: one Prompt
   Library result used to run to 4,772px. */
.md-search-result mark {
  background: none;
  color: var(--md-typeset-a-color);
  font-weight: 700;
  text-decoration: none;
}

.md-search-result .md-typeset h1 mark,
.md-search-result .md-typeset h2 mark {
  color: var(--md-typeset-a-color);
}

/* A result's text is whatever the section holds (lists, tables, a whole
   prompt), so it is run together as one paragraph and cut after three
   lines under its title on phones (four on wider screens, where a Prompt
   Library result was 3,163px); the link goes to the full text.
   layout-news.js moves the cut text so the first matched word is always
   among the lines that show. */
.md-search-result__article {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  overflow: hidden;
}

/* Nested blocks (Material's lists are flow-root) would each start a
   formatting context the clamp cannot see into, so they go inline. */
.md-search-result .md-search-result__article.md-typeset :is(p, ul, ol, li, pre, code, blockquote, dl, dt, dd, table, thead, tbody, tr, td, th) {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-size: inherit;
  white-space: normal;
}

.md-search-result .md-search-result__article.md-typeset :is(p, li, dt, dd, td, th)::after {
  content: " ";
}

@media screen and (max-width: 44.9375em) {
  .md-search-result__article {
    -webkit-line-clamp: 4;
    line-clamp: 4;
  }
}

/* The News Archive's list of weeks runs in columns across the frame, read
   down each column, newest first (space round, 2026-09-27). */
@media screen and (min-width: 60em) {
  .md-typeset:has(> h1#news-archive) > ul {
    columns: 3;
    column-gap: 2.4rem;
  }
  .md-typeset:has(> h1#news-archive) > ul > li {
    break-inside: avoid;
  }
}

/* =========================================================================
   Week round (designer C, 2026-09-27): This Week and the weekly digests.
   scripts/layout_week.py wraps each feed in a panel (.wk-feed, the Latest
   News look of News & Events: outline, the news hue's left edge, its name
   as the heading, items as a title with "source · date" under it, thin
   rules between) and the run of feeds in one row (.wk-feeds). Nothing here
   applies to the feed pages, which keep their single column.
   ========================================================================= */
.md-typeset .wk-feeds {
  display: grid;
  gap: 1rem;
  margin: 0.4rem 0 1.6rem;
}

@media screen and (min-width: 60em) {
  .md-typeset .wk-feeds {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
  }
  .md-typeset .wk-feeds[data-wk-n="2"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .md-typeset .wk-feeds[data-wk-n="1"] {
    grid-template-columns: minmax(0, 44rem);
  }
  .md-typeset .wk-feeds[data-wk-n="4"] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  /* A digest's feed with far more items than the others: two tracks, its
     list in two columns, so the columns beside it are not left standing
     over a tall empty space. */
  .md-typeset .wk-feed--wide {
    grid-column: span 2;
  }
  .md-typeset .wk-feed.wk-feed--wide .news-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* A list in more than one column (a digest's wide feed, the feed pages):
   a grid, so items line up across each row and read left to right then
   down. Every item has the same rule under it, none above; the list clips
   its last pixel, which is the last row's rule, so no column starts or
   ends with a stray line. A row's items stretch to its height, so the
   rules of one row sit level. */
.md-typeset .wk-feed.wk-feed--wide .news-list,
.md-typeset .wk-feed.wk-feed--page .news-list {
  display: grid;
  column-gap: 1.6rem;
  align-items: stretch;
  clip-path: inset(0 0 1px 0);
}

.md-typeset .wk-feed--wide .news-list > .news-card,
.md-typeset .wk-feed--page .news-list > .news-card,
.md-typeset .wk-feed--wide .news-list > .news-card:first-child,
.md-typeset .wk-feed--page .news-list > .news-card:first-child {
  border-top: 0;
  border-bottom: 1px solid var(--hub-row-rule);
}

.md-typeset .wk-feed.ne-card {
  padding: 0.85rem 1rem 0.6rem;
}

.md-typeset .wk-feed > h2 {
  margin: 0 0 0.55rem;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
}

.md-typeset .wk-feed > h2 .headerlink {
  display: none;
}

/* Items: the Latest News rows, with the summary kept under them. */
.md-typeset .wk-feed .news-list {
  gap: 0;
  margin-top: 0.5rem;
}

.md-typeset .wk-feed .news-card {
  padding: 0.55rem 0;
  border: 0;
  border-top: 1px solid var(--hub-row-rule);
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.md-typeset .wk-feed .news-list > .news-card:first-child {
  border-top: 0;
}

.md-typeset .wk-feed .news-card-body {
  display: flex;
  flex-direction: column;
}

.md-typeset .wk-feed .news-card-title {
  order: 1;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--md-typeset-a-color) !important;
}

.md-typeset .wk-feed .news-card-head {
  order: 2;
  display: block;
  margin: 0.15rem 0 0;
  font-size: 0.68rem;
  line-height: 1.4;
  color: var(--md-default-fg-color--light);
}

.md-typeset .wk-feed .news-card .source-chip {
  display: inline;
  font-size: inherit;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.md-typeset .wk-feed .news-card-date {
  font-size: inherit;
  white-space: normal;
}

.md-typeset .wk-feed .news-card-date::before {
  content: "\00b7";
  content: "\00b7" / "";
  margin: 0 0.35em;
}

.md-typeset .wk-feed .news-card-summary {
  order: 3;
  margin: 0.25rem 0 0;
  font-size: 0.72rem;
  line-height: 1.45;
}

.md-typeset .wk-feed .news-card-thumb {
  display: none;
}

/* The brief inside a panel: no second box, the hue's rule is the panel's. */
.md-typeset .wk-feed .section-brief {
  margin: 0 0 0.6rem;
  padding: 0;
  border: 0;
  background: none;
  font-size: 0.74rem;
}

/* "Show the other N items" closes the column, full width of the panel. */
.md-typeset .wk-feed > details.abstract {
  margin: 0.6rem 0 0.2rem;
}

/* While a topic is chosen, the collapsed tier's matches carry on the list
   (docs/javascripts/topics.js marks it .is-merged): no header, no box, no
   gap, one separator rule between every two items and none above the first
   match (.is-lead). */
.md-typeset details.is-merged {
  margin: 0;
  padding: 0;
  border: 0;
}

.md-typeset details.is-merged > summary {
  display: none;
}

.md-typeset details.is-merged > p {
  margin: 0;
}

.md-typeset details.is-merged .news-list {
  margin-top: 0;
}

.md-typeset .wk-feed details.is-merged .news-list > .news-card:first-child {
  border-top: 1px solid var(--hub-row-rule);
}

.md-typeset .wk-feed .news-list > .news-card.is-lead,
.md-typeset .wk-feed details.is-merged .news-list > .news-card.is-lead {
  border-top: 0;
}

/* --- The brief's fold (This Week and the feed pages) -------------------------
   The continuation is the same text carrying on: a quiet link-coloured
   summary, then plain paragraphs, no box. Listen and the date line follow,
   outside it. */
.md-typeset .section-brief > details.section-brief-more {
  margin: 0 0 0.6rem;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  font-size: inherit;
}

.md-typeset .section-brief > details.section-brief-more > summary {
  display: inline-block;
  min-height: 1.6rem;
  margin: 0;
  padding: 0;
  background: none;
  color: var(--md-typeset-a-color);
  font-weight: 600;
  cursor: pointer;
}

.md-typeset .section-brief > details.section-brief-more > summary::before,
.md-typeset .section-brief > details.section-brief-more > summary::after {
  display: none;
}

.md-typeset .section-brief > details.section-brief-more > summary:hover {
  text-decoration: underline;
}

.md-typeset .section-brief > details.section-brief-more > summary:focus-visible {
  outline: 2px solid var(--hub-focus);
  outline-offset: 2px;
}

/* Opened, the label gives way so the continuation reads straight on from
   the lede; the "Hide the rest" button at its end folds it again. Only when
   that button works (layout-news.js adds .has-hide): without JavaScript the
   label stays and closes the fold. */
.md-typeset .section-brief > details.section-brief-more.has-hide[open] > summary {
  display: none;
}

.md-typeset .section-brief > details.section-brief-more > .section-brief-hide {
  display: inline-block;
  min-height: 1.6rem;
  margin: 0 0 0.2rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--md-typeset-a-color);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.md-typeset .section-brief > details.section-brief-more > p[tabindex="-1"]:focus {
  outline: none;
}

.md-typeset .section-brief > details.section-brief-more > .section-brief-hide[hidden] {
  display: none;
}

.md-typeset .section-brief > details.section-brief-more > .section-brief-hide:hover {
  text-decoration: underline;
}

.md-typeset .section-brief > details.section-brief-more > .section-brief-hide:focus-visible {
  outline: 2px solid var(--hub-focus);
  outline-offset: 2px;
}

.md-typeset .section-brief > details.section-brief-more > p {
  margin: 0 0 0.6rem;
}

.md-typeset .section-brief > .section-brief-date {
  margin: 0.3rem 0 0.8rem;
  font-size: 0.68rem;
  color: var(--md-default-fg-color--light);
}

/* --- The rest of the page ----------------------------------------------------- */
.md-typeset .wk-media,
.md-typeset .wk-also,
.md-typeset .wk-brief,
.md-typeset .wk-updates {
  margin: 0 0 1.6rem;
}

/* This Week: ten videos show, in two rows of five across the frame. */
@media screen and (min-width: 60em) {
  .md-typeset .wk-media > .video-grid:not(.podcast-grid),
  .md-typeset .wk-media details .video-grid:not(.podcast-grid) {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* Podcasts: square art at a card's size, never the frame's width. */
.md-typeset .wk-podcasts .podcast-grid {
  grid-template-columns: repeat(auto-fill, minmax(11rem, 14rem));
}

/* A digest's videos and podcasts share one row: each card one share of
   the width (at most 18rem), videos first. */
@media screen and (min-width: 60em) {
  .md-typeset .wk-mediarow {
    display: grid;
    grid-template-columns: var(--wk-cols);
    column-gap: 1.2rem;
    align-items: start;
    max-width: calc(var(--wk-cards) * 18rem);
    margin: 0 0 1.6rem;
  }
  .md-typeset .wk-mediarow > .wk-media {
    margin: 0;
  }
  .md-typeset .wk-mediarow > .wk-media > .video-grid {
    grid-template-columns: repeat(var(--wk-n), minmax(0, 1fr));
  }
}

/* The digest's week in brief: a readable measure in two columns. */
@media screen and (min-width: 60em) {
  .md-typeset .wk-brief .section-brief {
    columns: 2;
    column-gap: 2.4rem;
    padding-bottom: 0.9rem;
  }
  .md-typeset .wk-brief .section-brief > * {
    break-inside: avoid;
  }
  .md-typeset .wk-brief .section-brief > .listen {
    column-span: all;
  }
}

/* The digest's short updates (conference calendar, new opportunities): a
   row of slim panels, as many across as there are. */
.md-typeset .wk-updates {
  display: grid;
  gap: 1rem;
}

@media screen and (min-width: 60em) {
  .md-typeset .wk-updates[data-wk-n="2"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.md-typeset .wk-update {
  padding: 0.8rem 1rem 0.3rem;
  border: 1px solid var(--hub-row-rule);
  border-radius: 0.6rem;
}

.md-typeset .wk-update > h2 {
  margin: 0 0 0.4rem;
  font-size: 0.85rem;
  font-weight: 700;
}

.md-typeset .wk-update > h2 .headerlink {
  display: none;
}

/* "Also this week": the topic groups in balanced columns; a group may
   continue into the next column, an item never splits and a group's name
   stays with its first item. */
@media screen and (min-width: 60em) {
  .md-typeset .wk-also {
    columns: 3;
    column-gap: 2rem;
  }
  .md-typeset .wk-also > h2 {
    column-span: all;
  }
  .md-typeset .wk-also li {
    break-inside: avoid-column;
  }
  .md-typeset .wk-also > p {
    break-after: avoid-column;
  }
}

/* A panel's column is its own width, whatever a chips row inside it would
   like (the row scrolls sideways on phones instead). */
@media screen and (max-width: 59.9375em) {
  .md-typeset .wk-feeds {
    grid-template-columns: minmax(0, 1fr);
  }
}

.md-typeset .wk-feed {
  min-width: 0;
}

/* Inside a panel the Listen row is the compact size of the rest of the
   panel's controls: a 30px row, Listen sized to its word. */
.md-typeset .wk-feed .listen-btn {
  min-height: 1.6rem;
  padding: 0.15rem 0.6rem;
  border-width: 1px;
  border-radius: 0.8rem;
  font-size: 0.7rem;
}

.md-typeset .wk-feed .listen-btn svg {
  width: 0.9rem;
  height: 0.9rem;
}

.md-typeset .wk-feed .listen-play {
  flex: 0 0 auto;
  min-width: 0;
}

.md-typeset .wk-feed .listen-rate {
  min-width: 0;
}

.md-typeset .wk-feed .listen-note {
  font-size: 0.66rem;
}

/* The page's opening notes keep a readable line across the wider frame. */
.md-typeset:has(> .wk-feeds) > p,
.md-typeset:has(> .wk-brief) > p {
  max-width: 44rem;
}

/* --- The feed pages (week round, part 2) -------------------------------------
   Medical Education, Clinical Practice and General AI in the This Week
   look: one news-hue panel on the full frame (scripts/layout_week.py), the
   brief across its top (its text at a reading measure, Listen beside it),
   the Topic chips, then the items as
   a grid in rows: three across from 76em, two from 60em, one on phones. */
.md-typeset:has(> .wk-feed--page) > p {
  max-width: 44rem;
}

.md-typeset .wk-feed--page.ne-card {
  margin: 0.4rem 0 1.6rem;
  padding: 1rem 1.2rem 0.8rem;
}

.md-typeset .wk-feed.wk-feed--page .news-list {
  grid-template-columns: minmax(0, 1fr);
}

@media screen and (min-width: 60em) {
  .md-typeset .wk-feed.wk-feed--page .news-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* The brief's text at a reading measure on the left, opened or closed
     (the continuation carries straight on under the lede); the player and
     the date line beside it on the right, level with the lede. */
  .md-typeset .wk-feed--page .section-brief {
    display: grid;
    grid-template-columns: minmax(0, 46rem) minmax(14rem, 1fr);
    column-gap: 3rem;
    align-items: start;
  }
  .md-typeset .wk-feed--page .section-brief > * {
    grid-column: 1;
  }
  .md-typeset .wk-feed--page .section-brief > .listen {
    grid-column: 2;
    grid-row: 1;
  }
  .md-typeset .wk-feed--page .section-brief > .section-brief-date {
    grid-column: 2;
    grid-row: 2;
    margin-top: 0;
  }
}

@media screen and (min-width: 76em) {
  .md-typeset .wk-feed.wk-feed--page .news-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}