/* Records: the journal list and the record reader. Loaded last, after the
   theme, so these rules settle both surfaces. */

/* ---- Journal page ---- */
:root { --record-column: 960px; }
.journal-view .journal { width: min(var(--record-column), 100%); margin: 0 auto; padding: 22px 0 80px; }
.journal-toolbar { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 14px; }
.journal-toolbar[hidden] { display: none; }
.journal-count { margin: 0 6px 0 2px; color: var(--label-3); font-size: 13px; font-variant-numeric: tabular-nums; }
.journal-count:empty { display: none; }
.quick-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.quick-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 11px;
  border: 1px solid var(--separator);
  border-radius: 980px;
  background: var(--surface);
  color: var(--label-2);
  font-size: 12.5px;
  line-height: 1;
  cursor: pointer;
}
.quick-chip svg { flex: none; color: var(--label-4); }
.quick-chip:hover { background: var(--fill); }
.quick-chip.is-on { border-color: transparent; background: var(--accent-soft); color: var(--accent); }
.quick-chip.is-on svg { color: currentColor; }
.quick-chip [data-quick-label] { max-width: 12em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quick-chip:focus-visible,
.quick-clear:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.quick-clear { height: 28px; padding: 0 6px; border: 0; background: none; color: var(--label-3); font-size: 12.5px; cursor: pointer; }
.quick-clear:hover { color: var(--label); }
.quick-filter-pop {
  position: absolute;
  z-index: var(--z-popover);
  top: calc(100% + 6px);
  width: 250px;
  max-width: calc(100vw - 36px);
  padding: 10px;
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-pop);
}
.quick-filter-pop[hidden] { display: none; }
.quick-pop-title { margin: 0 2px 8px; color: var(--label-3); font-size: 12px; }
#quick-month { width: 100%; height: 34px; padding: 0 10px; border: 1px solid var(--separator); border-radius: 8px; background: var(--surface); color: var(--label); font: inherit; font-size: 14px; }
#quick-month:focus { border-color: var(--accent); outline: 0; box-shadow: 0 0 0 3px rgb(0 113 227 / 18%); }
.quick-pop-clear[hidden] { display: none; }
.quick-pop-clear { margin-top: 8px; padding: 4px 2px; border: 0; background: none; color: var(--accent); font-size: 13px; cursor: pointer; }
.quick-pop-tags { display: flex; flex-wrap: wrap; gap: 6px; max-height: 240px; overflow: auto; }
.quick-pop-tag { height: 28px; padding: 0 11px; border: 1px solid var(--separator); border-radius: 980px; background: var(--surface); color: var(--label-2); font-size: 12.5px; cursor: pointer; }
.quick-pop-tag:hover:not(:disabled) { background: var(--fill); }
.quick-pop-tag[aria-pressed='true'] { border-color: transparent; background: var(--accent-soft); color: var(--accent); }
.quick-pop-tag:disabled { opacity: .45; cursor: default; }
.quick-pop-empty { margin: 0 2px; color: var(--label-4); font-size: 12.5px; }

/* Records as posts: the text first, photos below, tags last; the date in
   grey at the top right. Long posts are cut at a fixed height and fade. */
.record-feed { display: block; max-width: none; margin: 0; }
/* Each record is its own white card with room between cards, so one post
   ends clearly before the next begins. */
.record-feed .journal-entry {
  position: relative;
  display: block;
  margin: 0 0 14px;
  padding: 18px 22px 20px;
  border-radius: var(--radius-l);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: box-shadow 150ms ease;
}
.record-feed .journal-entry:hover { box-shadow: var(--shadow-raised); }
.record-feed .journal-entry.feed-motion { opacity: 0; transition: opacity 300ms ease, box-shadow 150ms ease; }
.record-feed .journal-entry.feed-motion.is-visible { opacity: 1; }
.entry-pinned { display: flex; align-items: center; gap: 5px; margin: 0 0 6px; color: var(--label-3); font-size: 12px; font-weight: 500; }
.entry-pin { display: inline-flex; color: var(--label-3); }
.record-feed .entry-author { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; color: var(--label-3); font-size: 12.5px; }
.record-feed .entry-content { --post-line: 1.72; position: relative; max-height: calc(16px * var(--post-line) * 9); overflow: hidden; color: var(--label); font-size: 16px; line-height: var(--post-line); overflow-wrap: anywhere; }
.record-feed .entry-content.is-clamped { mask-image: linear-gradient(to bottom, #000 calc(100% - 3.2em), transparent); -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 3.2em), transparent); }
.record-feed .entry-stamp { float: right; display: inline-flex; align-items: center; gap: 5px; margin: 0 0 4px 14px; line-height: 1.72; }
.record-feed .entry-stamp .entry-important { display: inline-flex; color: var(--star); }
.record-feed .entry-date {
  display: inline;
  flex-direction: row;
  padding: 0;
  border: 0;
  background: none;
  color: var(--label-4);
  font: inherit;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  cursor: pointer;
}
.record-feed .entry-date:hover { color: var(--label-2); text-decoration: underline; text-underline-offset: 3px; }
.record-feed .journal-entry-title { margin: 0 0 4px; font: inherit; font-size: 18px; font-weight: 700; line-height: 1.5; letter-spacing: 0; }
.entry-title-button { display: inline; padding: 0; border: 0; background: none; color: var(--label); font: inherit; text-align: left; cursor: pointer; }
.entry-title-button:focus-visible,
.record-feed .entry-date:focus-visible,
.journal-photo:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.record-feed .journal-copy { margin: 0; white-space: pre-wrap; }
.record-feed .journal-copy.formatted-body { white-space: normal; }
.record-feed .journal-copy p { margin: 0 0 .55em; white-space: pre-wrap; }
.record-feed .journal-copy h1,
.record-feed .journal-copy h2 { margin: .7em 0 .3em; font-size: 18px; font-weight: 700; line-height: 1.5; }
.record-feed .journal-copy h3 { margin: .6em 0 .25em; font-size: 16.5px; font-weight: 700; line-height: 1.5; }
.record-feed .journal-copy > :first-child { margin-top: 0; }
.record-feed .journal-copy > :last-child { margin-bottom: 0; }
.record-feed .journal-copy ul,
.record-feed .journal-copy ol { margin: .3em 0 .55em; padding-left: 1.5em; }
.record-feed .journal-copy li > p { margin: 0 0 .15em; }
.record-feed .journal-copy blockquote { margin: .4em 0 .6em; padding-left: 12px; border-left: 3px solid var(--separator); color: var(--label-3); }
.record-feed .journal-copy table { width: 100%; border-collapse: collapse; font-size: 14px; }
.record-feed .journal-copy th,
.record-feed .journal-copy td { padding: 4px 8px; border: 1px solid var(--separator); text-align: left; }
.record-feed .journal-copy a { color: var(--accent); text-decoration: none; }
.record-feed .journal-copy a:hover { text-decoration: underline; }
.record-feed .journal-copy .body-math { font-family: var(--font-mono, monospace); }

/* Photos: one at its own shape, two side by side, three as one large and
   two small, four in a square; more than four say how many are left. */
.record-feed .entry-media { display: grid; gap: 3px; margin: 12px 0 0; overflow: hidden; border: 1px solid var(--separator); border-radius: 16px; }
.record-feed .entry-media-2 { grid-template-columns: 1fr 1fr; aspect-ratio: 5 / 2; }
.record-feed .entry-media-3 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; aspect-ratio: 2 / 1; }
.record-feed .entry-media-3 > :first-child { grid-row: span 2; }
.record-feed .entry-media-4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; aspect-ratio: 2 / 1; }
.record-feed .journal-photo { position: relative; display: block; min-width: 0; min-height: 0; padding: 0; border: 0; background: var(--fill); cursor: zoom-in; }
.record-feed .journal-photo img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.record-feed .entry-media-1 .journal-photo img { height: auto; max-height: 600px; min-height: 120px; }
.journal-photo-more { position: absolute; inset: 0; display: grid; place-items: center; background: rgb(0 0 0 / 42%); color: var(--label-inverse); font-size: 22px; font-weight: 600; }

.record-feed .entry-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 10px 0 0; }
.record-feed .entry-meta .record-tags { gap: 5px; margin: 0; }
.record-feed .record-tag { padding: 1px 9px; border: 0; border-radius: 6px; background: var(--fill); color: var(--label-3); font-size: 12px; line-height: 1.7; }
.record-feed .record-tag:hover { color: var(--label); }
.record-feed > .load-more,
.record-feed > .filter-retry { display: block; width: auto; margin: 24px auto 8px; padding: 8px 22px; border: 1px solid var(--separator); border-radius: 980px; background: var(--surface); color: var(--label-2); font-size: 13px; cursor: pointer; }
.record-feed > .load-more:hover { background: var(--fill); }
.journal-view .empty { padding: 64px 0; text-align: center; }

/* ---- The reader and the editor: sheets over the page's column ----
   They cover the page beside the sidebar (and the assistant, when it sits
   beside the page), header included: the sheet's own bar (back, the date,
   the record's tools) takes the header's place, so there is one bar at the
   top. The record reads in the same column as the list while the
   navigation and the chat stay usable. */
.page-sheet {
  position: fixed;
  z-index: var(--z-sheet);
  inset: 0 0 0 var(--sidebar-w);
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: auto;
  overscroll-behavior: contain;
  border: 0;
  border-radius: 0;
  background: var(--bg);
  box-shadow: none;
  color: var(--label);
}
.page-sheet:not([open]) { display: none; }
/* Older rules size the editor as a dialog; a sheet takes its box. */
#record-reader.page-sheet,
#editor.page-sheet { width: auto; height: auto; max-width: none; max-height: none; }
/* The bar runs the sheet's full width like the header it covers; what is
   in it and under it keeps to the list's column: the page's side margin,
   or more where the window is wider than the column. */
.page-sheet { --sheet-gutter: max(clamp(20px, 4vw, 56px), calc((100% - var(--record-column)) / 2)); }
html:has(.app-sidebar[hidden]) .page-sheet { left: 0; }
@media (min-width: 1100px) { html.ai-open.ai-mode-side .page-sheet { right: var(--ai-side-w); } }
/* The page under a sheet stays where it was. Only the root stops
   scrolling: a body that clipped its own overflow would become the scroll
   box and the sticky header would slide off with the page. */
html.sheet-open { overflow: hidden; scrollbar-gutter: stable; }
html:has(dialog[open]) body { overflow: visible; }
html:has(#editor[open]) .ai-avatar { display: none; }
#toast { z-index: var(--z-toast); }

#record-reader .viewer-shell { display: block; }
#record-reader .story-panel {
  position: static;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: visible;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--label);
  animation: sheet-in 180ms ease-out;
}
@keyframes sheet-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* The bar over the record: back, the date, the record's tools. */
#record-reader .story-panel-heading {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  width: auto;
  height: var(--header-h);
  margin: 0;
  padding: 0 var(--sheet-gutter);
  border-bottom: 1px solid var(--separator);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  color: var(--label);
  font-size: 13px;
  letter-spacing: 0;
}
.story-back {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 2px;
  height: 34px;
  margin: 0 4px 0 -6px;
  padding: 0 12px 0 4px;
  border: 0;
  border-radius: 980px;
  background: none;
  color: var(--label-2);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.story-back:hover { background: var(--fill); color: var(--label); }
.story-back:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.story-heading-meta { display: flex; flex: 1; align-items: center; gap: 8px; min-width: 0; margin: 0; color: var(--label-3); font-size: 13px; white-space: nowrap; }
.story-visibility-badge { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 980px; background: var(--fill); color: var(--label-3); font-size: 12px; }
.story-visibility-badge.is-public { background: var(--success-soft); color: var(--success); }
.story-actions { position: relative; display: flex; align-items: center; gap: 2px; margin-right: -6px; }
#record-reader .story-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 34px;
  min-width: 0;
  height: 34px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--label-2);
  font: inherit;
  backdrop-filter: none;
  cursor: pointer;
}
#record-reader .story-icon:hover,
#record-reader .story-icon[aria-expanded='true'] { background: var(--fill); color: var(--label); }
#record-reader .story-icon:disabled { opacity: .5; cursor: default; }
#record-reader .story-icon:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
#record-reader #story-important[aria-pressed='true'] { color: var(--star); }
#record-reader #story-important[aria-pressed='true'] path,
#record-reader #story-pin[aria-pressed='true'] path:first-child { fill: currentColor; }
#record-reader #story-pin[aria-pressed='true'],
#record-reader #story-threads-button.is-active { color: var(--accent); }
#record-reader .story-icon [data-ai-face] { display: grid; place-items: center; }
.story-tip {
  position: absolute;
  z-index: 5;
  top: calc(100% + 4px);
  left: 50%;
  padding: 4px 8px;
  border-radius: 6px;
  background: #1d1d1f;
  color: var(--label-inverse);
  font-size: 11.5px;
  line-height: 1.3;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-50%);
  transition: opacity 120ms ease;
}
@media (hover: hover) {
  .story-icon:hover .story-tip { opacity: 1; transition-delay: 250ms; }
}
.story-icon:focus-visible .story-tip { opacity: 1; }
.story-icon[aria-expanded='true'] .story-tip { opacity: 0; }

/* The "主线" and "···" menus hang under the toolbar's right edge. */
#record-reader .story-thread-menu,
.story-more-menu {
  position: absolute;
  z-index: 10;
  top: calc(100% + 8px);
  right: 0;
  display: grid;
  gap: 1px;
  width: 232px;
  max-height: 60dvh;
  padding: 6px;
  overflow: auto;
  border: 0;
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 0 0 1px rgb(0 0 0 / 6%), 0 14px 40px rgb(0 0 0 / 14%);
  color: var(--label);
}
#record-reader .story-thread-menu[hidden],
.story-more-menu[hidden] { display: none; }
.story-more-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--label);
  font: inherit;
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
}
.story-more-menu button svg { flex: none; color: var(--label-3); }
.story-more-menu button:hover:not(:disabled),
.story-more-menu button:focus-visible { background: var(--fill); outline: 0; }
.story-more-menu button:disabled { color: var(--label-4); cursor: default; }
.story-more-menu button:disabled svg { color: var(--label-4); }
.story-more-menu small { margin-left: auto; color: var(--label-4); font-size: 11px; }
.story-more-menu small[hidden] { display: none; }
.story-more-menu .is-danger,
.story-more-menu .is-danger svg { color: var(--danger); }
.story-more-menu hr { margin: 5px 4px; border: 0; border-top: 1px solid var(--separator); }
.story-thread-menu-title { margin: 4px 8px 4px; color: var(--label-3); font-size: 11.5px; }
.story-thread-menu-empty { margin: 4px 8px; color: var(--label-3); font-size: 12.5px; }
.story-thread-option { display: flex; align-items: center; gap: 9px; padding: 8px; border-radius: 8px; font-size: 13.5px; cursor: pointer; }
.story-thread-option:hover { background: var(--fill); }
.story-thread-option span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.story-thread-option small { color: var(--label-4); font-size: 11px; }
.story-thread-option input { margin: 0; accent-color: var(--accent); }
.story-thread-new { margin-top: 4px; padding: 9px 8px; border: 0; border-top: 1px solid var(--separator); border-radius: 0 0 8px 8px; background: transparent; color: var(--accent); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; }
.story-thread-new:hover { background: var(--fill); }

/* The page itself: a large title, roomy body text. */
#record-reader .story-paper {
  width: auto;
  height: auto;
  margin: 0 var(--sheet-gutter);
  padding: 26px 22px 88px;
  overflow: visible;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.story-paper-meta { display: none; }
#record-reader #story-title { margin: 0 0 22px; color: var(--label); font: 700 28px/1.3 var(--font-display); letter-spacing: -.01em; overflow-wrap: anywhere; }
#record-reader #story-content { margin: 0; color: #2c2c2e; font-size: 17px; line-height: 1.85; white-space: pre-wrap; overflow-wrap: anywhere; }
#record-reader #story-content.formatted-body { white-space: normal; }
#record-reader #story-content.formatted-body p { margin: 0 0 .8em; }
#record-reader #story-content.formatted-body li > p { margin: 0 0 .25em; }
#record-reader #story-content.formatted-body h2 { margin: 1.4em 0 .5em; font-size: 21px; font-weight: 600; line-height: 1.4; }
#record-reader #story-content.formatted-body h3 { margin: 1.3em 0 .45em; font-size: 18px; font-weight: 600; line-height: 1.45; }
#record-reader #story-content.formatted-body > :first-child { margin-top: 0; }
#record-reader #story-title[hidden] + #story-content.formatted-body > h1:first-child,
#record-reader #story-title[hidden] + #story-content.formatted-body > h2:first-child { font-size: 24px; line-height: 1.4; }
#record-reader #story-content.formatted-body blockquote { border-left-color: var(--separator); color: var(--label-3); }
#record-reader #story-content a { color: var(--accent); }
#record-reader #story-content .body-image { max-width: 100%; max-height: 640px; margin: 22px auto; border-radius: 12px; box-shadow: none; }
#record-reader .story-paper .record-placeholder,
.record-placeholder { padding-top: 8px; }

/* Under the body: tags, threads and cited records, one labelled row each. */
.story-foot { display: grid; gap: 10px; margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--separator); }
.story-foot:not(:has(> :not([hidden]))) { display: none; }
#story-content[hidden] + .story-foot { margin-top: 0; }
#record-reader .story-foot-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; border: 0; }
#record-reader .story-foot-row[hidden] { display: none; }
.story-foot-label { flex: none; width: 40px; color: var(--label-4); font-size: 12px; }
#story-tags .record-tag { height: 26px; padding: 0 10px; border: 0; border-radius: 980px; background: var(--fill); color: var(--label-2); font-size: 12.5px; line-height: 26px; cursor: pointer; }
#story-tags .record-tag:hover { background: var(--fill-strong); }
.story-thread-chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 980px; background: var(--accent-soft); color: var(--accent); font-size: 12.5px; text-decoration: none; }
.story-thread-chip:hover { background: #d9e8fa; }
.story-thread-chip.is-done { background: var(--fill); color: var(--label-3); }
.story-thread-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.story-ref-chip { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; height: 26px; padding: 0 10px; border: 1px solid var(--separator); border-radius: 980px; background: var(--surface); color: var(--label-2); font: inherit; font-size: 12.5px; cursor: pointer; }
.story-ref-chip:hover { background: var(--fill); }
.story-ref-chip svg { flex: none; color: var(--label-4); }
.story-ref-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 760px) {
  .journal-view .journal { padding: 12px 0 96px; }
  .record-feed .journal-entry { margin-bottom: 10px; padding: 14px 16px 16px; border-radius: 14px; }
  .record-feed .entry-content { font-size: 15.5px; max-height: calc(15.5px * var(--post-line) * 10); }
  .record-feed .entry-media { border-radius: 12px; }

  /* On a phone the record and the editor fill the screen, above the tab
     bar, and close with a back arrow. */
  .page-sheet { inset: 0; z-index: var(--z-sheet-phone); padding: 0; --sheet-gutter: 0px; }
  html.sheet-open .ai-avatar { display: none; }
  #record-reader .story-panel { width: 100%; animation: reader-up 220ms cubic-bezier(.2, .8, .2, 1); }
  #record-reader .story-panel-heading { height: 52px; padding: 0 6px 0 4px; gap: 0; }
  .story-back { width: 40px; height: 40px; margin: 0; padding: 0; justify-content: center; }
  .story-back span { display: none; }
  .story-heading-meta { visibility: hidden; }
  #record-reader .story-actions { margin: 0; }
  #record-reader .story-thread-menu,
  .story-more-menu { right: 0; top: calc(100% + 2px); }
  #record-reader .story-paper { padding: 6px 22px 40px; }
  .story-paper-meta { display: block; margin: 0 0 8px; color: var(--label-3); font-size: 13px; }
  #record-reader #story-title { font-size: 25px; }
  #record-reader #story-content { font-size: 16.5px; }
}
@keyframes reader-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  #record-reader .story-panel { animation: none; }
  .record-feed .journal-entry.feed-motion { opacity: 1; transition: none; }
}

/* References keep one visible row until explicitly expanded. Clipped chips
   are inert so keyboard focus never disappears below the collapsed edge. */
.story-refs.story-foot-row { flex-wrap: nowrap; align-items: flex-start; }
.story-refs-content { display: flex; flex: 1; flex-wrap: wrap; gap: 6px; min-width: 0; }
.story-refs-content.is-collapsed { max-height: 26px; overflow: hidden; }
.story-refs-toggle { flex: none; min-height: 26px; padding: 0 4px; border: 0; background: transparent; color: var(--accent); font-size: 12px; }
.story-refs-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }