/* Story pages for search (spec 022 FR-2102, FR-2104, FR-2106, FR-2110): a story's page, the lists and the monthly archives
   that the sharePreview function renders on newlings.app. They load site.css first and this sheet after it, so they take
   the site's tokens, fonts and the shared page's column, cover, title and blue call (spec 017 FR-1614), and add the
   breadcrumb, the call under the summary, the six levels' first sentences as a ladder of cards, the key words and the
   lists of stories by day. A sheet of its own keeps the landing pages' first load free of styles they never use
   (spec 012 FR-1113, research R9). No script, no inline style, no file from another host. */

.shared-page .crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; margin: 0 0 6px; padding: 0; list-style: none; font-size: 0.9375rem; }
.shared-page .crumbs li + li::before { content: "\203A"; margin-right: 8px; color: var(--ink2); }
.shared-page .crumbs a { display: inline-flex; align-items: center; min-height: 44px; }

/* The day beside the category chip. */
.chip.day { background: var(--surface); color: var(--ink2); box-shadow: inset 0 0 0 1px var(--line); font-weight: 400; }

.story-page .summary { margin-bottom: 24px; }

/* The first call, under the summary: the button into the app, the stores' badges and the line on what the app adds. */
.app-call { display: grid; justify-items: start; gap: 14px; margin: 0 0 48px; }
.app-call .stores { justify-content: flex-start; gap: 12px 20px; }
.app-call p { margin: 0; color: var(--ink2); font-size: 0.9375rem; }

.story-page .levels, .story-page .words { margin: 0 0 40px; }
.story-page .levels h2, .story-page .words h2, .story-list-page .archive h2 {
  margin: 0 0 6px;
  font-weight: 800;
  font-size: clamp(1.5rem, 1.25rem + 1.2vw, 2rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
}
.section-line { margin: 0 0 18px; color: var(--ink2); }

/* The same story at six levels: one card per level, its key on the left. */
.openings { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.openings li {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 18px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
}
.openings .chip { display: grid; place-items: center; padding: 4px 0; font-size: 0.875rem; }
.openings p { margin: 0; font-family: var(--serif); font-size: 1.125rem; line-height: 1.5; overflow-wrap: anywhere; }

/* Key words: the word, its meaning and, on the Turkish page, its translation. */
.keywords { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 0; }
.keywords div { padding: 14px 16px 16px; border-radius: 18px; background: var(--accent-soft); }
.keywords dt { font-family: var(--serif); font-weight: 800; font-size: 1.375rem; line-height: 1.2; overflow-wrap: anywhere; }
.keywords dd { margin: 4px 0 0; }
.keywords .translation { color: var(--ink2); font-weight: 600; }
@media (min-width: 640px) {
  .keywords { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The closing call keeps the shared page's blue section; its badges sit in a row. */
.story-page .call .stores { flex-direction: row; margin-top: 22px; gap: 12px 20px; }

/* The lists and the monthly archives. */
.intro-line { margin: 0 0 22px; color: var(--ink2); font-size: 1.0625rem; }
.day-group { margin: 0 0 28px; }
.day-group h2 { margin: 0 0 4px; color: var(--ink2); font-family: var(--sans); font-weight: 600; font-size: 0.9375rem; letter-spacing: 0.02em; }
.story-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.story-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 12px;
  padding: 4px 0;
  border-bottom: 1px solid var(--line);
}
.story-list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 6px 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.1875rem;
  line-height: 1.3;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.story-list a:hover { color: var(--primary); text-decoration: underline; }
.story-list .chip { padding: 3px 10px; font-size: 0.8125rem; }
.story-list-page .archive { margin: 40px 0 0; }
.months { display: flex; flex-wrap: wrap; gap: 0 20px; margin: 0; padding: 0; list-style: none; }
.months a { display: inline-flex; align-items: center; min-height: 44px; }
.months a[aria-current] { color: var(--ink); font-weight: 600; text-decoration: none; }