/*
 * aBER Personal Timeline Theme
 * Vercel × Notion posture: quiet, restrained, information-first.
 * BroadcastChannel Base override for HEADER_INJECT.
 */

:root {
  /* Base body/media consume these layout tokens. */
  --width: 720px;
  --body-padding-inline: 24px;
  --box-margin: 0px;

  --font-main: 'MI Sans', '苹方', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-secondary: 'MI Sans', '苹方', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-scale: 15px;
  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;

  --background-color: #fcfcfd;
  --heading-color: #1b1b1b;
  --text-color: #33353a;
  --link-color: #5e6ad2;
  --visited-color: #6b74c8;
  --link-hover-color: #4f5bc2;
  --accent-color: #5e6ad2;
  --border-color: #e6e7eb;
  --control-border: #d4d6dc;
  --muted-color: #6b6f76;
  --surface-color: #ffffff;
  --code-background-color: #f3f4f7;
  --code-color: #40445a;
  --blockquote-color: #6b6f76;
  --focus-color: #5e6ad2;
  --reaction-paid-color: #6b5000;
  --reaction-paid-border-color: color-mix(in srgb, var(--reaction-paid-color) 34%, transparent);
  --reaction-paid-background-color: color-mix(in srgb, #d5a000 12%, var(--background-color));

  --shadow-soft: 0 1px 2px rgb(0 0 0 / 0.04);
  --radius-panel: 6px;
  --radius-chip: 4px;
  --radius-media: 6px;

  /* Private aliases for local chrome only. */
  --aber-subtle: #8b9098;
  --aber-selection: #eef0ff;
  --aber-border-strong: #d4d6dc;
  --aber-focus-ring: color-mix(in srgb, var(--accent-color) 16%, transparent);
}

/* Manual theme wins over system preference when data-theme is set. */
:root[data-theme='light'] {
  color-scheme: light;
}

:root[data-theme='dark'] {
  color-scheme: dark;
  --background-color: #050607;
  --heading-color: #e3e4e6;
  --text-color: #c6c8ce;
  --link-color: #606acc;
  --visited-color: #7a83d4;
  --link-hover-color: #737dd8;
  --accent-color: #606acc;
  --border-color: #202328;
  --control-border: #30343b;
  --muted-color: #9b9ea6;
  --surface-color: #0d0f12;
  --code-background-color: #191b22;
  --code-color: #c7cbea;
  --blockquote-color: #9b9ea6;
  --focus-color: #737dd8;
  --reaction-paid-color: #f0c45a;
  --reaction-paid-border-color: color-mix(in srgb, var(--reaction-paid-color) 48%, transparent);
  --reaction-paid-background-color: color-mix(in srgb, var(--reaction-paid-color) 12%, var(--background-color));
  --shadow-soft: 0 1px 2px rgb(0 0 0 / 0.32);

  --aber-subtle: #6f727b;
  --aber-selection: #202447;
  --aber-border-strong: #30343b;
}

:root[data-theme='dark'] #back-to-top img {
  filter: invert(1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --background-color: #050607;
    --heading-color: #e3e4e6;
    --text-color: #c6c8ce;
    --link-color: #606acc;
    --visited-color: #7a83d4;
    --link-hover-color: #737dd8;
    --accent-color: #606acc;
    --border-color: #202328;
    --control-border: #30343b;
    --muted-color: #9b9ea6;
    --surface-color: #0d0f12;
    --code-background-color: #191b22;
    --code-color: #c7cbea;
    --blockquote-color: #9b9ea6;
    --focus-color: #737dd8;
    --reaction-paid-color: #f0c45a;
    --reaction-paid-border-color: color-mix(in srgb, var(--reaction-paid-color) 48%, transparent);
    --reaction-paid-background-color: color-mix(in srgb, var(--reaction-paid-color) 12%, var(--background-color));
    --shadow-soft: 0 1px 2px rgb(0 0 0 / 0.32);

    --aber-subtle: #6f727b;
    --aber-selection: #202447;
    --aber-border-strong: #30343b;
  }

  :root:not([data-theme='light']) #back-to-top img {
    filter: invert(1);
  }
}

html {
  color-scheme: light dark;
  background: var(--background-color);
}

body {
  padding-inline: var(--body-padding-inline);
  background: var(--background-color);
  color: var(--text-color);
  font-family: var(--font-secondary);
  font-size: var(--font-scale);
  line-height: 1.7;
  letter-spacing: -0.006em;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--aber-selection);
  color: var(--heading-color);
}

a:link {
  color: var(--link-color);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:visited {
  color: var(--visited-color);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--link-hover-color);
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
.image-preview-button:focus-visible {
  outline: 2px solid var(--focus-color);
  outline-offset: 3px;
}

hr {
  height: 1px;
  margin: 2rem 0;
  border: 0;
  background: var(--border-color);
}

/* Header: quiet identity row. */
.site-header {
  margin-bottom: 0;
  padding-top: 2.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border-color);
}

.site-header > .title,
.site-header > .title:visited {
  color: var(--heading-color);
  text-decoration: none;
}

.site-header > .title:hover {
  color: var(--heading-color);
  text-decoration: none;
}

.site-header > .title > h1 {
  color: var(--heading-color);
  font-family: var(--font-main);
  font-size: 1.55rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.025em;
}

.channel-avatar {
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-soft);
}

.channel-description {
  color: var(--muted-color);
  font-size: 0.92em;
  line-height: 1.55;
}

.social-links a,
.social-links .theme-toggle {
  color: var(--aber-subtle);
  opacity: 0.9;
}

.social-links a:hover,
.social-links .theme-toggle:hover {
  color: var(--accent-color);
  opacity: 1;
  text-decoration: none;
}

/* Navigation: mono micro-labels. */
.site-navigation {
  gap: 0.75rem;
  padding: 0.85rem 0 0;
  border-bottom: 0;
  color: var(--muted-color);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
}

.site-header > .site-navigation {
  margin-top: 0.15rem;
}

.site-navigation a,
.site-navigation a:visited {
  color: var(--muted-color);
  text-decoration: none;
}

.site-navigation a:hover,
.site-navigation a[aria-current='page'] {
  color: var(--accent-color);
  text-decoration: none;
}

/* Search: quiet field, accent focus ring. */
.desktop-search,
.mobile-search form {
  border-color: var(--control-border);
  background: var(--surface-color);
  box-shadow: none;
}

.search-field {
  color: var(--muted-color);
}

.search-input {
  color: var(--text-color);
}

.search-input::placeholder {
  color: var(--aber-subtle);
}

.desktop-search:focus-within,
.mobile-search form:focus-within {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px var(--aber-focus-ring);
}

.search-submit:hover {
  color: var(--accent-color);
}

#main-content {
  padding-top: 2rem;
  padding-bottom: 2.5rem;
}

/* Feed: calm reading column, no card stack. */
.posts-feed {
  margin: 0;
  padding: 0;
  list-style: none;
}

.post-entry {
  margin: 0;
  padding: 1.5rem 0 1.75rem;
  border-bottom: 1px solid var(--border-color);
  background: transparent;
}

.posts-feed > li:last-child .post-entry {
  border-bottom: 0;
  padding-bottom: 0;
}

.post-meta {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.7rem;
  color: var(--aber-subtle);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0.01em;
}

.post-meta p {
  margin: 0;
  color: inherit;
}

.post-meta a,
.post-meta a:link,
.post-meta a:visited {
  color: inherit;
  text-decoration: none;
}

.post-meta a:hover {
  color: var(--accent-color);
}

/* Base hides this; re-enable as the quiet timeline accent. */
.timeline-dot {
  display: block;
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: var(--accent-color);
  opacity: 0.85;
}

.hn-story h2 {
  margin: 0 0 0.55rem;
  color: var(--heading-color);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.015em;
}

.hn-story a,
.hn-story a:visited {
  color: var(--heading-color);
  text-decoration: none;
}

.hn-story a:hover {
  color: var(--accent-color);
}

.post-content {
  padding-top: 0;
  color: var(--text-color);
  font-size: 15px;
  line-height: 1.75;
}

.post-content p {
  margin: 0 0 0.85rem;
}

.post-content p:last-child {
  margin-bottom: 0;
}

/* Post metadata tags stay compact; directory pages use .directory-list overrides. */
.post-reactions,
.post-tags {
  margin-top: 0.85rem;
  padding-top: 0;
}

.post-tags {
  gap: 0.4rem;
  color: var(--muted-color);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.4;
}

.post-tags a:link,
.post-tags a:visited {
  color: var(--muted-color);
  text-decoration: none;
}

.post-tags a:hover {
  color: var(--accent-color);
}

.directory h1 {
  margin: 0;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--border-color);
  color: var(--heading-color);
  font-size: 1.7rem;
  font-weight: 600;
  letter-spacing: -0.025em;
}

ul.tags.directory-list,
.directory-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: 0.35rem;
  color: var(--text-color);
  font-family: var(--font-main);
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.015em;
}

ul.tags.directory-list li,
.directory-list li {
  min-width: 0;
  border-bottom: 1px solid var(--border-color);
}

ul.tags.directory-list a,
.directory-list a {
  display: flex;
  min-height: 4.5rem;
  padding: 0.35rem 0.1rem;
  align-items: center;
  color: var(--text-color);
  text-decoration: none;
  overflow-wrap: anywhere;
}

ul.tags.directory-list a:visited,
.directory-list a:visited {
  color: var(--text-color);
}

ul.tags.directory-list a:hover,
.directory-list a:hover {
  color: var(--accent-color);
}

.reaction {
  border: 1px solid var(--control-border);
  border-radius: 999px;
  background: var(--surface-color);
  color: var(--muted-color);
  box-shadow: none;
}

.reaction-paid {
  border-color: var(--reaction-paid-border-color);
  background: var(--reaction-paid-background-color);
  color: var(--reaction-paid-color);
}

.pagination {
  margin-top: 1.75rem;
  color: var(--muted-color);
  font-family: var(--font-mono);
  font-size: 11px;
}

.pagination a,
.pagination a:visited {
  color: var(--muted-color);
  text-decoration: none;
}

.pagination a:hover {
  color: var(--accent-color);
}

/* Footer: mono microcopy. */
.site-footer {
  margin-top: 1.5rem;
  padding: 1.25rem 0 2rem;
  border-top: 1px solid var(--border-color);
  color: var(--aber-subtle);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.01em;
}

.site-footer a,
.site-footer a:visited {
  color: inherit;
}

.site-footer a:hover {
  color: var(--accent-color);
}

#back-to-top {
  border-color: var(--control-border);
  background: var(--surface-color);
  box-shadow: var(--shadow-soft);
}

/* Content chrome: quiet code / quotes / tables. */
.content pre {
  margin: 1.15rem 0;
  padding: 0.95rem 1rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-panel);
  background: var(--code-background-color);
  color: var(--code-color);
  font-family: var(--font-mono);
  font-size: 0.86em;
  line-height: 1.65;
  box-shadow: none;
}

.highlight pre,
.code pre {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.content :not(pre) > code {
  padding: 0.12em 0.35em;
  border-radius: var(--radius-chip);
  background: var(--code-background-color);
  color: var(--code-color);
  font-family: var(--font-mono);
  font-size: 0.88em;
}

.content blockquote {
  margin: 1.15rem 0;
  padding: 0.15rem 0 0.15rem 0.95rem;
  border-left: 2px solid var(--aber-border-strong);
  border-radius: 0;
  background: transparent;
  color: var(--blockquote-color);
  font-style: normal;
}

.content table tr {
  border-top: 1px solid var(--border-color);
  background: var(--surface-color);
}

.content table tr:nth-child(2n),
.content table tr th {
  background: var(--code-background-color);
}

.content .tgme_widget_message_link_preview:has(.link_preview_site_name) {
  border: 1px solid var(--border-color);
  border-left-width: 1px;
  background: var(--surface-color);
}

/* Media strategy A: keep intrinsic size; only cap oversized media.
 * Portrait feed previews must shrink by height on wide/landscape viewports.
 * Critical: keep width:auto (never width:100%) so max-height can shrink used
 * width with the aspect ratio. Base forces full-column width otherwise.
 *
 * DOM note: each photo is button.image-preview-button.image-preview-wrap + sibling
 * .modal. Single-image lists have only one .image-preview-button. Multi rules MUST
 * be scoped with :has(button ~ button) so their high-specificity img:not(...) chain
 * cannot clobber single-image max-height.
 */
:root {
  /* Reading-friendly cap — never near full viewport height. */
  --aber-media-max-height: min(65dvh, 36rem, calc(100svh - 12rem));
  --aber-media-list-max-height: min(52dvh, 28rem, calc(100svh - 16rem));
}

/* Default: any content image, shrink-wrap + center. */
.content img:not(.tg-emoji):not(.sticker):not(.link_preview_image):not(.modal-img),
.content .image-preview-wrap img,
.content .image-preview-button img {
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: var(--aber-media-max-height) !important;
  margin: 1rem auto !important;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-media);
  object-fit: contain;
  object-position: center;
  background: var(--surface-color);
  box-shadow: none;
}

/* Base sets preview wrap to full width. Size the hit-target to the capped
 * image so tall portraits do not claim the whole content column first. */
.content .image-preview-button,
.content .image-preview-wrap {
  display: block !important;
  width: fit-content !important;
  max-width: 100% !important;
  max-height: var(--aber-media-max-height) !important;
  height: auto !important;
  margin-block: 0;
  margin-inline: auto !important;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: center;
}

.content .image-preview-button img,
.content .image-preview-wrap img {
  margin: 0 auto !important;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: var(--aber-media-max-height) !important;
}

/* Multi-image shell: centered flex group, never masonry stretch. */
.content .image-list-container:has(.image-preview-button ~ .image-preview-button) {
  display: flex !important;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  max-width: 100%;
  margin: 1rem auto;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
}

/* Single-image shell: shrink-wrap to the capped portrait and center. */
.content .image-list-container:not(:has(.image-preview-button ~ .image-preview-button)) {
  display: block !important;
  width: fit-content !important;
  max-width: 100% !important;
  margin-block: 1rem;
  margin-inline: auto !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
}

/* Multi items only — lower height cap, half-column max, no auto margins. */
.content .image-list-container:has(.image-preview-button ~ .image-preview-button) > .image-preview-button,
.content .image-list-container:has(.image-preview-button ~ .image-preview-button) > .image-preview-wrap {
  flex: 0 1 auto;
  min-width: 0;
  max-width: min(100%, calc((100% - 0.75rem) / 2)) !important;
  max-height: var(--aber-media-list-max-height) !important;
  margin: 0 !important;
}

.content .image-list-container:has(.image-preview-button ~ .image-preview-button) > .image-preview-button img,
.content .image-list-container:has(.image-preview-button ~ .image-preview-button) > .image-preview-wrap img,
.content
  .image-list-container:has(.image-preview-button ~ .image-preview-button)
  img:not(.tg-emoji):not(.sticker):not(.link_preview_image):not(.modal-img) {
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: var(--aber-media-list-max-height) !important;
  margin: 0 auto !important;
}

/* Odd multi first item (3/5/...): full row, taller single cap, centered. */
.content
  .image-list-container.image-list-odd:has(.image-preview-button ~ .image-preview-button)
  > .image-preview-button:first-child,
.content
  .image-list-container.image-list-odd:has(.image-preview-button ~ .image-preview-button)
  > .image-preview-wrap:first-child {
  flex: 0 1 auto;
  max-width: 100% !important;
  max-height: var(--aber-media-max-height) !important;
  grid-column: auto !important;
  margin-inline: auto !important;
}

.content
  .image-list-container.image-list-odd:has(.image-preview-button ~ .image-preview-button)
  > .image-preview-button:first-child
  img,
.content
  .image-list-container.image-list-odd:has(.image-preview-button ~ .image-preview-button)
  > .image-preview-wrap:first-child
  img {
  max-height: var(--aber-media-max-height) !important;
}

/* Single list item: full single-image cap + center. */
.content .image-list-container:not(:has(.image-preview-button ~ .image-preview-button)) > .image-preview-button,
.content .image-list-container:not(:has(.image-preview-button ~ .image-preview-button)) > .image-preview-wrap {
  max-width: 100% !important;
  max-height: var(--aber-media-max-height) !important;
  margin-inline: auto !important;
  grid-column: auto !important;
}

.content .image-list-container:not(:has(.image-preview-button ~ .image-preview-button)) > .image-preview-button img,
.content .image-list-container:not(:has(.image-preview-button ~ .image-preview-button)) > .image-preview-wrap img,
.content
  .image-list-container:not(:has(.image-preview-button ~ .image-preview-button))
  img:not(.tg-emoji):not(.sticker):not(.link_preview_image):not(.modal-img) {
  max-height: var(--aber-media-max-height) !important;
  margin: 0 auto !important;
}

.content > iframe,
.content video:not(.tgme_widget_message_video):not(.tgme_widget_message_roundvideo) {
  display: block;
  max-width: 100%;
  max-height: var(--aber-media-max-height);
  margin: 1rem auto;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-media);
  background: var(--surface-color);
}

@media (max-width: 37.5rem) {
  :root {
    --body-padding-inline: 16px;
    --aber-media-max-height: min(68svh, 32rem, calc(100svh - 10rem));
    --aber-media-list-max-height: min(48svh, 22rem, calc(100svh - 14rem));
  }

  .site-header {
    padding-top: 1.75rem;
    padding-bottom: 1.15rem;
  }

  .site-header > .title > h1 {
    font-size: 1.35rem;
  }

  #main-content {
    padding-top: 1.5rem;
  }

  .post-entry {
    padding: 1.25rem 0 1.45rem;
  }

  ul.tags.directory-list,
  .directory-list {
    grid-template-columns: 1fr;
    gap: 0;
  }

  ul.tags.directory-list a,
  .directory-list a {
    min-height: 4.75rem;
  }

  /* Two-up on small screens, still height-capped with auto width. */
  .content .image-list-container:has(.image-preview-button ~ .image-preview-button) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    justify-items: center;
    justify-content: center;
    width: 100%;
  }

  .content .image-list-container:not(:has(.image-preview-button ~ .image-preview-button)) {
    display: block !important;
    width: fit-content !important;
    max-width: 100% !important;
    margin-inline: auto !important;
  }

  .content .image-list-container:has(.image-preview-button ~ .image-preview-button) > .image-preview-button,
  .content .image-list-container:has(.image-preview-button ~ .image-preview-button) > .image-preview-wrap {
    max-width: 100% !important;
    max-height: var(--aber-media-list-max-height) !important;
    margin: 0 !important;
  }

  .content
    .image-list-container.image-list-odd:has(.image-preview-button ~ .image-preview-button)
    > .image-preview-button:first-child,
  .content
    .image-list-container.image-list-odd:has(.image-preview-button ~ .image-preview-button)
    > .image-preview-wrap:first-child {
    grid-column: 1 / -1;
    max-width: 100% !important;
    max-height: var(--aber-media-max-height) !important;
    margin-inline: auto !important;
  }

  .content
    .image-list-container:has(.image-preview-button ~ .image-preview-button)
    img:not(.tg-emoji):not(.sticker):not(.link_preview_image):not(.modal-img),
  .content .image-list-container:has(.image-preview-button ~ .image-preview-button) > .image-preview-button img,
  .content .image-list-container:has(.image-preview-button ~ .image-preview-button) > .image-preview-wrap img {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: var(--aber-media-list-max-height) !important;
    margin: 0 auto !important;
    object-fit: contain;
  }

  .content
    .image-list-container.image-list-odd:has(.image-preview-button ~ .image-preview-button)
    > .image-preview-button:first-child
    img,
  .content
    .image-list-container.image-list-odd:has(.image-preview-button ~ .image-preview-button)
    > .image-preview-wrap:first-child
    img,
  .content .image-list-container:not(:has(.image-preview-button ~ .image-preview-button)) > .image-preview-button img,
  .content .image-list-container:not(:has(.image-preview-button ~ .image-preview-button)) > .image-preview-wrap img,
  .content
    .image-list-container:not(:has(.image-preview-button ~ .image-preview-button))
    img:not(.tg-emoji):not(.sticker):not(.link_preview_image):not(.modal-img) {
    max-height: var(--aber-media-max-height) !important;
  }
}