/*
 * 外觀 on the author's reader pages (author-blog-design §4.6; author-blog.md「外觀」): the EFFECTIVE
 * appearance's theme, layout and banner. Loaded by serial/author.html and serial/post.html.
 *
 * Colours. <html style> carries both sets of the theme (AuthorBlogLook): --ab-l-* (light) and --ab-d-*
 * (dark); this file picks one under the site's own switch (html.dark, the anti-flash script — the same
 * mechanism as every other /read page, so a reader's light/dark choice follows them here too).
 *
 * What is themed: the page background and every element marked [data-ab-themed] (crumbs, profile, tabs,
 * blocks, the post's text). Inside, the --sr-* palette the shared stylesheet draws with is pointed at the
 * theme, so cards, chips and links follow without restyling each one.
 *
 * What is NOT themed (design §4.6 last line, §十一): ads, the comment section and the follow button / box.
 * They get the SITE palette back (--abs-*, captured on <html> before any override), and nothing here
 * changes their size or place. AuthorBlogAppearanceReaderIT pins the reset.
 */

html {
  --ab-bg: var(--ab-l-bg, #faf8f5);
  --ab-surface: var(--ab-l-surface, #ffffff);
  --ab-ink: var(--ab-l-ink, #1a1a1a);
  --ab-muted: var(--ab-l-muted, #6b6159);
  --ab-line: var(--ab-l-line, #c9bdb0);
  --ab-accent: var(--ab-l-accent, #7d6340);
  --ab-accent-ink: var(--ab-l-accent-ink, #ffffff);
  /* The site palette as <html> computes it — restored inside the parts that stay un-themed. */
  --abs-background: var(--sr-background);
  --abs-foreground: var(--sr-foreground);
  --abs-card: var(--sr-card);
  --abs-card-foreground: var(--sr-card-foreground);
  --abs-muted: var(--sr-muted);
  --abs-muted-foreground: var(--sr-muted-foreground);
  --abs-secondary: var(--sr-secondary);
  --abs-secondary-foreground: var(--sr-secondary-foreground);
  --abs-accent: var(--sr-accent);
  --abs-accent-foreground: var(--sr-accent-foreground);
  --abs-border: var(--sr-border);
  --abs-primary: var(--sr-primary);
  --abs-primary-foreground: var(--sr-primary-foreground);
  --abs-ring: var(--sr-ring);
}
html.dark {
  --ab-bg: var(--ab-d-bg, #1c1915);
  --ab-surface: var(--ab-d-surface, #26221d);
  --ab-ink: var(--ab-d-ink, #ece6dd);
  --ab-muted: var(--ab-d-muted, #a89c8e);
  --ab-line: var(--ab-d-line, #3d362e);
  --ab-accent: var(--ab-d-accent, #c4a574);
  --ab-accent-ink: var(--ab-d-accent-ink, #1c1915);
}

body.sr-ab { background: var(--ab-bg); color: var(--ab-ink); }

[data-ab-themed] {
  --sr-background: var(--ab-bg);
  --sr-foreground: var(--ab-ink);
  --sr-card: var(--ab-surface);
  --sr-card-foreground: var(--ab-ink);
  --sr-muted: color-mix(in srgb, var(--ab-line) 30%, var(--ab-bg));
  --sr-muted-foreground: var(--ab-muted);
  --sr-secondary: color-mix(in srgb, var(--ab-line) 40%, var(--ab-bg));
  --sr-secondary-foreground: var(--ab-ink);
  --sr-accent: color-mix(in srgb, var(--ab-line) 55%, var(--ab-bg));
  --sr-accent-foreground: var(--ab-ink);
  --sr-border: var(--ab-line);
  --sr-primary: var(--ab-accent);
  --sr-primary-foreground: var(--ab-accent-ink);
  --sr-ring: var(--ab-accent);
  color: var(--sr-foreground);
}

/* Un-themed islands inside a themed region: ads, comments, follow. */
[data-ab-themed] .sr-ad,
[data-ab-themed] .sr-comments,
[data-ab-themed] .sr-follow-slot,
[data-ab-themed] .sr-follow-block,
[data-ab-themed] [data-ab-site] {
  --sr-background: var(--abs-background);
  --sr-foreground: var(--abs-foreground);
  --sr-card: var(--abs-card);
  --sr-card-foreground: var(--abs-card-foreground);
  --sr-muted: var(--abs-muted);
  --sr-muted-foreground: var(--abs-muted-foreground);
  --sr-secondary: var(--abs-secondary);
  --sr-secondary-foreground: var(--abs-secondary-foreground);
  --sr-accent: var(--abs-accent);
  --sr-accent-foreground: var(--abs-accent-foreground);
  --sr-border: var(--abs-border);
  --sr-primary: var(--abs-primary);
  --sr-primary-foreground: var(--abs-primary-foreground);
  --sr-ring: var(--abs-ring);
}
/* The comment section and the follow box keep the site's own text colour too (colour only: nothing here changes
   their size, spacing or place). */
[data-ab-themed] .sr-comments,
[data-ab-themed] .sr-follow-block { color: var(--abs-foreground); }

/* ── 橫幅圖 — desktop 4:1, phones 3:1, each through its own crop frame ── */
.sr-ab-banner { position: relative; width: 100%; max-width: 90rem; margin: 0 auto; aspect-ratio: 4 / 1; overflow: hidden;
  background: var(--ab-surface); }
/* Physical left/top on purpose: the crop frame's x / y are image coordinates (the author's crop), not a reading side. */
.sr-ab-banner img { position: absolute; max-width: none; object-fit: cover;
  width: calc(100% / var(--ab-d-w, 1)); height: calc(100% / var(--ab-d-h, 1));
  left: calc(-100% * var(--ab-d-x, 0) / var(--ab-d-w, 1)); top: calc(-100% * var(--ab-d-y, 0) / var(--ab-d-h, 1)); }
@media (max-width: 639px) {
  .sr-ab-banner { aspect-ratio: 3 / 1; }
  .sr-ab-banner img { width: calc(100% / var(--ab-m-w, 1)); height: calc(100% / var(--ab-m-h, 1));
    left: calc(-100% * var(--ab-m-x, 0) / var(--ab-m-w, 1)); top: calc(-100% * var(--ab-m-y, 0) / var(--ab-m-h, 1)); }
}

/* ── 雙欄 — 自訂文字 and 外部連結 in a right column at ≥1024px; one column below ── */
.sr-ab-columns { display: block; }
.sr-ab-side > .sr-section:first-child { margin-top: 2rem; }
@media (min-width: 1024px) {
  [data-blog-layout="TWO_COLUMN"] .sr-ab-columns { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 0 2.5rem;
    align-items: start; }
  [data-blog-layout="TWO_COLUMN"] .sr-ab-side { position: sticky; top: 4.5rem; }
}

/* ── 作品牆 — serials and posts as large cards (phones: one column) ── */
@media (min-width: 640px) {
  [data-blog-layout="WORK_WALL"] [data-author-block] .sr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-blog-layout="WORK_WALL"] [data-author-block] .sr-blog-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem; border-top: 0; }
  [data-blog-layout="WORK_WALL"] [data-author-block] .sr-blog-list > li { border: 1px solid var(--sr-border); border-radius: 0.75rem;
    background: var(--sr-card); overflow: hidden; }
  [data-blog-layout="WORK_WALL"] [data-author-block] .sr-blog-row { flex-direction: column; align-items: stretch; padding: 0 0 1rem; gap: 0.75rem; }
  [data-blog-layout="WORK_WALL"] [data-author-block] .sr-blog-row-cover { flex: none; width: 100%; border-radius: 0; }
  [data-blog-layout="WORK_WALL"] [data-author-block] .sr-blog-row-body,
  [data-blog-layout="WORK_WALL"] [data-author-block] .sr-blog-row > .sr-blog-date { padding: 0 1rem; }
  [data-blog-layout="WORK_WALL"] [data-author-block] .sr-blog-row-title { font-size: 1.25rem; }
}
@media (min-width: 1024px) {
  [data-blog-layout="WORK_WALL"] [data-author-block] .sr-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}